/* ============================================================
   MOBILE FIXES — link this file in ALL pages:
   <link rel="stylesheet" href="mobile-fixes.css">
   Place it AFTER your Google Fonts links, BEFORE </head>
   ============================================================ */

/* ===== HAMBURGER MENU ===== */
.hamburger {
  display: none;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  z-index: 101;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--black, #0E0E0E);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* When nav is transparent (music page), make bars white until scrolled */
nav:not(.scrolled) .hamburger span {
  background: inherit;
}

.hamburger.is-open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 260px;
    height: 100vh;
    background: rgba(250, 250, 250, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
    padding: 100px 40px 40px;
    gap: 32px !important;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.08);
    z-index: 100;
  }

  .nav-links.is-open {
    right: 0;
  }

  .nav-links a {
    font-size: 18px !important;
    color: var(--black, #0E0E0E) !important;
  }

  .nav-links li {
    list-style: none;
  }

  /* Overlay behind the menu */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(14, 14, 14, 0.3);
    z-index: 99;
  }
  .nav-overlay.is-open {
    display: block;
  }

  /* ===== INDEX.HTML HERO FIXES ===== */
  .hero {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .hero iframe {
    display: none !important;
  }

  .hero-right {
    display: none !important;
  }

  /* ===== SHARED PADDING OVERRIDES ===== */
  /* Override hardcoded 250px padding on all sections */
  .featured-work,
  .about-hero,
  .about-content,
  .gallery-header,
  .case-hero,
  .case-content,
  .case-hero-img,
  .intro-section,
  .about-section,
  .about-bookings,
  .bookings-section,
  .shows-section,
  footer {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ===== MUSIC PAGE CAROUSEL FIX ===== */
  .slide-title {
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: clamp(28px, 10vw, 60px) !important;
  }

  .hud-dots {
    gap: 6px !important;
  }

  .hud-dot {
    width: 8px !important;
    height: 8px !important;
  }

  /* ===== CASE STUDY HERO IMAGE ===== */
  .case-hero-img {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
  }

  /* ===== ABOUT PAGE GALLERY ===== */
  .gallery-slide {
    width: 200px !important;
    height: 200px !important;
  }

  .gallery-carousel {
    height: 280px !important;
  }

  .gallery-slide[data-pos="-2"] { transform: translateX(-260px) scale(0.88) !important; }
  .gallery-slide[data-pos="-1"] { transform: translateX(-160px) scale(0.95) !important; }
  .gallery-slide[data-pos="1"]  { transform: translateX(160px) scale(0.95) !important; }
  .gallery-slide[data-pos="2"]  { transform: translateX(260px) scale(0.88) !important; }

  /* ===== FOOTER RESPONSIVE ===== */
  .footer-top {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .footer-links {
    gap: 24px !important;
  }
}

/* ===== EXTRA SMALL SCREENS (phones) ===== */
@media (max-width: 480px) {
  nav {
    padding: 16px 20px !important;
  }

  .hero-headline,
  .about-intro-heading,
  .case-hero-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .intro-headline {
    font-size: clamp(32px, 9vw, 48px) !important;
  }

  .case-meta {
    grid-template-columns: 1fr !important;
  }

  .cs-callout {
    grid-template-columns: 1fr !important;
    padding: 28px 24px !important;
  }

  .cs-callout-3 {
    grid-template-columns: 1fr !important;
  }

  .interests-grid {
    grid-template-columns: 1fr !important;
  }

  .shows-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .exp-item {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .connect-section {
    padding: 32px 20px !important;
  }

  .slide-title {
    font-size: 28px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .slide-artist {
    font-size: 12px !important;
  }

  .hero-hud {
    padding: 0 16px 24px !important;
  }

  .hud-counter .current-num {
    font-size: 20px !important;
  }

  .hud-progress {
    width: 80px !important;
  }

  .gallery-slide {
    width: 160px !important;
    height: 160px !important;
  }

  .gallery-carousel {
    height: 240px !important;
  }

  .gallery-slide[data-pos="-1"] { transform: translateX(-130px) scale(0.95) !important; }
  .gallery-slide[data-pos="1"]  { transform: translateX(130px) scale(0.95) !important; }
  .gallery-slide[data-pos="-2"],
  .gallery-slide[data-pos="2"] { opacity: 0 !important; }
}