/* ---------------------------------------------------------------
   Adeia — Capability + Approach

   Two sections on the cream ground. Everything is scoped under
   .capability or .approach; nothing here touches an element
   selector or redefines a token.
   --------------------------------------------------------------- */

/* ===============================================================
   SECTION 3 — Capability

   A flex row of colour bands. Expansion is a flex-grow change on
   the band (1 -> 7) taking --d-large, so the movement is slow and
   heavy. The dark panel sits under each band and is revealed by a
   clip-path wiping in from the leading edge over the same duration;
   its text fades separately at --d-reveal, slightly behind, so the
   panel opens before the words arrive.

   Every band keeps its own colour under the label strip in both
   states, so the label's contrast is measured against one colour
   only and never changes.
   =============================================================== */

.capability {
  --strip: 3.5rem; /* width of the always-visible colour column */
  --band-open-grow: 5; /* open band takes 5/8 of the row, the rest 1/8 each */
}

.capability__head {
  display: grid;
  gap: 0.75rem;
  margin-block-end: clamp(2rem, 4vw, 3.5rem);
}

.capability__title {
  max-inline-size: 22ch;
}

.capability__hint {
  margin-block-start: 0.25rem;
}

/* ---------- the band row ---------- */
.capability__accordion {
  display: flex;
  inline-size: 100%;
  block-size: clamp(24rem, 34vw, 30rem);
  overflow: hidden;
}

.capability__band {
  position: relative;
  flex: 1 1 0;
  min-inline-size: 4.25rem;
  overflow: hidden;
  background: var(--band);
  transition: flex-grow var(--d-large) var(--ease-out);
}

.capability__band[data-open="true"] {
  flex-grow: var(--band-open-grow);
}

/* A closed band is a target; an open one is already read. */
.capability__band[data-open="false"] {
  cursor: pointer;
}

/* ---------- band colours ----------
   --band       the column itself
   --band-ink   the label sitting on it, measured to clear 4.5:1
                against --band alone:
                  bone  on forest  11.82:1
                  ink   on orchid   6.17:1
                  ink   on mist    12.42:1
                  ink   on clay     7.53:1 */
.capability__band--policy {
  --band: var(--forest);
  --band-ink: var(--bone);
}

.capability__band--approval {
  --band: var(--orchid);
  --band-ink: var(--ink);
}

.capability__band--audit {
  --band: var(--mist);
  --band-ink: var(--ink);
}

.capability__band--sdk {
  --band: var(--clay);
  --band-ink: var(--ink);
}

/* ---------- the label strip ---------- */
.capability__trigger {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  inline-size: var(--strip);
  padding-block: 1.25rem;
  padding-inline: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--band);
  color: var(--band-ink);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* The outline is drawn inside the strip: at a positive offset it
   would fall on the dark panel, where a dark ink outline vanishes. */
.capability__trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -6px;
}

/* Reuse of the one control shape. Border and glyph take the band's
   own readable ink rather than the page default, which is tuned for
   the dark ground and would disappear on orchid. */
.capability__mark {
  flex: none;
  border-color: currentColor;
  color: inherit;
}

/* The glyph turns, the square does not — a rotated border would read
   as a diamond and break the one control shape. */
.capability__glyph {
  display: block;
  transition: transform var(--d-hover) var(--ease-out);
}

.capability__band[data-open="true"] .capability__glyph {
  transform: rotate(45deg);
}

.capability__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* reads bottom-to-top */
  letter-spacing: 0.16em;
  white-space: nowrap;
}

/* ---------- the dark panel ---------- */
.capability__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--strip);
  inset-inline-end: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  background: var(--ink);
  color: var(--on-ink);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--d-large) var(--ease-out);
}

.capability__band[data-open="true"] .capability__panel {
  clip-path: inset(0 0 0 0);
}

/* Fixed measure: the text must not re-wrap while the band is
   travelling, so it is sized once and clipped by the panel. */
.capability__body {
  inline-size: min(32rem, 52vw);
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity var(--d-reveal) var(--ease-out),
    transform var(--d-reveal) var(--ease-out);
}

.capability__band[data-open="true"] .capability__body {
  opacity: 1;
  transform: none;
  transition-delay: 240ms; /* the panel opens first, then the words */
}

.capability__copy {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--on-ink); /* 12.42:1 on --ink */
}

.capability__note {
  margin: 1.25rem 0 0;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-quiet); /* 5.98:1 on --ink */
}

/* ---------- stacked ----------
   Below 60rem the row becomes a column: the same flex-grow move,
   now on the block axis, the label back to horizontal, and the
   clip wiping downward instead of across. Nothing scrolls sideways. */
@media (max-width: 60rem) {
  .capability {
    --strip: 3.5rem;
  }

  .capability__accordion {
    flex-direction: column;
    block-size: clamp(34rem, 96vw, 46rem);
  }

  .capability__band {
    min-inline-size: 0;
    min-block-size: var(--strip);
  }

  .capability__trigger {
    inset-inline: 0;
    inset-block-start: 0;
    inset-block-end: auto;
    inline-size: 100%;
    block-size: var(--strip);
    flex-direction: row-reverse; /* label left, mark right */
    align-items: center;
    padding-block: 0;
    padding-inline: 1.25rem;
  }

  .capability__trigger:focus-visible {
    outline-offset: -4px;
  }

  .capability__label {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .capability__panel {
    inset-inline: 0;
    inset-block-start: var(--strip);
    inset-block-end: 0;
    align-items: flex-start;
    clip-path: inset(0 0 100% 0);
  }

  .capability__band[data-open="true"] .capability__panel {
    clip-path: inset(0 0 0 0);
  }

  .capability__body {
    inline-size: auto;
    max-inline-size: 44ch;
  }
}

/* ===============================================================
   SECTION 4 — Approach

   Three steps in the order an action travels through them,
   separated by hairlines rather than boxes.
   =============================================================== */

.approach {
  --step-pad: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-block-start: 0; /* it shares the cream ground with Capability */
}

.approach__head {
  display: grid;
  gap: 0.9rem;
  margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
}

.approach__title {
  max-inline-size: 16ch;
}

.approach__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--rule);
}

.approach__step {
  --pad-end: var(--step-pad);
  position: relative;
  padding-block: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem);
  padding-inline: var(--step-pad);
  border-inline-start: 1px solid var(--rule);
}

.approach__step:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.approach__step:last-child {
  --pad-end: 0rem;
  padding-inline-end: 0;
}

.approach__ordinal {
  position: absolute;
  inset-block-start: clamp(2rem, 3.5vw, 3rem);
  inset-inline-end: var(--pad-end);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--quiet); /* 6.04:1 on --bone */
}

.approach__step-title {
  margin: 0 0 0.75rem;
  padding-inline-end: 3.5rem; /* keeps the title clear of the ordinal */
}

.approach__copy {
  max-inline-size: 38ch;
}

/* ---------- stacked ---------- */
@media (max-width: 48rem) {
  .approach__steps {
    grid-template-columns: 1fr;
  }

  .approach__step {
    --pad-end: 0rem;
    padding-inline: 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--rule);
  }

  .approach__step:first-child {
    border-block-start: 0;
  }
}

/* ===============================================================
   Reduced motion

   No transitions at all. The resting state still has band one open
   and its copy at full opacity, and every other band opens
   instantly on click or focus.
   =============================================================== */
@media (prefers-reduced-motion: reduce) {
  .capability__band,
  .capability__panel,
  .capability__body,
  .capability__glyph,
  .capability__mark,
  .capability__trigger {
    transition: none;
  }

  .capability__body {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}