/* ═══════════════════════════════════════════════════════════════════
   Articles — the newspaper mosaic
   Extends signal.css. Everything here is scoped under .sg.

   The grid is the six-column .sg-bento rhythm, with shape assigned by
   POSITION rather than by content, so the mosaic tiles identically whether
   or not a given article has an image — 28 of the 60 published articles
   have none, so a text card is half the design, not an edge case.

   One cycle is twelve cards over six rows, and it tiles exactly:
     1 lead (4x2) + 5 standard (2) + 1 tall (2x2) + 2 wide (4) + 3 standard
     = 8 + 10 + 4 + 8 + 6 = 36 cells = 6 columns x 6 rows.
   paginate_by is 24, which is two whole cycles.
   ═══════════════════════════════════════════════════════════════════ */

/* ── The rail above the grid ─────────────────────────────────────── */
.ar-rail { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.ar-search { position: relative; flex: 1 1 18rem; max-width: 26rem; }
.ar-search input {
  width: 100%; padding: .85rem 1rem .85rem 2.75rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
  color: var(--ink); font: 500 .92rem/1 var(--body); outline: none;
  transition: border-color .2s, background .2s;
}
.ar-search input::placeholder { color: var(--dim); }
.ar-search input:focus { border-color: rgba(var(--accent-rgb), .6); background: rgba(255, 255, 255, .05); }
.ar-search button { position: absolute; inset-block: 0; left: .35rem; display: grid; place-items: center; width: 2.25rem; border: 0; background: none; color: var(--dim); cursor: pointer; }
.ar-search button:hover { color: var(--accent); }

/* Pills that are links, not buttons: the state lives in the URL so a filter
   can be shared, crawled, and survive pagination. */
.ar-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ar-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem;
  border-radius: 999px; border: 1px solid var(--line-2); background: transparent;
  color: var(--muted); font: 600 .66rem/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; transition: color .2s, border-color .2s, background .2s;
}
.ar-chip:hover { color: var(--ink); border-color: rgba(var(--accent-rgb), .45); }
.ar-chip span { color: var(--dim); }
.ar-chip.is-active { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .08); }
.ar-chip-clear { color: var(--warm); border-color: rgba(245, 196, 81, .4); }
.ar-chip-clear:hover { color: #fff; background: rgba(245, 196, 81, .12); border-color: rgba(245, 196, 81, .6); }

/* ── The featured splash, page one only ──────────────────────────── */
.ar-splash {
  position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--panel);
  overflow: hidden; margin-bottom: 1rem; transition: border-color .25s;
}
.ar-splash:hover { border-color: var(--line-2); }
.ar-splash-media { position: relative; min-height: 22rem; background: var(--panel-2); overflow: hidden; }
.ar-splash-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ar-splash:hover .ar-splash-media img { transform: scale(1.04); }
.ar-splash--text { grid-template-columns: 1fr; }
.ar-splash--text .ar-splash-body { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.ar-splash-body .ar-cat { z-index: 2; }
.ar-splash-body { padding: clamp(1.6rem, 3vw, 2.8rem); display: flex; flex-direction: column; justify-content: center; gap: .9rem; }
.sg .ar-splash-title { font-family: var(--display); font-size: clamp(1.6rem, 2.9vw, 2.6rem); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.ar-splash-title a { color: inherit; text-decoration: none; }
.ar-splash-title a::after { content: ''; position: absolute; inset: 0; }

/* ── The mosaic ──────────────────────────────────────────────────── */
.ar-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(170px, auto); gap: 1rem; }

.ar-card {
  container-type: inline-size;
  position: relative; grid-column: span 2; display: flex; flex-direction: column;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--panel);
  overflow: hidden; transition: border-color .25s, transform .25s;
}
.ar-card:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .45); }

/* The cycle. Shape is positional, so the grid never develops a hole. */
.ar-card:nth-child(12n + 1) { grid-column: span 4; grid-row: span 2; }
.ar-card:nth-child(12n + 7) { grid-column: span 2; grid-row: span 2; }
.ar-card:nth-child(12n + 8),
.ar-card:nth-child(12n + 9) { grid-column: span 4; }

/* The two shapes that are wide and short read better side by side. */
.ar-card:nth-child(12n + 8),
.ar-card:nth-child(12n + 9) { flex-direction: row; }
.ar-card:nth-child(12n + 8) .ar-media,
.ar-card:nth-child(12n + 9) .ar-media { width: 38%; flex: 0 0 38%; aspect-ratio: auto; }

