/* =============================================================================
   GINGER GARLIC — this product's sections only.

   base.css is shared by both products and carries the ketchup --gutter. This
   build used a narrower one, so it is restated here rather than forking the
   whole file over a single token.
   ========================================================================== */

:root { --gutter: clamp(0.25rem, 3vw, 1.5rem); }

/* --- 01 GG HERO -----------------------------------------------------------
   
   ------------------------------------------------------------------------- */
.gg-hero {
    background-image: url(images/gg-hero2.webp);
    /* --gg-ratio: 6 / 5; */
    --gg-x: 35%;
    --gg-y: 24%;
    --gg-w: 73%;
    /* --gg-title: 5cqw;
    --gg-accent: 3.5cqw;
    --gg-sub: 2.9cqw; */
    --gg-splash: 7%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* background: linear-gradient(150deg, #C81219 0%, #8C0A12 55%, #5C0308 100%); */
    margin-top: 63px;
    height: 360px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.gg-hero__stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: var(--gg-ratio);
  background-image: var(--gg-scene);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
}
.gg-hero-lft {
    position: absolute;
    left: -54px;
    bottom: 0;
    width: 73%;
}

/* ---- Copy ---------------------------------------------------------------- */

.gg-hero__content {
  position: absolute;
  left: var(--gg-x);
  top: var(--gg-y);
  width: var(--gg-w);
  z-index: 2;
  text-align: center;
}

.gg-hero__title {
  position: relative;         /* the splash marks anchor to this */
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.36;
  color: #FFFFFF;
  text-wrap: balance;
  text-shadow: 0 6px 18px rgba(58, 0, 4, 0.45);
}

.gg-hero__accent {
  margin-top: 0.5em;
  font-family: var(--font-display);
  font-size:13px;
  font-weight: 700;
  line-height: 1.2;
  color: #F7E3A1;             /* the pale yellow from the reference */
  text-shadow: 0 4px 14px rgba(58, 0, 4, 0.45);
}

.gg-hero__sub {
  margin-top: 0.45em;
  font-family: var(--font-display);
  font-size:12px;
  font-weight: 600;
  line-height: 1.35;
  color: #FFFFFF;
  text-shadow: 0 3px 12px rgba(58, 0, 4, 0.5);
}

/* ---- Splash marks --------------------------------------------------------
   Anchored to the title rather than the stage, so they stay beside the first
   line however it wraps. Swap the src for the GIFs when they arrive — the
   sizing here is width-only, so any aspect ratio drops in.
   ------------------------------------------------------------------------- */

.gg-hero__splash {
    position: absolute;
    top: -20px;
    width: 20%;
    height: auto;
    pointer-events: none;
    color: transparent;
    font-size: 0;
}

.gg-hero__splash--l { left: 9%; }
.gg-hero__splash--r { right: 9%; transform: scaleX(-1);}

.gg-hero .gg-power__leaf--b, .gg-hero .gg-power__leaf--c {
    /* animation: none; */
    width: 26%;
    opacity: 0.15;
}
.gg-hero .gg-power__leaf.gg-power__leaf--c {
    right: 0;
    left: auto;
    bottom: -15px;
    filter: none;
    opacity: 0.2;
}
/* ---- 48em and up: the wide scene from the reference ---------------------- */

@media (min-width: 48em) {
  .gg-hero {
    --gg-scene: url('images/gg-hero2.webp');
    --gg-ratio: 953 / 537;    /* MUST match the landscape export */

    --gg-x: 45%;
    --gg-y: 27%;
    --gg-w: 52%;

    --gg-title: 5.2cqw;
    --gg-accent: 3.5cqw;
    --gg-sub: 2.1cqw;
    --gg-splash: 5%;
  }

  .gg-hero__splash--l { left: -6%; }
  .gg-hero__splash--r { right: -6%; }
}

/* Browsers without container queries fall back to viewport sizing. Close
   enough, because the stage is full-bleed at these widths. */
@supports not (container-type: inline-size) {
  .gg-hero__title  { font-size: clamp(1.15rem, 7vw, 2.6rem); }
  .gg-hero__accent { font-size: clamp(0.9rem, 5vw, 1.8rem); }
  .gg-hero__sub    { font-size: clamp(0.7rem, 3.2vw, 1.1rem); }
}


/* --- 02 GG DISHES ---------------------------------------------------------
   Left panel constant, right side cross-fades. Side by side at every width.

   The dissolve stacks every slide in one grid cell and moves opacity. The
   incoming slide is raised above the outgoing one and fades in over it,
   rather than both meeting at half opacity — otherwise the background shows
   through the middle of each transition and it reads as a flash.
   ------------------------------------------------------------------------- */

.gg-dishes {
  --gg-d-red: #D01A20;
  --gg-d-red-deep: #8C0A12;
  --gg-d-fade: 620ms;         /* keep in step with FADE_MS in gg-dishes.js */
  --gg-d-split: 44fr;         /* width of the red panel against the photo */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #FBF8F3;
}

.gg-dishes__inner {
  display: grid;
  grid-template-columns: minmax(0, var(--gg-d-split)) minmax(0, 40fr);
  align-items: stretch;
  min-height: 240px;
}

/* ---- Constant left panel ------------------------------------------------- */

.gg-dishes__copy {
  container-type: inline-size;
  position: relative;
  z-index: 2;                 /* over the stage, which starts further left */
  display: grid;
  align-content: center;
  padding: 6% 0% 6% 7%;
  background-image: url(images/fund-ingredient-bg.webp);
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  color: #FFFFFF;
  /* The panel sits above the photo, so nothing here should swallow a drag
     that begins on the overlap */
  pointer-events: none;
}

/* Anything inside the panel that ever needs a pointer takes it back */
.gg-dishes__copy a,
.gg-dishes__copy button { pointer-events: auto; }

.gg-dishes__title {
  margin: 0;
  margin-right: 14%;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  text-align: center;
  text-shadow: 0 6px 18px rgba(58, 0, 4, 0.35);
}

/* Sized against the panel, not the viewport. The panel is a fraction of the
   screen, so vw units would scale the type by the wrong measurement and the
   two sizes would drift apart from each other. */
.gg-dishes__sm,
.gg-dishes__lg { display: block; }

.gg-dishes__sm { font-size: 12cqw; }

.gg-dishes__lg {
  font-size: 21cqw;
  line-height: 1;
  margin-top: 4px;
  letter-spacing: 2px;
}

.gg-dishes__splash {
  position: absolute;
  width: 20cqw;
  height: auto;
  pointer-events: none;
  color: transparent;
  font-size: 0;
}

.gg-dishes__splash--a { top: 38%; right: 12%; transform: scaleX(-1); }
.gg-dishes__splash--b { bottom: 52%; left: 0%; }

/* ---- Stage ----------------------------------------------------------------
   z-index 1, never negative. A negative value paints the stage beneath its
   own in-flow ancestors, and hit testing follows paint order — so every
   pointerdown lands on .gg-dishes__inner instead and the drag handler is
   never reached. 1 keeps it under the red panel at 2 while leaving it
   reachable.
   ------------------------------------------------------------------------- */

.gg-dishes__stage {
  position: relative;
  z-index: 1;
  margin-left: -12%;
  height: 100%;
  /* Vertical panning stays with the page; horizontal is ours. Without this
     the browser claims the gesture and the drag never reaches the script. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.gg-dishes__stage img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* One grid cell, every slide in it. Stacking this way rather than with
   position: absolute means the tallest slide still sets the height, so the
   section cannot collapse or jump between photos of different proportions. */
.gg-dishes__track {
  display: grid;
  width: 100%;
  height: 100%;
}

.gg-dish {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;         /* keeps hidden slides out of the a11y tree */
  z-index: 0;
  transition: opacity var(--gg-d-fade) ease;
}

.gg-dish.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;                 /* fades in over the outgoing one */
}

/* Held fully opaque underneath while the incoming slide covers it */
.gg-dish.is-leaving {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* ---- Drag state -----------------------------------------------------------
   The slide being dragged towards. Visible and above the current one, at
   zero opacity until the script raises it — so releasing early lets it fall
   back to 0 through the same transition rather than snapping away.

   Without this rule the peek slide keeps visibility:hidden from .gg-dish and
   the drag appears to do nothing, however correctly the script runs.
   ------------------------------------------------------------------------- */

.gg-dish.is-peek {
  opacity: 0;
  visibility: visible;
  z-index: 3;
}

/* While a finger is down the opacity must follow it exactly. A transition
   here would lag the drag by the fade duration and feel disconnected. */
.gg-dishes__stage.is-dragging .gg-dish { transition: none; }

/* ---- Arrow overlay -------------------------------------------------------- */

.gg-dishes__arrow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;                 /* above every slide, below the nav buttons */
  width: 100px;
  height: 100px;
  pointer-events: none;       /* never blocks a drag */
  display: none;
}

/* ---- Arrows --------------------------------------------------------------
   On the section, so they land on its outer corners rather than inside the
   photo — left over the red, right over the picture, as in the reference.
   ------------------------------------------------------------------------- */

.gg-dishes__nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: clamp(1.6rem, 4.5vw, 2.4rem);
  aspect-ratio: 1;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.gg-dishes__nav svg {
  width: 48%; height: 48%;
  fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

.gg-dishes__nav--prev {
  left: clamp(0.4rem, 1.5vw, 1rem);
  background: #FFFFFF;
  color: var(--gg-d-red);
}

.gg-dishes__nav--next {
  right: clamp(0.4rem, 1.5vw, 1rem);
  background: var(--gg-d-red);
  color: #FFFFFF;
}

.gg-dishes__nav--prev:hover { background: #FFFFFF; color: var(--gg-d-red); }
.gg-dishes__nav--next:hover { background: var(--gg-d-red); color: #FFFFFF; }

.gg-dishes__nav:focus-visible {
  outline: 3px solid var(--gg-d-red);
  outline-offset: 3px;
}

/* ---- Wider: a touch more breathing room --------------------------------- */

@media (min-width: 48em) {
  .gg-dishes { --gg-d-split: 46fr; }
  .gg-dishes__copy { padding: 7% 9% 7% 8%; }
}

@media (prefers-reduced-motion: reduce) {
  .gg-dish, .gg-dishes__nav { transition: none; }
}

/* --- 03 GG POWER ----------------------------------------------------------
   Heading, two cards, a list under each, and sketches drifting at the edges.

   The drift is a CSS keyframe on each sketch with a different duration and a
   negative delay. The negative delay is the part that matters: it starts each
   one partway through its own cycle, so they never bob in unison — which is
   the tell that gives away a canned effect.
   ------------------------------------------------------------------------- */

.gg-power {
  --gg-p-red: #E0181F;
  --gg-p-red-deep: #B3111A;
  --gg-p-yellow: #FFE05A;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 8vw, 3.5rem) 0 clamp(2.25rem, 9vw, 4rem);
  background: #FFFFFF;
}

.gg-power__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2rem);
}

/* ---- Edge sketches -------------------------------------------------------- */

.gg-power__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.gg-power__leaf {
  position: absolute;
  width: clamp(4.5rem, 20vw, 9rem);
  height: auto;
  opacity: 0.55;
  will-change: transform;
  animation: gg-power-float 3s ease-in-out infinite;
}

.gg-power__leaf--a {
  top: 7%;
  left: -12%;
  width: 30%;
}

.gg-power__leaf--b {
  top: 2%;
  right: -7%;
  width: clamp(5rem, 22vw, 10rem);
  animation-duration: 3.5s;
  animation-delay: -0.5s;
}

.gg-power__leaf--c {
  bottom: -5%;
  left: -8%;
  width: clamp(4rem, 27vw, 8rem);
  filter: blur(2px);
  animation-duration: 3s;
  animation-delay: -0.8s;
}

.gg-facts .gg-power__leaf--c {
  bottom: 16%;
  left: -15%;
  filter: none;
}

.gg-power__leaf--d {
  bottom: -4%;
  right: -8%;
  width: clamp(4.5rem, 19vw, 8.5rem);
  transform: scaleX(-1);
  animation-duration: 3.5s;
  animation-delay: -0.5s;
}

@keyframes gg-power-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}
/* ---- Heading -------------------------------------------------------------- */

.gg-power__title {
  position: relative;
  margin: 0 0 clamp(1.25rem, 5vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.14;
  text-align: center;
  color: var(--gg-p-red);
}

.gg-power__line { display: block; }

.gg-power__splash {
  position: absolute;
  top: -0.15em;
  width: clamp(1.1rem, 4.5vw, 1.9rem);
  height: auto;
  /* Red artwork, rather than the white pair recoloured with a filter.
     A hue-rotate chain to reach one specific brand red is unreadable, breaks
     the moment the red changes, and costs a paint on every frame it is
     composited. Two more files is the cheaper answer. */
  color: transparent;
  font-size: 0;
}

.gg-power__splash--l { left: 20%; }
.gg-power__splash--r { right: 20%; }

/* ---- Cards ---------------------------------------------------------------- */

.gg-power__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.6rem, 3vw, 1.25rem);
}

