/* ==========================================================================
   Royal Roots — Media Portal Design System
   Magazine layout, on-air schedule and a multi-station audio player.
   ========================================================================== */

:root {
  /* Royal Roots Broadcast Palette */
  --primary: #4b2191;
  --primary-rgb: 75, 33, 145;
  --primary-light: #673ab7;
  --primary-dark: #32136a;
  --primary-glow: rgba(75, 33, 145, 0.35);

  --accent-pink: #ec4899;
  --accent-pink-rgb: 236, 72, 153;
  --live-red: #ef4444;
  --live-red-glow: rgba(239, 68, 68, 0.4);
  --success-green: #10b981;

  /* Surfaces & Backgrounds (Light Mode Default) */
  --bg-body: #f8fafc;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-subtle: #f1f5f9;
  --bg-ticker: #11141c;
  --bg-dark-section: #0f121d;

  /* Typography Colors */
  --text-main: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  /* Borders & Shadows */
  --border-subtle: #e2e8f0;
  --border-card: #e2e8f0;
  --border-focus: #4b2191;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-player: 0 -8px 30px rgba(0, 0, 0, 0.15);

  /* Sticky Player Specifics */
  --player-bg: #11141f;
  --player-border: #1e2436;
  --player-text: #f8fafc;
  --player-subtext: #94a3b8;
  --player-accent: #ec4899;

  /* Layout Consts */
  --max-width: 1280px;
  --header-height: 72px;
  --player-height: 84px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  --font-editorial: 'Instrument Serif', Georgia, serif;
}

[data-theme="dark"] {
  --bg-body: #0b0d14;
  --bg-surface: #11141f;
  --bg-card: #151926;
  --bg-card-hover: #1c2233;
  --bg-subtle: #191e2e;
  --bg-ticker: #080a0f;
  --bg-dark-section: #080a10;

  --text-main: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #8493a8;

  --border-subtle: #1e2638;
  --border-card: #20273a;
  --border-focus: #8b5cf6;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
  --shadow-player: 0 -8px 30px rgba(0, 0, 0, 0.4);

  --player-bg: #0d101a;
  --player-border: #1a2030;
}

/* ==========================================================================
   Base Reset & Global Typography
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

/* Lucide icons (replacing emoji-as-icons). `data-lucide` placeholders get
   swapped for inline <svg data-lucide="…" class="lucide-icon">; sizing them
   to the surrounding text via em units keeps every existing icon spot (nav,
   buttons, meta rows, badges) the same size the emoji occupied. */
[data-lucide],
.lucide-icon {
  width: 1em;
  height: 1em;
  stroke-width: 2;
  vertical-align: -0.15em;
  flex-shrink: 0;
  /* Several icon placements in app.js's template strings lost their source
     whitespace when the emoji they replaced was swapped out programmatically
     (e.g. "clock"></i>${relativeTime} with no space before the variable).
     A small margin here guarantees breathing room from following text
     everywhere, rather than depending on each call site's literal spacing. */
  margin-right: 0.3em;
}

/* Icons used purely as a flex-row's own item (nav pills, icon-only buttons)
   don't want the extra right margin nudging their container's layout. */
.icon-action-btn [data-lucide],
.tv-video-icon-btn [data-lucide],
.footer-social-icon [data-lucide],
#minimize-arrow-icon [data-lucide],
.article-dialog-close [data-lucide],
#close-station-drawer-btn [data-lucide],
#search-modal-close-btn [data-lucide],
#mobile-close-btn [data-lucide] {
  margin-right: 0;
}

/* Only .site-header is sticky (var(--header-height) tall); anchor-linked
   sections need that much clearance so a nav jump/smooth-scroll doesn't
   land the section title underneath it. */
#politics,
#sports,
#entertainment,
#health,
#schedule,
#presenters {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.5;
  transition: background-color 0.25s ease, color 0.25s ease;
  padding-bottom: calc(var(--player-height) + 24px);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ==========================================================================
   Top Bars: Hot News Ticker & Quick Stations Bar
   ========================================================================== */

.top-bar-strip {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #ffffff;
  font-size: 0.825rem;
  position: relative;
  z-index: 100;
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  gap: 16px;
}

/* Hot News Ticker */
.breaking-ticker {
  display: flex;
  align-items: center;
  overflow: hidden;
  flex: 1;
  max-width: 68%;
  gap: 12px;
}

.ticker-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-ticker);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.725rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  animation: flame-pulse 2s infinite ease-in-out;
}

.ticker-badge svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.ticker-content {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  mask-image: linear-gradient(to right, transparent, black 15px, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15px, black 95%, transparent);
}

.ticker-track {
  display: inline-block;
  white-space: nowrap;
  animation: ticker-slide 32s linear infinite;
}

.ticker-track:hover {
  animation-play-state: paused;
}

.ticker-item {
  display: inline-block;
  margin-right: 32px;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.15s;
}

.ticker-item:hover {
  opacity: 0.8;
}

.ticker-item span.ticker-dot {
  color: var(--bg-ticker);
  margin-right: 10px;
}

.ticker-pause-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.2);
  transition: background 0.2s;
}

.ticker-pause-btn:hover {
  background: rgba(0, 0, 0, 0.35);
}

.ticker-pause-btn [data-lucide] {
  width: 13px;
  height: 13px;
}

.ticker-pause-btn .ticker-play-icon {
  display: none;
}

.ticker-pause-btn.paused .ticker-pause-icon {
  display: none;
}

.ticker-pause-btn.paused .ticker-play-icon {
  display: block;
}

.ticker-track.paused {
  animation-play-state: paused;
}

