/* ============================================================
 * Capriastro — /astrology/ (the Astrology hub — the Learn page re-sectioned, owner 2026-10-18)
 * Design: the hero of 1i · ONE card in all three sections — the retired Chronicles hub's card (1j · T19 · D3): the article's
 * picture, eyebrow, title, its Excerpt as the italic line, date · reading time.
 * Enqueued by the page-<slug>.css convention in capriastro-engine.php.
 * Values are var(--cap-*) only; the raw values are card GEOMETRY, marked `geometry`.
 * ============================================================ */

/* ─── page rhythm ─────────────────────────────────────────── */
.cap-shell .cap-learn { padding-bottom: var(--cap-space-xl); }

.cap-shell .cap-learn__hero { text-align: center; padding-top: var(--cap-space-after-header); }
.cap-shell .cap-learn__hero > * + * { margin-top: var(--cap-space-md); }
.cap-shell .cap-learn__eyebrow { display: block; letter-spacing: var(--cap-track-wide); }
.cap-shell .cap-learn__hero .cap-h1 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.cap-shell .cap-learn__hero .cap-lede { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* ─── section head above the grid ─────────────────────────── */
.cap-shell .cap-learn__section { margin-top: var(--cap-space-lg); }
.cap-shell .cap-learn__head { flex-wrap: wrap; margin-bottom: var(--cap-space-md); }

@media (max-width: 699px) {
  /* 1i, 28 Sep sheet (CD's markup at 388): hero 14 apart, the lede plain 16 */
  .cap-shell .cap-learn__hero > * + * { margin-top: var(--cap-space-gap-7); }
  .cap-shell .cap-learn__hero .cap-lede { font-size: var(--cap-type-base); font-weight: 400; color: var(--cap-color-text); line-height: normal; }
}

/* the free-chart band at the foot (owner 28 Sep — 1i): the post pages' band (components.css). Round 34 (owner 2026-10-06): the
   "More shelves are coming" line above it is gone, so the band sits where that line sat — 32 under the last row, 20 on a phone */
.cap-shell .cap-learn__chart-wrap { margin-top: var(--cap-space-lg); }
@media (max-width: 699px) { .cap-shell .cap-learn__chart-wrap { margin-top: var(--cap-space-block-4); } }
@media (max-width: 699px) {
  /* 1i, as 1k draws it: 20 in, the lilac edge, the 76 icon beside the ✦ eyebrow, the lede and the link */
  .cap-shell .cap-learn__chart { align-items: center; gap: var(--cap-space-gap-7); padding: var(--cap-space-block-4); border: var(--cap-border-hairline) solid var(--cap-color-line-halo); }
  .cap-shell .cap-learn__chart .cap-post__chart-icon { width: var(--cap-mp-post-band-icon); }
  .cap-shell .cap-learn__chart .cap-post__chart-copy { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-learn__chart .cap-post__chart-h { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-eyebrow); line-height: normal; letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; color: var(--cap-color-primary-soft); }
  .cap-shell .cap-learn__chart .cap-post__chart-h::before { content: "✦\00a0"; }
  .cap-shell .cap-learn__chart .cap-post__chart-lede { font-size: var(--cap-mp-type-post-band-lede); line-height: var(--cap-mp-leading-sub); }
  .cap-shell .cap-learn__chart .cap-post__chart-link { line-height: normal; }
}

/* the sections on a phone (1i): 32 from one section to the next heading, 14 from the heading to the cards; the right-hand label
   ("The complete ten-part series") is desktop-only (owner 2026-10-08) */
@media (max-width: 699px) {
  .cap-shell .cap-learn__head > .cap-eyebrow { display: none; }                        /* the sections' right-hand labels are desktop-only (owner 2026-10-08) */
  .cap-shell .cap-learn__section { margin-top: var(--cap-mp-space-learn-shelf-top); }  /* 32 from the heading to the shelf title */
  .cap-shell .cap-learn__head { margin-bottom: var(--cap-space-gap-7); }               /* 14 from the title's line to the first row */
  .cap-shell .cap-learn__head .cap-section { line-height: normal; }
}

/* ─── THE ONE CARD, all three sections (owner 2026-10-18): the retired Chronicles hub's card — its rules moved here with the
   page (page-chronicles.css retired). The sky shows the latest six, then "All sky posts →". Desktop 1280+: picture cards three to a row, equal heights,
   the meta on the foot; 700–1279: hairline rows with a square thumb (140 · 120 below 1024); phones: full-bleed rows with
   an 84 thumb, the page's inset inside them. The heading sits on the page inset like every section head. ───────────── */
.cap-shell .cap-learn__cards .cap-learn__head { margin-bottom: var(--cap-space-md); }
.cap-shell .cap-learn__cards > .cap-empty { padding-left: var(--cap-page-x); padding-right: var(--cap-page-x); }
.cap-shell .cap-learn__sky-all { margin-top: var(--cap-space-md); }   /* "All sky posts →" under the cards, on the page inset */
.cap-shell .cap-chron__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cap-gutter); align-items: start; }
.cap-shell .cap-chron__card { display: flex; flex-direction: column; background: var(--cap-color-surface); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); border-radius: var(--cap-radius-flat); overflow: hidden; color: inherit; transition: box-shadow var(--cap-ease), border-color var(--cap-ease), background var(--cap-ease); }
@media (hover: hover) { .cap-shell .cap-chron__card:hover { box-shadow: var(--cap-shadow-lift); color: inherit; } }
.cap-shell .cap-chron__card-img { display: block; height: auto; aspect-ratio: 2 / 1; min-height: 180px; min-width: 0; flex: none; background: var(--cap-color-bg-deep); overflow: hidden; } /* geometry: 180px card image */
.cap-shell .cap-chron__card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cap-shell .cap-chron__card-lede { color: var(--cap-color-text-secondary); }   /* the article's Excerpt, the card's italic line (cap-lede--card) */
/* tablet + desktop: at most two lines, cut at the last whole word by assets/js/hub-cards.js (owner 2026-10-18 — never the CSS cut,
   which split words); phones hide the line (below) */
