/* ============================================================================
   assets/css/events.css (Dev 5) - events list cards and event detail page.
   Only CSS variables from app.css (light/dark safe). Loaded by events.php and event.php via layout_header 'css'.
   ========================================================================== */

/* ---------- list grid + card ---------- */
.ev-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ev-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.ev-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ev-card.is-past .ev-media { filter: grayscale(.75); opacity: .85; }
.ev-media {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; font-size: 2.6rem; color: rgba(255, 255, 255, .85);
  background: linear-gradient(135deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 55%, var(--c-accent)));
}
.ev-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ev-date {
  position: absolute; top: .75rem; left: .75rem; min-width: 52px; padding: .3rem .6rem; text-align: center; line-height: 1.1;
  background: var(--c-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.ev-date strong { display: block; font-size: 1.3rem; color: var(--c-text); }
.ev-date span { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent); }
.ev-date.lg { position: static; flex: 0 0 auto; min-width: 72px; padding: .55rem .9rem; border: 1px solid var(--c-border); box-shadow: none; background: var(--c-surface-2); }
.ev-date.lg strong { font-size: 2rem; }
.ev-date.lg span { font-size: .8rem; }

.ev-body { display: flex; flex-direction: column; flex: 1; padding: 1rem; }
.ev-title { margin: .1rem 0 .5rem; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.ev-meta { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .3rem; font-size: .86rem; color: var(--c-text-muted); }
.ev-meta i { flex: 0 0 1rem; margin-top: .2rem; text-align: center; color: var(--c-accent); }
.ev-foot { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--c-border); font-size: .8rem; color: var(--c-text-muted); }

/* ---------- detail hero ---------- */
.ev-hero { overflow: hidden; }
.ev-hero-media {
  display: flex; align-items: center; justify-content: center; height: clamp(160px, 28vw, 320px); overflow: hidden; font-size: 4rem; color: rgba(255, 255, 255, .85);
  background:
    radial-gradient(600px 220px at 85% 0%, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent 70%),
    linear-gradient(135deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 55%, var(--c-accent)));
}
.ev-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-hero-body { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; }
.ev-h1 { margin: 0 0 .35rem; font-size: clamp(1.35rem, 3.2vw, 2rem); overflow-wrap: anywhere; }
.ev-description { line-height: 1.7; overflow-wrap: anywhere; }
.min-w-0 { min-width: 0; }

/* ---------- phones ---------- */
@media (max-width: 575.98px) {
  .ev-hero-body { padding: 1rem; align-items: flex-start; }
  .ev-date.lg { min-width: 60px; padding: .4rem .6rem; }
  .ev-date.lg strong { font-size: 1.6rem; }
}