/* ============================================================
   SiyaqCasts — Responsive Stylesheet
   Breakpoints: tablet ≤ 1024px, mobile ≤ 768px, small ≤ 480px
   ============================================================ */

/* ── Tablet ─────────────────────────────────────────────────── */
@media ( max-width: 1024px ) {

  .hero-emblem { width: 260px; }

  .episodes-grid { grid-template-columns: repeat(2, 1fr); }

  .featured-episode { grid-template-columns: 1fr; gap: 1.5rem; }
  .featured-episode-info { order: 2; }
  .featured-episode-media { order: 1; }

  .episode-layout { grid-template-columns: 1fr 300px; gap: 1.75rem; }

  .related-strip-grid { grid-template-columns: repeat(3, 1fr); }

  .footer-widgets { grid-template-columns: repeat(2, 1fr); }
  .footer-widgets .footer-widget-col:last-child { grid-column: span 2; }

  .about-inner { gap: 2.5rem; }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media ( max-width: 768px ) {

  /* Mobile — proper spacing between sticky header and page content */
  .site-main > .container,
  .site-main .section-pad {
    padding-top: 3rem !important;
  }

  /* Specific mobile fix for episode page top spacing */
  .single-episode .site-main {
    padding-top: 1rem;
  }

  /* Episode + post titles get extra breathing room from breadcrumb above */
  .episode-title,
  .post-title,
  .page-title {
    margin-top: 1rem !important;
    line-height: 1.3;
  }

  /* Breadcrumb — wrap cleanly, leave space before title */
  .breadcrumb {
    margin-bottom: 1.25rem !important;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.6;
  }
  .breadcrumb-current {
    width: 100%;
    margin-top: 4px;
  }

  /* Title spacing on mobile */
  .episode-title,
  .post-title { margin-top: 0.5rem; }

  /* Header */
  .header-inner { height: 60px; position: relative; flex-wrap: wrap; padding-block: 0; }

  .main-nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--color-bg-2);
    border-bottom: 1px solid var(--color-border);
    z-index: 90;
    padding: 0.75rem 0;
  }
  .main-nav.is-open { display: block; }

  .nav-menu { flex-direction: column; align-items: flex-start; gap: 0; }
  .nav-menu a { padding: 10px 1.5rem; width: 100%; font-size: 15px; }
  .nav-menu .sub-menu { position: static; border: none; padding: 0; }
  .nav-menu .sub-menu a { padding-left: 2.5rem; font-size: 14px; }

  .header-cta { display: none; }
  .menu-toggle { display: flex; }

  /* Ticker */
  .ticker-social { display: none; }

  /* Hero */
  .hero-inner { flex-direction: column; text-align: center; padding-block: 3rem; }
  .hero-emblem { width: 180px; order: -1; }
  .hero-content { max-width: 100%; }

  /* Sections */
  .section-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .section-pad { padding-block: 2.5rem; }

  /* Episode grid */
  .episodes-grid { grid-template-columns: 1fr; }

  /* Episode tabs */
  .episode-tabs { overflow-x: auto; width: 100%; }
  .episode-tab { white-space: nowrap; flex-shrink: 0; }

  /* Featured episode */
  .featured-episode { grid-template-columns: 1fr; }

  /* Episode layout (single page) */
  .episode-layout {
    grid-template-columns: 1fr;
  }

  .episode-sidebar {
    position: static;
    order: 2;
  }

  /* Related strip on single */
  .related-strip-grid { grid-template-columns: repeat(2, 1fr); }

  /* About */
  .about-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .about-photo-wrap { order: -1; }
  .about-host-photo { max-width: 280px; }
  .about-btn { margin-inline: auto; }

  /* Footer */
  .footer-main { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer-menu { flex-direction: column; gap: 0; }
  .footer-menu a { padding: 5px 0; }
  .footer-widgets { grid-template-columns: 1fr; }
  .footer-widgets .footer-widget-col:last-child { grid-column: span 1; }
}

/* ── Small Mobile ───────────────────────────────────────────── */
@media ( max-width: 480px ) {

  .container { padding-inline: 1rem; }

  .hero-title { font-size: 1.9rem; }
  .section-title { font-size: 1.4rem; }

  .related-strip-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

  .episode-title { font-size: 1.35rem; }

  .error-404-title { font-size: 5rem; }

  .episodes-grid { gap: 1rem; }

  .footer-widgets { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── Accessibility ──────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
  .ticker-content,
  .ticker-dot,
  .loading-spinner { animation: none; }

  *,
  *::before,
  *::after { transition-duration: 0.01ms !important; }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  .site-header,
  .breaking-ticker,
  .episode-sidebar,
  .episode-related-strip,
  .trending-section,
  .site-footer { display: none; }

  body { background: #fff; color: #000; }
  .episode-layout { grid-template-columns: 1fr; }
  .video-player { display: none; }
}