/* ==========================================================================
   Card Section
   Block: .cards / .cards-section
   --------------------------------------------------------------------------
   A grid of cards under a section header. Three styles from one component:
   feature cards with an icon, panels carrying rows for a comparison, and
   plain cards with no border.
   ========================================================================== */

.cards__body {
  margin-block-end: var(--space-x-large);
}

.card-grid {
  display: grid;
  gap: var(--space-medium);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

@media (width >= 46rem) {
  .card-grid--columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 62rem) {
  .card-grid--columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card-grid--columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

/* Only a grid holding a card that claims its own width switches to the twelve
   column base. Everything else keeps the auto-fitting track list above, so a
   section built before this option existed is untouched by it.

   Twelve divides by two, three and four, which is what lets full, half and one
   third sit on the same rows as the grid's own columns. */

@media (width >= 46rem) and (width < 62rem) {
  .card-grid--sized {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Only full width is honoured at this size. A third of a two column grid is
     a column nobody can read. */
  .card-grid--sized > .card-item--width-full {
    grid-column: 1 / -1;
  }
}

@media (width >= 62rem) {
  .card-grid--sized,
  .card-grid--sized.card-grid--columns-2,
  .card-grid--sized.card-grid--columns-3,
  .card-grid--sized.card-grid--columns-4 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  /* The span travels as a custom property rather than as a rule per grid and
     per width. A card setting its own value overrides the one it inherits
     from the grid whatever the grid's selector is worth, which a plain
     `grid-column` rule cannot promise: the grid's own selector carries one
     more class than the card's and would win every time. */
  .card-grid--sized {
    --card-span: 4;
  }

  .card-grid--sized.card-grid--columns-2 {
    --card-span: 6;
  }

  .card-grid--sized.card-grid--columns-3 {
    --card-span: 4;
  }

  .card-grid--sized.card-grid--columns-4 {
    --card-span: 3;
  }

  .card-grid--sized > .card-item {
    grid-column: span var(--card-span);
  }

  .card-grid--sized > .card-item--width-full {
    --card-span: 12;
  }

  .card-grid--sized > .card-item--width-half {
    --card-span: 6;
  }

  .card-grid--sized > .card-item--width-third {
    --card-span: 4;
  }
}

/* ------------------------------------------------------------- The card */

.card-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-x-small);
  padding: var(--space-large);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background-color: var(--color-background-raised);
  transition: transform var(--duration-base) var(--easing-out),
    border-color var(--duration-base) var(--easing-out),
    box-shadow var(--duration-base) var(--easing-out);
}

.card-grid--plain .card-item {
  padding-inline: 0;
  border: 0;
  background-color: transparent;
}

/* The emphasised card, for the recommended side of a comparison. A firmer
   border and a faint wash, rather than a coloured bar down one edge. */
.card-item--highlight {
  border-color: color-mix(in srgb, var(--color-brand-blue) 55%, transparent);
  background-color: var(--color-background-accent-soft);
  /* A second inner edge, so the card still stands out where the wash is too
     faint to see: on a dark ground, or in high contrast. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-blue) 30%, transparent),
    var(--shadow-medium);
}

.card-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-medium);
  color: var(--color-accent-text);
  background-color: var(--color-background-accent-soft);
}

.card-item__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.card-item__title {
  font-size: var(--font-size-heading-4);
  line-height: 1.25;
}

.card-item__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.card-item__text > :first-child {
  margin-block-start: 0;
}

.card-item__text > :last-child {
  margin-block-end: 0;
}

.card-item__footer {
  margin-block-start: auto;
  padding-block-start: var(--space-small);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

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

.card-item__rows {
  display: grid;
  gap: var(--space-2x-small);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-small);
  padding: var(--space-x-small) var(--space-medium);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-small);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* A row that is kept rather than paid for: solid edge, brand tint, so the two
   stacks can be told apart at a glance and not only by reading the tags. */
.card-item__row--kept {
  border-style: solid;
  border-color: color-mix(in srgb, var(--color-brand-blue) 35%, transparent);
  color: var(--color-text-strong);
  font-weight: var(--font-weight-medium);
}

/* The row is a flex line: without this the text half refuses to shrink past
   its longest word and pushes the tag out of the card. */
.card-item__row-text {
  min-inline-size: 0;
}

.card-item__row-tag {
  flex: none;
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-overline);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.card-item__row--cost .card-item__row-tag {
  color: var(--color-warning);
}

.card-item__row--kept .card-item__row-tag {
  color: var(--color-success);
}

/* ----------------------------------------------------------- Picture tile */

.card-item--media {
  padding: 0;
  overflow: hidden;
  min-height: 12rem;
}

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

/* ------------------------------------------------------------ Whole-card link */

/* The link covers the card so the whole tile is the target, while staying one
   link with one name. */
.card-item__link {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card-item:has(.card-item__link):hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-medium);
}

.card-item__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .card-item {
    transition: none;
  }

  .card-item:has(.card-item__link):hover {
    transform: none;
  }
}