/* ==========================================================================
  PROMO GRID LAYOUT VARIANTS
  ==========================================================================
  The base `.promo-grid` styles live in assets/css/critical.css and define
  the legacy "1+2" layout (1 large left + 2 small right via grid-template-areas).
  This file ADDS alternative layouts selected by the `aic_hero_layout`
  Customizer setting. Selectors use the `[data-layout="..."]` attribute on
  the .promo-grid section. The 1+2 default is intentionally NOT redefined
  here so the existing critical CSS continues to render the homepage
  without FOUC on first load.

  Layouts:
   1+2    base (defined in critical.css)
   3-equal  3 equal cards in a row
   2+2    2x2 grid (4 cards)
   1+4    1 large left + 4 small on the right (2x2)
   4-equal  2x2 grid (4 cards)

  On mobile (≤799px) every layout collapses to a single column stack 
  the critical.css mobile rule already handles `.promo-grid { grid-template-columns: 1fr }`
  when grid-template-areas is overridden via the rules below.
  ========================================================================== */

/* ---------- 3-equal: three columns, single row ---------- */
.promo-grid[data-layout="3-equal"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  grid-template-areas: none;
}
.promo-grid[data-layout="3-equal"] .promo {
  grid-area: auto;
  min-height: var(--h-sm-tablet, 320px);
}
.promo-grid[data-layout="3-equal"] .promo--lg,
.promo-grid[data-layout="3-equal"] .promo--sm {
  grid-area: auto;
  aspect-ratio: auto;
}

/* ---------- 2+2: 2 columns x 2 rows, equal cells ---------- */
.promo-grid[data-layout="2+2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  grid-template-areas: none;
}
.promo-grid[data-layout="2+2"] .promo {
  grid-area: auto;
  min-height: var(--h-sm-tablet, 320px);
}
.promo-grid[data-layout="2+2"] .promo--lg,
.promo-grid[data-layout="2+2"] .promo--sm {
  grid-area: auto;
  aspect-ratio: auto;
}

/* ---------- 1+4: 1 large left + 4 small on right (2x2) ---------- */
.promo-grid[data-layout="1+4"] {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "lg sm1 sm2"
    "lg sm3 sm4";
}
.promo-grid[data-layout="1+4"] .promo {
  grid-area: auto;
  min-height: var(--h-sm-tablet, 280px);
}
.promo-grid[data-layout="1+4"] .promo--lg {
  grid-area: lg;
  min-height: var(--h-lg-desktop, 600px);
}
.promo-grid[data-layout="1+4"] .promo[data-slot="2"] { grid-area: sm1; }
.promo-grid[data-layout="1+4"] .promo[data-slot="3"] { grid-area: sm2; }
.promo-grid[data-layout="1+4"] .promo[data-slot="4"] { grid-area: sm3; }
.promo-grid[data-layout="1+4"] .promo[data-slot="5"] { grid-area: sm4; }

/* ---------- 4-equal: 2x2 (alias variant of 2+2 but explicit) ---------- */
.promo-grid[data-layout="4-equal"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  grid-template-areas: none;
}
.promo-grid[data-layout="4-equal"] .promo {
  grid-area: auto;
  min-height: var(--h-sm-tablet, 320px);
}
.promo-grid[data-layout="4-equal"] .promo--lg,
.promo-grid[data-layout="4-equal"] .promo--sm {
  grid-area: auto;
  aspect-ratio: auto;
}

/* ---------- New small slots (3, 4) inherit base .promo--sm look ---------- */
/* Legacy critical.css only styles .sm1 / .sm2 figure positions. For sm3/sm4
  we provide reasonable defaults so the figure does not collapse. */
.promo--sm.sm3 .promo-figure,
.promo--sm.sm4 .promo-figure {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 60%;
  height: auto;
  z-index: 1;
  transition: transform .35s ease;
  pointer-events: none;
}
.promo--sm.sm3 .promo-shape,
.promo--sm.sm4 .promo-shape {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  z-index: 1;
  transition: transform .35s ease;
  pointer-events: none;
}

