/* ===========================================================================
   Radio Continu — responsive gedrag
   Ontworpen mobile-first getest van 320px t/m ultrawide.
   =========================================================================== */

/* De hoofdnavigatie telt tien items; die krijgen vanaf 1560px minder ruimte. */
@media (max-width: 1560px) {
  .site-header__bar { gap: var(--space-3); }
  .nav__link { padding-inline: 0.55rem; font-size: var(--text-sm); }
  .brand__logo { height: 40px; }
}

/* Zoeken en WhatsApp blijven bereikbaar via het menu en de footer. */
@media (max-width: 1400px) {
  .nav__link { padding-inline: 0.4rem; font-size: 0.8125rem; }
  .nav { gap: 0; }
  .header__actions .icon-btn:not(.nav-toggle) { display: none; }
}

@media (max-width: 1200px) {
  .footer__grid { grid-template-columns: 1.3fr repeat(2, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; }
  .onair-card { max-width: 560px; }
  .quickbar__grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Onder 1180px past de volledige navigatie niet meer: naar het uitschuifmenu. */
@media (max-width: 1180px) {
  .nav { display: none; }
  .nav-toggle { display: grid; }
  .site-header__bar { min-height: 68px; }
  .brand__logo { height: 38px; }
}

@media (max-width: 980px) {
  .feature { grid-template-columns: 1fr; }
  .feature__media { min-height: 220px; aspect-ratio: 16 / 9; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .disc-hero { grid-template-columns: 1fr; text-align: center; }
  .disc-hero__cover { max-width: 260px; margin-inline: auto; }
  .slot { grid-template-columns: 96px 64px 1fr; }
  .slot > .btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 768px) {
  :root { scroll-padding-top: 84px; }

  .section-head { flex-direction: column; align-items: flex-start; }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .form-grid { grid-template-columns: 1fr; }

  .hero__stats { gap: var(--space-5); }
  .hero__stat strong { font-size: 1.4rem; }

  .onair-card__body { gap: var(--space-3); }
  .onair-card__art { width: 82px; height: 82px; }

  .event-card { grid-template-columns: 84px 1fr; gap: var(--space-4); padding: var(--space-4); }
  .event-date__day { font-size: 1.65rem; }

  .track { grid-template-columns: 58px 44px 1fr; gap: var(--space-3); }
  .track__art { width: 44px; height: 44px; }
  .track > .badge { grid-column: 1 / -1; justify-self: start; }

  .disc-table { display: block; overflow-x: auto; white-space: nowrap; }

  .audio-item { flex-wrap: wrap; }
  .audio-item audio { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .schedule-tabs { border-radius: var(--radius); }
  .schedule-tab { min-width: 0; flex: 1 1 30%; font-size: var(--text-sm); padding-inline: 0.5rem; }
}

/* Op telefoons houden we in de kop alleen het logo, de speelknop en het menu. */
@media (max-width: 620px) {
  .header__actions .icon-btn:not(.nav-toggle) { display: none; }
  .header__actions .btn--primary { padding-inline: 0.9rem; }
}

@media (max-width: 440px) {
  .header__actions .btn--primary { padding: 0.7rem; }
  .header__actions .btn--primary span,
  .header__actions .btn--primary { font-size: 0; gap: 0; }
  .header__actions .btn--primary .icon { width: 20px; height: 20px; }
}

@media (max-width: 640px) {
  .quickbar { margin-top: 0; }
  .quickbar__grid { grid-template-columns: repeat(2, 1fr); border-radius: var(--radius); }
  .quick { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); }
  .quick span { display: none; }

  .slot {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .slot__avatar { display: none; }

  .btn-row .btn { flex: 1 1 100%; }

  .lightbox__btn { width: 44px; height: 44px; }
  .lightbox__btn--prev { left: var(--space-2); }
  .lightbox__btn--next { right: var(--space-2); }

  .gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  .reception__list li { flex-direction: column; gap: var(--space-1); }
  .reception__list span { text-align: left; }
}

/* -- Player op mobiel ----------------------------------------------------- */

@media (max-width: 860px) {
  .player__channel { display: none; }
}

@media (max-width: 640px) {
  .player {
    gap: var(--space-3);
    padding-inline: var(--space-4);
  }

  .player__volume { display: none; }
  .player__art { width: 42px; height: 42px; }
  .player__toggle { width: 44px; height: 44px; }
  .player__bars { display: none; }
}

/* -- Zeer smalle schermen ------------------------------------------------- */

@media (max-width: 380px) {
  .brand__text { display: none; }
  .event-card { grid-template-columns: 1fr; }
  .event-date { flex-direction: row; gap: var(--space-2); justify-content: flex-start; }
  .event-date__day { font-size: 1.35rem; }
}

/* -- Grote schermen ------------------------------------------------------- */

@media (min-width: 1600px) {
  :root { --container: 1400px; }
}

/* -- Afdrukken ------------------------------------------------------------ */

@media print {
  .site-header,
  .player,
  .quickbar,
  .drawer,
  .site-footer,
  .banners,
  .cta-band { display: none !important; }

  body { padding-bottom: 0; background: #fff; color: #000; }
  .page-hero { background: none; color: #000; padding-block: 1rem; }
  .page-hero h1 { color: #000; }
  a { color: #000; text-decoration: underline; }
  .card, .slot, .track { break-inside: avoid; border: 1px solid #ccc; }
}

/* -- Toegankelijkheid: hoog contrast -------------------------------------- */

@media (prefers-contrast: more) {
  :root {
    --rc-ink-50: #46536b;
    --rc-ink-30: #46536b;
    --rc-line: #b6c0d1;
  }

  .card,
  .slot,
  .track,
  .input,
  .select,
  .textarea { border-width: 2px; }
}