/* ==========================================================
   sections.css: layout for the six section templates
   (src/_includes/sections/*.njk), loaded by layouts/base.njk on section pages only.

   LOOK comes from main.css (the home page): .sec-head, .story-*, .pick-tag, .overlay-card,
   .most-read-list, .sidebar-widget, .byline-*. This file only arranges them.
   Nothing here is hardcoded: colours, fonts and weights are the :root tokens of main.css,
   and every size you may want to tune is a variable in the block below.
   Logical properties only (inline-start/end), so Arabic (RTL) and English share every rule.
   No underlines and no hover effects on links or headlines (site rule).
   ========================================================== */

.spg {
  /* ---- tune the section pages here ---- */
  --spg-gap: 1.5rem;                       /* space between cards */
  --spg-band-gap: 2.5rem;                  /* space between category bands / blocks */
  --spg-title-size: 1.75rem;               /* page title */
  --spg-lead-size: 1.36rem;                /* lead headline (same as .story-title-xl) */
  --spg-thumb: 7rem;                       /* small thumbnails in lists */
  --spg-thumb-lg: 9rem;                    /* thumbnails in the long "latest" lists */
  --spg-card-min: 14rem;                   /* narrowest a card may get in a grid */
  --spg-mosaic-row: 13.75rem;              /* height of one mosaic row (desktop) */
  --spg-dark: var(--color-primary-dark);   /* dark panels (Technical, Economy) */
  --spg-on-dark: var(--color-on-dark);
  --spg-on-dark-soft: var(--on-dark-muted);
  --spg-on-dark-line: var(--on-dark-line);
  --spg-accent-on-dark: var(--blue-300);
  --spg-line: var(--color-line);
  --spg-radius: var(--radius-card);
  --spg-panel-radius: var(--radius);
}

/* ---------- page header ---------- */
.spg-head { margin-bottom: 0.75rem; }
.spg-head .sec-head-title { font-size: var(--spg-title-size); }
.spg-desc { margin: 0 0 var(--spg-gap); max-width: 46rem; }
.spg-empty { color: var(--color-ink-muted); margin-block: 2.5rem; font-size: 1rem; }

/* ---------- shared story pieces ---------- */
.spg-row-text { flex: 1; min-width: 0; }
.spg .story-list-roomy .story-thumb { flex-basis: var(--spg-thumb-lg); }
.spg-card .pick-tag { margin-top: 0.6rem; }
.spg-card .story-title { margin-bottom: 0; }
.spg-card .story-excerpt { margin-top: 0.4rem; }
.spg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--spg-card-min), 1fr)); gap: var(--spg-gap); }
.spg-band { margin-bottom: var(--spg-band-gap); }
.spg-first .overlay-caption h4,
.spg-tile--big .overlay-caption h4 { font-size: var(--spg-lead-size); }

.spg-by { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin-top: 0.6rem; }
.spg-av { width: 2rem; height: 2rem; flex: none; border-radius: 50%; object-fit: cover; }
.spg-av--none { display: flex; align-items: center; justify-content: center; background: var(--color-primary-tint); color: var(--color-primary-dark); font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: 0.8rem; }
.spg-picks .mr-number { min-width: 2rem; }

/* ---------- stages: lead + three headlines ---------- */
.spg-lead { margin-bottom: var(--spg-band-gap); }
.spg-lead .story-row .story-thumb { flex-basis: var(--spg-thumb); }

/* ---------- mosaic ---------- */
.spg-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: var(--spg-band-gap); }
.spg-tile { aspect-ratio: 4 / 3; }
.spg-tile--big { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
@media (min-width: 768px) {
  .spg-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, var(--spg-mosaic-row)); }
  .spg-tile { aspect-ratio: auto; }
  .spg-tile--big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

