/* =====================================================================
   Nquthu Radio Station — Responsive & motion overrides
   Mobile-first base lives in main.css; these are breakpoint refinements
   Breakpoints tested: 360 / 390 / 430 / 768 / 1024 / 1366 / 1440 / 1920
   ===================================================================== */

/* Give every page room for the fixed player on smaller screens */
@media (max-width: 1080px) {
  body { padding-bottom: 132px; }
}
@media (min-width: 1081px) {
  body { padding-bottom: var(--player-h); }
}

/* ------------------------------------------------------------------ */
/*  Large desktop                                                      */
/* ------------------------------------------------------------------ */
@media (min-width: 1440px) {
  .section { padding-block: var(--space-12); }
}

@media (max-width: 1280px) {
  :root { --header-h: 78px; }
  .site-header__inner { padding-inline: var(--gutter); gap: 16px; }
  .brand img { width: 165px; height: auto; }
  .main-nav a { padding-inline: 11px; font-size: .9rem; }
  .header-actions { gap: 8px; }
  .site-header .listen-btn { min-height: 42px; padding: 8px 14px; font-size: .78rem; }
  .hero__inner { padding-inline: var(--gutter); }
  .hero__content { max-width: 560px; }
  .hero__title { font-size: clamp(3.7rem, 6vw, 4.9rem); }
  .hero-onair { right: 32px; width: min(560px, 46vw); padding: 18px; gap: 16px; }
  .hero-onair__img { width: 88px; height: 88px; }
  .hero-onair .waveform { width: 130px; gap: 3px; }
}

/* ------------------------------------------------------------------ */
/*  Tablet / small desktop  (<= 1024px)                                */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --header-h: 72px; }
  .brand img { width: 145px; height: auto; }
  .day-tabs { width:100%; }
  .day-tab { min-height:40px; }
  .split { gap: var(--space-6); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .packages { grid-template-columns: 1fr; max-width: 520px; margin-inline:auto; }
  .package--featured::before { left: var(--space-4); }
  .feature .btn--outline-red,
  .package .btn,
  .contact-more-grid .btn--outline-red,
  .contact-more-grid .social-link,
  .contact-follow-section .social-link { min-height:40px; }
  .wa-panel { grid-template-columns: 1fr; }
  .cta-strip,
  .cta-strip--team { grid-template-columns: minmax(0,1fr); }
  .cta-strip--team .cta-strip__media { min-height:0; }
  .cta-strip--team .cta-strip__media img { height:auto; aspect-ratio:16/9; }
  .footer-benefits__grid { grid-template-columns:repeat(3,minmax(0,1fr)); padding-block:12px; }
  .footer-benefit { border-left:0; border-top:1px solid rgba(255,255,255,.18); padding:12px 8px 4px; }
  .site-footer__top { grid-template-columns:1fr 1fr; gap:36px 0; }
  .footer-col { padding-right:28px; }
  .footer-col + .footer-col { padding-left:28px; }
  .footer-col:nth-child(odd) { padding-left:0; border-left:0; }
  /* Social icons move into the mobile menu; keep the header uncluttered */
  .header-socials { display: none; }
  .home-lineup-layout { grid-template-columns:1fr; gap:24px; }
  .home-lineup-intro { max-width:620px; }
  .home-lineup-schedule { grid-column:auto; }
  .home-about-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-show-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-promo__copy { width:72%; padding:28px; }
}

