/* ==========================================================================
  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; }
  .front-page .promo-grid { margin-top: 18px !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;
}