/* ─────────────────────────────────────────
   SECTION — VENUES
───────────────────────────────────────── */

.venues   { background: var(--surface); }  /* beige */

.venue-panel {
  display: none;
}

.venue-panel.active {
  display: block;
}

.venue-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding-top: 8px;
}

.venue-location {
  color: var(--text-muted);
  margin-bottom: 8px;
}

.venue-name {
  margin-bottom: 20px;
  color: var(--text-primary);
}

.venue-text p {
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.venue-map-link {
  text-decoration: none;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: color 200ms var(--ease);
}

.venue-map-link:hover {
  color: var(--text-muted);
}

.venue-illustration img {
  width: 100%;
  display: flex;
  justify-content: center;
  max-width: 460px;
}


/* responsive — tablet */
@media (max-width: 1024px) {
  .venue-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


/* desktop: give the illustrations more room — the illustration column is
   wider than the text column, and the illustration fills it (capped by
   screen height so the section still fits one screen) */
@media (min-width: 1025px) {
  .venue-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: clamp(48px, 5vw, 80px);
  }

  .venue-illustration {
    display: flex;
    justify-content: center;
  }

  .venue-illustration img {
    max-width: 720px;
    max-height: 58svh;
    width: 100%;
    object-fit: contain;
  }
}