/* ------------------------------------------------------------------ */
/*  Mobile nav appears  (<= 900px)                                     */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  body.nav-open { overflow:hidden; }
  body::before {
    content:""; position:fixed; inset:var(--header-h) 0 0; z-index:88;
    background:rgba(2,2,3,.22); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .24s ease,visibility .24s ease;
  }
  body.nav-open::before { opacity:1; visibility:visible; pointer-events:auto; }

  .nav-toggle {
    display:inline-flex; order:3; width:44px; height:44px; border-radius:12px;
    background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  }
  body.nav-open .nav-toggle { background:var(--red-dark); border-color:var(--red); box-shadow:0 8px 22px rgba(181,18,27,.28); }
  .header-actions { margin-left: auto; }

  .main-nav {
    position:fixed; top:calc(var(--header-h) + 10px); right:12px; bottom:auto; left:auto;
    width:min(300px,calc(100vw - 24px)); height:auto; max-height:calc(100dvh - var(--header-h) - 22px);
    z-index:91; margin:0; padding:10px;
    overflow-y:auto; overscroll-behavior:contain;
    background:linear-gradient(145deg,rgba(28,28,31,.82),rgba(10,10,12,.88));
    border:1px solid rgba(255,255,255,.12); border-radius:20px;
    backdrop-filter:blur(16px) saturate(120%); -webkit-backdrop-filter:blur(16px) saturate(120%);
    box-shadow:0 24px 65px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-10px) scale(.96); transform-origin:top right;
    transition:opacity .22s ease,transform .28s var(--ease),visibility .22s ease;
  }
  .main-nav::before {
    content:"Navigation"; display:block; padding:5px 12px 9px;
    color:rgba(255,255,255,.46); font-size:.62rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase;
  }
  body.nav-open .main-nav { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); }
  .main-nav ul { flex-direction:column; align-items:stretch; gap:3px; counter-reset:mobile-nav; }
  .main-nav li { display: block; }
  .main-nav li + li::before { display: none; }
  .main-nav a {
    counter-increment:mobile-nav; display:flex; align-items:center; gap:11px;
    min-height:43px; padding:8px 12px; border:1px solid transparent; border-radius:12px;
    color:rgba(255,255,255,.82); font-size:.9rem; font-weight:600; letter-spacing:.01em;
    transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
  }
  .main-nav a::before {
    content:"0" counter(mobile-nav); width:24px; flex:none;
    color:rgba(255,255,255,.32); font-size:.58rem; font-weight:700; letter-spacing:.06em;
  }
  .main-nav a::after {
    content:""; position:static; width:6px; height:6px; margin-left:auto;
    border-radius:50%; background:var(--red); opacity:0; transform:scale(.4);
    transition:opacity .18s ease,transform .18s ease;
  }
  .main-nav a:hover { color:#fff; background:rgba(255,255,255,.06); transform:translateX(2px); }
  .main-nav a[aria-current="page"] {
    color:#fff; background:linear-gradient(90deg,rgba(190,19,28,.28),rgba(190,19,28,.09));
    border-color:rgba(237,28,36,.3);
  }
  .main-nav a[aria-current="page"]::before { color:#ff7379; }
  .main-nav a[aria-current="page"]::after { opacity:1; transform:scale(1); }

  /* keep the header Listen button but shrink label */
  .header-actions .listen-btn .btn-label { display: inline; }
}

/* ------------------------------------------------------------------ */
/*  Split & editorial stacking (<= 860px)                              */
/* ------------------------------------------------------------------ */
@media (max-width: 860px) {
  .split,
  .split--story { grid-template-columns: minmax(0,1fr); gap: var(--space-4); }
  .split--media-left .split__media { order: 0; }
  .split__media { aspect-ratio: 4/3; }
  .split--story .split__body { padding-block:0; }
  .split--story .split__media { width:100%; min-height:300px; aspect-ratio:auto; }
  .story-founder-card { min-height:300px; }
  .media-frame::after { display:none; }

  .onair { grid-template-columns: 1fr; }
  .onair__media { aspect-ratio: 16/9; }
  .onair__body { padding: var(--space-3) var(--space-3) var(--space-4); }

  .stat-row { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }

  /* NOW ON AIR card drops out of the corner and stacks under the hero copy */
  .hero-onair {
    position: static; width: 100%; max-width: 620px;
    margin-top: var(--space-5);
  }
  .hero__inner {
    min-height: auto;
    padding-top: calc(var(--header-h) + 56px);
    padding-bottom: 72px;
  }
  .hero__content { max-width: 620px; transform: none; }
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(3,3,4,.82) 0%, rgba(3,3,4,.65) 58%, rgba(3,3,4,.28) 100%),
      linear-gradient(0deg, rgba(3,3,4,.70) 0%, rgba(3,3,4,.05) 58%);
  }
  .home-current-lineup { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-lineup-card:last-child { grid-column:1 / -1; }
  .home-promo-grid { grid-template-columns:1fr; }
  .home-whatsapp-band { grid-template-columns:auto 1fr; }
  .home-whatsapp-band .btn { grid-column:1 / -1; width:100%; }
  .day-panel { grid-template-columns:1fr; }
  .show-card { min-height:172px; }
  .faq-layout { grid-template-columns:1fr; gap:var(--space-3); }
  .faq-layout__media { min-height:0; aspect-ratio:16/9; }
}

