/* Responsive Design Breakpoints */

/* Mobile: 1 column (default, < 480px) */
#magazine-grid {
  grid-template-columns: 1fr;
}

/* Scrollable filter tabs on mobile */
#filter-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overflow-y: hidden;
}

#filter-tabs::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
}

#site-header .site-title {
  font-size: 1.4rem;
}

#progress-section {
  padding: 1rem 0.75rem 0;
}

.progress-sub-stats {
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

/* Small mobile adjustments */
@media (max-width: 479px) {
  #magazine-grid {
    gap: 1rem;
  }

  #site-header {
    padding: 1.5rem 0.75rem;
  }

  .site-title,
  h1 {
    font-size: var(--font-size-xl);
  }

  .site-logo {
    height: 48px;
  }

  #filter-tabs {
    gap: var(--space-sm);
    padding: 0.75rem 0.5rem;
  }

  .filter-tab {
    font-size: var(--font-size-sm);
    padding-bottom: 0.25rem;
  }

  #grid-section {
    padding: 1rem 0.75rem;
  }

  .tab-count {
    display: none;
  }
}

/* Mobile-specific adjustments */
@media (max-width: 480px) {
  h1 {
    font-size: 1.5rem;
  }

  #site-header {
    padding: var(--space-lg) var(--space-md);
  }

  #filter-tabs {
    padding: var(--space-md) var(--space-sm);
    gap: var(--space-sm);
  }

  .tab-button {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9rem;
  }

  .reset-btn {
    font-size: 0.8rem;
    padding: var(--space-sm) var(--space-md);
  }

  #progress-section {
    padding: 0 var(--space-sm);
  }
}

/* Tablet: 2 columns (480px - 768px) */
@media (min-width: 480px) {
  #magazine-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3 columns (768px+) */
@media (min-width: 768px) {
  #magazine-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  #site-header .site-title,
  h1 {
    font-size: 2rem;
  }

  #filter-tabs {
    gap: var(--space-lg);
  }

  .tab-button {
    padding: var(--space-md) var(--space-lg);
  }
}

/* Wide: 4 columns (1200px+) */
@media (min-width: 1200px) {
  #magazine-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  main {
    padding: var(--space-2xl) var(--space-xl);
  }

  #grid-section {
    max-width: 1400px;
    padding: var(--space-2xl) var(--space-xl);
  }
}

/* Large screens: 5 columns (1600px+) */
@media (min-width: 1600px) {
  #magazine-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  #grid-section {
    max-width: 1600px;
  }
}

/* Small screens: stack filter tabs */
@media (max-width: 600px) {
  .filter-tab {
    width: 100%;
    text-align: center;
  }

  .filter-tab.active::after {
    height: 1px;
  }
}

/* Landscape mode */
@media (orientation: landscape) and (max-height: 600px) {
  #site-header {
    padding: var(--space-md);
  }

  h1 {
    font-size: 1.25rem;
    margin-bottom: var(--space-xs);
  }

  #progress-section {
    margin: var(--space-sm) auto;
  }
}

/* Print styles */
@media print {
  #site-header,
  #filter-tabs,
  .reset-btn {
    display: none;
  }

  #magazine-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}