/* =========================================================
   Foodlab N.V. — Aladey
   SHOWCASE HERO  —  all five products on the landing page

   Modelled on the De Molen concept: coloured stage, one product large in
   the middle, a roster of the whole range along the bottom, auto-advancing
   with a progress bar.

   TWO DELIBERATE DEPARTURES FROM THAT CONCEPT
   1. NO PRICE AND NO ADD-TO-CART. Foodlab has never supplied prices, and
      the cart is switched off pending the client's decision on online
      ordering. The right-hand column carries pack size and real product
      facts instead — nothing is invented to fill the space.
   2. THE PACKS ARE CUT OUT. The five pack shots were photographed on white
      with a studio reflection. They were cut in this repo, not by hand:
      a border flood fill (so white INSIDE the clear plastic survives), then
      the largest connected component, then a dark-row cutoff to drop the
      reflection. A plain colour key was tried first and bled the background
      through both cassava bags. Masters are in assets/_originals/pack-*.
      Shipped as WebP-with-alpha (~53-72 KB each, against ~700 KB as PNG).

   Own namespace (.shero) rather than reusing .hero, so nothing here can
   collide with the live hero in styles.css.
   ========================================================= */

.shero {
  /* overridden per product by script-showcase.js */
  --shero-bg: #B0141B;
  --shero-deep: #7E0D12;
  --shero-fg: #FBF4E4;
  --shero-accent: #F8D040;

  position: relative;
  color: var(--shero-fg);
  background: var(--shero-bg);
  transition: background .8s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.shero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(62% 52% at 50% 100%, var(--shero-deep), transparent 70%),
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.07), transparent 60%);
  transition: background .8s var(--ease);
  pointer-events: none;
}

/* The concentric rings already used on the light hero, reused here in the
   inverse so the two directions still feel like one brand. */
.shero__rings {
  position: absolute; inset: -6%;
  display: grid; place-items: center;
  z-index: 0; color: var(--shero-fg);
  opacity: .16; pointer-events: none;
}
.shero__rings svg { width: min(104vmin, 1000px); height: auto; }

.shero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: clamp(16px, 2vw, 26px);
  padding-block: clamp(20px, 2.6vw, 34px) clamp(18px, 2.4vw, 30px);
  /* announce bar (~33px) + sticky header (76px) */
  min-height: calc(100svh - 109px);
}

.shero__cols {
  display: grid;
  /* The middle column is wide enough that the HEIGHT cap is what limits
     every pack. At 1.1fr the two cassava bags (which are wider than the
     pasta ones) ran out of width first and rendered ~60px shorter, so the
     five looked inconsistent as the carousel advanced. */
  grid-template-columns: .95fr 1.45fr .8fr;
  gap: clamp(18px, 3vw, 48px);
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- left: the pitch ---------- */
.shero__left { max-width: 400px; }
.shero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--shero-accent);
  margin-bottom: 14px;
}
.shero__headline {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--shero-fg);
}
.shero__body {
  color: rgba(251,244,228,.82);
  font-size: 1.02rem;
  line-height: 1.6;
  margin-top: 16px;
  max-width: 40ch;
}
.shero__cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 26px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--shero-fg);
  color: var(--brand-700);
  font-weight: 700; font-size: .96rem;
  transition: transform .2s var(--ease), background .25s, color .25s;
}
.shero__cta:hover {
  background: var(--shero-accent);
  color: var(--ink);
  transform: translateY(-2px);
}
.shero__cta svg { transition: transform .2s var(--ease); }
.shero__cta:hover svg { transform: translateX(3px); }

/* ---------- centre: the pack ---------- */
.shero__stage {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(6px, 1.2vw, 16px);
  min-width: 0;
}
.shero__arrow {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(251,244,228,.12);
  color: var(--shero-fg);
  transition: background .2s, transform .2s var(--ease);
}
.shero__arrow:hover { background: rgba(251,244,228,.24); transform: scale(1.06); }

/* The packs are real cut-outs now (assets/pack-*.webp), so they float on
   the colour instead of sitting on a white tile. The drop-shadow follows the
   alpha edge rather than a box, which is the whole point of cutting them. */
/* Sized by HEIGHT, not by a square box. The packs are portrait (roughly
   560x640), so a square container letterboxed them: the pack rendered
   smaller than its box, and each one landed at a different visual size
   depending on its own aspect. Capping the image height instead makes all
   five read the same size and keeps their true proportions. */
.shero__tile {
  flex: 0 1 auto;
  min-width: 0;
  align-self: center;
  display: grid; place-items: center;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.shero__tile img {
  width: auto; height: auto;
  max-height: min(38vh, 330px);
  max-width: 100%;
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.42));
}
/* If a browser cannot read WebP-with-alpha the script falls back to the
   original white-background JPEG; this keeps that case tidy rather than
   showing a bare white rectangle on the red. */
