.ccg-cards__list { margin: 0; padding: 0; list-style: none; }
.ccg-cards__list > li { margin: 0; display: flex; }
.ccg-cards__list > li > .ccg-card { width: 100%; }

/* Full-card click target without wrapping the card in an anchor, which would
   nest the heading inside a link and flatten the accessibility tree. */
.ccg-card--link { position: relative; }

.ccg-card__anchor { color: inherit; text-decoration: none; }
.ccg-card__anchor::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.ccg-card__anchor:focus-visible { outline: none; }
.ccg-card--link:has(.ccg-card__anchor:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.ccg-card--link .ccg-link { color: var(--brand); }

/* Section-level background, driven by tokens rather than a hardcoded
   dnd_section color so child themes inherit correctly. */
.ccg-cards { padding-block: var(--section-space); }
.ccg-cards--sunken { background: var(--surface-sunken); }
.ccg-cards--tinted { background: var(--surface-tint); }

/* Dark surface — meant to sit directly under the proof strip with no visible
   seam between them. Confirmed against ccg-proof-strip's own module.css:
   .ccg-proof--inverse uses this same flat token, not the hero's gradient, so
   this reuses it exactly rather than approximating it. */
.ccg-cards--dark {
  background: var(--surface-inverse);
}

/* Only the section head goes ccg-on-dark here, not the whole section — a
   white surface card sitting in a dark section still needs its own normal
   (dark) ink, or its text would flip light and vanish against its own white
   background. Photo cards handle their own light-text case independently,
   below. */

/* The inner .ccg-wrap handles the measure. Never apply margin-inline:auto to
   a descendant that also carries a max-width — it centers instead of aligning. */
.ccg-cards > .ccg-wrap > .ccg-section-head { margin-inline: 0; }

/* --- Column count -------------------------------------------------------
   Driven by --cards-per-row from the module, not auto-fit. auto-fit resolved
   18rem and 22rem minimums to the same three columns at content width, so the
   editor's card-size control had no visible effect and four cards always broke
   three-plus-one. */
.ccg-cards__list {
  grid-template-columns: repeat(var(--cards-per-row, 3), minmax(0, 1fr));
}

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

@media (max-width: 640px) {
  .ccg-cards__list { grid-template-columns: minmax(0, 1fr); }
}

/* The stretched anchor's own outline is suppressed because it would frame only
   the heading text; the :has() rule above outlines the whole card instead.
   Where :has() is unsupported, restore the anchor outline so keyboard focus is
   never invisible. */
@supports not selector(:has(*)) {
  .ccg-card__anchor:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }
}

/* ==========================================================================
   Photo cards — full-bleed image, always its own light-text scope.
   The card carries ccg-on-dark itself, independent of the section's surface,
   because a photo card needs light text over its own photo whether it sits
   in a plain, sunken, tinted, or dark section.
   ========================================================================== */

.ccg-card--photo {
  position: relative;
  overflow: hidden; /* clips the image to whatever radius .ccg-card already sets */
  aspect-ratio: var(--card-photo-ratio, 4 / 5);
}

.ccg-card--photo .ccg-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, center);
}

/* Scrim lives under the text, not the whole card, so the top of a tall
   portrait photo stays clean and only the text-bearing area is darkened. */
.ccg-card--photo .ccg-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--scrim) 0%, transparent 60%);
  pointer-events: none;
}

.ccg-card--photo .ccg-card__body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-2);
}
.ccg-card--photo .ccg-card__title,
.ccg-card--photo .ccg-card__body p { margin: 0; }

/* Nameplate treatment for the category label — a bordered chip rather than
   plain small-caps text floating on the photo, closer to an actual equipment
   rating plate than a generic overlay tag. */
.ccg-card--photo .ccg-card__meta--plate {
  display: inline-block;
  width: fit-content;
  border: 1px solid var(--line);
  padding: 0.2em 0.65em;
  background: var(--scrim-soft);
}

.ccg-card--photo .ccg-link { color: inherit; }

/* Restrained hover: the photo breathes slightly, nothing else moves. Gated
   behind reduced-motion so it never needs its own opt-in flag. */
@media (prefers-reduced-motion: no-preference) {
  .ccg-card--photo .ccg-card__photo { transition: transform 0.5s ease; }
  .ccg-card--photo.ccg-card--link:hover .ccg-card__photo,
  .ccg-card--photo.ccg-card--link:has(.ccg-card__anchor:focus-visible) .ccg-card__photo {
    transform: scale(1.04);
  }
}

/* ==========================================================================
   Indexed list — an editorial pathway layout for role families and other
   sequences. The standard card grid remains the default everywhere else.
   ========================================================================== */

.ccg-cards--index.ccg-cards--surface .ccg-cards__list {
  counter-reset: ccg-path;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
}

.ccg-cards--index.ccg-cards--surface .ccg-card {
  display: grid;
  grid-template-columns: minmax(4.5rem, 0.3fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border: 0;
  border-block-start: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
}

.ccg-cards--index.ccg-cards--surface .ccg-card::before {
  counter-increment: ccg-path;
  content: counter(ccg-path, decimal-leading-zero);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--display-3);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  font-variant-numeric: tabular-nums;
}

.ccg-cards--index.ccg-cards--surface .ccg-card__body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.ccg-cards--index.ccg-cards--surface .ccg-card__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.ccg-cards--index.ccg-cards--surface .ccg-card__title {
  margin: 0;
  font-size: var(--step-1);
  line-height: var(--leading-tight);
}

.ccg-cards--index.ccg-cards--surface .ccg-card__body p { margin: 0; }
.ccg-cards--index.ccg-cards--surface .ccg-card__foot { margin-block-start: var(--space-2); }

.ccg-cards--dark.ccg-cards--index.ccg-cards--surface .ccg-card {
  color: var(--ink-inverse);
  border-block-start-color: color-mix(in srgb, var(--ink-inverse) 24%, transparent);
}

.ccg-cards--dark.ccg-cards--index.ccg-cards--surface .ccg-card__meta,
.ccg-cards--dark.ccg-cards--index.ccg-cards--surface .ccg-card__body > p {
  color: var(--ink-inverse);
}

@media (max-width: 640px) {
  .ccg-cards--index.ccg-cards--surface .ccg-cards__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Metrics — oversized facts make short practical benefits feel deliberate,
   while the meta label and sentence keep every number in context. */
.ccg-cards--metrics .ccg-cards__list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--space-4);
}

.ccg-cards--metrics .ccg-card {
  min-height: 100%;
  padding: var(--space-4) 0;
  border: 0;
  border-block-start: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
}

.ccg-cards--metrics .ccg-card__body {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.ccg-cards--metrics .ccg-card__meta {
  order: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.ccg-cards--metrics .ccg-card__title {
  order: 1;
  margin: 0;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--display-2);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

.ccg-cards--metrics .ccg-card__body > p:not(.ccg-card__meta) {
  order: 2;
  margin: 0;
  max-width: 24ch;
}

@media (max-width: 1023px) {
  .ccg-cards--metrics .ccg-cards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ccg-cards--metrics .ccg-cards__list { grid-template-columns: minmax(0, 1fr); }
}