/* Events and programmes on alberthagan.com.
   House tokens only (see hagan.css :root) — no new palette, no new radius, no shadow that the rest
   of the estate does not already use. The one thing borrowed from Eventbrite is the date tile,
   because reading a schedule by date is the actual job of an events page. */

.hg-ev-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
    margin: 0 auto;
    max-width: 1180px;
    padding: 0 1.15rem 2.4rem;
}
@media (min-width: 940px) {
    .hg-ev-wrap { grid-template-columns: 268px minmax(0, 1fr); align-items: start; }
}

/* ---- next-up banner ---- */
.hg-ev-now {
    grid-column: 1 / -1;
    display: grid;
    gap: 1rem;
    align-items: center;
    background: linear-gradient(118deg, var(--hg-navy), #113d86 58%, var(--hg-blue));
    color: #fff;
    border-radius: calc(var(--hg-radius) * 1.6);
    padding: 1.5rem 1.6rem;
    box-shadow: var(--hg-shadow);
}
@media (min-width: 780px) { .hg-ev-now { grid-template-columns: minmax(0, 1fr) auto; } }
.hg-ev-now h2 {
    margin: 0 0 .35rem;
    font-size: clamp(1.35rem, 2.6vw, 1.95rem);
    line-height: 1.12;
    font-weight: 860;
    color: #fff;
}
.hg-ev-now p { margin: 0; color: #d6e4fb; max-width: 68ch; }
.hg-ev-now .hg-ev-eyebrow {
    display: inline-block;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--hg-gold);
    margin-bottom: .45rem;
}
.hg-ev-count {
    display: flex;
    gap: .7rem;
    justify-content: flex-start;
}
.hg-ev-count > div {
    min-width: 68px;
    padding: .55rem .6rem .5rem;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--hg-radius);
    text-align: center;
}
.hg-ev-count b { display: block; font-size: 1.5rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hg-ev-count span { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #b9cff2; }

/* ---- filter rail ---- */
.hg-ev-rail {
    display: grid;
    gap: 1rem;
    align-self: start;
    background: var(--hg-card);
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius);
    padding: 1rem 1.05rem;
    box-shadow: var(--hg-shadow);
}
@media (min-width: 940px) { .hg-ev-rail { position: sticky; top: 1rem; } }
@media (max-width: 939px) { .hg-ev-rail { order: -1; } }
.hg-ev-rail h3 {
    margin: 0 0 .4rem;
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hg-mute);
    font-weight: 800;
}
.hg-ev-search {
    width: 100%;
    font: inherit;
    font-size: .92rem;
    padding: .6rem .7rem;
    border: 1.5px solid var(--hg-line);
    border-radius: var(--hg-radius);
    background: var(--hg-page);
    color: var(--hg-ink);
}
.hg-ev-search:focus-visible { outline: 3px solid var(--hg-gold); outline-offset: 1px; border-color: var(--hg-blue); }
.hg-ev-facets { display: flex; flex-wrap: wrap; gap: .4rem; }
.hg-ev-facet {
    font: inherit;
    font-size: .82rem;
    font-weight: 650;
    padding: .38rem .7rem;
    border: 1.5px solid var(--hg-line);
    border-radius: 999px;
    background: #fff;
    color: var(--hg-navy);
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.hg-ev-facet:hover { border-color: var(--hg-blue-2); background: #eef5ff; }
.hg-ev-facet[aria-pressed="true"] { background: var(--hg-navy); border-color: var(--hg-navy); color: #fff; }
.hg-ev-facet:focus-visible { outline: 3px solid var(--hg-gold); outline-offset: 1px; }
.hg-ev-toggle { display: flex; gap: .55rem; align-items: flex-start; font-size: .86rem; color: var(--hg-mute); }
.hg-ev-toggle input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--hg-blue); }
.hg-ev-railfoot { border-top: 1px solid var(--hg-line); padding-top: .8rem; font-size: .82rem; color: var(--hg-mute); }
.hg-ev-railfoot a { color: var(--hg-blue); font-weight: 650; }

/* ---- the list ---- */
.hg-ev-list { display: grid; gap: .9rem; min-width: 0; }
.hg-ev-quiet {
    border: 1.5px solid #f0d7ac;
    background: var(--hg-warn-soft);
    color: #6f4304;
    border-radius: var(--hg-radius);
    padding: .75rem .85rem;
    margin: 0 0 .9rem;
    font-size: .88rem;
}
.hg-ev-empty {
    border: 1.5px dashed var(--hg-line);
    border-radius: var(--hg-radius);
    padding: 1.6rem;
    color: var(--hg-mute);
    background: #fff;
    text-align: center;
}

.hg-ev-item {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 1rem;
    background: var(--hg-card);
    border: 1px solid var(--hg-line);
    border-left: 4px solid var(--hg-blue);
    border-radius: var(--hg-radius);
    padding: 1.05rem 1.15rem;
    scroll-margin-top: 1.1rem;
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.hg-ev-item:hover { box-shadow: var(--hg-shadow); border-left-color: var(--hg-gold); }
.hg-ev-item.is-today { border-left-color: var(--hg-gold); background: #fffdf5; }
.hg-ev-item.is-soon { border-left-color: var(--hg-navy); }
.hg-ev-item.is-pending { border-left-color: var(--hg-line); border-style: dashed; }
/* A session that has already run is the loudest honest thing on this page, so it is drawn with the
   date tile inverted rather than greyed out like something still waiting. */
.hg-ev-item.is-past { border-left-color: var(--hg-good); background: #fbfdff; }
.hg-ev-item.is-past .hg-ev-date { background: var(--hg-navy); border-color: var(--hg-navy); }
.hg-ev-item.is-past .hg-ev-date b { color: #fff; }
.hg-ev-item.is-past .hg-ev-date span { color: #b9d2f5; }
.hg-ev-item.is-past .hg-ev-date i { color: var(--hg-gold); }
.hg-ev-tag.held { background: var(--hg-good-soft); border-color: #bfe5d1; color: var(--hg-good); }
.hg-ev-where { margin: 0 0 .45rem; font-size: .86rem; color: var(--hg-blue); font-weight: 700; }
.hg-ev-proof { grid-column: 1 / -1; margin-top: .95rem; padding-top: .8rem; border-top: 1px solid rgba(214, 228, 251, .32); }
.hg-ev-proof ul { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.hg-ev-proof li { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; font-size: .87rem; color: #cfe1fb; max-width: 64ch; }
.hg-ev-proof li b { color: #fff; font-weight: 800; }
.hg-ev-item:target { outline: 3px solid var(--hg-gold); outline-offset: 2px; }
@media (max-width: 560px) { .hg-ev-item { grid-template-columns: 1fr; gap: .7rem; } }

.hg-ev-date {
    text-align: center;
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius);
    background: var(--hg-page);
    padding: .5rem .3rem;
    align-self: start;
}
.hg-ev-date b { display: block; font-size: 1.62rem; line-height: 1; color: var(--hg-navy); font-variant-numeric: tabular-nums; }
.hg-ev-date span { display: block; font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: var(--hg-mute); font-weight: 750; }
.hg-ev-date i { display: block; font-style: normal; font-size: .68rem; color: var(--hg-blue); font-weight: 700; margin-top: .2rem; }
.hg-ev-item.is-pending .hg-ev-date { background: #fff; }
.hg-ev-item.is-pending .hg-ev-date b { font-size: 1.15rem; }

.hg-ev-body { min-width: 0; }
.hg-ev-meta { display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin-bottom: .35rem; }
.hg-ev-tag {
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .05em;
    padding: .18rem .5rem;
    border-radius: 999px;
    background: #eef5ff;
    color: var(--hg-navy);
    border: 1px solid var(--hg-line);
}
.hg-ev-tag.now { background: var(--hg-gold); border-color: var(--hg-gold); color: #3a2a00; }
.hg-ev-tag.free { background: var(--hg-good-soft); border-color: #bfe5d1; color: var(--hg-good); }
.hg-ev-tag.pending { background: var(--hg-warn-soft); border-color: #f0d7ac; color: var(--hg-warn); }
.hg-ev-item h3 { margin: 0 0 .3rem; font-size: 1.13rem; line-height: 1.25; color: var(--hg-navy); font-weight: 850; }
.hg-ev-when { margin: 0 0 .45rem; font-size: .89rem; color: var(--hg-mute); font-weight: 600; }
.hg-ev-blurb { margin: 0 0 .6rem; font-size: .93rem; color: #22314b; }
.hg-ev-acts { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.hg-ev-seats { font-size: .82rem; color: var(--hg-mute); font-weight: 650; }
.hg-ev-link { font-size: .88rem; color: var(--hg-blue); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid transparent; }
.hg-ev-link:hover { border-bottom-color: var(--hg-blue); }

.hg-ev-more { margin-top: .8rem; border-top: 1px solid var(--hg-line); padding-top: .8rem; }
.hg-ev-more h4 { margin: 0 0 .35rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hg-mute); }
.hg-ev-more ul { margin: 0 0 .8rem; padding-left: 1.05rem; font-size: .9rem; color: #22314b; }
.hg-ev-more li { margin-bottom: .22rem; }
.hg-ev-evid {
    font-size: .82rem;
    color: var(--hg-mute);
    background: var(--hg-page);
    border-left: 3px solid var(--hg-line);
    border-radius: 0 var(--hg-radius) var(--hg-radius) 0;
    padding: .55rem .7rem;
    margin: 0 0 .8rem;
}
.hg-ev-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }

/* ---- the seat form ---- */
.hg-ev-form {
    border: 1.5px solid var(--hg-line);
    border-radius: var(--hg-radius);
    background: #fff;
    padding: .95rem 1rem;
    display: grid;
    gap: .7rem;
}
.hg-ev-form > p { margin: 0; font-size: .86rem; color: var(--hg-mute); }
.hg-ev-grid2 { display: grid; gap: .7rem; }
@media (min-width: 620px) { .hg-ev-grid2 { grid-template-columns: 1fr 1fr; } }
.hg-ev-field { display: grid; gap: .25rem; }
.hg-ev-field label { font-size: .78rem; font-weight: 750; color: var(--hg-navy); letter-spacing: .02em; }
.hg-ev-field input, .hg-ev-field textarea {
    font: inherit;
    font-size: .93rem;
    padding: .55rem .65rem;
    border: 1.5px solid var(--hg-line);
    border-radius: var(--hg-radius);
    background: #fff;
    color: var(--hg-ink);
    min-width: 0;
}
.hg-ev-field input:focus-visible, .hg-ev-field textarea:focus-visible {
    outline: 3px solid var(--hg-gold);
    outline-offset: 1px;
    border-color: var(--hg-blue);
}
.hg-ev-field textarea { resize: vertical; min-height: 66px; }
.hg-ev-field.bad input, .hg-ev-field.bad textarea { border-color: var(--hg-bad); background: var(--hg-bad-soft); }
.hg-ev-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hg-ev-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .82rem; color: var(--hg-mute); }
.hg-ev-consent input { margin-top: .18rem; width: 1.05rem; height: 1.05rem; accent-color: var(--hg-blue); flex: none; }
.hg-ev-formerr { font-size: .84rem; color: var(--hg-bad); background: var(--hg-bad-soft); border-radius: var(--hg-radius); padding: .5rem .65rem; }

.hg-ev-done {
    border: 1.5px solid #bfe5d1;
    border-radius: var(--hg-radius);
    background: var(--hg-good-soft);
    padding: .95rem 1rem;
    color: #0e5336;
}
.hg-ev-done b { display: block; font-size: 1.02rem; margin-bottom: .3rem; }
.hg-ev-ref { font-size: .95rem; font-weight: 750; letter-spacing: .04em; }
.hg-ev-queue {
    font-size: .86rem;
    background: var(--hg-warn-soft);
    border: 1px solid #f0d7ac;
    border-radius: var(--hg-radius);
    color: #6f4304;
    padding: .6rem .7rem;
}

/* ---- share + offline ---- */
.hg-ev-share { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.hg-ev-live {
    grid-column: 1 / -1;
    font-size: .84rem;
    color: var(--hg-mute);
    border-top: 1px solid var(--hg-line);
    padding-top: .7rem;
}
.hg-ev-live b { color: var(--hg-navy); }

@media print {
    .hg-ev-rail, .hg-ev-form, .hg-ev-share, .hg-topbar, .hg-eco, .hg-footer, .hg-desk-dock { display: none !important; }
    .hg-ev-wrap { display: block; }
    .hg-ev-item { break-inside: avoid; box-shadow: none; }
    .hg-ev-more { display: block !important; }
}
@media (prefers-reduced-motion: reduce) {
    .hg-ev-item, .hg-ev-facet { transition: none; }
    .hg-ev-item:hover { transform: none; }
}