/* Home Team Construction — outcomes + form row

   COMPONENTS 07 + 08 ARE ONE ROW, NOT TWO SECTIONS.

   This file exists because of a porting mistake, and the mistake is worth
   recording so it is not repeated for the other rows.

   In the review artifact every component is the contents of an Elementor
   column, not a section: the artifact could assume a container around it and
   therefore never described one. Component 07 is explicitly "the LEFT COLUMN of
   that row" and component 08 is the white card that sits in the right column
   and overlaps it. The lab confirms it —
   `{ tpl: "cmp-outcomes", media: "cmp-form", bg: "split" }` — a 50/50 row,
   align-items:stretch, 48px gap, inside a 1400px container with 32px gutters.

   Ported into this theme they became two stacked full-width sections with the
   26-card service grid between them, which lost the entire design: a
   full-bleed dark panel landing directly against the dark service grid above
   it, and the form alone on white as "a block next to nothing" — the exact
   failure component 08's own notes say the card treatment was invented to fix.

   This wrapper restores the row. The measurements are the artifact's:
   container and gutters from `.sim-row`, the even split and the stretch from
   `.sim-row--split`, and the -s6 pull on the card from component 08's own
   `@media (min-width:1151px)` rule.

   The two children keep their vertical padding — that is what makes the panel
   and the card start level — and give up their horizontal padding and
   centring to this wrapper, since inside a row they are columns, not sections.
*/

.htc-outcomes-row{
  box-sizing:border-box;
  width:100%;
  /* Gutters outside the container width, so the row's edges line up with the
     sections above and below that centre an __inner at --htc-container. */
  max-width:calc(var(--htc-container) + var(--htc-s4) * 2);
  margin-inline:auto;
  padding-inline:var(--htc-s4);
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:stretch;
  column-gap:var(--htc-s5);
}

/* Inside the row these are columns. Their own section chrome comes off:
   longhands rather than shorthands, so each still owns its vertical rhythm. */
.htc-outcomes-row > .htc-outcomes,
.htc-outcomes-row > .htc-form{
  max-width:none;
  margin-inline:0;
  padding-inline:0;
}

/* The panel fills the column height so the card has a full edge to overlap. */
.htc-outcomes-row > .htc-outcomes{ display:flex; }
.htc-outcomes-row > .htc-outcomes > .htc-outcomes__panel{ flex:1 1 auto; }

@media (min-width:1151px){
  /* The overlap that ties the card to the panel beside it. s6 against the
     row's s5 gap leaves the card sitting s2 over the panel's edge. */
  .htc-outcomes-row > .htc-form > .htc-form__card{
    /* Positioned so the card's shadow and background paint above the panel.
       Non-positioned siblings paint their backgrounds before any inline
       content, so without this the panel's text would sit on top of the card
       wherever the two overlap. */
    position:relative;
    z-index:1;
    margin-left:calc(-1 * var(--htc-s6));
  }
}

@media (max-width:1150px){
  /* Stacked, and this is the live behaviour, not a guess: rendered at 900px
     the live page puts the form card below the panel rather than beside it.
     Below the site's custom 1150 breakpoint a 50/50 split leaves each field in
     the card about 100px wide — "EMAIL (OPTIONAL)" wraps and the phone
     placeholder truncates, which is the same failure component 08's own mobile
     rule was written to avoid, only worse. */
  .htc-outcomes-row{
    grid-template-columns:minmax(0, 1fr);
    row-gap:var(--htc-s3);
  }

  /* The facing paddings come off so the pair stays a pair once stacked. The
     row keeps the section's rhythm above the panel and below the card; between
     them the row-gap is the whole distance, which is how the live page reads. */
  .htc-outcomes-row > .htc-outcomes{ padding-bottom:0; }
  .htc-outcomes-row > .htc-form{ padding-top:0; }
}