@font-face {
  font-family: "Marwar Devanagari";
  src: url("../fonts/TiroDevanagariHindi-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --brand-orange: #F79227;
  --brand-blue: #1A90D0;
  --brand-red: #D52A31;
  --red: var(--brand-red);
  --red-dark: #b72027;
  --navy: #0d2d42;
  --ink: #111827;
  /* #646b78: AA (4.5:1) also on the --soft panels, not just on white. */
  --muted: #646b78;
  --line: #e5e7eb;
  --soft: #f5f6f8;
  --sun: var(--brand-orange);
  --shell: 1812px;
  --bg: #ffffff;
  --card-bg: #ffffff;
  /* Red used as text/icon colour on page surfaces; lightened in dark mode where brand red on navy is ~3:1. */
  --red-text: var(--red);
}

/* Redefines the same variables most of the site already renders through (var(--ink)/--muted/--line/--soft/--bg),
   so dark mode follows from the existing design system rather than a second, parallel set of component rules. */
html[data-theme="dark"] {
  --ink: #e5e7eb;
  --muted: #9ca3af;
  --line: #2d3748;
  --soft: #1a2130;
  --bg: #0f1419;
  --card-bg: #161d29;
  --red-text: #ff7b83;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "Marwar Devanagari", "Nirmala UI", "Noto Sans Devanagari", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color .15s ease, color .15s ease;
}
button, a { font: inherit; }
button { border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.page-shell {
  width: min(100% - 64px, var(--shell));
  margin-inline: auto;
}

.site-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.header-grid {
  min-height: 124px;
  display: grid;
  grid-template-columns: auto 190px 1fr 200px 300px auto;
  align-items: center;
  gap: 22px;
  position: relative;
}
.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #101010;
  border-radius: 8px;
  font-size: 28px;
}
.brand {
  display: flex;
  align-items: center;
  min-width: 180px;
  color: #151515;
}
.brand-logo {
  width: auto;
  height: 108px;
  max-width: 180px;
  display: block;
  object-fit: contain;
}
.date-line {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-38%);
  font-size: 13px;
  font-weight: 600;
}
.location-pill {
  justify-self: end;
  height: 42px;
  min-width: 192px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 10px #0000000d;
  font-size: 14px;
  font-weight: 700;
}
.location-pill i:first-child { color: var(--red); font-size: 19px; }
.weather-mini {
  width: 300px;
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: flex-start;
  font-size: 13px;
  white-space: nowrap;
}
.weather-mini i { color: #f7b500; font-size: 34px; }
.weather-mini b { font-size: 22px; }
.weather-mini span {
  color: var(--muted);
  flex: 0 0 auto;
}
.weather-mini em { padding: 2px 6px; border-radius: 5px; background: #eef0f3; font-style: normal; }
.utility-links {
  position: absolute;
  right: 0;
  top: 12px;
  display: flex;
  gap: 18px;
  font-size: 13px;
  font-weight: 700;
}
.utility-links a + a { border-left: 1px solid #cfd3d8; padding-left: 18px; }
.language-selector { max-width: 120px; min-width: 72px; padding: 3px 6px; border: 1px solid #e3e7ec; border-radius: 4px; background: white; font: inherit; font-size: 12px; }
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.outline-btn, .red-btn {
  min-width: 136px;
  height: 48px;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 900;
}
.outline-btn { border: 1px solid #c9cdd3; background: #fff; }
.red-btn, .full-red { background: var(--red); color: #fff; }
.red-btn:hover, .full-red:hover, .nav-live:hover { background: var(--red-dark); }
.mobile-icons { display: none; }
.menu-btn { display: none; }

.main-nav { background: var(--navy); color: #fff; }
.nav-row { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.nav-row a {
  flex: 0 0 auto;
  padding: 14px 18px;
  font-weight: 900;
  font-size: 15px;
}
.nav-row a.active {
  background: var(--red);
  border-radius: 6px;
  margin-right: 3px;
}
.nav-live {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 8px 16px;
  border-radius: 7px;
  color: #fff;
  background: var(--red);
  font-weight: 800;
}

.breaking-strip {
  height: 46px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #f0c6cb;
  border-radius: 7px;
}
.breaking-strip b {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 36px 0 18px;
  background: var(--red);
  color: #fff;
  clip-path: polygon(0 0, 91% 0, 100% 50%, 91% 100%, 0 100%);
  white-space: nowrap;
}
.ticker {
  flex: 1;
  padding: 0 26px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breaking-strip a {
  padding: 0 14px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.ad-slot {
  display: grid;
  place-items: center;
  min-height: 86px;
  border: 1px dashed #c8ced6;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #fff7ed 0%, #fff 42%, #f8fafc 100%);
  color: #475569;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.ad-slot span {
  display: block;
  color: #0f172a;
  font-size: 18px;
  letter-spacing: 0;
}

.ad-leaderboard {
  margin-top: 10px;
  min-height: 92px;
}

.ad-mpu {
  min-height: 280px;
}

.ad-infeed {
  margin-top: 12px;
}

.native-ad {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid #f3c6ca;
  border-radius: 8px;
  background: #fffafa;
}

.native-ad img {
  width: 220px;
  height: 108px;
  border-radius: 6px;
  object-fit: cover;
}

.native-ad b {
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
}

.native-ad h3 {
  margin: 3px 0 4px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 900;
}

.native-ad p {
  margin: 0;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.45;
}

.native-ad button {
  min-width: 126px;
  height: 38px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-weight: 900;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 345px;
  gap: 14px;
  margin-top: 12px;
}
.lead-area {
  display: grid;
  grid-template-columns: 1.68fr .94fr .82fr;
  gap: 14px;
}
.hero-card {
  min-height: 390px;
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  color: #fff;
  background: #1f2937 center / cover no-repeat;
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.94) 100%);
}
.label-red, .slide-count, .live-badge {
  border-radius: 5px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.label-red {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 8px 10px;
}
.slide-count {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  padding: 8px 10px;
  background: rgba(17,24,39,.82);
}
.hero-copy {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 14px;
}
.hero-copy h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 1.8vw, 36px);
  line-height: 1.22;
  font-weight: 900;
}
.hero-copy p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; }
.hero-copy small { font-size: 13px; font-weight: 800; }
.dots { margin-top: 6px; text-align: center; }
.dots button {
  width: 9px;
  height: 9px;
  margin: 0 3px;
  padding: 0;
  border-radius: 50%;
  background: #ffffff99;
}
.dots button.active { background: var(--red); }

.mini-stories, .panel, .section-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.mini-stories { padding: 5px 10px; }
.mini-stories article {
  display: grid;
  grid-template-columns: 126px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.mini-stories article:last-child { border-bottom: 0; }
.mini-stories img { width: 126px; height: 96px; border-radius: 6px; object-fit: cover; }
.mini-stories b { color: var(--red); font-size: 12px; }
.mini-stories h3 { margin: 3px 0; font-size: 15px; line-height: 1.32; font-weight: 900; }
.mini-stories small, .news-grid small { color: var(--muted); font-size: 11px; }

.panel, .section-box { padding: 14px; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.section-head h2 {
  margin: 0;
  padding-bottom: 8px;
  position: relative;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 900;
}
.section-head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  border-bottom: 2px solid var(--red);
}
.section-head a { color: #343a40; font-size: 12px; font-weight: 800; }

.trend-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  margin: 14px 0;
}
.trend-row > span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}
.trend-row:nth-child(n+4) > span { background: var(--navy); }
.trend-row p { margin: 0; font-size: 14px; line-height: 1.36; font-weight: 900; }
.trend-row small { display: block; margin-top: 2px; color: var(--muted); font-weight: 600; }

.quick-menu { display: none; }
.section-box { margin-top: 12px; }
.city-tabs {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 12px;
}
.city-tabs button {
  flex: 0 0 auto;
  min-width: 64px;
  padding: 6px 14px;
  border-radius: 6px;
  background: #f0f1f3;
  font-size: 13px;
  font-weight: 800;
}
.city-tabs button.active { background: var(--red); color: #fff; }
.news-grid, .video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.media { position: relative; }
.media img, .video-grid img {
  width: 100%;
  height: 126px;
  object-fit: cover;
  border-radius: 6px;
}
.media.play::after {
  content: "\F4F4";
  font-family: bootstrap-icons;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 22px;
}
.news-grid h3 {
  margin: 7px 0 2px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 900;
}
.video-grid article > div {
  height: 132px;
  position: relative;
}
.video-grid img { height: 100%; }
.video-grid i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 28px;
  filter: drop-shadow(0 1px 4px #000);
}
.video-grid b {
  position: absolute;
  right: 6px;
  bottom: 5px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(0,0,0,.82);
  color: #fff;
  font-size: 10px;
}
.video-grid p { margin: 8px 0 0; font-size: 14px; line-height: 1.35; font-weight: 800; }

.mobile-trending, .mobile-live { display: none; }
.topics {
  margin-top: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  scrollbar-width: none;
}
.topics h2 { margin: 0; font-size: 17px; font-weight: 900; white-space: nowrap; }
.topics button,
.topics a {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid #6b7c8d;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.gallery-grid img { width: 100%; height: 68px; border-radius: 6px; object-fit: cover; }

.sidebar { display: flex; flex-direction: column; gap: 10px; }
.live-badge { padding: 6px 8px; }
.update {
  display: grid;
  grid-template-columns: 10px 68px 1fr;
  gap: 7px;
  padding: 8px 0 11px;
  position: relative;
}
.update > i {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px #ffe0e4;
}
.update:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 21px;
  bottom: -3px;
  border-left: 1px solid #ef9aa2;
}
.update b { color: var(--red-text); font-size: 11px; font-weight: 900; }
.update p { margin: 0; font-size: 14px; line-height: 1.35; font-weight: 800; }
.full-red {
  width: 100%;
  min-height: 36px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
}
.weather-panel h2, .epaper-panel h2 { margin: 0; font-size: 21px; font-weight: 900; }
.weather-panel > small, .epaper-panel > small { color: var(--muted); }
.temperature { display: flex; justify-content: space-between; align-items: center; }
.temperature strong { font-size: 34px; }
.temperature i { color: #f7b500; font-size: 54px; }
.weather-panel p { margin: 2px 0 8px; font-size: 12px; }
.weather-panel a, .epaper-panel a { display: block; margin-top: 9px; text-align: center; font-size: 12px; font-weight: 800; }
.paper-preview {
  min-height: 178px;
  margin: 10px 0;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: #f2e5d1;
  border: 7px solid #fff;
  box-shadow: 0 3px 12px #00000024;
}
.paper-preview b { color: var(--red); font-size: 22px; font-weight: 900; }
.paper-preview strong { margin: 8px 0; padding-block: 5px; border-block: 3px solid #252525; font-family: Georgia, serif; font-size: 17px; }
.paper-preview span { font-size: 10px; }

.category-strip {
  min-height: 48px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  border: 1px solid var(--line);
  scrollbar-width: none;
}
.category-strip b {
  flex: 0 0 auto;
  padding: 0 18px;
  color: var(--red);
  font-size: 19px;
  font-weight: 900;
}
.category-strip button {
  flex: 0 0 auto;
  padding: 0 21px;
  font-size: 12px;
  font-weight: 700;
}
.category-strip i { margin-right: 5px; color: var(--red); }

footer {
  margin-top: 10px;
  padding: 16px 0;
  background: var(--navy);
  color: #fff;
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.newsletter { display: flex; align-items: center; gap: 16px; }
.newsletter > i { color: #ef233c; font-size: 46px; }
.newsletter form { display: flex; width: 350px; }
.newsletter input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px 0 0 6px;
}
.newsletter button {
  padding: 0 16px;
  border-radius: 0 6px 6px 0;
  background: var(--red);
  color: #fff;
  font-weight: 900;
}
.socials, .stores { display: flex; gap: 12px; margin-top: 6px; }
.socials { font-size: 23px; }
.stores b { padding: 5px 11px; border: 1px solid #97a3af; border-radius: 6px; font-size: 12px; }
.qr {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #111;
  border-radius: 5px;
  font-weight: 900;
}
.mobile-bottom { display: none; }

.drawer-backdrop,
.mobile-drawer,
.search-overlay {
  display: none;
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 90px 18px 18px;
  background: rgba(15, 23, 42, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

body.search-open {
  overflow: hidden;
}

body.search-open .search-overlay {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.search-panel {
  width: min(760px, 100%);
  margin-inline: auto;
  padding: 18px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
}

.search-close {
  margin-left: auto;
}

.search-form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.search-form i {
  color: var(--red);
  font-size: 22px;
}

.search-form input {
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
}

.search-form button {
  min-width: 90px;
  height: 40px;
  border-radius: 7px;
  background: var(--red);
  color: #fff;
  font-weight: 900;
}

.search-suggestions {
  margin-top: 16px;
}

.search-suggestions b {
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 900;
}

.search-suggestions div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-suggestions button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #111;
  font-weight: 800;
}

.article-tools {
  margin: 16px 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-tools button,
.article-tools a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #111;
  font-weight: 900;
}

.article-tools a:first-of-type {
  border-color: #16a34a;
  color: #15803d;
}

.inner-page {
  margin-top: 14px;
}

.page-title-band {
  min-height: 128px;
  display: grid;
  align-items: end;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff 0%, #f7f9fb 100%);
}

.page-title-band h1 {
  margin: 0;
  font-size: clamp(32px, 2.2vw, 44px);
  line-height: 1.15;
  font-weight: 900;
}

.page-title-band p {
  max-width: 780px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 700;
}

.listing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 345px;
  gap: 16px;
}

.headline-list {
  display: grid;
  gap: 14px;
}

.story-row {
  display: grid;
  grid-template-columns: 285px 1fr;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.story-row img {
  width: 100%;
  height: 170px;
  border-radius: 6px;
  object-fit: cover;
}

.story-row b {
  color: var(--red);
  font-size: 13px;
  font-weight: 900;
}

.story-row h2 {
  margin: 5px 0 8px;
  font-size: 24px;
  line-height: 1.28;
  font-weight: 900;
}

.story-row p {
  margin: 0 0 10px;
  color: #374151;
  font-size: 15px;
  line-height: 1.55;
}

.story-row small {
  color: var(--muted);
  font-weight: 700;
}

.load-more {
  width: 220px;
  height: 44px;
  margin: 6px auto 0;
  display: block;
  border-radius: 7px;
  background: var(--red);
  color: #fff;
  font-weight: 900;
}

.article-shell {
  max-width: 920px;
  margin: 16px auto 0;
}

.article-shell h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 3vw, 54px);
  line-height: 1.15;
  font-weight: 900;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-weight: 800;
}

.article-hero {
  width: 100%;
  height: 470px;
  margin: 18px 0;
  border-radius: 8px;
  object-fit: cover;
}

.article-body {
  font-size: 19px;
  line-height: 1.85;
  font-weight: 600;
}

.article-body p {
  margin: 0 0 18px;
}

.article-body h2,
.article-body h3,
.article-body h4 {
  color: var(--ink);
  font-weight: 900;
  line-height: 1.28;
  margin: 28px 0 12px;
}

.article-body h2 { font-size: 30px; }
.article-body h3 { font-size: 25px; }
.article-body h4 { font-size: 21px; }

.article-body ul,
.article-body ol {
  margin: 0 0 20px 24px;
  padding-left: 18px;
}

.article-body li {
  margin: 8px 0;
}

.article-body blockquote {
  background: #fff7ed;
  border-left: 5px solid var(--brand-yellow);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.55;
  margin: 26px 0;
  padding: 18px 22px;
}

.article-body img,
.article-body .news-content-image {
  border-radius: 8px;
  display: block;
  height: auto;
  margin: 22px auto;
  max-width: 100%;
}

.article-body .tableWrapper {
  margin: 24px 0;
  overflow-x: auto;
}

.article-body table,
.article-body .news-content-table {
  border: 1px solid var(--line);
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  min-width: 620px;
  width: 100%;
}

.article-body th,
.article-body td {
  border: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.article-body th {
  background: #fff7ed;
  color: var(--ink);
  font-weight: 900;
}

.article-body td {
  background: #fff;
  font-weight: 600;
}

.article-body hr {
  border: 0;
  border-top: 2px solid var(--line);
  margin: 28px 0;
}

.media-page-grid,
.paper-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.media-card,
.paper-card,
.auth-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.media-card {
  overflow: hidden;
}

.media-card .thumb {
  position: relative;
}

.media-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.media-card .thumb i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 42px;
  filter: drop-shadow(0 2px 5px #000);
}

.media-card h2,
.paper-card h2 {
  margin: 12px 14px 6px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 900;
}

.media-card small,
.paper-card small {
  display: block;
  margin: 0 14px 14px;
  color: var(--muted);
  font-weight: 700;
}

.paper-card {
  padding: 14px;
}

.paper-card .paper-preview {
  min-height: 230px;
}

.live-feed-page {
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.live-feed-page .update {
  grid-template-columns: 14px 96px 1fr;
}

.live-feed-page .live-update-card {
  align-items: start;
  min-width: 0;
  padding: 14px 0;
}

.live-feed-page .live-update-card.is-pinned {
  margin: 0 -8px 10px;
  padding: 14px 8px;
  border: 1px solid #d8e2ea;
  border-left: 4px solid var(--brand-blue);
  border-radius: 6px;
  background: #f7fbff;
}

.live-feed-page .live-update-card.is-highlighted:not(.is-pinned) {
  margin: 0 -6px;
  padding-inline: 6px;
  border-left: 3px solid var(--brand-orange);
  background: #fffaf2;
}

.live-update-time {
  min-width: 0;
}

.live-update-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 5px;
}

.public-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.public-chip-pinned {
  color: #0f4f71;
  background: #e8f4fb;
  border: 1px solid #bdd8e8;
}

.public-chip-key {
  color: #7a4d05;
  background: #fff1d8;
  border: 1px solid #efd098;
}

.live-feed-page .update p {
  font-size: 17px;
}

.auth-wrap {
  min-height: 520px;
  display: grid;
  place-items: center;
}

.auth-card {
  width: min(100%, 430px);
  padding: 28px;
}

.auth-card h1 {
  margin: 0 0 18px;
  font-size: 30px;
  font-weight: 900;
}

.form-field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.form-field label {
  font-weight: 900;
}

.form-field input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid #cfd3d8;
  border-radius: 7px;
  font: inherit;
}

.form-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.requirement-strip {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.requirement-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.requirement-card i {
  color: var(--red);
  font-size: 24px;
}

.requirement-card h3 {
  margin: 6px 0 4px;
  font-size: 17px;
  font-weight: 900;
}

.requirement-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.control-bar {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  gap: 10px;
}

.control-bar input,
.control-bar select,
.control-bar button {
  height: 44px;
  border: 1px solid #cfd3d8;
  border-radius: 7px;
  padding: 0 12px;
  background: #fff;
  font: inherit;
  font-weight: 800;
}

.control-bar button {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.metric-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.metric-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.metric-card strong {
  display: block;
  margin-top: 6px;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}

.data-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.data-panel header {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.data-panel h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.status-pill {
  display: inline-grid;
  place-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 11px;
  font-weight: 900;
}

.status-pill.warn {
  background: #fff7ed;
  color: #c2410c;
}

.status-pill.draft {
  background: #eef2ff;
  color: #4338ca;
}

.builder-layout {
  display: grid;
  grid-template-columns: 310px 1fr 340px;
  gap: 14px;
}

.builder-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.builder-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  font-weight: 900;
}

.builder-preview {
  min-height: 520px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.builder-preview .section-box {
  background: #fff;
}

.editor-form {
  display: grid;
  gap: 12px;
}

.editor-form input,
.editor-form textarea,
.editor-form select {
  width: 100%;
  border: 1px solid #cfd3d8;
  border-radius: 7px;
  padding: 11px 12px;
  font: inherit;
}

.editor-form textarea {
  min-height: 150px;
  resize: vertical;
}

.seat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.seat-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.seat-card strong {
  display: block;
  font-size: 24px;
  font-weight: 900;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.plan-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.plan-card.featured {
  border-color: var(--red);
  box-shadow: 0 8px 24px rgba(213, 42, 49, .08);
}

.plan-card h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 900;
}

.plan-card strong {
  display: block;
  margin: 12px 0;
  font-size: 34px;
  font-weight: 900;
}

.plan-card ul {
  margin: 0 0 16px;
  padding-left: 18px;
  line-height: 1.8;
  font-weight: 700;
}

@media (max-width: 1220px) {
  .date-line, .utility-links { display: none; }
  .header-grid { grid-template-columns: auto auto 1fr auto; }
  .brand { min-width: 170px; }
  .brand-logo { height: 100px; max-width: 170px; }
  .location-pill { display: none; }
  .lead-area { grid-template-columns: 1.55fr .9fr; }
  .desktop-only { display: none; }
  .layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 760px) {
  body { padding-bottom: 70px; }
  .page-shell { width: 100%; padding-inline: var(--shell-gutter); }
  .site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 18px rgba(15, 23, 42, .08);
  }
  .header-grid {
    min-height: 64px;
    display: flex;
    gap: 12px;
  }
  .menu-btn { display: grid; }
  .brand { min-width: 0; flex: 1; justify-content: center; }
  .weather-mini, .header-actions { display: none; }
  .brand-logo { height: 54px; max-width: min(92px, 30vw); }
  .mobile-icons { display: flex; gap: 16px; font-size: 24px; }
  .icon-btn { width: 38px; height: 38px; font-size: 25px; }

  .main-nav {
    display: none;
    background: #fff;
    border-bottom: 1px solid var(--line);
    color: #111;
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .nav-row {
    min-height: 48px;
    flex-wrap: nowrap;
    max-height: 48px;
    padding-inline: 8px;
    overflow: hidden;
  }
  .nav-row a {
    padding: 10px 12px;
    color: #111;
    font-size: 13px;
  }
  .nav-row a.active { color: #fff; }
  .nav-live { display: none; }
  .main-nav.open .nav-row {
    flex-wrap: wrap;
    max-height: none;
    padding-block: 8px;
    overflow: visible;
  }

  .drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: block;
    pointer-events: none;
    background: rgba(15, 23, 42, .48);
    opacity: 0;
    transition: opacity .2s ease;
  }

  .mobile-drawer {
    position: fixed;
    z-index: 91;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(330px, 86vw);
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 16px 0 40px rgba(15, 23, 42, .24);
    transform: translateX(-105%);
    transition: transform .24s ease;
  }

  body.drawer-open {
    overflow: hidden;
  }

  body.drawer-open .drawer-backdrop {
    pointer-events: auto;
    opacity: 1;
  }

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

  .drawer-head {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
  }

  .drawer-head img {
    width: 118px;
    height: auto;
  }

  .drawer-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #111;
    font-size: 24px;
  }

  .drawer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
  }

  .drawer-actions a {
    min-height: 40px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    border: 1px solid #c9cdd3;
    font-weight: 900;
  }

  .drawer-actions a:last-child {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
  }

  .drawer-links {
    display: grid;
    gap: 12px;
    padding: 10px 10px 18px;
    overflow-y: auto;
  }

  .drawer-group {
    display: grid;
    gap: 2px;
  }

  .drawer-group > b {
    padding: 8px 10px 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .drawer-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px;
    border-radius: 8px;
    color: #111;
    font-size: 15px;
    font-weight: 900;
  }

  .drawer-links a.active {
    background: #fff0f1;
    color: var(--red);
  }

  .drawer-links i {
    color: var(--red);
  }

  .drawer-socials {
    margin-top: auto;
    display: flex;
    justify-content: space-around;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--line);
    color: var(--red);
    font-size: 22px;
  }

  .breaking-strip {
    width: calc(100% - 32px);
    height: 44px;
    margin: 6px 16px 0;
    padding: 0;
  }
  .breaking-strip b { padding-left: 12px; padding-right: 28px; font-size: 13px; }
  .ticker { padding: 0 10px; font-size: 12px; }

  .ad-leaderboard {
    width: calc(100% - 32px);
    min-height: 66px;
    margin: 8px 16px 0;
  }

  .ad-slot span {
    font-size: 16px;
  }

  .layout {
    display: block;
    margin-top: 8px;
    padding-inline: 16px;
  }
  .lead-area { display: block; }
  .hero-card { min-height: 378px; border-radius: 8px; background-position: center; }
  .hero-card .label-red { top: 17px; left: 17px; font-size: 0; }
  .hero-card .label-red::before { content: "• "; font-size: 13px; }
  .hero-card .label-red::after { content: "LIVE"; font-size: 13px; }
  .hero-copy { left: 16px; right: 16px; bottom: 12px; }
  .hero-copy h1 { font-size: 28px; line-height: 1.28; }
  .hero-copy p { font-size: 15px; }
  .hero-copy small { font-size: 12px; }
  .mini-stories, .sidebar { display: none; }

  .quick-menu {
    margin-top: 10px;
    padding: 10px 5px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 2px 10px #0000000a;
  }
  .quick-menu button {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }
  .quick-menu i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff0f1;
    color: var(--red);
    font-size: 22px;
  }
  .quick-menu button:nth-child(2) i { color: #6d28d9; background: #f2eaff; }
  .quick-menu button:nth-child(3) i { color: #f97316; background: #fff1df; }
  .quick-menu button:nth-child(4) i { color: #2563eb; background: #eaf1ff; }
  .quick-menu button:nth-child(5) i { color: #16a34a; background: #eaf8ef; }

  .section-box {
    margin-top: 8px;
    padding: 9px 0;
    border: 0;
  }
  .section-head { border-bottom: 0; margin-bottom: 8px; }
  .section-head h2 { font-size: 20px; padding-bottom: 0; }
  .section-head h2::after { display: none; }
  .section-head a { font-size: 12px; }

  .city-tabs button { padding: 7px 18px; }
  .news-grid {
    display: flex;
    gap: 11px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .news-grid article {
    flex: 0 0 min(214px, 72vw);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 10px #0000000a;
  }
  .media img { height: 118px; border-radius: 0; }
  .news-grid h3 { margin: 9px 10px 2px; font-size: 14px; }
  .news-grid small { display: block; margin: 0 10px 10px; }

  .video-section, .gallery, .category-strip, footer { display: none; }
  .mobile-trending, .mobile-live { display: block; }
  .mobile-trend-layout { display: grid; grid-template-columns: 1fr 122px; gap: 12px; }
  .trend-row { grid-template-columns: 35px 1fr; margin: 10px 0; }
  .trend-row > span { width: 30px; height: 30px; font-size: 13px; }
  .trend-row p { font-size: 14px; }
  .trend-thumbs { display: flex; flex-direction: column; gap: 8px; }
  .trend-thumbs img { width: 100%; height: 52px; border-radius: 6px; object-fit: cover; }
  .update { grid-template-columns: 12px 78px 1fr; padding-block: 10px; }
  .update b { font-size: 13px; }
  .update p { font-size: 13px; }

  .mobile-bottom {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    height: 68px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--line);
    background: #fff;
  }
  .mobile-bottom a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #111;
    font-size: 11px;
    font-weight: 800;
  }
  .mobile-bottom i { font-size: 24px; }
  .mobile-bottom .active { color: var(--red-text); }
}

@media (max-width: 760px) {
  .page-title-band {
    min-height: 96px;
    padding: 16px 0;
  }
  .page-title-band h1 { font-size: 28px; }
  .page-title-band p { font-size: 14px; }
  .listing-layout { display: block; }
  .story-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 0 12px;
    overflow: hidden;
  }
  .story-row img {
    height: 205px;
    border-radius: 0;
  }
  .story-row div { padding-inline: 12px; }
  .story-row h2 { font-size: 20px; }
  .article-shell { padding-inline: 16px; }
  .article-tools {
    position: sticky;
    z-index: 30;
    top: 0;
    margin-inline: -16px;
    padding: 10px 16px;
    background: #fff;
    border-block: 1px solid var(--line);
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .article-tools button,
  .article-tools a {
    flex: 0 0 auto;
  }
  .article-hero { height: 270px; }
  .article-body { font-size: 17px; line-height: 1.75; }
  .media-page-grid,
  .paper-grid {
    grid-template-columns: 1fr;
  }
  .media-card img { height: 215px; }
  .live-feed-page { padding: 14px; }
  .live-feed-page .update {
    grid-template-columns: 12px 76px 1fr;
  }
  .live-feed-page .live-update-card.is-pinned,
  .live-feed-page .live-update-card.is-highlighted:not(.is-pinned) {
    margin-inline: 0;
  }
  .live-update-badges {
    margin-bottom: 3px;
  }
  .live-feed-page .update p { font-size: 14px; }
  .auth-wrap { min-height: 440px; padding-inline: 16px; }
  .native-ad {
    grid-template-columns: 1fr;
  }
  .native-ad img {
    width: 100%;
    height: 170px;
  }
  .native-ad button {
    width: 100%;
  }
  .requirement-strip {
    grid-template-columns: 1fr;
  }
  .control-bar,
  .dashboard-grid,
  .builder-layout,
  .seat-grid,
  .plan-grid {
    grid-template-columns: 1fr;
  }
  .data-panel {
    overflow-x: auto;
  }
  .data-table {
    min-width: 720px;
  }
}

@media (max-width: 420px) {
  .brand-logo { height: 52px; max-width: min(88px, 30vw); }
  .hero-card { min-height: 355px; }
  .hero-copy h1 { font-size: 23px; }
  .hero-copy p { font-size: 13px; }
  .quick-menu i { width: 36px; height: 36px; font-size: 19px; }
  .quick-menu button { font-size: 9px; }
  .news-grid article { flex-basis: 190px; }
}

/* Shared public news footer. */
footer.news-footer { display:block; margin-top:28px; padding:40px 0 0; background:#071d2c; color:#d3dce3; border-top:4px solid var(--red); font-family:'Noto Sans Devanagari',sans-serif; }
.news-footer-grid { display:grid; grid-template-columns:1.1fr 1.4fr .8fr 1.2fr; gap:40px; align-items:start; padding-bottom:32px; }
.news-footer-grid.has-static-pages { grid-template-columns:minmax(150px,1fr) minmax(210px,1.35fr) minmax(105px,.7fr) minmax(125px,.75fr) minmax(240px,1.25fr); gap:28px; }
.news-footer-brand img { display:block; width:150px; height:auto; background:#fff; border-radius:8px; padding:8px; }
.news-footer p { font-size:13px; line-height:1.9; color:#aebec9; margin:16px 0; }
.news-footer h2 { color:white; font-size:16px; margin:0 0 18px; font-weight:700; }
.news-footer-links > a, .news-footer-categories a { display:block; padding:5px 0; font-size:13px; line-height:1.7; color:#d3dce3; }
.news-footer-categories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 18px; }
.news-footer a:hover { color:#fff; text-decoration:underline; text-underline-offset:4px; }
.news-footer a:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.news-footer-newsletter > i { display:block; color:#ff4651; font-size:26px; margin-bottom:10px; }
.news-footer-newsletter .red-btn { display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:12px 18px; min-height:44px; font-size:13px; color:#fff; }
.news-footer-contact { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:6px; }
.news-footer-contact li { display:flex; align-items:center; gap:8px; font-size:13px; color:#aebec9; }
.news-footer-contact a { color:#d3dce3; }
.news-footer-social { display:flex; gap:10px; }
.news-footer-social a { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#ffffff14; color:#d3dce3; font-size:15px; }
.news-footer-social a:hover { background:var(--red); color:#fff; text-decoration:none; }
.news-footer-bottom { border-top:1px solid #ffffff20; display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:18px; padding-bottom:18px; font-size:12px; color:#aebec9; }
@media(max-width:1180px) { .news-footer-grid.has-static-pages { grid-template-columns:1.1fr 1.2fr .85fr; gap:28px; } .news-footer-grid.has-static-pages .news-footer-newsletter { grid-column:span 2; } }
@media(max-width:1000px) { .news-footer-grid, .news-footer-grid.has-static-pages { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } .news-footer-grid.has-static-pages .news-footer-newsletter { grid-column:auto; } }
@media(max-width:540px) { footer.news-footer { padding-top:28px; } .news-footer-grid, .news-footer-grid.has-static-pages { grid-template-columns:1fr; gap:28px 20px; } .news-footer-brand, .news-footer-newsletter, .news-footer-grid.has-static-pages .news-footer-newsletter { grid-column:1/-1; } .news-footer-categories { grid-template-columns:1fr; } .news-footer-bottom { flex-direction:column; align-items:flex-start; line-height:1.8; } }

/* Shared secondary-page foundation: breadcrumb, pagination, real ad slot, category page.
   Reference implementation: Category page. Reused by Topic/Location/Search/etc. as they're migrated. */
.breadcrumb-trail { padding-top:18px; }
.breadcrumb-trail ol { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0; font-size:13px; color:var(--muted); }
.breadcrumb-trail li { display:flex; align-items:center; gap:6px; }
.breadcrumb-trail li:not(:last-child)::after { content:'/'; color:#c7ccd4; }
.breadcrumb-trail a { color:var(--muted); font-weight:600; }
.breadcrumb-trail a:hover { color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.breadcrumb-trail li:last-child span { color:var(--ink); font-weight:700; }

.page-title-band.category-title-band { padding:20px 0 8px; }
.category-heading { padding-top:8px; }
.category-heading h1 { margin:0 0 8px; font-size:30px; font-weight:900; }
.category-heading p { margin:0; color:var(--muted); font-size:14px; line-height:1.7; max-width:760px; }
.category-heading + .category-pagination,
.category-heading + nav[aria-label="Child locations"] { margin-top:18px; }

.page-pagination { display:flex; align-items:center; justify-content:center; gap:16px; margin:32px 0; }
.page-pagination .outline-btn { min-width:96px; height:40px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.page-pagination .is-disabled { opacity:.4; pointer-events:none; }
.page-pagination-status { font-size:13px; font-weight:700; color:var(--muted); }

.public-ad-slot { margin:16px auto; text-align:center; }
.public-ad-slot .ad-label { display:block; text-align:center; color:#77818e; font-size:10px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.public-ad-slot .ad-banner { display:block; }
.public-ad-slot img { display:block; max-width:100%; height:auto; margin:auto; }
.public-ad-slot iframe { display:block; border:0; width:100%; margin:auto; }
.public-ad-slot a { color:inherit; }
.public-ad-slot .ad-caption { text-align:center; padding:8px 10px 0; }
.public-ad-slot .ad-caption strong { display:block; font-size:14px; margin-bottom:2px; }
.public-ad-slot .ad-caption p { margin:0 0 6px; font-size:12px; color:#555; }
.public-ad-slot .ad-cta { display:inline-block; background:var(--red); color:#fff; font-size:12px; font-weight:600; padding:6px 18px; border-radius:20px; margin-top:2px; }

.category-article-card { transition:box-shadow .15s, border-color .15s; }
.category-article-card:hover { border-color:#d8dde3; box-shadow:0 6px 20px rgba(15,23,42,.06); }
.category-article-card h3 { font-size:17px; line-height:1.5; }
.category-article-card h3 a:hover { color:var(--red); }
.category-article-card p { margin:0 0 10px; font-size:13px; line-height:1.7; color:var(--muted); }
.category-article-card time { display:block; }
.sponsored-label { display:block; color:#a15c00; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px; }
/* Dark surfaces: the light amber used by the Partner Content page (#a15c00 is ~3.3:1 on the dark cards). */
html[data-theme="dark"] .sponsored-label, html[data-theme="dark"] .news-inner .category-article-card small.sponsored-label { color: #f8c77a; }
.category-empty-state { grid-column:1/-1; padding:48px 20px; text-align:center; color:var(--muted); background:var(--soft); border-radius:12px; }

@media(max-width:767px) {
  .category-heading h1 { font-size:24px; }
  .page-pagination { gap:10px; }
  .page-pagination .outline-btn { min-width:80px; }
}

/* Article Detail taxonomy chips (Category/Topic/Tag) — Article Detail reference. */
.article-taxonomy { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 20px; }
.article-chip { display:inline-flex; align-items:center; padding:6px 14px; border-radius:20px; font-size:12px; font-weight:700; }
.article-chip-category { background:var(--red); color:#fff; }
.article-chip-topic { background:var(--soft); color:var(--ink); border:1px solid var(--line); }
.article-chip-topic:hover { border-color:var(--red); color:var(--red); }
.article-chip-tag { color:var(--muted); font-weight:600; padding:6px 4px; }
.article-chip-tag:hover { color:var(--red); }

/* Shared masthead — ports Homepage.vue's header design onto Blade inner pages so both
   share one visual header instead of two independently maintained designs. */
.news-masthead { font-family: 'Noto Sans Devanagari', sans-serif; border-top: 3px solid var(--red); }
.masthead-top { background: #f6f7f9; border-bottom: 1px solid #e8ebef; }
.masthead-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.masthead-date { color: #616b78; font-size: 11px; }
.masthead-date span { margin: 0 10px; color: #b4bbc5; }
.masthead-utilities { display: flex; gap: 20px; font-size: 11px; font-weight: 600; }
.masthead-utilities a:hover { color: var(--red); }
.news-masthead .header-grid { display: flex; align-items: center; min-height: 112px; gap: 28px; padding-top: 10px; padding-bottom: 10px; }
.news-masthead .brand { min-width: 0; flex: 0 0 auto; margin-right: 8px; }
.news-masthead .brand-logo { height: 88px; max-width: 150px; }
.news-masthead .location-picker { width: 200px; flex: 0 0 200px; }
.news-masthead .legacy-location-picker { display: none; }
.news-masthead .weather-mini { width: auto; gap: 8px; }
.news-masthead .weather-mini b { font-size: 21px; }
.news-masthead .weather-mini span { font-size: 11px; }
.news-masthead .header-actions { margin-left: auto; gap: 10px; }
.news-masthead .header-actions > a { min-width: 104px; height: 42px; font-size: 13px; padding: 0 16px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.news-masthead .header-actions .icon-btn { font-size: 22px; border: 1px solid #e3e7ec; margin-right: 4px; }
@media (max-width: 1100px) {
  .news-masthead .header-grid { gap: 18px; }
  .news-masthead .weather-mini span { display: none; }
}
@media (max-width: 760px) {
  .masthead-utilities { display: none; }
  .masthead-top-inner { justify-content: center; min-height: 28px; }
  .masthead-date { font-size: 10px; }
  .news-masthead .header-grid { min-height: 0; gap: 10px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 0; }
  .news-masthead .brand { flex: 1; margin: 0; justify-content: center; }
  .news-masthead .brand-logo { height: 58px; max-width: 100px; }
  .news-masthead .location-picker { flex: 0 0 100%; width: 100%; order: 10; }
  .news-masthead .weather-mini { display: none; }
  .news-masthead .mobile-icons { gap: 12px; align-items: center; }
  .news-masthead .mobile-icons .icon-btn { font-size: 20px; width: 28px; height: 32px; }
  .news-masthead .mobile-icons > a:first-of-type { display: none; }
}

/* District picker: the ONE stylesheet for both the homepage (Public/LocationPicker.vue) and the Blade header
   (partials/header.blade.php) - same class names, theme tokens only, so light and dark render identically everywhere. */
.location-picker { position: relative; min-width: 0; width: 100%; z-index: 60; font-family: 'Noto Sans Devanagari', sans-serif; }
.location-trigger { display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 12px; background:var(--card-bg); border:1px solid var(--line); border-radius:10px; cursor:pointer; list-style:none; color:var(--ink); }
.location-trigger::-webkit-details-marker { display:none; }
.location-trigger > i:first-child { color:var(--red); font-size:21px; }
.location-trigger span { display:grid; gap:3px; flex:1; min-width:0; }
.location-trigger small { font-size:10px; color:var(--muted); }
.location-trigger b { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picker-chevron { font-size:11px; transition:transform .15s; }
.location-picker[open] .picker-chevron { transform:rotate(180deg); }
.location-picker[open] .location-trigger { border-color:var(--red); background:rgba(213, 42, 49, .06); }
.location-panel { position:absolute; top:calc(100% + 12px); left:0; z-index:70; width:min(440px, calc(100vw - 32px)); padding:20px; background:var(--card-bg); color:var(--ink); border:1px solid var(--line); border-top:3px solid var(--red); border-radius:12px; box-shadow:0 16px 48px rgba(20, 34, 53, .15); }
.location-panel-heading strong { font-size:17px; color:var(--ink); }
.location-panel-heading p { margin:6px 0 16px; font-size:12px; color:var(--muted); }
.location-search { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--soft); color:var(--muted); }
.location-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:13px; }
.location-search input::placeholder { color:var(--muted); opacity:1; }
.location-search:focus-within { outline:2px solid var(--red); outline-offset:2px; }
.location-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:280px; overflow-y:auto; overscroll-behavior:contain; margin-top:14px; padding:2px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.location-results::-webkit-scrollbar { width:8px; }
.location-results::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; }
.location-results a { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:11px 10px; border-radius:6px; color:var(--ink); font-size:13px; text-decoration:none; }
.location-results a span { color:var(--muted); }
.location-results a:hover, .location-results a[aria-current="page"] { background:rgba(213, 42, 49, .08); color:var(--red-dark); }
html[data-theme="dark"] .location-results a:hover, html[data-theme="dark"] .location-results a[aria-current="page"] { color:var(--red-text); }
.location-results a[aria-current="page"] { font-weight:700; }
.location-results a:hover span { color:inherit; }
.location-step { display:grid; gap:8px; }
.location-step + .location-step { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.location-step-label { font-size:12px; font-weight:700; color:var(--muted); }
.location-state-option { display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; padding:11px 10px; border:0; border-radius:6px; background:transparent; color:var(--ink); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.location-state-option:hover, .location-state-option[aria-current="true"] { background:rgba(213, 42, 49, .08); color:var(--red-dark); }
.location-state-option[aria-current="true"] { font-weight:700; }
.location-state-link { color:var(--red-text); font-size:12px; font-weight:700; text-decoration:underline; }
.location-trigger:focus-visible, .location-results a:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.location-empty { grid-column:1/-1; padding:20px 0; font-size:13px; color:var(--muted); }
html[data-theme="dark"] .location-panel { box-shadow:0 16px 48px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .location-results a:hover, html[data-theme="dark"] .location-results a[aria-current="page"] { background:rgba(255, 123, 131, .12); }
@media(max-width: 760px) {
  .location-picker { flex:0 0 100%; order:10; margin-bottom:10px; }
  .location-trigger { min-height:44px; }
  .location-trigger span { display:flex; align-items:center; gap:12px; }
  .location-panel { width:100%; box-sizing:border-box; }
  .location-results { max-height:240px; }
}

/* Inline search bar (matches Homepage.vue's .homepage-search toggle exactly). */
.homepage-search { display: flex; gap: 12px; padding: 16px; }
.homepage-search[hidden], .weather-mini[hidden], .location-results a[hidden] { display: none; }
.homepage-search input { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 6px; }

/* Public reader flows and CMS management. */
.platform-form{display:grid;gap:16px;max-width:580px;margin:24px 0}.platform-form label{display:grid;gap:6px;font-weight:600}.platform-form input:not([type=checkbox]),.platform-form select,.platform-form textarea{width:100%;padding:12px;border:1px solid #d6dbe2;border-radius:6px;font:inherit}.platform-form textarea{min-height:110px}.platform-links{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:20px 0}.platform-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px;margin:24px 0}.platform-error{padding:14px;background:#fff0f0;color:#a30013}.platform-success{padding:14px;background:#edf9f1;color:#126132}.platform-notice{padding:14px;background:#fff5da;color:#714600}.platform-table{overflow-x:auto;margin:24px 0}.platform-table table{min-width:620px}.inner-page button:disabled{opacity:.55;cursor:wait}.category-article-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.inner-page .panel{margin-bottom:16px}.platform-links button,.inner-page .panel button{padding:8px 12px;border:1px solid #d6dbe2;border-radius:6px;cursor:pointer}.platform-form button{justify-self:start}

/* Footer newsletter signup */
.newsletter-form { display: grid; gap: 8px; margin-top: 12px; }
.newsletter-form input[type="email"] { width: 100%; padding: 10px 12px; border: 1px solid #d6dbe2; border-radius: 6px; font: inherit; color: #17212c; background: #fff; box-sizing: border-box; }
.newsletter-form .red-btn { border: 0; cursor: pointer; padding: 10px 14px; border-radius: 6px; font: inherit; font-weight: 700; }
.newsletter-form .red-btn:disabled { opacity: .6; cursor: wait; }
.newsletter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.newsletter-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.newsletter-status { margin: 0; min-height: 1.2em; font-size: 13px; line-height: 1.5; color: inherit; }

/* Homepage final polish: denser editorial rhythm and production-ready public surface. */
:root { --shell: 1360px; }

body {
  background:
    linear-gradient(180deg, #fff 0, #fff 190px, #f7f8fa 190px, #f7f8fa 100%);
}

.layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.content,
.sidebar { min-width: 0; }

.sidebar {
  position: sticky;
  top: 12px;
  gap: 14px;
}

.section-box,
.panel,
.requirement-card {
  border-color: #e1e5ea;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}

.section-box {
  margin-top: 14px;
  padding: 16px;
}

.section-head {
  min-height: 34px;
  margin-bottom: 14px;
}

.section-head h2 { font-size: 20px; }
.section-head a { color: var(--red); }

.hero-card {
  min-height: 365px;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}

.hero-card::after {
  background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.1) 34%, rgba(0,0,0,.9) 100%);
}

.hero-copy {
  left: 22px;
  right: 22px;
  bottom: 18px;
}

.hero-copy h1 {
  max-width: 850px;
  font-size: clamp(30px, 2.5vw, 42px);
}

.hero-copy p {
  max-width: 760px;
  color: #f3f4f6;
}

.category-article-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.category-article-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e5e9ef;
  border-radius: 8px;
  background: #fff;
}

.category-article-card > a { display: block; }

.category-article-card img {
  margin: 0;
  border-radius: 0;
  background: #eef1f4;
}

.category-article-card h3 {
  margin: 10px 12px 6px;
  display: -webkit-box;
  min-height: 48px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 16px;
  line-height: 1.45;
}

.category-article-card p {
  margin: 0 12px 10px;
  display: -webkit-box;
  min-height: 39px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.5;
}

.category-article-card > small,
.category-article-card .sponsored-label {
  margin: 0 12px 12px;
}

.latest-news-section .category-article-card:first-child,
.top-stories-section .category-article-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.latest-news-section .category-article-card:first-child h3,
.top-stories-section .category-article-card:first-child h3 {
  min-height: 0;
  font-size: 22px;
  line-height: 1.35;
  -webkit-line-clamp: 3;
}

.latest-news-section .category-article-card:first-child p,
.top-stories-section .category-article-card:first-child p {
  -webkit-line-clamp: 3;
}

.homepage-trending-grid { gap: 0 18px; }
.homepage-trending-grid > a { padding: 14px 0; }
.homepage-trending-grid h3 { font-size: 16px; line-height: 1.45; }

.video-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.video-grid article > a > div {
  height: auto;
  aspect-ratio: 9 / 14;
  border-radius: 8px;
  overflow: hidden;
  background: #0f172a;
}

.video-grid p,
.gallery-grid p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.gallery .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.gallery-grid img,
.gallery .gallery-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

.public-ad-slot,
.ad-slot,
.native-ad { background: #fff; }

.short-news-panel article,
.most-read-panel li {
  padding: 10px 0;
  border-bottom: 1px solid #edf0f3;
}

.short-news-panel article:last-child,
.most-read-panel li:last-child { border-bottom: 0; }

.short-news-panel a,
.most-read-panel a {
  font-weight: 900;
  line-height: 1.45;
}

.short-news-panel p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.most-read-panel ol {
  margin: 0;
  padding-left: 22px;
}

.weather-panel,
.epaper-panel,
.live-panel { padding: 16px; }

.paper-preview { min-height: 154px; }

.topics,
.requirement-strip { margin-top: 16px; }

.requirement-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.requirement-card { min-height: 118px; }
footer.news-footer { margin-top: 34px; }

@media (max-width: 1220px) {
  .layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .category-article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-grid,
  .gallery .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sidebar > * { min-width: 0; }
}

@media (max-width: 760px) {
  body { background: #f7f8fa; }
  .layout {
    gap: 12px;
    margin-top: 10px;
  }
  .section-box {
    padding: 13px;
    margin-top: 12px;
  }
  .hero-card { min-height: 330px; }
  .hero-copy {
    left: 16px;
    right: 16px;
    bottom: 14px;
  }
  .hero-copy h1 { font-size: 25px; }
  .category-article-grid,
  .sidebar,
  .requirement-strip { grid-template-columns: 1fr; }
  .latest-news-section .category-article-card:first-child,
  .top-stories-section .category-article-card:first-child {
    grid-column: auto;
    grid-row: auto;
  }
  .video-grid,
  .gallery .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Public shell — approved Marwar Dainik mockup.
   Masthead, navy navigation, breaking strip and footer shared by the Vue homepage
   (resources/js/Public/Homepage.vue) and the Blade inner pages (partials/header|footer).
   Surfaces use theme tokens so the automatic dark theme never puts light text on white.
   ========================================================================== */
/* Shared public shell — the one outer content width for the homepage and every inner page (masthead, nav,
   breadcrumb, main, newsletter, footer). Phones: 16px gutters. Tablet/desktop: 24px up to 1440px, easing to
   40px on very wide screens, content capped at 1760px and centred. Pages narrow their own reading column
   inside the shell; they never resize the shell itself. */
:root { --shell: 1760px; --shell-gutter: clamp(24px, 2.5vw - 12px, 40px); --page: #ffffff; --header-bg: #ffffff; --strip-bg: #ffffff; --nav-bg: #0b1f33; }
@media (max-width: 760px) { :root { --shell-gutter: 16px; } }
@media (min-width: 761px) { .page-shell { width: min(100% - 2 * var(--shell-gutter), var(--shell)); } }
html[data-theme="dark"] { --page: #0b1016; --header-bg: #111823; --strip-bg: #0d141d; --nav-bg: #060d16; }

.news-masthead { position: relative; z-index: 70; border-top: 3px solid var(--red); border-bottom: 0; background: var(--header-bg); box-shadow: none; color: var(--ink); font-family: 'Noto Sans Devanagari', 'Nirmala UI', sans-serif; }
.news-masthead .masthead-top { border-bottom: 1px solid var(--line); background: var(--strip-bg); }
.news-masthead .masthead-top-inner { min-height: 32px; gap: 16px; }
.news-masthead .masthead-date { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.news-masthead .masthead-date span { margin: 0 4px; color: var(--line); }
.masthead-market-rates { display: flex; flex: 1 1 auto; align-items: center; justify-content: safe center; gap: 10px; min-width: 0; overflow-x: auto; scrollbar-width: none; color: var(--muted); font-size: 10px; line-height: 1.2; white-space: nowrap; }
.masthead-market-rates::-webkit-scrollbar { display: none; }
.masthead-market-rates > span { display: inline-flex; flex: none; align-items: baseline; gap: 4px; min-width: 0; }
.masthead-market-rates i { color: var(--red); font-size: 11px; }
.masthead-market-rates b { color: var(--ink); font-weight: 700; }
.masthead-market-rates strong { color: var(--ink); font-size: 11px; font-weight: 800; }
.masthead-market-rates small { color: var(--muted); font-size: 9px; }
.masthead-market-rates em { flex: none; padding-left: 8px; border-left: 1px solid var(--line); color: var(--muted); font-size: 9px; font-style: normal; }
.masthead-top-end { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; }
.news-masthead .masthead-utilities { display: flex; align-items: center; gap: 0; font-size: 12px; font-weight: 600; }
.news-masthead .masthead-utilities > a { padding: 0 10px; border-left: 1px solid var(--line); color: var(--ink); }
.news-masthead .masthead-utilities > a:first-child { border-left: 0; }
.news-masthead .masthead-utilities > a:hover { color: var(--red); }
/* Social icons: one compact group, centred on the utility row; each glyph centred in its circle (Bootstrap
   Icons' baseline offset would otherwise drop it slightly). */
.masthead-social { display: flex; flex: none; align-items: center; align-self: center; gap: 6px; line-height: 1; }
.masthead-social a { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--nav-bg); color: #fff; font-size: 11px; line-height: 1; }
.masthead-social a i, .masthead-social a i::before { display: block; line-height: 1; vertical-align: 0; }
.masthead-social a:hover { background: var(--red); }
.news-masthead .language-selector { border-color: var(--line); background: var(--card-bg); color: var(--ink); }

.news-masthead .header-grid { display: flex; align-items: center; gap: 20px; min-height: 72px; padding-top: 8px; padding-bottom: 8px; border-bottom: 0; }
.news-masthead .brand { flex: 0 0 auto; min-width: 0; margin: 0; }
.news-masthead .brand-logo { height: 56px; max-width: 110px; }
.news-masthead .location-picker { flex: 0 0 190px; width: 190px; }
.news-masthead .location-trigger { min-height: 46px; border-color: var(--line); border-radius: 8px; background: var(--card-bg); color: var(--ink); }
.news-masthead .weather-mini { display: flex; align-items: center; gap: 8px; width: auto; color: var(--muted); font-size: 11px; }
.news-masthead .weather-mini img { width: 40px; height: 40px; }
.news-masthead .weather-mini b { color: var(--ink); font-size: 22px; font-weight: 800; }
.news-masthead .weather-mini span { display: block; color: var(--muted); font-size: 11px; line-height: 1.45; }
.news-masthead .weather-mini em { display: inline-block; margin-top: 2px; padding: 0 5px; border-radius: 3px; background: var(--soft); color: var(--ink); font-size: 10px; font-style: normal; font-weight: 700; }
.news-masthead .weather-mini[hidden] { display: none; }
.header-search { display: flex; flex: 1 1 240px; align-items: center; max-width: 380px; height: 42px; margin-left: auto; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--card-bg); }
.header-search input { flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
.header-search button { display: grid; place-items: center; width: 44px; height: 100%; color: var(--ink); font-size: 16px; }
.header-search button:hover { color: var(--red); }
.header-search:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(213, 42, 49, .12); }
.news-masthead .header-actions { gap: 8px; margin-left: 0; }
.news-masthead .header-actions > a { min-width: 92px; height: 40px; padding: 0 14px; border-radius: 6px; font-size: 13px; font-weight: 700; }
.news-masthead .header-actions > .outline-btn { border-color: var(--line); background: var(--card-bg); color: var(--ink); }
.news-masthead .header-actions .icon-btn { border: 1px solid var(--line); color: var(--ink); font-size: 18px; }
.news-masthead .menu-btn, .news-masthead .mobile-icons { color: var(--ink); }
/* The mockup opens the full section menu from a ☰ beside the logo on desktop too. */
.news-masthead .menu-btn { display: grid; flex: none; width: 36px; height: 36px; margin-right: -8px; font-size: 26px; }

/* Primary navigation: dark band with red active item; dropdowns stay light. */
nav.category-navigation { position: relative; z-index: 60; border: 0; background: var(--nav-bg); }
.category-navigation .category-nav-row { align-items: center; min-height: 44px; }
.category-navigation.is-home-nav .category-nav-primary { flex: 0 1 auto; flex-wrap: nowrap; }
.category-navigation .category-nav-primary > .category-nav-node > a,
.category-navigation .category-nav-primary > .category-nav-node > details > summary,
.category-navigation .category-nav-more > summary { padding: 12px 13px; color: #fff; font-size: 14px; font-weight: 600; }
.category-navigation .category-nav-primary > .category-nav-node > a:hover,
.category-navigation .category-nav-primary > .category-nav-node > details > summary:hover,
.category-navigation .category-nav-more > summary:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.category-navigation .category-nav-primary > .category-nav-node > a.is-active,
.category-navigation .category-nav-primary > .category-nav-node.has-active > details > summary,
.category-navigation.is-home-nav .category-nav-primary > .category-nav-node:first-child > a { background: var(--red); color: #fff; }
.category-navigation .category-submenu { padding: 6px 0; border-color: var(--line); background: var(--card-bg); }
.category-navigation .category-submenu a,
.category-navigation .category-submenu summary { padding: 9px 16px; color: var(--ink); font-size: 14px; font-weight: 500; }
.category-navigation .category-submenu a:hover,
.category-navigation .category-submenu summary:hover { background: var(--soft); color: var(--red); }
/* Dropdown items ("राजस्थान", "और", nested groups): label and chevron share one centred line with a small fixed
   gap. The icon-font chevron replaces the text glyph "⌄", which sat on the baseline below the label's centre. */
.category-navigation .category-nav-node summary,
.category-navigation .category-nav-more > summary { display: flex; align-items: center; gap: 6px; }
.category-navigation .category-nav-node summary::after,
.category-navigation .category-nav-more > summary::after { content: "\F282"; margin: 0; font-family: bootstrap-icons; font-size: 10px; font-weight: 400; line-height: 1; }
.nav-live-cta { display: inline-flex; flex: none; align-items: center; gap: 7px; margin-left: auto; padding: 6px 12px; border-radius: 4px; background: var(--red); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.nav-live-cta:hover { background: var(--red-dark); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: live-dot-pulse 1.6s infinite; }
@keyframes live-dot-pulse { 70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.mobile-nav-strip { display: none; }
.category-mobile-nav { background: var(--card-bg); color: var(--ink); }
/* One header for every public page (client: "header same at all page, just can add additional item"): the homepage
   (Homepage.vue) and the Blade pages (partials/header.blade.php) share these rules; inner-pages.css no longer restyles it. */
.category-navigation .category-nav-primary { flex: 0 1 auto; flex-wrap: nowrap; }
.news-masthead .theme-toggle-btn { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-size: 13px; }
.news-masthead .theme-toggle-btn:hover { border-color: var(--red); color: var(--red); }
/* Header "Install App" (public/news/js/install-app.js): hidden unless the site can be installed right now (or on iOS,
   where it shows the Add to Home Screen steps); never shown inside the installed app. */
.install-app-btn { display: none; }
html[data-pwa-install="prompt"] .install-app-btn, html[data-pwa-install="ios"] .install-app-btn { display: inline-flex; }
.news-masthead .install-app-btn { flex: none; align-items: center; justify-content: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px solid var(--red); border-radius: 999px; background: transparent; color: var(--red-text); font: inherit; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; }
.news-masthead .install-app-btn:hover, .news-masthead .install-app-btn:focus-visible { background: var(--red); color: #fff; }
@media (max-width: 760px) {
  .news-masthead .install-app-btn { width: 26px; padding: 0; }
  .news-masthead .install-app-btn span { display: none; } /* icon only on phones; the aria-label keeps the name */
}
.install-help { width: min(360px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-bg); color: var(--ink); box-shadow: 0 18px 40px rgba(15, 23, 42, .25); }
.install-help::backdrop { background: rgba(15, 23, 42, .45); }
.install-help h2 { margin: 0 0 12px; font-size: 18px; line-height: 1.35; }
.install-help ol { margin: 0 0 18px; padding-left: 20px; line-height: 1.65; }
.install-help li + li { margin-top: 4px; }
.install-help form { margin: 0; text-align: right; }
.install-help button { min-height: 40px; padding: 8px 22px; border: 0; border-radius: 8px; background: var(--red); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.mobile-nav-strip .mobile-nav-more { display: none; }
.category-mobile-nav .drawer-nav a.is-active { border-left-color: var(--red); background: var(--soft); color: var(--red); }
@media (max-width: 767px) {
  .mobile-nav-strip { align-items: center; }
  .mobile-nav-strip a:not(.is-active) { background: none; }
  .mobile-nav-strip .mobile-nav-more { position: sticky; right: -12px; display: grid; flex: none; place-items: center; width: 34px; height: 30px; margin-left: auto; border: 0; background: var(--card-bg); box-shadow: -8px 0 8px var(--card-bg); color: var(--ink); font-size: 18px; }
}

/* Breaking news strip: a continuous right-to-left marquee. The track holds an even number of identical lists (all
   but the first aria-hidden), half of them at least as wide as the strip, so moving it by half (-50%) loops without
   a jump or a blank gap. Hover and the Pause button pause it; one headline stays still; reduced motion shows one
   static, swipeable list instead. */
.breaking-strip { height: 40px; margin-top: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--card-bg); box-shadow: none; }
.breaking-strip::after { content: none; }
.breaking-strip b { padding: 0 26px 0 14px; font-size: 13px; clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); }
.breaking-strip .ticker { display: flex; flex: 1; align-self: stretch; min-width: 0; padding: 0; overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent); }
.breaking-strip .ticker-track { display: flex; flex: none; animation: md-ticker var(--ticker-duration, 40s) linear infinite; }
.breaking-strip .ticker:hover .ticker-track, .breaking-strip .ticker:focus-within .ticker-track, .breaking-strip.is-paused .ticker-track { animation-play-state: paused; }
/* Keyboard focus stops it at the start instead, so the browser can scroll any focused headline into view (a paused,
   already-shifted track cannot scroll back). Pointer focus only pauses, so a link never moves under the cursor. */
.breaking-strip .ticker:has(a:focus-visible) .ticker-track { animation: none; }
.breaking-strip .ticker-list { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.breaking-strip .ticker-list li { display: flex; flex: none; align-items: center; }
.breaking-strip .ticker-list li::after { content: "•"; margin: 0 14px; color: var(--red); }
.breaking-strip .ticker a { padding: 0 2px; color: var(--ink); font-size: 13px; font-weight: 600; }
.breaking-strip .ticker a:hover, .breaking-strip .ticker a:focus-visible { color: var(--red-text); text-decoration: underline; }
.breaking-strip .ticker a:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.breaking-strip.is-static .ticker-track { flex: 0 1 auto; min-width: 0; padding-left: 12px; animation: none; }
.breaking-strip.is-static .ticker-list, .breaking-strip.is-static .ticker-list li { flex: 0 1 auto; min-width: 0; }
.breaking-strip.is-static .ticker-list li::after { content: none; }
.breaking-strip.is-static .ticker a { overflow: hidden; text-overflow: ellipsis; }
/* Pause / Play: a 28px control with a 38px hit area (fits the phone strip). */
.breaking-strip .ticker-toggle { position: relative; display: grid; flex: none; place-items: center; width: 28px; height: 28px; margin: 0 4px 0 6px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card-bg); color: var(--ink); font-size: 14px; line-height: 1; cursor: pointer; }
.breaking-strip .ticker-toggle::before { content: ""; position: absolute; inset: -5px; }
.breaking-strip .ticker-toggle:hover { border-color: var(--red-text); color: var(--red-text); }
.breaking-strip .ticker-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.breaking-strip .breaking-all { display: flex; flex: none; align-items: center; align-self: stretch; gap: 6px; padding: 0 12px; border-left: 1px solid var(--line); color: var(--red-text); font-size: 12px; font-weight: 700; }
.breaking-strip .breaking-all:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }
@keyframes md-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .breaking-strip .ticker-track { animation: none; }
  .breaking-strip .ticker { overflow-x: auto; scrollbar-width: none; }
  .breaking-strip .ticker::-webkit-scrollbar { display: none; }
  .breaking-strip .ticker-list[aria-hidden="true"], .breaking-strip .ticker-toggle { display: none; }
}

/* Footer: newsletter + follow band, then link columns. */
footer.news-footer { margin-top: 24px; padding: 0; border-top: 3px solid var(--red); background: #071a2b; }
.news-footer-band { border-bottom: 1px solid rgba(255, 255, 255, .1); background: #0b2238; }
.news-footer-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 22px; padding-bottom: 22px; }
.news-footer-band .news-footer-newsletter { display: flex; flex: 1 1 auto; align-items: center; gap: 16px; min-width: 0; }
.news-footer-band .news-footer-newsletter > i { margin: 0; color: #ff4651; font-size: 34px; }
.news-footer-band .news-footer-newsletter h2 { margin: 0 0 2px; }
.news-footer-band .news-footer-newsletter p { margin: 0; font-size: 12px; line-height: 1.6; }
.news-footer-band .newsletter-form { display: grid; grid-template-columns: minmax(180px, 280px) auto; flex: 0 1 auto; gap: 6px 0; margin: 0 0 0 auto; }
.news-footer-band .newsletter-form input[type="email"] { height: 42px; border: 0; border-radius: 6px 0 0 6px; }
.news-footer-band .newsletter-form .red-btn { min-width: 0; height: 42px; min-height: 0; gap: 8px; padding: 0 16px; border-radius: 0 6px 6px 0; white-space: nowrap; }
.news-footer-band .newsletter-status { grid-column: 1 / -1; min-height: 0; color: #d3dce3; font-size: 12px; }
.news-footer-band .newsletter-status:empty { display: none; }
.news-footer-follow { flex: none; }
.news-footer-follow h2 { margin: 0 0 8px; }
.news-footer .news-footer-grid { grid-template-columns: 1.2fr 1.6fr .9fr; gap: 32px; padding-top: 28px; padding-bottom: 24px; }
.news-footer .news-footer-grid.has-static-pages { grid-template-columns: 1.2fr 1.6fr .9fr 1fr; gap: 28px; }
.news-footer-brand img { width: 120px; }
.news-footer h2 { margin-bottom: 12px; font-size: 15px; }
.news-footer-links > a, .news-footer-categories a { padding: 3px 0; }

@media (max-width: 1199px) {
  .news-masthead .weather-mini { display: none; }
  .header-search { max-width: 300px; }
}
@media (max-width: 1000px) {
  .news-footer-band-inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .news-footer-band .news-footer-newsletter { flex-wrap: wrap; }
  .news-footer-band .newsletter-form { width: 100%; margin: 0; grid-template-columns: minmax(0, 1fr) auto; }
  .news-footer .news-footer-grid, .news-footer .news-footer-grid.has-static-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .mobile-nav-strip { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--card-bg); scrollbar-width: none; }
  .mobile-nav-strip::-webkit-scrollbar { display: none; }
  .mobile-nav-strip a { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.3; }
  .mobile-nav-strip a.is-active { background: var(--red); color: #fff; }
}
@media (max-width: 760px) {
  .news-masthead { position: sticky; top: 0; box-shadow: 0 2px 10px rgba(15, 23, 42, .08); }
  .news-masthead .masthead-top-inner { flex-wrap: wrap; justify-content: space-between; min-height: 28px; padding-inline: var(--shell-gutter); }
  .news-masthead .masthead-date { font-size: 10.5px; }
  .news-masthead .masthead-top-end { order: 2; margin-left: auto; }
  .news-masthead .masthead-market-rates { order: 3; flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-start; gap: 4px 8px; overflow-x: visible; padding: 3px 0 4px; }
  .news-masthead .masthead-market-rates::-webkit-scrollbar { display: none; }
  .news-masthead .masthead-market-rates > span { flex: none; }
  .news-masthead .masthead-market-rates em { flex-basis: 100%; padding-left: 0; border-left: 0; }
  .news-masthead .masthead-date i, .masthead-social, .news-masthead .masthead-utilities { display: none; }
  .news-masthead .header-grid { flex-wrap: nowrap; gap: 8px; min-height: 60px; padding: 6px var(--shell-gutter); }
  .news-masthead .menu-btn { flex: none; width: 36px; height: 36px; font-size: 24px; }
  .news-masthead .brand { flex: 0 0 auto; justify-content: flex-start; }
  .news-masthead .brand-logo { height: 48px; max-width: 76px; }
  .news-masthead .location-picker { position: static; flex: 0 1 auto; order: 0; width: auto; min-width: 0; margin: 0 auto 0 0; }
  .news-masthead .location-trigger { gap: 5px; min-height: 34px; padding: 4px 8px; border-radius: 999px; }
  .news-masthead .location-trigger > i:first-child { font-size: 15px; }
  .news-masthead .location-trigger small { display: none; }
  .news-masthead .location-trigger b { max-width: 92px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .news-masthead .location-panel { left: 12px; right: 12px; width: auto; top: calc(100% - 2px); }
  .header-search { display: none; }
  .news-masthead .mobile-icons { flex: none; gap: 4px; }
  .news-masthead .mobile-icons .icon-btn, .news-masthead .mobile-icons > a { display: grid; place-items: center; width: 34px; height: 34px; font-size: 20px; }
  .breaking-strip { width: calc(100% - 24px); height: 38px; margin: 10px 12px 0; }
  .breaking-strip b { padding-left: 10px; padding-right: 20px; font-size: 12px; }
  .breaking-strip .ticker { font-size: 12px; }
  .breaking-strip .ticker a { font-size: 12.5px; }
  /* Phones keep All Short News as an icon link; its text stays as the accessible name. */
  .breaking-strip .breaking-all { justify-content: center; min-width: 44px; padding: 0; font-size: 16px; }
  .breaking-strip .breaking-all-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mobile-bottom { height: 62px; border-top-color: var(--line); background: var(--card-bg); box-shadow: 0 -2px 10px rgba(15, 23, 42, .06); }
  .mobile-bottom a, .mobile-bottom button { color: var(--ink); }
  .mobile-bottom i { font-size: 21px; }
  .mobile-bottom .active { color: var(--red-text); }
  footer.news-footer { padding-bottom: 8px; }
  .news-footer-band .newsletter-form { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .news-footer-band .newsletter-form input[type="email"], .news-footer-band .newsletter-form .red-btn { border-radius: 6px; }
  .news-footer .news-footer-grid, .news-footer .news-footer-grid.has-static-pages { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* ==========================================================================
   Structural fidelity pass — denser newspaper shell (approved client mockup).
   ========================================================================== */
/* Canvas: 20px gutters at 1440px (1400px of editorial width), 16px from 1280px down, easing to 40px on
   very wide screens; still capped by --shell. */
:root { --shell-gutter: clamp(16px, 2.5vw - 16px, 40px); }
@media (max-width: 760px) { :root { --shell-gutter: 16px; } }

/* Compact masthead: one tight utility strip, a 64px brand row. */
.news-masthead .masthead-top-inner { min-height: 30px; }
.news-masthead .header-grid { gap: 18px; min-height: 64px; padding-top: 6px; padding-bottom: 6px; }
.news-masthead .brand-logo { height: 52px; }
.news-masthead .location-trigger { min-height: 42px; }
.header-search { height: 40px; max-width: 420px; }
.news-masthead .header-actions > a { height: 38px; }
.category-navigation .category-nav-row { min-height: 42px; }
.category-navigation .category-nav-primary > .category-nav-node > a,
.category-navigation .category-nav-primary > .category-nav-node > details > summary,
.category-navigation .category-nav-more > summary { padding: 11px 13px; }
.breaking-strip { height: 36px; margin-top: 10px; }

/* Section drawer (☰ and the phone "मेन्यू" tab): a compact left panel with brand header and a small close. */
dialog.category-mobile-nav { width: min(320px, 86vw); padding: 0; border: 0; border-right: 1px solid var(--line); background: var(--card-bg); color: var(--ink); box-shadow: 8px 0 30px rgba(15, 23, 42, .18); }
.category-mobile-nav::backdrop { background: rgba(8, 15, 26, .55); }
.category-mobile-nav[open] { animation: drawer-in .18s ease-out; }
@keyframes drawer-in { from { transform: translateX(-24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .category-mobile-nav[open] { animation: none; } }
.category-mobile-nav .drawer-panel { min-height: 100%; }
.category-mobile-nav .drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-top: 3px solid var(--red); border-bottom: 1px solid var(--line); background: var(--card-bg); }
.category-mobile-nav .drawer-brand { margin-right: auto; }
.category-mobile-nav .drawer-brand img { height: 40px; width: auto; max-width: 120px; object-fit: contain; }
.category-mobile-nav .drawer-head .language-selector { height: 30px; font-size: 12px; }
.category-mobile-nav .drawer-head form { margin: 0; }
.category-mobile-nav .drawer-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card-bg); color: var(--ink); font-size: 14px; cursor: pointer; }
.category-mobile-nav .drawer-close:hover, .category-mobile-nav .drawer-close:focus-visible { border-color: var(--red); color: var(--red); }
.category-mobile-nav .drawer-close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.category-mobile-nav .drawer-nav { padding: 6px 0 16px; }
.category-mobile-nav .drawer-nav .category-nav-node a,
.category-mobile-nav .drawer-nav .category-nav-node summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-left: 3px solid transparent; color: var(--ink); font-size: 14.5px; font-weight: 600; white-space: normal; }
.category-mobile-nav .drawer-nav > .category-nav-node { border-bottom: 1px solid var(--line); }
.category-mobile-nav .drawer-nav .category-nav-node summary::after { content: "\F282"; margin-left: 8px; font-family: bootstrap-icons; font-size: 11px; color: var(--muted); transition: transform .15s; }
.category-mobile-nav .drawer-nav details[open] > summary::after { transform: rotate(180deg); }
.category-mobile-nav .drawer-nav .category-nav-node a:hover,
.category-mobile-nav .drawer-nav .category-nav-node summary:hover { background: var(--soft); color: var(--red); }
.category-mobile-nav .drawer-nav .category-nav-node a:focus-visible,
.category-mobile-nav .drawer-nav .category-nav-node summary:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.category-mobile-nav .drawer-nav a.is-active,
.category-mobile-nav .drawer-nav.is-home-drawer > .category-nav-node:first-child > a { border-left-color: var(--red); background: var(--soft); color: var(--red); }
/* Child sections (e.g. Rajasthan districts): an indented two-column list, no floating card. */
.category-mobile-nav .drawer-nav .category-submenu { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; margin: 0 0 8px; padding: 0 12px 0 16px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.category-mobile-nav .drawer-nav .category-submenu > a:first-child { grid-column: 1 / -1; color: var(--red); font-size: 13px; }
.category-mobile-nav .drawer-nav .category-submenu a,
.category-mobile-nav .drawer-nav .category-submenu summary { padding: 7px 8px; border-left: 0; font-size: 13px; font-weight: 500; }
.category-mobile-nav .drawer-nav .category-submenu .category-nav-node { border: 0; }

/* Inner (Blade) pages use exactly the homepage header: no inner-page header overrides (client: "header same at all
   page"). On phones every page's header takes the homepage's 12px gutters and compact location chip; page content
   keeps its own gutters. */
.news-inner .public-story .story-byline { margin-bottom: 0; }
@media (max-width: 760px) {
  .news-masthead, nav.category-navigation { --shell-gutter: 12px; }
  .news-inner .news-masthead .page-shell, .news-inner nav.category-navigation .page-shell { width: 100%; padding-inline: var(--shell-gutter); }
  .news-masthead .location-trigger { min-height: 34px; }
}

/* Child-location chips (district listing pages): one swipeable row with previous/next, like the homepage. */
.child-location-rail { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 4px 0 18px; padding: 10px 0; border-block: 1px solid var(--line); }
.news-inner .child-location-rail .category-pagination.child-locations { display: flex; flex: 1; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; min-width: 0; margin: 0; padding: 2px; overflow-x: auto; border: 0; scrollbar-width: none; overscroll-behavior-x: contain; }
.news-inner .child-location-rail .child-locations::-webkit-scrollbar { display: none; }
.news-inner .child-location-rail .child-locations a { flex: none; padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.news-inner .child-location-rail .child-locations a:hover, .news-inner .child-location-rail .child-locations a:focus-visible { border-color: var(--red); color: var(--red); }
.child-location-rail .rail-btn { display: grid; flex: none; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card-bg); color: var(--ink); font-size: 13px; cursor: pointer; }
.child-location-rail .rail-btn[hidden] { display: none; }
.child-location-rail .rail-btn:hover:not(:disabled), .child-location-rail .rail-btn:focus-visible { border-color: var(--red); color: var(--red); }
.child-location-rail .rail-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 760px) {
  .child-location-rail { margin-inline: calc(-1 * var(--shell-gutter)); padding-inline: var(--shell-gutter); }
  .child-location-rail .rail-btn { display: none; }
}

/* Missing or broken story image: the site logo, whole and centred inside the same thumbnail box. The tile stays
   light in both themes (as behind the footer logo) so the logo's dark lettering is always readable. */
img.is-image-fallback { object-fit: contain !important; object-position: center !important; background: #fff !important; }

/* Compact footer (client correction): the footer's height comes from its links alone. Categories fill their wide
   column in several short columns instead of one tall list; link rows and gaps are tighter. On phones the space kept
   free for the fixed bottom navigation is the footer's own (navy) padding rather than blank page below it. */
.news-footer .news-footer-grid { padding-top: 24px; padding-bottom: 20px; }
.news-footer p { margin: 10px 0; line-height: 1.7; }
.news-footer h2 { margin-bottom: 10px; }
.news-footer-links > a, .news-footer .news-footer-categories a { padding: 2px 0; line-height: 1.6; }
.news-footer .news-footer-categories { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0 18px; }
.news-footer .news-footer-bottom { padding-top: 14px; padding-bottom: 14px; }
@media (max-width: 760px) {
  body { padding-bottom: 0; }
  footer.news-footer { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .news-footer .news-footer-band-inner { gap: 14px; padding-top: 18px; padding-bottom: 18px; }
  .news-footer .news-footer-grid, .news-footer .news-footer-grid.has-static-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding-top: 20px; padding-bottom: 16px; }
  .news-footer .news-footer-brand, .news-footer .news-footer-links:has(.news-footer-categories) { grid-column: 1 / -1; }
  .news-footer .news-footer-brand img { width: 100px; padding: 6px; }
  .news-footer .news-footer-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
  .news-footer .news-footer-bottom { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-top: 12px; padding-bottom: 12px; line-height: 1.5; }
}

/* Article featured image (client placement): Credit over the image bottom-right, AI Credit over it top-right, the caption
   centred below it. Shared by the server-rendered article page and the Story component that replaces it. */
.story-figure-media { position: relative; }
.story-figure-media > img { display: block; }
/* The hero's spacing moves to the wrapper so the overlays are measured against the image itself. */
.story-figure-media > .article-hero { margin: 0; }
.story-figure-media:has(> .article-hero) { margin: 18px 0; }
.story-figure:has(> .story-figure-meta) > .story-figure-media { margin-bottom: 0; }
/* Credit bottom-right, AI Credit top-right: top and bottom edges keep them apart, and each is capped at two lines. Fixed
   colours, because they sit on a photo rather than the page background (same in light and dark themes). */
.story-figure-credit, .story-figure-ai { position: absolute; z-index: 1; max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 4px; background: rgba(17, 24, 39, .74); color: #fff; font-size: 12px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; pointer-events: none; }
.story-figure-credit { right: 8px; bottom: 8px; text-align: right; }
.story-figure-ai { right: 8px; top: 8px; text-align: right; }
.story-figure-meta { margin: 8px 0 0; padding: 0 0 8px; border-bottom: 1px solid var(--line); text-align: center; }
.story-figure-caption { color: var(--muted); font-size: 13px; line-height: 1.55; font-weight: 400; }
/* Inner pages (.news-inner) keep a white reading surface with fixed dark text in both themes, so the caption uses a
   fixed tone there: visibly lighter than the body text (#17212c) yet readable. */
.news-inner .story-figure-meta { border-bottom-color: #e5e7eb; }
.news-inner .story-figure-caption { color: #5f6b78; }
@media (max-width: 640px) {
  .story-figure-credit, .story-figure-ai { max-width: calc(100% - 12px); padding: 2px 6px; font-size: 11px; }
  .story-figure-credit { right: 6px; bottom: 6px; }
  .story-figure-ai { right: 6px; top: 6px; }
}

/* Header reader state (resources/js/Public/readerAuth.js): guests see Login/Register, signed-in readers "मेरा खाता". */
html:not([data-reader="signed-in"]) [data-auth-reader] { display: none !important; }
html[data-reader="signed-in"] [data-auth-guest] { display: none !important; }
.news-masthead .header-actions > .header-account { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* Join / Follow channels (System Settings → Contact & Social): homepage sidebar panel and the article toolbar.
   One set of rules for both (Homepage.vue and Story.vue); brand tint per platform, theme tokens for surfaces. */
.join-panel h2 { margin: 0 0 4px; }
.join-panel > p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.join-list { display: grid; gap: 8px; }
.join-chip { --join: var(--red); display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-left: 3px solid var(--join); border-radius: 8px; background: var(--card-bg); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.join-chip > i:first-child { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--join); color: #fff; font-size: 15px; }
.join-chip > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.join-chip .join-ext { flex: none; font-size: 11px; color: var(--muted); }
.join-chip:hover { border-color: var(--join); background: color-mix(in srgb, var(--join) 8%, var(--card-bg)); color: var(--ink); }
.join-chip:focus-visible { outline: 2px solid var(--join); outline-offset: 2px; }
.join-chip.is-whatsapp_channel, .join-chip.is-whatsapp_group { --join: #1f9d55; }
.join-chip.is-telegram_channel, .join-chip.is-telegram_group { --join: #229ed9; }
.join-chip.is-google_news { --join: #4285f4; }
.join-chip.is-youtube { --join: #e62117; }
.join-chip.is-facebook { --join: #1877f2; }
.join-chip.is-instagram { --join: #d62976; }
.join-chip.is-x { --join: #3b4552; }
html[data-theme="dark"] .join-chip.is-x { --join: #9aa3ad; }
/* Article toolbar: round brand icons (like the share buttons) in the space between Share and Save; the channel
   label is the link's accessible name and tooltip. Phones: labelled pills on their own row under the toolbar. */
.story-join { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.join-chip.is-compact { justify-content: center; width: 34px; min-height: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--join); }
.join-chip.is-compact > i:first-child { width: auto; height: auto; background: none; font-size: 15px; }
.join-chip.is-compact > span { display: none; }
.join-chip.is-compact:hover { background: var(--join); filter: brightness(1.1); }
@media (max-width: 640px) {
  .story-join { order: 3; flex-basis: 100%; }
  .join-chip.is-compact { flex: 1 1 calc(50% - 30px); justify-content: flex-start; gap: 8px; width: auto; height: auto; min-height: 38px; padding: 4px 12px 4px 6px; border-radius: 999px; color: #fff; font-size: 13px; }
  .join-chip.is-compact > span { display: block; }
  .join-chip.is-compact:hover { color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .join-chip { transition: none; } }