.shero__tile img.is-fallback {
  background: var(--paper);
  border-radius: clamp(20px, 2.4vw, 32px);
  filter: none;
  box-shadow: 0 26px 50px -24px rgba(0,0,0,.5);
}
/* the swap: everything that changes fades together */
.shero.is-changing .shero__tile { opacity: 0; transform: translateY(8px) scale(.985); }
.shero.is-changing .shero__headline,
.shero.is-changing .shero__body,
.shero.is-changing .shero__facts { opacity: 0; }
.shero__headline, .shero__body, .shero__facts { transition: opacity .35s var(--ease); }

/* ---------- right: the facts ---------- */
/* This is where De Molen puts price / size / add-to-cart. There are no
   prices here, so it carries the pack size at that same visual weight and
   then only facts that are actually printed on the pack. */
.shero__right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 16px; text-align: right;
}
.shero__size {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--shero-fg);
}
/* .82 not .6: at .6 these muted labels measured 3.17:1 against the lightest
   of the five product grounds, under the 4.5 AA floor. .80 is the minimum
   that clears it on ALL five; .82 leaves a margin. */
.shero__size-label {
  display: block;
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(251,244,228,.82);
  margin-top: 6px;
}
.shero__facts { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.shero__facts li {
  list-style: none;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  color: var(--shero-fg);
  background: rgba(251,244,228,.13);
  box-shadow: inset 0 0 0 1px rgba(251,244,228,.18);
}

/* ---------- the roster: the whole range, always visible ---------- */
.shero__roster {
  display: flex; align-items: stretch; justify-content: center;
  gap: clamp(5px, .8vw, 12px);
  padding-top: clamp(8px, 1.2vw, 14px);
  border-top: 1px solid rgba(251,244,228,.2);
}
.shero__roster button {
  flex: 1 1 0; min-width: 0; max-width: 190px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 8px;
  border-radius: 14px;
  background: transparent;
  color: var(--shero-fg);
  text-align: left;
  transition: background .25s var(--ease), transform .2s var(--ease);
}
.shero__roster button:hover { background: rgba(251,244,228,.11); transform: translateY(-2px); }
.shero__roster button[aria-selected="true"] {
  background: rgba(251,244,228,.17);
  box-shadow: inset 0 0 0 1px rgba(251,244,228,.32);
}
.shero__thumb {
  flex: none; width: 40px; height: 44px;
  display: grid; place-items: center;
  border-radius: 9px; overflow: hidden;
}
.shero__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.shero__rmeta { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.shero__ridx {
  font-family: var(--font-display); font-weight: 700;
  font-size: .66rem; letter-spacing: .12em;
  color: rgba(251,244,228,.82);
}
.shero__rname {
  font-weight: 600; font-size: .82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.shero__progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(0,0,0,.22); z-index: 2;
}
/* scaleX, not width: animating width relayouts on every frame, whereas a
   transform is composited. transform-origin keeps it growing from the left. */
.shero__progress span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--shero-accent);
  transition: transform .12s linear;
}

@media (prefers-reduced-motion: reduce) {
  /* No auto-advance and no ring drift; the roster still switches on click. */
  .shero__progress { display: none; }
  .shero__tile, .shero__headline, .shero__body, .shero__facts { transition: none; }
}

@media (max-width: 1000px) {
  /* Facts move under the copy; the pack keeps the full width of the row. */
  .shero__cols { grid-template-columns: 1fr; gap: 22px; }
  /* Pitch first, THEN the pack — so the product sits directly under the
     "See the range" button rather than pushing the headline off the top of
     the screen. Same order as the live hero on index.html. */
  .shero__left { max-width: 100%; order: 0; }
  .shero__stage { order: 1; }
  .shero__right {
    order: 2;
    flex-direction: row; align-items: center; justify-content: flex-start;
    text-align: left; gap: 18px; flex-wrap: wrap;
  }
  .shero__size-label { display: inline; margin: 0 0 0 6px; }
  .shero__facts { justify-content: flex-start; }
  .shero__inner { min-height: 0; padding-block: 26px 22px; }
  .shero__tile img { max-height: min(34vh, 250px); }
}

@media (max-width: 700px) {
  /* The roster becomes a swipeable strip rather than five squeezed columns. */
  .shero__roster {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .shero__roster::-webkit-scrollbar { display: none; }
  .shero__roster button { flex: 0 0 auto; width: 152px; scroll-snap-align: start; }
  .shero__arrow { display: none; }
  .shero__tile img { max-height: 40vh; }
}