/*
 * Reusable UI pieces: card, chip, button, link, icon, focus ring.
 * Section layout lives in sections.css. Every value is a token (contract S-1, S-4).
 */

/* Card ------------------------------------------------------------------ */

/*
 * One padding expression for every card on the page (20px → 36px). The tablet breakpoint used
 * to step it from --space-md to --space-lg, which left a 900px window with the phone's padding;
 * --card-padding is fluid, so the card breathes in proportion to the space it is given.
 *
 * The hairline border is what stops a surface-on-background card from dissolving into the page
 * at low brightness — the shadow alone carries almost no edge on a dark theme.
 */
.card,
.project-card {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.card:hover,
.project-card:hover {
  transform: translateY(calc(var(--space-3xs) * -1));
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

/* Chip ------------------------------------------------------------------ */

/*
 * Case study — the labelled parts of a Selected Work entry (FR-022, research R3).
 *
 * A definition list rather than headings: <dt>/<dd> must stay direct children of the <dl> for
 * axe's definition-list rule, so the two-column layout at wider widths is done with grid
 * placement rather than wrapper elements.
 */
.case-study {
  display: grid;
  gap: var(--space-2xs) var(--space-sm);
  margin-block: var(--space-2xs);
  min-width: 0;
}

.case-study__label {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.case-study__body {
  margin: 0;
  max-width: var(--measure);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  /* Label column sized to its content, capped so a long label cannot starve the body. */
  .case-study {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    align-items: baseline;
  }

  .case-study__label {
    grid-column: 1;
  }

  .case-study__body {
    grid-column: 2;
  }
}

/*
 * Metric — one countable fact about a community activity (FR-035).
 *
 * The value and its unit are separate elements so the number can carry the visual weight while
 * both are read together. A zero renders exactly like any other value; nothing in this block
 * treats it specially, and nothing should (FR-036).
 */
.metric-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  padding-block-start: var(--space-sm);
}

.metric {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.metric__value {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.metric__unit {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/*
 * Chips are labels, not controls, so the 44px touch minimum does not apply to them — but a
 * 20px-tall pill beside a 44px button reads as an unfinished element. 2rem is the height that
 * keeps a dense chip list legible without pretending to be tappable.
 */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  background-color: var(--color-surface-accent);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  /* Long tags wrap inside the chip rather than pushing the card wider (FR-036). */
  overflow-wrap: anywhere;
}

/* Button ---------------------------------------------------------------- */

/*
 * The primary and the ghost button are the SAME box: same height, same padding, same type size.
 * Only the fill differs.
 *
 * They were 2.75rem and 2.25rem tall with different padding and type sizes, and the two sit
 * side by side in the hero and again in the contact routes — a mismatched pair is the most
 * visible proportion defect on the page, because the eye compares them directly. Emphasis is
 * carried by fill and weight, which is enough; it does not need a size difference too.
 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 3rem;
  padding: var(--space-2xs) var(--space-lg);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-accent);
  /* --color-text on the emphasis surface is 9.6:1 (S-3). */
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.button:hover {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.button--ghost {
  background-color: transparent;
  border-color: var(--color-border);
  font-weight: var(--font-weight-regular);
}

.button--ghost:hover {
  background-color: var(--color-surface-accent);
  border-color: var(--color-accent);
}

/* Icon ------------------------------------------------------------------ */

.icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: currentColor;
}

.icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Link ------------------------------------------------------------------ */

.inline-link {
  color: var(--color-link);
  text-decoration: underline;
}

/*
 * The accent clears AA on every surface (6.4:1 on --color-surface, 4.5:1 on
 * --color-surface-accent), so links keep one colour everywhere. The palette this replaced
 * needed a per-surface override here because pink over purple was 2.7:1.
 */
.site-header a {
  text-decoration: none;
}

/* Focus ring ------------------------------------------------------------ */

/*
 * base.css sets the global :focus-visible indicator. This adds a matching one for the
 * cases where the outline would be clipped by an ancestor's overflow.
 */
.focus-ring:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* Utility --------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}