/* ==========================================================================
   Responsive — breakpoints: 1180 (menu → hamburger) · 960 (tablet) · 640 (mobile)
   Keep MENU_BREAKPOINT in main.js in sync with the 1180 value.
   ========================================================================== */

/* ---------- ≤1180 : hamburger navigation + laptop tweaks ---------- */
@media (max-width: 1180px) {
  :root { --header-h: 72px; }
  .site-header { z-index: 200; }

  /* backdrop-filter would turn the header into the containing block of the fixed
     full-screen menu (menu clipped to header height) → solid colour instead */
  .site-header.is-scrolled, .site-header.is-solid, .site-header.menu-open {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(11, 10, 8, 0.97);
  }
  .logo, .menu-toggle { position: relative; z-index: 2; }
  .menu-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 0; z-index: 1; background: var(--black);
    height: 100vh; height: 100dvh; overflow-y: auto;
    padding: calc(var(--header-h) + 1rem) 1.5rem 2rem;
    flex-direction: column; justify-content: center; align-items: center; gap: 2rem;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity 0.5s var(--ease), transform 0.7s var(--ease-cine), visibility 0s 0.5s;
  }
  .menu-open .nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__list { flex-direction: column; align-items: center; gap: 0.5rem; }
  .nav__link { font-size: 1.5rem; font-weight: 700; padding-block: 0.35rem; }
  .nav__list li { opacity: 0; transform: translateY(16px); transition: opacity 0.6s, transform 0.8s var(--ease-cine); }
  .menu-open .nav__list li { opacity: 1; transform: none; }
  .menu-open .nav__list li:nth-child(1) { transition-delay: 0.10s; }
  .menu-open .nav__list li:nth-child(2) { transition-delay: 0.14s; }
  .menu-open .nav__list li:nth-child(3) { transition-delay: 0.18s; }
  .menu-open .nav__list li:nth-child(4) { transition-delay: 0.22s; }
  .menu-open .nav__list li:nth-child(5) { transition-delay: 0.26s; }
  .menu-open .nav__list li:nth-child(6) { transition-delay: 0.30s; }
  .menu-open .nav__list li:nth-child(7) { transition-delay: 0.34s; }
  .menu-open .nav__list li:nth-child(8) { transition-delay: 0.38s; }
  .nav .btn { min-width: 220px; }
  .menu-open .mobile-bar { visibility: hidden; }
  body.menu-lock { overflow: hidden; }

  .booking-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .checkout { grid-template-columns: 1fr 360px; }
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instr a { grid-template-columns: 3.4rem minmax(0, 12rem) minmax(0, 1fr) 80px 1.8rem; gap: 1.2rem; }
  .concert-row { grid-template-columns: 100px 200px minmax(0, 1fr) auto; gap: 1.6rem; }
}

