/**
 * Homepage-only section styles. Loaded only on the front page
 * (see inc/enqueue.php).
 */

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */

.home-hero {
  position: relative;
  color: var(--color-white);
  background: var(--color-ink); /* graceful fallback if no image/video is set yet */
  min-height: clamp(560px, 68vw, 820px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Content sits near the bottom, but this top padding is a hard
     floor (part of the box itself, not just typical spacing) that
     the floating transparent header can never be crowded past — even
     on mobile, where the stacked heading + subheading + two buttons
     can get tall enough to otherwise reach the top of the section. If
     content + both paddings ever exceeds min-height, the section
     simply grows taller rather than letting content encroach on this
     reserved space. */
  padding-top: clamp(8rem, 6rem + 6vw, 10rem);
  padding-bottom: var(--space-2xl);
}

.home-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-hero__image,
.home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sits above the fallback/poster image once it can play. */
.home-hero__video {
  z-index: 1;
}

/* Paused and hidden for prefers-reduced-motion by assets/js/hero-video.js
   — the fallback image shows through once this is hidden. */
.home-hero__video.is-paused-for-reduced-motion {
  display: none;
}

/* YouTube background — iframe injected after page load by
   assets/js/hero-video.js. Fades in over the hero image once playing. */
.home-hero__youtube {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
  opacity: 0;
  transition: opacity 1s ease;
}

.home-hero__youtube.is-playing {
  opacity: 1;
}

/* Scales the 16:9 player to always cover the hero, cropping the
   overflow — the iframe equivalent of object-fit: cover. */
.home-hero__youtube iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  transform: translate(-50%, -50%);
  border: 0;
}

.home-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    100deg,
    rgba(20, 37, 36, 0.82) 0%,
    rgba(20, 37, 36, 0.55) 45%,
    rgba(20, 37, 36, 0.25) 75%
  );
}

.home-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xl);
}

.home-hero__content {
  max-width: 46rem;
}

.home-hero__heading {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.home-hero__subheading {
  font-size: var(--fs-body-lg);
  color: var(--color-white);
  max-width: 34rem;
}

.home-hero__buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.home-hero__buttons .btn--on-primary {
  --btn-bg: rgba(255, 255, 255, 0.92);
  --btn-bg-hover: rgba(255, 255, 255, 1);
}

.home-hero__buttons .btn--secondary {
  --btn-bg: rgba(168, 227, 231, 0.92); /* --color-secondary at 92% */
  --btn-bg-hover: rgba(168, 227, 231, 1);
}

/* ---------------------------------------------------------------
   Feature strip — individually outlined pill cards on a tinted band
   --------------------------------------------------------------- */

.home-features {
  padding-block: var(--space-xl);
}

.home-features__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
}

.home-features__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  text-align: center;
  padding: var(--space-md) var(--space-sm);
  background: var(--color-white);
  border: 1.5px solid var(--color-secondary);
  border-radius: var(--radius-lg);
}

.home-features__heading {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-primary-600);
}

