/* cards.css: the issue card (.icard, sitebuild/cards.py issue_card) on the library grid, the home rail and the
   related insights; the home page's library rail and Strature GPS band; the library grid and its series filter.
   Owner: WP1 (design_specs/00_INDEX.md). Tokens only; no new colours; no inline styles (CSP). */

/* ---------- the issue card ---------- */
.icard{display:grid;gap:10px;align-content:start;border-top:1px solid var(--ink);padding-top:16px;min-width:0}
.icard-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);line-height:1.3}
.icard-chip{color:var(--ink)}
.icard-code,.icard-date,.icard-rel time{font-family:var(--mono);font-weight:500;letter-spacing:.02em;text-transform:none;font-size:12px}
.icard-ed{letter-spacing:.08em}
.icard-ed .num{font-family:var(--mono);font-weight:500;letter-spacing:0}
/* W-117: "Edition 1.0 · 30 Sep 2026 · Released 1 Oct 2026", one item that wraps only at a separator */
.icard-when{min-width:0}
.icard-ed,.icard-date,.icard-rel{white-space:nowrap}
.icard-sep{margin:0 2px}
.icard-st{color:var(--ink);border:1px solid var(--ink);padding:1px 6px;letter-spacing:.1em}
.icard-title{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.25;letter-spacing:-.006em;font-variation-settings:"opsz" 24;text-wrap:pretty;max-width:34ch}
.icard-title a{text-decoration:none;color:var(--ink)}
.icard-title a:hover{text-decoration:underline;text-underline-offset:4px}
.icard-dek{font-size:16px;line-height:1.5;max-width:52ch;text-wrap:pretty;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.icard--compact .icard-dek{-webkit-line-clamp:2;line-clamp:2}
.icard-thumb{order:4;min-width:0}
.icard-foot{order:5;display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;font-family:var(--sans);font-size:14px}
.icard-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600}
.icard-foot a.tl{border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;padding-bottom:0}
.icard-foot a:not(.tl){font-weight:500;text-underline-offset:3px}
/* QA S1, S6: from 600px every thumbnail is one fixed height (300px), so the titles of a row line up; the plate inside is drawn to
   fit whole (at most three rows, no source line: the brief page prints the full plate and its source), so there is no
   fade and nothing is cut (verify_extra/wp1.py card_thumbs_whole measures it). The lettered block is decoration: it
   fills the box on wide screens and is not drawn on the phone. */
@media (min-width:600px){
  .icard-thumb{order:-1;height:300px;overflow:hidden;position:relative}
  .icard-thumb > .plate,.icard-thumb > .icard-type{height:100%;box-sizing:border-box}
}
@media (min-width:600px) and (max-width:767px){.icard-thumb{height:330px}}  /* two narrow columns: Q-021's four counts */
@media (max-width:599px){.icard-thumb:not(.lead):has(> .icard-type){display:none}.icard-thumb.lead > .icard-type{display:none}}
/* the library's first card (.lead): the hero above shows its plate from 600px, so the card shows the cover there */
@media (min-width:600px){.icard-thumb.lead > .plate{display:none}}
.icard-thumb .plate.mini .p-lede,.icard-thumb .plate.mini .p-rule,.icard-thumb .plate.mini .p-foot{display:none}
@media (min-width:900px){.icard-title{font-size:22px}}
/* the cover when a brief has no drawable plate (sitebuild/cards.py type_block), decoration only: the series name; the
   series letter and number; the subject countries; the domains; the house rule and the Strature mark at the foot */
