/* =============================================================================
   NewsDarpan — BBC-style public theme
   A self-contained stylesheet (no Tailwind build dependency) that styles the
   shared chrome (masthead, category nav, breaking ticker, footer) and every
   public surface (home, article, section, search, author, hub) so the look is
   consistent site-wide. Palette: BBC red (#b80000) + near-black ink (#141414).
   ========================================================================== */

:root {
  --bbc-red: #b80000;
  --bbc-red-dark: #8a0000;
  --bbc-ink: #141414;
  --bbc-ink-2: #3a3a3a;
  --bbc-grey: #6a6a6a;
  --bbc-line: #e6e6e6;
  --bbc-line-2: #d0d0d0;
  --bbc-bg-soft: #f6f6f6;
  --bbc-max: 1280px;
  --bbc-font: 'Inter', Arial, Helvetica, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body.bbc-body {
  margin: 0;
  font-family: var(--bbc-font);
  color: var(--bbc-ink);
  background: #fff;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

.bbc-body a { color: inherit; text-decoration: none; }
.bbc-body a:hover { text-decoration: underline; }

.bbc-wrap { max-width: var(--bbc-max); margin: 0 auto; padding: 0 16px; }

/* ----------------------------- Masthead ---------------------------------- */
.bbc-head { background: #fff; border-bottom: 1px solid var(--bbc-line); }
.bbc-head__top {
  max-width: var(--bbc-max); margin: 0 auto;
  padding: 12px 16px; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
.bbc-head__util { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; }
.bbc-head__util--left { justify-self: start; }
.bbc-head__util--right { justify-self: end; }
.bbc-head__util a { color: var(--bbc-ink-2); }
.bbc-head__util a:hover { color: var(--bbc-red); }
.bbc-head__util a.is-active { color: var(--bbc-red); text-decoration: underline; }
.bbc-head__brand { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bbc-head__brand img { height: 54px; width: auto; display: block; }
.bbc-head__tagline {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--bbc-red); text-transform: uppercase; text-align: center;
}
.bbc-head__alerts {
  background: none; border: 1px solid var(--bbc-line-2); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--bbc-ink-2); cursor: pointer;
}
.bbc-head__alerts:hover { border-color: var(--bbc-red); color: var(--bbc-red); }
.bbc-head__util a.bbc-head__report-cta {
  background: var(--bbc-red); border: 1px solid var(--bbc-red); border-radius: 999px;
  color: #fff; padding: 5px 12px; font-size: 12px; font-weight: 700; line-height: 1.2;
  white-space: nowrap;
}
.bbc-head__util a.bbc-head__report-cta:hover { background: #8f0000; border-color: #8f0000; color: #fff; }
.bbc-head__report-cta-short { display: none; }

/* Category nav — the dark bar directly under the masthead */
.bbc-nav { background: var(--bbc-ink); border-top: 3px solid var(--bbc-red); }
.bbc-nav__inner {
  max-width: var(--bbc-max); margin: 0 auto; display: flex;
  flex-wrap: wrap; align-items: center;
}
.bbc-nav a {
  color: #fff; font-size: 14px; font-weight: 600; padding: 11px 15px; white-space: nowrap;
}
.bbc-nav a:hover { background: var(--bbc-red); text-decoration: none; }
.bbc-nav a.is-active { background: var(--bbc-red); }

@media (max-width: 640px) {
  .bbc-head__brand img { height: 40px; }
  .bbc-head__tagline { font-size: 10px; }
  .bbc-head__util { gap: 8px; font-size: 11px; }
  .bbc-head__report-cta-full { display: none; }
  .bbc-head__report-cta-short { display: inline; }
  .bbc-head__util a.bbc-head__report-cta { padding: 4px 8px; font-size: 11px; }
  .bbc-nav__inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bbc-nav a { padding: 11px 12px; }
}

/* --------------------- Breaking ticker (directly below nav) --------------- */
/* No top margin — it sits flush under the category nav, removing the blank gap */
.bbc-ticker {
  display: flex; align-items: center; background: var(--bbc-red); color: #fff;
  height: 42px; overflow: hidden;
}
.bbc-ticker__label {
  background: var(--bbc-ink); font-weight: 700; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; padding: 0 16px; height: 100%;
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.bbc-ticker__dot { width: 8px; height: 8px; background: #ff4d4d; border-radius: 50%; animation: bbcpulse 1.2s infinite; }
@keyframes bbcpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.bbc-ticker__viewport { flex: 1; overflow: hidden; height: 100%; }
.bbc-ticker__track { display: inline-flex; align-items: center; height: 100%; white-space: nowrap; animation: bbcticker 45s linear infinite; }
.bbc-ticker__viewport:hover .bbc-ticker__track { animation-play-state: paused; }
.bbc-ticker__item { color: #fff; font-size: 14px; font-weight: 600; padding: 0 26px; position: relative; }
.bbc-ticker__item::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: rgba(255,255,255,.45); }
.bbc-ticker__item:hover { text-decoration: underline; }
@keyframes bbcticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bbc-ticker__track { animation: none; } }

/* ------------------------------- Page shell ------------------------------ */
.bbc-main { max-width: var(--bbc-max); margin: 0 auto; padding: 22px 16px 64px; }
.bbc-kicker {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--bbc-red); margin-bottom: 5px;
}
.bbc-meta { font-size: 12px; color: var(--bbc-grey); margin-top: 7px; }

/* Responsive media with a graceful placeholder. The placeholder is applied to
   the <a>/wrapper via JS onerror; it never leaves a broken-image icon. */
.bbc-img { width: 100%; object-fit: cover; background: #eceff1; display: block; }
/* Hero art that is not 16:9 (square award posters, portrait photos) must
   never be cropped by aspect-ratio: 16/9 - that silently deletes headlines
   and faces. Show the whole frame on a matched dark field instead. */
.bbc-article__figure .bbc-img--fit { aspect-ratio: auto; width: 100%;
  max-height: 82vh; object-fit: contain; background: #0b0b0d; }
.bbc-img--ph { background: linear-gradient(135deg, #1f2937, #374151 60%, #4b5563); position: relative; }
.bbc-img--ph::after {
  content: "NewsDarpan"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: rgba(255,255,255,.45); font-weight: 700; font-size: 14px; letter-spacing: .5px;
}

/* ----------------------- Home: hero + side cluster ----------------------- */
.bbc-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0; border-top: 3px solid var(--bbc-ink); padding-top: 18px; }
.bbc-hero { padding-right: 30px; border-right: 1px solid var(--bbc-line); }
.bbc-hero .bbc-img { aspect-ratio: 16 / 9; }
.bbc-hero h1 { font-size: 38px; line-height: 1.07; font-weight: 800; letter-spacing: -.022em; margin: 14px 0 10px; }
.bbc-hero a:hover h1 { color: var(--bbc-red); }
.bbc-hero p { font-size: 17px; line-height: 1.55; color: var(--bbc-ink-2); }
.bbc-side { padding-left: 30px; display: flex; flex-direction: column; }
.bbc-side__item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--bbc-line); }
.bbc-side__item:first-child { padding-top: 0; }
.bbc-side__item .bbc-img { width: 116px; height: 78px; flex-shrink: 0; }
.bbc-side__item h3 { font-size: 16px; line-height: 1.25; font-weight: 700; margin: 0; }
.bbc-side__item a:hover h3 { color: var(--bbc-red); }
@media (max-width: 900px) {
  .bbc-top { grid-template-columns: 1fr; gap: 20px; }
  .bbc-hero { padding-right: 0; border-right: 0; }
  .bbc-side { padding-left: 0; border-top: 1px solid var(--bbc-line); padding-top: 16px; }
  .bbc-hero h1 { font-size: 30px; }
}

/* --------------------------- Section clusters ---------------------------- */
.bbc-sec { margin-top: 46px; }
.bbc-sec__head { display: flex; align-items: center; gap: 12px; border-top: 3px solid var(--bbc-red); padding-top: 10px; margin-bottom: 18px; }
.bbc-sec__head h2 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.bbc-sec__head h2 a:hover { color: var(--bbc-red); }
.bbc-sec__more { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--bbc-red); }
.bbc-sec__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 26px; }
.bbc-sec__lead .bbc-img { aspect-ratio: 16 / 9; }
.bbc-sec__lead h3 { font-size: 22px; line-height: 1.15; font-weight: 800; margin: 12px 0 6px; letter-spacing: -.01em; }
.bbc-sec__lead a:hover h3 { color: var(--bbc-red); }
.bbc-sec__lead p { font-size: 15px; line-height: 1.5; color: #5a5a5a; margin: 0; }
.bbc-card .bbc-img { aspect-ratio: 16 / 9; }
.bbc-card h3 { font-size: 16px; line-height: 1.28; font-weight: 700; margin: 9px 0 0; }
.bbc-card a:hover h3 { color: var(--bbc-red); }
@media (min-width: 901px) {
  .bbc-sec__grid { grid-template-columns: 1.5fr 1fr 1fr; grid-auto-rows: min-content; }
  .bbc-sec__lead { grid-column: 1; grid-row: 1 / span 2; }
}
@media (max-width: 900px) { .bbc-sec__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bbc-sec__grid { grid-template-columns: 1fr; } }

/* ------------------------------ Trending band ---------------------------- */
.bbc-trend { margin-top: 50px; background: var(--bbc-bg-soft); border-radius: 4px; padding: 22px 24px; }
.bbc-trend h2 { font-size: 18px; font-weight: 800; margin: 0 0 14px; border-bottom: 3px solid var(--bbc-ink); padding-bottom: 6px; }
.bbc-trend ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 22px; }
.bbc-trend li { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid #e0e0e0; }
.bbc-trend__n { font-size: 22px; font-weight: 800; color: #cbd5e1; line-height: 1; }
.bbc-trend h4 { font-size: 14px; line-height: 1.3; font-weight: 700; margin: 0; }
.bbc-trend a:hover h4 { color: var(--bbc-red); }
@media (max-width: 900px) { .bbc-trend ol { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bbc-trend ol { grid-template-columns: 1fr; } }

/* ------------------------------- Pager ----------------------------------- */
.bbc-pager { margin-top: 40px; display: flex; justify-content: center; gap: 10px; font-size: 14px; }
.bbc-pager a { color: var(--bbc-red); font-weight: 700; }
.bbc-pager span { color: var(--bbc-grey); }

/* ------------------------- Breadcrumb (inner pages) ---------------------- */
.bbc-crumbs { font-size: 12px; color: var(--bbc-grey); margin: 0 0 14px; }
.bbc-crumbs a:hover { color: var(--bbc-red); }

/* ------------------------------- Article --------------------------------- */
.bbc-article { max-width: 760px; margin: 0 auto; }
.bbc-article__head { border-top: 3px solid var(--bbc-red); padding-top: 14px; }
.bbc-article h1.bbc-article__title { font-size: 36px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 10px; }
.bbc-article__dek { font-size: 19px; line-height: 1.5; color: var(--bbc-ink-2); margin: 0 0 16px; }
.bbc-article__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-top: 1px solid var(--bbc-line); border-bottom: 1px solid var(--bbc-line); padding: 12px 0; font-size: 13px; color: var(--bbc-grey); margin-bottom: 20px; }
.bbc-article__byline strong { color: var(--bbc-ink); }
.bbc-article__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.bbc-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 20px; }
.bbc-share strong { margin-right: 2px; font-size: 13px; color: var(--bbc-ink-2); }
.bbc-share a, .bbc-share button { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 11px;
  border: 1px solid var(--bbc-line-2); border-radius: 999px; background: #fff; color: var(--bbc-ink-2);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.bbc-share a:hover, .bbc-share button:hover, .bbc-share a:focus-visible, .bbc-share button:focus-visible {
  border-color: var(--bbc-red); color: var(--bbc-red); text-decoration: none; outline: 2px solid transparent; }
.bbc-article__figure { margin: 0 0 8px; }
.bbc-article__figure .bbc-img { aspect-ratio: 16 / 9; border-radius: 2px; }
.bbc-article__caption { font-size: 12px; color: var(--bbc-grey); margin: 6px 0 24px; }
/* Lazy-load YouTube facade: click-to-load, keeps LCP light */
.nd-video { position: relative; margin: 0 0 24px; }
.nd-video__btn { display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; position: relative; }
.nd-video__btn .bbc-img { aspect-ratio: 16 / 9; width: 100%; display: block; object-fit: cover; opacity: .92; }
.nd-video__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.7); color: #fff; border-radius: 12px; font-size: 22px; }
.nd-video__frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.bbc-prose { font-size: 18px; line-height: 1.7; color: #222; }
.bbc-prose p { margin: 0 0 1.15em; }
.bbc-prose h2 { font-size: 25px; font-weight: 800; line-height: 1.2; margin: 1.6em 0 .5em; letter-spacing: -.01em; }
.bbc-prose h3 { font-size: 21px; font-weight: 700; margin: 1.4em 0 .4em; }
.bbc-prose ul, .bbc-prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.bbc-prose li { margin: 0 0 .4em; }
.bbc-prose a { color: var(--bbc-red); text-decoration: underline; }
.bbc-prose a.nd-inline-link { text-decoration-thickness: 1px; text-underline-offset: 2px; font-weight: 600; }
.bbc-prose a.nd-inline-link:hover { background: rgba(187,25,25,.06); }
.bbc-prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--bbc-red); font-size: 21px; line-height: 1.45; color: var(--bbc-ink); font-weight: 600; }
.bbc-prose img { max-width: 100%; height: auto; display: block; margin: 1.2em 0; }
.bbc-prose figure { margin: 1.4em 0; }
.bbc-prose figcaption { font-size: 12px; color: var(--bbc-grey); margin-top: 6px; }

.bbc-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; }
.bbc-badge--sec { background: var(--bbc-red); color: #fff; }
.bbc-badge--type { background: var(--bbc-bg-soft); color: var(--bbc-ink-2); }
.bbc-badge--live { background: var(--bbc-red); color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.bbc-badge--live .dot { width: 7px; height: 7px; background: #fff; border-radius: 50%; animation: bbcpulse 1.2s infinite; }

/* Key takeaways (AEO) + FAQ */
.bbc-takeaways { background: var(--bbc-bg-soft); border-left: 4px solid var(--bbc-red); border-radius: 2px; padding: 16px 20px; margin: 24px 0; }
.bbc-takeaways h2 { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }
.bbc-takeaways ul { margin: 0; padding-left: 1.2em; }
.bbc-takeaways li { margin: 0 0 .45em; font-size: 16px; line-height: 1.5; }
.bbc-faq { margin: 32px 0; }
.bbc-faq h2 { font-size: 22px; font-weight: 800; border-top: 3px solid var(--bbc-red); padding-top: 12px; }
.bbc-faq__q { font-weight: 700; font-size: 17px; margin: 18px 0 4px; }
.bbc-faq__a { font-size: 16px; line-height: 1.6; color: #333; margin: 0; }

/* Related / more-from rail */
.bbc-related { margin-top: 40px; border-top: 3px solid var(--bbc-ink); padding-top: 16px; }
.bbc-related h2 { font-size: 18px; font-weight: 800; margin: 0 0 16px; }
.bbc-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bbc-related__grid .bbc-img { aspect-ratio: 16 / 9; }
.bbc-related__grid h3 { font-size: 15px; line-height: 1.3; font-weight: 700; margin: 8px 0 0; }
@media (max-width: 760px) { .bbc-related__grid { grid-template-columns: 1fr 1fr; } }

/* Live blog updates */
.bbc-live { margin: 24px 0; }
.bbc-live__item { border-left: 3px solid var(--bbc-red); padding: 0 0 16px 16px; position: relative; }
.bbc-live__time { font-size: 12px; font-weight: 700; color: var(--bbc-red); text-transform: uppercase; }
.bbc-live__body { font-size: 16px; line-height: 1.6; margin: 4px 0 0; }

/* Comments */
.bbc-comments { margin-top: 40px; border-top: 1px solid var(--bbc-line); padding-top: 20px; }
.bbc-comments h2 { font-size: 18px; font-weight: 800; }
.bbc-comment { padding: 12px 0; border-bottom: 1px solid var(--bbc-line); }
.bbc-comment__name { font-weight: 700; font-size: 14px; }
.bbc-comment__meta { font-size: 12px; color: var(--bbc-grey); }
.bbc-comment__body { font-size: 15px; line-height: 1.55; margin: 4px 0 0; }
.bbc-form input, .bbc-form textarea { width: 100%; border: 1px solid var(--bbc-line-2); border-radius: 2px; padding: 8px 10px; font-size: 14px; font-family: inherit; margin: 6px 0; }
.bbc-btn { background: var(--bbc-red); color: #fff; border: 0; border-radius: 2px; padding: 9px 18px; font-weight: 700; font-size: 14px; cursor: pointer; }
.bbc-btn:hover { background: var(--bbc-red-dark); }

/* ----------------------- Section / list grids ---------------------------- */
.bbc-pagehead { border-top: 3px solid var(--bbc-red); padding-top: 12px; margin-bottom: 22px; }
.bbc-pagehead h1 { font-size: 30px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.bbc-pagehead p { font-size: 15px; color: var(--bbc-grey); margin: 6px 0 0; }
.bbc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.bbc-grid__item { border-bottom: 1px solid var(--bbc-line); padding-bottom: 18px; }
.bbc-grid__item .bbc-img { aspect-ratio: 16 / 9; }
.bbc-grid__item h2, .bbc-grid__item h3 { font-size: 18px; line-height: 1.25; font-weight: 700; margin: 10px 0 6px; }
.bbc-grid__item a:hover h2, .bbc-grid__item a:hover h3 { color: var(--bbc-red); }
.bbc-grid__item p { font-size: 14px; line-height: 1.5; color: #5a5a5a; margin: 0; }
@media (max-width: 900px) { .bbc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bbc-grid { grid-template-columns: 1fr; } }

/* Section pills (in-page section switcher) */
.bbc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.bbc-pills a { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--bbc-bg-soft); color: var(--bbc-ink-2); }
.bbc-pills a:hover { background: var(--bbc-line); text-decoration: none; }
.bbc-pills a.is-active { background: var(--bbc-red); color: #fff; }

/* ------------------------------- Footer ---------------------------------- */
.bbc-foot { background: var(--bbc-ink); color: #cbd5e1; margin-top: 48px; padding: 32px 16px; }
.bbc-foot__inner { max-width: var(--bbc-max); margin: 0 auto; }
.bbc-foot__cols { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
.bbc-foot h3 { color: #fff; font-size: 14px; margin: 0 0 12px; border-left: 3px solid var(--bbc-red); padding-left: 8px; text-transform: uppercase; letter-spacing: .04em; }
.bbc-foot__links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.bbc-foot__links a { color: #cbd5e1; font-size: 13px; }
.bbc-foot__links a:hover { color: #fff; }
.bbc-foot__news input { border: 1px solid #3a3a3a; background: #1f1f1f; color: #fff; border-radius: 2px; padding: 8px 10px; font-size: 13px; width: 100%; max-width: 280px; margin: 6px 0; }
.bbc-foot h3.bbc-foot__social-title { margin-top: 22px; }
.bbc-foot__social { display: flex; flex-wrap: wrap; gap: 8px; }
.bbc-foot__social a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #3a3a3a;
  border-radius: 3px; color: #cbd5e1; font-size: 12px; font-weight: 600; }
.bbc-foot__social a:hover, .bbc-foot__social a:focus-visible { color: #fff; border-color: #94a3b8; text-decoration: none; }
.bbc-foot__social a span:first-child { display: inline-grid; width: 17px; height: 17px; place-items: center; color: #fff; font-weight: 800; }
.bbc-foot__policy { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #2a2a2a; }
.bbc-foot__policy a { color: #94a3b8; font-size: 12px; }
.bbc-foot__policy a:hover { color: #fff; }
.bbc-foot__copy { margin: 14px 0 0; font-size: 12px; color: #94a3b8; font-style: italic; }
.bbc-foot__msg { font-size: 12px; margin: 6px 0; }
.bbc-foot__msg--error { color: #ff8a8a; }
.bbc-foot__msg--ok { color: #86efac; }
@media (max-width: 700px) { .bbc-foot__cols { grid-template-columns: 1fr; gap: 24px; } }

/* Consent Mode control: compact, accessible, and reopenable from the footer. */
.nd-consent { position: fixed; z-index: 10000; left: 16px; right: 16px; bottom: 16px;
  max-width: 920px; margin: 0 auto; padding: 16px 18px; background: #fff;
  color: var(--bbc-ink); border: 1px solid var(--bbc-line-2); border-top: 4px solid var(--bbc-red);
  box-shadow: 0 8px 30px rgba(0,0,0,.2); display: flex; gap: 20px; align-items: center; }
.nd-consent[hidden] { display: none; }
.nd-consent p { margin: 5px 0 0; font-size: 14px; line-height: 1.45; }
.nd-consent p a { color: var(--bbc-red); text-decoration: underline; }
.nd-consent__actions { display: flex; gap: 8px; flex-shrink: 0; }
.nd-consent button, .bbc-foot__consent { border: 1px solid var(--bbc-line-2); background: #fff;
  color: var(--bbc-ink); padding: 8px 12px; border-radius: 3px; cursor: pointer; font: inherit; }
.nd-consent button.nd-consent__accept { color: #fff; background: var(--bbc-red); border-color: var(--bbc-red); }
.bbc-foot__consent { padding: 0; border: 0; background: transparent; color: #94a3b8; font-size: 12px; }
.bbc-foot__consent:hover { color: #fff; text-decoration: underline; }
@media (max-width: 640px) { .nd-consent { flex-direction: column; align-items: stretch; }
  .nd-consent__actions { justify-content: flex-end; } }

.bbc-empty { padding: 56px 0; text-align: center; color: #94a3b8; }

/* ------------------------------ Ad units ---------------------------------
   Single styling contract for every AdSense unit. Markup comes from
   templates/public/_ad.html — never inline an <ins class="adsbygoogle">.

   Three problems this solves:
   1. Unfilled units used to leave a labelled empty box, which is what made
      the site feel plastered with ads even when nothing rendered. AdSense
      stamps data-ad-status="unfilled" on the <ins>, so we collapse the whole
      aside (label included) via :has().
   2. Ads were visually indistinguishable from editorial cards. A quiet
      uppercase "Advertisement" label plus hairline rules above/below marks
      the boundary (also an AdSense policy requirement).
   3. No reserved height meant every fill shifted the page (CLS). min-height
      reserves the common slot heights up front.
-------------------------------------------------------------------------- */
.nd-ad {
  display: block;
  margin: 36px auto;
  padding: 8px 0 10px;
  max-width: 970px;
  text-align: center;
  border-top: 1px solid var(--bbc-line);
  border-bottom: 1px solid var(--bbc-line);
  background: transparent;
  overflow: hidden;
}
.nd-ad__label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9aa0a6;
  margin: 0 0 8px;
  line-height: 1;
}
.nd-ad .adsbygoogle { display: block; margin: 0 auto; }

/* Reserve height so a fill does not shove content down (CLS). */
.nd-ad--display .adsbygoogle { min-height: 250px; }
.nd-ad--in-feed .adsbygoogle { min-height: 200px; }
.nd-ad--multiplex .adsbygoogle { min-height: 300px; }

/* In-feed units live INSIDE a CSS grid of story cards. Without an explicit
   span they would sit in a single column and read as a fake story card. */
.bbc-grid > .nd-ad, .bbc-sec__grid > .nd-ad { grid-column: 1 / -1; }

/* Collapse entirely when AdSense reports no fill — no label, no rules, no gap. */
.nd-ad:has(> .adsbygoogle[data-ad-status="unfilled"]) {
  display: none;
}
/* Fallback for browsers without :has() — hides the unit but the wrapper's
   own borders/label would remain, so keep the padding minimal there. */
.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

@media (max-width: 700px) {
  .nd-ad { margin: 28px auto; }
  .nd-ad--display .adsbygoogle { min-height: 200px; }
}
/* Ads add nothing to a printed page. */
@media print { .nd-ad { display: none; } }
@media print { .bbc-share, .bbc-foot__social { display: none; } }

/* --- Table styles for .bbc-prose (article body tables) --- */
.bbc-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15px; line-height: 1.5; overflow-x: auto; display: block; }
.bbc-prose thead { background: #1a1a2e; color: #fff; }
.bbc-prose th { padding: 12px 14px; text-align: left; font-weight: 700; font-size: 14px; border: 1px solid #2d2d44; white-space: nowrap; }
.bbc-prose td { padding: 10px 14px; border: 1px solid #e2e8f0; vertical-align: top; }
.bbc-prose tbody tr:nth-child(even) { background: #f8fafc; }
.bbc-prose tbody tr:hover { background: #eef2ff; }
.bbc-prose tbody tr:first-child td { border-top: 2px solid #1a1a2e; }
@media (max-width: 700px) {
  .bbc-prose table { font-size: 13px; }
  .bbc-prose th, .bbc-prose td { padding: 8px 10px; }
}