/**
 * Feature card — a rounded panel on the shell carrying a heading and copy.
 *
 * The most reusable pattern in the system. If a section is "some things, each
 * with a title and a sentence", this is it. Do not fork it into a
 * content-named variant.
 */

.feature-card {
  background-color: var(--color-surface-card);
  color: var(--color-text);
  /* Fixed radius — it does NOT scale with the container (§5.1). A small card
   * reads proportionally rounder than a large one, and that is correct. */
  border-radius: var(--radius-card);
  padding: var(--space-sm);
  /* No border, no shadow. Cards separate from the shell by fill (§4). */
}

@media (width >= 48em) {
  .feature-card { padding: var(--space-md); }
}

.feature-card__title {
  font-size: var(--text-md);
  color: var(--color-text);
}

.feature-card__body {
  color: var(--color-text-muted);
  max-inline-size: var(--measure-prose);
}

.feature-card a { color: var(--color-accent); }

/**
 * An accent-filled card. Used sparingly — §3.5 caps everything other than the
 * page accent at roughly 7% of the viewport, and a grid of accent cards blows
 * straight through that.
 */
.feature-card--accent {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.feature-card--accent .feature-card__title,
.feature-card--accent .feature-card__body { color: var(--color-accent-contrast); }

/* Periwinkle cannot carry body-size copy at the house bar — see hero-zone.css. */
/**
 * PERIWINKLE CARRIES NEAR-BLACK, LIKE EVERY OTHER ACCENT.
 *
 * It used to carry white, on the reasoning that near-black on periwinkle
 * measures 5.87:1 and so misses the app's stricter 6:1 house bar. That had it
 * backwards: 6:1 is a house preference and 4.5:1 is the actual AA requirement.
 * White on periwinkle is 3.57:1 — it FAILS the requirement in order to satisfy
 * the preference. Lighthouse found it on the how-it-works call to action.
 *
 * Near-black everywhere is also one fewer special case: periwinkle no longer
 * needs a per-component exception in six stylesheets.
 */
.accent-periwinkle .feature-card--accent,
.accent-periwinkle .feature-card--accent .feature-card__body { color: var(--brand-near-black); }

/**
 * Interactive card. The whole card is a link target via a stretched pseudo
 * element, so the heading stays the accessible name and the card does not
 * become a div with a click handler.
 */
.feature-card--link { position: relative; }

.feature-card--link .feature-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.feature-card--link:has(a:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/**
 * The closing call to action.
 *
 * Carries the offset-print device from identity sheet 02 — a second flat block
 * behind the card, misregistered like a second plate. NOT a shadow: no blur, no
 * alpha ramp, no implied light source, which is what keeps §4's "no drop
 * shadows anywhere" intact.
 *
 * The offset block is the shell, so it reads as the card lifting off the page
 * rather than as a second colour entering the palette.
 */
.cta-card {
  position: relative;
  /* No overflow:hidden here — it would clip the offset plate, which is the
   * whole point of the device. The halftone layer carries border-radius:inherit
   * so it stays inside the corners without needing to be clipped. */
  --offset-color: var(--color-surface-track);
  --offset-x: 10px;
  --offset-y: 10px;
}

.cta-card > * { position: relative; z-index: var(--z-raised); }



/**
 * A card filled with a NAMED accent rather than the page accent.
 *
 * --card-accent is set inline per card so one grid can carry several accents.
 * This is how §3.5's desktop distribution is reached — the reference's desktop
 * board runs coral at 19%, periwinkle at 8.5%, sage at 6.5% and cyan at 6.3%
 * simultaneously, and a grid of uniformly dark cards cannot get near that.
 */
.feature-card--accent[style*="--card-accent"] {
  position: relative;
  background-color: var(--card-accent, var(--color-accent));
  color: var(--brand-near-black);
}

.feature-card--accent[style*="--card-accent"] > * {
  position: relative;
  z-index: var(--z-raised);
}

.feature-card--accent[style*="--card-accent"] :is(.feature-card__title, .feature-card__body) {
  color: var(--brand-near-black);
}



/* Periwinkle is the exception in both directions: near-black on it is 5.87:1,
 * which clears AA but misses the app's 6:1 bar, so a periwinkle card carries
 * white body copy and the halftone flips with it. */
.feature-card--periwinkle :is(.feature-card__title, .feature-card__body) { color: var(--brand-near-black); }


/* The closing CTA centres on a phone for the same reason the hero does — it is
 * the same shape: a heading, a line of copy and one chip, in a full-width
 * accent panel. (owner, 2026-09-13) */
@media (width < 48em) {
  .cta-card {
    text-align: center;
    align-items: center;
  }

  .cta-card .cluster { justify-content: center; }
}