/* News section styles that go live with the news pages (scripts/news/publish_news.py uploads this file with
   news/ and images/news/; main.css stays out of a news publish). The page links it with ?v=<content hash>. */

/* ── News ──────────────────────────────────────────────────────
   Short pieces that go with each LinkedIn post (src/news/). Kept apart
   from the long-form Knowledge Hub. Uses the site tokens only and follows the
   Brand Guidelines v2.0 strictly: Bebas Neue at 2rem or more, DM Mono labels at
   0.75rem, Outfit at 300/400/600, Mist for captions, spacing on the 8px grid. */
.news-hero-link { color: var(--blue-light); }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; max-width: 980px; }
.news-link {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--smoke);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.news-link:hover, .news-link:focus-within { border-color: var(--blue); box-shadow: 0 8px 24px rgba(10, 21, 32, 0.08); }
.news-link--noimg { grid-template-columns: minmax(0, 1fr); }
.news-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--ink); }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-text { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.news-date { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); }
.news-title { font-size: clamp(2.25rem, 3.6vw, 3.25rem); letter-spacing: 0.02em; line-height: 0.95; margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.news-summary { display: block; color: var(--slate); line-height: 1.6; }
.news-more { margin-top: 0.25rem; align-self: flex-start; }
/* the title is the card's link, stretched over the whole card; the video links sit above it (18 Oct 2026) */
.news-link, .news-tile { position: relative; }
.news-cover, .news-cover:hover { color: inherit; text-decoration: none; }
.news-cover::after { content: ''; position: absolute; inset: 0; }
.news-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-top: 0.25rem; }
.news-actions .news-more { margin-top: 0; }
.news-watch, .news-thumb--video { position: relative; z-index: 1; }
.news-play { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: var(--white); box-shadow: 0 6px 18px rgba(10, 21, 32, 0.3); transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.news-play svg { width: 28px; height: 28px; margin-left: 4px; }
.news-thumb--video:hover .news-play { transform: scale(1.08); background: var(--blue-dk); }
.news-tile .news-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.news-tile .news-play svg { width: 22px; height: 22px; margin-left: 3px; }
.news-video-figure { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.news-empty { max-width: 980px; background: var(--white); border: 1px dashed var(--smoke); border-radius: var(--r-lg); padding: 2rem; }
.news-kb { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--smoke); max-width: 760px; }
.news-kb p { margin-top: 0.5rem; color: var(--slate); }
.news-article { max-width: 780px; }
.news-head { margin-bottom: 2rem; }
.news-h1 { font-size: clamp(2rem, 4vw, 3.25rem); margin-top: 0.5rem; overflow-wrap: anywhere; }
.news-head .lead { margin-top: 1.5rem; }
.news-figure { margin: 0 0 2rem; }
.news-figure .article-hero { margin: 0; }
.news-caption { font-size: var(--text-sm); color: var(--mist); margin-top: 0.5rem; line-height: 1.5; }
.news-related { margin: 2.5rem 0 0; padding: 1.5rem; background: var(--white); border-left: 3px solid var(--blue); border-radius: var(--r); display: flex; flex-direction: column; gap: 0.5rem; }
.news-related a { font-weight: 600; }
.news-about { margin-top: 2rem; padding: 1.5rem; background: var(--blue-pale); border-radius: var(--r-lg); }
.news-about { display: flex; flex-direction: column; gap: 0.5rem; }
.news-about p { margin: 0; color: var(--slate); }
.news-foot { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--smoke); }
/* Brand: DM Mono labels 0.6-0.75rem (the site-wide label size is 0.78rem); Bebas sub-headings 2rem or more */
.news-page .eyebrow, .news-page .article-meta, .news-wrap .eyebrow, body:has(.news-wrap) .page-hero-eyebrow { font-size: 0.75rem; }
.news-page .article-body h2 { font-size: clamp(2rem, 4.5vw, 2.5rem); letter-spacing: 0.02em; }
@media (max-width: 700px) {
  .news-link { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem; }
}

/* earlier news: tiles three across, each with its image; the newest piece above runs full width */
.news-tiles { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; max-width: 980px; }
.news-tile { display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--smoke); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.news-tile:hover, .news-tile:focus-within { border-color: var(--blue); box-shadow: 0 8px 24px rgba(10, 21, 32, 0.08); }
.news-tile-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.news-tile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-tile-text { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.25rem 1.5rem; flex: 1; min-width: 0; }
.news-tile-title { font-family: var(--body); font-weight: 600; font-size: 1.125rem; line-height: 1.3; letter-spacing: 0; text-transform: none; margin: 0; overflow-wrap: anywhere; }
.news-tile-summary { display: block; color: var(--slate); line-height: 1.55; font-size: 0.9375rem; }
.news-tile .news-actions { margin-top: auto; }
@media (max-width: 900px) { .news-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .news-tiles { grid-template-columns: minmax(0, 1fr); } }

/* the LinkedIn post's photos as a carousel on its news page: < and > buttons, swipe, arrow keys (17 Oct 2026) */
.news-gallery { margin: 0 0 2rem; }
.gal-stage { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); }
.gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 0; aspect-ratio: 4 / 3; scrollbar-width: none; overscroll-behavior-x: contain; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-track:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.gal-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; }
.gal-slide img { width: 100%; height: 100%; object-fit: scale-down; display: block; }   /* scale-down: a small photo is never blown up */
.gal-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 2px 10px rgba(10, 21, 32, 0.28); transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.gal-btn:hover, .gal-btn:focus-visible { background: var(--white); transform: translateY(-50%) scale(1.06); }
.gal-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.gal-btn svg { width: 22px; height: 22px; }
.gal-prev { left: 12px; }
.gal-next { right: 12px; }
.news-gallery:not(.gal-on) .gal-btn { display: none; }
.gal-cap { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.gal-count { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--slate); white-space: nowrap; }
.gal-text:empty { display: none; }
@media (max-width: 600px) { .gal-btn { width: 44px; height: 44px; } .gal-prev { left: 8px; } .gal-next { right: 8px; } }
@media (prefers-reduced-motion: reduce) { .gal-btn { transition: none; } }