/* news-glass.css: the look of the server-rendered News pages inside the
   liquid-glass shell. Loaded after glass.css by server/news/render-public.js
   and by nothing else.

   It restyles the body classes the renderers already emit (news-intro,
   featured-rail, filter-row, chip, news-grid, fcard, ncard, cf-panel, tp-*,
   post, sources, share) with glass.css's own tokens, so the news pages read as
   the same system as the static pages. No markup changed, so every main.js
   behaviour (rail arrows, chip filter, card tilt, copy link) keeps its hooks.

   Everything is scoped under .news-shell on purpose: glass.css already owns
   .news-grid, .news-title and .news-card for the home page's news box, and an
   unscoped rule here would restyle the home page too. */

.news-shell {
  /* Clear the fixed nav, and inset from the viewport edge. The section itself
     is left bare (below) so this padding lands exactly once; the band and the
     footer carry their own inset, as they do on the static flow pages. */
  padding: calc(var(--nav-h) + 2 * var(--edge)) var(--edge) 0;

  /* Topic palette, one source of truth for the chips, the pills and the
     Colour Field panels. Four of the five ARE glass tokens; policy (plum) and
     wellbeing are the two the shell does not carry. */
  --t-chatbot: var(--wine);
  --t-research: var(--blue);
  --t-policy: #2b0047;
  --t-schools: var(--green);
  --t-wellbeing: #5a8f4a;

  /* The article panel's own padding, named so the 72ch text measure below can
     be stated as a text measure rather than guessed at. */
  --post-pad: clamp(18px, 3.2vw, 46px);
}

.news-deck > .page-flow { padding: 0; }
.news-deck .newsletter { width: auto; margin-inline: var(--edge); }
.news-deck .site-footer { margin-inline: var(--edge); }

.news-shell a { color: inherit; text-decoration: none; }
.news-shell :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ── Index head ──────────────────────────────────────────────────────────── */

.news-shell .news-intro {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(10px, 1.8vh, 20px);
  padding: clamp(18px, 4vh, 48px) 0 clamp(18px, 3vh, 34px);
}
.news-shell .news-eyebrow {
  display: inline-block;
  padding: .45em 1.15em;
  border-radius: var(--r-pill);
  background: var(--eyebrow-blue-bg);
  color: var(--blue);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
}
.news-shell h1.news-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.022em;
  text-wrap: balance;
  margin: 0;
}
.news-shell .news-standfirst {
  font-size: var(--fs-body);
  color: var(--ink-soft);
  line-height: var(--lh-body);
  max-width: 72ch;
  margin: 0;
}

/* ── Featured rail ───────────────────────────────────────────────────────── */

.news-shell .featured-rail { padding: 0 0 clamp(6px, 1vh, 12px); }
.news-shell .rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 clamp(10px, 1.6vh, 18px);
}
.news-shell .rail-head h2 {
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}
.news-shell .rail-nav-group { display: flex; gap: 8px; }
.news-shell .rail-nav {
  appearance: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--glass-bg);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
}
.news-shell .rail-nav:hover:not(:disabled) { border-color: var(--blue); }
.news-shell .rail-nav:disabled { opacity: .35; cursor: default; }
.news-shell .rail-scroller {
  display: flex;
  gap: var(--edge);
  overflow-x: auto;
  padding: 4px 4px clamp(14px, 2.2vh, 24px);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.news-shell .rail-scroller::-webkit-scrollbar { display: none; }

/* ── Topic chips and pills ───────────────────────────────────────────────── */

.news-shell .filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: clamp(4px, 1vh, 10px) 0 0;
}
.news-shell .filter-row .flabel {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 4px;
}
.news-shell .chip {
  appearance: none;
  cursor: pointer;
  padding: .45em 1.1em;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--glass-bg);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.news-shell .chip:hover { border-color: var(--blue); }
.news-shell .chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.news-shell .chip[data-topic="chatbot"].is-active { background: var(--t-chatbot); border-color: var(--t-chatbot); }
.news-shell .chip[data-topic="research"].is-active { background: var(--t-research); border-color: var(--t-research); }
.news-shell .chip[data-topic="policy"].is-active { background: var(--t-policy); border-color: var(--t-policy); }
.news-shell .chip[data-topic="schools"].is-active { background: var(--t-schools); border-color: var(--t-schools); }
.news-shell .chip[data-topic="wellbeing"].is-active { background: var(--t-wellbeing); border-color: var(--t-wellbeing); }

