/* ==========================================================================
   Bodhvriksha — Professional Mobile Layout
   ========================================================================== */

.mobile-bottom-nav,
.mobile-drawer,
.nav-overlay,
.mobile-more-sheet,
.mobile-more-overlay {
  display: none;
}

@media (max-width: 900px) {
  .mobile-drawer {
    display: flex;
  }
  .nav-overlay {
    display: block;
  }
  .mobile-more-sheet:not([hidden]) {
    display: flex;
  }
  .mobile-more-overlay:not([hidden]) {
    display: block;
  }
  :root {
    --m-green: #E60000;
    --m-green-soft: #FDECEC;
    --m-navy: #E50000;
    --bottom-nav-h: 64px;
  }

  body {
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }

  /* ---- Topbar compact ---- */
  .topbar {
    min-height: 34px;
    font-size: 0.72rem;
  }
  .topbar__inner {
    gap: 0.5rem;
    padding-block: 0.3rem;
  }
  .topbar__meta {
    gap: 0.55rem;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
  .topbar__item {
    gap: 0.25rem;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
  }
  .topbar__time {
    flex-shrink: 0;
  }
  .topbar__date span,
  .topbar__loc span,
  .topbar__time span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar__links { display: none !important; }
  .topbar__social {
    gap: 0.2rem;
    flex-shrink: 0;
    display: flex !important;
  }
  .topbar__social a {
    width: 22px;
    height: 22px;
  }
  .topbar__social a img {
    width: 12px;
    height: 12px;
  }

  /* ---- Header: toggle | brand | widgets ---- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    box-shadow: 0 1px 0 #E8EDF4;
  }
  .site-header__inner {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    grid-template-areas: "toggle brand widgets" "search search search" !important;
    gap: 0.55rem 0.55rem !important;
    align-items: center;
    min-height: 0;
    padding-block: 0.65rem !important;
    padding-inline: 0.75rem !important;
  }
  .nav-toggle {
    display: inline-flex !important;
    grid-area: toggle;
    width: 40px;
    height: 40px;
    border: 1px solid #E5E9EF;
    border-radius: 10px;
    background: #F7F9FC;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
  }
  .nav-toggle span {
    width: 16px;
    height: 2px;
    background: var(--m-navy);
  }

  .brand {
    grid-area: brand;
    min-width: 0;
    gap: 0.12rem;
  }
  .brand__logo {
    height: 40px;
    max-width: min(170px, 52vw);
  }
  .brand__mark { display: none !important; }
  .brand__name { display: none !important; }
  .brand__tagline {
    display: block !important;
    font-size: 0.58rem !important;
    max-width: 170px !important;
    color: #374151 !important;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-drawer__logo img {
    height: 46px !important;
    width: auto !important;
    max-width: 190px;
    object-fit: contain;
  }
  .mobile-drawer__title { display: none !important; }

  .header-widgets {
    grid-area: widgets;
    gap: 0.35rem;
    justify-content: flex-end;
  }
  .hw-weather {
    padding: 0.25rem 0.45rem;
    min-width: 0;
    min-height: 40px;
    border-radius: 10px;
  }
  .hw-weather__icon { font-size: 1.05rem; }
  .hw-weather__meta strong { font-size: 0.82rem; }
  .hw-weather__meta small { font-size: 0.62rem; }

  .hw-epaper,
  .hw-notify,
  .hw-account {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 10px;
    background: #F3F5F7;
    border: 1px solid #E8EDF4;
    display: grid;
    place-items: center;
    overflow: visible;
    flex-direction: row;
  }
  .hw-epaper__label,
  .hw-account__label,
  .hw-notify__label,
  .hw-epaper span:last-child {
    display: none !important;
  }
  .hw-epaper__icon,
  .hw-account__icon,
  .hw-notify__bell {
    color: var(--m-navy);
  }
  .hw-notify__bell {
    width: 22px;
    height: 22px;
  }
  .hw-notify__bell svg,
  .hw-epaper__icon svg,
  .hw-account__icon svg {
    width: 18px;
    height: 18px;
  }
  .hw-notify__badge {
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    border: 2px solid #fff;
  }
  .hw-notify {
    position: relative;
  }

  /* Keep page gutters tight & even */
  .container,
  .container--wide {
    padding-inline: 1rem !important;
  }
  .header-search {
    grid-area: search !important;
    display: flex !important;
    max-width: none !important;
    width: 100%;
    margin: 0 !important;
    background: #fff !important;
    border: 1.5px solid #D7DEE8 !important;
    border-radius: 999px !important;
    padding: 0.22rem 0.28rem 0.22rem 0.85rem !important;
  }
  .header-search__btn {
    background: #E50000 !important;
    border-radius: 999px !important;
    min-height: 36px !important;
    padding: 0.45rem 1rem !important;
    font-size: 0.84rem !important;
  }
  .header-search__btn:hover { background: #FF1A1A !important; }
  .header-search input {
    font-size: 0.84rem !important;
    padding: 0.45rem 0.25rem !important;
  }

  /* ---- Horizontal category strip (icon above text) + drawer ---- */
  .main-nav {
    display: block !important;
    position: relative !important;
    top: auto !important;
    background: #fff !important;
    box-shadow: none !important;
    border-bottom: 1px solid #E8EDF4 !important;
    z-index: 100;
    inset: auto !important;
    height: auto !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .main-nav.is-open { display: block !important; }
  .main-nav__inner {
    display: flex !important;
    align-items: center;
    gap: 0.35rem;
    min-height: 48px;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0.15rem 0.75rem !important;
    background: transparent !important;
    flex-direction: row !important;
    overflow: visible !important;
    box-shadow: none !important;
  }
  .main-nav__list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    gap: 0.1rem;
    flex: 1;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .main-nav__list::-webkit-scrollbar { display: none; }
  .main-nav__list a,
  .main-nav__link {
    color: #E50000 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0.55rem 0.75rem !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    border-bottom: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    white-space: nowrap;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  .main-nav__ico { display: none !important; }
  .main-nav__list a:hover {
    color: #E50000 !important;
    background: #F3F5F7 !important;
    border-bottom-color: transparent !important;
  }
  .main-nav__list a.active,
  .main-nav__home.active {
    color: #fff !important;
    background: #E50000 !important;
    border-radius: 999px !important;
    border-bottom-color: transparent !important;
  }
  .main-nav__home {
    background: transparent !important;
  }
  .main-nav__home svg { display: none !important; }
  .main-nav__ico img {
    display: none !important;
  }
  .main-nav__list a.active .main-nav__ico img {
    filter: none;
  }
  .main-nav__all-wrap {
    display: none; /* use bottom "और" + hamburger drawer */
  }

  /* ---- Mobile drawer (hamburger) — floating card menu ---- */
  .mobile-drawer {
    position: fixed;
    top: 0.55rem;
    left: 0.55rem;
    bottom: 0.55rem;
    width: min(340px, calc(100vw - 1.1rem));
    height: auto;
    max-height: calc(100% - 1.1rem);
    background: #F4F6FA;
    z-index: 260;
    transform: translateX(calc(-100% - 1rem));
    transition: transform 0.28s ease;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.7);
  }
  .mobile-drawer.is-open {
    transform: translateX(0);
  }
  .mobile-drawer__brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 3rem 0.75rem;
    background: #fff;
    border-bottom: 1px solid #EEF1F5;
    flex-shrink: 0;
  }
  .mobile-drawer__close {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: #EEF2F7;
    color: #1F2937;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
  }
  .mobile-drawer__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    max-width: calc(100% - 3.5rem);
  }
  .mobile-drawer__logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .mobile-drawer__title {
    font-family: "Tiro Devanagari Hindi", Georgia, serif;
    font-size: 1.28rem;
    font-weight: 700;
    color: #E50000;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
  }
  .mobile-drawer__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.7rem 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .mobile-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #E6EBF2;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  }
  .md-navlink {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    border: 0;
    border-bottom: 1px solid #F0F2F5;
    color: #0F172A;
    font-weight: 800;
    font-size: 0.94rem;
    line-height: 1.2;
    background: #fff;
    text-decoration: none;
  }
  .md-navlink:last-child { border-bottom: 0; }
  .md-navlink__ico {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #FDECEC;
    color: #E50000;
    flex-shrink: 0;
  }
  .md-navlink__ico img {
    width: 18px !important;
    height: 18px !important;
    max-width: none !important;
    object-fit: contain;
    display: block !important;
  }
  .md-navlink__txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .md-navlink__chev {
    color: #6B7280;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
  }
  .md-navlink.active {
    background: #EAF0FB;
  }
  .md-navlink.active .md-navlink__chev { color: #E50000; }
  .md-navlink:hover { background: #F8FAFC; }

  .md-navlink[data-tone="home"] .md-navlink__ico { background: #FDECEC; color: #E50000; }
  .md-navlink[data-tone="india"] .md-navlink__ico { background: #FFF1E8; color: #E67E22; }
  .md-navlink[data-tone="chhattisgarh"] .md-navlink__ico { background: #E8F8EF; color: #16A34A; }
  .md-navlink[data-tone="world"] .md-navlink__ico { background: #F3E8FF; color: #7C3AED; }
  .md-navlink[data-tone="politics"] .md-navlink__ico { background: #FDECEC; color: #16A34A; }
  .md-navlink[data-tone="society"] .md-navlink__ico { background: #FCE7F3; color: #DB2777; }
  .md-navlink[data-tone="sports"] .md-navlink__ico { background: #FEF6D8; color: #CA8A04; }
  .md-navlink[data-tone="business"] .md-navlink__ico { background: #EEE8FF; color: #6D28D9; }
  .md-navlink[data-tone="entertainment"] .md-navlink__ico { background: #E8F8F0; color: #059669; }
  .md-navlink[data-tone="education"] .md-navlink__ico { background: #FCE7F3; color: #BE185D; }
  .md-navlink[data-tone="health"] .md-navlink__ico { background: #FFE8EC; color: #E11D48; }
  .md-navlink[data-tone="science-tech"] .md-navlink__ico { background: #E8F4FF; color: #0284C7; }
  .md-navlink[data-tone="environment"] .md-navlink__ico { background: #FDECEC; color: #15803D; }
  .md-navlink[data-tone="opinion"] .md-navlink__ico { background: #FFF4E5; color: #C2410C; }
  .md-navlink[data-tone="lifestyle"] .md-navlink__ico { background: #F5E8FF; color: #9333EA; }
  .md-navlink[data-tone="positive"] .md-navlink__ico { background: #FDECEC; color: #16A34A; }

  .mobile-drawer__lang {
    background: #fff;
    border: 1px solid #E6EBF2;
    border-radius: 16px;
    padding: 0.8rem 0.85rem 0.85rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    flex-shrink: 0;
  }
  .mdl-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    font-weight: 800;
    color: #E50000;
    margin-bottom: 0.6rem;
  }
  .mdl-head svg { color: #E50000; flex-shrink: 0; }
  .mdl-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .mdl-btns button {
    position: relative;
    border: 1.5px solid #D7DEEA;
    background: #fff;
    color: #111827;
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
  }
  .mdl-btns button.is-active {
    background: #E50000;
    border-color: #E50000;
    color: #fff;
    justify-content: space-between;
    padding-inline: 0.9rem;
  }
  .mdl-check {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgba(255,255,255,0.22);
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .mdl-btns button:disabled:not(.is-active) {
    opacity: 1;
    color: #1F2937;
  }

  .mobile-drawer__contact {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: #E50000;
    color: #fff !important;
    text-decoration: none;
    border-radius: 14px;
    padding: 0.8rem 0.95rem;
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: 0 8px 20px rgba(229, 0, 0, 0.25);
    flex-shrink: 0;
  }
  .mdc-ico {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .mdc-txt { flex: 1; color: #fff; }
  .mdc-chev {
    font-size: 1.3rem;
    line-height: 1;
    opacity: 1;
    color: #fff;
  }

  .mobile-drawer__foot {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.65rem 0.7rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: #F4F6FA;
    border-top: 1px solid #E8EDF4;
  }
  .mdf-card {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 50px;
    padding: 0.5rem 0.55rem;
    border: 1px solid #E6EBF2;
    border-radius: 14px;
    background: #fff;
    color: #0F172A;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  }
  .mdf-card__ico {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #FDECEC;
    color: #E50000;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .mdf-card__txt {
    flex: 1;
    min-width: 0;
    line-height: 1.15;
  }
  .mdf-card__chev {
    color: #9CA3AF;
    font-size: 1.05rem;
  }
  .mdf-switch {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: #D1D5DB;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s ease;
  }
  .mdf-switch__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
  }
  .mdf-theme[aria-pressed="true"] .mdf-switch {
    background: #E50000;
  }
  .mdf-theme[aria-pressed="true"] .mdf-switch__knob {
    transform: translateX(16px);
  }
  .mdf-theme[aria-pressed="true"] {
    color: #E50000;
  }

  /* legacy head selector no longer used */
  .mobile-drawer__head { display: none; }

  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 21, 38, 0.48);
    z-index: 250;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  html.nav-open,
  body.nav-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  body.nav-open {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    touch-action: none;
  }
  body.nav-open .mobile-drawer {
    touch-action: auto;
  }
  body.nav-open .mobile-drawer__scroll {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Breaking (light ticker on mobile too) ---- */
  .breaking {
    background: #FFF5F5 !important;
    border-bottom: 1px solid #F5D5D5 !important;
  }
  .breaking__inner {
    min-height: 42px;
    gap: 0.5rem;
    padding-inline: 0.75rem !important;
  }
  .breaking__label {
    font-size: 0.62rem;
    padding: 0.35rem 0.7rem !important;
    border-radius: 999px !important;
    clip-path: none !important;
  }
  .breaking__track-wrap {
    background: transparent !important;
  }
  .breaking__controls { display: none; }
  .breaking__item,
  .breaking__track a,
  a.breaking__item {
    font-size: 0.82rem;
    padding: 0 0.75rem;
    color: #111111 !important;
  }
  .breaking__item:hover,
  .breaking__track a:hover,
  a.breaking__item:hover {
    color: #E60000 !important;
  }
  .breaking__item::before,
  .breaking__track a::before {
    background: #E60000 !important;
  }

  /* ---- Hero as mobile card ---- */
  .hero {
    background: transparent;
    padding: 0.75rem 0.75rem 0.25rem;
  }
  .hero-slider {
    aspect-ratio: auto !important;
    min-height: 320px !important;
    max-height: none !important;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(11, 31, 58, 0.12);
  }
  .hero-slide__media::after {
    background: linear-gradient(
      180deg,
      rgba(7, 21, 38, 0.15) 0%,
      rgba(7, 21, 38, 0.45) 40%,
      rgba(7, 21, 38, 0.92) 100%
    ) !important;
  }
  .hero-slide__content {
    padding: 1.25rem 1rem 2.6rem !important;
    justify-content: flex-end;
  }
  .hero-slide__content .badge {
    background: #E50000 !important;
  }
  .hero-slide__content h1 {
    font-size: 1.2rem !important;
    max-width: none !important;
  }
  .hero-slide__content p {
    font-size: 0.84rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero-slide__meta .btn-primary,
  .hero-slide__meta .btn {
    background: #fff !important;
    color: #E50000 !important;
    border: 0;
    padding: 0.4rem 0.9rem !important;
    font-weight: 800;
    border-radius: 999px;
  }
  .hero-nav {
    display: none !important;
  }
  .hero-dots { bottom: 0.65rem; }
  .hero-dot.is-active { background: #fff; }

  /* ---- Shortcuts / content ---- */
  .category-shortcuts {
    padding-top: 0.85rem;
  }
  .section {
    padding-top: 1rem;
  }
  .layout-main {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .layout-main__sidebar {
    position: static !important;
    grid-template-columns: 1fr !important;
  }
  .news-grid,
  .news-grid--positive,
  .special-grid,
  .photo-grid,
  .video-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.55rem !important;
  }
  .video-card h3 {
    font-size: 0.78rem !important;
    padding: 0.45rem 0.5rem 0.55rem !important;
  }
  .play-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.65rem !important;
  }
  .section-head a {
    font-size: 0.72rem !important;
  }
  .news-grid .news-card:nth-child(1) {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ---- Bottom nav ---- */
  .mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 180;
    background: #fff;
    border-top: 1px solid #E5E9EF;
    padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 18px rgba(11, 31, 58, 0.06);
    gap: 0.25rem;
  }
  .mobile-bottom-nav .mbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-height: 52px;
    padding: 0.35rem 0.25rem;
    border-radius: 14px;
    color: #3F4A5A;
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    background: transparent;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bottom-nav .mbn-icon {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    color: inherit;
  }
  .mobile-bottom-nav .mbn-icon svg {
    display: block;
  }
  .mobile-bottom-nav .mbn-item.is-active,
  .mobile-bottom-nav .mbn-item.is-open {
    color: var(--m-green);
    background: var(--m-green-soft);
  }
  .mobile-bottom-nav .mbn-item.is-active .mbn-icon,
  .mobile-bottom-nav .mbn-item.is-open .mbn-icon {
    color: var(--m-green);
  }

  /* ---- More bottom sheet (mock UI) ---- */
  .mobile-more-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(15, 35, 70, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
  }
  .mobile-more-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }
  .mobile-more-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    max-height: min(90vh, 720px);
    background: linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 28%);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 48px rgba(11, 31, 58, 0.2);
    transform: translateY(105%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }
  .mobile-more-sheet.is-open {
    transform: translateY(0);
  }
  .mobile-more-sheet__handle {
    width: 44px;
    height: 5px;
    border-radius: 99px;
    background: #D7DFEA;
    margin: 0.7rem auto 0.2rem;
    flex-shrink: 0;
  }
  .mobile-more-sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 1.1rem 0.85rem;
  }
  .mobile-more-sheet__head h2 {
    margin: 0;
    font-size: 1.35rem;
    color: #E50000;
    font-weight: 800;
    line-height: 1.2;
  }
  .mobile-more-sheet__head p {
    margin: 0.28rem 0 0;
    font-size: 0.84rem;
    color: #5B6B7C;
    font-weight: 500;
  }
  .mobile-more-sheet__close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #E8F0FB;
    color: #E50000;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .mobile-more-sheet__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 1.05rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
  }

  .mms-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: #F3F6FA;
    border: 1px solid #DCE6F3;
    border-radius: 999px;
    padding: 0.72rem 0.95rem;
  }
  .mms-search__ico {
    color: #7B8A9A;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .mms-search input {
    flex: 1;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    color: #1A0000;
    outline: none;
    min-width: 0;
  }
  .mms-search input::placeholder { color: #8A97A8; }

  .mobile-more-section h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    color: #1A0000;
  }
  .mobile-more-section__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
  }
  .mobile-more-section__row h3 { margin: 0; }
  .mobile-more-all {
    font-size: 0.82rem;
    font-weight: 700;
    color: #E50000;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
  }

  .mobile-more-quick {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .mmq {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    border: 0;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: left;
    transition: transform 0.12s ease, filter 0.12s ease;
  }
  .mmq:active { transform: scale(0.985); }
  .mmq__ico {
    display: grid !important;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,0.55);
  }
  .mmq__txt { color: inherit; }
  .mmq__go {
    color: inherit;
    opacity: 0.55;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
  }
  .mmq--blue { background: #FDECEC; color: #E50000; }
  .mmq--blue .mmq__ico { color: #E50000; }
  .mmq--rose { background: #FDE8EF; color: #C2185B; }
  .mmq--rose .mmq__ico { color: #E53935; }
  .mmq--green { background: #E7F7EE; color: #1B7A45; }
  .mmq--green .mmq__ico { color: #2E7D32; }
  .mmq--slate { background: #EEF1F7; color: #3D4F6F; }
  .mmq--slate .mmq__ico { color: #455A7A; }
  .mmq--amber { background: #FFF3E0; color: #B86A00; }
  .mmq--amber .mmq__ico { color: #EF6C00; }
  .mmq--teal { background: #E6F7F5; color: #0F766E; }
  .mmq--teal .mmq__ico { color: #0D9488; }

  .mobile-more-cats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .mmc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #E6ECF4;
    color: #1A0000;
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(15, 40, 80, 0.02);
  }
  .mmc img,
  .mmc__flag,
  .mmc .flag { display: none !important; }
  .mmc__txt { min-width: 0; }
  .mmc__go {
    color: #94A3B8;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
  }
  .mmc.is-active,
  .mmc:hover {
    background: #F5F8FD;
    border-color: #D5E0F0;
    color: #E50000;
  }
  .mmc.is-active .mmc__go,
  .mmc:hover .mmc__go { color: #E50000; }

  .mobile-more-section--links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.75rem;
    padding-top: 0.35rem;
    border-top: 1px solid #EEF2F6;
  }
  .mobile-more-section--links a {
    color: #4B5563;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.45rem 0;
  }
  .mobile-more-section--links a:hover { color: #E50000; }

  body.more-sheet-open {
    overflow: hidden;
  }

  /* Footer spacing above bottom nav */
  .site-footer {
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 480px) {
  .brand__name { font-size: 1.15rem !important; }
  .hw-weather__meta small { display: none; }
  .shortcut-card {
    min-width: 82px;
    width: 82px;
    flex-basis: 82px;
  }
}

/* Drawer / more sheet hidden on desktop */
@media (min-width: 901px) {
  .mobile-drawer,
  .nav-overlay,
  .mobile-more-sheet,
  .mobile-more-overlay { display: none !important; }
}

/* ==========================================================================
   Mobile homepage mock (≤900px)
   ========================================================================== */
@media (max-width: 900px) {
  .page-home .main-nav,
  .page-home .bv-breaking,
  .page-home .ns-desktop-only {
    display: none !important;
  }

  /* Extra category sections on mobile — compact feed lists */
  .mh-sec {
    margin-top: 0.85rem !important;
    padding-top: 0.75rem !important;
  }
  .mh-sec .ns-block__head {
    margin-bottom: 0.55rem !important;
  }
  .mh-sec .ns-block__head h2 {
    font-size: 1.05rem !important;
  }
  .mh-sec__grid {
    display: none !important;
  }
  .mh-sec__list {
    display: flex !important;
    flex-direction: column;
    gap: 0.45rem;
  }
  .mh-sec__list .ns-feed {
    margin-bottom: 0;
  }
  .mh-sec__list .ns-feed__excerpt {
    -webkit-line-clamp: 1;
  }

  .page-home .ns-home {
    padding: 0.75rem 0 1.5rem;
  }
  .page-home .ns-home > .container {
    padding-inline: 1rem !important;
  }

  /* Featured + cricket/weather: keep clear side gap on phones */
  .page-home .ns-top,
  .page-home .ns-top__primary {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }
  .page-home .mh-hero {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 16px !important;
    overflow: hidden;
  }
  .page-home .ns-widgets {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-inline: 0 !important;
  }

  /* Category icon strip */
  .mh-cats {
    display: flex !important;
    gap: 0.55rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.15rem 0.1rem 0.85rem;
    margin: 0 -0.15rem 0.35rem;
  }
  .mh-cats::-webkit-scrollbar { display: none; }
  .mh-cat {
    flex: 0 0 auto;
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: #111;
  }
  .mh-cat__ico {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #E6EBF2;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    display: grid;
    place-items: center;
    color: #E50000;
  }
  .mh-cat__ico img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
  .mh-cat__name {
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    color: #0F172A;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mh-cat.is-active .mh-cat__ico {
    background: #E50000;
    border-color: #E50000;
    color: #fff;
    box-shadow: 0 6px 16px rgba(229, 0, 0, 0.28);
  }
  .mh-cat.is-active .mh-cat__ico img {
    filter: brightness(0) invert(1);
  }
  .mh-cat.is-active .mh-cat__name {
    color: #E50000;
    font-weight: 800;
  }

  /* Stack hero + feed */
  .page-home .ns-top {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-bottom: 0.5rem;
  }
  .page-home .ns-top__primary {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .page-home .ns-widgets {
    display: grid !important;
    grid-template-columns: 1.12fr 0.88fr !important;
    gap: 0.55rem !important;
    align-items: stretch;
  }
  .page-home .ns-cric,
  .page-home .ns-wxcard {
    min-height: 0 !important;
    padding: 0.65rem 0.7rem !important;
    border-radius: 14px !important;
  }
  .page-home .ns-cric__title { font-size: 0.76rem !important; }
  .page-home .ns-cric__live {
    font-size: 0.56rem !important;
    padding: 0.12rem 0.38rem !important;
  }
  .page-home .ns-cric__match:nth-child(n + 2) { display: none !important; }
  .page-home .ns-cric__match { padding: 0.42rem 0.48rem !important; }
  .page-home .ns-cric__team strong { font-size: 0.76rem !important; }
  .page-home .ns-cric__team span { font-size: 0.68rem !important; }
  .page-home .ns-cric__status { font-size: 0.6rem !important; }
  .page-home .ns-cric__more { font-size: 0.66rem !important; margin-top: 0.4rem !important; }
  .page-home .ns-wxcard { gap: 0.4rem !important; }
  .page-home .ns-wxcard__cta {
    font-size: 0 !important;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(229, 0, 0, 0.12);
    display: grid !important;
    place-items: center;
  }
  .page-home .ns-wxcard__cta::after {
    content: "›";
    font-size: 0.95rem;
    font-weight: 800;
    color: #E50000;
  }
  .page-home .ns-wxcard__body {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.15rem !important;
  }
  .page-home .ns-wxcard__emoji { font-size: 1.55rem !important; }
  .page-home .ns-wxcard__temp { font-size: 1.35rem !important; }
  .page-home .ns-wxcard__city { font-size: 0.76rem !important; }
  .page-home .ns-wxcard__cond {
    font-size: 0.66rem !important;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .page-home .ns-wxcard__foot { font-size: 0.62rem !important; gap: 0.45rem !important; }

  .mh-hero {
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 11;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  }
  .mh-hero__content {
    padding: 1rem 1rem 1.1rem;
  }
  .mh-hero__title {
    font-size: 1.15rem;
    -webkit-line-clamp: 3;
    padding-right: 2.5rem;
  }
  .mh-hero__excerpt {
    font-size: 0.8rem;
    margin-right: 2.75rem;
    -webkit-line-clamp: 2;
  }
  .mh-hero__cta {
    width: 38px;
    height: 38px;
    right: 0.85rem;
    bottom: 0.95rem;
  }
  .mh-hero__pager {
    top: 0.7rem;
    right: 0.7rem;
  }
  .mh-hero__top {
    top: 0.7rem;
    left: 0.7rem;
  }

  .ns-rail__head {
    align-items: center;
    margin-bottom: 0.55rem;
  }
  .ns-rail__tab {
    font-size: 0.95rem;
    padding: 0.45rem 0.05rem 0.55rem;
  }
  .ns-rail__all {
    font-size: 0.72rem;
    padding: 0.32rem 0.65rem;
    margin-bottom: 0;
  }

  .ns-feed {
    background: #fff;
    border: 1px solid #EEF1F5;
    margin-bottom: 0.55rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  }
  .ns-feed.is-hot {
    background: #F7F9FC;
    box-shadow: none;
    border-color: #E2E8F2;
  }
  .ns-feed__link {
    grid-template-columns: 108px 1fr;
    gap: 0.7rem;
    padding: 0.7rem;
  }
  .ns-feed__thumb {
    width: 108px;
    height: 88px;
    border-radius: 14px;
  }
  .ns-feed__title { font-size: 0.92rem; }
  .ns-feed__excerpt { display: -webkit-box; }

  /* Header: show tagline, cleaner widgets */
  .page-home .brand__tagline,
  .brand__tagline {
    display: block !important;
    font-size: 0.62rem !important;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand__name {
    font-size: 1.35rem !important;
  }
  .header-widgets--motto .header-motto {
    display: none !important;
  }
  .site-header__inner {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "toggle brand widgets"
      "search search search" !important;
  }
  .header-widgets--motto {
    grid-area: widgets;
    gap: 0.4rem;
  }
  .header-search {
    border-radius: 999px !important;
    padding: 0.22rem 0.28rem 0.22rem 0.85rem !important;
  }
  .header-search__btn {
    min-height: 38px !important;
    padding: 0.45rem 1rem !important;
    font-size: 0.84rem !important;
  }

  /* Floating pill bottom nav — white professional theme */
  .mobile-bottom-nav {
    left: 0.65rem !important;
    right: 0.65rem !important;
    bottom: calc(0.45rem + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    border-radius: 18px !important;
    border: 1px solid #E6EBF2 !important;
    background: #FFFFFF !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1) !important;
    padding: 0.28rem 0.35rem !important;
    gap: 0.15rem !important;
  }
  .mobile-bottom-nav .mbn-item {
    color: #4B5563 !important;
    min-height: 46px;
    border-radius: 14px;
    gap: 0.08rem;
    font-weight: 700;
  }
  .mobile-bottom-nav .mbn-icon {
    background: transparent !important;
    color: inherit !important;
    width: 24px;
    height: 24px;
  }
  .mobile-bottom-nav .mbn-icon svg {
    stroke: currentColor;
    stroke-width: 1.85;
  }
  .mobile-bottom-nav .mbn-label {
    color: inherit !important;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.01em;
  }
  .mobile-bottom-nav .mbn-item.is-active,
  .mobile-bottom-nav .mbn-item.is-open {
    background: #FDECEC !important;
    color: #E50000 !important;
  }
  .mobile-bottom-nav .mbn-item.is-active .mbn-icon,
  .mobile-bottom-nav .mbn-item.is-open .mbn-icon {
    background: transparent !important;
    color: #E50000 !important;
  }

  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 560px) {
  .mh-cat { width: 66px; }
  .mh-cat__ico { width: 54px; height: 54px; border-radius: 14px; }
  .mh-hero { aspect-ratio: 5 / 4; }
  .ns-feed__link { grid-template-columns: 96px 1fr; }
  .ns-feed__thumb { width: 96px; height: 80px; }
}

/* ==========================================================================
   Drawer FIX — compact + scrollable category list (overrides above)
   ========================================================================== */
@media (max-width: 900px) {
  .mobile-drawer {
    top: 0.4rem !important;
    left: 0.4rem !important;
    bottom: 0.4rem !important;
    width: min(320px, calc(100vw - 0.8rem)) !important;
    height: auto !important;
    max-height: calc(100% - 0.8rem) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #F4F6FA !important;
  }

  .mobile-drawer__brand {
    flex: 0 0 auto !important;
    padding: 0.5rem 2.6rem !important;
  }
  .mobile-drawer__close {
    width: 30px !important;
    height: 30px !important;
  }
  .mobile-drawer__logo img {
    width: 30px !important;
    height: 30px !important;
  }
  .mobile-drawer__title {
    font-size: 1.12rem !important;
  }

  /* Hide old scroll wrapper if present */
  .mobile-drawer__scroll {
    display: contents !important;
    overflow: visible !important;
    flex: unset !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Category list is the ONLY scrolling region */
  .mobile-drawer__nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    margin: 0.4rem 0.5rem 0 !important;
    border-radius: 14px !important;
    display: block !important;
  }

  .md-navlink {
    grid-template-columns: 30px 1fr auto !important;
    gap: 0.45rem !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.84rem !important;
    color: #0F172A !important;
    text-decoration: none !important;
  }
  .md-navlink:visited,
  .md-navlink:hover,
  .md-navlink:active,
  .md-navlink:focus {
    color: #0F172A !important;
  }
  .md-navlink__ico {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
  }
  .md-navlink__ico img {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
  }
  .md-navlink__chev {
    color: #6B7280 !important;
    font-size: 1rem !important;
  }

  .mobile-drawer__extras {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    padding: 0.4rem 0.5rem 0 !important;
  }

  .mobile-drawer__lang {
    padding: 0.45rem 0.5rem 0.5rem !important;
    border-radius: 12px !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  .mdl-head {
    font-size: 0.76rem !important;
    margin-bottom: 0.35rem !important;
  }
  .mdl-btns button {
    min-height: 34px !important;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.78rem !important;
    border-radius: 9px !important;
  }
  .mdl-check {
    width: 16px !important;
    height: 16px !important;
  }

  .mobile-drawer__contact {
    padding: 0.5rem 0.65rem !important;
    border-radius: 11px !important;
    font-size: 0.84rem !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  .mdc-ico {
    width: 26px !important;
    height: 26px !important;
  }

  .mobile-drawer__foot {
    flex: 0 0 auto !important;
    gap: 0.35rem !important;
    padding: 0.4rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 0 !important;
  }
  .mdf-card {
    min-height: 40px !important;
    padding: 0.3rem 0.4rem !important;
    font-size: 0.68rem !important;
    border-radius: 11px !important;
    color: #0F172A !important;
  }
  .mdf-card:visited,
  .mdf-card:hover { color: #0F172A !important; }
  .mdf-card__ico {
    width: 20px !important;
    height: 20px !important;
  }
  .mdf-switch {
    width: 28px !important;
    height: 15px !important;
  }
  .mdf-switch__knob {
    width: 11px !important;
    height: 11px !important;
  }
  .mdf-theme[aria-pressed="true"] .mdf-switch__knob {
    transform: translateX(13px) !important;
  }

  /* Do not block touch scrolling inside drawer */
  body.nav-open {
    touch-action: manipulation !important;
  }
  body.nav-open .mobile-drawer,
  body.nav-open .mobile-drawer__nav {
    touch-action: pan-y !important;
  }
}

/* Crisp SVG category icons (no blurry bitmaps) */
@media (max-width: 900px) {
  .mh-cat__ico img,
  .md-navlink__ico img {
    display: none !important;
  }
  .mh-cat__ico svg,
  .md-navlink__ico svg {
    display: block;
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
  }
  .md-navlink__ico svg {
    width: 16px;
    height: 16px;
  }
  .mh-cat__ico {
    color: #E50000;
  }
  .mh-cat.is-active .mh-cat__ico {
    color: #fff;
  }
  .mh-cat.is-active .mh-cat__ico img {
    filter: none !important;
  }
}

/* ---------- Mobile article / blog page ---------- */
@media (max-width: 900px) {
  body.page-article {
    background: #fff;
  }
  .page-article .article-page.section {
    padding: 0.85rem 0 1.5rem;
  }
  .page-article .layout-main__content {
    padding-inline: 0.15rem;
  }
  .page-article .breadcrumb--article {
    margin-bottom: 0.85rem;
    font-size: 0.72rem;
  }
  .page-article .ap-cat {
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.76rem;
    box-shadow: 0 6px 14px rgba(47, 158, 26, 0.18);
  }
  .page-article .article-header {
    margin-bottom: 0.85rem;
  }
  .page-article .article-header h1 {
    font-size: clamp(1.35rem, 6.2vw, 1.7rem);
    letter-spacing: -0.01em;
  }
  .page-article .article-subtitle {
    font-size: 0.98rem;
  }
  .page-article .article-accent {
    width: 38px;
    height: 3.5px;
    margin: 0.75rem 0 0.9rem;
  }
  .page-article .article-meta {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    padding-bottom: 0.15rem;
    margin-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-article .article-meta::-webkit-scrollbar { display: none; }
  .page-article .article-meta__item {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.74rem;
    padding-right: 0.6rem;
    margin-right: 0.6rem;
  }
  .page-article .article-hero-image {
    border-radius: 16px;
    margin: 0.2rem 0 1rem;
  }
  .page-article .article-hero-image img {
    aspect-ratio: 16 / 11;
  }
  .page-article .article-hero-image__cap {
    font-size: 0.72rem;
    left: 0.65rem;
    bottom: 0.65rem;
    max-width: calc(100% - 3.6rem);
  }
  .page-article .share-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.4rem;
    padding-bottom: 0.1rem;
    margin-bottom: 0.95rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-article .share-bar::-webkit-scrollbar { display: none; }
  .page-article .share-chip {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    padding: 0;
  }
  .page-article .share-chip span { display: none; }
  .page-article .share-chip svg {
    width: 24px;
    height: 24px;
  }
  .page-article .share-chip--wa { color: #25D366; background: #E6F8ED; }
  .page-article .share-chip--fb { color: #1877F2; background: #E7F0FE; }
  .page-article .share-chip--x { color: #000; background: #F1F2F4; }
  .page-article .share-chip--tg { color: #2AABEE; background: #E4F5FC; }
  .page-article .share-chip--copy { color: #5B6573; background: #F0F2F5; }
  .page-article .share-chip--native {
    display: inline-flex;
    color: #E50000;
    background: #EAF0FB;
  }
  .page-article .article-lead {
    border-radius: 12px;
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem;
  }
  .page-article .article-lead p {
    font-size: 0.86rem;
    line-height: 1.5;
  }
  .page-article .article-body {
    font-size: 1.02rem;
    line-height: 1.8;
  }
  .page-article .comments {
    margin-top: 1.35rem;
    padding: 0.95rem 0.85rem 0.9rem;
    border-radius: 14px;
  }
  .page-article .comments__title {
    font-size: 1.05rem;
  }
  .page-article .related-news__head h2 {
    font-size: 1.02rem;
  }
  .page-article .article-nav__card {
    padding: 0.7rem;
    border-radius: 12px;
  }
  .page-article .article-nav__ico {
    width: 42px;
    height: 42px;
    border-radius: 11px;
  }
  .page-article .article-nav__text strong {
    font-size: 0.84rem;
  }
  .page-article .related-card__body h3 {
    font-size: 0.92rem;
  }
  .page-article .comment-form {
    gap: 0.7rem;
    padding: 0.85rem;
    border-radius: 12px;
  }
  .page-article .comment-form input,
  .page-article .comment-form textarea {
    font-size: 0.9rem;
    padding: 0.62rem 0.75rem;
  }
  .page-article .comment-form textarea { min-height: 96px; }
  .page-article .comment-submit {
    padding: 0.78rem 0.9rem;
    font-size: 0.9rem;
    border-radius: 11px;
  }
  .page-article .news-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

/* ===== Dark mode overrides (homepage / cards) ===== */
html.theme-dark .page-home .ns-home {
  background: #0B0F14 !important;
  color: #F3F4F6 !important;
  --ns-ink: #F3F4F6;
  --ns-muted: #CBD5E1;
  --ns-line: #2A3441;
  --ns-accent-soft: #2A1515;
}
html.theme-dark .ns-top,
html.theme-dark .ns-grid,
html.theme-dark .ns-board,
html.theme-dark .ns-live,
html.theme-dark .ns-live-card,
html.theme-dark .ns-wx,
html.theme-dark .ns-weather,
html.theme-dark .ns-list-item,
html.theme-dark .ns-story,
html.theme-dark .ns-rail,
html.theme-dark .ns-rail__item,
html.theme-dark .mh-hero,
html.theme-dark .mh-sec,
html.theme-dark .mh-sec__list,
html.theme-dark .ns-aside__cards article,
html.theme-dark .ns-aside__cards a,
html.theme-dark .ns-aside .card,
html.theme-dark .container .card {
  background: #151B23 !important;
  color: #E5E7EB !important;
  border-color: #2A3441 !important;
}
html.theme-dark .ns-aside__cards a,
html.theme-dark .ns-list-item,
html.theme-dark .ns-rail__item {
  background: #1A222D !important;
}
html.theme-dark .ns-aside__cards a:nth-child(odd) {
  background: #1F1717 !important;
}
html.theme-dark .site-header {
  background: #111827 !important;
}
html.theme-dark .main-nav__list,
html.theme-dark .main-nav__inner {
  background: transparent !important;
}
html.theme-dark .ns-feature,
html.theme-dark .mh-hero__slide {
  color: #fff !important;
}
html.theme-dark .footer-logo__img,
html.theme-dark .brand__logo {
  opacity: 1;
}

/* ===== Dark mode: mobile header widgets / category tiles ===== */
html.theme-dark .nav-toggle,
html.theme-dark .site-header .nav-toggle {
  background: #1A222D !important;
  border-color: #374151 !important;
}
html.theme-dark .nav-toggle span {
  background: #FF4D4D !important;
}
html.theme-dark .hw-weather,
html.theme-dark .hw-epaper,
html.theme-dark .hw-notify,
html.theme-dark .hw-account,
html.theme-dark .header-widgets .hw-weather,
html.theme-dark .header-widgets .hw-notify {
  background: #1A222D !important;
  border-color: #374151 !important;
  color: #F3F4F6 !important;
}
html.theme-dark .hw-weather__meta strong,
html.theme-dark .hw-weather__meta small {
  color: #F3F4F6 !important;
}
html.theme-dark .mh-cat {
  background: transparent !important;
  border: 0 !important;
  color: #E5E7EB !important;
}
html.theme-dark .mh-cat__ico {
  background: #1A222D !important;
  border-color: #374151 !important;
  color: #FF4D4D !important;
  box-shadow: none !important;
}
html.theme-dark .mh-cat__name {
  color: #E5E7EB !important;
}
html.theme-dark .mh-cat.is-active .mh-cat__ico {
  background: #E50000 !important;
  border-color: #E50000 !important;
  color: #fff !important;
}
html.theme-dark .mh-cat.is-active .mh-cat__name {
  color: #FF6B6B !important;
}
html.theme-dark .mh-cat__ico img {
  filter: none;
}
html.theme-dark .mh-cat.is-active .mh-cat__ico img {
  filter: brightness(0) invert(1) !important;
}
html.theme-dark .header-motto,
html.theme-dark .header-motto strong {
  color: #F3F4F6 !important;
}
html.theme-dark .mobile-bottom-nav,
html.theme-dark .mbn-item {
  background: #111827 !important;
  color: #CBD5E1 !important;
  border-color: #1F2937 !important;
}
html.theme-dark .mbn-item.is-active {
  color: #E50000 !important;
  background: transparent !important;
}