/* Quick Station Switcher Bar */
.quick-stations-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.quick-stations-label {
  color: var(--accent-pink);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.quick-stations-list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.quick-station-btn {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.2s;
}

.quick-station-btn:hover,
.quick-station-btn.active {
  color: #ffffff;
  background: var(--primary);
  border-color: var(--primary-light);
}

.quick-station-btn.active::before {
  content: "●";
  color: var(--live-red);
  margin-right: 4px;
  font-size: 0.7rem;
}

/* ==========================================================================
   Main Navigation Header
   ========================================================================== */

/* The header is a fixed dark brand bar regardless of the site's own
   light/dark theme toggle — same idea as .top-bar-strip always being
   dark before this redesign, just extended to the nav itself now that
   the ticker moved below it and took on the red "breaking" color. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--bg-ticker);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: 20px;
}

/* Branding Logo */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-icon-box {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.brand-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-icon-pulse {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background-color: var(--live-red);
  border-radius: 50%;
  border: 2px solid var(--bg-ticker);
  animation: pulse-ring 1.8s infinite;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-name span.highlight {
  color: var(--accent-pink);
  background: linear-gradient(135deg, var(--accent-pink), #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-tagline {
  font-size: 0.675rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The mobile drawer's own header still sits on a light surface, so its
   copy of .brand-name needs the original dark-on-light coloring back —
   scoping to .site-header above keeps that element unaffected. */
.mobile-nav-header .brand-name {
  color: var(--text-main);
}
.mobile-nav-header .brand-name span.highlight {
  color: var(--primary);
  background: linear-gradient(135deg, var(--primary), #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Desktop Navigation Menu */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Flex items default to min-width:auto (their content's natural width) —
     min-width:0 lets this row actually shrink instead of forcing the whole
     header wider than the viewport. This used to also set overflow-x:auto
     as a scroll-within-itself fallback back when there were ten top-level
     items, but overflow-x without overflow-y set the same way computes
     overflow-y to "auto" too per the CSS spec's box overflow rules — which
     was silently clipping the dropdown menus that pop out below this row
     (they opened, opacity/visibility and all, just invisible). Down to
     four items now, so it isn't needed — plain visible overflow is both
     simpler and correct here. */
  min-width: 0;
}

.nav-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  border-bottom: 2px solid transparent;
  transition: all 0.18s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Same fix as .sign-in-btn: without this, a two-word label like "Metro
     Plus" wraps onto two lines once .desktop-nav (a shrinkable flex row)
     runs short on space, instead of just staying on one line. */
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-link [data-lucide] {
  width: 15px;
  height: 15px;
}

.nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}

.nav-link.active {
  color: var(--bg-ticker);
  background-color: #ffffff;
  border-bottom-color: var(--accent-pink);
}

.nav-link.has-dropdown svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}

.nav-item-dropdown {
  position: relative;
}

.nav-item-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-item-dropdown:hover .nav-link.has-dropdown svg {
  transform: rotate(180deg);
}

/* A clean white card, not the dark header's own palette — dropdown panels
   read better as a distinct light surface than as more dark-on-dark, and
   it's plain text (no icons) at generous spacing, matching a reference
   the user provided. */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  min-width: 220px;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease;
  z-index: 100;
}

.dropdown-link {
  display: block;
  padding: 11px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
  transition: background 0.15s, color 0.15s;
}

.dropdown-link [data-lucide] {
  display: none;
}

.dropdown-link:hover {
  background: #f1f5f9;
  color: var(--primary);
}

/* Header Utilities */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-weather-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}

.header-weather-badge [data-lucide] {
  width: 15px;
  height: 15px;
  color: var(--accent-pink);
}

/* Not the whole story (no humidity/wind/forecast) — skip it on narrow
   headers rather than crowd out the actions that matter more there. */
@media (max-width: 900px) {
  .header-weather-badge { display: none; }
}

.live-onair-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(75, 33, 145, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.3);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--live-red);
  cursor: pointer;
  transition: all 0.2s;
}

.live-onair-pill:hover {
  background: var(--live-red);
  color: #ffffff;
  box-shadow: 0 4px 12px var(--live-red-glow);
}

.live-onair-pill .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--live-red);
  animation: pulse-glow 1.5s infinite;
}

/* Shared solid-dot indicator, replacing the "●" text glyph that was
   standing in for a status/bullet icon in section headings, live badges,
   station lists and the ticker. A real circle renders crisply at any size
   and doesn't depend on a font's glyph metrics. */
.status-dot {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background-color: currentColor;
  vertical-align: 0.08em;
  margin-right: 0.4em;
  flex-shrink: 0;
}

.live-onair-pill:hover .pulse-dot {
  background-color: #ffffff;
}

.icon-action-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  position: relative;
  transition: all 0.2s;
}

.icon-action-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--bg-subtle);
  transform: translateY(-1px);
}

/* The header itself is a fixed dark bar (see .site-header), so its own
   copies of this shared button need light-on-dark colors — the mobile
   drawer's close button uses the same class on a light surface, so this
   is scoped rather than changed globally. */
.site-header .icon-action-btn {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
}

.site-header .icon-action-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
}

.icon-action-btn svg {
  width: 18px;
  height: 18px;
}

.icon-badge-num {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 17px;
  height: 17px;
  background: var(--live-red);
  color: #ffffff;
  font-size: 0.675rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-surface);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header .icon-badge-num {
  border-color: var(--bg-ticker);
}

.icon-badge-num[data-count="0"] {
  transform: scale(0);
  opacity: 0;
}

.sign-in-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Same class of bug as the nav overflow fix: as a plain flex child with no
     white-space/flex-shrink handling, this could get squeezed narrower than
     "Sign In" needs and wrap onto two lines at tighter header widths. */
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #ffffff;
  transition: all 0.2s;
  box-shadow: 0 2px 8px var(--primary-glow);
}

.sign-in-btn:hover {
  background: var(--primary-dark);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Mobile Header Hamburger */
.mobile-toggle-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  /* Was var(--text-main) — a dark navy meant for the header's old light
     background. The header is a fixed dark bar now (see .site-header),
     so that color was rendering the icon almost invisible: dark-on-dark.
     Same fix already applied to .icon-action-btn and .brand-name when
     the header was redesigned; this one was missed since it's a
     separate class, not scoped by that earlier change. */
  color: #ffffff;
}

.mobile-toggle-btn svg {
  width: 24px;
  height: 24px;
}

/* Mobile Menu Drawer */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
  z-index: 10002;
  padding: 24px;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-nav-drawer.open {
  transform: translateX(0);
}

/* Mobile Nav Overlay Backdrop */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-nav-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.mobile-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-link-item a {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
  padding: 6px 0;
  display: block;
}

/* ==========================================================================
   Hero Magazine Section
   ========================================================================== */

.hero-magazine-section {
  padding-top: 28px;
  padding-bottom: 36px;
}

.hero-magazine-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

/* Main Featured Overlay Card */
.hero-main-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 480px;
  background-color: #11141f;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-main-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.hero-main-card .card-media-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(0.85);
}

.hero-main-card:hover .card-media-bg {
  transform: scale(1.04);
}

.card-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.4) 40%, rgba(11, 13, 20, 0.95) 100%);
  pointer-events: none;
}

