/* OD Nutra remake: frame 8, "Exact standard to confirm".
   Lino's wireframe (2026-11-11): white page, a large rounded image on the left, on the right the
   eyebrow and headline, a row of small rounded image cards (the third cut by the screen edge),
   then the current slide's title and text ("GMP practices").
   It is a carousel (Lino 2026-11-11, second pass): to change slides the images change places.
   Every small card travels one place left, the first one grows over the large image, and the
   next one slides in from past the screen edge (.std__slot--next). Never a fade.
   Motion in the pinned mode (tablets and desktops, see the reel script):
   - frame 7's left card grows sideways into the large image while its photo is replaced by the
     first slide rising from below;
   - its right card shrinks into the first small card (its photo replaced the same way), and the
     other two small cards slide out from behind it;
   - then scrolling plays the slides; a small card jumps to its slide.
   Everywhere else the cards are tapped (and the large image swiped) to change slides.
   Reduced motion: slides change instantly, nothing slides or grows. */

.std {
  --thumb-r: clamp(12px, 1.2vw, 18px);
  --std-x: calc(var(--frame) + var(--pad-x));   /* the navbar's inset: the images line up with the logo (Lino 18:30) */
  position: relative; z-index: 3;
  background: var(--white);
}
.std:focus { outline: none; }
.std__stage {
  position: relative; overflow: hidden;   /* the last small card is cut by the screen edge */
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "big" "thumbs" "copy";
  padding: calc(var(--frame) + var(--bar-clear) + 28px) var(--std-x) clamp(56px, 12vw, 96px);
}
@media (max-width: 759px) { .std { --std-x: calc(var(--frame) + 16px); } }   /* the phone bar's inset */
/* The card cut by the screen edge fades into the page instead of ending in a hard cut (Lino 18:30).
   The script sets where: over the cut card's row, from its left edge to the screen edge. */
.std__stage::after {
  content: ""; position: absolute; z-index: 6; pointer-events: none;
  top: var(--fade-y, 0); height: var(--fade-h, 0); right: 0; width: var(--fade-w, 0);
  background: linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / 0.82) 62%, #fff);
}

