/* ==========================================================================
   AVANTIDA RADIO — RESPONSIVE OVERRIDES
   --------------------------------------------------------------------------
   Link this file LAST. It contains every @media block in the project.

   Cascade note: media queries add no specificity. These rules only beat
   style.css because they come later. If you ever move this file above
   style.css in the <head>, mobile styles will silently stop applying.
   ========================================================================== */

/* ==========================================================================
   <= 768px — tablets and phones
   ========================================================================== */
@media (max-width: 768px) {

  /* responsive.css — @media (max-width: 768px) */
  .cover-banner {
    /* delete: height: 200px;  — let aspect-ratio handle it */
    aspect-ratio: 896 / 504;  /* optional: keep mobile ratio tight */
  }

  .cover-banner.viz-active {
    height: clamp(200px, 30vh, 330px);  /* smaller on mobile */
  }

  /* Header stacks: logo above nav */
  .main-header .container {
    flex-direction: column;
    gap: 0.75rem;
  }

  .main-header .main-nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
  }

  .main-header .main-nav a {
    font-size: 0.9rem;
    white-space: nowrap;
  }

  /* Language bar stops being sticky once the header unsticks */
  .lang-selector {
    position: relative;
    top: auto;
  }

  .lang-selector .container {
    flex-wrap: wrap;
  }

  .lang-btn {
    font-size: 0.85rem;
    padding: 0.3rem 0.8rem;
  }

  /* Shorter banner, smaller headline */
  .cover-banner {
    height: 200px;
  }

  .glitch-text {
    font-size: 6.4rem;
  }

  /* Chat launcher shrinks and hugs the safe area */
  .chat-toggle-btn {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: calc(16px + env(safe-area-inset-left, 0px));
  }

  /* Chat window takes more of the viewport */
  .chat-container {
    width: 94vw;
    height: 84dvh;
  }

  .chat-header h3 {
    font-size: 1.2rem;
  }

  .chat-input-form {
    padding: 0.75rem;
  }

  .chat-input-form button {
    padding: 0.75rem 1rem;
    letter-spacing: 1px;
  }

  .messages-container {
    padding: 0.75rem;
  }

  /* Wall of Fame cards go single-column */
  .artist-card {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  /* About-page content blocks tighten up */
  .content-block {
    padding: 1.5rem;
  }

  .cta-section h2 {
    font-size: 1.5rem;
  }

  .cta-button {
    padding: 0.75rem 2rem;
    font-size: 1rem;
  }
}

/* ==========================================================================
   <= 700px — visualizer controls
   ========================================================================== */
@media (max-width: 700px) {

  #banner-viz-toggle,
  #banner-viz-mode,
  #banner-viz-fullscreen {
    font-size: 13px;
    padding: 6px 10px;
    letter-spacing: 1px;
  }

  #banner-viz-toggle {
    top: 8px;
    left: 8px;
  }

  #banner-viz-mode {
    top: 8px;
    right: 8px;
  }
}

/* ==========================================================================
   <= 600px — narrow phones
   ========================================================================== */
@media (max-width: 600px) {

  /* Channel picker stacks vertically */
  .channel-picker {
    flex-direction: column;
  }

  /* Song request form collapses to one column */
  .request-fields {
    grid-template-columns: 1fr;
  }

  .request-comment {
    grid-column: auto;
  }

  .request-form {
    padding: 1rem;
  }
}

/* ==========================================================================
   <= 520px — profile tab
   ========================================================================== */
@media (max-width: 520px) {

  #tab-profile {
    padding: 12px;
  }

  .tab-btn {
    min-width: 74px;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   <= 480px — CRT wall panel
   ========================================================================== */
@media (max-width: 480px) {

  .crt-wall__link {
    gap: 10px;
    padding: 12px 10px;
  }

  .crt-wall__name {
    font-size: 24px;
  }
}

/* ==========================================================================
   Reduced motion — kill the live-mix pulse
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.dj-live .player-wrapper {
    animation: none;
    box-shadow:
      0 0 30px rgba(var(--live-pink-rgb), 0.55),
      inset 0 0 22px rgba(var(--live-pink-rgb), 0.10);
  }
  html.dj-live .live-badge {      /* ← was .live-mix-chip */
    animation: none;
  }
}