.ar-media { position: relative; aspect-ratio: 16 / 9; background: var(--panel-2); overflow: hidden; border-bottom: 1px solid var(--line); }
.ar-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ar-card:hover .ar-media img { transform: scale(1.05); }
/* The lead and the tall card give the image the room they have. */
.ar-card:nth-child(12n + 1) .ar-media { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.ar-card:nth-child(12n + 1):not(.ar-card--text) .ar-body { flex: 0 0 auto; }
.ar-card:nth-child(12n + 7) .ar-media { aspect-ratio: 4 / 3; }

.ar-body { padding: 1.15rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; min-width: 0; }
/* Above the title's full-card overlay, so the category stays clickable. */
.ar-cat { position: relative; z-index: 1; align-self: flex-start; color: var(--accent); font: 600 .6rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.ar-cat:hover { color: var(--green-2); }
.sg .ar-title { font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.22; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.ar-title a { color: inherit; text-decoration: none; }
/* The whole card is the hit area, without nesting a link inside a link. */
.ar-title a::after { content: ''; position: absolute; inset: 0; }
.ar-card:hover .ar-title { color: #fff; }
.ar-excerpt { color: var(--muted); font-size: .86rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ar-meta { margin-top: auto; padding-top: .7rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; color: var(--dim); font: 500 .68rem/1 var(--mono); letter-spacing: .06em; border-top: 1px solid var(--line); }
.ar-meta .ar-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

/* A card with no image. Half the library, so it is a designed state rather
   than a fallback: the type grows into the space the image would have used,
   over a faint plotted grid so it still reads as a card. */
.ar-card--text .ar-body { justify-content: center; gap: .65rem; padding-block: 1.5rem; }
/* A text card is stretched to whatever height the pictures in its row set.
   The body centres its content for that reason, but the footer's `margin-top:
   auto` pulled against it and opened a gap in the middle of the card instead.
   Centring the whole block, footer included, turns that leftover height into
   balanced space around it. */
.ar-card--text .ar-meta { margin-top: 0; }
.ar-card--text {
  background:
    linear-gradient(160deg, rgba(var(--accent-rgb), .07), transparent 58%),
    repeating-linear-gradient(0deg, rgba(148,163,184,.045) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(148,163,184,.045) 0 1px, transparent 1px 22px),
    var(--panel);
}
.sg .ar-card--text .ar-title { font-size: 1.15rem; }
.ar-card--text .ar-excerpt { -webkit-line-clamp: 3; }
.ar-card--text .ar-kicker { font: 600 .58rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }

/* Size the type to the card's real width, not to its position in the cycle. */
@container (min-width: 380px) { .sg .ar-title { font-size: 1.22rem; } .sg .ar-card--text .ar-title { font-size: 1.45rem; } }
@container (min-width: 560px) { .sg .ar-title { font-size: 1.6rem; } .sg .ar-card--text .ar-title { font-size: 1.9rem; } .ar-excerpt { font-size: .92rem; -webkit-line-clamp: 3; } }
@container (min-width: 760px) { .sg .ar-title { font-size: 2.05rem; } .sg .ar-card--text .ar-title { font-size: 2.3rem; } }

/* ── Empty state ─────────────────────────────────────────────────── */
.ar-empty { grid-column: 1 / -1; padding: clamp(2.5rem, 6vw, 5rem) 1.5rem; text-align: center; border-radius: var(--r); border: 1px dashed var(--line-2); background: var(--panel); }
.ar-empty h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .6rem; }
.ar-empty p { color: var(--muted); margin-bottom: 1.5rem; }
.ar-empty-list { list-style: none; margin: 2rem auto 0; padding: 1.5rem 0 0; max-width: 32rem; text-align: left; border-top: 1px solid var(--line); display: grid; gap: .6rem; }
.ar-empty-list a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.ar-empty-list a:hover { color: var(--accent); }

mark.search-hit { background: rgba(var(--accent-rgb), .2); color: var(--green-2); padding: 0 .15em; border-radius: .2em; }

/* ── Pager ───────────────────────────────────────────────────────── */
.ar-pager { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; margin-top: 3rem; }
.ar-pager a, .ar-pager span {
  min-width: 2.6rem; padding: .6rem .9rem; border-radius: .75rem; text-align: center;
  border: 1px solid var(--line-2); color: var(--muted); text-decoration: none;
  font: 600 .8rem/1 var(--mono); transition: color .2s, border-color .2s, background .2s;
}
.ar-pager a:hover { color: var(--ink); border-color: rgba(var(--accent-rgb), .5); }
.ar-pager .is-current { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .08); }
.ar-pager .ar-gap { border: 0; min-width: 1rem; padding-inline: .2rem; color: var(--dim); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* At four columns the six-column cycle no longer divides evenly, so the
     last card of each cycle widens to keep the total a multiple of four. */
  .ar-card:nth-child(12n + 1) { grid-column: span 4; grid-row: span 2; }
  .ar-card:nth-child(12n + 7) { grid-column: span 2; grid-row: span 1; }
  .ar-card:nth-child(12n + 7) .ar-media { aspect-ratio: 16 / 9; }
  .ar-card:nth-child(12n + 12) { grid-column: span 4; }
  .ar-card:nth-child(12n + 8),
  .ar-card:nth-child(12n + 9),
  .ar-card:nth-child(12n + 12) { flex-direction: row; }
  .ar-card:nth-child(12n + 12) .ar-media { width: 38%; flex: 0 0 38%; aspect-ratio: auto; }
}

@media (max-width: 760px) {
  .ar-splash { grid-template-columns: 1fr; }
  .ar-splash-media { min-height: 14rem; }
}

@media (max-width: 640px) {
  .ar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  /* One readable column. A mosaic on a phone is just a list with the sizes
     shuffled, so the shapes are dropped rather than scaled down. */
  .ar-card,
  .ar-card:nth-child(12n + 1),
  .ar-card:nth-child(12n + 7),
  .ar-card:nth-child(12n + 8),
  .ar-card:nth-child(12n + 9),
  .ar-card:nth-child(12n + 12) { grid-column: span 2; grid-row: auto; flex-direction: column; }
  .ar-card:nth-child(12n + 1) .ar-media,
  .ar-card:nth-child(12n + 7) .ar-media,
  .ar-card:nth-child(12n + 8) .ar-media,
  .ar-card:nth-child(12n + 9) .ar-media,
  .ar-card:nth-child(12n + 12) .ar-media { width: 100%; flex: none; aspect-ratio: 16 / 9; }
  .ar-rail { gap: .75rem; }
  .ar-search { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-card, .ar-media img, .ar-splash-media img { transition: none; }
  .ar-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Sort, applied filters, pager count
   ═══════════════════════════════════════════════════════════════════ */
.ar-sort { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ar-sort-label { color: var(--dim); font: 600 .62rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; margin-right: .2rem; }

/* What is applied right now, each removable on its own. */
/* Set apart from the topic chips above it: run together, this row reads as
   another row of topics rather than as what is currently applied. */
.ar-active { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1.1rem 0 1.8rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.ar-active-count { margin-left: .3rem; color: var(--dim); font: 500 .72rem/1 var(--mono); letter-spacing: .08em; }
.ar-chip-on { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); }
.ar-chip-on span { color: var(--accent); font-size: .95rem; line-height: 0; }
.ar-chip-on:hover { color: #fff; background: rgba(var(--accent-rgb), .16); border-color: rgba(var(--accent-rgb), .7); }

.ar-pager-count { margin-top: .9rem; text-align: center; color: var(--dim); font: 500 .72rem/1 var(--mono); letter-spacing: .1em; }

/* ═══════════════════════════════════════════════════════════════════
   The two cards beside the lead
   ═══════════════════════════════════════════════════════════════════
   Positions 2 and 3 sit alongside the lead, which spans two rows, so each
   is as tall as half of it while being no wider than a standard card.
   Container queries size type by width and cannot see that, which left a
   third of those cards empty between the excerpt and the footer.
   Only at six columns: at four the lead spans the full width and these two
   fall into an ordinary row. */
@media (min-width: 1101px) {
  /* With a picture, let it take the height the text does not want. */
  .ar-card:nth-child(12n + 2) .ar-media,
  .ar-card:nth-child(12n + 3) .ar-media { aspect-ratio: auto; flex: 1 1 auto; min-height: 9rem; }
  .ar-card:nth-child(12n + 2):not(.ar-card--text) .ar-body,
  .ar-card:nth-child(12n + 3):not(.ar-card--text) .ar-body { flex: 0 0 auto; }

  /* Without one, the words get the room instead. */
  .sg .ar-card--text:nth-child(12n + 2) .ar-title,
  .sg .ar-card--text:nth-child(12n + 3) .ar-title { font-size: 1.62rem; }
  .ar-card--text:nth-child(12n + 2) .ar-excerpt,
  .ar-card--text:nth-child(12n + 3) .ar-excerpt { -webkit-line-clamp: 5; font-size: .92rem; }
  .ar-card--text:nth-child(12n + 2) .ar-body,
  .ar-card--text:nth-child(12n + 3) .ar-body { padding: 1.5rem 1.5rem 1.4rem; gap: .7rem; }
}

@media (max-width: 640px) {
  .ar-sort { width: 100%; }
}