.hero-main-content {
  position: relative;
  z-index: 2;
  padding: 36px;
  color: #ffffff;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background-color: var(--primary);
  color: #ffffff;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Pinned to the top-left corner of a card's thumbnail image, instead of
   sitting in the text area below it — needs the image container to be
   position:relative (already true for every media wrapper this is used
   in: .sub-grid-media, .politics-lead-media, .center-card-media). */
.category-pill.on-media {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  margin-bottom: 0;
}

.category-pill.politics { background-color: #dc2626; }
.category-pill.entertainment { background-color: #a855f7; }
.category-pill.sports { background-color: #059669; }
.category-pill.business { background-color: #d97706; }
.category-pill.health { background-color: #0284c7; }
.category-pill.metro { background-color: #4b2191; }

.hero-main-title {
  font-family: var(--font-heading);
  font-size: 2.15rem;
  font-weight: 800;
  /* .hero-main-card clips content with overflow:hidden and bottom-aligns it
     with justify-content:flex-end. Safari's font-metric line-height
     rounding runs slightly taller than Chromium's for this heading font, so
     a tight 1.22 line-height can clip descenders on the wrapped last line —
     a touch more line-height plus a small bottom buffer keeps it clear of
     the crop in both engines without visibly changing the layout. */
  line-height: 1.28;
  padding-bottom: 2px;
  margin-bottom: 14px;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hero-main-summary {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #cbd5e1;
  margin-bottom: 18px;
  max-width: 90%;
}

.meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.8rem;
  color: #cbd5e1;
}

.meta-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--accent-pink);
}

.meta-date {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #94a3b8;
}

.card-bookmark-btn {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  backdrop-filter: blur(4px);
  transition: all 0.2s;
}

.card-bookmark-btn:hover {
  background: var(--accent-pink);
  color: #000000;
  transform: scale(1.1);
}

.card-bookmark-btn.bookmarked {
  background: var(--accent-pink);
  color: #000000;
}

/* Secondary Stacked Overlay Cards (Right Side Column) */
.hero-side-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-sub-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: calc(240px - 10px);
  background-color: #11141f;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-sub-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.hero-sub-card .card-media-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(0.85);
}

.hero-sub-card:hover .card-media-bg {
  transform: scale(1.05);
}

.hero-sub-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  margin-top: 6px;
  margin-bottom: 8px;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Sub-Hero 2-Column Horizontal Cards */
.sub-hero-strip {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.compact-news-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.compact-news-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-glow);
}

.compact-card-media {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.compact-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.compact-news-card:hover .compact-card-media img {
  transform: scale(1.08);
}

.compact-card-body {
  flex: 1;
}

.compact-card-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main);
  margin-top: 4px;
  margin-bottom: 6px;
  transition: color 0.15s;
}

.compact-news-card:hover .compact-card-title {
  color: var(--primary);
}

/* ==========================================================================
   Editorial Layout: Two Column Main + Sidebar
   ========================================================================== */

.editorial-layout {
  display: grid;
  /* minmax(0, …) — not the bare "2.1fr 1fr" this had — because CSS Grid's
     default "automatic minimum size" lets a track grow to fit its content's
     intrinsic (unwrapped) width even with fr units. The sidebar's widgets
     were doing exactly that, pushing the whole grid — and the page — wider
     than the viewport until the browser was zoomed out enough to compress
     it back into view. minmax(0, …) lets each track actually shrink to the
     fr split and defer to wrapping/ellipsis inside instead of overflowing. */
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 32px;
  margin-top: 36px;
}

.section-header-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--border-subtle);
  padding-bottom: 10px;
  margin-bottom: 22px;
  position: relative;
}

.section-header-block::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background-color: var(--primary);
}

.section-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-view-all {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}

.section-view-all:hover {
  gap: 8px;
  color: var(--accent-pink);
}

/* Politics Lead Story + 3-Grid Sub Cards */
.politics-lead-card {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.politics-lead-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.politics-lead-media {
  position: relative;
  min-height: 250px;
  overflow: hidden;
}

.politics-lead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.politics-lead-card:hover .politics-lead-media img {
  transform: scale(1.04);
}

.politics-lead-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.politics-lead-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.28;
  color: var(--text-main);
  margin-top: 8px;
  margin-bottom: 10px;
}

.politics-lead-card:hover .politics-lead-title {
  color: var(--primary);
}

.sub-grid-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.sub-grid-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.sub-grid-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.sub-grid-media {
  height: 140px;
  overflow: hidden;
  position: relative;
}

.sub-grid-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.sub-grid-card:hover .sub-grid-media img {
  transform: scale(1.06);
}

.sub-grid-body {
  padding: 14px;
}

.sub-grid-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main);
  margin-top: 6px;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sub-grid-card:hover .sub-grid-title {
  color: var(--primary);
}

/* ==========================================================================
   Sidebar Widgets (Weather & Social Counters)
   ========================================================================== */

.sidebar-column {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Weather Forecast Widget */
.weather-card-widget {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 22px;
  color: #ffffff;
  box-shadow: var(--shadow-md);
}

.weather-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.weather-city-select {
  display: flex;
  gap: 6px;
}

.weather-city-btn {
  font-size: 0.725rem;
  font-weight: 700;
  color: #94a3b8;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  transition: all 0.2s;
}

.weather-city-btn.active {
  background: var(--accent-pink);
  color: #0f172a;
}

.weather-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.weather-temp-block {
  display: flex;
  align-items: flex-start;
}

.weather-big-temp {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  font-family: var(--font-heading);
}

.weather-degrees {
  font-size: 1.25rem;
  color: var(--accent-pink);
  font-weight: 700;
  margin-left: 2px;
}

.weather-icon-box {
  width: 54px;
  height: 54px;
}

.weather-icon-box svg {
  width: 100%;
  height: 100%;
}

.weather-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.775rem;
  color: #cbd5e1;
}

.weather-forecast-days {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
  text-align: center;
}

.forecast-day-pill {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
}

.forecast-day-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
}

.forecast-day-temp {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  margin-top: 4px;
}

/* Social Follower Counters Widget */
.social-counters-widget {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.widget-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
}

/* Per-station "Follow" section — centered heading + pill row, one per
   station since each runs its own accounts (not one shared brand). */
.social-follow-section {
  text-align: center;
}

.social-follow-heading {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}

.social-follow-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.social-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s;
}

.social-pill:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.social-pill.facebook { background: #1877f2; }
.social-pill.x { background: #0f1419; }
.social-pill.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-pill.youtube { background: #ff0000; }
.social-pill.tiktok { background: #000000; }

/* ==========================================================================
   Most Read / Trending Section
   ========================================================================== */

.trending-section {
  margin-top: 48px;
  padding: 36px 0;
  background: linear-gradient(135deg, #0b0e17 0%, #171b2b 100%);
  border-radius: var(--radius-lg);
  color: #ffffff;
  box-shadow: var(--shadow-xl);
}

/* .trending-section already sits inside <main class="container">, which
   supplies the page's horizontal inset and max-width. Its own inner
   `.container` div was re-applying both, compounding the side padding
   (20px + 20px) so this section's content sat tighter than its siblings'.
   Neutralize the redundant constraint here rather than touch the markup. */
.trending-section .container {
  max-width: none;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: 0;
  margin-right: 0;
}

.trending-header-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 12px;
}

.trending-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.trending-title span.badge-trending {
  background: var(--live-red);
  color: #ffffff;
  font-size: 0.725rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.trending-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.trending-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}

.trending-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-3px);
  border-color: var(--accent-pink);
}

.trending-rank-number {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--accent-pink);
  margin-bottom: 8px;
  opacity: 0.85;
}

.trending-card-media {
  position: relative;
  height: 120px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}

.trending-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.trending-card:hover .trending-card-media img {
  transform: scale(1.06);
}

.trending-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trending-card:hover .trending-card-title {
  color: var(--accent-pink);
}

/* ==========================================================================
   Discover Categories Grid
   ========================================================================== */

.discover-categories-section {
  margin-top: 48px;
}

.categories-pills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.category-showcase-box {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.category-showcase-box:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.cat-box-meta h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.cat-box-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.cat-follow-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  color: var(--primary);
  font-size: 1.1rem;
  font-weight: 700;
  transition: all 0.2s;
}

.category-showcase-box:hover .cat-follow-btn {
  background: var(--primary);
  color: #ffffff;
}

/* ==========================================================================
   Sports Central with Live Matches Ticker
   ========================================================================== */

.sports-section {
  margin-top: 48px;
}

.livescores-ticker-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
}

