/* ============================================================
 * Capriastro — category / tag / date ARCHIVE
 * Design: mobile screen 2b · desktop pattern D3 (3-up post cards
 * under the category header).
 *
 * Surface: the Elementor Theme-Builder archive template #1602 and its
 * loop item #1615. The template's outer container carries `cap-shell`,
 * so every rule below is scoped by it exactly like the page files.
 * The selectors reach into Elementor's own widget markup because the
 * loop is an Elementor Pro Loop Grid — the class hooks (`cap-arc*`)
 * are set on each widget's Advanced → CSS Classes.
 *
 * ENQUEUE NOTE FOR CC: `page-<slug>.css` is `is_singular()`-only, so an
 * archive has no auto-enqueue. Until capriastro-engine.php grows an
 * `is_archive()` branch, template #1602 loads this file with a <link>
 * in its first HTML widget. Swap that for a real enqueue.
 *
 * Values are var(--cap-*) only (bare pixel box sizes for the drawn
 * thumb / disc geometry, as components.css does for .cap-thumb).
 * ============================================================ */

/* ─── page rhythm ─────────────────────────────────────────────
   Elementor containers carry the kit's default padding and a 20px gap;
   every container this template owns is zeroed here and given its
   spacing from the tokens instead. */
.cap-shell .cap-arc,
.cap-shell .cap-arc__head,
.cap-shell .cap-arc__list { gap: 0; }
.cap-shell .cap-arc { padding-top: 0; padding-bottom: var(--cap-space-xl); }
.cap-shell .cap-arc__head { padding-top: var(--cap-space-after-header); padding-bottom: 0; }
.cap-shell .cap-arc__list { padding-top: 0; padding-bottom: 0; }
.cap-shell .cap-arc__eyebrow { display: block; margin-bottom: var(--cap-space-sm); }

/* Elementor widgets: strip the theme's own heading/paragraph styling and
   hand each one its design-system role. */
.cap-shell .cap-arc__title .elementor-heading-title {
  font-family: var(--cap-font-display);
  font-weight: 800;
  font-size: var(--cap-type-xl);
  line-height: var(--cap-leading-display);
  letter-spacing: var(--cap-track-display);
  color: var(--cap-color-text);
  margin: 0;
}
.cap-shell .cap-arc__lede,
.cap-shell .cap-arc__lede p {
  font-family: var(--cap-font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--cap-type-lede);
  line-height: var(--cap-leading-lede);
  color: var(--cap-color-text-secondary);
  margin: 0;
  max-width: var(--cap-measure);
}
.cap-shell .cap-arc__lede { margin-top: var(--cap-space-sm); }
.cap-shell .cap-arc__lede:empty { display: none; }

/* ─── the grid ────────────────────────────────────────────── */
.cap-shell .cap-arc__grid { margin-top: var(--cap-space-lg); }
.cap-shell .cap-arc__grid .elementor-loop-container {
  --grid-column-gap: var(--cap-gutter);
  --grid-row-gap: var(--cap-gutter);
}

/* ─── one post: image / feature card, grey lift on hover ──── */
.cap-shell .cap-arc__grid .e-loop-item { display: flex; }
.cap-shell .cap-arc-card {
  flex: 1;
  padding: 0;
  gap: 0;
  background: var(--cap-color-surface);
  border: var(--cap-border-hairline) solid var(--cap-color-line-strong);
  border-radius: var(--cap-radius-flat);
  overflow: hidden;
  transition: box-shadow var(--cap-ease), border-color var(--cap-ease), background var(--cap-ease);
}
@media (hover: hover) { .cap-shell .cap-arc-card:hover { box-shadow: var(--cap-shadow-lift); } }

.cap-shell .cap-arc-card__media { background: var(--cap-color-bg-deep); }
/* Elementor wraps the featured image in an inline-block <a>; that anchor is
   the img's containing block, so a percentage width there resolves against
   a shrink-to-fit box and the image never fills the card. Block it out. */
