/* formula — "The formula" (brief/formula.md) — section 7 of 19, NESTED in science-index's main column (Pattern C)
   Desktop 1817:4423 (1050 x 1199.37) · Mobile 1817:5018 (358 x 501) · no tablet layer (pseudo-tablet 768–1023).
   No .container, no outer padding / margin / max-width: the 100 / 80 gaps belong to science-index.
   Mobile (< 768): slider template (pipeline/templates/code/slider/, css/templates/slider.css + js/slider.js linked
   page-wide) — 4 cards, no arrows, swipe / drag; the track bleeds out of the 358 column to the viewport edges and
   starts / ends on the gutter (page decision "Slider start/end position", D-FO-2).
   768+: static 2x2 grid (D-FO-1) — the slider classes stay in the DOM and are neutralised here.
   Every rule is .formula-scoped (GLOBAL-SCOPE LOCK); template classes only as `.formula__x.slide-*` overrides. */

/* ---------- Mobile (base, anchor 390, Δ = (max-vw − 390) × 0.015) ---------- */
.formula {
  --fo-gap:        clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 40px);  /* head → cards */
  --fo-head-gap:   clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);  /* title → lead */
  --fo-card-gap:   clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 24px);  /* card ↔ card */
  --fo-name-pt:    clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
  --fo-pad-x:      clamp(7px,  calc(8px  + (var(--max-vw) - 390px) * 0.015), 8px);
  --fo-name-pb:    clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);
  --fo-desc-pb:    clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 12px);
  /* slide width: M 287.5 @390, M-min 236, M-max 513 */
  --formula-slide-w: clamp(236px, calc(287.5px + (var(--max-vw) - 390px) * 0.015), 513px);

  display: flex;
  flex-direction: column;
  row-gap: var(--fo-gap);
}

/* Head 1817:5019 — both texts fill 358, LEFT-aligned (D-FO-8) */
.formula__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: var(--fo-head-gap);
  text-align: left;
}

.formula__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-ink);            /* D-FO-7: Neutral/Black-100, NOT graphite */
}

.formula__lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-graphite);       /* #232323 raw fill */
}

/* Track 1849:17094 — overrides of the template's demo values (margin-top 20, padding 0 10, gap 16) */
.formula__track.slides-blocks {
  margin-top: 0;
  margin-inline: calc(var(--gutter) * -1);      /* bleed to the viewport edge (host .container owns the gutter) */
  padding-inline: var(--gutter);                /* first card on the gutter (Figma x 16) */
  scroll-padding-inline: var(--gutter);         /* last card stops on the right gutter */
  column-gap: var(--fo-card-gap);
  align-items: flex-start;                      /* D-FO-6: natural card heights (393 / 370) */
}

/* ADAPT.md: a same-specificity override of .slides-blocks must re-state its drag state variant */
.formula__track.slides-blocks.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* the track spans the viewport — keep the focus ring inside it (BA-FO-3: tabindex="0") */
.formula__track.slides-blocks:focus-visible {
  outline-offset: -2px;
}

/* Card 1817:5023 … — overrides of the template's demo card (281 x 400, radius 12, overflow hidden, snap center) */
.formula__card.slide-wrapper {
  flex: 0 0 var(--formula-slide-w);
  width: var(--formula-slide-w);
  height: auto;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

/* ADAPT.md: the last slide snaps to the track's end, or it can never be reached */
.formula__card.slide-wrapper:last-child {
  scroll-snap-align: end;
}

/* Image 1817:5024 … — composed render, one aspect for all cards (D-FO-3) */
.formula__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 492 / 344;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.formula__card-text {
  display: flex;
  flex-direction: column;
}

/* Name block 1817:5026 — padding 20 / 8 / 16 / 8 */
.formula__card-head {
  padding: var(--fo-name-pt) var(--fo-pad-x) var(--fo-name-pb);
}

.formula__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--color-ink);
}

/* Text block 1817:5028 — padding 0 / 8 / 12 / 8 */
.formula__card-desc {
  padding: 0 var(--fo-pad-x) var(--fo-desc-pb);
}

.formula__text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-ink-80);
}

/* ---------- 768+: static 2x2 grid — the slider is neutralised (D-FO-1, D-FO-5) ---------- */
@media (min-width: 768px) {
  .formula__head {
    align-items: center;                /* D-FO-8: head centred on desktop and tablet */
    text-align: center;
  }

  .formula__track.slides-blocks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--fo-card-gap);
    row-gap: var(--fo-card-gap);
    align-items: start;                 /* D-FO-6: card 2 is shorter than card 1 */
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
    cursor: auto !important;            /* D-FO-5: slider.js writes style.cursor inline */
  }

  .formula__track.slides-blocks.is-dragging {
    scroll-snap-type: none;
  }

  .formula__track.slides-blocks:focus-visible {
    outline-offset: 2px;
  }

  .formula__card.slide-wrapper,
  .formula__card.slide-wrapper:last-child {
    flex: none;
    width: auto;
    scroll-snap-align: none;
  }
}

/* ---------- Pseudo-tablet 768–1023 (from M-767, 0.025) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .formula {
    --fo-gap:      clamp(37.66px, calc(37.66px + (var(--max-vw) - 768px) * 0.025), 40px);
    --fo-head-gap: 16px;
    --fo-card-gap: 24px;
    --fo-name-pt:  20px;
    --fo-pad-x:    8px;
    --fo-name-pb:  16px;
    --fo-desc-pb:  12px;
  }
}

/* ---------- Desktop 1024+ (x / 1920) ---------- */
@media (min-width: 1024px) {
  .formula {
    --fo-gap:      clamp(21px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px);
    --fo-head-gap: clamp(9px,  calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
    --fo-card-gap: clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px);
    --fo-name-pt:  clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
    --fo-pad-x:    clamp(4px,  calc(8px  * (var(--max-vw) / var(--vw-base))), 8px);
    --fo-name-pb:  clamp(9px,  calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
    --fo-desc-pb:  clamp(6px,  calc(12px * (var(--max-vw) / var(--vw-base))), 12px);
  }
}