/* =========================================================================
   NEVER BUILD ALONE — component set 5495:35571 · 420 5508:36416 · 1024 5495:35530
   · 1440 5495:35489 · 1920 5492:17575
   A heading block over a ground of white folds, then three Cells: a photo,
   title, copy and a round arrow, over a rule, and a figure under it.
   Stacked at 420, side by side from 1024.

   Each Cell takes the card hover — title to blue, arrow ring to ink, the
   photo's slow zoom — but not the card's 1px outline: a Cell has no side
   padding, so the outline lands flush against the text and cuts across
   the rules. Keyboard focus keeps the page's focus ring.
   ========================================================================= */


/* The ground (Figma, bottom up): Warm White, a warm grey (#877C68) at 30%,
   White 64% → White 80% left to right (Figma calls those two "White 80"
   and "White"), and over all of it a photo of white folds at 14%, covering
   the frame.

   The ground lives on the pseudo-elements, not on the section, so it can
   reach up into the seam: the shared seam wedge (seams.css) is a plain
   `inherit` fill and would cut the photo off at the join. Both layers start
   one seam-depth above the section — ::after the colours, ::before the
   photo at 14% (a background layer cannot take an opacity of its own) —
   the photo covers that taller box (pinned to the bottom, so the section
   itself frames it as Figma does, a touch larger), and both layers' top
   edge is the wedge: the same grow bend, on the same scroll range, with the
   folds running on into it. */
.s-never {
  overflow-x: clip;                 /* sideways only: the ground rises above the top */
  isolation: isolate;
}
.s-never::after,
.l-section + .l-section.s-never::before {   /* this ::before replaces the shared seam */
  --seam-top: calc(var(--seam-swing, 0px) + 1px);
  content: "";
  position: absolute;
  inset: calc(-1 * var(--seam-top)) 0 0;
  height: auto;
  pointer-events: none;
  clip-path: polygon(0 var(--seam-top), 68.8% var(--seam-top), 100% var(--seam-top), 100% 100%, 0 100%);
  animation: none;
}
.s-never::after {
  z-index: -2;
  background:
    linear-gradient(to right, rgba(255, 255, 255, .64), var(--color-white-80) 97%),
    linear-gradient(rgba(135, 124, 104, .3), rgba(135, 124, 104, .3)),   /* Figma: raw #877C68 30%, no token */
    var(--color-warm-white);
}
.l-section + .l-section.s-never::before {
  z-index: -1;
  background: url("../../../assets/home2/never/folds.jpg") center bottom / cover no-repeat;
  opacity: .14;
}
@supports (animation-timeline: view()) {
  .s-never::after,
  .l-section + .l-section.s-never::before {
    animation: never-seam linear both;
    animation-timeline: view();
    /* seams.css runs from the join at the foot of the window to the join at
       its top; this box starts --seam-top above the join */
    animation-range: cover calc(var(--seam-top) + 1px) cover calc(100vh + var(--seam-top) + 1px);
  }
}
@keyframes never-seam {
  from { clip-path: polygon(0 var(--seam-top), 68.8% var(--seam-top), 100% var(--seam-top), 100% 100%, 0 100%); }
  to   { clip-path: polygon(0 var(--seam-top), 68.8% 0%,              100% var(--seam-top), 100% 100%, 0 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .s-never::after,
  .l-section + .l-section.s-never::before { animation: none; }
}

/* ── Header ────────────────────────────────────────────────────────── */
.s-never__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-l);
  width: 100%;
}
.s-never__eyebrow { gap: var(--spacing-stack-xs); }
.s-never__title,
.s-never__lede { width: 100%; max-width: 984px; }   /* Figma: max 984 */

/* ── Body ──────────────────────────────────────────────────────────── */
.s-never__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
}
.s-never__cell {
  display: flex;
  flex-direction: column;
}
@media (any-hover: hover) {
  .s-never__cell.c-card:is(:hover, :focus-within) { box-shadow: none; }
}
/* the title's link stands for the whole Cell */
.s-never__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.s-never__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
  padding-block: var(--spacing-stack-m);
  border-bottom: 1px solid var(--color-black-20);
}
.s-never__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;            /* Figma: 458.67 × 258 (16:9); owner's rule for pictures */
  border-radius: 4px;               /* Figma: 4, no token */
}
.s-never__media img { width: 100%; height: 100%; object-fit: cover; }
/* Figma's placeholder mark on the third photo, drawn as it is */
.s-never__fpo {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  color: #d000ff;                   /* Figma: raw #D000FF, no token */
  white-space: nowrap;
}
.s-never__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;                        /* Figma: 20 (10 at 1024), no token */
  width: 100%;
}
.s-never__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-m);
  width: 100%;
}
.s-never__stat {
  display: flex;
  align-items: center;
  padding-block: var(--spacing-stack-m);
}
.s-never__stat p { white-space: nowrap; }
.s-never__br { display: none; }

/* ── 1024: three columns ──────────────────────────────────────────── */
@media (min-width: 1024px) {
  .s-never__eyebrow { gap: var(--spacing-inline-s); }

  .s-never__body {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-grid-gutter);
  }
  .s-never__cell {
    flex: 1 1 0;
    min-width: 0;
  }
  .s-never__text { gap: 10px; }                      /* Figma: 10 at 1024 */
  .s-never__content { min-height: 130px; }           /* Figma: min 130 */
}

/* ── 1440: the 44 arrows ──────────────────────────────────────────── */
@media (min-width: 1392px) {
  /* the 1440 frame sets the heading box to 783.5, which breaks it after
     "experts," (the 1920 frame is back on the 984 measure) */
  .s-never__title { max-width: 783.5px; }
  .s-never__text { gap: 20px; }
  /* the middle figure is the one Figma lets wrap (it does at 1440) */
  .s-never__cell:nth-child(2) .s-never__stat p { white-space: normal; }
  /* Figma's 44 arrow draws the 32 glyph 13/9 larger, half a pixel low */
  .s-never__arrow { --size: 44px; }
  .s-never__arrow .c-arrow__icon svg { scale: 1.4444; translate: 0 .5px; }
}

/* ── 1920: the 1920 frame breaks "Mission Control / Agent" by hand ── */
@media (min-width: 1920px) {
  .s-never__title { max-width: 984px; }
  .s-never__content { min-height: 205px; }           /* Figma: min 205 */
  .s-never__br { display: inline; }
}

/* ── Figma's whole-pixel text boxes ───────────────────────────────────
   base.css now rounds trimmed text boxes like Figma, but its h1–h4 / p
   margin reset comes after that rule at the same (zero) specificity and
   cancels it on exactly these elements — at 420 the seven text boxes in
   the column then add up to 1.6px short. Restated here until base.css
   orders the two the other way. */
.s-never :is(h2, h3, p)[class*="t-"] { margin-bottom: calc(round(nearest, 1cap, 1px) - 1cap); }