.gg-power__col { margin: 0; text-align: center; }

.gg-power__card {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: clamp(12px, 3.5vw, 22px);
  background: linear-gradient(155deg, var(--gg-p-red) 0%, var(--gg-p-red-deep) 100%);
}

/* The inset yellow outline from the reference. A pseudo-element rather than
   a second border on the card, because a border would change the card's box
   and pull the icon off centre. */
.gg-power__card::before {
  content: '';
  position: absolute;
  inset: clamp(6px, 2.2vw, 12px);
  border: 1.5px solid var(--gg-p-yellow);
  border-radius: clamp(8px, 2.6vw, 16px);
  opacity: 0.85;
  pointer-events: none;
}

.gg-power__ring {
  display: grid;
  place-items: center;
  width: 62%;
  aspect-ratio: 1;
  border: 1.5px solid var(--gg-p-yellow);
  border-radius: 50%;
}

.gg-power__icon {
  width: 66%;
  height: auto;
}
.garlic-b-icon{
  width: 80%;
}
/* ---- Labels and lists ----------------------------------------------------- */

.gg-power__name {
  margin: clamp(0.6rem, 2.5vw, 1rem) 0 clamp(0.4rem, 1.8vw, 0.7rem);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 5.2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--gg-p-red);
}

.gg-power__name span { font-weight: 700; }