.news-shell .topic-pill {
  display: inline-flex;
  align-items: center;
  padding: .34em .95em;
  border-radius: var(--r-pill);
  background: var(--tc, var(--ink-soft));
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.2;
}
.news-shell .tp-chatbot { --tc: var(--t-chatbot); }
.news-shell .tp-research { --tc: var(--t-research); }
.news-shell .tp-policy { --tc: var(--t-policy); }
.news-shell .tp-schools { --tc: var(--t-schools); }
.news-shell .tp-wellbeing { --tc: var(--t-wellbeing); }

/* ── Card grid. Five per line at the design width, a founder requirement,
      so the columns are explicit per breakpoint rather than auto-fit. ────── */

.news-shell .news-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--edge);
  align-items: start;
  margin: 0;
  padding: clamp(14px, 2.4vh, 28px) 0 clamp(18px, 3vh, 36px);
}
.news-shell .news-grid .empty {
  display: none;
  grid-column: 1 / -1;
  padding: 18px 0;
  color: var(--ink-soft);
  font-size: var(--fs-body);
}
.news-shell .news-grid .empty.show { display: block; }

/* fcard = rail, ncard = grid. Same anatomy, different scale. */
.news-shell .fcard,
.news-shell .ncard {
  background: #fff;
  color: var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--glass-shadow);
  transform-style: preserve-3d;
  will-change: transform;
}
.news-shell .fcard {
  flex: 0 0 38%;
  min-width: min(360px, 82%);
  border-radius: var(--r-glass);
  scroll-snap-align: start;
}
.news-shell .fcard-link,
.news-shell .ncard-link {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  color: inherit;
}
.news-shell .fcard-media,
.news-shell .ncard-media { overflow: hidden; }
.news-shell .fcard-media > img,
.news-shell .ncard-media > img,
.news-shell .fcard-media > .cf-panel,
.news-shell .ncard-media > .cf-panel {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.news-shell .fcard-link:hover .fcard-media > *,
.news-shell .ncard-link:hover .ncard-media > * { transform: scale(1.04); }
.news-shell .fcard-body { padding: clamp(14px, 2.2vh, 24px) clamp(16px, 2vw, 26px) clamp(16px, 2.4vh, 26px); }
.news-shell .ncard-body { padding: clamp(11px, 1.6vh, 16px) clamp(12px, 1.4vw, 18px) clamp(13px, 1.8vh, 20px); }
.news-shell .fcard-body h3,
.news-shell .ncard-body h3 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.01em;
}
.news-shell .fcard-body h3 {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.25;
  margin: clamp(9px, 1.4vh, 13px) 0 clamp(7px, 1.1vh, 11px);
}
.news-shell .ncard-body h3 {
  font-size: clamp(.86rem, 1.15vw, 1rem);
  line-height: 1.32;
  margin: 9px 0 7px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-shell .fcard-body .cdate,
.news-shell .ncard-body .cdate { font-size: var(--fs-small); color: var(--ink-soft); }
.news-shell .ncard-body .topic-pill { font-size: clamp(.62rem, 1vw, .72rem); padding: .3em .8em; }

/* Colour Field panel: flat topic ground plus the white lockup, for a post with
   no photograph. Must match the `.fcard-media > .cf-panel` specificity that
   sets display:block above, or the lockup is not centred. */
.news-shell .cf-panel { background: var(--tc, var(--ink-soft)); padding: 14px; }
.news-shell .fcard-media > .cf-panel,
.news-shell .ncard-media > .cf-panel {
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-shell .cf-lockup {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
  color: #fff;
  text-align: center;
}
.news-shell .cf-lockup .name { font-weight: 600; font-size: clamp(13px, 1.5vw, 19px); letter-spacing: -.01em; }
.news-shell .cf-lockup .org { font-weight: 400; font-size: clamp(11px, 1.2vw, 15px); opacity: .85; }

/* Cursor-tracking highlight, driven by main.js (--gx/--gy). Starts invisible. */
.news-shell .tilt-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%);
}

@media (max-width: 1280px) { .news-shell .news-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .news-shell .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 819px) { .news-shell .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .news-shell .news-grid { grid-template-columns: 1fr; } }
@media (max-width: 819px) {
  .news-shell .fcard { flex-basis: 82%; }
  .news-shell .rail-nav-group { display: none; }   /* swipe carries it on touch */
}