.livescores-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--live-red);
  text-transform: uppercase;
  white-space: nowrap;
}

.match-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.match-teams {
  color: var(--text-main);
}

.match-score {
  color: var(--primary);
  background: rgba(75, 33, 145, 0.1);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.match-status {
  font-size: 0.7rem;
  color: var(--live-red);
  font-weight: 800;
}

/* Entertainment Gists (3-Column Layout: Left list, Center portrait, Right list) */
.entertainment-gists-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 20px;
}

.entertainment-center-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all 0.2s;
}

.entertainment-center-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.center-card-media {
  height: 260px;
  overflow: hidden;
  position: relative;
}

.center-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.entertainment-center-card:hover .center-card-media img {
  transform: scale(1.04);
}

.center-card-body {
  padding: 20px;
}

.center-card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  margin-top: 8px;
  margin-bottom: 10px;
}

/* ==========================================================================
   On-Air Shows Schedule & Presenters Showcase
   ========================================================================== */

.schedule-oap-section {
  margin-top: 48px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
}

.schedule-tabs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
}

.schedule-tab-btn {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  background: var(--bg-subtle);
  transition: all 0.2s;
}

.schedule-tab-btn.active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 2px 8px var(--primary-glow);
}

/* Station selector sits above the day tabs — smaller and outlined so it
   reads as a secondary filter, not competing with the day tabs' weight. */
.schedule-station-tabs-row {
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.schedule-station-tab-btn {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  transition: all 0.2s;
}

.schedule-station-tab-btn.active {
  background: var(--accent-pink);
  color: #1a1a1a;
  border-color: var(--accent-pink);
}

.schedule-empty-note {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.shows-grid-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.show-card-item {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 18px;
  position: relative;
  transition: all 0.2s;
}

.show-card-item.on-air {
  border: 2px solid var(--live-red);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), var(--bg-card));
}

.on-air-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--live-red);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  animation: pulse-glow 1.5s infinite;
}

.show-time-stamp {
  font-size: 0.775rem;
  font-weight: 700;
  color: var(--accent-pink);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.show-title-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}

.show-host-name {
  font-size: 0.825rem;
  color: var(--text-muted);
}

.show-card-item.has-flyer {
  cursor: pointer;
}
.show-card-item.has-flyer:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.show-flyer-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}
.show-flyer-hint i { width: 14px; height: 14px; }

/* Presenters Showcase Row */
.presenters-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.presenter-profile-card {
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  transition: all 0.2s;
}

.presenter-profile-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.presenter-avatar-box {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid var(--primary);
  box-shadow: 0 4px 10px var(--primary-glow);
}

.presenter-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.presenter-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 2px;
}

.presenter-handle {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ==========================================================================
   Newsletter Subscription Box
   ========================================================================== */

.newsletter-subscribe-section {
  margin-top: 48px;
  margin-bottom: 20px;
}

.newsletter-card-box {
  background: linear-gradient(135deg, var(--primary), #2d105b);
  border-radius: var(--radius-lg);
  padding: 40px;
  color: #ffffff;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 32px;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

.newsletter-card-box::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(var(--accent-pink-rgb), 0.25) 0%, transparent 70%);
  border-radius: 50%;
}

.newsletter-headline {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: #ffffff;
}

.newsletter-subtext {
  font-size: 0.95rem;
  color: #e2e8f0;
  line-height: 1.5;
}

.newsletter-form-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.newsletter-input-group {
  display: flex;
  gap: 8px;
}

.newsletter-input {
  flex: 1;
  padding: 12px 18px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.9rem;
  outline: none;
  backdrop-filter: blur(4px);
}

.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.newsletter-submit-btn {
  padding: 12px 24px;
  border-radius: var(--radius-full);
  background: var(--accent-pink);
  color: #000000;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(var(--accent-pink-rgb), 0.4);
}

.newsletter-submit-btn:hover {
  background: #f472b6;
  transform: translateY(-1px);
}

.newsletter-terms {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
}

/* Newsletter Popup (see setupNewsletterPopup() in js/app.js) — shares the
   .newsletter-form-inner/.newsletter-input/etc. classes above, which were
   already styled for a dark/colored background, so the form itself needs
   no new rules here, just the dialog chrome around it. */
.newsletter-popup-dialog {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  max-width: 820px;
  width: 100%;
  background: var(--bg-ticker);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  transform: scale(0.96);
  transition: transform 0.25s ease;
}

.modal-backdrop.open .newsletter-popup-dialog {
  transform: scale(1);
}

.newsletter-popup-dialog .article-dialog-close {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.newsletter-popup-dialog .article-dialog-close:hover {
  background: var(--live-red);
}

.newsletter-popup-media {
  position: relative;
  min-height: 280px;
}

.newsletter-popup-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.newsletter-popup-body {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.newsletter-popup-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
}

.newsletter-popup-subtext {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin-bottom: 20px;
}

.newsletter-popup-footnote {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 14px;
}

@media (max-width: 700px) {
  .newsletter-popup-dialog {
    grid-template-columns: 1fr;
  }
  .newsletter-popup-media {
    min-height: 160px;
  }
  .newsletter-popup-body {
    padding: 28px 22px;
  }
}

/* ==========================================================================
   Multi-Column Footer
   ========================================================================== */

.site-footer {
  background-color: var(--bg-dark-section);
  color: #94a3b8;
  padding-top: 54px;
  padding-bottom: 30px;
  border-top: 1px solid var(--border-subtle);
}

.footer-columns-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 36px;
  margin-bottom: 40px;
}

.footer-quote-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #cbd5e1;
  margin-top: 14px;
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 8px;
}

.footer-col-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--accent-pink);
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.85rem;
}

.footer-links-list a:hover {
  color: var(--accent-pink);
  padding-left: 4px;
}

.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
}

.footer-social-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-social-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: all 0.2s;
}

/* Brand marks (Facebook/X/Instagram/YouTube) aren't in Lucide's icon set —
   it deliberately ships only generic, unbranded UI icons, not company logos.
   These come from Simple Icons instead (the standard open-source set built
   specifically for linking to a brand's own official page with their own
   mark — the normal, expected pattern for a footer's social row). Loaded
   as a CSS mask so they still pick up currentColor like every other icon
   here, rather than an <img> with a fixed color baked in. */
