/* Home Team Construction — homepage hero row

   The wrapper for component 02 and the video beside it. Every measurement is
   the artifact's, read off its own row simulation:

     .sim-row         max-width 1400, padding 0 32px, flex, align-items center,
                      gap 48px
     .sim-row__main   flex 1 1 56%  — the hero copy
     .sim-row__aside  flex 0 1 44%  — the video
     .sim-row--photo  the photograph under a flat rgba(255,255,255,.86) wash

   THE WASH IS 86% WHITE, NOT A DARK SCRIM. That is unusual enough to be worth
   stating, because the instinct on a photo-backed hero is to darken and flip
   the text to white. This hero does the opposite: the photograph is washed out
   almost to paper so the black type in hero-hook.css keeps working unchanged.
   Drop the wash below about 80% and the lead paragraph stops clearing AA.

   THE BLOCK PADDING IS ON THE ROW, not on hero-hook, which is the opposite of
   what outcomes-form.css does and the difference is worth the words. There the
   panel is the taller column and its own padding is what sets the row's
   height. Here the taller column is the video card, which has no padding of
   its own, so leaving the rhythm on hero-hook let the card run flush to the
   section's top and bottom edges while the copy beside it sat comfortably
   inset. The row owns it, and hero-hook gives up its block padding along with
   its gutters and centring.
*/

.htc-hero-home{
  box-sizing:border-box;
  width:100%;
  background-color:var(--htc-white);
  background-image:
    linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)),
    url("https://www.hometeamconstructionli.com/wp-content/uploads/2025/03/Brick-Chimney-Autumn-Background-Suffolk-County-New-York.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.htc-hero-home *,
.htc-hero-home *::before,
.htc-hero-home *::after{ box-sizing:border-box; }

.htc-hero-home__inner{
  display:flex;
  align-items:center;
  gap:var(--htc-s5);
  max-width:calc(var(--htc-container) + var(--htc-s4) * 2);
  margin-inline:auto;
  padding:var(--htc-s6) var(--htc-s4);
}

/* Inside the row these are columns, not sections. */
.htc-hero-home .htc-hero{
  flex:1 1 56%;
  min-width:0;
  max-width:none;
  margin-inline:0;
  padding:0;
}

.htc-hero-home .htc-video{
  flex:0 1 44%;
  min-width:0;
}

@media (max-width:1150px){
  /* Stacked, copy first.
     An earlier revision put the video above the copy on the argument that it
     is the shorter column and it is the proof. Reversed on request: the h1 and
     the two CTAs are what the page is for, and burying them under a video card
     costs the reader the headline, the value line and both buttons before they
     have been told what the page is. Source order already reads copy then
     video, so the fix is the absence of an order property, not a new one. */
  .htc-hero-home__inner{
    flex-direction:column;
    align-items:stretch;
    gap:var(--htc-s4);
    padding-block:var(--htc-s6);
  }

  .htc-hero-home .htc-hero{
    flex:1 1 auto;
  }

  .htc-hero-home .htc-video{
    flex:1 1 auto;
  }
}