/* intro.css — "Science / One formula, explained in full." · Figma D 1817:4389 (1050x295) / M 1817:4991 (358x828)
   Pattern C: nested FIRST in .science-index__main (no .container, no own padding/margin — the host owns gutter + gap).
   Source: brief/intro.md §1b / §2 / §5 / §6 + cache/intro.{desktop,mobile}.json + get_design_context (both nodes)
   + button component set 1819:14220 (Default / Hover, Device=Desktop / Mobile).
   Scoped to .intro / .intro__* only (GLOBAL-SCOPE LOCK). Mobile-first: base = 390 anchor, 768 pseudo-tablet
   (row-top text | image, cards grid-3), 1024 desktop (one row: text 393 | image 216 | cards 393 @1920). */

/* ---- Section shell (mobile base) — fluid values per brief §2 (anchor 390, coefficient 0.015) ---- */
.intro {
  --intro-gap: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 24px);        /* title → body: M 20 */
  --intro-body-gap: clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 24px);   /* text ↔ image ↔ cards: 24 */
  --intro-text-gap: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 8px);      /* lead → copy: 8 */
  --intro-cards-gap: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 12px);  /* card ↔ card: 12 */
  --intro-card-pad-block: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 16px);  /* M 12 */
  --intro-card-pad-inline: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 20px); /* M 16 */
  --intro-icon: clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 32px);       /* Icon/Dot/Circle 32 */

  display: flex;
  flex-direction: column;
  row-gap: var(--intro-gap);
  width: 100%;
}

/* Section Title 1817:4992 / 1817:4390 — Heading/H2, #232323 */
.intro__title {
  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-graphite);
}

/* Intro 1817:4994 — vertical, gap 24 (mobile) */
.intro__body {
  display: flex;
  flex-direction: column;
  row-gap: var(--intro-body-gap);
}

/* Intro text 1817:4995 — vertical, gap 8 */
.intro__text {
  display: flex;
  flex-direction: column;
  row-gap: var(--intro-text-gap);
  min-width: 0;
}

/* Lead 1817:4996 / 1817:4394 — Body/XL/Medium, #181817 */
.intro__lead {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-xl);
  line-height: var(--lh-body-xl);
  letter-spacing: var(--ls-body-xl);
  color: var(--color-coal);
}

/* Paragraph 1817:4997 / 1817:4395 — Body/Large/Regular, #232323 */
.intro__copy {
  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);
}

/* Intro image 1849:17043 — 358 square (100 % of the column), FILL, no radius */
.intro__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Intro cards 1849:17057 — vertical, gap 12 */
.intro__cards {
  display: flex;
  flex-direction: column;
  row-gap: var(--intro-cards-gap);
  min-width: 0;
}

/* button 1849:17058… (Device=Mobile, State=Default 1849:17045) — HORIZONTAL, SPACE_BETWEEN, CENTER,
   pad 12/16, fill Brand/Red-100. <button> and <a> look identical (D-IN-2). */
.intro__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 0;
  width: 100%;
  padding-block: var(--intro-card-pad-block);
  padding-inline: var(--intro-card-pad-inline);
  background-color: var(--color-accent);
  color: var(--color-white);
  text-align: left;
  text-decoration: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Label I…;1849:17046 — Body/XL/Regular, white, one line (Figma whitespace-nowrap) */
.intro__card-label {
  min-width: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-xl);
  line-height: var(--lh-body-xl);
  letter-spacing: var(--ls-body-xl);
  white-space: nowrap;
}

/* Icon/Dot/Circle I…;1849:17047 — 32 x 32 box; default + hover files stacked, cross-faded */
.intro__card-icon {
  position: relative;
  flex: none;
  width: var(--intro-icon);
  height: var(--intro-icon);
}

.intro__card-icon-default,
.intro__card-icon-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease;
}

.intro__card-icon-hover {
  opacity: 0;
}

/* State=Hover (1819:14221 D / 1849:17048 M, D-IN-3): no fill, 1px INSIDE accent stroke, accent label,
   inverted icon. Box size unchanged (D-IN-4). Same look on :focus-visible (+ base.css outline). */
.intro__card:focus-visible {
  background-color: transparent;
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.intro__card:focus-visible .intro__card-icon-default { opacity: 0; }
.intro__card:focus-visible .intro__card-icon-hover { opacity: 1; }

@media (hover: hover) {
  .intro__card:hover {
    background-color: transparent;
    color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
  }

  .intro__card:hover .intro__card-icon-default { opacity: 0; }
  .intro__card:hover .intro__card-icon-hover { opacity: 1; }
}

/* ============================================
   PSEUDO-TABLET (768–1023): row-top text (cols 1–2) | image (col 3); cards grid-3 in row 2.
   Every spacing value held at M-767 (= M-max for this section → constant in the band).
============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .intro {
    --intro-gap: 24px;
    --intro-body-gap: 24px;
    --intro-text-gap: 8px;
    --intro-cards-gap: 12px;
    --intro-card-pad-block: 16px;
    --intro-card-pad-inline: 20px;
    --intro-icon: 32px;
  }

  .intro__body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--intro-body-gap);
    row-gap: var(--intro-body-gap);
  }

  .intro__text {
    grid-column: 1 / span 2;
    align-self: start;
  }

  .intro__image {
    grid-column: 3;
    align-self: start;
  }

  /* one card per column — same column grid + gap as the body so card 3 sits under the image */
  .intro__cards {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--intro-body-gap);
  }
}

/* ============================================
   DESKTOP (1024+): one row — text 1fr | image 216 | cards 1fr, gap 24, alignItems CENTER (1817:4392).
   s = var(--max-vw) / var(--vw-base); every term is D-base · s, floor D-min (1024).
============================================ */
@media (min-width: 1024px) {
  .intro {
    --intro-gap: clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px);
    --intro-body-gap: clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px);
    --intro-text-gap: clamp(4px, calc(8px * (var(--max-vw) / var(--vw-base))), 8px);
    --intro-cards-gap: clamp(6px, calc(12px * (var(--max-vw) / var(--vw-base))), 12px);
    --intro-card-pad-block: clamp(9px, calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
    --intro-card-pad-inline: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
    --intro-icon: clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
    --intro-image-w: clamp(115px, calc(216px * (var(--max-vw) / var(--vw-base))), 216px);
  }

  .intro__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--intro-image-w) minmax(0, 1fr);
    column-gap: var(--intro-body-gap);
    align-items: center;
  }

  /* Intro text 1817:4393 — self-stretch, content at the top (justify MIN) */
  .intro__text {
    align-self: stretch;
    justify-content: flex-start;
  }

  /* Intro image 1817:4396 — 216 x 216 */
  .intro__image {
    width: var(--intro-image-w);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro__card,
  .intro__card-icon-default,
  .intro__card-icon-hover {
    transition: none;
  }
}