/* ─────────────────────────────────────────────────────────────
   events.css — Memora Experience / events.html
   All rules prefixed ev- to avoid collisions with styles.css.
   Loads after styles.css — same-specificity rules here win.
   ───────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

/* ─── §1. HERO ────────────────────────────────────────────── */

.ev-hero {
  background: var(--bg-cream);
  padding-block: clamp(96px, 14vw, 160px);
  text-align: center;
}

.ev-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ev-hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: var(--s-5);
}

.ev-hero__sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: var(--s-6);
}

/* ─── §2. CATEGORY PILLS ──────────────────────────────────── */

.ev-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

.ev-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  padding: 10px var(--s-5);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.ev-pill:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.ev-pill:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-pill);
}

.ev-pill:active {
  background: var(--bg-cream);
}

/* ─── §3. SECTION CHROME ──────────────────────────────────── */

.ev-section--alt {
  background: var(--bg-cream);
}

.ev-section__sub {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: var(--s-3);
}

/* ─── §4. FEATURED CARD — bg override ────────────────────── */

/* Overrides the hardcoded home-06 image in styles.css (.featured-card__bg).
   events.css loads after styles.css so same-specificity rule wins here. */
.ev-featured-bg--planetarium {
  background-image: url(../images/planetarium-night.jpg);
  background-color: var(--footer-bg);
}

.ev-featured-card__desc {
  font-family: var(--font-body);
  font-size: .95rem;
  color: rgba(255, 255, 255, .8);
  line-height: 1.6;
  margin-bottom: var(--s-4);
}

/* ─── §5. SOLO EVENT CARD ─────────────────────────────────── */

.ev-event-card--solo {
  margin-top: var(--s-6);
  min-height: 340px;
}

.ev-event-bg--yacht {
  background-image: url(../images/yacth1.jpg);
}

/* On tablet+ centre the solo card and cap its width */
@media (min-width: 601px) {
  .ev-event-card--solo {
    max-width: 640px;
    margin-inline: auto;
  }
}

/* ─── §6. EVENT CARD META (date · location) ───────────────── */

.ev-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-4);
}

.ev-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: .82rem;
  color: rgba(255, 255, 255, .72);
}

.ev-card__meta-item svg {
  flex-shrink: 0;
  opacity: .8;
}

/* ─── §7. COMING SOON BOX ─────────────────────────────────── */

.ev-coming-soon {
  border: 2px dashed var(--border);
  border-radius: var(--r-card);
  padding: clamp(48px, 8vw, 80px) var(--s-6);
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
}

.ev-coming-soon__label {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-3);
}

.ev-coming-soon__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.6;
}