/* Neem Karoli Baba Stories — Responsive & ad layout layer (mobile-first) */

/* ---------- Page shell + sidebar (desktop monetization) ---------- */
.page-shell{
  max-width:var(--container);
  margin:0 auto;
  padding:100px 22px 40px;
  display:grid;
  gap:32px 40px;
  align-items:start;
}
.page-shell--story{grid-template-columns:minmax(0,1fr) minmax(260px,320px)}
.page-main{min-width:0}
.page-sidebar{display:none}
@media(min-width:1024px){
  .page-sidebar{
    display:flex;flex-direction:column;gap:22px;
    position:sticky;top:96px;
    max-height:calc(100vh - 110px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:#7A0000 rgba(26,16,16,.06);
  }
}
.sidebar-panel{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,248,240,.92));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow-sm);
}
.sidebar-title{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--red-deep);
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.sidebar-story-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.sidebar-story-list a{
  display:block;padding:10px 8px;border-radius:var(--radius);
  transition:background .25s var(--ease),padding-left .25s;
}
.sidebar-story-list a:hover{background:var(--cream-2);padding-left:12px}
.sidebar-story-title{
  display:block;font-size:.9rem;font-weight:600;color:var(--red-deep);
  line-height:1.35;
}
.sidebar-story-meta{
  display:block;font-size:.72rem;color:var(--muted);
  margin-top:4px;text-transform:uppercase;letter-spacing:.08em;
}
.page-sidebar .ad-slot{margin:0;padding:0;min-height:120px}
.page-sidebar .ad-box{min-height:250px;font-size:.72rem}

/* Story pages: see assets/css/story-read.css (loaded on story.php only) */
.article--story{padding:0;max-width:none}
.article-section-title{margin-bottom:20px;font-size:clamp(1.35rem,3vw,1.7rem)}