.cap-shell .cap-chron__card-body { display: flex; flex-direction: column; gap: var(--cap-space-sm); padding: var(--cap-space-faq-gap); }
.cap-shell .cap-chron__card-title { 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); color: var(--cap-color-text); }   /* D6's card title, the post's "Keep reading" style */
@media (min-width: 1280px) {
  .cap-shell .cap-chron__list { align-items: stretch; }
  .cap-shell .cap-chron__card-body { flex: 1 1 auto; }
  .cap-shell .cap-chron__card-body > .cap-meta { margin-top: auto; }
}
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell .cap-chron__list { display: flex; flex-direction: column; align-items: stretch; gap: 0; border-bottom: var(--cap-border-hairline) solid var(--cap-color-line-strong); }
  .cap-shell .cap-chron__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-chron__card:hover { box-shadow: none; background: var(--cap-color-surface); } }
  .cap-shell .cap-chron__card-img { width: 140px; height: 140px; min-height: 0; aspect-ratio: auto; } /* geometry: the 140 thumb (T19) */
  .cap-shell .cap-chron__card-body { gap: var(--cap-space-gap-5); padding: 0; min-width: 0; }
  :root body .cap-shell .cap-chron__card .cap-eyebrow--card { font-size: var(--cap-type-caption); letter-spacing: var(--cap-track-meta); }   /* T19's row label 13 · .14em — past the desktop one-eyebrow rule (components.css, from 1024) */
  .cap-shell .cap-chron__card-title { text-wrap: pretty; }
  .cap-shell .cap-learn__cards .cap-meta { font-size: var(--cap-type-caption); letter-spacing: var(--cap-track-meta); color: var(--cap-color-caption); }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .cap-shell .cap-chron__card-img { width: 120px; height: 120px; } /* geometry: the 120 thumb (T19-820) */
}
@media (max-width: 699px) {
  .cap-shell .cap-chron__list { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-left: 0; padding-right: 0; border-bottom: var(--cap-border-hairline) solid var(--cap-color-line-strong); }
  .cap-shell .cap-chron__card { flex-direction: row; gap: var(--cap-space-gap-7); padding: var(--cap-space-block-3) var(--cap-page-x); background: transparent; border: 0; border-top: var(--cap-border-hairline) solid var(--cap-color-line-strong); overflow: visible; }
  @media (hover: hover) { .cap-shell .cap-chron__card:hover { box-shadow: none; background: var(--cap-color-surface); } }   /* a row's hover is a quiet fill (round 23) */
  .cap-shell .cap-chron__card-img { width: 84px; height: 84px; min-height: 0; aspect-ratio: auto; } /* geometry: 84px thumb */
  .cap-shell .cap-chron__card-body { gap: var(--cap-space-gap-3); padding: 0; }
  .cap-shell .cap-chron__card-title { 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-learn__cards .cap-eyebrow--card { font-size: var(--cap-type-eyebrow); line-height: normal; }
  .cap-shell .cap-learn__cards .cap-meta { line-height: normal; letter-spacing: var(--cap-mp-track-chron-meta); color: var(--cap-color-caption); }
  .cap-shell .cap-learn__cards .cap-learn__head { margin-bottom: var(--cap-space-gap-7); }
  .cap-shell .cap-chron__card-lede { display: none; }   /* phones: no italic line — the Chronicles hub's phone row (owner 2026-10-18); tablet + desktop keep it */
}

/* 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 — the
   token's pair (--cap-space-footer-gap). Appended last so it wins over the page's earlier end spacing. */
.cap-shell .cap-learn { padding-bottom: var(--cap-space-footer-gap); }