/* NEWS HDSPTV V42 - Mobile App Layout Hard Fix
   Fixes mobile header/logo/menu/search/breaking/news layout collisions by loading LAST. */

@media (max-width: 820px), (max-device-width: 820px) {
  html[data-theme], html[data-theme] body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  html[data-theme] body.hs-public-body {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  html[data-theme] .hs-site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2000 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(148,163,184,.24) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  html[data-theme] .hs-header-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 10px 10px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  html[data-theme] .hs-header-main {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand theme"
      "user user" !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html[data-theme] .top-left {
    grid-area: brand !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html[data-theme] .logo-link {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    color: inherit !important;
    text-decoration: none !important;
  }

  html[data-theme] .logo-mark {
    width: 56px !important;
    height: 44px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    flex: 0 0 56px !important;
    padding: 3px !important;
    border-radius: 13px !important;
  }

  html[data-theme] .logo-mark img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
  }

  html[data-theme] .logo-text {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
  }

  html[data-theme] .logo-text-main {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    letter-spacing: .075em !important;
    font-weight: 950 !important;
  }

  html[data-theme] .logo-text-tag {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    letter-spacing: .10em !important;
    font-weight: 900 !important;
  }

  html[data-theme] .hs-theme-toggle {
    grid-area: theme !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html[data-theme] .user-bar {
    grid-area: user !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html[data-theme] .user-bar::-webkit-scrollbar { display: none !important; }

  html[data-theme] .user-bar a,
  html[data-theme] .user-bar span {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  html[data-theme] .hs-nav-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "search"
      "menu" !important;
    gap: 8px !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  html[data-theme] .nav-search {
    grid-area: search !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 82px !important;
    gap: 8px !important;
    margin: 0 !important;
    order: unset !important;
  }

  html[data-theme] .nav-search input,
  html[data-theme] .nav-search input[type="text"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 42px !important;
  }

  html[data-theme] .nav-search button {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  html[data-theme] .nav-main {
    grid-area: menu !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
    padding: 0 0 2px !important;
    margin: 0 !important;
    order: unset !important;
  }

  html[data-theme] .nav-main::-webkit-scrollbar { display: none !important; }

  html[data-theme] .nav-main a {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 190px !important;
    min-height: 34px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: .075em !important;
    font-weight: 950 !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }

  /* Compact breaking news bar. One clear mobile row with horizontal ticker. */
  html[data-theme] .hs-ticker.hs-breaking-ticker,
  html[data-theme] .hs-breaking-ticker {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 52px !important;
    max-height: 68px !important;
    padding: 9px 10px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-top: 2px solid #FACC15 !important;
    border-bottom: 2px solid #FACC15 !important;
    background: linear-gradient(90deg, #B91C1C 0%, #7F1D1D 58%, #111827 100%) !important;
  }

  html[data-theme="light"] .hs-ticker.hs-breaking-ticker,
  html[data-theme="light"] .hs-breaking-ticker {
    background: linear-gradient(90deg, #B91C1C 0%, #DC2626 62%, #FFF7ED 100%) !important;
  }

  html[data-theme] .hs-breaking-ticker strong {
    width: auto !important;
    max-width: 134px !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 8px 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #FACC15 !important;
    color: #111827 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: .10em !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    text-shadow: none !important;
  }

  html[data-theme] .hs-ticker-track {
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
    padding: 0 !important;
  }

  html[data-theme] .hs-ticker-track::-webkit-scrollbar { display: none !important; }

  html[data-theme] .hs-ticker-track a {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    max-width: 82vw !important;
    min-height: 30px !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.40) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-theme="light"] .hs-ticker-track a {
    color: #111827 !important;
    text-shadow: none !important;
  }

  /* Page width and card layout. */
  html[data-theme] .hs-home,
  html[data-theme] .page,
  html[data-theme] .layout-category,
  html[data-theme] .layout-tag,
  html[data-theme] .layout-search,
  html[data-theme] .layout-article {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px 10px 34px !important;
    margin: 0 !important;
  }

  html[data-theme] .hs-hero,
  html[data-theme] .hs-top-stories-layout,
  html[data-theme] .hs-grid-main,
  html[data-theme] .hs-region-grid,
  html[data-theme] .hs-card-grid,
  html[data-theme] .card-grid,
  html[data-theme] .result-list,
  html[data-theme] .article-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 0 !important;
  }

  html[data-theme] .hs-panel,
  html[data-theme] .hs-top-stories-panel,
  html[data-theme] .hs-featured-panel,
  html[data-theme] .category-header,
  html[data-theme] .tag-header,
  html[data-theme] .search-header,
  html[data-theme] .article-card,
  html[data-theme] .news-card,
  html[data-theme] .result-card,
  html[data-theme] .sidebar-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 14px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  html[data-theme] .hs-section-title,
  html[data-theme] .hs-top-stories-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    justify-content: start !important;
    gap: 5px !important;
    margin: 0 0 12px !important;
  }

  html[data-theme] .hs-section-title h2,
  html[data-theme] .hs-top-stories-head h2 {
    margin: 0 !important;
    font-size: 21px !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  html[data-theme] .hs-kicker {
    display: inline-flex !important;
    width: max-content !important;
    max-width: 100% !important;
    min-height: 30px !important;
    align-items: center !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    background: rgba(250,204,21,.16) !important;
    color: #FACC15 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: .14em !important;
    font-weight: 950 !important;
  }

  html[data-theme="light"] .hs-kicker { color: #B91C1C !important; background: #FFF7D6 !important; }

  /* Mobile top story slider: image card first, readable text below, no overflow. */
  html[data-theme] .hs-top-slider,
  html[data-theme] .hs-top-slider-track {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 430px !important;
    height: 430px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  html[data-theme] .hs-top-slide {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 210px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  html[data-theme] .hs-top-slide-media,
  html[data-theme] .hs-top-slide-media img {
    width: 100% !important;
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
    object-fit: cover !important;
  }

  html[data-theme] .hs-top-slide-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 16px 14px 58px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  html[data-theme] .hs-top-slide-content .hs-meta {
    font-size: 11px !important;
    line-height: 1.25 !important;
    letter-spacing: .06em !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-theme] .hs-top-slide-content h1 {
    margin: 0 !important;
    font-size: 26px !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
    font-weight: 950 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  html[data-theme] .hs-top-slide-content p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  html[data-theme] .hs-read-more {
    min-height: 38px !important;
    width: max-content !important;
    max-width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  html[data-theme] .hs-slider-btn {
    width: 34px !important;
    height: 34px !important;
    top: 186px !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  html[data-theme] .hs-slider-prev { left: 8px !important; }
  html[data-theme] .hs-slider-next { right: 8px !important; }
  html[data-theme] .hs-slider-dots { bottom: 12px !important; gap: 6px !important; padding: 7px 9px !important; }
  html[data-theme] .hs-slider-dots button { width: 8px !important; height: 8px !important; }
  html[data-theme] .hs-slider-dots button.is-active { width: 22px !important; }

  /* Featured and lists: thumbnail + text only, no vertical broken letters. */
  html[data-theme] .hs-story,
  html[data-theme] .hs-featured-panel .hs-story {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 11px !important;
    border-radius: 17px !important;
    overflow: hidden !important;
  }

  html[data-theme] .hs-thumb,
  html[data-theme] .hs-featured-panel .hs-thumb {
    width: 84px !important;
    height: 68px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  html[data-theme] .hs-story h3 {
    margin: 0 0 4px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  html[data-theme] .hs-meta,
  html[data-theme] .news-meta,
  html[data-theme] .result-meta {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  html[data-theme] .hs-category-rail {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  html[data-theme] .hs-category-chip {
    min-width: 0 !important;
    min-height: 76px !important;
    padding: 13px !important;
    border-radius: 17px !important;
  }

  html[data-theme] .hs-category-chip strong {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  html[data-theme] .hs-region {
    min-width: 0 !important;
    min-height: auto !important;
    padding: 13px !important;
    border-radius: 17px !important;
  }

  html[data-theme] .hs-news-card,
  html[data-theme] .news-card {
    min-width: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  html[data-theme] .hs-news-img,
  html[data-theme] .news-thumb {
    width: 100% !important;
    height: 180px !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
  }

  html[data-theme] .hs-news-img img,
  html[data-theme] .news-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  html[data-theme] .hs-news-body,
  html[data-theme] .news-inner {
    padding: 13px !important;
  }

  html[data-theme] .hs-news-body h3,
  html[data-theme] .news-title {
    margin: 0 0 6px !important;
    font-size: 17px !important;
    line-height: 1.28 !important;
    word-break: normal !important;
  }

  html[data-theme] .hs-side {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  html[data-theme] .hs-footer,
  html[data-theme] footer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 10px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 12px !important;
    text-align: center !important;
  }
}

@media (max-width: 390px), (max-device-width: 390px) {
  html[data-theme] .hs-header-inner { padding-left: 8px !important; padding-right: 8px !important; }
  html[data-theme] .logo-link { grid-template-columns: 50px minmax(0, 1fr) !important; gap: 8px !important; }
  html[data-theme] .logo-mark { width: 50px !important; height: 40px !important; min-width: 50px !important; max-width: 50px !important; border-radius: 12px !important; }
  html[data-theme] .logo-text-main { font-size: 16px !important; letter-spacing: .06em !important; }
  html[data-theme] .logo-text-tag { font-size: 9px !important; letter-spacing: .08em !important; }
  html[data-theme] .nav-search { grid-template-columns: minmax(0, 1fr) 74px !important; gap: 7px !important; }
  html[data-theme] .nav-search button { width: 74px !important; min-width: 74px !important; max-width: 74px !important; font-size: 12px !important; }
  html[data-theme] .hs-breaking-ticker { gap: 7px !important; padding: 8px !important; }
  html[data-theme] .hs-breaking-ticker strong { max-width: 112px !important; padding: 8px 9px !important; font-size: 10px !important; letter-spacing: .08em !important; }
  html[data-theme] .hs-ticker-track a { font-size: 13px !important; }
  html[data-theme] .hs-home, html[data-theme] .page, html[data-theme] .layout-category, html[data-theme] .layout-tag, html[data-theme] .layout-search, html[data-theme] .layout-article { padding-left: 8px !important; padding-right: 8px !important; }
  html[data-theme] .hs-category-rail { grid-template-columns: 1fr !important; }
  html[data-theme] .hs-top-slider, html[data-theme] .hs-top-slider-track { height: 420px !important; min-height: 420px !important; }
  html[data-theme] .hs-top-slide { grid-template-rows: 195px minmax(0, 1fr) !important; }
  html[data-theme] .hs-top-slide-media, html[data-theme] .hs-top-slide-media img { height: 195px !important; min-height: 195px !important; max-height: 195px !important; }
  html[data-theme] .hs-top-slide-content h1 { font-size: 24px !important; }
  html[data-theme] .hs-slider-btn { top: 174px !important; }
}