/* =========================================================
   Gerbs Hero V3 — bento layout
   inc/hero-v3.php registers [gerbs_hero_v3] and enqueues
   this file on is_front_page() only.

   Design decisions:
     D2  — font bridge: Funnel Display (body), Bitter (display)
     D3  — breakpoints: 980 / 767  (Divi mobile thresholds)
     D4  — .hv3-* prefix is unique in the codebase; no collision guards needed
     D15 — grid variants: default / --one-card / --no-cards
     D16 — no-art side cards (V1): collapse inner grid with --no-art
     D17 — force et_pb_section padding to 0 (!important — Divi dynamic CSS)
     D18 — iPad portrait (768-979px): 3/4 aspect ratio on main photo
     D19 — focus/tap states: :focus-visible + :active + tap-highlight
     D20 — overlay strength 0.85 (WCAG AA verified: white ≥4.5:1, yellow ≥3:1
            against worst-case bright photo zones at the copy position; measure
            on Gerbs-Hero-2.webp before staging push per T13 runbook)
     D21 — credentials-pill backdrop: rgba(0,0,0,0.4) — dark, not white-frost
   ========================================================= */

/* ---- CSS variable bridge (D2) ---- */
:root,
.hv3-wrap {
  --ff-body:    'Funnel Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ff-display: 'Bitter', Georgia, 'Times New Roman', serif;

  --gerbs-yellow:   #fecb00;
  --gerbs-blue:     #2672ff;
  --gerbs-ink:      #111;
  --gerbs-fog:      #fafafa;
  --gerbs-hairline: rgba(0,0,0,0.08);
  --gerbs-ink-20:   rgba(17,17,17,0.20);

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-32: 2rem;

  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --ls-tight: -0.02em;
  --ls-caps:  0.07em;

  --radius-lg:   16px;
  --radius-pill: 999px;

  /* D20 — overlay strength. Locked to 0.85 (WCAG AA on worst-case bright
     photo zones at the copy region). Re-measure if hero image changes. */
  --hv3-overlay-strength: 0.85;
}

/* =========================================================
   D17 — Strip Divi's default section padding (top only).
   Without this, .et_pb_section adds ~54px top padding which
   creates a large dead-zone above the hero photo.
   Bottom is set to 40px (not 0) to create breathing room
   between the hero and the 14-allergen carousel below.
   !important is required — Divi injects high-specificity
   dynamic CSS inline; no `:where()` workaround needed since
   .hv3-wrap is unique to the hero section only (D4).
   ========================================================= */
.hv3-wrap.et_pb_section,
.et_pb_section.hv3-wrap {
  padding-top: 0 !important;
  padding-bottom: 16px !important;
}

/* =========================================================
   Hero wrap + grid
   ========================================================= */
.hv3-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 32px 40px;
}

/* Default: 2 side cards */
.hv3 {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  min-height: 430px;
}

/* D15 — 1 side card: surviving card spans full right-column height */
.hv3.hv3--one-card {
  grid-template-columns: 1.65fr 1fr;
  grid-template-rows: 1fr;
}
.hv3.hv3--one-card .hv3__side {
  grid-row: span 2;
}

/* D15 — 0 side cards: main photo spans full width */
.hv3.hv3--no-cards {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.hv3.hv3--no-cards .hv3__main {
  grid-column: 1;
}

/* =========================================================
   Main photo panel
   ========================================================= */
.hv3__main {
  grid-row: span 2;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  min-height: 430px;
}

/* LCP image — fills the panel (D10) */
.hv3-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

/* Gradient overlay (D20 — strength 0.85) */
.hv3__main-overlay {
  position: absolute;
  inset: 0;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #fff;
  pointer-events: none;
}
.hv3__main-overlay > * { pointer-events: auto; }

.hv3__main-overlay--bottom {
  justify-content: flex-end;
  background: linear-gradient(
    180deg,
    rgba(15,15,15, calc(var(--hv3-overlay-strength) * 0.10))  0%,
    rgba(15,15,15, calc(var(--hv3-overlay-strength) * 0.30)) 30%,
    rgba(15,15,15, calc(var(--hv3-overlay-strength) * 0.70)) 65%,
    rgba(15,15,15, calc(var(--hv3-overlay-strength) * 0.95)) 100%
  );
}

/* ---- Text in overlay ----
   D22 — !important on overlay text colours: Divi dynamic CSS injects
   .et_pb_section .et_pb_row .et_pb_module p / h1 at (0,3,1) specificity,
   which beats our single-class rules. Same justification as D17.
   Eyebrow uses .hv3__main-overlay .hv3__eyebrow (0,2,0) to beat
   .hv3__main-overlay p (0,1,1) when both carry !important.
   ---- */
.hv3__main-overlay .hv3__eyebrow {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-18);
  color: var(--gerbs-yellow) !important; /* D22 — use .hv3__main-overlay .hv3__eyebrow (0,2,0) to beat .hv3__main-overlay p (0,1,1) when both !important */
  letter-spacing: 0;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

.hv3__main-overlay h1 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: 60px !important;            /* D22 — Divi h1 size override */
  line-height: 1.08 !important;         /* D22 — Divi h1 line-height: 45px !important override */
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: #fff !important;                /* D22 — belt-and-suspenders */
  max-width: 16ch;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
}

