/* ============================================================
   EVENTS.CSS — event listing card layout (grid) + event-only
   styling. Shared tokens / page chrome / pagination live in
   common.css.
   ============================================================ */

/* ── EVENT CARDS ─────────────────────────────────────────────── */
.events-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(350px,1fr));
    gap:2rem; margin:3rem 0;
}

.event-card {
    flex-direction:column;
}
.event-card:hover {
    transform:translateY(-8px);
    box-shadow:0 12px 32px var(--card-hover-shadow-color);
}

.event-image-container { width:100%; height:220px; overflow:hidden; position:relative; }
.event-image { transition:transform .4s ease; }
.event-card:hover .event-image { transform:scale(1.05); }

/* Date badge */
.event-date-badge {
    position:absolute; top:0; right:0; padding:.3rem .65rem;
    display:flex; flex-direction:column; align-items:center;
    font-family:monospace;
}
.event-date-badge .day   { font-size:2rem; line-height:1.5rem; color:var(--primary); font-weight:700; text-align:center; }
.event-date-badge .month { font-size:1rem; line-height:.6rem; color:var(--primary); margin-top:5px; text-transform:uppercase; }

.event-content { padding:0.5rem; flex-grow:1; display:flex; flex-direction:column; }

.event-description { margin-bottom:0.2rem; }

.event-meta { display:flex; flex-direction:column; gap:.5rem; font-size:.85rem; color:rgba(229,229,229,.7); margin-bottom:1rem; }
.event-meta-item { display:flex; align-items:center; gap:.5rem; }
.event-meta-icon { color:var(--primary); font-weight:600; }

/* ── HERO TAG BADGES (overlaid on image, top-left) ──────────── */
.event-tag-badges {
    position: absolute;
    top: .65rem;
    left: .65rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    z-index: 2;
    max-width: calc(100% - 1.3rem);
}
.event-tag-badge {
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .2rem .6rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    line-height: 1.4;
}

/* ── Per-tag colours (add more as needed) ───────────────────── */
.etag-talks            { background: #0C447C; color: #B5D4F4; }
.etag-workshops        { background: #085041; color: #9FE1CB; }
.etag-stargazing-sessions { background: #3C3489; color: #CECBF6; }
.etag-field-trips      { background: #712B13; color: #F5C4B3; }
.etag-astrophotography { background: #1a4a1a; color: #a8e6a8; }
.etag-interview        { background: #4a2060; color: #ddb8f5; }
.etag-default          { background: #2a2a2a; color: #cccccc; }

/* ── RESPONSIVE (events-specific) ───────────────────────────── */
@media (max-width:768px) {
    .events-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
    .events-container { width:95vw; padding:1rem 0; }
}