/* categories.css — 2026 editorial design system
   Each category has a distinct visual personality.
   Base: Inter (body) + Playfair Display (editorial headlines)
   No color changes — differentiation through layout, density, typographic scale, image treatment.
*/

/* ══════════════════════════════════════════════════════
   SHARED UTILITIES
   ══════════════════════════════════════════════════════ */

/* CNN-style trending bar */
.trending-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--bd);
  padding: .55rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .72rem;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}
.trending-bar .tb-label {
  font-weight: 700;
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--am);
  flex-shrink: 0;
}
.trending-bar .tb-items {
  display: flex;
  gap: 0;
  overflow: hidden;
}
.trending-bar .tb-item {
  color: var(--tx2);
  padding: 0 1.1rem;
  border-right: 1px solid var(--bd);
  font-size: .72rem;
  transition: color .15s;
}
.trending-bar .tb-item:first-child { padding-left: 0; }
.trending-bar .tb-item:hover { color: var(--ac); }

/* Category page title */
.cat-hdr {
  max-width: 1280px; margin: 0 auto;
  padding: 2rem 1.5rem 1.5rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.cat-hdr-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -.05em;
  color: var(--tx);
  line-height: 1;
  text-transform: uppercase;
}
.cat-hdr-border { border-bottom: 3px solid var(--tx); margin: 0 1.5rem; max-width: calc(1280px - 3rem); }
.cat-hdr-desc { font-size: .82rem; color: var(--tx2); line-height: 1.5; max-width: 380px; text-align: right; }

/* Sub-section labels */
.sub-lbl {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx);
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--tx);
  margin: 2.5rem 0 1.5rem;
}
.sub-lbl:first-child { margin-top: 1.75rem; }

.cat-wrap { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem 3rem; }
.cat-ad { padding: 1.5rem 0; text-align: center; border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); margin-bottom: 0; }

/* ── BASE CARD ──────────────────────────────────────────── */
.xc { display: flex; flex-direction: column; cursor: pointer; background: transparent; }
.xc:hover .xci img { transform: scale(1.04); }
.xci { overflow: hidden; background: var(--bg3); flex-shrink: 0; }
.xci img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
.xci-blank { width:100%; background: var(--bg3); display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-weight:900; font-size:2rem; color:var(--bd2); }
.xcb { padding: .75rem 0 0; }
.xc-eyebrow { font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--am); margin-bottom:.22rem; font-family:'Inter',sans-serif; }
.xc-title { font-family:'Playfair Display', Georgia, serif; font-weight:700; color:var(--tx); line-height:1.2; }
.xc-deck { font-size:.78rem; color:var(--tx2); line-height:1.65; margin-top:.3rem; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; font-family:'Inter',sans-serif; }
.xc-meta { font-size:.6rem; color:var(--tx3); margin-top:.3rem; font-family:'Inter',sans-serif; }

/* ══════════════════════════════════════════════════════════════
   ■ HEALTH & LONGEVITY — Vogue Health / WELL magazine feel
     Warm, spacious, portrait images, large centered hero title
   ══════════════════════════════════════════════════════════════ */
.layout-health .cat-hdr-title { font-size: clamp(2rem,4vw,3.5rem); letter-spacing: -.02em; text-transform: none; }
.layout-health .sub-lbl { border-bottom-color: var(--ac); color: var(--ac); }

.layout-health .hl-hero {
  display: grid;
  grid-template-columns: 1fr 1.8fr 1fr;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--bd);
  align-items: start;
}
.layout-health .hl-hero .h-center .xci { aspect-ratio: 2/3; }
.layout-health .hl-hero .h-center .xc-title { font-size: 1.4rem; text-align: center; }
.layout-health .hl-hero .h-center .xcb { padding: 1rem 0; }
.layout-health .hl-hero .h-center .xc-deck { text-align: center; -webkit-line-clamp: 3; }
.layout-health .hl-hero .h-side .xci { aspect-ratio: 4/3; }
.layout-health .hl-hero .h-side .xc-title { font-size: .95rem; }
.layout-health .hl-hero .h-side .xc-deck { -webkit-line-clamp: 3; }