.cap-shell .cap-arc-card__media a { display: block; width: 100%; }
.cap-shell .cap-arc-card__media img {
  display: block;
  width: 100%;
  height: auto; aspect-ratio: 2 / 1; min-height: 180px; min-width: 0;   /* NO PICTURE WIDER THAN 2 : 1 (owner 2026-10-03): 2 : 1, never shorter than the sheet's height */
  object-fit: cover;
  border-radius: var(--cap-radius-flat);
}
.cap-shell .cap-arc-card__body {
  padding: var(--cap-space-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--cap-space-sm);
}

/* category — the violet eyebrow above the title */
.cap-shell .cap-arc-card__cat ul,
.cap-shell .cap-arc-card__cat li { margin: 0; padding: 0; list-style: none; }
.cap-shell .cap-arc-card__cat,
.cap-shell .cap-arc-card__cat a,
.cap-shell .cap-arc-card__cat span {
  font-family: var(--cap-font-ui);
  font-weight: 500;
  font-size: var(--cap-type-eyebrow-card);
  letter-spacing: var(--cap-track-eyebrow);
  text-transform: uppercase;
  color: var(--cap-color-primary);
  line-height: var(--cap-leading-ui);
}
@media (hover: hover) { .cap-shell .cap-arc-card__cat a:hover { color: var(--cap-color-text); } }

/* title — D6's card title, the post's "Keep reading" style (owner 2026-10-02: D6 wins over the serif card title) */
.cap-shell .cap-arc-card__title .elementor-heading-title,
.cap-shell .cap-arc-card__title .elementor-heading-title a {
  font-family: var(--cap-font-display-sm);
  font-weight: 800;
  font-size: var(--cap-type-lg);
  line-height: var(--cap-leading-tight);
  letter-spacing: var(--cap-track-tight);
  text-transform: none;
  color: var(--cap-color-text);
  margin: 0;
}

/* meta — author · date */
.cap-shell .cap-arc-card__meta ul,
.cap-shell .cap-arc-card__meta li { margin: 0; padding: 0; list-style: none; }
.cap-shell .cap-arc-card__meta .elementor-post-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cap-space-sm); }
.cap-shell .cap-arc-card__meta,
.cap-shell .cap-arc-card__meta a,
.cap-shell .cap-arc-card__meta span {
  font-family: var(--cap-font-ui);
  font-weight: 500;
  font-size: var(--cap-type-meta);
  letter-spacing: var(--cap-track-meta);
  text-transform: uppercase;
  color: var(--cap-color-muted);
  line-height: var(--cap-leading-ui);
}

/* ─── pagination: the shared page numbers live in components.css (THE PAGE NUMBERS, owner 2026-10-03) ─── */

/* ─── empty state (dashed, states.md §Loading & empty) ────── */
.cap-shell .cap-arc__grid .e-loop-nothing-found-message,
.cap-shell .cap-arc__grid .elementor-nothing-found {
  border: var(--cap-border-hairline) dashed var(--cap-color-line-strong);
  border-radius: var(--cap-radius-flat);
  padding: var(--cap-space-card-pad);
  font-family: var(--cap-font-serif);
  font-style: italic;
  font-size: var(--cap-type-small);
  color: var(--cap-color-muted);
  text-align: center;
}

/* the empty archive (2b / 2j, owner ruling 2026-09-28): the line in the card headline, then the way on */
.cap-shell .cap-arc__grid .e-loop-nothing-found-message { display: flex; flex-direction: column; align-items: center; gap: var(--cap-space-sm); padding: var(--cap-space-panel-pad); font-style: normal; }
.cap-shell .cap-arc__empty-t { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-h3-card); line-height: var(--cap-leading-serif-title); color: var(--cap-color-text); }
.cap-shell .cap-arc__empty-link { margin-top: var(--cap-space-xs); padding-bottom: calc(var(--cap-space-gap-1) + var(--cap-border-hairline)); border-bottom: var(--cap-border-hairline) solid var(--cap-color-primary); font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-textlink); letter-spacing: var(--cap-track-btn); text-transform: uppercase; line-height: normal; color: var(--cap-color-primary); }
@media (hover: hover) { .cap-shell .cap-arc__empty-link:hover { color: var(--cap-color-text); border-bottom-color: var(--cap-color-text); } }

