/* Hamburger button — hidden on desktop */
#hamburger-btn {
  display: none;
  background: none;
  border: 1px solid var(--gold-rule);
  color: var(--gold);
  font-size: 20px;
  width: 36px; height: 36px;
  border-radius: 3px;
  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: show it, 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: 3px;
  overflow: hidden;
  border: 1px solid rgba(212,168,67,0.2);
  background: var(--canopy);
  min-height: 420px;
}

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

.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(--canopy) 0%, var(--forest) 100%);
}

.kiosk-caption {
  font-family: 'Zilla Slab', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.3;
}

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

.kiosk-description {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(240,232,216,0.75);
}

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

.lightbox-counter {
  font-size: 14px;
  color: rgba(240,232,216,0.55);
  min-width: 60px;
  text-align: center;
}

/* Responsive kiosk card — stack on narrow screens */
@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: 'Zilla Slab', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.closing-hero-text {
  font-family: 'Zilla Slab', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-align: center;
  margin: 16px 0 20px;
  line-height: 1.3;
}

/* ============================================================
   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; }
}