Glass Event Card

---
/**
 * GlassEventCard — Vibrant card for events with date badge and glass effect.
 * 
 * @param {string|number} day - The event date numeric segment.
 * @param {string} month - The event month string indicator.
 * @param {string} title - The name of the event.
 * @param {string} details - Additional string metadata (e.g location and time).
 */
interface Props {
  day: string | number;
  month: string;
  title: string;
  details: string;
}

const { day, month, title, details } = Astro.props;
---

<div class="event-card">
  <div class="event-card__badge">
    <span class="event-card__day">{day}</span>
    {month}
  </div>
  <div class="event-card__info">
    <h3 class="event-card__title">{title}</h3>
    <p class="event-card__details">{details}</p>
  </div>
  <button class="event-card__join" type="button" aria-label="Join event">+</button>
</div>

<style>
  .event-card { 
    display: flex; align-items: center; gap: var(--sp-4, 1rem); 
    padding: var(--sp-5, 1.25rem); 
    background: var(--c-bg-elev, rgba(255,255,255,0.04)); 
    backdrop-filter: blur(10px); 
    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
    border-radius: var(--r-xl, 20px); 
  }
  .event-card__badge { 
    background: var(--c-primary, #6366f1); color: #fff; 
    width: 50px; height: 60px; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    font-size: 0.7rem; font-weight: 800; border-radius: var(--r-md, 12px); 
    text-transform: uppercase;
  }
  .event-card__day { font-size: 1.2rem; line-height: 1; margin-bottom: 2px; }
  .event-card__info { flex: 1; }
  .event-card__title { font-size: 1rem; color: var(--c-text-1, #fff); margin: 0; }
  .event-card__details { font-size: 0.8rem; color: var(--c-text-2, #94a3b8); margin: 2px 0 0; }
  .event-card__join { 
    margin-left: auto; width: 40px; height: 40px; 
    border-radius: var(--r-full, 50%); 
    border: 1px solid var(--c-border, rgba(255,255,255,0.2)); 
    background: none; color: var(--c-text-1, #fff); 
    font-size: 1.2rem; cursor: pointer; transition: 0.2s; 
  }
  .event-card__join:hover { background: var(--c-text-1, #fff); color: var(--c-bg, #000); }
</style>