.layout-health .hl-2up {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2.5rem; padding: 2rem 0; border-bottom: 1px solid var(--bd);
}
.layout-health .hl-2up .xci { aspect-ratio: 3/2; }
.layout-health .hl-2up .xc-title { font-size: 1.1rem; line-height: 1.2; }
.layout-health .hl-2up .xc-deck { -webkit-line-clamp: 3; }

.layout-health .hl-3col {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--bd);
}
.layout-health .hl-3col .xci { aspect-ratio: 4/3; }
.layout-health .hl-3col .xc-title { font-size: .9rem; }
.layout-health .hl-3col .xc-deck { -webkit-line-clamp: 2; font-size: .75rem; }

.layout-health .hl-more { padding: 2rem 0; }
.layout-health .hl-more .more-row { display:grid; grid-template-columns:80px 1fr 110px; gap:1.25rem; align-items:start; padding:1.1rem 0; border-bottom:1px solid var(--bd); }
.layout-health .hl-more .more-row:last-child { border-bottom:none; }
.layout-health .hl-more .mr-date { font-size:.65rem; color:var(--tx3); }
.layout-health .hl-more .mr-title { font-weight:700; font-size:.95rem; line-height:1.22; color:var(--tx); margin-bottom:.28rem; }
.layout-health .hl-more .mr-deck { font-size:.75rem; color:var(--tx2); line-height:1.6; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.layout-health .hl-more .mr-img { height:72px; overflow:hidden; }
.layout-health .hl-more .mr-img img { width:100%; height:100%; object-fit:cover; }

/* ══════════════════════════════════════════════════════════════
   ■ ECONOMY & WORK — FT / Bloomberg: dense, text-first
   ══════════════════════════════════════════════════════════════ */
.layout-economy .cat-hdr-title { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:900; letter-spacing:-.06em; text-transform:uppercase; }

.layout-economy .eco-top {
  display: grid; grid-template-columns: 1.4fr 1px 1fr; gap: 0;
  padding: 2rem 0; border-bottom: 1px solid var(--bd);
}
.layout-economy .eco-divider { background: var(--bd); margin: 0 2rem; }
.layout-economy .eco-main { padding-right: 2rem; }
.layout-economy .eco-main .xci { aspect-ratio: 3/2; }
.layout-economy .eco-main .xc-title { font-size:1.35rem; font-weight:800; letter-spacing:-.04em; line-height:1.1; }
.layout-economy .eco-main .xc-deck { -webkit-line-clamp:4; font-size:.82rem; }
.layout-economy .eco-list { display:flex; flex-direction:column; gap:0; }
.layout-economy .eco-list .xc { flex-direction:row; gap:.85rem; padding:1rem 0; border-bottom:1px solid var(--bd); align-items:flex-start; }
.layout-economy .eco-list .xc:last-child { border-bottom:none; }
.layout-economy .eco-list .xci { width:90px; height:66px; flex-shrink:0; aspect-ratio:unset; }
.layout-economy .eco-list .xcb { padding:0; }
.layout-economy .eco-list .xc-title { font-size:.88rem; font-weight:700; letter-spacing:-.02em; -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.layout-economy .eco-list .xc-deck { display:none; }

.layout-economy .eco-strip {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-bottom:1px solid var(--bd);
}
.layout-economy .eco-strip .xc { padding:1.25rem 1.5rem 1.25rem 0; border-right:1px solid var(--bd); }
.layout-economy .eco-strip .xc:last-child { border-right:none; padding-right:0; padding-left:1.5rem; }
.layout-economy .eco-strip .xc:nth-child(2),.layout-economy .eco-strip .xc:nth-child(3) { padding-left:1.5rem; }
.layout-economy .eco-strip .xci { display:none; }
.layout-economy .eco-strip .xc-title { font-size:.85rem; font-weight:700; letter-spacing:-.02em; line-height:1.28; }
.layout-economy .eco-strip .xc-deck { -webkit-line-clamp:3; font-size:.72rem; }

/* ══════════════════════════════════════════════════════════════
   ■ AI & TECH — The Verge: bold, tech-forward, sans-serif dominant
   ══════════════════════════════════════════════════════════════ */
.layout-aitech .cat-hdr-title { font-weight:900; letter-spacing:-.06em; text-transform:uppercase; }

/* Hero: wide image left + clean stack right — no boxes no borders */
.layout-aitech .at-hero { display:grid; grid-template-columns:1fr 320px; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--bd); margin-bottom:2rem; }
.layout-aitech .at-hero .at-main .xci { aspect-ratio:21/9; }
.layout-aitech .at-hero .at-main .xc-title { font-size:1.75rem; font-weight:900; letter-spacing:-.05em; line-height:1.05; margin-top:.85rem; }
.layout-aitech .at-hero .at-main .xc-deck { -webkit-line-clamp:2; font-size:.88rem; max-width:580px; }
.layout-aitech .at-hero .at-stack { display:flex; flex-direction:column; gap:0; border-left:1px solid var(--bd); padding-left:1.5rem; }
.layout-aitech .at-hero .at-stack .xc { padding:1rem 0; border-bottom:1px solid var(--bd); }
.layout-aitech .at-hero .at-stack .xc:last-child { border-bottom:none; }
.layout-aitech .at-hero .at-stack .xci { aspect-ratio:16/9; margin-bottom:.5rem; }
.layout-aitech .at-hero .at-stack .xc-title { font-size:.88rem; font-weight:700; letter-spacing:-.025em; }
.layout-aitech .at-hero .at-stack .xc-deck { display:none; }

/* Grid: clean cards, image-led, no background boxes */
.layout-aitech .at-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--bd); margin-bottom:2rem; }
.layout-aitech .at-grid .xc { padding:1.5rem 1.5rem 1.5rem 0; border-right:1px solid var(--bd); }
.layout-aitech .at-grid .xc:last-child { border-right:none; padding-right:0; padding-left:1.5rem; }
.layout-aitech .at-grid .xc:nth-child(2) { padding-left:1.5rem; }
.layout-aitech .at-grid .xci { aspect-ratio:16/9; margin-bottom:.75rem; }
.layout-aitech .at-grid .xc-title { font-size:.92rem; font-weight:700; letter-spacing:-.025em; line-height:1.25; }
.layout-aitech .at-grid .xc-deck { -webkit-line-clamp:2; font-size:.75rem; }

