/*
  Card system — one shared visual language (border, radius, shadow,
  padding) with four named variants, instead of every card-shaped
  component on the site inventing its own radius/shadow/border combo.

  Why this taxonomy specifically: the source project's audit found
  service cards, project cards, testimonial cards, and process-step
  "cards" all visually similar in intent but each with a different
  border-radius (2px to 6px) and inconsistent shadows/borders — the
  single biggest visible symptom of "no shared system." Four variants
  cover the actual recurring needs on a typical marketing/brochure
  site:
    .card             base — service/feature/testimonial/info content
    .card--highlight  dark surface, for CTA or pull-quote emphasis
    .card--step       numbered, for ordered process/how-it-works lists
    .card--gallery    fixed-ratio image top + body, for project/photo grids
  Reach for one of these four before inventing a fifth.
*/

.card {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-default);
  box-shadow: var(--shadow-md);
}

.card > :is(h2, h3) {
  font-family: var(--font-family-heading);
}

.card > p {
  color: var(--color-text-secondary);
}

/* Apply only to cards that are themselves a link or contain one as
   their primary action — a hover lift on a purely static card is a
   false affordance (it implies clickability that isn't there). */
.card--interactive {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.card--interactive:hover,
.card--interactive:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Highlight — dark surface, for CTA blocks / pull quotes / "featured"
   emphasis within an otherwise light-surface grid. */
.card--highlight {
  border-color: transparent;
  background: var(--color-surface-dark);
  color: var(--color-text-inverse);
}

.card--highlight > :is(h2, h3, p) {
  color: var(--color-text-inverse);
}

/* Numbered step — for ordered process/how-it-works sequences. Wrap
   the whole sequence in <ol class="card-list--steps"> so the number
   increments automatically from CSS counters; don't hardcode "01",
   "02"... in markup, it drifts the moment a step gets added/removed. */
.card-list--steps {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  counter-reset: card-step;
}

.card--step {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  counter-increment: card-step;
}

.card--step::before {
  content: counter(card-step, decimal-leading-zero);
  color: var(--color-brand-primary);
  font-family: var(--font-family-heading);
  font-size: var(--font-h2);
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 640px) {
  /* Stack number above content on narrow screens instead of letting a
     fixed-width number column squeeze body text and force awkward
     heading wraps — a real bug the source audit found on mobile. */
  .card--step {
    grid-template-columns: 1fr;
  }
}

/* Gallery — fixed-ratio image top, body below. The aspect-ratio is
   enforced in CSS (not left to each image's natural dimensions) so a
   grid of these never shifts layout as images of varying sizes load
   in — set the ratio to whatever suits the content (4/3 below is a
   sensible default for project/portfolio photography). */
.card--gallery {
  padding: 0;
  overflow: hidden;
}

.card--gallery__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-dark);
}

.card--gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card--gallery__body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
}

/* Card grid — pair with any variant above. Collapses predictably at
   the shared breakpoints from tokens.css rather than each grid
   picking its own column-collapse point. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}