/* === RESPONSIVE FIXES (paste di paling bawah) === */
:root{
  --container: 1120px; /* gampang diubah bila perlu */
}

/* base & typografi responsif */
.container{ width: min(var(--container), 92%); margin-inline:auto; }
h1{ font-size: clamp(28px, 6vw, 56px); }
h2{ font-size: clamp(22px, 4.2vw, 36px); }
h3{ font-size: clamp(18px, 3.2vw, 24px); }
img, iframe{ max-width: 100%; height: auto; display:block; }

/* hero lebih ringkas di mobile */
.hero{ min-height: 48vh; }
@media (max-width: 900px){
  .hero{ min-height: 42vh; }
  .hero-inner{ padding: 56px 0; }
}

/* About: 2 kolom di desktop → 1 kolom lebih cepat di layar kecil */
.two-col{ grid-template-columns: 1.1fr .9fr; gap: 24px; align-items:start; }
@media (max-width: 1100px){ .two-col{ grid-template-columns: 1fr; } }

/* Foto besar About: batasi tinggi supaya tidak “membanjiri” */
.about-img img{
  width: 100%;
  max-height: 520px;        /* boleh naikkan ke 600px kalau perlu */
  object-fit: cover;
  border-radius: 14px;
}

/* Cards/Recordings: pecah 3→2→1 kolom */
.cards-3{ grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1024px){ .cards-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .cards-3{ grid-template-columns: 1fr; } }

/* Media grid: 3→2→1 kolom */
.media-grid{ grid-template-columns: 1.1fr .9fr .9fr; gap: 16px; }
@media (max-width: 1100px){ .media-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){ .media-grid{ grid-template-columns: 1fr; } }

/* Fact box: 3→2→1 kolom */
.fact-grid{ grid-template-columns: repeat(3,1fr); gap: 12px; }
@media (max-width: 700px){ .fact-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px){ .fact-grid{ grid-template-columns: 1fr; } }

/* Tombol full-width di mobile untuk tap target */
@media (max-width: 640px){
  .btn{ width:100%; text-align:center; }
}

/* Header & menu mobile */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,.7); backdrop-filter: blur(6px);
}
@media (max-width: 900px){
  .nav a, .nav .btn.sm{ display:none; }
  .nav-toggle{ display:block; }
  .mobile{
    position: sticky; top:56px;
    background: var(--bg);
    border-top:1px solid var(--border);
    padding:12px 4%;
  }
}

/* Tabel konser: bisa di-scroll & kompres kolom di layar kecil */
.table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
.table th, .table td{ white-space: nowrap; }
@media (max-width: 640px){
  .table th:nth-child(3), .table td:nth-child(3){ display:none; } /* sembunyikan kolom Venue di ≤640px */
}

/* Padding section lebih pas di mobile */
.section{ padding: 64px 0; }
@media (max-width: 900px){ .section{ padding: 40px 0; } }

/* Album cover tetap kotak */
.album img{ aspect-ratio: 1 / 1; object-fit: cover; }