.icard-type{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;align-items:baseline;column-gap:10px;padding:20px 24px 16px;background:var(--navy);color:var(--white);min-height:160px}
.icard-type::before{content:attr(data-s);grid-column:1;grid-row:2;font-family:var(--serif);font-weight:600;font-size:56px;line-height:1}
.icard-type::after{content:attr(data-n);grid-column:2;grid-row:2;font-family:var(--mono);font-size:28px;color:rgba(251,249,245,.8)}
.icard-type > span{grid-column:1 / -1;min-width:0}
.icard-type .it-k{grid-row:1;margin-bottom:12px;font:600 11px/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:rgba(251,249,245,.85)}
.icard-type .it-w{grid-row:3;margin-top:18px;font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.icard-type .it-d{grid-row:4;align-self:start;margin-top:8px;font:500 12px/1.4 var(--sans);letter-spacing:.06em;color:rgba(251,249,245,.8)}
.icard-type .it-m{grid-row:5;align-self:end;display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(251,249,245,.35);font:600 11px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase}
.icard-type .it-m i{display:inline-block;width:6px;height:14px;background:var(--paper)}
/* mini plates inside a card: the plate is a picture of the brief, not a second headline */
.icard-thumb .plate.mini .p-title{font-size:15px;max-width:none}
/* the label sits above its bar, so the bar keeps its width in a four-column rail (review: no crushed plates) */
.icard-thumb .plate.mini .p-plot{gap:4px}
.icard-thumb .plate.mini .p-row{grid-template-columns:minmax(0,1fr) 52px;row-gap:2px}
.icard-thumb .plate.mini .p-row .p-lab{grid-column:1 / -1;font-size:10.5px}
.icard-thumb .plate.mini .p-axis{margin:6px 62px 0 0}
.icard-thumb .plate.mini .p-axis.wide{margin:6px 0 0}

/* ---------- the library grid and its series filter (/briefs/) ---------- */
.lib-grid{display:grid;gap:32px;align-items:start}
@media (min-width:600px){.lib-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
@media (min-width:1100px){.lib-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;row-gap:48px}}
.lib-empty{display:none;font-style:italic;color:var(--graphite)}
#fs-q:checked ~ .lib-grid .icard:not([data-series="Q"]),#fs-c:checked ~ .lib-grid .icard:not([data-series="C"]),
#fs-t:checked ~ .lib-grid .icard:not([data-series="T"]),#fs-x:checked ~ .lib-grid .icard:not([data-series="X"]),
#fs-s:checked ~ .lib-grid .icard:not([data-series="S"]){display:none}
#fs-q:checked ~ .lib-grid .lib-empty[data-series="Q"],#fs-c:checked ~ .lib-grid .lib-empty[data-series="C"],
#fs-t:checked ~ .lib-grid .lib-empty[data-series="T"],#fs-x:checked ~ .lib-grid .lib-empty[data-series="X"],
#fs-s:checked ~ .lib-grid .lib-empty[data-series="S"]{display:block}
#library .catf .cat-filter{gap:8px;margin-bottom:24px}
#library .catf .cat-filter label{min-height:44px;padding:0 12px;font-size:13.5px}
@media (max-width:599px){#library{padding-top:20px}#library .catf .cat-filter{gap:6px;margin-bottom:20px}#library .catf .cat-filter label{padding:0 10px;font-size:13px}}
/* the library hero: the newest issue's plate on the right, hidden on the phone (the first card shows the same issue) */
@media (max-width:599px){.lib-hero .ih-plate{display:none}}
.lib-hero .ih-plate{margin-top:32px}
@media (min-width:900px){.lib-hero .ih-plate{margin-top:0}}
.lib-hero .ih-art .icard-type{min-height:200px}

/* ---------- home: "Latest from the library" ---------- */
.rail-cards{display:grid;gap:24px}
@media (min-width:600px){.rail-cards{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:40px}}
@media (min-width:1100px){.rail-cards{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px}}
@media (max-width:599px){.rail-cards .icard:not(:first-child) .icard-thumb{display:none}}
.rail-cards .icard-title{font-size:20px}

/* ---------- home: the Strature GPS band (navy) ---------- */
.gps-band{padding:48px 0}
@media (min-width:900px){.gps-band{padding:88px 0}}
.gps-band h2{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.15;letter-spacing:-.012em;max-width:22ch;margin:12px 0}
@media (min-width:900px){.gps-band h2{font-size:32px}}
.gps-band .rail p{max-width:48ch;color:rgba(251,249,245,.92)}
.gps-find{display:grid;gap:8px;margin-top:24px;max-width:460px}
.gps-find label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(251,249,245,.85)}
.gps-find-row{display:flex;gap:8px}
.gps-find input{flex:1 1 auto;min-width:0;min-height:46px;padding:0 12px;font:16px/1.2 var(--sans);color:var(--ink);background:var(--white);border:1px solid var(--white);border-radius:0}
.gps-find input::placeholder{color:var(--graphite)}
.gps-find input:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.gps-find .btn{flex:0 0 auto}
.gps-band-map{display:block;margin-top:32px}
/* 960x470 (WP2 contract 3); the ratio is set here because tests/test_qa_fixes.py reads raster sizes only */
.gps-band-map img{width:100%;height:auto;aspect-ratio:960 / 470;display:block}
@media (min-width:900px){.gps-band-map{margin-top:0}}

/* ---------- /samples/ on the phone (W-115, the owner's phone standard): the first card's headline on the first screen.
   The hero keeps its eyebrow and title; its standfirst and its link to the full brief print below the first card
   (.ph-on, pages-briefs.css); its "See the free briefs" jump is not repeated there, the briefs being on screen. ---------- */
@media (max-width:599px){
  .hero-cap.samples-hero{padding:20px 0 20px}
  .hero-cap.samples-hero h1{font-size:30px;line-height:1.08;max-width:none}
  #briefs{padding-top:20px}
  #briefs > .wrap > .opener{margin-bottom:20px}
  #briefs > .wrap > .opener h2{font-size:23px}
  .cards.samples .samples-intro{padding:0 0 8px}
  .cards.samples .samples-intro .standfirst{margin-top:16px;font-size:17px;line-height:1.5}
  .cards.samples .samples-intro .ctas{margin-top:12px}
}

/* ---------- /samples/ from 900px (final QA item 3): the hero's right column is the page's contents, numbered, each row a
   44px link to its section (.dt-only: not drawn below 900px) ---------- */
/* W-118: at 1440x900 the first sample card's headline is on the first screen (it ended at y=995): the hero and the
   briefs section open tighter from 900px; verify_extra/polish.py samples_contents holds it (headline bottom <= 900) */
@media (min-width:900px){
  .hero-cap.samples-hero{padding:40px 0 32px}
  .samples-hero + #briefs{padding-top:40px}
  .samples-hero + #briefs > .wrap > .opener{margin-bottom:24px}
}
.samples-toc{align-self:end;border-top:1px solid var(--ink)}
.samples-toc .lbl{display:block;margin:12px 0 4px}
.samples-toc ol{list-style:none;margin:0;padding:0}
.samples-toc li{border-bottom:1px solid var(--hair)}
.samples-toc a{display:grid;grid-template-columns:40px 1fr;align-items:baseline;gap:0 8px;min-height:44px;padding:14px 0;color:var(--ink);text-decoration:none}
.samples-toc a:hover .t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.samples-toc .n{font-family:var(--mono);font-size:13px;color:var(--graphite)}
.samples-toc .t{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.25;text-wrap:balance}