/* ==========================================================================
   research.css — research-area card component (extends .card from cards.css)
   and the Research page's own layout adjustments. Research-page-only.
   ========================================================================== */

/* -- Title reads as the card's headline: centered, small-caps, spanning the
   full card width (no icon above it — cards.css's .card__icon is unused
   here). Sized so every title stays on one line on desktop; on mobile the
   longest ("Quantum simulation & computation") may wrap to two lines. */
.card--research .card__title {
  width: 100%;
  text-align: center;
  font-variant: small-caps;
  /* base.css sets `font-synthesis: none` site-wide (to stop faux-bold when a
     weight fails to load) — that also blocks *synthesized* small-caps, which
     Inter's loaded subset doesn't provide true glyphs for. Re-enable just
     this one synthesis type, scoped to this title only. */
  font-synthesis: small-caps;
  letter-spacing: 0.03em;
  font-size: 1.5rem;
  /* Darker than the base --kit-green (#009682, only 3.69:1 on white — AA
     for large text only): --green-800 is tokens.css's own "deep headings"
     shade (9.27:1), which also keeps this compliant at the small mobile
     sizes below, where plain --kit-green would fail AA outright. */
  color: var(--green-800);
}

/* -- Paragraph text stays left-aligned (centering long-form prose hurts
   readability), but the block itself is centered so leftover space on a
   wide 75%-width card splits evenly left/right instead of sitting flush-
   left with a large empty gap on the right. Capped at the figure strip's
   width so figure and prose share one column; mobile lifts the cap. -- */
.card--research > p {
  margin-inline: auto;
  max-width: var(--figstrip-max);
}

@media (max-width: 639px) {
  .card--research .card__title {
    /* Never smaller than body text; the longest title may wrap to two
       balanced lines instead of shrinking to fit one. */
    font-size: clamp(1.0625rem, 4.6vw, 1.25rem);
    letter-spacing: 0.02em;
    text-wrap: balance;
  }
}

/* -- Desktop: one wide row per research area, not two cards side by side.
   Full-width grid track (span 6, overriding cards.css's default span-3
   half-width), but the card itself caps at 75% and alternates left/right
   within that track — odd cards flush left, even cards flush right. Mirrors
   the Team page's person-card pattern (css/team.css) at 75% instead of 70%. */
@media (min-width: 900px) {
  .card--research {
    grid-column: span 6;
    width: 75%; /* not max-width: with justify-self overriding the default
      stretch below, an unstretched box with only a max-width shrinks to fit
      its content instead of actually reaching 75% (same bug already fixed
      on the Team page — see css/team.css's comment on the same rule). */
  }
  .card--research:nth-child(odd) {
    justify-self: start;
  }
  .card--research:nth-child(even) {
    justify-self: end;
  }
}

/* -- Grid breakpoints — must be written explicitly, cards.css's single-column
   rule alone would leave research cards 2-up through 899px, same as Team. -- */
@media (max-width: 899px) {
  .card--research { grid-column: span 6; }
}

/* Grid items default to min-width: auto, so wide content (the figure
   strip's slides) could stretch a card past the viewport. */
.card--research { min-width: 0; }

/* -- Wave divider sits on --surface-alt on this page, not white, same fix
   as css/team.css's equivalent rule for .page-team. -- */
.page-research .wave-divider--footer {
  background: var(--surface-alt);
}

/* -- New page-head -> section-2 wave (§8.4): sits on the plain white
   background above the --surface-alt band. -- */
.wave-divider--section {
  background: linear-gradient(var(--surface), var(--surface-alt));
  margin-bottom: -1px;
}

/* Page head already ends with generous padding; trim the band's top so the
   first card doesn't sit ~220px below the lead text on desktop. */
@media (min-width: 900px) {
  .page-research .section--alt { padding-top: var(--space-12); }
}

