/* NEWS HDSPTV V38 - Mobile Native App Responsive Safety Layer
   Purpose: fixes mobile two-column overflow caused by high-specificity desktop rules.
   Loaded AFTER style.css. Public pages only. */

html[data-theme],
html[data-theme] body{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:hidden!important;
}
html[data-theme] body.hs-public-body,
html[data-theme] body.hs-home-page,
html[data-theme] body.hs-category-page,
html[data-theme] body.hs-search-page,
html[data-theme] body.hs-tag-page,
html[data-theme] body.hs-post-page{
  margin:0!important;
  min-width:0!important;
  background:var(--v37-bg,#020617)!important;
  color:var(--v37-text,#f8fafc)!important;
  -webkit-tap-highlight-color:transparent;
}
html[data-theme] *,
html[data-theme] *::before,
html[data-theme] *::after{
  box-sizing:border-box!important;
}
html[data-theme] img,
html[data-theme] video,
html[data-theme] iframe,
html[data-theme] table{
  max-width:100%!important;
}
html[data-theme] a,
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] p,
html[data-theme] li{
  overflow-wrap:anywhere;
}

/* App-like shell */
html[data-theme] .hs-site-header{
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  isolation:isolate;
}
html[data-theme] .hs-header-inner,
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:min(1320px,calc(100vw - 32px))!important;
  max-width:1320px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
html[data-theme] .hs-header-main,
html[data-theme] .top-left,
html[data-theme] .logo-link,
html[data-theme] .logo-text,
html[data-theme] .hs-nav-shell,
html[data-theme] .nav-main,
html[data-theme] .nav-search,
html[data-theme] .hs-hero,
html[data-theme] .hs-grid-main,
html[data-theme] .hs-panel,
html[data-theme] .article-card,
html[data-theme] .article-main,
html[data-theme] .article-sidebar{
  min-width:0!important;
  max-width:100%!important;
}

/* Desktop/tablet safety: these repeat the media with higher specificity than desktop rules. */
@media (max-width:1180px), (max-device-width:1180px), (pointer:coarse){
  html[data-theme] .hs-nav-shell{
    grid-template-columns:1fr!important;
    overflow:visible!important;
  }
  html[data-theme] .hs-hero,
  html[data-theme] .hs-grid-main,
  html[data-theme] .article-card{
    grid-template-columns:1fr!important;
  }
  html[data-theme] .article-sidebar{
    border-left:0!important;
    border-top:1px solid rgba(148,163,184,.18)!important;
  }
  html[data-theme] .result-list{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:760px), (max-device-width:760px){
  html[data-theme] body.hs-public-body{
    background:var(--v37-bg,#020617)!important;
    padding-bottom:env(safe-area-inset-bottom,0)!important;
  }

  /* Header becomes native-app compact: brand, theme, account row, search, category scroller */
  html[data-theme] .hs-site-header{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
    border-bottom:1px solid rgba(148,163,184,.22)!important;
    box-shadow:0 16px 40px rgba(0,0,0,.24)!important;
  }
  html[data-theme] .hs-header-inner{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    padding:8px 0 10px!important;
    gap:8px!important;
  }
  html[data-theme] .hs-header-main{
    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;width:100%!important;min-width:0!important;}
  html[data-theme] .hs-theme-toggle{
    grid-area:theme!important;
    justify-self:end!important;
    width:auto!important;
    min-width:58px!important;
    min-height:34px!important;
    padding:7px 10px!important;
    font-size:12px!important;
    line-height:1!important;
  }
  html[data-theme] .user-bar{
    grid-area:user!important;
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-end!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    font-size:12px!important;
  }
  html[data-theme] .user-bar a{
    min-height:34px!important;
    padding:8px 13px!important;
    border-radius:999px!important;
  }
  html[data-theme] .logo-link{
    width:100%!important;
    gap:10px!important;
  }
  html[data-theme] .logo-mark{
    width:70px!important;
    height:50px!important;
    min-width:70px!important;
    max-width:70px!important;
    flex:0 0 70px!important;
    border-radius:16px!important;
    padding:4px!important;
  }
  html[data-theme] .logo-text-main{
    max-width:calc(100vw - 160px)!important;
    font-size:18px!important;
    line-height:1.1!important;
    letter-spacing:.10em!important;
  }
  html[data-theme] .logo-text-tag{
    max-width:calc(100vw - 160px)!important;
    font-size:10px!important;
    line-height:1.2!important;
    letter-spacing:.12em!important;
  }
  html[data-theme] .hs-nav-shell{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    overflow:visible!important;
    width:100%!important;
  }
  html[data-theme] .nav-search{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 84px!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    order:1!important;
  }
  html[data-theme] .nav-search input[type="text"],
  html[data-theme] .nav-search input{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    padding:0 14px!important;
    font-size:13px!important;
  }
  html[data-theme] .nav-search button{
    min-width:0!important;
    width:84px!important;
    height:42px!important;
    padding:0!important;
    font-size:13px!important;
  }
  html[data-theme] .nav-main{
    order:2!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding:2px 1px 8px!important;
    margin:0!important;
    white-space:nowrap!important;
    width:100%!important;
    scrollbar-width:none!important;
  }
  html[data-theme] .nav-main::-webkit-scrollbar{display:none!important;}
  html[data-theme] .nav-main a{
    flex:0 0 auto!important;
    scroll-snap-align:start;
    max-width:172px!important;
    min-height:34px!important;
    padding:8px 10px!important;
    font-size:11px!important;
    line-height:1!important;
    border-radius:999px!important;
    letter-spacing:.07em!important;
  }

  /* Content: single, readable mobile feed */
  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:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    padding-top:12px!important;
    padding-bottom:34px!important;
  }
  html[data-theme] .hs-ticker{
    display:flex!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
    -webkit-overflow-scrolling:touch;
    gap:7px!important;
    padding:9px 10px!important;
    scrollbar-width:none!important;
  }
  html[data-theme] .hs-ticker::-webkit-scrollbar{display:none!important;}
  html[data-theme] .hs-hero,
  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{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    width:100%!important;
    max-width:100%!important;
    margin-top:14px!important;
  }
  html[data-theme] .hs-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{
    border-radius:22px!important;
  }
  html[data-theme] .hs-panel,
  html[data-theme] .category-header,
  html[data-theme] .tag-header,
  html[data-theme] .search-header{
    padding:16px!important;
  }
  html[data-theme] .hs-section-title{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin-bottom:12px!important;
  }
  html[data-theme] .hs-section-title h2{
    font-size:20px!important;
    line-height:1.2!important;
  }
  html[data-theme] .hs-lead{
    min-height:260px!important;
    width:100%!important;
    padding:20px!important;
    border-radius:20px!important;
  }
  html[data-theme] .hs-lead h1,
  html[data-theme] .hs-lead h1 a{
    font-size:clamp(28px,9vw,40px)!important;
    line-height:1.06!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
  html[data-theme] .hs-story-list{
    gap:12px!important;
  }
  html[data-theme] .hs-story{
    display:grid!important;
    grid-template-columns:78px minmax(0,1fr)!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    padding:12px!important;
    border-radius:18px!important;
  }
  html[data-theme] .hs-story h3{
    font-size:15px!important;
    line-height:1.25!important;
    margin:0 0 5px!important;
  }
  html[data-theme] .hs-thumb{
    width:78px!important;
    height:64px!important;
    min-width:78px!important;
    border-radius:14px!important;
  }
  html[data-theme] .hs-install-hint{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    width:100%!important;
    padding:14px!important;
    border-radius:18px!important;
  }
  html[data-theme] .hs-install-hint button{
    min-height:42px!important;
    padding:0 20px!important;
    border-radius:999px!important;
    font-weight:950!important;
  }
  html[data-theme] .hs-category-rail{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  html[data-theme] .hs-category-chip{
    min-height:76px!important;
    border-radius:18px!important;
    padding:14px!important;
  }
  html[data-theme] .hs-region{
    min-height:auto!important;
    padding:14px!important;
    border-radius:18px!important;
  }
  html[data-theme] .hs-news-card,
  html[data-theme] .news-card{
    border-radius:20px!important;
    overflow:hidden!important;
  }
  html[data-theme] .hs-news-img,
  html[data-theme] .news-thumb{
    height:178px!important;
    border-radius:18px 18px 0 0!important;
  }
  html[data-theme] .hs-news-body,
  html[data-theme] .news-inner{
    padding:14px!important;
  }
  html[data-theme] .hs-news-body h3,
  html[data-theme] .news-title{
    font-size:17px!important;
    line-height:1.25!important;
  }
  html[data-theme] .hs-side{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  /* Article and list pages */
  html[data-theme] .breadcrumb{
    font-size:12px!important;
    line-height:1.4!important;
    margin-bottom:10px!important;
  }
  html[data-theme] .article-main,
  html[data-theme] .article-sidebar{
    width:100%!important;
    max-width:100%!important;
  }
  html[data-theme] .article-inner{
    padding:20px!important;
  }
  html[data-theme] .article-title{
    font-size:clamp(28px,9vw,38px)!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
  }
  html[data-theme] .article-excerpt,
  html[data-theme] .article-body{
    font-size:16px!important;
    line-height:1.72!important;
  }
  html[data-theme] .result-card{
    grid-template-columns:86px minmax(0,1fr)!important;
    gap:12px!important;
    padding:12px!important;
  }
  html[data-theme] .result-thumb{
    width:86px!important;
    height:70px!important;
    border-radius:14px!important;
  }
  html[data-theme] .result-title{
    font-size:16px!important;
    line-height:1.25!important;
  }
  html[data-theme] .category-title,
  html[data-theme] .tag-title,
  html[data-theme] .search-title{
    font-size:clamp(28px,9vw,38px)!important;
    line-height:1.08!important;
  }
  html[data-theme] .hs-footer,
  html[data-theme] footer{
    width:100%!important;
    padding:18px 12px calc(18px + env(safe-area-inset-bottom,0))!important;
    font-size:12px!important;
  }
}

@media (max-width:430px), (max-device-width:430px){
  html[data-theme] .hs-header-inner,
  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:calc(100vw - 18px)!important;
    max-width:calc(100vw - 18px)!important;
  }
  html[data-theme] .logo-mark{
    width:66px!important;
    height:48px!important;
    min-width:66px!important;
    flex-basis:66px!important;
  }
  html[data-theme] .logo-text-main{font-size:17px!important;max-width:calc(100vw - 150px)!important;}
  html[data-theme] .logo-text-tag{font-size:9px!important;max-width:calc(100vw - 150px)!important;}
  html[data-theme] .nav-search{grid-template-columns:minmax(0,1fr) 78px!important;}
  html[data-theme] .nav-search button{width:78px!important;}
  html[data-theme] .hs-category-rail{grid-template-columns:1fr 1fr!important;}
  html[data-theme] .hs-story{grid-template-columns:72px minmax(0,1fr)!important;}
  html[data-theme] .hs-thumb{width:72px!important;height:60px!important;min-width:72px!important;}
}

@media (max-width:360px), (max-device-width:360px){
  html[data-theme] .hs-header-main{grid-template-columns:1fr!important;grid-template-areas:"brand" "theme" "user"!important;}
  html[data-theme] .hs-theme-toggle{justify-self:start!important;}
  html[data-theme] .user-bar{justify-content:flex-start!important;}
  html[data-theme] .nav-search{grid-template-columns:1fr!important;}
  html[data-theme] .nav-search button{width:100%!important;}
  html[data-theme] .hs-category-rail{grid-template-columns:1fr!important;}
  html[data-theme] .hs-story{grid-template-columns:1fr!important;}
  html[data-theme] .hs-thumb{width:100%!important;height:130px!important;}
  html[data-theme] .result-card{grid-template-columns:1fr!important;}
  html[data-theme] .result-thumb{width:100%!important;height:140px!important;}
}

/* Auth pages should never fall back to default browser styling on mobile. */
@media (max-width:760px), (max-device-width:760px){
  html[data-theme] .hs-auth-body{
    min-height:100dvh!important;
    padding:14px!important;
    overflow-x:hidden!important;
  }
  html[data-theme] .hs-auth-shell{
    width:100%!important;
    max-width:520px!important;
    grid-template-columns:1fr!important;
    border-radius:24px!important;
  }
  html[data-theme] .hs-auth-aside{display:none!important;}
  html[data-theme] .hs-auth-card{padding:22px!important;}
  html[data-theme] .hs-auth-field input{width:100%!important;min-width:0!important;}
  html[data-theme] .hs-auth-links{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
}