/* ============================================
   Internal Documentation — /internal-documentation/
   Loaded only on that page (see functions.php).
   ============================================ */

/*
 * The locked state: the gate continues the hero instead of starting a band.
 *
 * base.css gives every bare `section` 90px of vertical padding. On a page whose
 * hero already ends in its own bottom pad, that put ~125px of white between the
 * lead and the password field and broke them into two unrelated blocks — which
 * is most of why the old boxed version read as a modal floating on an empty
 * page. Zeroing the top lets the hero's bottom pad be the whole gap.
 *
 * The bottom padding stays: it is the space before the footer, and the footer
 * is a real edge that the form should not run into.
 *
 * Page-scoped rather than attached to `.bloom-password-form` in fixes.css,
 * because this is a fact about THIS page's composition (hero immediately above
 * the gate). A protected page that put the form after real content would want
 * the normal section rhythm.
 */
.doc-gate {
  padding-top: 0;
}

/*
 * The unlocked state gets the SAME reduced gap, for the same reason.
 *
 * These are two views of one page, and they were reading as two layouts: the
 * gate flowed straight out of the hero, then unlocking dropped a full 90px
 * section gap in before "Program documents". Matching them is what makes the
 * password step feel like a state change rather than a navigation.
 *
 * Not zero, unlike `.doc-gate`. This state opens with a real section heading,
 * which needs to sit apart from the hero's lead or the two headings stack into
 * one block of type. `--sp-32` is the same token the gate's form uses for its
 * own offset, so the measured distance from the hero's lead to the first thing
 * below it is identical in both states.
 */
.doc-body {
  padding-top: var(--sp-32);
}

/*
 * Bottom-align the download buttons across a row.
 *
 * `.grid-3` already stretches the cards to equal height, but `.card` is
 * `display:block`, so each button sits directly under its own copy. Card titles
 * here run from one line ("Music Policy") to three ("Program Coordinator Success
 * Guide"), which put the buttons in a row up to 11px out of line with each other.
 * Seven cards makes that read as sloppy rather than incidental.
 *
 * Scoped to this page rather than fixed in css/ds/fixes.css on purpose: making
 * every `.card` on the site a flex column is a change to Roby's component, and
 * cards elsewhere (locations, athletes, the CTA lab) are not all
 * copy-then-button. If a second page wants this, promote it then.
 */
.doc-grid .card {
  display: flex;
  flex-direction: column;
}

/*
 * `margin-top: auto` collapses to ZERO when the card has no slack — which is
 * every card at mobile width, where the grid is one column and nothing is being
 * stretched. That silently ate the `mt-6` from the markup and jammed the button
 * against the last line of copy. The padding is the floor; auto only takes over
 * once there is space to absorb.
 */
.doc-grid .card .btn-group {
  margin-top: auto;
  padding-top: var(--sp-24);
}

/*
 * The badge is an inline-flex pill; in a flex column it would stretch to the
 * full card width. Keep it hugging its own text.
 */
.doc-grid .card .badge {
  align-self: flex-start;
}

/* ── Hover ──────────────────────────────────────────────────────────────────
   Matched to the house treatment Eric set on the class cards 2026-08-01
   (css/ds/fixes.css, ISSUE 5 + ISSUE 6), not to the generic `.card:hover`.

   The house rule is: NO LIFT, NO SHADOW — the card stays put and its surface
   responds instead — and the response is ASYMMETRICALLY TIMED, slower and more
   deliberate on the way in than on the way out, so it feels eager to open and
   unfussy to leave. Same easing pair as the class-card zoom: 0.6s ease-expo in,
   0.40s ease-out back.

   ⚠️ The generic `.card:hover` in components.css does the opposite — a 6px lift
   plus `--shadow-xl` — and it was ALREADY HALF-BROKEN here before this rule,
   in exactly the way Eric caught on the class cards. `.stagger.visible > *` in
   animations.css sets `transform: translateY(0)` at the same specificity and
   loads later, so the lift never fired, while the shadow did: a card casting a
   lifted shadow without lifting. The grid carries `.stagger`, so this page
   inherited the same bug.

   The stagger also owns the transition, with per-child delays running to 0.48s
   on the seventh card. Left alone, hovering the last card would wait nearly
   half a second and then animate over 0.65s. `.doc-grid.visible .card` resets
   both once the reveal has settled — the same fix as the class grid's.

   WHAT RESPONDS, and why it is a tint rather than a zoom: there is no image to
   zoom, and — unlike the blog, class and athlete cards — this card is NOT a
   link. Only the button inside it is. A hover as loud as theirs would promise a
   click target the card does not have, so the surface warms to purple-tint and
   the border takes the accent, which reads as "this row is live" without
   pretending the whole card is pressable. Same idea as the class card's body
   going purple, dialled to what a light, non-clickable card can carry. ── */
.doc-grid.visible .card {
  transition:
    background-color var(--t-slow) var(--ease-out),
    border-color var(--t-slow) var(--ease-out);
  transition-delay: 0s;
}

/*
 * ⚠️ The tint is 70% of `--purple-tint`, not the token at full strength, and the
 * reason is contrast — do not "tidy" this back to `var(--purple-tint)`.
 *
 * The card's body copy is `--gray-500` (#6B6875). Measured in the browser:
 *
 *   on white (#FFFFFF)        5.44 : 1   comfortable
 *   on --purple-tint          4.5005 : 1 passes AA by five ten-thousandths
 *   on 70% --purple-tint      4.77 : 1   passes with room
 *
 * 4.5005 is not a pass, it is a coin flip — any future nudge to either colour
 * lands it under 4.5, and it would fail silently because nothing re-measures a
 * hover state. The lighter mix keeps the wash clearly visible (the border doing
 * most of the state-change work anyway) while leaving headroom.
 *
 * `color-mix` keeps the value DERIVED from the token rather than forked from
 * it, so a change to the palette still reaches here. The literal above it is
 * the same colour for anything that cannot parse `color-mix`; if both are
 * dropped the card simply stays white on hover and the border still changes,
 * which degrades correctly.
 */
.doc-grid .card:hover {
  transform: none;
  box-shadow: none;
  background: #F5EEF4;
  background: color-mix(in srgb, var(--purple-tint) 70%, #fff);
  border-color: var(--purple);
}

.doc-grid.visible .card:hover {
  transition:
    background-color 0.6s var(--ease-expo),
    border-color 0.6s var(--ease-expo);
}

/*
 * The button keeps its own `.btn-magenta:hover` (a 2px lift and a magenta
 * shadow) and that is intentional — it is the one thing on the card that IS
 * clickable, so it should be the one thing that moves.
 */