/* NewsAI Mobile Adaptation
   Dedicated phone-first layer loaded after the desktop stylesheet.
   Keeps the original visual identity while converting every template to a single-column, touch-friendly mobile UI. */

:root{
  color-scheme: light;
  --mobile-max: 480px;
  --mobile-gutter: 14px;
  --mobile-tabbar-h: 74px;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.mobile-version{
  --container: var(--mobile-max);
  background:
    radial-gradient(circle at 0% 0%, rgba(37,99,235,.08), transparent 32%),
    linear-gradient(180deg,#ffffff 0%,#f8faff 58%,#ffffff 100%);
  padding-bottom: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom,0px));
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.mobile-version.dark{
  background:
    radial-gradient(circle at 12% 0%,rgba(37,99,235,.22),transparent 32%),
    #070b17;
}

body.mobile-version .container{
  width:min(var(--mobile-max), calc(100% - (var(--mobile-gutter) * 2)));
}

/* Compact app header */
body.mobile-version .site-header{
  position:sticky;
  top:0;
  z-index:70;
  background:rgba(255,255,255,.91);
  border-bottom:1px solid rgba(226,232,240,.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

body.mobile-version.dark .site-header{
  background:rgba(7,11,23,.9);
  border-bottom-color:#1f2a44;
}

body.mobile-version .header-inner{
  min-height:64px;
  height:auto;
  padding:8px 0 7px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

body.mobile-version .brand{
  gap:9px;
  margin-right:0;
  min-width:0;
}

body.mobile-version .brand-mark{
  width:34px;
  height:34px;
  border-radius:13px;
  flex:0 0 auto;
}

body.mobile-version .brand-mark:after{
  inset:9px;
  border-radius:8px;
}

body.mobile-version .brand-name{
  font-size:17px;
  letter-spacing:-.035em;
}

body.mobile-version .header-actions{
  margin-left:auto;
  gap:7px;
}

body.mobile-version .icon-btn{
  width:38px;
  height:38px;
  border-radius:14px;
  background:var(--surface);
  border:1px solid var(--line);
}

body.mobile-version .lang{
  display:none;
}

body.mobile-version .toggle{
  display:flex;
  transform:scale(.94);
  transform-origin:center;
}

body.mobile-version .header-actions .btn{
  min-height:38px;
  padding:9px 12px;
  border-radius:13px;
  font-size:12px;
}

/* Horizontal channel rail */
body.mobile-version .main-nav{
  order:3;
  width:100%;
  flex:0 0 100%;
  display:flex;
  gap:7px;
  overflow-x:auto;
  overflow-y:visible;
  padding:2px 0 4px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

body.mobile-version .main-nav::-webkit-scrollbar,
body.mobile-version .quick-tabs::-webkit-scrollbar,
body.mobile-version .stat-row::-webkit-scrollbar,
body.mobile-version .side-nav::-webkit-scrollbar{
  display:none;
}

body.mobile-version .nav-link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:#475467;
  font-size:12px;
  line-height:1;
  font-weight:750;
  white-space:nowrap;
  scroll-snap-align:start;
}

body.mobile-version.dark .nav-link{
  color:#d5ddf0;
  background:var(--surface-2);
}

body.mobile-version .nav-link.active{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  box-shadow:0 10px 18px rgba(79,70,229,.18);
}

body.mobile-version .more-menu{
  flex:0 0 auto;
  position:static;
}

body.mobile-version .more-panel{
  position:fixed;
  left:var(--mobile-gutter);
  right:var(--mobile-gutter);
  top:auto;
  bottom:calc(var(--mobile-tabbar-h) + 18px + env(safe-area-inset-bottom,0px));
  width:auto;
  max-height:min(62vh,520px);
  overflow:auto;
  padding:12px;
  border-radius:22px;
  z-index:90;
  box-shadow:0 24px 60px rgba(15,23,42,.24);
  grid-template-columns:1fr 1fr;
}

body.mobile-version .more-panel a{
  min-height:42px;
  display:flex;
  align-items:center;
}

/* Home page */
body.mobile-version .hero{
  padding:24px 0 10px;
}

body.mobile-version .hero-grid{
  display:grid;
  grid-template-columns:1fr !important;
  gap:14px;
}

body.mobile-version .hero h1{
  font-size:clamp(34px,9.5vw,42px);
  line-height:.98;
  margin:16px 0 12px;
  letter-spacing:-.065em;
}

body.mobile-version .hero-copy p{
  font-size:15px;
  line-height:1.55;
  max-width:100%;
}

body.mobile-version .eyebrow{
  padding:7px 11px;
  border-radius:12px;
  font-size:11px;
}

body.mobile-version .hero-search{
  margin-top:17px;
  min-height:56px;
  padding:6px 6px 6px 14px;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(17,24,39,.08);
}

body.mobile-version .hero-search input{
  min-width:0;
  font-size:14px;
}

body.mobile-version .spark-btn{
  width:44px;
  height:44px;
  border-radius:14px;
  flex:0 0 auto;
}

body.mobile-version .quick-tabs{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  margin:18px calc(var(--mobile-gutter) * -1) 0;
  padding:0 var(--mobile-gutter) 7px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}

body.mobile-version .quick-tab{
  flex:0 0 auto;
  min-height:36px;
  padding:8px 12px;
  border-radius:12px;
  white-space:nowrap;
  scroll-snap-align:start;
}

body.mobile-version .top-story{
  min-height:275px;
  border-radius:22px;
}

body.mobile-version .top-story-content{
  padding:22px 18px;
}

body.mobile-version .story-tags{
  margin-bottom:18px;
}

body.mobile-version .story-label{
  padding:7px 10px;
  font-size:10px;
}

body.mobile-version .top-story h2{
  font-size:24px;
  line-height:1.12;
}

body.mobile-version .story-text{
  font-size:13px;
}

body.mobile-version .arrow-tile{
  width:44px;
  height:44px;
  border-radius:14px;
}

body.mobile-version .metrics-stack{
  grid-template-columns:1fr !important;
  gap:12px;
}

body.mobile-version .metric-card{
  min-height:auto;
  padding:17px 16px 14px;
  border-radius:18px;
}

body.mobile-version .metric-value{
  font-size:24px;
}

body.mobile-version .mini-chart,
body.mobile-version .mini-bars{
  margin-left:68px;
}

/* General sections */
body.mobile-version .section-grid,
body.mobile-version .content-grid,
body.mobile-version .article-layout,
body.mobile-version .dashboard-shell{
  grid-template-columns:1fr !important;
  gap:16px;
}

body.mobile-version .panel{
  padding:14px;
  border-radius:20px;
}

body.mobile-version .panel-head{
  align-items:flex-start;
  gap:10px;
}

body.mobile-version .section-title{
  font-size:17px;
}

body.mobile-version .cards,
body.mobile-version .dashboard-metrics,
body.mobile-version .media-grid,
body.mobile-version .pricing,
body.mobile-version .metric-grid,
body.mobile-version .footer-grid,
body.mobile-version .pages-grid{
  grid-template-columns:1fr !important;
}

body.mobile-version .cards{
  display:grid;
  gap:12px;
}

body.mobile-version .news-card{
  border-radius:18px;
}

body.mobile-version .news-card img{
  height:168px;
}

body.mobile-version .card-body{
  padding:13px;
}

body.mobile-version .card-title{
  font-size:15px;
}

body.mobile-version .dashboard-metrics{
  gap:12px;
}

body.mobile-version .dash-card{
  min-height:96px;
  padding:16px;
  border-radius:18px;
}

body.mobile-version .dash-value{
  font-size:26px;
}

body.mobile-version .dot-matrix{
  grid-template-columns:repeat(10,6px);
}

body.mobile-version .heatmap img{
  height:auto;
  min-height:210px;
  object-fit:contain;
}

body.mobile-version .region-row{
  grid-template-columns:1fr auto auto;
  gap:8px;
  font-size:13px;
}

body.mobile-version .cta-strip{
  margin:20px auto 28px;
  padding:16px;
  border-radius:22px;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
}

body.mobile-version .cta-text{
  gap:12px;
}

body.mobile-version .cta-title{
  font-size:17px;
}

body.mobile-version .cta-sub{
  font-size:13px;
}

body.mobile-version .email-box{
  min-width:0;
  width:100%;
  padding:8px;
  border-radius:17px;
  flex-direction:column;
  background:rgba(255,255,255,.96);
}

body.mobile-version .email-box input{
  width:100%;
  min-height:44px;
  padding:0 12px;
}

body.mobile-version .email-box .btn{
  width:100%;
}

/* Listing/category pages */
body.mobile-version .sub-hero{
  padding:26px 0 18px;
  background:
    radial-gradient(circle at 0% 0%,rgba(37,99,235,.14),transparent 34%),
    radial-gradient(circle at 100% 0%,rgba(139,92,246,.13),transparent 34%),
    var(--surface-2);
}

body.mobile-version .breadcrumbs{
  font-size:12px;
  margin-bottom:11px;
}

body.mobile-version .page-title{
  font-size:clamp(32px,9vw,40px);
  line-height:1;
  margin-bottom:12px;
}

body.mobile-version .page-desc{
  font-size:15px;
  line-height:1.55;
}

body.mobile-version .stat-row{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  gap:9px;
  padding-bottom:6px;
  scroll-snap-type:x proximity;
}

body.mobile-version .stat-pill{
  flex:0 0 auto;
  padding:10px 12px;
  border-radius:14px;
  font-size:12px;
  scroll-snap-align:start;
}

body.mobile-version .page-wrap{
  padding:18px 0 42px;
}

body.mobile-version .feature-card,
body.mobile-version .list-card{
  grid-template-columns:1fr !important;
  gap:12px;
  padding:12px;
  border-radius:20px;
}

body.mobile-version .feature-card img{
  height:185px;
  border-radius:16px;
}

body.mobile-version .list-card img{
  height:160px;
  border-radius:15px;
}

body.mobile-version .feature-card h2{
  font-size:23px;
}

body.mobile-version .list-card h3{
  font-size:17px;
}

body.mobile-version .sidebar{
  gap:14px;
}

body.mobile-version .side-card{
  padding:16px;
  border-radius:20px;
}

body.mobile-version .mini-item{
  grid-template-columns:54px 1fr;
}

body.mobile-version .mini-item img{
  height:48px;
}

/* Article and media pages */
body.mobile-version .article-main{
  padding:20px;
  border-radius:22px;
}

body.mobile-version .article-main h1{
  font-size:clamp(30px,8.4vw,38px);
  line-height:1.04;
  margin:10px 0 14px;
}

body.mobile-version .article-meta{
  gap:10px;
  font-size:12px;
}

body.mobile-version .author-chip{
  gap:8px;
}

body.mobile-version .avatar{
  width:36px;
  height:36px;
}

body.mobile-version .article-hero-img,
body.mobile-version .video-frame{
  height:225px;
  border-radius:20px;
  margin:18px 0;
}

body.mobile-version .article-body p{
  font-size:16px;
  line-height:1.68;
}

body.mobile-version .summary-box{
  padding:16px;
  border-radius:18px;
}

body.mobile-version .quote{
  font-size:19px;
  line-height:1.35;
  padding-left:14px;
  border-left-width:4px;
}

body.mobile-version .share-row{
  display:flex;
  gap:8px;
  overflow-x:auto;
  flex-wrap:nowrap;
  padding-bottom:4px;
}

body.mobile-version .share-row .btn{
  white-space:nowrap;
  flex:0 0 auto;
}

body.mobile-version .timeline{
  padding-left:22px;
}

body.mobile-version .timeline-item{
  padding:14px;
}

body.mobile-version .timeline-item:before{
  left:-24px;
}

body.mobile-version .media-grid{
  display:grid;
  gap:14px;
}

body.mobile-version .media-card{
  border-radius:20px;
}

body.mobile-version .media-card img{
  height:180px;
}

body.mobile-version .media-body{
  padding:14px;
}

body.mobile-version .play-btn{
  width:64px;
  height:64px;
  font-size:28px;
}

/* Auth, forms, checkout */
body.mobile-version .auth-shell{
  min-height:calc(100dvh - 78px);
  padding:28px 0 calc(98px + env(safe-area-inset-bottom,0px));
  align-items:start;
}

body.mobile-version .auth-card{
  width:min(430px, calc(100% - 28px));
  padding:24px 20px;
  border-radius:24px;
  margin-top:0;
}

body.mobile-version .auth-card h1{
  font-size:30px;
}

body.mobile-version .form{
  gap:13px;
}

body.mobile-version .form-row{
  grid-template-columns:1fr !important;
  gap:12px;
}

body.mobile-version .field input,
body.mobile-version .field select,
body.mobile-version .field textarea{
  min-height:46px;
  border-radius:14px;
  font-size:16px;
}

body.mobile-version .btn{
  min-height:44px;
  border-radius:14px;
}

body.mobile-version .pricing{
  gap:14px;
}

body.mobile-version .price-card{
  padding:22px 18px;
  border-radius:22px;
}

body.mobile-version .price-card.featured{
  transform:none;
}

body.mobile-version .price{
  font-size:38px;
}

/* User/admin dashboards */
body.mobile-version .dashboard-shell{
  padding:16px 0 46px;
}

body.mobile-version .dashboard-side{
  position:static;
  padding:8px;
  border-radius:19px;
  overflow:hidden;
}

body.mobile-version .side-nav{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}

body.mobile-version .side-nav a{
  flex:0 0 auto;
  min-height:40px;
  display:flex;
  align-items:center;
  white-space:nowrap;
  scroll-snap-align:start;
}

body.mobile-version .dash-main{
  gap:14px;
}

body.mobile-version .dash-hero{
  padding:20px;
  border-radius:22px;
}

body.mobile-version .dash-hero h1{
  font-size:30px;
}

body.mobile-version .metric-grid{
  display:grid;
  gap:12px;
}

body.mobile-version .table-card{
  border-radius:20px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

body.mobile-version .data-table{
  min-width:640px;
}

body.mobile-version .data-table th,
body.mobile-version .data-table td{
  padding:13px 14px;
}

/* Legal, utility and page directory */
body.mobile-version .legal{
  padding:20px;
  border-radius:22px;
}

body.mobile-version .legal p,
body.mobile-version .legal li{
  font-size:15px;
}

body.mobile-version .pages-grid{
  display:grid;
  gap:14px;
}

body.mobile-version .page-group{
  padding:16px;
  border-radius:20px;
}

body.mobile-version .page-group a{
  min-height:38px;
  font-size:14px;
}

body.mobile-version .error-page{
  min-height:calc(100dvh - 78px);
  padding:36px var(--mobile-gutter) 100px;
}

body.mobile-version .error-code{
  font-size:clamp(72px,24vw,110px);
}

/* Footer and mobile tab bar */
body.mobile-version .footer{
  margin-top:18px;
  padding:28px 0 calc(108px + env(safe-area-inset-bottom,0px));
}

body.mobile-version .footer-grid{
  gap:18px;
}

body.mobile-version .footer a{
  min-height:32px;
  display:flex;
  align-items:center;
}

body.mobile-version .mobile-tabbar{
  position:fixed;
  left:50%;
  bottom:calc(10px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  width:min(var(--mobile-max), calc(100% - 20px));
  height:64px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:center;
  gap:2px;
  padding:7px;
  border:1px solid rgba(226,232,240,.86);
  border-radius:24px;
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 45px rgba(15,23,42,.16);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  z-index:95;
}

body.mobile-version.dark .mobile-tabbar{
  background:rgba(12,18,34,.92);
  border-color:#25314b;
  box-shadow:0 20px 55px rgba(0,0,0,.36);
}

body.mobile-version .mobile-tabbar a{
  min-width:0;
  height:50px;
  border-radius:18px;
  display:grid;
  place-items:center;
  gap:2px;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  line-height:1;
}

body.mobile-version .mobile-tabbar svg{
  width:20px;
  height:20px;
  display:block;
}

body.mobile-version .mobile-tabbar a.active{
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  box-shadow:0 10px 22px rgba(79,70,229,.22);
}

body.mobile-version .mobile-tabbar a:focus-visible,
body.mobile-version .nav-link:focus-visible,
body.mobile-version .btn:focus-visible{
  outline:3px solid rgba(37,99,235,.26);
  outline-offset:2px;
}

body.mobile-version .toast{
  bottom:calc(var(--mobile-tabbar-h) + 20px + env(safe-area-inset-bottom,0px));
  max-width:calc(100% - 28px);
  white-space:normal;
  text-align:center;
}

/* Preserve source image page while keeping it usable on phones */
body.mobile-version.source-image-page{
  padding-bottom:0;
  background:#fff;
}

body.mobile-version.source-image-page main{
  width:100%;
  overflow:auto;
}

body.mobile-version.source-image-page img{
  width:100%;
  min-width:360px;
  height:auto;
}

body.mobile-version.source-image-page .mobile-tabbar{
  display:none;
}

/* Ultra-small devices */
@media (max-width:380px){
  body.mobile-version{
    --mobile-gutter:12px;
  }
  body.mobile-version .brand-name{
    font-size:16px;
  }
  body.mobile-version .header-actions .btn{
    display:none;
  }
  body.mobile-version .hero h1{
    font-size:32px;
  }
  body.mobile-version .top-story{
    min-height:255px;
  }
  body.mobile-version .mobile-tabbar{
    width:calc(100% - 14px);
    border-radius:22px;
  }
  body.mobile-version .mobile-tabbar a{
    font-size:9px;
  }
}

/* Wider tablets still use the phone-first hierarchy, with comfortable width. */
@media (min-width:700px){
  body.mobile-version{
    --mobile-max:560px;
  }
}