/* ---------- Ad system (CLS-safe, mobile revenue) ---------- */
.ad-slot{
  margin:24px auto;
  max-width:100%;
  padding:0;
  min-height:var(--ad-min, 90px);
  contain:layout style;
  content-visibility:auto;
  contain-intrinsic-size:auto var(--ad-min, 90px);
}
.ad-slot__inner{
  min-height:var(--ad-min, 90px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ad-slot .ad-box,
.ad-slot iframe,
.ad-slot ins,
.ad-slot__inner iframe,
.ad-slot__inner ins{
  max-width:100%;
  margin:0 auto;
}
.ad-slot--live .ad-slot__inner{min-height:var(--ad-min, 90px)}
.ad-slot--placeholder .ad-box{min-height:var(--ad-min, 90px);width:100%}
.ad-header{margin:16px auto 8px;padding:0 16px}
.ad-header .ad-box{min-height:50px;max-height:120px}
.ad-in-content .ad-box{min-height:90px}
.ad-footer{margin:20px auto 10px}
.ad-sidebar .ad-box{min-height:200px}
.ad-native-break{
  grid-column:1 / -1;
  margin:8px 0 16px;
  padding:0;
}
.ad-sticky-mobile{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:95;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background:rgba(255,248,240,.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(60,10,10,.12);
  transform:translateZ(0);
}
.ad-sticky-mobile .ad-slot{margin:0;padding:0;min-height:0}
.ad-sticky-mobile .ad-box{min-height:50px;max-height:60px;margin:0;border-radius:10px}
.ad-sticky-mobile.is-dismissed{display:none!important}
.ad-sticky-close{
  position:absolute;top:4px;right:8px;z-index:2;
  width:28px;height:28px;border-radius:50%;
  background:rgba(122,0,0,.12);color:var(--red-deep);
  font-size:1.2rem;line-height:1;display:grid;place-items:center;
}
.ad-sticky-close:hover{background:var(--red);color:#fff}
@media(max-width:760px){
  body.has-sticky-ad{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
  .ad-sticky-mobile{display:block}
}
@media(min-width:761px){
  .ad-sticky-mobile{display:none!important}
  body.has-sticky-ad{padding-bottom:0}
}

/* ---------- Responsive grids ---------- */
.grid--stories{align-items:stretch}
.grid-story-item{display:flex;min-width:0}
.grid-story-item .card-post{width:100%}
.grid--related .card-post{height:100%}

@media(max-width:424px){
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr;gap:20px}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media(min-width:425px) and (max-width:767px){
  .grid-3{grid-template-columns:repeat(2,1fr);gap:20px}
  .grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media(min-width:768px) and (max-width:1023px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .page-shell{padding-top:108px}
}
@media(min-width:1024px) and (max-width:1439px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .container{max-width:1140px}
}
@media(min-width:1440px){
  :root{--container:1280px}
  .hero-inner{max-width:900px}
  .section-sub{max-width:720px}
  .page-shell--story{grid-template-columns:minmax(0,1fr) 300px;gap:48px}
}

/* ---------- Mobile-first UX ---------- */
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.hero{min-height:0}
.card-post{display:flex;flex-direction:column;height:100%}

@media(max-width:767px){
  .section{padding:56px 0}
  .section-sm{padding:44px 0}
  .subhero{padding:100px 0 48px}
  .subhero h1{font-size:clamp(1.65rem,7vw,2.2rem)}
  .hero-inner{padding:108px 0 64px}
  .hero-meta{margin-top:36px;gap:20px 28px}
  .hero-meta .num{font-size:1.45rem}
  .hero-actions .btn{min-height:48px;flex:1 1 auto;justify-content:center}
  .hero-meta .stat{min-width:calc(50% - 14px)}
  .filters{flex-direction:column;align-items:stretch;gap:14px;padding:14px}
  .search-input{width:100%;min-width:0}
  .chip{min-height:40px;padding:10px 16px}
  .btn,.play-btn,.icon-btn,.chip{touch-action:manipulation}
  .icon-btn,.hamburger{min-width:44px;min-height:44px}
  .card:hover,.quote-card:hover,.bhajan-card:hover,.video-card:hover,.cat-pill:hover{
    transform:none;
  }
  .card-foot a,.nav-links a,.drawer a{padding:4px 0}
  .quote-card{padding:28px 20px}
  .quote-card blockquote{font-size:1.1rem}
  .bhajan-card{padding:20px}
  .play-btn{width:48px;height:48px}
  .footer-grid{gap:28px}
  .footer .socials a{min-width:44px;min-height:44px}
  .newsletter-form input,.newsletter-form button{min-height:48px}
  .page-shell{padding:92px 16px 32px}
  .breadcrumb{font-size:.75rem;flex-wrap:wrap}
  .share-sticky{display:none}
}

@media(min-width:768px) and (max-width:1023px){
  .hero-inner{padding:120px 0 80px}
  .card.featured .card-body{padding:28px}
  .grid-3{gap:24px}
}

/* Touch devices: reduce motion cost */
@media(hover:none){
  .card:hover,.quote-card:hover,.bhajan-card:hover,.video-card:hover,.cat-pill:hover{
    transform:none;box-shadow:var(--shadow-sm);
  }
  .card:hover .card-media img{transform:none}
}

/* Ultra-wide balance */
@media(min-width:1600px){
  .hero-bg img{object-position:center 30%}
  .footer-grid{max-width:var(--container);margin:0 auto}
}

/* ---------- Production launch polish ---------- */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.hero-reveal>*{animation:none!important;transition:none!important}
  .page-loader .loader-fill{animation:none!important}
}
.premium-site.is-ready{-webkit-overflow-scrolling:touch}
.pagination{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;
}
.pagination .btn{min-height:44px}
.card-post .card-body{gap:12px}
.section-title + .section-sub{margin-top:-6px}
.subhero .container > p{max-width:52ch}
.contact-form .field input,
.contact-form .field textarea{
  font-size:16px;
  border-radius:var(--radius);
}
.nav-links a.active{
  color:var(--gold);
  position:relative;
}
.header.solid .nav-links a.active,
.header.scrolled .nav-links a.active{color:var(--red-deep)}
.nav-links a.active::after,
.header.scrolled .nav-links a.active::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  border-radius:2px;
}
#stickyMobileAd:not(:has([data-ad-id], iframe, ins)){display:none!important}
body:not(.has-sticky-ad) .ad-sticky-mobile{display:none!important}
img[loading="lazy"]{content-visibility:auto}
.grid--stories{gap:clamp(20px,3vw,28px)}
.card-post{will-change:auto}
@media(max-width:767px){
  .card.featured{flex-direction:column}
  .card.featured .card-media{min-height:220px;aspect-ratio:16/10}
  .ad-header{padding:0 12px;margin-top:12px}
  .ad-native-break{margin:12px 0}
}