/* ---------- ≤960 : tablet ---------- */
@media (max-width: 960px) {
  .hero__vert { display: none; }

  .members { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.6rem; }
  /* editorial blocks collapse to a single column */
  .about-ed { display: block; }
  .about-ed__media { aspect-ratio: 4 / 3; max-width: 560px; margin-bottom: 3rem; }
  .about-ed__small { display: none; }
  .about-ed__text { padding-top: 0; }
  .stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat4:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .stat4:nth-child(n+3) { border-top: 1px solid var(--line-soft); margin-top: 1.4rem; }

  .instr a { grid-template-columns: 3rem minmax(0, 1fr) 70px 1.6rem; row-gap: 0.2rem; }
  .instr__desc { grid-column: 2 / 3; grid-row: 2; }
  .instr__art { grid-column: 3; grid-row: 1 / span 2; }
  .instr__go { grid-column: 4; grid-row: 1 / span 2; }
  .instr a:hover { transform: none; }
  .instrument { flex-basis: 33.333%; }

  .artists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 1.2rem; }
  .artists--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .artist:nth-child(even) { margin-top: 2rem; }

  .concert-row { grid-template-columns: 96px minmax(0, 1fr); gap: 1.2rem 1.4rem; align-items: start; }
  .concert-row__img { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 8; }
  .concert-row__date { grid-row: 2; padding-inline-end: 1.2rem; }
  .concert-row__body { grid-row: 2; }
  .concert-row__actions { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .concert-row__actions .btn { flex: 1; }
  .concert-row__price { text-align: start; }

  .last { grid-template-columns: 1fr; }
  .last__body { margin: -3.5rem 1rem 0; }

  .mosaic { grid-auto-rows: 56px; gap: 0.7rem; }
  .player { grid-template-columns: 1fr; }
  .player__art { max-width: 240px; }
  .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news--big { grid-template-columns: 1fr; }

  .instr-full { grid-template-columns: 1fr; padding-block: 3.5rem; }
  .instr-full--alt .instr-full__media { order: 0; }
  .instr-full__media { aspect-ratio: 4 / 3; }
  .vm { grid-template-columns: 1fr; }
  .vm > div, .vm > div + div { padding-inline: 0; border-inline-start: 0; }
  .vm > div + div { border-top: 1px solid var(--line-dark); }
  .style-split, .cond, .venue { grid-template-columns: 1fr; }
  .cond__media { max-width: 320px; }
  .values li { grid-template-columns: 4rem minmax(0, 1fr); gap: 0.4rem 1.4rem; }
  .values p { grid-column: 2; }
  .collab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .artist-hero__grid { grid-template-columns: 1fr; }
  .artist-hero__text { padding-bottom: 2rem; }
  .artist-hero__portrait { max-width: 260px; margin-bottom: -3rem; }
  .artist-hero + .section { padding-top: calc(var(--space-6) + 2rem); }

  .feature, .split { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .side-box { position: static; }
  .info-strip { grid-template-columns: repeat(2, 1fr); }
  .info-strip div:nth-child(3) { border-inline-start: 0; }
  .info-strip div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }

  /* Booking: sidebar is replaced by a sticky bottom bar with an expandable seat list */
  .booking-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 2rem 2.5rem; }
  .summary { display: none; }
  .has-bar .site-footer { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
  .mobile-bar {
    display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 150;
    background: rgba(11,10,8,0.98); border-top: 1px solid var(--line); backdrop-filter: blur(10px);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-bar__row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.7rem 1rem; }
  .mobile-bar__info {
    display: flex; align-items: center; gap: 0.7rem; flex: 1; min-width: 0; min-height: 52px;
    background: none; border: 0; padding: 0; text-align: start; font: inherit;
  }
  .mobile-bar__txt { display: flex; flex-direction: column; min-width: 0; }
  .mobile-bar__txt small { font-size: var(--fs-xs); color: var(--text-muted-dark); line-height: 1.5; }
  .mobile-bar__txt strong { font-size: 1.2rem; color: var(--gold-2); font-weight: 800; line-height: 1.4; }
  .mobile-bar__info[aria-expanded="true"] .mobile-bar__chev { transform: rotate(180deg); }
  .mobile-bar__info[disabled] .mobile-bar__chev { display: none; }
  .mobile-bar .btn { min-width: 140px; flex: none; }
  .sheet { max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1rem 0.2rem; border-bottom: 1px solid var(--line-soft); animation: fadeIn 0.35s var(--ease); }
  .sheet[hidden] { display: none; }
  .sheet__head { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--gold); margin-bottom: 0.7rem; }
  .sheet .chosen { min-height: 0; margin-bottom: 0.8rem; }
  .sheet .chosen button { width: 40px; height: 40px; font-size: 1.3rem; }
  .sheet .sum-lines { margin-bottom: 0.8rem; padding-top: 0.7rem; }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .zoom { display: inline-flex; }

  .checkout { grid-template-columns: 1fr; }
  .order { position: static; order: -1; }
}

