/* Hamburger button — hidden on desktop */
#hamburger-btn {
  display: none;
  background: none;
  border: 1px solid var(--accent-rule);
  color: var(--accent);
  font-size: 20px;
  width: 36px; height: 36px;
  border-radius: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  #tab-bar .event-title { display: none; }
  #tab-bar .live-clock  { display: none; }

  #hamburger-btn { display: flex; }

  .attendee-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-bottom: 80px;
  }

  .attendee-card { padding: 18px 14px; }
  .attendee-card-icon { width: 36px; height: 36px; }
  .attendee-card-icon svg { width: 28px; height: 28px; }
  .attendee-card-title { font-size: 16px; }
  .attendee-card-desc { display: none; }

  .modal-box { padding: 24px 18px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  /* Host view: stack sidebar over panel */
  #host-view { flex-direction: column; }

  #zone-b {
    position: fixed;
    top: var(--header-h);
    left: -280px;
    bottom: calc(var(--footer-h) + var(--music-h));
    width: 280px;
    transition: left 0.25s ease;
    z-index: 9999;
  }

  #zone-b.sidebar-open {
    left: 0;
  }

  #zone-a {
    width: 100%;
  }
}

/* ============================================================
   LIGHTBOX MODAL
   ============================================================ */

#modal-lightbox {
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.lightbox-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lightbox-inner .modal-close {
  position: absolute;
  top: -12px; right: -12px;
  z-index: 10;
}

/* Kiosk Card — side-by-side image + description */
.kiosk-card {
  display: flex;
  gap: 0;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(177,151,252,0.2);
  background: var(--charcoal);
  min-height: 420px;
}

.kiosk-image-side {
  flex: 0 0 60%;
  max-width: 60%;
  overflow: hidden;
  background: var(--bg);
}

.kiosk-image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: 480px;
}

.kiosk-info-side {
  flex: 1;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(160deg, var(--charcoal) 0%, var(--bg) 100%);
}

.kiosk-caption {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kiosk-divider {
  width: 48px;
  height: 3px;
  background: var(--accent);
  border-radius: 0;
  margin: 16px 0;
}

.kiosk-description {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
}

/* Lightbox nav row */
.lightbox-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.lightbox-counter {
  font-size: 14px;
  color: var(--text-muted);
  min-width: 60px;
  text-align: center;
}

/* Responsive kiosk card */
@media (max-width: 720px) {
  .kiosk-card { flex-direction: column; min-height: unset; }
  .kiosk-image-side { flex: none; max-width: 100%; height: 220px; }
  .kiosk-info-side { padding: 20px 18px; }
  .kiosk-caption { font-size: 18px; }
}

/* ============================================================
   BREWS & CLOSING PANEL ELEMENTS
   ============================================================ */

.brews-icon-row {
  margin: 20px 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brews-icon-text {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.closing-hero-text {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-align: center;
  margin: 16px 0 20px;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .ticker-content { animation: none; }
}