/* ------------------------------------------------------------------ */
/*  Phones (<= 640px)                                                  */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  :root { --header-h: 64px; --gutter: 20px; }
  .site-header__inner { padding-inline: var(--gutter); }
  .brand img { width: 126px; height: auto; }
  .site-header .listen-btn { min-height: 42px; padding: 9px 13px; font-size: .75rem; }
  .site-header .listen-btn svg { display: none; }
  .main-nav { top:calc(var(--header-h) + 8px); right:10px; width:min(286px,calc(100vw - 20px)); border-radius:18px; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); }
  .stat-row { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }

  .section { padding-block: clamp(48px, 14vw, var(--space-8)); }
  .section--tight { padding-block:48px; }
  .section-head { margin-bottom: var(--space-4); }

  .hero__inner { min-height: auto; padding: calc(var(--header-h) + 44px) var(--gutter) 54px; }
  .hero__media img { object-position: 66% center; }
  .hero__title { font-size: clamp(3.15rem, 16vw, 4.15rem); }
  .hero__eyebrow { font-size: .82rem; margin-bottom: 14px; }
  .hero__tagline { font-size: 1.05rem; margin-bottom: 28px; }
  .hero__cta { gap: var(--space-1); }
  .hero__cta .btn { flex:1 1 100%; min-width:0; min-height:50px; padding-block:11px; }
  .hero-onair { padding: 14px; gap: 12px; border-radius: 18px; }
  .hero-onair__img { width: 74px; height: 74px; border-radius: 12px; }
  .hero-onair__title { font-size: 1.05rem; }
  .hero-onair__time, .hero-onair__host { font-size: .78rem; }
  .hero-onair .waveform { display: none; }

  .page-hero__inner { min-height: 300px; }
  .page-hero__content { min-width:0; max-width:100%; }
  .page-hero__lead { font-size:clamp(.95rem, 3.8vw, 1rem); line-height:1.6; }

  .form-row { grid-template-columns: 1fr; }
  .card--pad4 { padding:var(--space-3); }

  /* Show cards: compact timetable rows with the programme image retained */
  .show-card { grid-template-columns:minmax(0,1fr) 112px; min-height:158px; gap:0; }
  .show-card__body { padding:18px 14px 18px 18px; gap:8px; }
  .show-card h3 { font-size:1.08rem; }
  .show-card__desc { font-size:.8rem; -webkit-line-clamp:2; }
  .show-card .slot-badge { padding:5px 8px; font-size:.64rem; }
  .show-card .slot-badge svg { display:none; }
  .onair-flag, .next-flag { padding:5px 8px; font-size:.58rem; letter-spacing:.08em; }

  .day-tabs { width:100%; min-height:44px; gap:2px; padding:3px; margin-bottom:var(--space-3); }
  .day-tab {
    flex:1 1 0; flex-direction:column; gap:2px; min-width:0; height:40px;
    padding:5px 1px; font-size:.68rem; line-height:1; text-align:center;
  }
  .day-tabs { min-height:48px; }
  .day-tab.is-today { flex-grow:1.35; padding-inline:4px; }
  .day-tab__today { padding:2px 4px; font-size:.4rem; letter-spacing:.03em; }
  .slot-badge, .onair-flag, .next-flag { max-width:100%; white-space:normal; }
  .feature .btn--outline-red,
  .package .btn,
  .contact-more-grid .btn--outline-red,
  .contact-more-grid .social-link,
  .contact-follow-section .social-link { min-height:40px; }

  .wa-panel { padding: var(--space-4); }
  .site-footer__top { grid-template-columns:1fr; gap:0; padding-block:44px 34px; }
  .footer-col,.footer-col + .footer-col { padding:0; border-left:0; }
  .footer-col + .footer-col { margin-top:28px; padding-top:28px; border-top:1px solid rgba(255,255,255,.12); }
  .site-footer__bar { justify-content:center; text-align:center; }
  .home-layout-section { padding-block:36px; }
  .home-current-lineup, .home-show-row { grid-template-columns:1fr; }
  .home-lineup-card:last-child { grid-column:auto; }
  .home-lineup-card { height:210px; }
  .home-about-section { padding-block:52px; }
  .home-about-grid { grid-template-columns:1fr; }
  .home-about-card { min-height:280px; }
  .home-show-tile { min-height:230px; }
  .home-section-heading { align-items:start; flex-direction:column; }
  .home-promo { min-height:360px; }
  .home-promo > img { width:100%; height:52%; top:auto; }
  .home-promo::after, .home-promo--advertise::after { background:linear-gradient(180deg,rgba(10,11,12,.98) 0%,rgba(10,11,12,.88) 56%,rgba(10,11,12,.22) 100%); }
  .home-promo__copy { width:100%; padding:26px; }
  .home-whatsapp-band { grid-template-columns:1fr; text-align:center; justify-items:center; padding:24px 20px; }
  .home-whatsapp-band .btn { grid-column:auto; }
  .footer-benefits__grid { grid-template-columns:1fr; }
  .footer-benefit { padding:10px 4px; }

  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ------------------------------------------------------------------ */