/* ---------- ≤640 : mobile ---------- */
@media (max-width: 640px) {
  .container { width: min(100% - 2rem, var(--container)); }
  .section { padding-block: 4rem; }
  .logo__fa { font-size: 1.1rem; }
  .nav__link { font-size: 1.35rem; }
   .instrument { flex-basis: 50%; }
  .instrument__art { height: 120px; }
  .instrument__art { height: 120px; }
  .sec-head { grid-template-columns: auto minmax(0, 1fr); margin-bottom: 2.4rem; padding-top: 1.1rem; }
  .sec-head .link-arrow { grid-column: 1 / -1; margin-top: 1rem; }
  .sec-head h2 { font-size: 1.7rem; }
  .sec-sub { font-size: var(--fs-base); }
  .sec-head--sm h2 { font-size: 1.35rem; }
  .chips { gap: 0 1.3rem; margin-bottom: 2rem; }
  .members { display: grid; grid-template-columns: repeat(2, 3fr); gap: 2rem 1.6rem; }
  .hero { padding-bottom: 6.5rem; align-items: center; }
  .hero__title { max-width: none; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .hero__lines { display: none; }
  .hero__next { margin-top: 2rem; }

  .about-ed__media::before { inset: -10px 10px 10px -10px; }
  .stat4 strong { font-size: 1.5rem; }

  .instr a { grid-template-columns: 2.4rem minmax(0, 1fr) 56px; gap: 0.2rem 0.8rem; padding: 1.2rem 0; }
  .instr__go { display: none; }
  .instr__art { height: 56px; grid-column: 3; }
  .instr__name strong { font-size: 1.4rem; }

  .artists { gap: 2rem 0.9rem; }
  .artist:nth-child(even) { margin-top: 1.4rem; }
  .artist h3 { font-size: 1.05rem; }

  .concert-row { grid-template-columns: 1fr; }
  .concert-row__img, .concert-row__date, .concert-row__body, .concert-row__actions { grid-column: 1; }
  .concert-row__img { grid-row: 1; }
  .concert-row__date { grid-row: 2; display: flex; align-items: baseline; gap: 0.7rem; border: 0; padding: 0; text-align: start; }
  .concert-row__date strong { font-size: 2.2rem; }
  .concert-row__body { grid-row: 3; }
  .concert-row__actions { grid-row: 4; flex-direction: column; align-items: stretch; }
  .last__body { margin: -2.5rem 0.6rem 0; }
  .last__body .btn { width: 100%; margin: 0 0 0.8rem; }

  /* gallery: 6-col rhythm, still asymmetric */
  .mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 46px; gap: 0.5rem; }
  .mosaic__item:nth-child(5n+1) { grid-column: span 6; grid-row: span 5; }
  .mosaic__item:nth-child(5n+2) { grid-column: span 3; grid-row: span 4; }
  .mosaic__item:nth-child(5n+3) { grid-column: span 3; grid-row: span 4; }
  .mosaic__item:nth-child(5n+4) { grid-column: span 2; grid-row: span 3; }
  .mosaic__item:nth-child(5n+5) { grid-column: span 4; grid-row: span 3; }
  .mosaic__cap { opacity: 1; transform: none; font-size: var(--fs-xs); padding-top: 1.6rem; }
  .lightbox { padding: 4rem 0.4rem 3.4rem; }
  .lightbox__btn { width: 44px; height: 44px; }
  .lightbox__prev { top: auto; bottom: 0.7rem; inset-inline-start: 0.8rem; transform: none; }
  .lightbox__next { top: auto; bottom: 0.7rem; inset-inline-end: 0.8rem; transform: none; }
  .masonry { columns: 1; column-gap: 1.2rem; }

  .player { padding: 1.1rem; }
  .player__art { max-width: 160px; }
  .player__time { min-width: 6.4em; font-size: 0.7rem; }
  .player__play { width: 50px; height: 50px; }
  .videos { gap: 1.2rem 0.8rem; }
  .video__title { font-size: var(--fs-sm); }
  .news-list { grid-template-columns: 1fr; gap: 2.4rem; }

  .values li { grid-template-columns: 3rem minmax(0, 1fr); }
  .timeline { padding-inline-start: 2rem; }
  .timeline li { grid-template-columns: 1fr; gap: 0.2rem; }
  .timeline li::before { inset-inline-start: -2rem; }
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio__i:nth-child(3) { display: none; }
  .trio__i:nth-child(2) { margin-top: 1.4rem; }
  .table th, .table td { padding-inline: 0.2rem; }
  .table td { font-size: 0.85rem; }
  .info-strip div { padding: 1rem; }

  .booking-head { padding: calc(var(--header-h) + 1.6rem) 0 1.6rem; }
  .booking-head p { font-size: var(--fs-base); }
  .booking-info { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem; margin-top: 1.2rem; }
  .booking-info span { display: flex; flex-direction: column; line-height: 1.5; font-size: var(--fs-xs); color: var(--text-muted-dark); }
  .booking-info b { margin: 0; font-size: var(--fs-sm); }
  .bsteps li + li::before { width: 14px; margin-inline: 0.5rem; }
  .hall { padding: 1.2rem 0.7rem 1.2rem; }
  .hall__tools { gap: 0.9rem; margin-bottom: 1.4rem; }
  .legend { gap: 0.6rem 1.2rem; font-size: var(--fs-xs); }
  .seat { --s: 30px; font-size: 0.64rem; }
  .seat-row { gap: 0.5rem; }
  .seat-block { gap: 0.25rem; }
  .aisle { width: 26px; }
  .seat-row__label:last-child { display: none; }
  .stage { margin-bottom: 2rem; }
  .tier-key { flex-direction: column; align-items: center; gap: 0.3rem; margin-top: 1.4rem; }

  .summary { padding: 1.4rem; }
  .field-row { grid-template-columns: 1fr; }
  .panel-light { padding: 1.4rem; }
  .order { padding: 1.5rem; }
  .steps li { font-size: 0.7rem; }

  /* Ticket stacks vertically */
  .ticket { grid-template-columns: 1fr; -webkit-mask: none; mask: none; }
  .ticket__main { padding: 2rem 1.5rem; }
  .ticket__title { font-size: 1.7rem; }
  .ticket__seat { border-inline-start: 0; border-top: 2px dashed rgba(180,154,98,0.5); }
  .ticket-actions .btn { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer__bottom { flex-direction: column; }
  .btn--lg { width: 100%; padding-inline: 1.4rem; }
}

@media (max-width: 380px) {
  .mobile-bar .btn { min-width: 118px; padding-inline: 1rem; }
  .mobile-bar__txt strong { font-size: 1.05rem; }
  .zoom button[data-zoom="fit"] { padding-inline: 0.6rem; }
  .artists { grid-template-columns: 1fr 1fr; }
}

/* Short landscape phones: keep the booking bar compact so the map stays visible */
@media (max-width: 960px) and (max-height: 480px) {
  .mobile-bar__row { padding-block: 0.4rem; }
  .sheet { max-height: 34vh; }
}