/* ============================================
   WITH LOVE HAIR STUDIO — Special Events Page
   ============================================ */

/* ── Hero (full-bleed image) ── */
.events-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.events-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 78% at 50% 44%,
      rgba(var(--color-espresso-rgb), 0.42) 0%,
      rgba(var(--color-espresso-rgb), 0.18) 55%,
      rgba(var(--color-espresso-rgb), 0) 80%),
    linear-gradient(to bottom,
      rgba(var(--color-espresso-rgb), 0.68) 0%,
      rgba(var(--color-espresso-rgb), 0.48) 45%,
      rgba(var(--color-espresso-rgb), 0.85) 100%);
}
.events-hero__content {
  position: relative;
  z-index: 2;
  max-width: 60rem;
  padding-inline: var(--gutter);
}
.events-hero__eyebrow {
  color: var(--color-gold);
  text-shadow: 0 1px 8px rgba(var(--color-espresso-rgb), 0.7);
  margin-bottom: var(--space-md);
}
.events-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-cream);
  text-shadow:
    0 1px 2px rgba(var(--color-espresso-rgb), 0.7),
    0 4px 30px rgba(var(--color-espresso-rgb), 0.55);
}
.events-hero__subtitle {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--text-h4);
  color: var(--color-cream-bright);
  max-width: 40rem;
  margin: var(--space-md) auto var(--space-lg);
  text-shadow: 0 1px 12px rgba(var(--color-espresso-rgb), 0.75);
}
/* keep hero words intact when the reveal animation splits them */
.events-hero__title .split-word { display: inline-block; }

/* ── Section intro ── */
.events-intro {
  max-width: var(--container-text);
  margin-inline: auto;
  text-align: center;
}

/* ── Occasion grid ── */
.occasion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
@media (min-width: 600px) { .occasion-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .occasion-grid { grid-template-columns: repeat(3, 1fr); } }

.occasion-card {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  border: 1px solid rgba(var(--color-gold-rgb), 0.28);
  background: rgba(var(--color-cream-rgb), 0.5);
  transition: transform var(--duration-fast) var(--ease-out-expo),
              border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
}
.occasion-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--color-gold-rgb), 0.7);
  box-shadow: var(--shadow-md);
}
.occasion-card__mark {
  display: block;
  font-size: 1rem;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.2em;
}
.occasion-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  color: var(--color-espresso);
  margin-bottom: 0.5rem;
}
.occasion-card__text {
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-taupe);
}

/* ── "We Come to You" band ── */
.onlocation {
  background: var(--color-espresso);
  color: var(--color-cream);
  position: relative;
}
.onlocation__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 900px) { .onlocation__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-2xl); } }

.onlocation__label { color: var(--color-gold); margin-bottom: var(--space-sm); }
.onlocation__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--leading-snug);
  color: var(--color-cream-bright);
  margin-bottom: var(--space-md);
}
.onlocation__text {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: rgba(var(--color-cream-rgb), 0.8);
}
.onlocation__text + .onlocation__text { margin-top: var(--space-md); }

.onlocation__card {
  border: 1px solid rgba(var(--color-gold-rgb), 0.4);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}
.onlocation__card-mark {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--text-h3);
  color: var(--color-gold);
}
.onlocation__card-list {
  list-style: none;
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.onlocation__card-list li {
  font-family: var(--font-body);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(var(--color-cream-rgb), 0.85);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(var(--color-cream-rgb), 0.12);
}
.onlocation__card-list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ── Process steps ── */
.event-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
@media (min-width: 760px) { .event-steps { grid-template-columns: repeat(4, 1fr); } }

.event-step { text-align: center; }
.event-step__num {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto var(--space-sm);
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  color: var(--color-gold);
}
.event-step__title {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--text-h4);
  color: var(--color-espresso);
  margin-bottom: 0.5rem;
}
.event-step__text {
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-taupe);
}

/* ── Bridal cross-link callout ── */
.events-bridal {
  text-align: center;
  border: 1px solid rgba(var(--color-gold-rgb), 0.3);
  padding: var(--space-xl);
  max-width: var(--container-text);
  margin-inline: auto;
}