:root {
  --venue-gradient: radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 55%), radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.18), transparent 55%);
}

.hero--venue {
  min-height: min(90vh, 720px);
}

.hero--venue .hero__overlay {
  background: linear-gradient(to bottom right, rgba(15, 23, 42, 0.9), rgba(37, 99, 235, 0.7));
}

.hero__slide--single {
  background-size: cover;
  background-position: center;
}

.section--venue-intro {
  background: var(--color-background);
}

.section--venue-experience {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.95));
}

.section--venue-social {
  background: var(--venue-gradient), var(--color-background);
}

.section--venue-events {
  background: linear-gradient(140deg, rgba(15, 23, 42, 0.98), rgba(30, 64, 175, 0.9));
  color: #f9fafb;
}

.section--venue-events p {
  color: rgba(226, 232, 240, 0.92);
}

.section--venue-events a {
  color: #bfdbfe;
}

.section--venue-events a:hover {
  color: #facc15;
}

.section--venue-guests {
  background: var(--color-background);
}

.section--venue-access {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.96));
}

.venue-grid--split,
.venue-grid--social,
.venue-grid--events,
.venue-grid--guests,
.venue-grid--access {
  align-items: center;
}

.venue-figure {
  box-shadow: var(--shadow-medium);
}

.venue-card__media img {
  object-fit: cover;
}

.venue-card-wrapper {
  max-width: 480px;
  margin-left: auto;
}

.venue-card {
  height: 100%;
}

.venue-cta-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.section--venue-experience .section__heading h2,
.section--venue-experience h2 {
  margin-bottom: var(--space-2);
}

.section--venue-experience .section__heading p {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .venue-cta-inline {
    flex-direction: column;
    align-items: flex-start;
  }

  .venue-card-wrapper {
    max-width: 100%;
    margin: 0;
  }
}

@media (max-width: 600px) {
  .hero--venue {
    min-height: 520px;
  }
}