/*
 * News. — "Clean" design style (public-broadcaster look), News. — Theme & Colors → Design style.
 * Loaded after the base styles. Preset: white one-row header (logo left, menu right), one warm red
 * accent, Source Sans 3 everywhere, true black dark mode. Very clean: white space, thin grey lines,
 * no shadows, "time ago • section" lines instead of colored labels, and a "Latest news" timeline.
 * Front-page top section: template-parts/home/featured-clean.php.
 */

.style-clean{
  --cln-accent: var(--red);
  --cln-dot: var(--ink);
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 8px;
}
html:not([data-theme="dark"]) .style-clean{ --paper:#FFFFFF; --paper-2:#F4F4F4; --line:#E6E6E6; --border-bottom:#E6E6E6; --ink:#111111; --muted:#6B6B6B; }
html[data-theme="dark"] .style-clean{
  --paper:#000000; --paper-2:#121212; --line:#262626; --border-bottom:#262626; --ink:#F2F2F2; --muted:#9A9A9A;
  --cln-accent: color-mix(in srgb, var(--red) 70%, #fff);
}
html[data-theme="dark"] .style-clean,
html[data-theme="dark"] body.style-clean{ background:#000; }

/* ---- Type: one sans family, bold and tight headlines ---- */
.style-clean h1, .style-clean h2, .style-clean .featured__headline, .style-clean .story-card__headline, .style-clean .article-title,
.style-clean .feature-title, .style-clean .cover-card h3 { font-family:var(--display); font-weight:700; letter-spacing:-.01em; }
.style-clean h3, .style-clean .showbiz-card__title { font-family:var(--display); font-weight:600; letter-spacing:-.01em; }

.style-clean .article-title{ font-weight:800; letter-spacing:-.02em; line-height:1.12; }
.style-clean .article-body p{ font-size:19px; line-height:1.65; }
.style-clean .article-body a{ color:var(--ink); text-decoration-color:var(--cln-accent); text-decoration-thickness:2px; text-underline-offset:3px; }

/* ---- Header: white bar, thin line, menu on the right ---- */
.style-clean .site-header{ border-bottom:1px solid var(--border-bottom); box-shadow:none; }
html[data-theme="dark"] .style-clean .site-header{ background:#000; }
.style-clean .nav-link{ font-weight:600; font-size:16px; letter-spacing:0; text-transform:none; }
.style-clean .nav-link::after{ height:3px; background:var(--cln-accent); }
.style-clean .nav-link.is-active, .style-clean .nav-item.is-open .nav-link{ color:var(--ink); }
@media (min-width:1101px){
  .style-clean.header-inline .nav-bar__inner{ display:flex; }
  .style-clean.header-inline .nav-bar__links{ margin-left:auto; } /* Menu right; scrolls normally when it doesn't fit. */
}
.style-clean .breaking{ background:var(--paper); border-bottom:1px solid var(--border-bottom); }
.style-clean .breaking__track li{ color:var(--ink); font-weight:600; }
.style-clean .live-tag{ border-radius:var(--radius-s); background:var(--cln-accent); }
.style-clean .topic-row{ background:var(--paper); }
.style-clean .btn{ border-radius:var(--radius-s); box-shadow:none; }

/* ---- Section heads: bold title, "See all ›" muted, one thin line ---- */
.style-clean .section__dot, .style-clean .shead__rule{ display:none; }
.style-clean .section__head{ border-bottom:0; padding-bottom:0; margin-bottom:18px; }
.style-clean .section__title,
.style-clean .shead__title{ font-family:var(--display); font-size:24px; font-weight:700; letter-spacing:-.01em; }
.style-clean .see-all{ font-weight:600; color:var(--muted); }
.style-clean .see-all:hover{ color:var(--ink); }
.style-clean .see-all--light{ color:#fff; }
.style-clean .see-all--light:hover{ color:rgba(255,255,255,.75); }

/* ---- Labels: quiet. On pictures a small dark chip, elsewhere plain muted text ---- */
.style-clean .tag{ background:transparent !important; color:var(--muted) !important; padding:0; letter-spacing:.02em; text-transform:none; font-weight:600; }
.style-clean .story-card .tag, .style-clean .featured__cover-body .tag,
.style-clean .featured__thumb > .tag, .style-clean .cover-card__media > .tag{
  background:rgba(0,0,0,.72) !important; color:#fff !important; padding:4px 8px; border-radius:var(--radius-s);
}
.style-clean .kicker{ color:var(--muted); letter-spacing:.02em; text-transform:none; font-weight:600; }

/* ---- Cards: no shadows, small radius ---- */
.style-clean .story-card, .style-clean .cover-card, .style-clean .featured__mini, .style-clean .featured__thumb,
.style-clean .showbiz-card__media, .style-clean .scitech-card__media, .style-clean .tv-card__media,
.style-clean .studio__feature, .style-clean .studio__gallery, .style-clean .market-card__media{ border-radius:var(--radius-m); box-shadow:none; }

/* =====================================================================
   FRONT PAGE TOP (featured-clean.php)
   ===================================================================== */
.cln-top{ padding-top:clamp(22px, 2.6vw, 36px); }
.cln-line{ display:block; font-family:var(--sans); font-size:14px; color:var(--muted); }

.cln-grid{ display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:clamp(24px, 3vw, 44px); align-items:start; }
.cln-lead{ display:flex; flex-direction:column; gap:8px; color:var(--ink); }
.cln-lead__media{ position:relative; display:block; aspect-ratio:16/9; border-radius:var(--radius-m); overflow:hidden; background:var(--paper-2); margin-bottom:8px; }
.cln-lead__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cln-lead__media .live-badge{ position:absolute; top:14px; left:14px; z-index:2; }
.cln-lead__title{ margin:0; font-family:var(--display); font-size:clamp(28px, 3vw, 42px); font-weight:800; line-height:1.1; letter-spacing:-.02em; }
.cln-lead__dek{ margin:2px 0 0; font-size:18px; line-height:1.5; color:var(--muted); }
.cln-lead:hover .cln-lead__title{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }

/* "Latest news": a dotted line with a dot per story. */
.cln-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; }
.cln-head__title{ margin:0; font-family:var(--display); font-size:24px; font-weight:800; letter-spacing:-.01em; }
.cln-head__more{ font-size:15px; font-weight:600; color:var(--muted); white-space:nowrap; }
.cln-head__more:hover{ color:var(--ink); }
.cln-timeline{ position:relative; margin:0; padding:0 0 0 26px; list-style:none; }
.cln-timeline::before{
  content:""; position:absolute; left:4px; top:10px; bottom:14px; width:0;
  border-left:2px dotted color-mix(in srgb, var(--ink) 35%, transparent);
}
.cln-timeline li{ position:relative; margin:0; padding:0 0 22px; }
.cln-timeline li:last-child{ padding-bottom:0; }
.cln-timeline li::before{
  content:""; position:absolute; left:-26px; top:6px; width:10px; height:10px; border-radius:50%;
  background:var(--cln-dot); box-shadow:0 0 0 4px var(--paper);
}
.cln-timeline li:first-child::before{ background:var(--cln-accent); }
.cln-timeline a{ display:flex; flex-direction:column; gap:4px; color:var(--ink); }
.cln-timeline__title{ font-size:18px; line-height:1.35; font-weight:400; }
.cln-timeline a:hover .cln-timeline__title{ text-decoration:underline; text-underline-offset:3px; }

.cln-top .ad-wrap{ margin-top:32px; }
.cln-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(18px, 2vw, 28px); margin-top:36px; padding-top:28px; border-top:1px solid var(--border-bottom); }
.cln-card{ display:flex; flex-direction:column; gap:6px; min-width:0; color:var(--ink); }
.cln-card__media{ position:relative; display:block; aspect-ratio:16/10; border-radius:var(--radius-m); overflow:hidden; background:var(--paper-2); margin-bottom:6px; }
.cln-card__media img{ width:100%; height:100%; object-fit:cover; }
.cln-card__title{ margin:0; font-family:var(--display); font-size:19px; font-weight:700; line-height:1.28; }
.cln-card:hover .cln-card__title{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

@media (max-width:1100px){
  .cln-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:860px){
  .cln-grid{ grid-template-columns:minmax(0,1fr); }
  .cln-latest{ padding-top:24px; border-top:1px solid var(--border-bottom); }
}
@media (max-width:560px){
  .cln-row{ grid-template-columns:minmax(0,1fr); }
  .cln-card{ display:grid; grid-template-columns:120px minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:14px; }
  .cln-card__media{ grid-row:1 / span 2; aspect-ratio:4/3; margin:0; }
  .cln-card__title{ font-size:16.5px; }
  .cln-timeline__title{ font-size:17px; }
}

/* =====================================================================
   ARTICLE: flat on white (no card box), quiet side blocks
   ===================================================================== */
.style-clean .article-main,
.style-clean .article-related{ background:transparent; border:0; box-shadow:none; padding-inline:0; }
html[data-theme="dark"] .style-clean .article-main{ box-shadow:none; }
.style-clean .article-aside__meta{ background:transparent; border:0; border-radius:0; box-shadow:none; padding-inline:0; }
.style-clean .article-aside__block,
.style-clean .article-author{ background:transparent; border:0; border-top:1px solid var(--border-bottom); border-radius:0; box-shadow:none; padding-inline:0; }

/* =====================================================================
   SECTION PAGES: the hero on white instead of the dark blurred band
   ===================================================================== */
.style-clean .cat-hero.section-dark{ background:var(--paper) !important; color:var(--ink); padding-block:28px 36px; border-bottom:1px solid var(--border-bottom); }
.style-clean .cat-hero__bg{ display:none; }
.style-clean .cat-hero .shead__title--light{ color:var(--ink); }
.style-clean .cat-hero .eyebrow--light{ color:var(--cln-accent); }
.style-clean .cat-hero .shead--light .shead__rule{ background:var(--border-bottom); }
.style-clean .cat-hero .see-all--light, .style-clean .cat-hero .shead--light .see-all{ color:var(--muted); }

/* =====================================================================
   OTHER PAGES
   ===================================================================== */
/* Search: the query underlined in the accent instead of a colored block (readable in dark mode). */
.style-clean main mark,
.style-clean .srch-hit mark{ background:transparent; color:inherit; padding:0; border-radius:0; box-shadow:inset 0 -3px 0 var(--cln-accent); }
/* Sign-in: a plain bordered box, no shadow. */
.style-clean .login-card{ background:var(--paper); box-shadow:none; border-radius:var(--radius-m); }
/* Chips (sections, topics): outlined; active uses ink (swaps in dark mode).
   Overrides the filled .cat-subs a.is-active (paper-on-ink) so text stays readable. */
.style-clean .cat-subs a{ background:transparent; }
.style-clean .cat-subs a.is-active{
  color:var(--ink);
  background:transparent;
  border-color:var(--ink);
}
.style-clean .cat-subs a.is-active:hover{ color:var(--ink); }
/* One-row header on mid-size screens: a little tighter so more sections fit before the fade. */
@media (min-width:1101px) and (max-width:1440px){
  .style-clean.header-inline .nav-link{ font-size:15px; padding-inline:8px; }
}