/* =============================================================================
   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); }

/* 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-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; }
.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-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; }
.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 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__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; } }

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