.gg-power__list {
  margin: 0;
  padding: 0;
  list-style: none;           /* the marker is drawn below, so it can centre */
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 4.4vw, 1.15rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-900);
}

/* A real list-style marker sits outside the line box and cannot be centred
   with the text. Drawing it as content keeps the bullet and its label
   together as one centred run, which is how the reference sets them. */
.gg-power__list li::before {
  content: '\2022\00a0';
}

/* The reference leaves one item without a bullet */
.gg-power__list li.is-plain::before { content: none; }




/* --- 04 GG LORE -----------------------------------------------------------
   Two red panels, text one side and a photograph the other, alternating.

   One rule set for both. The second panel adds --flip, which reorders the
   two children — nothing is duplicated, so a third panel is a block of
   markup and no new CSS at all.
   ------------------------------------------------------------------------- */

.gg-lore {
  --gg-l-red: #C4141B;
  --gg-l-red-deep: #7E060C;
  --gg-l-gold: #FFD84D;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1rem, 4vw, 2rem) 0;
  background: #FFFFFF;
}

.gg-lore__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(0.75rem, 3vw, 1.25rem);
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 3vw, 1.5rem);
}
.gg-lore__shot.garlic-main {
    position: absolute;
    right: -15px;
    width: 144px;
    top:18px;
}
.gg-lore__shot.ginger-main {
    position: absolute;
    left: -15px;
    width: 172px;
    top:14px;
}
/* ---- Panel ---------------------------------------------------------------- */

