/* Mobile-first base already lives in layout/components. This file layers
   targeted fixes so every breakpoint from 320px phones to 1920px monitors
   stays clean, per the responsive audit requirements. */

@media (max-width: 380px) {
  .hero { padding: 2rem 1rem; }
  .btn { padding: .65rem 1rem; font-size: .85rem; }
  main.page { padding: 1rem 1rem 6rem; }
}

@media (min-width: 640px) {
  .hero-cta { flex-wrap: nowrap; }
}

@media (min-width: 1024px) {
  main.page { max-width: 1180px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1600px) {
  main.page { max-width: 1320px; }
}

/* Tablet landscape/portrait nuance */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
}

/* Large monitors: keep content constrained + balanced, never full-bleed. */
@media (min-width: 1920px) {
  main.page { max-width: 1440px; }
}

.tabs-layout { grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 860px) {
  .tabs-layout { grid-template-columns: 260px 1fr; gap: 1.5rem; }
}

/* Ensure horizontal scroll areas (fretboard/tabs) feel intentional on touch */
@media (pointer: coarse) {
  .fretboard-wrap, .tab-block { scroll-snap-type: x proximity; }
}