/* ==========================================================================
   WIDESPROUT STORIES — Responsive Rules
   ========================================================================== */

/* -------------------- 1200px -------------------- */
@media (max-width: 1200px){
  :root{ --container-pad: 2rem; }
  .worlds-grid{ grid-template-columns: repeat(2, 1fr); }
  .worth-grid{ grid-template-columns: repeat(2, 1fr); }
  .video-grid{ grid-template-columns: repeat(2, 1fr); }
  .story-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; gap: var(--space-xl) var(--space-lg); }
  .footer-brand{ grid-column: 1 / -1; }
  .series-card{ grid-template-columns: 240px 1fr auto; }
}

/* -------------------- 1024px (tablet) -------------------- */
@media (max-width: 1024px){
  .nav-list{ gap: 1.4rem; }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-side{ flex-direction: row; }
  .hero-side-card{ flex:1; }
  .homepage-latest-layout{ grid-template-columns: 1fr; gap: var(--space-xl); }
  .feature-grid{ grid-template-columns: 1fr; gap: var(--space-lg); }
  .support-grid{ grid-template-columns: 1fr 1fr; }
  .subscribe-grid{ grid-template-columns: 1fr; }
  .subscribe-media{ order:-1; min-height: 280px; }
  .about-block{ grid-template-columns: 1fr; }
  .about-media{ order:-1; }
  .series-card{ grid-template-columns: 1fr; text-align:left; gap: var(--space-sm); }
  .series-card .btn{ justify-self:flex-start; }
  .mega-menu-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* -------------------- 768px (nav breakpoint) -------------------- */
@media (max-width: 768px){
  :root{ --container-pad: 1.25rem; --space-2xl: 4rem; --space-3xl: 5rem; }

  .main-nav .nav-list,
  .main-nav .subscribe-btn-desktop{ display:none; }
  .hamburger{ display:flex; }

  .header-actions{ gap: 1rem; }

  .hero{ padding-top: var(--space-lg); }
  .hero-side{ flex-direction: column; }
  .worlds-grid{ grid-template-columns: 1fr; }
  .world-card{ min-height: 240px; }
  .worth-grid{ grid-template-columns: 1fr; }
  .video-grid{ grid-template-columns: 1fr; }
  .story-grid{ grid-template-columns: 1fr; }
  .support-grid{ grid-template-columns: 1fr; }
  .filter-bar{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:0.5rem; -webkit-overflow-scrolling:touch; }
  .filter-btn{ flex-shrink:0; }

  .ad-slot--leaderboard .ad-slot__body{ height:100px; }

  .section-head{ flex-direction:column; align-items:flex-start; gap: var(--space-sm); }

  .subscribe-content{ padding: var(--space-xl) var(--container-pad); }
  .subscribe-form{ flex-direction:column; gap: var(--space-sm); border-bottom:none; }
  .subscribe-form input{ border-bottom: 2px solid rgba(243,238,228,0.3); }
  .subscribe-form button{ align-self:flex-start; }

  .footer-top{ grid-template-columns: 1fr 1fr; gap: var(--space-lg); padding-bottom: var(--space-xl); }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }

  .article-meta{ gap: var(--space-sm) var(--space-md); }
  .article-breakout{ margin: var(--space-lg) -1.25rem; width: calc(100% + 2.5rem); left:0; right:0; }

  .search-result{ grid-template-columns: 80px 1fr; }

  .next-story-strip{ flex-direction:column; align-items:flex-start; gap: var(--space-sm); }
}

/* -------------------- 480px -------------------- */
@media (max-width: 480px){
  :root{ --container-pad: 1rem; }
  .logo{ font-size: 1rem; }
  .hero-media{ aspect-ratio: 1/1; }
  .footer-top{ grid-template-columns: 1fr; }
  .series-card-media{ aspect-ratio: 16/11; }
  .mega-menu-grid{ grid-template-columns: 1fr; }
  .article-body p:first-of-type::first-letter{ font-size: 2.8em; }
  .subscribe-media{ min-height: 200px; }
  .ad-slot--article .ad-slot__body{ max-width:100%; }
  .ad-slot--rectangle .ad-slot__body{ width:100%; max-width:300px; }
}

/* -------------------- 375px -------------------- */
@media (max-width: 375px){
  .latest-item{ grid-template-columns: 50px 1fr; }
  .world-card{ padding: var(--space-md); }
}