/* Card directory: a hub's cards on one chapter field (DESIGN.md, The One Field Per Chapter Rule). Each card spans six
   rows of the list grid (picture, tag, title, text, figures, link) through subgrid, so the same part lines up across a
   row of cards (The Level Row Rule). A part a card leaves out leaves its row empty; the gaps live on the parts, not
   the rows, so an empty row takes no space. Whole-card links, hover lift and focus come from .card-link
   (components.css). Logical properties, so Arabic pages mirror. */
.cd-head { display: grid; gap: 18px; max-width: 900px; }
.cd-field {
  margin-top: clamp(36px, 4.5vw, 64px); padding: clamp(16px, 2.6vw, 36px);
  border-radius: var(--r-xl); background: var(--cd-field, var(--field-mint));
  corner-shape: var(--sq-shape, round);
}
.cd-sky { --cd-field: var(--field-sky); }
.cd-mint { --cd-field: var(--field-mint); }
.cd-green { --cd-field: var(--field-green); }
.cd-coral { --cd-field: var(--field-coral); }
.cd-periwinkle { --cd-field: var(--field-blue); }

.cd-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.cd-list.cd-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.cd-pic { grid-row: 1; margin-bottom: 14px; }
.cd-tag { grid-row: 2; margin-bottom: 8px; }
.cd-card .card-title { grid-row: 3; }
.cd-card .card-text { grid-row: 4; margin-top: 8px; }
.cd-stats { grid-row: 5; margin-top: 16px; }
.cd-card .card-cta { grid-row: 6; margin-top: 18px; align-self: end; }
@supports not (grid-template-rows: subgrid) {
  .cd-card { display: flex; flex-direction: column; }
  .cd-card .card-cta { margin-top: auto; padding-top: 18px; }
}

/* Flo stands in the card's top corner at the size she has in the hero's thumbnails; a logo sits on a tile */
.cd-pic-flo img { display: block; width: 136px; height: 136px; object-fit: contain; margin-inline-start: -8px; }
.cd-pic-tile-light, .cd-pic-tile-dark {
  display: flex; align-items: center; justify-content: center;
  width: 176px; height: 84px; padding: 14px 20px;
  border-radius: calc(16px * var(--sq-scale, 1)); border: 1px solid var(--tile-dark); background: var(--tile-dark);
  corner-shape: var(--sq-shape, round);
}
.cd-pic-tile-light { background: var(--tile-light); border-color: var(--tile-light-line); }
.cd-pic-tile-light img, .cd-pic-tile-dark img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* A logo with its own dark-background version: the tile follows the theme */
.cd-pic .on-dark { display: none; }
:root[data-theme="dark"] .cd-pic.themed { background: var(--tile-dark); border-color: var(--tile-dark); }
:root[data-theme="dark"] .cd-pic.themed .on-light { display: none; }
:root[data-theme="dark"] .cd-pic.themed .on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cd-pic.themed { background: var(--tile-dark); border-color: var(--tile-dark); }
  :root:not([data-theme="light"]) .cd-pic.themed .on-light { display: none; }
  :root:not([data-theme="light"]) .cd-pic.themed .on-dark { display: block; }
}

.cd-tag { font: 700 13px/1.3 var(--text); letter-spacing: 0.02em; color: var(--ink-soft); }
.cd-stats { display: grid; align-content: start; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.cd-stats li { display: grid; align-content: start; gap: 2px; }
.cd-stats strong { font: 800 1.6rem/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.cd-stats span { font-size: 15px; line-height: 1.4; color: var(--ink-soft); }

@media (max-width: 1023px) {
  .cd-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .cd-list, .cd-list.cd-two { grid-template-columns: minmax(0, 1fr); }
  .cd-pic-flo img { width: 112px; height: 112px; }
}