.home-features__desc {
  color: var(--color-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
}

/* ---------------------------------------------------------------
   Intro + About
   --------------------------------------------------------------- */

.home-intro {
  padding-top: var(--space-xl);
  /* No bottom padding — .home-services (right after this) also has
     none of its own, so the two sections sit flush with no gap. */
  padding-bottom: 0;
}

.home-intro .section-head {
  margin-bottom: var(--space-xl);
}

/* Full-bleed split panel: breaks out of .container to reach both
   viewport edges. Left panel is a gradient-filled content column
   whose text aligns with the container above it; right panel is a
   plain CSS background image (not an <img>) that covers its column
   edge-to-edge with no rounded corners, bleeding to the viewport's
   right edge. */
.about-split {
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items: stretch;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.about-split__content {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, var(--color-bg-muted) 0%, var(--color-white) 100%);
  /* Horizontal padding doubled from the previous var(--space-md) —
     kept as a calc() on that same fluid token rather than a fixed
     value, so it still scales responsively with the viewport. */
  padding: var(--space-xl) calc(var(--space-md) * 2);
}

.about-split__content h2,
.about-split__content h3 {
  margin-block: var(--space-xs) var(--space-sm);
}

.about-split__body {
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.about-split__body p + p {
  margin-top: var(--space-sm);
}

.about-split__media {
  background-size: cover;
  background-position: center;
  min-height: 28rem;
}

@media (max-width: 61.99rem) {
  .about-split {
    grid-template-columns: 1fr;
  }

  .about-split__content {
    padding-inline: var(--container-pad);
    order: 1;
  }

  .about-split__media {
    order: -1;
    min-height: 0;
    height: 20rem;
  }
}

/* ---------------------------------------------------------------
   Services — cards overlap the left edge of a large section photo
   --------------------------------------------------------------- */

/* No padding-top or -bottom of its own: top, so it sits flush against
   .home-intro right above (which likewise has no padding-bottom of
   its own); bottom, so the photo runs flush to the section's true
   bottom edge and touches .home-team's tinted background with no gap
   — the photo matches .home-services__layout's height, which is sized
   by its normal-flow content, i.e. the button and its own
   padding-bottom below, so the button still gets clear space above
   that edge even though the section itself has none. */
.home-services {
  padding-top: 0;
  padding-bottom: 0;
}

.home-services__layout {
  position: relative;
  /* This section's own, wider container cap — the nested .container
     below inherits it instead of the sitewide 1280px --container-max,
     and the photo-width formula (which also reads this variable)
     scales up with it automatically. */
  --container-max: 1800px;
}

.home-services__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* Bleeds to the true viewport edge (.home-services__layout is no
     longer nested inside .container). The 0.62 factor is sized to
     reach roughly halfway through the grid's 2nd column: content
     starts at 24% of the container, column 1 is ~24% wide, and half
     of column 2 is another ~14% — 24 + 24 + 14 = ~62%.
     min(100vw, --container-max) — not a bare --container-max — so this
     tracks the *actual* rendered container width. Below that max-width,
     the container itself is just 100vw, and using the constant here
     instead would leave the photo pinned to the wider figure, badly
     overlapping the heading/button beside it (they follow the real,
     narrower width via percentages). */
  width: calc(max(0px, (100vw - var(--container-max)) / 2) + min(100vw, var(--container-max)) * 0.62);
  box-shadow: var(--shadow-md);
  background-size: cover;
  background-position: center;
}

.home-services__content {
  position: relative;
  z-index: 1; /* sits above .home-services__photo (position:absolute) so the cards that overlap it render in front, not behind */
}

/* Percentages below are relative to .home-services__content, which
   (unlike the grid/CTA) carries no margin-left of its own — but that's
   the content *box*, inset from the photo's viewport-relative width by
   .container's own left padding, so lining these up with the same 62%
   the photo uses left them a few px short and visibly overlapping.
   66% instead gives the heading/CTA a clear, deliberate margin past
   the photo's edge instead of just barely (or not quite) clearing it.
   The grid is the only piece meant to overlap the photo. */

.home-services__content .section-head {
  margin-left: 66%;
  /* .home-services itself has no padding-top (it sits flush against
     .home-intro above), so the heading needs its own clearance —
     scoped here rather than on the section, or the photo would no
     longer touch .home-intro either. */
  padding-top: 50px;
}

.home-services__layout.has-no-photo .home-services__content .section-head,
.home-services__layout.has-no-photo .home-services__grid,
.home-services__layout.has-no-photo .home-services__cta {
  margin-left: 0;
}

.home-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-left: 24%;
}

/* The first column's cards overlap the photo — semi-transparent so
   the photo shows through behind them, rather than the previous
   fully opaque cards. Scoped to the homepage teaser only; the full
   Services overview page's cards (which don't overlap anything) stay
   fully opaque via the shared .service-card rule in cards.css. */
.home-services__grid .service-card {
  background: rgba(255, 255, 255, 0.85);
}

.home-services__cta {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-xl);
  /* The cards intentionally overlap the photo, but the button
     shouldn't — nudge it clear of the photo's right edge (see the
     .section-head comment above for why this isn't the same 62% the
     photo uses). */
  margin-left: 66%;
  /* .home-services has no padding-bottom of its own (the photo runs
     flush to the section's edge — see .home-services below), so this
     is the only thing keeping the button from sitting right on top of
     .home-team's tinted background. */
  padding-bottom: var(--space-2xl);
}

/* ---------------------------------------------------------------
   Team
   --------------------------------------------------------------- */

.home-team {
  /* Half the sitewide .section top padding — the section above
     already runs flush with no bottom padding of its own (see
     .home-services), so this is purely about how much breathing room
     the team content itself gets under the tinted background, not
     about closing a gap between the two sections. */
  padding-top: calc(var(--space-2xl) * 0.5);
}

.home-team .section-head {
  margin-bottom: calc(var(--space-xl) * 0.25);
}

/* ---------------------------------------------------------------
   Reviews (third-party plugin shortcode)
   --------------------------------------------------------------- */

.home-testimonials {
  padding-block: var(--space-xl);
}

.home-testimonials__shortcode {
  margin-top: var(--space-lg);
}

/* ---------------------------------------------------------------
   Blog + FAQ — one combined, light-grey section: a floating
   latest-article card (left) with heading/intro/CTA (right), and a
   white rounded FAQ panel beneath that the card's bottom edge
   overlaps into, so the two present as a single unit.
   --------------------------------------------------------------- */