/* Horizontal list: clean rows, thumbnail left */
.layout-aitech .at-fullrow { display:flex; flex-direction:column; gap:0; margin-bottom:2rem; }
.layout-aitech .at-fullrow .xc { flex-direction:row; gap:1.25rem; padding:1.1rem 0; border-bottom:1px solid var(--bd); align-items:flex-start; }
.layout-aitech .at-fullrow .xc:first-child { border-top:1px solid var(--bd); }
.layout-aitech .at-fullrow .xci { width:140px; height:88px; flex-shrink:0; aspect-ratio:unset; }
.layout-aitech .at-fullrow .xcb { padding:0; }
.layout-aitech .at-fullrow .xc-title { font-size:.92rem; font-weight:700; letter-spacing:-.02em; line-height:1.3; }
.layout-aitech .at-fullrow .xc-deck { -webkit-line-clamp:2; font-size:.75rem; }

/* ══════════════════════════════════════════════════════════════
   ■ CLIMATE — Guardian Environment: photojournalism, emotive
   ══════════════════════════════════════════════════════════════ */
.layout-climate .cat-hdr-title { font-weight:900; text-transform:none; letter-spacing:-.03em; }

.layout-climate .cl-splash {
  position:relative; margin-bottom:2rem; border-bottom:1px solid var(--bd); padding-bottom:2rem;
}
.layout-climate .cl-splash .xci { aspect-ratio:21/8; max-height:500px; }
.layout-climate .cl-splash .xc-title { font-size:2rem; letter-spacing:-.04em; line-height:1.1; max-width:640px; margin-top:.85rem; }
.layout-climate .cl-splash .xc-deck { -webkit-line-clamp:3; font-size:.88rem; max-width:580px; }

.layout-climate .cl-3col {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  padding:0 0 2rem; border-bottom:1px solid var(--bd);
}
.layout-climate .cl-3col .xci { aspect-ratio:3/2; }
.layout-climate .cl-3col .xc-title { font-size:1rem; line-height:1.2; }
.layout-climate .cl-3col .xc-deck { -webkit-line-clamp:3; }

