/* Events directory (/Events). Dark editorial surface to match the Atlas and
   the homepage hero. Scoped under .ev-shell. The structural class names
   (events-root, filter-toolbar, [data-filter], events-grid, event-tile,
   event-card/card-hybrid, [data-loadmore-btn]) are kept so the existing
   filter fetch-replace and load-more scripts keep working. */

.ev-shell { background: var(--ips-hero); color: var(--ips-cream); font-family: var(--font-sans); min-height: 70vh; }
.ev-shell .events-root { max-width: 1280px; margin: 0 auto; padding: 52px 56px 72px; }

/* hero */
.ev-hero { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: end; padding-bottom: 26px; border-bottom: 1px solid var(--ips-line); }
.ev-hero .eyebrow { margin-bottom: 18px; }
.ev-hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(56px, 8vw, 96px); line-height: .9; letter-spacing: .01em; margin: 0; }
.ev-hero h1 em { font-style: normal; color: var(--ips-accent-bright); }
.ev-hero .ev-sub { margin-top: 14px; max-width: 560px; font-size: 14px; line-height: 1.7; color: #cfd4da; }
.ev-summary { display: flex; flex-direction: column; border-top: 1px solid var(--ips-line); }
.ev-summary .sum { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ips-line); }
.ev-summary .k { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ips-ink-mute); }
.ev-summary .v { font-family: 'Bebas Neue', sans-serif; font-size: 30px; line-height: 1; }

/* filter toolbar - editorial text chips, no icons */
.filter-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 18px 0; margin-top: 4px; border-bottom: 1px solid var(--ips-line); }
.filter-toolbar .tb-label { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ips-ink-mute); margin-right: 6px; }
.filter-toolbar .btn { padding: 8px 16px; border: 1px solid var(--ips-line); background: transparent; color: var(--ips-cream); font-family: var(--font-sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; text-decoration: none; line-height: 1; cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease; }
.filter-toolbar .btn:hover { border-color: var(--ips-accent-bright); color: #fff; }
.filter-toolbar .btn.active { background: var(--ips-accent); border-color: var(--ips-accent); color: #fff; }
.filter-toolbar .btn:focus-visible { outline: 2px solid var(--ips-accent-bright); outline-offset: 2px; }

/* sections */
.events-section { margin-top: 40px; }
.events-section.hidden { display: none !important; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ips-line); padding-bottom: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.section-head { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: .02em; color: var(--ips-cream); margin: 0; }
.sec-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #7c818a; }

/* grid */
.events-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); align-items: stretch; list-style: none; margin: 0; padding: 0; }
.event-tile { display: block; width: 100%; }
.empty-state { padding: 22px 0; color: #8b929c; font-size: 13px; line-height: 1.6; }

/* load-more + footer */
.ev-loadmore .btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 13px 22px; border: 1px solid var(--ips-line-strong); background: transparent; color: var(--ips-cream); font-family: var(--font-sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: border-color .12s ease, color .12s ease; }
.ev-loadmore .btn:hover { border-color: var(--ips-accent-bright); color: #fff; }
.ev-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--ips-line); flex-wrap: wrap; }
.ev-foot .ev-foot-link { display: inline-flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--ips-accent-bright); text-decoration: none; }
.ev-foot .ev-foot-link .arr { font-family: 'Bebas Neue', sans-serif; font-size: 18px; }
.ev-foot .count { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8b929c; }
.ev-foot .count strong { color: var(--ips-cream); font-weight: 500; }

/* ===========================================================================
   event card (shared partial _EventCard). dark editorial card; reveal + hover
   =========================================================================== */
.ev-shell .event-card.card-hybrid {
    display: flex; flex-direction: column;
    background: var(--ips-hero-2);
    border: 1px solid var(--ips-line);
    color: var(--ips-cream);
    overflow: hidden;
    min-height: 100%;
    opacity: 0; transform: translateY(10px);
    transition: opacity .4s ease, transform .4s ease, border-color .14s ease;
}
.ev-shell .event-card.card-hybrid.in-view { opacity: 1; transform: translateY(0); }
.ev-shell .event-card.card-hybrid:hover { border-color: var(--ips-accent); }

.ev-shell .card-media-link { display: block; text-decoration: none; color: inherit; }
.ev-shell .card-media { position: relative; width: 100%; padding-top: 56.25%; background-size: cover; background-position: center; display: block; }
.ev-shell .media-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,15,19,0) 40%, rgba(11,15,19,.72) 100%); pointer-events: none; }
.ev-shell .date-pill { position: absolute; left: 14px; top: 14px; min-width: 50px; padding: 7px 8px 6px; background: rgba(11,15,19,.82); border: 1px solid var(--ips-line-strong); color: var(--ips-cream); display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ev-shell .date-pill .d-day { font-family: 'Bebas Neue', sans-serif; font-size: 22px; }
.ev-shell .date-pill .d-mon { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ips-accent-bright); margin-top: 2px; }

.ev-shell .card-info { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.ev-shell .event-title { margin: 0; font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .02em; line-height: 1.05; color: var(--ips-cream); }
.ev-shell .event-title-link { color: inherit; text-decoration: none; }
.ev-shell .event-title-link:hover, .ev-shell .event-title-link:focus { color: var(--ips-accent-bright); }
.ev-shell .event-venue { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ips-ink-mute); }
.ev-shell .event-excerpt { margin: 0; color: #cfd4da; font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ev-shell .event-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ips-line); }
.ev-shell .event-date { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8b929c; }
.ev-shell .event-cta .btn { padding: 8px 14px; border: 1px solid var(--ips-line-strong); background: transparent; color: var(--ips-cream); font-family: var(--font-sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; text-decoration: none; transition: border-color .12s ease, background .12s ease, color .12s ease; }
.ev-shell .event-cta .btn:hover { background: var(--ips-accent); border-color: var(--ips-accent); color: #fff; }

.ev-shell a:focus-visible { outline: 2px solid var(--ips-accent-bright); outline-offset: 3px; }

/* responsive */
@media (max-width: 991px) {
    .ev-shell .events-root { padding: 40px 24px 56px; }
    .ev-hero { grid-template-columns: 1fr; gap: 28px; align-items: start; }
    .ev-summary { max-width: 420px; }
}
@media (max-width: 560px) {
    .events-grid { grid-template-columns: 1fr; }
    .filter-toolbar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .filter-toolbar .btn { white-space: nowrap; }
}