/* ---------- Tablet (≤1199): reduce 1+4 to 2 columns to avoid cramping ---------- */
@media (max-width: 1199px) {
  .promo-grid[data-layout="1+4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "lg lg"
      "sm1 sm2"
      "sm3 sm4";
  }
  .promo-grid[data-layout="3-equal"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .promo-grid[data-layout="3-equal"] .promo:nth-child(3) {
    grid-column: span 2;
  }
}

/* ---------- Mobile (≤799): always stack to single column ---------- */
@media (max-width: 799px) {
  .promo-grid[data-layout="3-equal"],
  .promo-grid[data-layout="2+2"],
  .promo-grid[data-layout="1+4"],
  .promo-grid[data-layout="4-equal"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: none;
    gap: 14px;
  }
  .promo-grid[data-layout="3-equal"] .promo,
  .promo-grid[data-layout="2+2"] .promo,
  .promo-grid[data-layout="1+4"] .promo,
  .promo-grid[data-layout="4-equal"] .promo {
    grid-area: auto;
    min-height: var(--h-all-mobile, 320px);
    grid-column: auto;
  }
  .promo-grid[data-layout="1+4"] .promo--lg {
    grid-area: auto;
  }
}


/* === HARD MOBILE OVERRIDE 2026-05-18 ===
  Forces single-column stack for every layout below 768px regardless of
  cascade ordering issues with critical.css. Ensures the promo figure
  stays inside the card and doesn't overflow.
  ============================================================ */
@media (max-width: 768px) {
  .promo-grid,
  .promo-grid[data-layout="1+2"],
  .promo-grid[data-layout="3-equal"],
  .promo-grid[data-layout="2+2"],
  .promo-grid[data-layout="1+4"],
  .promo-grid[data-layout="4-equal"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas: none !important;
    gap: 14px !important;
    margin: 12px 0 20px !important;
  }

  .promo-grid .promo,
  .promo-grid[data-layout] .promo,
  .promo-grid .promo--lg,
  .promo-grid .promo--sm {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: auto !important;
    min-height: 280px !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Promo figure: keep contained, no negative offsets on mobile */
  .promo-grid .promo .promo-figure,
  .promo-grid .promo .promo-figure,
  article.promo.promo--lg .promo-figure,
  article.promo.promo--sm.sm1 .promo-figure,
  article.promo.promo--sm.sm2 .promo-figure,
  .promo--sm.sm3 .promo-figure,
  .promo--sm.sm4 .promo-figure {
    position: absolute !important;
    right: -8px !important;
    bottom: -8px !important;
    width: 55% !important;
    max-width: 200px !important;
    height: auto !important;
    z-index: 1 !important;
  }

  /* Shape decoration smaller on mobile */
  .promo-grid .promo .promo-shape {
    width: 120px !important;
    height: 120px !important;
    right: -30px !important;
    top: -30px !important;
  }

  /* Content keeps room for the figure */
  .promo-grid .promo .promo-content {
    max-width: 65% !important;
    padding: 20px !important;
  }

  /* Headings smaller */
  .promo-grid .promo .promo-title-h2 {
    font-size: 22px !important;
    margin-left: 0 !important;
  }
  .promo-grid .promo ul {
    font-size: 14px !important;
    margin-left: 16px !important;
  }
  .promo-grid .promo .promo-btn {
    padding: 10px 18px !important;
    font-size: 14px !important;
  }
}

/* On really narrow phones (≤420): figure smaller + tucked into corner,
 * but stays fully visible (was opacity .35 which looked broken). */
@media (max-width: 420px) {
  .promo-grid .promo .promo-figure {
    opacity: 1 !important;
    width: 50% !important;
    max-width: 50% !important;
    right: -8px !important;
    bottom: -10px !important;
  }
  .promo-grid .promo .promo-content {
    max-width: 60% !important;
  }
}


/* === SPACING + FIGURE CONTAIN FIX 2026-05-18 ===
  1) Pull promo-grid down so it doesn't sit underneath the sticky header.
  2) Contain promo-figure inside .promo (no negative offsets that overflow:hidden eats).
  ================================================================ */

/* Top breathing room under the sticky header (kept in sync with critical.css). */
.front-page .container:first-of-type {
  padding-top: 32px !important;
}
.front-page .promo-grid {
  margin-top: 24px !important;
}

/* Figure: keep inside the card, no negative offset. Width tuned so it doesn't
  cover the text column on the large card. */
article.promo.promo--lg .promo-figure {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 60% !important;
  max-width: 640px !important;
  height: auto !important;
  object-fit: contain;
  object-position: right bottom;
}
article.promo.promo--sm.sm1 .promo-figure,
article.promo.promo--sm.sm2 .promo-figure,
article.promo.promo--sm.sm3 .promo-figure,
article.promo.promo--sm.sm4 .promo-figure {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 56% !important;
  max-width: 280px !important;
  height: auto !important;
  object-fit: contain;
  object-position: right bottom;
}

/* Shape decoration  keep inside too */
article.promo .promo-shape {
  right: -30px;
  top: -30px;
  width: 150px;
  height: 150px;
}

/* Promo container: keep overflow hidden but ensure border-radius is preserved */
article.promo {
  overflow: hidden;
}

@media (max-width: 1199px) {
  .front-page .promo-grid { margin-top: 18px !important; }
  article.promo.promo--lg .promo-figure { width: 58% !important; max-width: 480px !important; }
}

@media (max-width: 768px) {
  /* More breathing room under the sticky menu on mobile only */
  .front-page .container:first-of-type { padding-top: 28px !important; }
  /* Container padding-top is enough on mobile; drop the extra margin. */
  .front-page .promo-grid { margin-top: 0 !important; }
}


/* === EDGES + RADIUS FIX 2026-05-18 ===
  - Bigger border-radius for premium look
  - Figure has breathing room from bottom edge (max-height 90%)
  - Content padding-bottom so button doesn't touch the figure
  - Equal min-height ensures cards align
  ====================================================== */

article.promo {
  border-radius: 18px !important;
  overflow: hidden;
}

article.promo .promo-bg {
  border-radius: 18px;
}

article.promo .promo-content {
  padding: 28px 28px 32px 28px !important;
  z-index: 3;
  position: relative;
}

article.promo .promo-figure {
  max-height: 90% !important;
  object-fit: contain !important;
  object-position: right bottom !important;
}

/* Large card — figure dominates the card (proportional to the small cards,
   which it didn't before: width was clamped to 50% and looked tiny). Single
   source of truth for the lg figure size; the earlier 60%/640 rule is the
   fallback, this one wins. max-height keeps a gap from the bottom edge. */
article.promo.promo--lg .promo-figure {
  width: 64% !important;
  max-width: 600px !important;
  max-height: 92% !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Small cards  figure occupies less width, more text room */
article.promo.promo--sm .promo-figure {
  max-height: 85% !important;
  width: 50% !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Button doesn't get clipped  ensure it stays above figure */
article.promo .promo-btn {
  position: relative;
  z-index: 5;
  align-self: flex-start;
  margin-top: auto;
}

/* Equalize cards in 1+2 layout (default)  large is 2x small height */
@media (min-width: 1200px) {
  .promo-grid[data-layout="1+2"] .promo--lg,
  .promo-grid[data-layout="1+2"] {
    --h-lg-desktop: 480px;
    --h-sm-tablet: 230px;
  }
  .promo-grid[data-layout="1+2"] .promo--sm {
    min-height: calc((var(--h-lg-desktop, 480px) - 20px) / 2) !important;
  }
}

/* Mobile: smaller radius (12px) so doesn't look gigantic on narrow screen */
@media (max-width: 768px) {
  article.promo,
  article.promo .promo-bg { border-radius: 14px !important; }
  article.promo .promo-content { padding: 20px 20px 24px 20px !important; }
}

/* === EQUALISED LAYOUTS: large card figure must not dominate ===
   When the operator switches the hero to an all-equal grid (2+2 / 4-equal /
   3-equal), the .promo--lg card is the SAME size as the rest — so its figure
   should match the small-card sizing instead of staying at the dominating 64%.
   Otherwise the big photo looks oversized and inconsistent across the tiles. */
.promo-grid[data-layout="2+2"] .promo--lg .promo-figure,
.promo-grid[data-layout="4-equal"] .promo--lg .promo-figure,
.promo-grid[data-layout="3-equal"] .promo--lg .promo-figure {
  width: 52% !important;
  max-width: 300px !important;
  max-height: 85% !important;
}
/* And in 1+4 the lg card is tall again — give its figure room like the default */
.promo-grid[data-layout="1+4"] .promo--lg .promo-figure {
  width: 60% !important;
  max-width: 460px !important;
  max-height: 90% !important;
}

/* === CLS FIX: reserve the figure box from its intrinsic ratio ===
   On slow connections the promo image used to grow upward when it finally
   decoded (it's absolutely positioned at bottom:0, height was unconstrained),
   producing the big hero layout shift Lighthouse flagged. Giving the figure an
   explicit aspect-ratio (matching the HTML width/height attrs) reserves its
   height before load, so nothing moves. object-fit keeps the photo undistorted. */
article.promo.promo--lg .promo-figure {
  aspect-ratio: 82 / 70 !important;
  height: auto !important;
  max-height: none !important;
}
article.promo.promo--sm .promo-figure {
  aspect-ratio: 52 / 42 !important;
  height: auto !important;
  max-height: none !important;
}

/* === DESKTOP LG CARD — bigger, balanced figure (2026-06-10) ===
   On wide screens the lg card is ~780px wide, so a figure capped at 64% / 600px
   sat bottom-right and read tiny (~25% of the card) next to the small cards.
   Grow the figure footprint to a dominant-but-balanced ~72% / 720px and pull the
   text column in so the photo and copy share the card cleanly. Gated to the real
   desktop grid (>=1200, the only place the 1+2 lg card is wide) so tablet/mobile
   sizing is untouched. aspect-ratio stays 82/70 (intrinsic), so the reserved box
   matches critical.css and there is NO layout shift. This block is intentionally
   LAST so its width/max-width win the !important source-order race.
   ANTI-CLS: mirrored in critical.css (same >=1200 width/max-width + aspect-ratio
   and the >=1023 heading/list/btn rhythm below). */
@media (min-width: 1200px) {
  .promo-grid[data-layout="1+2"] .promo--lg .promo-figure,
  article.promo.promo--lg .promo-figure {
    width: 72% !important;
    max-width: 720px !important;
    aspect-ratio: 82 / 70 !important;
    max-height: none !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  /* Narrow the text column so the larger figure has uncontested room. */
  .promo-grid[data-layout="1+2"] .promo--lg .promo-content,
  article.promo.promo--lg .promo-content {
    max-width: 47% !important;
  }
}

/* Premium heading / list / CTA rhythm for the big card. Kept at >=1023 and
   IDENTICAL in critical.css so first paint (inlined) and the deferred sheet
   agree — no text reflow / CLS when front-hero-layouts.css loads. */
@media (min-width: 1023px) {
  article.promo.promo--lg .promo-content { gap: 18px; }
  article.promo.promo--lg .promo-title-h2 {
    font-size: clamp(34px, 3.2vw, 46px);
    line-height: 1.06;
    letter-spacing: -0.028em;
  }
  article.promo.promo--lg .promo-title ul { margin: 16px 0 22px 0; }
  article.promo.promo--lg .promo-title li {
    font-size: 17px;
    line-height: 1.55;
    margin-bottom: 9px;
  }
  article.promo.promo--lg .promo-btn {
    height: 48px;
    padding: 0 30px;
    font-size: 15.5px;
  }
}