.brand-mask {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.brand-mask.facebook { -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/facebook.svg"); mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/facebook.svg"); }
.brand-mask.x { -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/x.svg"); mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/x.svg"); }
.brand-mask.instagram { -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/instagram.svg"); mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/instagram.svg"); }
.brand-mask.youtube { -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/youtube.svg"); mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/youtube.svg"); }
.brand-mask.tiktok { -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/tiktok.svg"); mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/tiktok.svg"); }

.footer-social-icon:hover {
  background: var(--primary);
  transform: translateY(-2px);
}

/* ==========================================================================
   Sticky Bottom Multi-Station Radio Player
   ========================================================================== */

.sticky-radio-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--player-height);
  background: var(--player-bg);
  border-top: 2px solid var(--primary);
  box-shadow: var(--shadow-player);
  z-index: 9999;
  display: flex;
  align-items: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sticky-radio-player.minimized {
  transform: translateY(calc(100% - 24px));
}

.player-minimize-tab {
  position: absolute;
  top: -24px;
  right: 40px;
  background: var(--primary);
  color: #ffffff;
  font-size: 0.725rem;
  font-weight: 700;
  padding: 3px 14px;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
}

.player-container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ==========================================================================
   R2TV Video Panel — docked above the sticky player's transport bar while
   R2TV (a video station) is active, with an optional full-screen takeover.
   ========================================================================== */

/* .sticky-radio-player is a fixed-height horizontal bar by default; this
   class switches it to a column stack (video on top, transport bar below)
   only while a video station is selected. Toggled in js/app.js. */
.sticky-radio-player.tv-active {
  flex-direction: column;
  align-items: stretch;
  height: auto;
}

.tv-video-dock {
  position: relative;
  width: 100%;
  height: min(42vh, 360px);
  background: #000000;
  flex-shrink: 0;
  overflow: hidden;
}

.tv-video-dock[hidden] {
  display: none;
}

.tv-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000000;
}

/* Radio stations' now-playing panel — same dock as R2TV's video, but no
   stream to show, so a big station logo stands in for it. */
.station-logo-display {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(160deg, #1b1230, #0d0a16);
}

.station-logo-display[hidden] {
  display: none;
}

.station-logo-display-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(240px, 60%);
  height: 100px;
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.station-logo-display-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.station-logo-display-name {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  padding: 0 20px;
}

.tv-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.05) 22%, rgba(0, 0, 0, 0.05) 70%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}

.tv-video-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  pointer-events: auto;
}

.tv-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(239, 68, 68, 0.92);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.tv-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  animation: flame-pulse 1.6s ease-in-out infinite;
}

.tv-video-topbar-actions {
  display: flex;
  gap: 4px;
}

/* Same fix already applied to .tv-chat-close-btn — the shared
   .tv-video-icon-btn base (32px) is a marginal touch target on phones,
   which tracks to "feels unresponsive" reports even though the click
   handlers themselves fire instantly. Bumped these four (chat, PiP,
   fullscreen, close) to a proper ~44px target; gap above tightened so
   they don't outgrow the topbar. */
.tv-video-topbar-actions .tv-video-icon-btn {
  width: 44px;
  height: 44px;
}

.tv-video-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.tv-video-icon-btn:hover {
  background: rgba(0, 0, 0, 0.65);
}

.tv-chat-toggle-wrap {
  position: relative;
}

/* New-message notification on the chat icon — only ever shown while the
   chat panel is closed (see openTvChat/closeTvChat in js/app.js); a live
   pulse so an incoming comment is noticeable without opening the panel. */
.tv-chat-unread-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--live-red);
  border: 2px solid rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: flame-pulse 1.6s ease-in-out infinite;
}

.tv-chat-unread-badge[hidden] {
  display: none;
}

.tv-video-play-btn {
  align-self: center;
  margin: auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 0;
  background: rgba(75, 33, 145, 0.85);
  color: #ffffff;
  cursor: pointer;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s, background 0.15s;
}

.tv-video-play-btn:hover {
  transform: scale(1.06);
  background: var(--primary);
}

.tv-video-play-btn svg {
  width: 30px;
  height: 30px;
}

/* Hidden once the video (or the demo "watching" state) is playing. */
.tv-video-dock.playing .tv-video-play-btn {
  display: none;
}

.tv-video-notice {
  pointer-events: none;
  text-align: center;
  padding: 10px 16px 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Full-screen takeover: promote the whole sticky player (video + transport
   bar) to a fixed full-viewport overlay. No DOM nodes move, so the <video>
   never reloads or drops its current playback position. */
.sticky-radio-player.tv-fullscreen-active {
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: 10000;
  border-top: 0;
}

.sticky-radio-player.tv-fullscreen-active .tv-video-dock {
  flex: 1;
  height: auto;
}

.sticky-radio-player.tv-fullscreen-active .player-container {
  flex-shrink: 0;
  height: var(--player-height);
}

/* Live chat — overlays the right edge of the video dock. Narrower/shorter
   in the default docked player, wider in the full-screen takeover. */
.tv-chat-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(280px, 78%);
  display: flex;
  flex-direction: column;
  /* No backdrop-filter here — blurring a panel stacked directly over a
     playing <video> forces the browser to re-composite the blur against
     every live video frame, which reads as sluggish button response on
     lower-end devices. A slightly darker solid fill reads almost the same
     visually without that cost. */
  background: rgba(8, 8, 12, 0.92);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 2;
}

.tv-chat-panel[hidden] {
  display: none;
}

.tv-chat-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* Bumped to a proper ~44px touch target (the shared .tv-video-icon-btn
   base is 32px, fine for a mouse but tight for a thumb) and given some
   breathing room from the player-minimize-tab sitting just above the
   dock, since reports of this specific button feeling unresponsive on
   phones tracked to marginal tap-target size, not a click-handler bug. */
.tv-chat-close-btn {
  width: 44px;
  height: 44px;
  margin: -6px -4px -6px 0;
}

.tv-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tv-chat-message {
  font-size: 0.775rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  word-break: break-word;
}

.tv-chat-message-name {
  font-weight: 800;
  color: var(--accent-pink);
  margin-right: 5px;
}

.tv-chat-empty {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  text-align: center;
  margin-top: 20px;
}

.tv-chat-form {
  flex-shrink: 0;
  padding: 8px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tv-chat-name-input,
.tv-chat-message-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  color: #ffffff;
  padding: 7px 10px;
  font-size: 0.75rem;
  outline: none;
}

.tv-chat-name-input::placeholder,
.tv-chat-message-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.tv-chat-name-input:focus,
.tv-chat-message-input:focus {
  border-color: var(--primary);
}

.tv-chat-input-row {
  display: flex;
  gap: 6px;
}

.tv-chat-message-input {
  flex: 1;
  min-width: 0;
}

.tv-chat-send-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 0;
  background: var(--primary);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tv-chat-send-btn:hover {
  background: var(--primary-dark, var(--primary));
}

.sticky-radio-player.tv-fullscreen-active .tv-chat-panel {
  width: min(340px, 85%);
}

/* Station Branding & EQ Visualizer */
.player-station-info {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 280px;
}

.player-station-avatar {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 6px;
}

