/* Responsive Styles - Media queries for different screen sizes */

/* Tablet and below */
@media (width <= 768px) {
  main {
    min-height: calc(100vh - 145px);
  }

  .timeline-line {
    left: 20px;
  }

  .festival-card {
    width: calc(100% - 50px);
    margin-left: 60px;
    margin-right: 0;
    align-self: stretch;
  }

  .festival-card.left,
  .festival-card.right {
    margin-left: 30px;
    margin-right: 0;
    align-self: stretch;
  }

  .festival-card::before {
    left: -28px !important;
    right: auto !important;
    width: 16px;
    height: 16px;
  }

  .notification {
    left: 10px;
    top: 10px;
    right: 10px;
  }

  /* Header adjustments for mobile */
  .header-content {
    padding: 0.5rem 1rem;
  }

  header h1 {
    font-size: 2rem;
  }

  .header-left h1 {
    font-size: 1.2rem;
  }

  /* Mobile menu styles */
  .mobile-menu-content {
    padding: 1rem;
  }

  .view-toggle {
    margin-top: 0;
    margin-bottom: 1rem;
    justify-content: center;
    width: 100%;
    max-width: 300px;
  }

  .header-controls {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    align-items: stretch;
  }

  #filter-container {
    flex-flow: row nowrap;
    gap: 0.5rem;
    width: 100%;
  }

  .filter-button {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    flex: 1;
    min-width: 0;
    width: 100%;
  }

  .filter-text {
    display: inline; /* Show text on mobile */
  }

  .filter-container {
    margin-right: 0;
    flex: 1;
    min-width: 0;
    width: calc(50% - 0.25rem); /* 50% minus half the gap */
  }

  .bands-filter-toggle {
    width: 100%;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bands-filter-text {
    font-size: 0.85rem;
  }

  .bands-filter-dropdown {
    left: 0;
    right: 0;
    width: auto;
    max-height: 300px;
  }

  .star-icon {
    font-size: 1.2rem;
    padding: 0.15rem;
  }

  .favorite-container {
    top: 8px;
    right: 6px;
    z-index: 10;
  }

  .festival-name {
    font-size: 1.5rem;
  }

  .map-container {
    height: calc(100vh - 175px);
    margin: 10px;
    border-radius: 0;
  }

  .modal-content {
    margin: 15px;
    width: calc(100% - 30px);
    max-height: calc(100vh - 30px);
    padding: 20px;
  }

  .modal-close {
    top: 10px;
    right: 15px;
  }

  #modal-festival-card .festival-poster {
    max-width: 250px;
  }

  #modal-festival-card .festival-info {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
}

/* Mobile */
@media (width <= 480px) {
  .timeline-container {
    padding: 0.5rem;
  }

  .festival-card {
    padding: 0.5rem;
    margin-left: 60px;
    width: calc(100% - 50px);
  }

  .festival-info {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .map-container {
    height: calc(100vh - 175px);
    margin: 5px;
  }

  .modal-content {
    margin: 10px;
    width: calc(100% - 20px);
    padding: 15px;
  }

  #modal-festival-card .festival-poster {
    max-width: 200px;
  }
}