.std__head { grid-area: head; }
.std__eyebrow { margin: 0 0 clamp(2px, 0.4vw, 6px); font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-700); }
.std__title {
  margin: 0; font-size: clamp(2.125rem, 0.9rem + 3.3vw, 5rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.045em;
  color: var(--navy-900);
}
.std__title em { font-style: normal; color: var(--teal-700); }   /* Lino 2026-11-12: lead words in teal like the other white sections, 6.6:1 on white */

/* ---------- Image boxes ---------- */
.std__slot { position: relative; min-width: 0; min-height: 0; }
.std__slot--big { grid-area: big; margin-top: 28px; aspect-ratio: 1; border-radius: var(--scene-r); }
.std__thumbs { grid-area: thumbs; display: flex; gap: 10px; margin: 12px calc(-1 * var(--std-x)) 0 0; }
.std__slot--thumb { flex: 0 0 42vw; aspect-ratio: 171 / 100; border-radius: var(--thumb-r); }
.std__box {
  position: absolute; inset: 0; display: block; margin: 0; padding: 0; border: 0; font: inherit; color: inherit;
  overflow: hidden; isolation: isolate; border-radius: var(--scene-r); background: var(--navy-950, #070f1f);
}
.std__box--thumb { border-radius: var(--thumb-r); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.std__box--thumb:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 3px; }
.std__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.std__img:not(.is-0) { visibility: hidden; }   /* the script takes over the slide positions */

/* ---------- Slide title and text ---------- */
.std__copy { grid-area: copy; display: grid; overflow: hidden; margin-top: 24px; padding-bottom: 0.08em; }
.std__item { grid-area: 1 / 1; max-width: 26em; }
.std__item:not(.is-0) { visibility: hidden; }
.std__name {
  margin: 0; font-size: clamp(1.625rem, 0.9rem + 1.5vw, 2.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em;
  color: var(--navy-900);
}
.std__text { margin: clamp(8px, 0.8vw, 12px) 0 0; font-size: var(--text-body); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-body); }

/* Headline lines rise out of their own line box; eyebrow and slide copy fade up after them */
.std .ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.std .ln > span { display: inline-block; transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.std .ln + .ln > span { transition-delay: 90ms; }
.std__eyebrow, .std__copy { transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.std__copy { transition-delay: 240ms; }
.js .std:not(.is-in) .ln > span { transform: translate3d(0, 105%, 0); }
.js .std:not(.is-in) .std__eyebrow, .js .std:not(.is-in) .std__copy { opacity: 0; transform: translate3d(0, 14px, 0); }

/* ---------- Tablets and desktops, landscape: the wireframe's two columns ---------- */
@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .std__stage {
    grid-template-columns: calc(53.2vw - var(--std-x)) minmax(0, 1fr); column-gap: 2.8vw;   /* right edge where it was */
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "big head" "big thumbs" "big copy";
    padding: calc(var(--frame) + var(--bar-clear) + clamp(16px, 4svh, 40px)) 0 clamp(16px, 4.6svh, 44px) var(--std-x);
  }
  .std__slot--big { margin: 0; aspect-ratio: 1.12; }
  .std__head { padding-top: clamp(16px, 6svh, 64px); }
  .std__thumbs { gap: 1.4vw; margin: clamp(24px, 8svh, 88px) 0 0; }
  .std__slot--thumb { flex-basis: 17.9vw; }
  .std__copy { align-self: end; margin: 32px 0 0; padding-bottom: clamp(8px, 4svh, 48px); }
}
/* Short laptop screens: the head, the small cards and the slide copy all share one screen height,
   so the cards follow the height too and the copy keeps clear of them (Lino 2026-11-11) */
@media (min-width: 760px) and (min-aspect-ratio: 1/1) and (max-height: 820px) {
  .std__head { padding-top: clamp(8px, 3svh, 28px); }
  .std__thumbs { margin-top: clamp(20px, 5svh, 44px); }
  .std__slot--thumb { flex-basis: min(17.9vw, 30svh); }
}
/* ---------- Tablets in portrait: one column, the image takes the free height ---------- */
@media (min-width: 760px) and (max-aspect-ratio: 1/1) {
  .std__slot--big { margin-top: 32px; aspect-ratio: 4 / 3; }
  .std__thumbs { gap: 14px; margin-top: 14px; }
  .std__slot--thumb { flex-basis: 30vw; }
  .std__copy { margin-top: 28px; }
}

/* The script places the boxes in the stage (and moves them between the slots); the slots only hold the layout */
.std.is-placed .std__slot { position: static; }
.std.is-placed .std__box { inset: auto; left: 0; top: 0; }

/* ---------- Pinned mode: the section is a scroll runway, the stage is held on screen ---------- */
.reel-on .std {
  /* the stage starts over frame 7's last screen, so its top part lets frame 7 show through */
  background: linear-gradient(to bottom, transparent var(--std-h, 100svh), var(--white) var(--std-h, 100svh));
}
.reel-on .std__stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
.reel-on .std__slot--big { aspect-ratio: auto; }
.reel-on .std:not(.is-live) .std__box { opacity: 0; }
.reel-on .std:not(.is-live) .std__stage { pointer-events: none; }
.reel-on .verify.is-handed .vcard { visibility: hidden; }   /* the stage's boxes have taken over */
@media (min-width: 760px) and (max-aspect-ratio: 1/1) {
  .reel-on .std__stage { grid-template-rows: auto minmax(0, 1fr) auto auto; padding-bottom: clamp(24px, 3svh, 40px); }
}

@media (prefers-reduced-motion: reduce) {
  .std .ln > span, .std__eyebrow, .std__copy { transition: none !important; }
  .js .std:not(.is-in) .ln > span, .js .std:not(.is-in) .std__eyebrow, .js .std:not(.is-in) .std__copy { transform: none; opacity: 1; }
}