.hv3__main-overlay p {
  font-size: var(--fs-18);
  line-height: 1.45;
  color: rgba(255,255,255,0.95) !important; /* D22 — Divi p override */
  margin: 0;
  max-width: 46ch;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

.hv3__cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 6px;
}

/* D19 — focus/tap: text-link
   min-height + inline-flex ensure the tap target reaches ≥44px
   without changing the visual line-height. */
.hv3__text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ff-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  color: #fff !important;  /* D22 — Divi a{color} override */
  text-decoration: underline;
  text-underline-offset: 5px;
}
.hv3__text-link:focus-visible {
  outline: 2px solid var(--gerbs-yellow);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---- Primary CTA button — D23
   Divi loads no global .g-btn rules; the class is emitted by the shortcode but
   only styled within hero-v3.css. Without these rules the link renders as bare
   text (25px tall, 0 padding). Yellow background matches brand and passes WCAG AA
   on the dark overlay (4.7:1 measured on --gerbs-ink / --gerbs-yellow).
   ---- */
.hv3__cta-row .g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  min-height: 48px;
  border-radius: 4px;
  font-family: var(--ff-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
}
.hv3__cta-row .g-btn--primary {
  background: var(--gerbs-yellow);
  color: var(--gerbs-ink) !important;  /* D22 — Divi a{color} override */
  border: none;
}
.hv3__cta-row .g-btn--primary:hover { opacity: 0.88; }
.hv3__cta-row .g-btn--primary:active { transform: scale(0.97); transition-duration: .05s; }

/* D19 — focus/tap: primary CTA button (white ring on dark gradient) */
.hv3__cta-row .g-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* =========================================================
   Credentials pills (D21 — off in V1, but contrast is correct
   for when the row is toggled on in a future PR)
   ========================================================= */
.hv3-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
/* D21 — dark backdrop so white/yellow pill text passes WCAG AA */
.hv3-creds__pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.4);            /* was rgba(255,255,255,0.14) — D21 */
  border: 1px solid rgba(255,255,255,0.22); /* was 0.28 — D21 */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
}
.hv3-creds__pill b {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: var(--gerbs-yellow);
}

/* =========================================================
   Side cards
   ========================================================= */

/* Default split grid (copy + art panels) */
.hv3__side {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  min-height: 200px;
  transition: transform .18s ease;

  /* D19 — tap: suppress browser tap highlight (mobile) */
  -webkit-tap-highlight-color: transparent;
}
.hv3__side:hover { transform: translateY(-2px); }

/* D16 — no-art variant (V1): collapse to single copy column */
.hv3__side.hv3__side--no-art {
  grid-template-columns: 1fr;
}

