/* ==========================================================================
   ORPHIC BEATS — responsive.css
   Mobile-first overrides layered on top of main.css / components.css.
   ========================================================================== */

/* Laptop */
@media (max-width: 1439px){
  .grid--artists{ grid-template-columns: repeat(4, 1fr); }
}

/* Tablet */
@media (max-width: 1023px){
  .split-layout,
  .split-layout--wide{ grid-template-columns: 260px 1fr; gap: 32px; }

  .grid--artists{ grid-template-columns: repeat(3, 1fr); }
  /* .grid--releases intentionally has no override here — the auto-fit
     base rule (main.css) already sizes/centers release cards correctly
     at any width, including a single-release layout. */
  .grid--radio{ grid-template-columns: repeat(2, 1fr); }
  .grid--news{ grid-template-columns: repeat(2, 1fr); }
  .grid--events{ grid-template-columns: 1fr; }
  .grid--gallery{ grid-template-columns: repeat(2, 1fr); }

  .footer-top{ grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-top .footer-col:last-child{ grid-column: span 2; }
}

/* Mobile */
@media (max-width: 767px){
  :root{ --header-height: 68px; }

  .split-layout,
  .split-layout--wide{ grid-template-columns: 1fr; gap: 24px; }

  .grid--artists{ grid-template-columns: 1fr 1fr; }
  .grid--releases{ grid-template-columns: 1fr; }
  .grid--radio{ grid-template-columns: 1fr; }
  .grid--news{ grid-template-columns: 1fr; }
  .grid--gallery{ grid-template-columns: 1fr; }

  .hero h1{ max-width: none; }
  .hero-ctas{ flex-direction: column; align-items: stretch; }
  .hero-ctas .btn{ justify-content: center; }
  .hero-scroll-cue{ display: none; }

  .section-header--split{ align-items: flex-start; }

  .footer-top{ grid-template-columns: 1fr; gap: 32px; }
  .footer-top .footer-col:last-child{ grid-column: auto; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }

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

  .mini-player{ width: calc(100% - 24px); bottom: 14px; padding: 8px 14px; }
}

/* Small mobile */
@media (max-width: 420px){
  .grid--artists{ grid-template-columns: 1fr; }
}

@media (max-width: 767px){

  .hero{
    height: 190px;
    min-height: 190px;
  }

  .hero-bg{
    background-position: center center;
  }

}