.gg-lore__panel {
    container-type: inline-size;
    position: relative;
    overflow: hidden;
    display: grid;
    /* grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); */
    align-items: center;
    gap: clamp(0.5rem, 2.5vw, 1.25rem);
    padding: 40px 20px;
    border-radius: clamp(14px, 4vw, 26px);
    background: radial-gradient(120% 100% at 15% 20%, #D8202A 0%, transparent 62%), linear-gradient(140deg, var(--gg-l-red) 0%, var(--gg-l-red-deep) 100%);
    color: #FFFFFF;
}
.gg-lore__panel .gg-power__leaf.gg-power__leaf--a {
    transform: none;
    animation: none;
    top: -23%;
    opacity: 0.4;
    width: 27%;
}
.gg-lore__panel .gg-power__leaf.gg-power__leaf--c {
    transform: none;
    animation: none;
    bottom: -25%;
    left: 36%;
    opacity: 0.2;
}
/* The reversal. Source order stays text-then-image in both panels, which is
   the order they should be read in — the visual swap is presentational only
   and does not disturb how a screen reader or the tab sequence moves. */
.gg-lore__panel--flip .gg-lore__text { order: 2; margin-left: auto;text-align: right; }
.gg-lore__panel--flip .gg-lore__shot { order: 1; }


/* ---- Copy ----------------------------------------------------------------- */

.gg-lore__text {
    position: relative;
    z-index: 2;
    width: 66%;
}

.gg-lore__text p {
  margin: 0;
  font-family: var(--font-display);
  /* Against the panel, not the viewport: the panel is a fraction of the
     screen, so vw would size this by the wrong measurement. */
  font-size: 4.1cqw;
  font-weight: 600;
  line-height: 1.55;
  text-shadow: 0 3px 12px rgba(58, 0, 4, 0.4);
}

.gg-lore__hi {
  color: var(--gg-l-gold);
  font-weight: 800;
}

/* ---- Photograph ----------------------------------------------------------- */

.gg-lore__shot {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  /* No alt text sprawl across the panel while the file loads */
  color: transparent;
  font-size: 0;
}

/* ---- Panel motifs ---------------------------------------------------------
   Faint botanical outlines behind the copy. Low contrast on purpose — they
   sit under text, and anything stronger competes with it.
   ------------------------------------------------------------------------- */

.gg-lore__motifs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.gg-lore__motifs img {
    position: absolute;
    width: 30cqw;
    height: auto;
    opacity: 0.42;
}

.gg-lore__motifs img:nth-child(1) { top: -12%; left: 0%; rotate: -12deg; }
.gg-lore__motifs img:nth-child(2) { bottom: -10%; left: 34%; rotate: 8deg; }

.gg-lore__panel--flip .gg-lore__motifs img:nth-child(1) {
    top: -5%;
    left: auto;
    right: -5%;
}
.gg-lore__panel--flip .gg-lore__motifs img:nth-child(2) { bottom: -12%; left: auto; right: 30%; }

/* ---- Drifting art outside the panels -------------------------------------- */

.gg-lore__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.gg-lore__float {
  position: absolute;
  width: clamp(5rem, 22vw, 10rem);
  height: auto;
  opacity: 0.5;
  filter: blur(2px);          /* pushes them behind the panels visually */
  will-change: transform;
  animation: gg-lore-float 8s ease-in-out infinite;
}

.gg-lore__float--a { top: 34%; left: -7%; }
.gg-lore__float--b { bottom: 2%; right: -6%; animation-duration: 6.4s; animation-delay: -3.2s; }

@keyframes gg-lore-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}