/* ─── mobile: the grid becomes the 2b list of rows ────────── */
@media (max-width: 699px) {
  .cap-shell .cap-arc__list { padding-left: var(--cap-page-x-card); padding-right: var(--cap-page-x-card); }
  .cap-shell .cap-arc__grid { margin-top: var(--cap-space-md); }
  .cap-shell .cap-arc__grid .elementor-loop-container {
    --grid-column-gap: 0px;
    --grid-row-gap: 0px;
  }
  .cap-shell .cap-arc-card {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--cap-space-md);
    background: transparent;
    border: 0;
    border-top: var(--cap-border-hairline) solid var(--cap-color-line);
    padding: var(--cap-space-row-pad) var(--cap-space-xs);
  }
  @media (hover: hover) { .cap-shell .cap-arc-card:hover { background: var(--cap-color-surface); box-shadow: none; } }
  .cap-shell .cap-arc-card__media { flex: none; width: 84px; }
  .cap-shell .cap-arc-card__media a,
  .cap-shell .cap-arc-card__media img { width: 84px; height: 84px; min-height: 0; aspect-ratio: auto; }
  .cap-shell .cap-arc-card__body { padding: 0; gap: var(--cap-space-xs); flex: 1; }

  /* 2b, 28 Sep sheet (CD's markup at 388): the head 11 / .14em → 14 → h1 28 / 1.12 → 14 → the lede 15 regular; the
     Newest / Most read chips 20 under it; the rows edge to edge (16 / 26 pads, 14 between thumb and text, the strong
     hairline, white on hover), cat 13 / .16em → title 17 / 1.25 → meta 10 / .12em, 6 apart; pages 20 under the list */
  .cap-shell .cap-arc__eyebrow { margin-bottom: var(--cap-space-gap-7); font-size: var(--cap-type-eyebrow-card); letter-spacing: var(--cap-track-caption); color: var(--cap-color-caption); line-height: normal; }
  .cap-shell .cap-arc__title .elementor-heading-title { font-family: var(--cap-font-display-sm); font-size: var(--cap-type-h1-hero); line-height: var(--cap-leading-hero); letter-spacing: var(--cap-track-hero); }
  .cap-shell .cap-arc__lede { margin-top: var(--cap-space-gap-7); }
  .cap-shell .cap-arc__lede, .cap-shell .cap-arc__lede p { font-weight: 400; }
  .cap-shell .cap-arc__list { padding-left: 0; padding-right: 0; }
  .cap-shell .cap-arc__grid { margin-top: var(--cap-space-panel-pad); }
  .cap-shell .cap-arc-card { gap: var(--cap-space-gap-7); padding: var(--cap-space-md) var(--cap-page-x); border-top-color: var(--cap-color-line-strong); }
  .cap-shell .cap-arc-card__body { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-arc-card__cat, .cap-shell .cap-arc-card__cat a, .cap-shell .cap-arc-card__cat span { font-size: var(--cap-type-eyebrow); line-height: normal; }
  .cap-shell .cap-arc-card__title .elementor-heading-title,
  .cap-shell .cap-arc-card__title .elementor-heading-title a { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-mp-type-chron-row-title); line-height: var(--cap-mp-leading-chron-row-title); letter-spacing: var(--cap-mp-track-chron-row-title); }
  .cap-shell .cap-arc-card__meta, .cap-shell .cap-arc-card__meta a, .cap-shell .cap-arc-card__meta span { letter-spacing: var(--cap-track-feature); color: var(--cap-color-caption); line-height: normal; }
  .cap-shell .cap-arc__grid .elementor-pagination { margin-top: var(--cap-space-panel-pad); }
  .cap-shell .cap-arc__grid .elementor-pagination .page-numbers { font-size: var(--cap-type-spec-label); }
  .cap-shell .cap-arc__grid .elementor-pagination .page-numbers.next { margin-left: var(--cap-space-gap-3); font-size: var(--cap-type-eyebrow-card); letter-spacing: var(--cap-track-caption); color: var(--cap-color-caption); }
  .cap-shell .cap-arc__grid .e-loop-nothing-found-message { margin: 0 var(--cap-page-x); }
}