.layout-climate .cl-mixed {
  display:grid; grid-template-columns:2fr 1fr; gap:2rem;
  padding:2rem 0; border-bottom:1px solid var(--bd);
}
.layout-climate .cl-mixed .xci { aspect-ratio:16/9; }
.layout-climate .cl-mixed .cl-primary .xc-title { font-size:1.3rem; line-height:1.15; }
.layout-climate .cl-mixed .cl-primary .xc-deck { -webkit-line-clamp:4; font-size:.85rem; }
.layout-climate .cl-mixed .cl-secondary { display:flex; flex-direction:column; gap:1.5rem; border-left:1px solid var(--bd); padding-left:1.5rem; }
.layout-climate .cl-mixed .cl-secondary .xci { aspect-ratio:3/2; }
.layout-climate .cl-mixed .cl-secondary .xc-title { font-size:.88rem; line-height:1.22; }
.layout-climate .cl-mixed .cl-secondary .xc-deck { display:none; }

/* ══════════════════════════════════════════════════════════════
   ■ TECHNOLOGY — Standard but clean, Wired-inspired
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   ■ TRANSPORT — Car & Driver / Electrek: wide landscape, action
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   ■ SCIENCE — Nature / Quanta: academic, typographic restraint
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   ■ FINANCE — Bloomberg / FT: ultra-dense, number-forward
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   ■ POLICY — The Atlantic / NYT Opinion: long-form, editorial weight
   ══════════════════════════════════════════════════════════════ */
.layout-policy .cat-hdr-title { text-transform:none; letter-spacing:-.02em; font-size:clamp(2rem,4vw,3.2rem); }

.layout-policy .po-lead {
  border-bottom:1px solid var(--bd); padding-bottom:2.5rem; margin-bottom:0;
}
.layout-policy .po-lead .xci { aspect-ratio:3/1; max-height:420px; }
.layout-policy .po-lead .xc-title { font-size:2.2rem; letter-spacing:-.04em; line-height:1.08; margin-top:1rem; max-width:760px; }
.layout-policy .po-lead .xc-deck { -webkit-line-clamp:4; font-size:.9rem; line-height:1.75; max-width:680px; margin-top:.6rem; }

.layout-policy .po-mixed {
  display:grid; grid-template-columns:3fr 2fr; gap:3rem;
  padding:2rem 0; border-bottom:1px solid var(--bd); align-items:start;
}
.layout-policy .po-mixed .xci { aspect-ratio:16/9; }
.layout-policy .po-mixed .po-primary .xc-title { font-size:1.3rem; line-height:1.15; }
.layout-policy .po-mixed .po-primary .xc-deck { -webkit-line-clamp:4; font-size:.85rem; }
.layout-policy .po-mixed .po-secondary { border-left:1px solid var(--bd); padding-left:2.5rem; display:flex; flex-direction:column; gap:1.5rem; }
.layout-policy .po-mixed .po-secondary .xc-title { font-size:.95rem; line-height:1.22; }
.layout-policy .po-mixed .po-secondary .xc-deck { -webkit-line-clamp:3; font-size:.78rem; }

.layout-policy .po-opinions {
  padding:2rem 0; border-bottom:1px solid var(--bd);
}
.layout-policy .po-opinions .sub-lbl { margin-top:0; }
.layout-policy .po-op-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.layout-policy .po-op-grid .xc { padding:1.25rem; border-right:1px solid var(--bd); }
.layout-policy .po-op-grid .xc:last-child { border-right:none; }
.layout-policy .po-op-grid .xci { display:none; }
.layout-policy .po-op-grid .xc-title { font-size:.95rem; line-height:1.3; }
.layout-policy .po-op-grid .xc-deck { -webkit-line-clamp:3; font-size:.75rem; }

/* ══════════════════════════════════════════════════════════════
   ■ TRANSPORTATION & MOBILITY — wide landscape images, action
   ══════════════════════════════════════════════════════════════ */