.player-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.player-station-avatar.playing::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--radius-md) + 3px);
  border: 2px solid var(--accent-pink);
  animation: pulse-ring 1.8s infinite;
}

.station-meta-texts {
  overflow: hidden;
}

.player-station-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.player-now-playing {
  font-size: 0.775rem;
  color: var(--accent-pink);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Live listener presence badge — see syncListenerPresence() in app.js.
   Hidden by default (element starts [hidden] in the markup) until the
   first successful /api/listeners/ping response gives a real count. */
.listener-count-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
}

.listener-count-badge [data-lucide] {
  width: 12px;
  height: 12px;
}

/* Audio EQ Waveform Animation */
.audio-visualizer-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.audio-bar {
  width: 3px;
  height: 8px;
  background-color: rgba(var(--accent-pink-rgb), 0.45);
  border-radius: 1px;
  transition: height 0.15s ease;
}

.audio-visualizer-bars.active .audio-bar {
  background-color: var(--accent-pink);
}

.audio-visualizer-bars.active .audio-bar:nth-child(1) { animation: eq-bounce 0.8s infinite 0.1s; }
.audio-visualizer-bars.active .audio-bar:nth-child(2) { animation: eq-bounce 0.7s infinite 0.3s; }
.audio-visualizer-bars.active .audio-bar:nth-child(3) { animation: eq-bounce 0.9s infinite 0.2s; }
.audio-visualizer-bars.active .audio-bar:nth-child(4) { animation: eq-bounce 0.6s infinite 0.4s; }

/* Player Playback Controls */
.player-controls-center {
  display: flex;
  align-items: center;
  gap: 16px;
}

.player-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: all 0.2s;
}

.player-nav-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.player-nav-btn svg {
  width: 20px;
  height: 20px;
}

.player-play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-pink);
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(var(--accent-pink-rgb), 0.4);
  transition: all 0.2s;
}

.player-play-btn:hover {
  transform: scale(1.08);
  background: #f472b6;
}

.player-play-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Player Right Tools: Volume & Station Playlist Drawer Toggle */
.player-tools-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.player-volume-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.volume-mute-btn {
  color: #94a3b8;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.volume-mute-btn:hover {
  color: #ffffff;
}

.volume-slider-range {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--accent-pink) 80%, #334155 80%);
  outline: none;
  cursor: pointer;
  transition: background 0.1s;
}

.volume-slider-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent-pink);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(var(--accent-pink-rgb), 0.3);
  transition: transform 0.15s;
}

.volume-slider-range::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.volume-slider-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent-pink);
  cursor: pointer;
  border: none;
}

.station-drawer-trigger-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  transition: all 0.2s;
}

.station-drawer-trigger-btn:hover,
.station-drawer-trigger-btn.active {
  background: var(--primary);
  border-color: var(--primary-light);
}

/* Multi-Station Playlist Drawer Modal / Flyout */
.station-drawer-flyout {
  position: fixed;
  bottom: var(--player-height);
  right: 40px;
  width: 360px;
  max-height: 480px;
  background: #11141f;
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.station-drawer-flyout.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.drawer-header {
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-header h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* This button had no sizing at all before — just inline color/font-size —
   so its clickable area was only the bare icon glyph itself, maybe
   16-18px. Same "feels unresponsive" class of bug as the TV overlay
   buttons: the click handler fires fine, the hit target is just too
   small to reliably tap. Bumped to the same ~44px standard. */
#close-station-drawer-btn,
#search-modal-close-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
}
#close-station-drawer-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
#search-modal-close-btn:hover {
  background: rgba(15, 23, 42, 0.08);
}

.drawer-search-box {
  padding: 12px 16px;
  background: #0d101a;
  border-bottom: 1px solid #1e2436;
}

.drawer-search-input {
  width: 100%;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: #161b2b;
  border: 1px solid #232b42;
  color: #ffffff;
  font-size: 0.85rem;
  outline: none;
}

.drawer-stations-list {
  list-style: none;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
}

.drawer-station-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}

.drawer-station-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.drawer-station-item.active {
  background: rgba(75, 33, 145, 0.3);
  border-color: var(--primary-light);
}

.item-station-info {
  min-width: 0;
  flex: 1;
}

.item-station-info h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}

.item-station-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.item-station-logo-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 40px;
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  flex-shrink: 0;
}

.item-station-logo-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.item-station-logo-row h4 {
  margin-bottom: 0;
}

.item-station-info p {
  font-size: 0.75rem;
  color: #94a3b8;
}

/* ==========================================================================
   Article Reader Modal & Notifications Flyout
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.article-reader-dialog {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-subtle);
  position: relative;
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.open .article-reader-dialog {
  transform: scale(1);
}

.article-dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s;
}

.article-dialog-close:hover {
  background: var(--live-red);
  color: #ffffff;
}

.flyer-lightbox-dialog {
  position: relative;
  max-width: 480px;
  width: 100%;
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-backdrop.open .flyer-lightbox-dialog {
  transform: scale(1);
}
.flyer-lightbox-dialog img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
/* Sits on top of the image itself rather than a surface bg, so 44px (not
   the base 36px) — same reasoning as the tv-video-icon-btn touch-target
   fix: a small tap target directly over busy image content is easy to miss. */
.flyer-lightbox-close {
  top: -14px;
  right: -14px;
  width: 44px;
  height: 44px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.article-media-hero {
  height: 320px;
  position: relative;
}

.article-media-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-content-body {
  padding: 36px;
}

.article-headline {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-main);
  margin-top: 10px;
  margin-bottom: 16px;
}

.article-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 24px;
}

.article-actions-share {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-btn {
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.775rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
}

.share-btn.whatsapp { background: #25d366; }
.share-btn.twitter { background: #0f1419; }
.share-btn.facebook { background: #1877f2; }
.share-btn.copy { background: var(--bg-subtle); color: var(--text-main); border: 1px solid var(--border-subtle); }

.article-prose {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.article-prose p {
  margin-bottom: 18px;
}

/* Audio Narration Bar in Article */
.article-listen-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  margin-bottom: 24px;
}

.listen-btn-pulse {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Saved Bookmarks Notification Flyout */
.flyout-drawer {
  position: fixed;
  top: calc(var(--header-height) + 48px);
  right: 20px;
  width: 340px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 16px;
  z-index: 10003;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease;
}

.flyout-drawer.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.flyout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.flyout-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
}

.flyout-items-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.flyout-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  cursor: pointer;
  transition: background 0.15s;
}

.flyout-item:hover {
  background: var(--bg-card-hover);
}

.flyout-item-img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.flyout-item-title {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
}

/* Search Modal Overlay */
.search-modal-dialog {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  padding: 24px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-subtle);
}

.search-input-wrap {
  position: relative;
  margin-bottom: 20px;
}

.search-main-input {
  width: 100%;
  padding: 14px 20px 14px 44px;
  border-radius: var(--radius-md);
  border: 2px solid var(--primary);
  background: var(--bg-subtle);
  color: var(--text-main);
  font-size: 1.05rem;
  font-weight: 600;
  outline: none;
}

.search-icon-inside {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--primary);
}

.search-results-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
}