/* ---- Very narrow: stack, or the copy runs at three words a line ---------- */

@container (max-width: 20rem) {
  .gg-lore__panel,
  .gg-lore__panel--flip { grid-template-columns: minmax(0, 1fr); }
  .gg-lore__text p { font-size: 4.4cqw; }
  .gg-lore__shot { max-width: 60%; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .gg-lore__float { animation: none; }
}




/* --- 05 GG FUN FACTS ------------------------------------------------------
   Two cards per row, wrapping. No carousel.

   The photo sits in a fixed-height band with the image pulled upward out of
   it, so the artwork overlaps the red panel above. That means the card's
   height cannot come from the image — it comes from the band — and every
   card in a row therefore matches regardless of how tall its photograph is.
   ------------------------------------------------------------------------- */

.gg-facts {
  --gg-f-red: #D8151D;
  --gg-f-red-deep: #A00E15;
  --gg-f-gold: #FFD84D;

  --gg-f-gap: clamp(0.6rem, 3vw, 1.1rem);
  --gg-f-band: 42cqw;         /* photo band height, per card */
  --gg-f-lift: 18cqw;         /* how far the photo rides up over the red */

  position: relative;
  padding-block: clamp(1.5rem, 6vw, 2.75rem);
  background: #FFFFFF;
  overflow: hidden;
}

/* ---- Heading -------------------------------------------------------------
   Inline flex, so the two marks sit against the words rather than against
   the heading box.
 
   The previous version positioned them absolutely at left/right 16%. That is
   16% of the full-width <h2>, not of the text inside it — so the gap between
   mark and word changed with every font size, and on a wide screen they
   drifted far out into the whitespace. Flex removes the guesswork: the row
   is only as wide as its contents, and `gap` is the distance from the word.
   ------------------------------------------------------------------------- */
 
.gg-facts__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 2vw, 0.9rem);
  margin: 0 0 clamp(1rem, 8vw, 1.75rem);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 8vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gg-f-red);
  position: relative;
}
 
