/* =========================
   EVENTS PAGE — events.css
   Two events (Main + Coming Soon)
   - Lava-lamp page background
   - Cards + brand-consistent buttons
   - Responsive spacing
========================= */

/* ---------- Page-wide lava-lamp background (matches index) ---------- */
body::before{
  content:"";
  position:fixed; inset:-25vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(35vmax 35vmax at 20% 30%, var(--green, #0abe67) 0 38%, transparent 60%),
    radial-gradient(32vmax 32vmax at 80% 22%, var(--red, #fd2f18)   0 38%, transparent 60%),
    radial-gradient(40vmax 40vmax at 52% 77%, var(--yellow,#fece00) 0 38%, transparent 60%),
    radial-gradient(30vmax 30vmax at 14% 74%, var(--purple,#97448c) 0 38%, transparent 60%),
    radial-gradient(36vmax 36vmax at 86% 70%, var(--blue, #1888de)  0 38%, transparent 60%);
  filter: blur(28px) saturate(115%);
  opacity:.28; background-color:#fff;
}

/* ---------- Layout spacing under fixed header ---------- */
.events-main{ padding-top: var(--nav-h, 96px); }
.events-hero{ padding: 3rem 0 1rem; }
.events-hero h1{ font-size: clamp(2rem, 3vw, 2.75rem); }
.events-hero p{ max-width:640px; margin:0 auto; font-size:1rem; }

/* ---------- Two-card layout ---------- */
.events-cards .event-card{
  display:flex; flex-direction:column; gap:0; height:100%;
  border-radius: var(--radius, 16px);
  background:#fff; box-shadow: var(--shadow, 0 12px 30px rgba(0,0,0,.08));
  overflow:hidden;
}
.event-featured{ outline: 3px solid rgba(10,190,103,.08); }

.event-media{ aspect-ratio: 16 / 9; overflow:hidden; background:#fff; }
.event-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.event-card:hover .event-media img{ transform: scale(1.03); filter: brightness(1.03); }

.event-body{ padding:1rem 1rem 1.25rem; }
@media (min-width: 576px){ .event-body{ padding:1.25rem 1.25rem 1.5rem; } }

.event-title{ font-size: clamp(1.25rem, 1.2vw + 1rem, 1.75rem); margin:0; }
.event-meta{ color: var(--muted, #4b5563); font-size:.95rem; }
.event-text{ font-size:1rem; }

/* Brand-consistent subtle badge and buttons */
.bg-brand-subtle{ background: color-mix(in oklab, var(--green,#0abe67) 15%, white); }
.text-brand{ color: var(--green, #0abe67) !important; }

/* WhatsApp FAB (shared look) */
.whatsapp-float{ position:fixed; right:18px; bottom:18px; font-size:28px; line-height:1; padding:.6rem .75rem; border-radius:999px; color:#fff; background:#25D366; box-shadow:var(--shadow, 0 12px 30px rgba(0,0,0,.18)); z-index:10; }
.whatsapp-float:hover{ color:#fff; opacity:.95; }


/* ---------- Animated split underline for the hero heading ---------- */
.heading-underline{ position:relative; display:inline-block; }
.heading-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:8px; border-radius:999px;
  /* Five-brand stripe underline */
  background: linear-gradient(90deg,
    var(--green,#0abe67) 0 20%,
    var(--yellow,#fece00) 20% 40%,
    var(--red,#fd2f18) 40% 60%,
    var(--purple,#97448c) 60% 80%,
    var(--blue,#1888de) 80% 100%);
  transform: scaleX(0); transform-origin:left; opacity:.95;
  animation: underlineIn .9s cubic-bezier(.22,.8,.25,1) forwards .15s;
}
@keyframes underlineIn{ to{ transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce){
  .heading-underline::after{ animation:none; transform:scaleX(1); }
}