/**
 * Homepage hero CTA boxes.
 *
 * Two cards pinned to the bottom of the hero, replacing the single hero button.
 * Rendered by templates/sections/heroFullsize.php from the "Hero boxes" repeater
 * and scoped to `.heroFullsize--withBoxes` so the hero is unchanged everywhere
 * the boxes aren't used. (Standalone stylesheet because the theme's SCSS
 * pipeline can't be rebuilt here; enqueued on the homepage only.)
 */

/* The hero grows to hold the boxes: at least the viewport, taller if needed,
   instead of the fixed/aspect-ratio height used without boxes. */
.heroFullsize--withBoxes {
  height: auto;
  min-height: 100svh;
  max-height: none;
  aspect-ratio: auto;
}

.heroFullsize--withBoxes .heroFullsize__videoWrap {
  height: auto;
  min-height: inherit;
}

.heroFullsize--withBoxes .heroFullsize__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: inherit;
}

/* Heading/intro sit vertically centred in the space above the boxes (matching
   the original hero), while the boxes are pushed to the bottom. */
.heroFullsize--withBoxes .heroFullsize__content {
  flex: 1 1 auto;
  height: auto;
  justify-content: center;
}

.heroFullsize__boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 40px);
  width: 100%;
  margin-top: clamp(32px, 6vh, 80px);
  padding-bottom: clamp(24px, 4vh, 56px);
}

/* Both cards get a mostly-opaque dark backing so the hero image is only faintly
   visible through them. Box 1 keeps a top border only; box 2 is a full card. */
/* Frosted-glass cards: a light tint over a blur of the hero behind them.
   (backdrop-filter is unsupported in a few old browsers, which then just get
   the semi-transparent tint — still readable, just not blurred.) */
.heroFullsize__box {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 2.2vw, 44px) clamp(28px, 2.4vw, 48px);
  border: 1px solid rgba(255, 255, 255, .18);
  background-color: rgba(0, 0, 0, .38);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
}

.heroFullsize__box--highlight {
  border: 1px solid rgba(198, 156, 109, .5);
  background-color: rgba(0, 0, 0, .34);
  background-image: linear-gradient(180deg, rgba(198, 156, 109, .2), rgba(198, 156, 109, .05));
}

.heroFullsize__boxEyebrow {
  font-family: FoundryGridnik, tahoma, arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #c69c6d;
}

.heroFullsize__boxHeading.heading__h4 {
  margin: 14px 0 0;
  color: #fff;
}

.heroFullsize__boxIntro {
  margin-top: 14px;
  max-width: 42ch;
  font-size: clamp(1.4rem, 1vw, 1.6rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
  text-wrap: balance; /* even, ~2-line descriptions */
}

.heroFullsize__boxFooter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: clamp(20px, 1.8vw, 32px);
}

/* The base .button has no arrow; add one for the box CTAs. */
.heroFullsize__boxButton::after {
  content: "→";
  margin-left: 10px;
}

.heroFullsize__boxPhone {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, .72);
}

.heroFullsize__boxPhone a {
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

/* Tablet/mobile: stack the cards a little earlier so they never get cramped. */
@media (max-width: 991px) {
  /* Stacked content rarely fills a full viewport (esp. on taller tablets), so
     drop the 100svh floor — the hero is just as tall as its content + cards,
     with no empty gap underneath. */
  .heroFullsize--withBoxes {
    min-height: 0;
  }

  /* The hero is pulled up under the (transparent) sticky header, and once the
     cards stack the content no longer benefits from vertical centring. Let it
     flow from the top with enough padding to clear the header on every device. */
  .heroFullsize--withBoxes .heroFullsize__content {
    flex: 0 0 auto;
    justify-content: flex-start;
    width: 100%;
    padding-top: clamp(96px, 15vh, 124px);
  }

  .heroFullsize__boxes {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: clamp(24px, 5vh, 40px);
  }
}

/* From 600px up (tablet AND desktop — this pull-up has no upper width bound,
   see .site-content margin-top:-120px in _pageHeaderGeneric.scss) the homepage
   pulls its content up by -120px under the sticky header, vs -57px on phones.
   This guarantees a floor so the heading always clears the header — including
   on short/landscape viewports (e.g. a horizontal tablet) where there isn't
   enough vertical slack left for `justify-content: center` alone to push it
   down. `justify-content: center` (set above, unconditionally) still adds
   extra centring on top of this floor whenever a taller viewport has slack. */
@media (min-width: 600px) {
  .heroFullsize--withBoxes .heroFullsize__content {
    padding-top: clamp(152px, 18vh, 180px);
  }
}