/* Responsive Design */
@media (max-width: 768px) {
  header h1 {
    font-size: 2rem;
  }

  /* Carousel sizing is handled in css/carousel.css for mobile.
     Remove conflicting width overrides here to avoid misalignment. */

  .radio-card h2 {
    font-size: 0.95rem;
  }

  .carousel-arrow {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  .carousel-arrow-left {
    left: 10px;
  }

  .carousel-arrow-right {
    right: 10px;
  }

  .station-info h2 {
    font-size: 1.5rem;
  }

  .station-info p {
    font-size: 1rem;
  }

  .modal-content {
    width: 95%;
    margin: 10% auto;
    padding: 20px;
  }

  .player-header {
    flex-direction: column;
    text-align: center;
  }
}