/* ---------- dark panels (pathways, markets) ---------- */
.spg-dark { display: grid; gap: var(--spg-gap); background: var(--spg-dark); color: var(--spg-on-dark); border-radius: var(--spg-panel-radius); padding: var(--spg-gap); margin-bottom: var(--spg-band-gap); }
.spg-dark-title { margin: 0; font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--spg-title-size); line-height: var(--lh-display); color: var(--spg-on-dark); }
.spg-dark-desc { margin: 0.6rem 0 0; font-size: 0.89rem; line-height: 1.8; color: var(--spg-on-dark-soft); }
.spg-dark .story-title,
.spg-dark .story-title a { color: var(--spg-on-dark); }
.spg-on-dark-kick { display: block; margin-bottom: 0.4rem; font-family: var(--font-heading); font-size: 0.7rem; font-weight: var(--fw-heading); color: var(--spg-accent-on-dark); }
@media (min-width: 992px) {
  .spg-t-pathways .spg-dark { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: calc(var(--spg-gap) * 2); padding: calc(var(--spg-gap) * 1.5); }
}

/* pathways: numbered cards */
.spg-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spg-gap); margin-bottom: var(--spg-band-gap); }
@media (min-width: 768px) { .spg-paths { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spg-path-media { position: relative; aspect-ratio: 3 / 4; }
.spg-path .story-title { margin-top: 0.6rem; }
.spg-path-n { position: absolute; top: 0.6rem; inset-inline-start: 0.6rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-bg); color: var(--color-primary-dark); font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: 0.9rem; }

/* columns, one per category (pathways, markets) */
.spg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--spg-band-gap) calc(var(--spg-gap) * 1.5); }
.spg-col { min-width: 0; }
.spg-col .story-row .story-thumb { flex-basis: 5rem; }

/* ---------- markets desk ---------- */
.spg-desk-lead { display: grid; gap: var(--spg-gap); align-items: center; }
@media (min-width: 992px) { .spg-desk-lead { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: calc(var(--spg-gap) * 1.5); } }
.spg-top3 { display: grid; border-top: 1px solid var(--spg-on-dark-line); }
.spg-top3-item { display: flex; align-items: flex-start; gap: 0.8rem; padding-block: 1rem; font-family: var(--font-heading); font-size: 0.87rem; font-weight: var(--fw-heading); line-height: var(--lh-title); color: var(--spg-on-dark); }
.spg-top3-item b { font-size: 1.44rem; font-weight: var(--fw-heading); line-height: 1; color: var(--spg-accent-on-dark); }
@media (min-width: 768px) { .spg-top3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spg-gap); } }

/* ---------- ledger ---------- */
.spg-entry { display: grid; grid-template-columns: minmax(0, 1fr) var(--spg-thumb); gap: 1rem; align-items: start; padding-block: 1.25rem; border-bottom: 1px solid var(--spg-line); }
.spg-entry .story-thumb { flex: none; max-width: none; }
.spg-entry-text { min-width: 0; }
.spg-entry .story-title { margin-bottom: 0; }
/* category label, then the date, on one small line (shared with other lists: .spg-meta) */
.spg-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; margin-bottom: 0.3rem; }
.spg-meta .pick-tag { display: inline; margin: 0; }
.spg-meta .byline-date { font-size: 0.7rem; color: var(--color-ink-muted); }
.spg-meta .pick-tag + .byline-date::before { content: "\00b7"; margin-inline-end: 0.5rem; }

/* ---------- reading room ---------- */
.spg-feature { display: grid; gap: var(--spg-gap); align-items: center; padding-bottom: calc(var(--spg-gap) * 1.5); margin-bottom: calc(var(--spg-gap) * 1.5); border-bottom: 2px solid var(--color-primary-dark); }
@media (min-width: 992px) { .spg-feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: calc(var(--spg-gap) * 1.5); } }
.spg-feature .pick-tag { margin-bottom: 0.4rem; }
.spg-grid--2 { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--spg-band-gap); }
@media (min-width: 640px) { .spg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- pagination ---------- */
.section-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin: 2.5rem 0 0.5rem; }
.section-pagination .pg-list { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.section-pagination .pg-link { display: inline-block; min-width: 2.4rem; padding: 0.45rem 0.8rem; text-align: center; border: 1px solid var(--color-line); border-radius: var(--spg-radius); font-family: var(--font-heading); font-size: 0.8rem; font-weight: var(--fw-heading); color: var(--color-ink); background: var(--color-bg); }
.section-pagination a.pg-link:hover { background: var(--color-bg-soft); }
.section-pagination .pg-current { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-on-dark); }
.section-pagination .pg-gap { padding: 0.45rem 0.2rem; color: var(--color-ink-muted); }