.layout-transport .tr-banner { border-bottom:1px solid var(--bd); padding-bottom:2rem; }
.layout-transport .tr-banner .xci { aspect-ratio:21/8; }
.layout-transport .tr-banner .xc-title { font-size:2rem; font-weight:900; letter-spacing:-.05em; line-height:1.05; margin-top:.85rem; }
.layout-transport .tr-banner .xc-deck { -webkit-line-clamp:2; font-size:.88rem; max-width:620px; }
.layout-transport .tr-2plus2 { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--bd); border:1px solid var(--bd); margin:2rem 0; }
.layout-transport .tr-2plus2 .xc { background:var(--bg); }
.layout-transport .tr-2plus2 .xci { aspect-ratio:16/9; }
.layout-transport .tr-2plus2 .xc-title { font-size:.95rem; font-weight:700; letter-spacing:-.025em; padding:.75rem; }
.layout-transport .tr-2plus2 .xcb { padding:.75rem; }
.layout-transport .tr-2plus2 .xc-deck { -webkit-line-clamp:2; font-size:.75rem; }
.layout-transport .tr-list { padding:0 0 2rem; border-bottom:1px solid var(--bd); }
.layout-transport .tr-list .xc { flex-direction:row; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--bd); align-items:flex-start; }
.layout-transport .tr-list .xc:last-child { border-bottom:none; }
.layout-transport .tr-list .xci { width:160px; height:100px; flex-shrink:0; aspect-ratio:unset; }
.layout-transport .tr-list .xcb { padding:0; }
.layout-transport .tr-list .xc-title { font-size:1rem; font-weight:700; letter-spacing:-.025em; }
.layout-transport .tr-list .xc-deck { -webkit-line-clamp:2; }


   ══════════════════════════════════════════════════════════════ */
.more-list { padding:2rem 0; }
.more-item { display:grid; grid-template-columns:72px 1fr 120px; gap:1.25rem; align-items:start; padding:1.25rem 0; border-bottom:1px solid var(--bd); text-decoration:none; }
.more-item:last-child { border-bottom:none; }
.more-item:hover .mi-title { color:var(--ac); }
.more-item:hover .mi-img img { transform:scale(1.04); }
.mi-date { font-size:.65rem; color:var(--tx3); font-family:'Inter',sans-serif; padding-top:.15rem; }
.mi-body {}
.mi-title { font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:.98rem; line-height:1.22; color:var(--tx); margin-bottom:.3rem; transition:color .15s; }
.mi-deck { font-size:.75rem; color:var(--tx2); line-height:1.6; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-family:'Inter',sans-serif; }
.mi-img { overflow:hidden; }
.mi-img img { width:100%; height:80px; object-fit:cover; transition:transform .35s; }

/* Paywall */
.cat-pw { padding:2.5rem 2rem; text-align:center; background:var(--bg2); border-top:2px solid var(--ac); margin:2rem 0; }
.cat-pw h3 { font-family:'Playfair Display',Georgia,serif; font-size:1.2rem; font-weight:700; margin-bottom:.5rem; }
.cat-pw p { font-size:.82rem; color:var(--tx2); line-height:1.6; margin-bottom:1.25rem; }
.cat-pw-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.cat-pw .btn-basic { padding:.55rem 1.5rem; background:var(--ac); color:#fff; border-radius:4px; font-weight:700; font-size:.82rem; font-family:'Inter',sans-serif; }
.cat-pw .btn-pro   { padding:.55rem 1.5rem; background:var(--am); color:#fff; border-radius:4px; font-weight:700; font-size:.82rem; font-family:'Inter',sans-serif; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media(max-width:1024px) {
  .layout-economy .eco-top,
  .layout-economy .eco-divider,
  .layout-economy .eco-main,
  .layout-aitech .at-hero,
  .layout-aitech .at-hero .at-stack,
  .layout-health .hl-hero,
  .layout-health .hl-hero .h-side:nth-child(3),
  .layout-economy .eco-strip,
  .layout-policy .po-mixed { grid-template-columns:1fr; }
  .layout-policy .po-mixed .po-secondary { border-left:none; padding-left:0; border-top:1px solid var(--bd); padding-top:1.25rem; display:grid; grid-template-columns:1fr 1fr; }
  .more-item { grid-template-columns:60px 1fr 90px; }
}
@media(max-width:768px) {
  .layout-health .hl-2up,.layout-health .hl-3col,.layout-climate .cl-3col,
  .layout-climate .cl-mixed { grid-template-columns:1fr; }
  .layout-climate .cl-mixed .cl-secondary { border-left:none; padding-left:0; border-top:1px solid var(--bd); padding-top:1.5rem; display:grid; grid-template-columns:1fr 1fr; }
  
  .layout-aitech .at-grid,.layout-policy .po-op-grid { grid-template-columns:1fr 1fr; }
  .layout-economy .eco-strip,
  .more-item { grid-template-columns:1fr; }
  .mi-date,.mi-img { display:none; }
}