.gg-facts__splash {
  /* em, not rem or vw: the marks then scale with the heading they flank, so
     the proportion holds at every breakpoint without a second clamp to keep
     in step with the first. */
  width: 50px;
  height: auto;
  /* flex would otherwise squash them when the heading runs out of room */
  flex: none;
  /* Nudges the marks up to sit against the cap height rather than the
     baseline, which is where the reference places them. */
  margin-top: -0.12em;
  color: transparent;
  font-size: 0;
}
.gg-facts__splash.gg-facts__splash--l {
    position: absolute;
    left: 22%;
    top: -12px;
}

.gg-facts__splash.gg-facts__splash--r {
    position: absolute;
    right: 22%;
    top: -12px;
    transform: scaleX(-1);
}
/* A GIF of any proportion drops in: width is set, height follows. If your
   artwork is much wider than tall, raise the width here and the gap above. */
 

/* ---- Grid ----------------------------------------------------------------- */

.gg-facts__grid {
  display: grid;
  /* Two per row, wrapping to the next. minmax(0,…) matters: without it a
     grid column will not shrink below its content, and the long stat would
     push the second card off the screen. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gg-f-gap);
  margin: 0;
  padding-inline: var(--gutter, 1rem);
  list-style: none;
  max-width: 62rem;
  margin-inline: auto;
}

/* ---- Card ----------------------------------------------------------------- */

.gg-fact {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: clamp(10px, 3vw, 16px);
  background: #FFFFFF;
  padding: 4px;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

/* ---- Red half ------------------------------------------------------------- */

.gg-fact__top {
  position: relative;
  /* flex:1 so the red half absorbs any height difference between the two
     cards in a row — the copy varies in length, the photo band does not */
  flex: 1;
  padding: 12cqw 7cqw;
  color: #FFFFFF;
  text-align: center;
  background-image: url('images/fun-facts-bg-garlic.webp');
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  /* Behind the artwork, which is lifted up over this panel */
  z-index: 1;
  border-radius: 6px;
}

.gg-fact-ginger .gg-fact__top {
  background-image: url('images/fun-facts-bg-ginger.webp');
}

.gg-fact-garlic .gg-fact__top {
  background-image: url('images/fun-facts-bg-garlic.webp');
}

.gg-fact__motifs { position: absolute; inset: 0; pointer-events: none; }

.gg-fact__motifs img {
  position: absolute;
  width: 30cqw;
  height: auto;
  opacity: 0.18;
}

.gg-fact__motifs img:nth-child(1) { top: 4%; left: -6%; rotate: -14deg; }
.gg-fact__motifs img:nth-child(2) { bottom: -8%; right: -8%; rotate: 10deg; }

.gg-fact__stat {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 4px 14px rgba(58, 0, 4, 0.4);
}

.gg-fact__text {
  position: relative;
  margin: 0.5em 0 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.gg-fact__hi {
  display: block;
  color: var(--gg-f-gold);
  font-weight: 800;
}

/* ---- Photo half -----------------------------------------------------------
   Both height values are in cqw rather than px, so the band scales with the
   card. A fixed 165px band is half the height of a 330px card on a phone and
   a quarter of it on a tablet — the proportion drifts at every width.
   ------------------------------------------------------------------------- */

.gg-fact__shot {
  position: relative;
  z-index: 2;
  height: 124px;
  background: #FFFFFF;

}

.gg-fact__shot img {
    position: absolute;
    left: 50%;
    top: -17px;
    bottom: 0;
    translate: -50% 0;
    width: 94%;
    height: auto;
    object-fit: contain;
    color: transparent;
    font-size: 0;
    z-index: 9;
}
.gg-fact:nth-child(4) .gg-fact__shot img{
  top: -50px;
}
/* Per-card overrides, when one photograph needs to sit differently.
   Keyed by class rather than :nth-child, so reordering the cards or adding
   a fifth cannot silently move the adjustment onto a different one. */
.gg-fact--tall { --gg-f-band: 50cqw; --gg-f-lift: 26cqw; }
.gg-fact--low  { --gg-f-band: 38cqw; --gg-f-lift: 10cqw; }

/* ---- Wider screens: four across ------------------------------------------ */

@media (min-width: 48em) {
  .gg-facts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}