/* =========================================================================
   Component — cards and panels
   ========================================================================= */

.card {
  background: var(--doc-panel);
  border: 1px solid var(--doc-line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* NO LIFT ON HOVER. DESIGN_TOKENS.md §9.1 names this one by its property:
   "neither does a hover that lifts an element (`transform: translateY(-2px)` is
   elevation by another name)". Depth is the three grounds, and a card is not
   floating above the document whether or not a pointer is over it. What says
   "this whole card is a link" is the border turning to the accent — which it
   already did, under the lift — and the arrow beside the heading. */
.card-link {
  transition: border-color .15s;
}

.card-link:hover {
  border-color: var(--sd-secondary);
  text-decoration: none;
}

.card > h3 {
  margin: 0;
}

.card > p {
  margin: 0;
  font-size: 14px;
  color: var(--doc-ink-soft);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.card-tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sd-secondary);
}

/* --- Stat strip ---------------------------------------------------------- */

/* FOUR FIGURES IN ONE PANEL ARE FOUR CELLS, AND THE GUTTER IS THE LINE
   (DESIGN_TOKENS.md §9.2). The strip was one padded box with four floating
   columns 20 px apart — nothing said where one figure ended and the next
   began, which is the whole question a row of numbers asks.
 *
 * The technique is the reference's and it is named in §9.2: the CONTAINER's
 * background is the line colour, the cells sit on it with `gap: 1px`, and every
 * gutter is then exactly one pixel with no edge drawn twice. `overflow: hidden`
 * is what makes the cells' square corners honour the container's radius.
 *
 * `--sd-divider` and not `--doc-line`: these gutters separate four parts of one
 * strip, which is that token's role. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--sd-divider);
  border: 1px solid var(--doc-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* A strip that stands four to a row, two below 640 px: four figures and their
   labels do not fit 320 px. The print rule in print.css pins the four and draws
   the separators this fixed grid makes addressable — change one, change the
   other.

   The count is not a multiple of four any more — the admin overview has nine
   queues since the open-terms one — and a short last row let the container's
   divider colour show as an empty grey cell (U-1086). So the last cell spans
   what is left of its row: 3, 2 or 1 free columns at four across, 1 at two. */
.stat-strip-four {
  grid-template-columns: repeat(4, 1fr);
}

.stat-strip-four > :last-child:nth-child(4n+1) {
  grid-column: 1 / -1;
}

.stat-strip-four > :last-child:nth-child(4n+2) {
  grid-column: span 3;
}

.stat-strip-four > :last-child:nth-child(4n+3) {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .stat-strip-four {
    grid-template-columns: repeat(2, 1fr);
  }

  /* The same specificity as the three rules above, so this resets them. */
  .stat-strip-four > :last-child:nth-child(n) {
    grid-column: auto;
  }

  .stat-strip-four > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Each cell carries the surface, so the container's line colour shows only in
   the gutters. */
.stat-strip > * {
  background: var(--doc-panel);
  padding: 20px clamp(16px, 3vw, 24px);
}

/* The figures are what this strip is for, so they line up as a column even
   when they sit in a row (DESIGN_TOKENS.md §9.5). */
.stat-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.stat-key {
  font-size: 12.5px;
  color: var(--doc-ink-soft);
  margin-top: 2px;
}

/* --- CTA band ------------------------------------------------------------ */

.cta-band {
  background: var(--hero-grad);
  color: var(--brand-on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 52px);
}

.cta-band h2 {
  color: var(--brand-on-dark);
  margin: 0 0 10px;
}

.cta-band p {
  color: var(--brand-on-dark);
  margin: 0 0 22px;
  max-width: 54ch;
}

.cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* `.card-link` is an <a>, so its heading inherits the link colour. Colour may
   not be the only signal that the whole card is clickable (audit rule E-4), so
   the heading carries an arrow as well.
 *
 * A REAL <span aria-hidden="true">, not `content` on a pseudo-element. The whole
 * card is one link, so its accessible name is already tag + heading + paragraph;
 * generated content is exposed by current screen readers, which would append
 * "right arrow" to every one of those. An element can be hidden from the
 * accessibility tree. A pseudo-element cannot. */
.card-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform .15s;
}

.card-link:hover .card-arrow {
  transform: translateX(3px);
}