/* UI-018 blog list as a wide-screen spread (2026-10-11). The head and the
   list ride the shell container, so the page shares the header's left and
   right edge at every width. The head sets title, AI disclosure and ghost
   glyph across the six tick columns; the featured article is a cover-and-text
   spread; the grid is two columns and three from 1600px. Loads after
   authors-index.css; the base list rules stay in article.css, and sizes and
   colours here resolve to tokens. */

/* The head geometry (shell edge, tick module, ticks across the outer
   margins) is shared by every layered head: public.css and chrome.css. */

/* ---------- head: title, positioning line, ghost ---------- */

/* The ghost stays inside the content measure. From 768px each zh glyph
   fills one tick column, so the pair holds the last two; the Latin word is
   set to the same two columns (it measures 3.75em). */
.layered-insights .ghost { right: 0; }
/* Wide phones: the 30vw phone glyph stops growing at 10rem, so it stays
   above the disclosure line. */
@media (max-width: 640px) {
  .layered-insights .ghost { font-size: min(30vw, calc(var(--space-16) * 1.25)); }
}
@media (min-width: 768px) {
  .layered-insights .ghost { top: var(--space-2); right: var(--head-edge); font-size: var(--head-module); line-height: 1; letter-spacing: 0; }
  :lang(en) .layered.layered-insights .ghost { top: var(--space-5); right: var(--head-edge); font-size: calc(var(--head-module) * 2 / 3.8); }
}

/* The AI disclosure reads in ink, not muted; the no-email statement is a
   note on its own line under it. */
.layered-insights .page-head .sub { color: var(--color-text); }
.layered-insights .sub-note { display: block; margin-block-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-label); }

/* Title in the first two columns, disclosure in the middle two, on the
   title's baseline; the ghost keeps the last two to itself. */
@media (min-width: 1024px) {
  .layered-insights .page-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; align-items: last baseline; }
  .layered-insights .page-head h1 { margin: 0; font-size: var(--text-display); }
  .layered-insights .page-head .sub { margin: 0; max-width: none; padding-inline-end: var(--space-8); text-wrap: balance; }
}

/* ---------- writers and filters: one row ---------- */

/* From 1200px the writers strip and the filter chips share one row over one
   rule: writers on the left, filters on the right. Without a strip the chips
   keep the full row. */
@media (min-width: 1200px) {
  .blog-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .blog-list > * { grid-column: 1 / -1; }
  .blog-list > .writers-strip { grid-column: 1; margin: 0 0 var(--space-8); padding-block-end: var(--space-5); border-block-end: 1px solid var(--color-border-strong); }
  .blog-list > .writers-strip + .chips { grid-column: 2; align-content: center; justify-content: flex-end; padding-block-end: var(--space-5); margin-block-end: var(--space-8); }
  .blog-list .writers-strip-end { margin-inline-start: 0; }
}

/* ---------- featured spread ---------- */

/* From 1024px the featured article is a two-column spread: cover beside the
   text, so the headline, summary and byline sit on the first screen with the
   cover. Without a cover the date and title take the wide column and the
   summary and byline the narrow one. */
@media (min-width: 1024px) {
  .blog-list .featured .press-card {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-8);
  }
  .blog-list .featured .press-card > :is(img, noscript) { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
  .blog-list .featured .press-card > :is(.no, h2, p, .meta) { grid-column: 2; }
  .blog-list .featured .press-card:not(:has(img)) > :is(.no, h2) { grid-column: 1; }
  .blog-list .featured .press-card:not(:has(img)) > p { grid-row: 1 / span 2; }
  /* The clamped summary keeps its own height; the byline takes the foot. */
  .blog-list .featured .press-card > p { align-self: start; }
  .blog-list .featured .press-card h2 {
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: var(--weight-bold);
    line-height: 1.3;
    letter-spacing: -0.015em;
  }
}

/* ---------- card grid ---------- */

/* Two columns through 1440 (PRD UI-018); the wider canvas takes a third. */
@media (min-width: 1600px) {
  .blog-list .cardgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}