/* Title block and event rows are shared components (see styles.css). */

/* ── Empty state: coal panel with a faint stage glow + booking CTA ── */
.event-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 2.75rem 0 1.5rem;
  padding: clamp(2.25rem, 6vw, 4rem);
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 70% at 50% 0%, rgb(var(--red-rgb) / 0.1), transparent 65%), var(--coal);
}

.event-empty__title {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.event-empty__note {
  margin: 0;
  max-width: 44ch;
  color: var(--text-body);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* The panel is the tightest of the bar's four homes — its own padding costs the
   bar 72px on a phone — and is registered as a `booking-slot` query container in
   styles.css so the bar stacks here without dragging the other placements down. */
.event-empty .booking-container {
  margin-top: 1.1rem;
}

@media (max-width: 620px) {
  .event-empty {
    align-items: center;
    text-align: center;
  }
}