/* the Newest / Most read chips (2b, owner ruling 2026-09-28): 11 / .14em pills, the current one on the ink edge */
.cap-shell .cap-arc__sort { margin-top: var(--cap-space-panel-pad); }
.cap-shell .cap-arc-sort { display: flex; gap: var(--cap-space-sm); }
.cap-shell .cap-arc-sort__chip { display: inline-flex; align-items: center; justify-content: center; padding: var(--cap-mp-arc-chip-pad); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); border-radius: var(--cap-radius-pill); font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-eyebrow-card); line-height: var(--cap-leading-ui); letter-spacing: var(--cap-track-caption); text-transform: uppercase; white-space: nowrap; color: var(--cap-color-caption); text-decoration: none; transition: border-color var(--cap-ease), color var(--cap-ease); }
 .cap-shell .cap-arc-sort__chip.is-on { border-color: var(--cap-color-text); color: var(--cap-color-text); }
@media (hover: hover) { .cap-shell .cap-arc-sort__chip:hover { border-color: var(--cap-color-text); color: var(--cap-color-text); } }

/* 700–1279 · tag + category archives (owner 2026-10-01): the Chronicles hub's rows (T19 / T19-820) — one column, the
   140 thumb (120 at 820) beside the text, the bold headline face, a strong hairline between rows; the eyebrow purple */
@media (min-width: 700px) and (max-width: 1279px) {
  :root body .cap-shell .cap-arc__grid .elementor-loop-container { grid-template-columns: minmax(0, 1fr); --grid-column-gap: 0px; --grid-row-gap: 0px; }
  .cap-shell .cap-arc-card { flex-direction: row; align-items: center; gap: var(--cap-gutter); padding: var(--cap-gutter) 0; background: transparent; border: 0; border-top: var(--cap-border-hairline) solid var(--cap-color-line-strong); border-radius: 0; overflow: visible; }
  @media (hover: hover) { .cap-shell .cap-arc-card:hover { box-shadow: none; background: var(--cap-color-surface); } }
  .cap-shell .cap-arc-card__media { flex: none; width: 140px; }   /* geometry: the hub's 140 thumb (T19) */
  .cap-shell .cap-arc-card__media a, .cap-shell .cap-arc-card__media img { width: 140px; height: 140px; min-height: 0; aspect-ratio: auto; object-fit: cover; }
  .cap-shell .cap-arc-card__body { flex: 1; min-width: 0; padding: 0; gap: var(--cap-space-gap-5); }
  .cap-shell .cap-arc-card__cat, .cap-shell .cap-arc-card__cat a, .cap-shell .cap-arc-card__cat span { font-size: var(--cap-type-caption); letter-spacing: var(--cap-track-meta); }
  .cap-shell .cap-arc-card__title .elementor-heading-title,
  .cap-shell .cap-arc-card__title .elementor-heading-title a { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-lg); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-tight); text-wrap: balance; }
  .cap-shell .cap-arc__eyebrow { color: var(--cap-color-primary); letter-spacing: var(--cap-track-eyebrow); }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .cap-shell .cap-arc-card__media { width: 120px; }   /* geometry: the 120 thumb (T19-820) */
  .cap-shell .cap-arc-card__media a, .cap-shell .cap-arc-card__media img { width: 120px; height: 120px; min-height: 0; aspect-ratio: auto; }
}

/* THE FOOTER GAP (owner 2026-10-02): from the last thing on the page to the footer, 64 from 700 up and 40 on a phone. Below
   1280 the last post row is a plain row, so its own padding under the thumbnail / meta line counts toward the gap. */
.cap-shell .cap-arc { padding-bottom: var(--cap-space-footer-gap); }
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell .cap-arc { padding-bottom: calc(var(--cap-space-footer-gap) - var(--cap-gutter)); }
}
@media (max-width: 699px) {
  .cap-shell .cap-arc { padding-bottom: calc(var(--cap-space-footer-gap) - var(--cap-space-md)); }
}

/* EQUAL CARDS IN A ROW (owner 2026-10-02): the loop grid already gives a row one height; from 1280 the date · read-time line
   now sits on the card's foot, as on the Chronicles hub and D6. */
@media (min-width: 1280px) {
  .cap-shell .cap-arc-card__body { flex: 1 1 auto; }
  .cap-shell .cap-arc-card__meta { margin-top: auto; }
}