/*  Persistent player responsive                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 1080px) {
  /* Hide volume + WhatsApp label to save room, keep essential controls */
  .player__volume { display: none; }
  .player__wa .btn-label { display:none; }
  .player__wa { min-width:44px; min-height:44px; padding: 10px; justify-content:center; }
}

@media (max-width: 720px) {
  .player__inner {
    grid-template-columns: minmax(0,1fr) auto;
    gap: var(--space-2); padding: 8px var(--space-2);
  }
  .player__main { min-width:0; overflow:hidden; }
  .player__controls { grid-column:2; width:auto; min-width:0; }
  .player__art { display:none; }
  .player__popout { display:none; }
  .player__station { font-size: .9rem; }
  .player__nowplaying { font-size: .78rem; }
  .player__controls { gap: 6px; }
  .player__mute { display:none; }
}

@media (max-width: 400px) {
  :root { --gutter:16px; }
  .site-header__inner { gap:8px; }
  .brand img { width:108px; }
  .header-actions { margin-left:auto; }
  .site-header .listen-btn {
    width:44px; min-width:44px; height:44px; min-height:44px; padding:0;
  }
  .site-header .listen-btn svg { display:block; width:18px; height:18px; }
  .site-header .listen-btn span { display:none !important; }
  .player__live span.txt { display:none; }
  .btn { padding: 13px 20px; }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .player__inner { gap:8px; padding-inline:12px; }
  .player__toggle { width:46px; height:46px; }
  .player__station { font-size:.82rem; }
  .player__nowplaying { font-size:.72rem; }
  .player__wa { min-width:44px; min-height:44px; }
}

/* ------------------------------------------------------------------ */
/*  Reduced motion                                                     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .live-badge .dot, .player__live .dot, .onair-flag .dot, .listen-dot { animation: none !important; }
  .waveform span { animation: none !important; height: 60% !important; }
  .player { transition: none; }
}

/* ------------------------------------------------------------------ */
/*  Print                                                              */
/* ------------------------------------------------------------------ */
@media print {
  .site-header, .player, .site-footer, .hero__cta, .nav-toggle { display: none !important; }
  body { padding: 0; color:#000; }
  .hero, .page-hero { background:#fff; color:#000; }
  .hero__scrim, .page-hero__scrim, .hero__media, .page-hero__media { display:none; }
  .hero h1, .page-hero h1 { color:#000; }
}