/* Touch and reduced motion: no tilt, no glare. The hover scale stays. */
@media (pointer: coarse) {
  .news-shell .tilt-glare { display: none; }
  .news-shell .fcard, .news-shell .ncard { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .news-shell .tilt-glare { display: none; }
  .news-shell .fcard, .news-shell .ncard { transform: none !important; transition: none !important; }
  .news-shell .fcard-media > *, .news-shell .ncard-media > * { transition: none !important; }
  .news-shell .chip { transition: none !important; }
}

/* ── Article page. The design never drew this one, so it stays plain: one
      glass panel, the shell's type scale, nothing invented. ─────────────── */

.news-shell .post {
  /* A text measure, stated as one: the panel is 72ch of prose plus its own
     padding on each side. */
  max-width: calc(72ch + 2 * var(--post-pad));
  margin: 0 auto clamp(18px, 3vh, 36px);
  padding: clamp(20px, 3.4vh, 44px) var(--post-pad) clamp(22px, 3.6vh, 46px);
  border-radius: var(--r-glass);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.news-shell .post .back {
  display: inline-block;
  margin-bottom: clamp(14px, 2.4vh, 26px);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--blue);
}
.news-shell .post .back::before { content: "\2190  "; }
.news-shell .post .back:hover { text-decoration: underline; text-underline-offset: 2px; }
.news-shell .post .pmeta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(12px, 1.8vh, 18px) 0 clamp(12px, 1.8vh, 18px);
}
.news-shell .post .pdate { font-size: var(--fs-small); color: var(--ink-soft); }
.news-shell .post h1 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.022em;
  text-wrap: balance;
  margin: 0 0 clamp(12px, 2vh, 20px);
}
.news-shell .post .standfirst {
  font-size: calc(1.12 * var(--fs-body));
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 clamp(16px, 2.6vh, 28px);
}
.news-shell .post-hero { margin: 0 0 clamp(16px, 2.6vh, 28px); }
.news-shell .post-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-card);
}
.news-shell .post-hero figcaption { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-soft); }
.news-shell .post-body { font-size: calc(1.04 * var(--fs-body)); line-height: 1.7; color: var(--ink-soft); }
.news-shell .post-body p, .news-shell .post-body ul, .news-shell .post-body ol { margin: 0 0 1.1em; }
.news-shell .post-body > :last-child { margin-bottom: 0; }
.news-shell .post-body ul, .news-shell .post-body ol { padding-inline-start: 1.5em; }
.news-shell .post-body li { margin: .25em 0; }
.news-shell .post-body strong, .news-shell .post-body b { color: var(--ink); }
.news-shell .post-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.news-shell .sources {
  margin: clamp(22px, 3.4vh, 38px) 0 0;
  padding: clamp(16px, 2.4vh, 24px) clamp(16px, 2vw, 26px);
  border-radius: var(--r-card);
  background: var(--tint-blue);
}
.news-shell .sources h4 {
  margin: 0 0 clamp(10px, 1.6vh, 14px);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}
.news-shell .sources ul { margin: 0; padding: 0; list-style: none; }
.news-shell .sources li {
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
}
.news-shell .sources li:first-child { border-top: 0; }
.news-shell .sources li a { color: var(--blue); font-weight: 500; }
.news-shell .sources li a:hover { text-decoration: underline; text-underline-offset: 2px; }
.news-shell .sources li .pub { display: block; margin-top: 2px; color: var(--ink-soft); }

.news-shell .share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: clamp(20px, 3vh, 32px) 0 0;
}
.news-shell .share > span {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.news-shell .share .share-btn {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: .45em 1.1em;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}
.news-shell .share .share-btn:hover { border-color: var(--blue); }

/* Grid pagination (the featured rail does not paginate). */
.news-shell .news-pager { display: flex; justify-content: center; align-items: center; gap: 8px;
                          padding: 0 0 clamp(18px, 3vh, 36px); }
.news-shell .news-pager .pg { display: grid; place-items: center; min-width: var(--pill-h); height: var(--pill-h);
                              padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--hairline);
                              background: #fff; color: var(--ink); font-size: var(--fs-small); font-weight: 500;
                              text-decoration: none; }
.news-shell .news-pager .pg[aria-current='page'] { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.news-shell .news-pager .pg:hover:not([aria-current='page']) { border-color: var(--blue); }