/* Toast Notifications */
.toast-notice {
  position: fixed;
  bottom: calc(var(--player-height) + 16px);
  right: 20px;
  background: #11141f;
  color: #ffffff;
  border-left: 4px solid var(--accent-pink);
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  box-shadow: var(--shadow-lg);
  z-index: 10005;
  font-size: 0.875rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.toast-notice.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Keyframes Animations
   ========================================================================== */

@keyframes ticker-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes flame-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.4)); }
  50% { transform: scale(1.04); filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.7)); }
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 var(--live-red-glow); }
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes eq-bounce {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */

@media (max-width: 1080px) {
  .hero-magazine-grid {
    grid-template-columns: 1fr;
  }
  .hero-side-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .hero-sub-card {
    height: 220px;
  }
  .editorial-layout {
    /* Same bug class as the desktop fix above (bare 1fr still defaults to
       an "automatic minimum size" of the content's unwrapped width) — needs
       minmax(0, 1fr) here too, not just at the two-column breakpoint. */
    grid-template-columns: minmax(0, 1fr);
  }
  .sub-grid-three {
    grid-template-columns: 1fr 1fr;
  }
  .trending-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
  .categories-pills-grid {
    grid-template-columns: 1fr 1fr;
  }
  .entertainment-gists-grid {
    grid-template-columns: 1fr;
  }
  .shows-grid-timeline {
    grid-template-columns: 1fr 1fr;
  }
  .presenters-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-columns-grid {
    grid-template-columns: 1fr 1fr;
  }
  .newsletter-card-box {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: 180px; /* taller mobile player */
  }
  .cinematic-hero {
    padding-bottom: 200px; /* clear the taller mobile player */
  }
  .breaking-ticker {
    max-width: 100%;
  }
  .quick-stations-bar {
    display: none;
  }
  .desktop-nav {
    display: none;
  }
  .mobile-toggle-btn {
    display: flex;
  }
  /* .header-actions holds 6 items (Listen Live pill, 3 icon buttons, Sign
     In, hamburger) with no shrink/wrap handling — at phone widths their
     combined natural width overflows the header by ~200px, which drags the
     whole page into horizontal scroll and clips article titles behind the
     viewport edge. Wrapping it onto its own row (instead of trying to force
     6 items to squeeze into one) fixes it at any phone width, not just one
     tuned breakpoint. */
  .header-inner {
    flex-wrap: wrap;
    row-gap: 10px;
    /* .header-inner has a fixed height: var(--header-height) (72px) for the
       one-row desktop layout. Once it wraps onto two rows here, that fixed
       height no longer fits its content — the second row spills out past
       the sticky header's box and floats on top of the page underneath it
       while scrolling, instead of the header growing to contain it. */
    height: auto;
    /* Vertical-only padding via the shorthand's second value — NOT
       "padding: 12px 0", which also zeroes the left/right padding
       .header-inner inherits from .container (it has both classes) and
       drags the logo flush against the screen edge. */
    padding: 12px 20px;
  }
  :root {
    /* Redefined at :root (not .site-header) so every var(--header-height)
       usage document-wide picks it up — anchor-link scroll offsets
       (scroll-margin-top) and any sticky-top calc() live on elements that
       aren't descendants of .site-header, so a custom property set there
       wouldn't inherit to them. */
    --header-height: 112px;
  }
  .brand-tagline {
    display: none;
  }
  .header-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .sign-in-btn {
    /* Redundant on mobile — the drawer already has "Admin Sign In". */
    display: none;
  }
  .sub-hero-strip {
    grid-template-columns: 1fr;
  }
  .hero-main-card {
    min-height: 380px;
  }
  .hero-main-title {
    font-size: 1.5rem;
  }
  .hero-main-content {
    padding: 20px;
  }
  .hero-side-column {
    grid-template-columns: 1fr;
  }
  .politics-lead-card {
    grid-template-columns: 1fr;
  }
  .politics-lead-media {
    min-height: 180px;
  }
  .sub-grid-three {
    grid-template-columns: 1fr;
  }
  .trending-cards-grid {
    grid-template-columns: 1fr;
  }
  .categories-pills-grid {
    grid-template-columns: 1fr;
  }
  .shows-grid-timeline {
    grid-template-columns: 1fr;
  }
  .presenters-row {
    grid-template-columns: 1fr 1fr;
  }
  .newsletter-card-box {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .newsletter-input-group {
    flex-direction: column;
  }
  .footer-columns-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom-bar {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  /* Mobile Player */
  .sticky-radio-player {
    height: auto;
    padding: 12px 0;
  }
  .player-container {
    flex-direction: column;
    gap: 10px;
  }
  .player-station-info {
    width: 100%;
    min-width: auto;
    justify-content: flex-start;
  }
  .player-controls-center {
    width: 100%;
    justify-content: center;
  }
  .player-tools-right {
    width: 100%;
    justify-content: space-between;
  }
  .station-drawer-flyout {
    width: calc(100% - 32px);
    right: 16px;
    bottom: 160px;
  }
  /* Mobile flyout */
  .flyout-drawer {
    right: 12px;
    width: calc(100vw - 24px);
    max-width: 340px;
  }
  /* Mobile: reduce hero main content font sizes */
  .hero-main-summary {
    display: none;
  }
  .player-volume-control {
    display: none;
  }
}

/* ============================================================================
   Cinematic Homepage — hero, Our Brands gateway, statement, selected work,
   commercial CTA + restrained footer. Shown only on the "/" route; see
   applyRoute()/initHomeCinematics() in js/app.js.
   ============================================================================ */

.cinematic-outline-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--text-main);
  color: var(--text-main);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.cinematic-outline-btn:hover {
  background: var(--text-main);
  color: #fff;
}
.cinematic-outline-btn.on-dark {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.cinematic-outline-btn.on-dark:hover {
  background: #fff;
  color: var(--bg-ticker);
}
.cinematic-solid-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--accent-pink));
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.cinematic-solid-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.section-kicker {
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-pink);
  margin-bottom: 28px;
}
.section-kicker.light { color: #f9a8d4; }

/* ---- Hero ---- */
.cinematic-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin: 0 0 64px;
  /* Keeps the headline clear of the fixed sticky player on short
     viewports — the player sits at the true viewport bottom, not the
     page bottom, so body's own bottom padding (line ~160) doesn't help
     content positioned inside this hero. */
  padding-bottom: calc(var(--player-height) + 40px);
}
.cinematic-hero-media {
  position: absolute;
  inset: 0;
}
.cinematic-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
}
.cinematic-hero-img.is-active { visibility: visible; opacity: 1; }
.cinematic-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 8, 20, 0.25) 0%, rgba(10, 8, 20, 0.35) 45%, rgba(10, 8, 20, 0.92) 100%);
}
/* Oversized ghost wordmark — the "cinematic, not generic-template" touch
   the MD referenced (see Kinetic/Creatix-style references shared): a huge,
   near-transparent word bleeding off the bottom edge, behind the headline.
   aria-hidden + pointer-events:none since it's decorative, not content. */
