/* card-grid — three post cards.
 *
 * Proves the document grid exactly: 3 x 536 + 2 x 16 = 1640.
 *
 * "Read More" is a span, not a second link. The card title is the link and
 * the whole card is its hit area, so a separate anchor would give screen
 * readers two links to the same place and the keyboard two stops.
 */

.cgrid__head { margin-bottom: var(--space-md); }   /* measured: rule->cards 42 */
.cgrid__head .rule-row__line { opacity: 0.35; }
.cgrid__all { white-space: nowrap; color: var(--color-accent); }
.cgrid__all:hover { text-decoration: underline; }

.cgrid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}

.cgrid__card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out);
}
.cgrid__card:hover,
.cgrid__card:focus-within { border-color: var(--color-accent); }

/* The stretched link means the focus ring would draw around a 23px-tall
 * anchor in the middle of the card. Move it to the card itself. */
.cgrid__title a:focus-visible { outline: none; box-shadow: none; }
.cgrid__card:focus-within {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}
.cgrid__card:active { border-color: var(--color-primary); }

.cgrid__thumb {
  width: 100%;
  aspect-ratio: 536 / 230;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.cgrid__card:hover .cgrid__thumb,
.cgrid__card:focus-within .cgrid__thumb { transform: scale(1.04); }

.cgrid__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* The 88 in the artboard is title-TOP to button-TOP, not the gap between
   * them. Re-measured: 43 thumb->title, ~15 title->button, 43 to the card
   * foot. Card comes out at 466 as designed. */
  gap: var(--space-2xs);
  flex: 1;
  padding: var(--space-md) var(--space-sm);
}

.cgrid__title { font-weight: var(--fw-regular); }
/* Stretched link: the title anchor covers the card without nesting anything. */
.cgrid__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cgrid__more { margin-top: auto; pointer-events: none; }
.cgrid__card:hover .cgrid__more,
.cgrid__card:focus-within .cgrid__more {
  background: var(--color-accent);
  color: var(--color-text-inv);
}

@media (max-width: 992px) {
  .cgrid__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .cgrid__list { grid-template-columns: 1fr; }
  .cgrid__all { display: none; }   /* duplicated by the archive link in the footer */
}

/* The li is a grid item; the card inside uses height:100% so the li has to
 * stretch and establish a block for it. min-width:0 stops a long unbroken
 * title from blowing the track out. */
.cgrid__item { display: flex; min-width: 0; }
.cgrid__heading { white-space: nowrap; }

/* -- Enclosure ----------------------------------------------------------
 * The card is its own tray: the 8px padding is what makes the thumbnail
 * read as a plate seated inside a frame rather than as a bleed.
 * ---------------------------------------------------------------------- */
.cgrid__card {
  padding: var(--tray-pad);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-core);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  /* --dur-slow, not --dur-xslow. 700ms on a hover meant the card was still
   * rising after the pointer had moved on; the timing guide puts a card
   * hover at ~200. */
  transition: transform var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.cgrid__card:hover,
.cgrid__card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-hairline);
}
.cgrid__thumb { border-radius: calc(var(--radius-core) - var(--tray-pad)); }
.cgrid__body { padding: var(--space-md); gap: var(--space-sm); }
.cgrid__list { gap: var(--space-md); }