/* -- A research card is not a link and now contains its own focusable
   figstrip controls, so cards.css's card-level focus ring and hover-lift
   are switched off here — each control carries its own :focus-visible ring
   instead. Same decision and same reasoning as .card--person,
   plans/team.MD §6.7. Owner decision keeps the marker's hover growth
   (§8.1, §16 Q7): a mouse hover still slides the accent line across the
   card top; keyboard focus inside the card does not trigger it. -- */
.card--research:focus-within {
  outline: none;
}
@media (hover: hover) {
  .card--research:hover,
  .card--research:focus-within {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--border-subtle);
  }
  .card--research:focus-within .card__marker {
    transform: scaleX(.28);
  }
}

/* -- Title rule (§8.2): a straight gradient bar between the title and the
   figure strip — the sanctioned heading-underline pattern, not a wave. -- */
.card__rule {
  display: block;
  width: 56px;
  height: 2px;
  margin-inline: auto;
  border-radius: var(--radius-pill);
  background: var(--grad-accent-rule);
}
@media (max-width: 639px) {
  .card__rule { width: 44px; }
}

/* -- Air (§8.3): more breathing room once the card holds a title, a rule,
   a figure strip and a paragraph instead of just two paragraphs. -- */
@media (min-width: 900px) {
  .card--research { padding: var(--space-10); }
  .page-research .cards { gap: var(--space-10); }
}

/* ==========================================================================
   Figure strip component (§5-§7 of plans/research_redesign.MD). Native
   CSS scroll-snap track; JS (js/figstrip.js) only adds arrows and a counter.
   ========================================================================== */

.card--research {
  --figstrip-max: 600px; /* shared column for figure and prose (frame 600x450) */
  /* One fixed frame for every slide and breakpoint: the figures are
     mostly ~4:3 plots, so 4:3 lets them fill the frame instead of
     letterboxing them into a shorter 3:2 box. */
  --figstrip-ratio: 4 / 3;
  --figstrip-pad: var(--space-3);
}

.figstrip {
  margin: 0;
  width: 100%;
  max-width: var(--figstrip-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.figstrip__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  border-radius: var(--radius-sm);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.figstrip__viewport::-webkit-scrollbar { display: none; }

.figstrip__viewport:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.figstrip__track {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.figstrip__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  aspect-ratio: var(--figstrip-ratio);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--green-50);
}

/* The link fills the whole frame and carries the uniform mat padding, so
   its focus ring sits inside the frame (the scroller clips anything
   outside) and the frame never changes size between slides. */
.figstrip__link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--figstrip-pad);
  border-radius: inherit;
  -webkit-user-drag: none;
  transition: background-color var(--dur-base) var(--ease-out);
}
.figstrip__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
@media (hover: hover) {
  .figstrip__link:hover { background: var(--green-100); }
}

/* Contained, never cropped. The img box always fills the padded frame, so
   it has a real size before loading (lazy-load needs that) and cannot fall
   back to its 1600px intrinsic width as a flex item. */
.figstrip__slide img {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
  border-radius: var(--radius-xs);
  -webkit-user-drag: none;
}

.figstrip__fallback {
  position: absolute;
  width: 32px;
  height: 32px;
  color: var(--green-400);
}

.figstrip__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.figstrip__controls[hidden] { display: none; }

.figstrip__btn {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.figstrip__btn svg { width: 16px; height: 16px; }

@media (hover: hover) {
  .figstrip__btn:hover:not(:disabled) {
    color: var(--green-700);
    border-color: var(--green-300);
    background: var(--green-50);
  }
}
.figstrip__btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.figstrip__btn:disabled {
  opacity: .45;
  cursor: default;
}

.figstrip__counter {
  margin: 0;
  min-width: 4ch;
  text-align: center;
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--text-muted);
}

@media (max-width: 639px) {
  .card--research { --figstrip-max: none; --figstrip-pad: var(--space-2); }
  .figstrip__controls { gap: var(--space-5); }
  .figstrip__btn      { width: 44px; height: 44px; }
  .figstrip__btn svg  { width: 18px; height: 18px; }
}

@media (max-width: 420px) {
  .figstrip__controls { gap: var(--space-4); }
}