.home-blog-faq {
  background: var(--color-bg-muted);
}

.home-blog-faq__top {
  position: relative;
  z-index: 2;
  display: grid;
  /* minmax(0, ...) on both tracks, not bare 1fr — a plain 1fr track's
     implicit minimum width is its content's min-content size, which
     for the left column (a horizontally-scrolling carousel next to
     fixed-width nav buttons) can be quite wide; without the explicit
     0 floor the grid refuses to shrink it, forcing the whole section
     — and the page — wider than the viewport in the single-column
     mobile layout below. */
  grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
  gap: var(--space-2xl);
  /* Top-aligned, not centered — with a much taller card in the left
     column, centering pushed the right column's Read More button
     down into the overlapping FAQ panel below. */
  align-items: start;
}

/* .home-blog-faq__carousel also carries .team-row-wrap (shared with
   the team section), which has no min-width:0 of its own — belt and
   suspenders alongside the minmax(0, ...) tracks above, since this is
   the actual grid item the browser measures. */
.home-blog-faq__carousel {
  min-width: 0;
}

.home-blog-faq__shelf {
  flex: 1;
  min-width: 0;
}

.home-blog-faq__row {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.home-blog-faq__row::-webkit-scrollbar {
  display: none;
}

.home-blog-faq__intro .section-head {
  margin-bottom: 0;
}

.home-blog-faq__intro .btn--link {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: var(--space-sm);
  font-size: var(--fs-body-lg);
}

.blog-teaser-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.blog-teaser-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-teaser-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.blog-teaser-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: var(--space-2xs);
  padding: var(--space-md);
  text-align: center;
  background: var(--color-ink);
}

.blog-teaser-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: calc(var(--fs-h5) * 0.7);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-white);
}

.blog-teaser-card__excerpt {
  color: var(--color-text-on-dark-muted);
}

.home-blog-faq__panel {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  /* Generous top padding relative to the overlap below keeps the FAQs
     heading clear of the card overlapping the panel above it. */
  padding: var(--space-2xl) var(--space-lg) var(--space-xl);
  margin-top: var(--space-xl);
}

@media (min-width: 62rem) {
  .home-blog-faq__panel--overlap {
    margin-top: -3rem;
  }
}

.faq-split__heading h2 {
  font-size: calc(var(--fs-h2) * 1.25);
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */

@media (max-width: 61.99rem) {
  /* The photo/card overlap only works with 3 card columns of
     breathing room — below that it stacks normally instead. */
  .home-services__photo {
    position: static;
    /* Back in normal flow and no longer full-bleed — .home-services__photo
       isn't inside .container (that's what lets it reach the true
       viewport edge at desktop widths), so it needs its own matching
       inset here to stay flush with the rest of the page on mobile. */
    width: auto;
    margin-inline: var(--container-pad);
    aspect-ratio: 16 / 9;
    margin-bottom: var(--space-lg);
  }

  .home-services__content .section-head,
  .home-services__grid,
  .home-services__cta {
    margin-left: 0;
  }

  .home-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-blog-faq__top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  /* The base clamp's floor (8rem) is tuned for the single-line desktop
     header. Below desktop, the utility bar can wrap to two lines
     (everything down to ~30rem still shows all three items — see
     header.css), pushing the floating transparent header taller than
     that floor and crowding the heading. This gives it more room to
     clear. */
  .home-hero {
    padding-top: clamp(10rem, 8rem + 5vw, 12.5rem);
  }
}

@media (max-width: 36rem) {
  .home-hero {
    min-height: 560px;
    padding-top: 12rem;
  }

  /* A left-anchored gradient reads fine on a wide hero, but on a
     narrow screen the text spans the full width, so it needs even
     darkening behind it rather than a fade toward one side. */
  .home-hero__scrim {
    background: linear-gradient(180deg, rgba(20, 37, 36, 0.5) 0%, rgba(20, 37, 36, 0.78) 100%);
  }

  .home-features__list {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .home-services__grid {
    grid-template-columns: 1fr;
  }

  /* 20% smaller than the sitewide h1 on phones. */
  .home-hero__heading {
    font-size: calc(var(--fs-h1) * 0.8);
  }

  /* Blog carousel: the card takes the full container width, with the
     prev/next buttons moved to a row beneath it instead of eating
     into the card's width on either side. */
  .home-blog-faq__carousel {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xs) var(--space-sm);
  }

  .home-blog-faq__shelf {
    flex: 0 0 100%;
    order: -1;
  }

  .blog-teaser-card__body {
    padding: var(--space-sm);
  }

  .home-blog-faq__panel {
    padding: var(--space-lg) var(--space-sm);
  }
}