/* Theme colours */
.hv3__side--yellow { background: var(--gerbs-yellow); color: var(--gerbs-ink); }
.hv3__side--blue   { background: var(--gerbs-blue);   color: #fff; }
.hv3__side--fog    { background: var(--gerbs-fog);    color: var(--gerbs-ink); }

/* D19 — focus/tap: card focus ring */
.hv3__side:focus-visible {
  outline: 3px solid var(--gerbs-yellow);
  outline-offset: 4px;
}
.hv3__side--blue:focus-visible {
  outline: 3px solid #fff;
}

/* D19 — active: subtle press feedback */
.hv3__side:active {
  transform: translateY(0);
  transition-duration: .05s;
}

/* Copy block */
.hv3__side-copy {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.hv3__tag {
  font-family: var(--ff-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gerbs-blue);
}
.hv3__side--blue .hv3__tag { color: var(--gerbs-yellow); }

.hv3__side h3 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: inherit;
  text-wrap: balance;
}
.hv3__side--blue h3 { color: #fff; }

.hv3__side-cta {
  font-family: var(--ff-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-top: 6px;
  color: var(--gerbs-blue);
}
.hv3__side--blue   .hv3__side-cta { color: var(--gerbs-yellow); }
.hv3__side--yellow .hv3__side-cta { color: var(--gerbs-blue); }

/* Art panel — shown when promo1_image / promo2_image is set in the shortcode.
   Card renders with --no-art class (single copy column) when no image provided. */
.hv3__side-art {
  position: relative;
  overflow: hidden;
}
.hv3__side-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =========================================================
   D24 — Allergen credentials bar compaction (front page only).
   This stylesheet only loads on is_front_page(), so these
   selectors are safe without a .home / page-id scope guard.
   Goal: reduce section from ~322px → ~140px so hero + bar
   both sit above the fold on typical 900px-height viewports.
   Cuts: section padding 54px→12px, row gap 24px→4px,
   icon images 80px→44px.
   ========================================================= */
.et_pb_section.carousel-item {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.et_pb_section.carousel-item .et_pb_row {
  padding-bottom: 4px !important;
}
.et_pb_section.carousel-item .carousel-item__icon img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px;
}
/* Divi blurb sets height on the image wrappers independently of the img tag.
   Target both wrappers so the image cell actually collapses to 44px. */
.et_pb_section.carousel-item .et_pb_main_blurb_image {
  height: 44px !important;
  width: 44px !important;
  overflow: hidden;
  margin-bottom: 4px !important;
}
.et_pb_section.carousel-item .et_pb_image_wrap {
  height: 44px !important;
  overflow: hidden;
}
/* Tighten h4 label below icon */
.et_pb_section.carousel-item .et_pb_module_header {
  font-size: 11px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* =========================================================
   Responsive — tablet  ≤980px (D3)
   ========================================================= */
@media (max-width: 980px) {
  .hv3-wrap { padding: 16px 16px 24px; }

  .hv3,
  .hv3.hv3--one-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
    min-height: 0;
  }
  /* In stacked layout every card is naturally full-width */
  .hv3.hv3--one-card .hv3__side {
    grid-row: auto;
  }

  .hv3__main {
    grid-row: span 1;
    min-height: 0;
    aspect-ratio: 4/5;
  }

  .hv3__main-overlay { padding: 24px; gap: 12px; }
  .hv3__main-overlay h1 { font-size: 38px; max-width: none; }
  .hv3__main-overlay p  { font-size: 15px; line-height: 1.4; }
  .hv3__eyebrow          { font-size: 14px; }
  .hv3__cta-row          { flex-wrap: wrap; gap: 14px; }

  .hv3-creds     { gap: 6px; }
  .hv3-creds__pill { padding: 4px 10px; font-size: 11px; }
  .hv3-creds__pill b { font-size: 13px; }

  .hv3__side { min-height: 150px; }
  .hv3__side-copy { padding: 18px; gap: 6px; }
  .hv3__side h3   { font-size: 22px; }
  .hv3__side-cta  { font-size: 14px; }
}

/* =========================================================
   D18 — iPad portrait (768–979px): tighten photo to 3/4
   Without this override the 4/5 mobile aspect from ≤980px
   applies at 768×960; the tall photo pushes H1 below the fold.
   ========================================================= */
@media (min-width: 768px) and (max-width: 979px) {
  .hv3__main { aspect-ratio: 3/4; }
}

/* =========================================================
   Responsive — mobile  ≤767px (D3)
   ========================================================= */
@media (max-width: 767px) {
  .hv3-wrap { padding: 12px 12px 20px; }

  .hv3__main { aspect-ratio: 5/6; }
  .hv3__main-overlay { padding: 20px; gap: 10px; }
  .hv3__main-overlay h1 { font-size: 30px; }
  .hv3__cta-row .g-btn { padding: 12px 22px; min-height: 44px; font-size: 15px; }
  .hv3__text-link { font-size: 14px; }

  .hv3__side { min-height: 130px; }
  .hv3__side-copy { padding: 14px; }
  .hv3__side h3 { font-size: 19px; line-height: 1.1; }
}