.cinematic-hero-ghost-word {
  position: absolute;
  left: 50%;
  bottom: clamp(-60px, -8vw, -10px);
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  font-family: var(--font-editorial);
  font-weight: 800;
  font-size: clamp(5rem, 16vw, 13rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  user-select: none;
}

.cinematic-hero-content {
  position: relative;
  z-index: 1;
  padding: 0 clamp(20px, 5vw, 64px) clamp(48px, 8vw, 88px);
  max-width: 900px;
}
.cinematic-hero-headline {
  font-family: var(--font-editorial);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 20px;
}
.cinematic-hero-sub {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 32px;
  letter-spacing: 0.02em;
}
.cinematic-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--bg-ticker);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cinematic-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* ---- Our Brands ---- */
.brands-gateway-section {
  padding: 96px 0;
  background: var(--bg-ticker);
  border-radius: var(--radius-lg);
  margin-bottom: 64px;
}
.brands-gateway-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.brand-gateway-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 48px 20px;
  min-height: 260px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  color: var(--text-main);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.brand-gateway-tile:hover {
  border-color: var(--accent-pink);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.brand-gateway-logo {
  max-width: 100px;
  max-height: 72px;
  object-fit: contain;
}
.brand-gateway-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
}
.brand-gateway-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-pink);
}
.brand-gateway-action svg { width: 14px; height: 14px; }

/* ---- Statement ---- */
.statement-section {
  padding: 96px 0;
}
.statement-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.statement-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.statement-headline {
  font-family: var(--font-editorial);
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  margin: 0 0 20px;
  color: var(--text-main);
}
.statement-body {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 32px;
  max-width: 46ch;
}

/* ---- Selected Work ---- */
.selected-work-section {
  padding: 96px 0;
  background: var(--bg-ticker);
  border-radius: var(--radius-lg);
  margin-bottom: 64px;
}
.selected-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 clamp(20px, 4vw, 48px);
}
.work-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
}
.work-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.work-card:hover img { transform: scale(1.06); }
.work-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.85) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.work-card:hover .work-card-overlay,
.work-card:focus-visible .work-card-overlay { opacity: 1; }
.work-card-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-pink);
  margin-bottom: 6px;
}
.work-card-title {
  font-family: var(--font-editorial);
  font-size: 1.4rem;
  color: #fff;
  line-height: 1.15;
}
.selected-work-footer {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* ---- Commercial CTA ---- */
.commercial-cta-section {
  padding: 120px 0;
  text-align: center;
  background: linear-gradient(135deg, var(--primary), var(--accent-pink));
  border-radius: var(--radius-lg);
  margin-bottom: 0;
}
.commercial-cta-headline {
  font-family: var(--font-editorial);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.1;
  color: #fff;
  margin: 0 0 16px;
}
.commercial-cta-sub {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 40px;
}
.commercial-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.commercial-cta-actions .cinematic-solid-btn {
  background: #fff;
  color: var(--primary);
}

/* ---- Restrained footer ---- */
.restrained-footer {
  padding: 56px 0 32px;
  text-align: center;
}
.restrained-footer-brands {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.restrained-footer-brands a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-main);
  text-decoration: none;
}
.restrained-footer-brands a:hover { color: var(--accent-pink); }
.restrained-footer-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.restrained-footer-contact { display: flex; gap: 16px; flex-wrap: wrap; }
.restrained-footer-contact a { color: var(--text-secondary); text-decoration: none; }
.restrained-footer-contact a:hover { color: var(--accent-pink); }
.restrained-footer-social {
  display: flex;
  gap: 14px;
}
.restrained-footer-social .brand-mask {
  width: 18px;
  height: 18px;
  background-color: var(--text-muted);
}
.restrained-footer-social a:hover .brand-mask { background-color: var(--accent-pink); }
.restrained-footer-copyright {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ---- About / Work / Advertise standalone pages ---- */
.simple-page-section {
  padding: 64px 0 96px;
}
.simple-page-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.simple-page-title {
  font-family: var(--font-editorial);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--text-main);
  margin: 0 0 20px;
}
.simple-page-lede {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 auto 48px;
}
.simple-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}
.simple-page-card {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}
.simple-page-card h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin: 0 0 10px;
  color: var(--accent-pink);
}
.simple-page-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
#work .simple-page-inner,
#advertise .simple-page-inner { max-width: 960px; }

/* ---- About page — leadership ---- */
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 520px;
  margin: 0 auto;
}
.leadership-card { text-align: center; }
.leadership-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
}
.leadership-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.placeholder-fill {
  background: repeating-linear-gradient(135deg, #ECEBF3 0 9px, #E4E3ED 9px 18px);
}
.leadership-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin: 0 0 4px;
  color: var(--text-main);
}
.leadership-title {
  font-size: 0.85rem;
  color: var(--accent-pink);
  font-weight: 600;
}

/* ---- Station hub (/ibadan, /lagos, /r2tv) ---- */
.station-hub-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 56px 20px 64px;
  margin-bottom: 48px;
  background: linear-gradient(135deg, var(--primary), var(--accent-pink));
  border-radius: var(--radius-lg);
}
.station-hub-logo {
  max-width: 140px;
  max-height: 90px;
  object-fit: contain;
  margin-bottom: 6px;
}
.station-hub-name {
  font-family: var(--font-editorial);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: #fff;
  margin: 0;
}
.station-hub-tagline {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 10px;
}

/* ---- Presenter application form (/join) ---- */
.apply-form {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 480px;
  margin: 0 auto;
}
.apply-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apply-form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}
.apply-form-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 0.95rem;
  font-family: inherit;
}
.apply-form-input:focus {
  outline: none;
  border-color: var(--border-focus);
}
.apply-form-textarea {
  resize: vertical;
  min-height: 100px;
}
/* Honeypot — laid out off-screen (not display:none, which some bots skip
   past) so a real user never sees or tabs into it, but a bot filling every
   input still fills this one and gets silently dropped server-side. */
.apply-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#join-submit-btn {
  align-self: flex-start;
}
#join-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.apply-form-status {
  font-size: 0.9rem;
  margin: 0;
  min-height: 1.2em;
}
.apply-form-status.success { color: var(--success-green); }
.apply-form-status.error { color: var(--live-red); }

@media (max-width: 980px) {
  .brands-gateway-grid { grid-template-columns: repeat(2, 1fr); }
  .statement-inner { grid-template-columns: 1fr; gap: 32px; }
  .statement-image { aspect-ratio: 16 / 9; }
  .selected-work-grid { grid-template-columns: 1fr; }
  .simple-page-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cinematic-hero { min-height: 82vh; border-radius: 0; }
  .brands-gateway-grid { grid-template-columns: 1fr; }
  .commercial-cta-section { padding: 80px 20px; }
}