/* ==========================================================================
   EVENTS LISTING (/events)
   Banner + search toolbar + card grid + pagination. The banner, toolbar and
   pagination deliberately mirror the blog listing so the two index pages read
   as the same page type; the cards carry the dark tone treatment of the home
   page carousel, compacted for a four-across grid.
   ========================================================================== */
/* The shared layout centres #main-content with flex and pads it 3rem; this page
   needs the full canvas, exactly like the blog and about pages. Without this
   reset that padding stacks on top of the section's own and the banner sits far
   below the navbar. */
#main-content {
    position: relative;
    display: block;
    min-height: auto;
    padding: 0;
    text-align: left;
}

.hm-evl {
    position: relative;
    /* The navbar floats at top:22px and is 72px tall, so it occupies the first
       94px; the rest is the gap under it. */
    padding: calc(94px + 34px) 0 72px;
}

/* ================================ BANNER ================================ */
.hm-evl__banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 176px;
    padding: 28px 44px;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
}

.hm-evl__banner-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Dark wash so the title and crumbs stay legible over the photograph. */
.hm-evl__banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(10, 8, 14, .82) 0%, rgba(10, 8, 14, .55) 52%, rgba(10, 8, 14, .34) 100%);
}

.hm-evl__banner-title {
    margin: 0 0 10px;
    font-family: 'Poppins', 'Geist', sans-serif;
    font-size: clamp(28px, 4.4vw, 44px);
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
}

.hm-evl__crumbs {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .78);
}

.hm-evl__crumbs a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
}

.hm-evl__crumbs a:hover { color: #fff; }

.hm-evl__crumb-sep { color: rgba(255, 255, 255, .5); }

/* ================================ TOOLBAR ================================ */
.hm-evl__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin: 26px 0 22px;
}

.hm-evl__search {
    position: relative;
    flex: 0 1 320px;
}

.hm-evl__search-input {
    width: 100%;
    height: 46px;
    padding: 0 46px 0 18px;
    font-family: inherit;
    font-size: 14px;
    color: #2A1D14;
    background: #fff;
    border: 1px solid #EFE3DA;
    border-radius: 12px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.hm-evl__search-input::placeholder { color: #A9998D; }

.hm-evl__search-input:focus {
    border-color: #E0B48F;
    box-shadow: 0 0 0 4px rgba(224, 180, 143, .18);
}

.hm-evl__search-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: #8A7466;
    font-size: 14px;
    cursor: pointer;
    transition: color .2s ease;
}

.hm-evl__search-btn:hover { color: #C24A22; }

.hm-evl__count {
    margin: 0;
    font-size: 13.5px;
    color: #7C6A5D;
}

.hm-evl__empty {
    margin: 40px 0;
    text-align: center;
    font-size: 15px;
    color: #7C6A5D;
}

.hm-evl__empty a { color: #C24A22; }

/* ================================= GRID ================================= */
.hm-evl__grid {
    --bs-gutter-x: 22px;
    --bs-gutter-y: 22px;
}

/* Card. The speaker cut-out sits behind the copy, greyscaled and masked, the
   same treatment as the home carousel — only smaller, because four of these
   share a row. */
.hm-evl-card {
    position: relative;
    display: flex;
    /* The card's proportion, not a fixed height: every column is the same width,
       so deriving height from width makes all cards identical at any viewport —
       and keeps the near-square shape of the design. min-height is only a floor
       for the narrow two-across phone layout, where the ratio alone would leave
       too little room for the copy. */
    aspect-ratio: 184 / 197;
    min-height: 240px;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 16px 34px rgba(20, 14, 30, .16);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}

.hm-evl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(20, 14, 30, .24);
}

/* Colour sets, matching the carousel's tones. */
.hm-evl-card--purple { background: radial-gradient(120% 90% at 76% 74%, #7d2f95 0%, rgba(125, 47, 149, 0) 58%), linear-gradient(158deg, #251636 0%, #3b2154 100%); }
.hm-evl-card--teal   { background: radial-gradient(120% 90% at 72% 70%, #1c7f8a 0%, rgba(28, 127, 138, 0) 58%), linear-gradient(158deg, #0c2529 0%, #123b42 100%); }
.hm-evl-card--green  { background: radial-gradient(120% 90% at 72% 70%, #2f7d40 0%, rgba(47, 125, 64, 0) 58%), linear-gradient(158deg, #0f2218 0%, #163420 100%); }

.hm-evl-card__person {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 54%;
    height: 66%;
    object-fit: contain;
    object-position: bottom right;
    filter: grayscale(1) contrast(1.03) brightness(.98);
    -webkit-mask-image: linear-gradient(to left, #000 78%, transparent 100%);
    mask-image: linear-gradient(to left, #000 78%, transparent 100%);
    pointer-events: none;
}

.hm-evl-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 16px 16px 15px;
}

.hm-evl-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.hm-evl-card__speaker {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.hm-evl-card--purple .hm-evl-card__speaker { color: #e29bff; }
.hm-evl-card--teal   .hm-evl-card__speaker { color: #4fd8e8; }
.hm-evl-card--green  .hm-evl-card__speaker { color: #7ee08a; }

/* Paid / Free pill */
.hm-evl-card__tag {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* Two states, two colours — gold for a ticketed event, violet for a free one,
   so the difference is legible at a glance across the grid. */
.hm-evl-card__tag--paid {
    background: var(--hm-gold, #E9A320);
    color: #23180F;
}

.hm-evl-card__tag--free {
    background: #B98CF0;
    color: #241038;
}

.hm-evl-card__title {
    margin: 0 0 12px;
    max-width: 8.2em;
    font-family: 'Poppins', 'Geist', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.22;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hm-evl-card__meta {
    list-style: none;
    /* The gap before the button lives here, NOT as a margin-top on the button
       itself: an adjacent-sibling rule there would out-specify the button's
       margin-top:auto and silently beat it, so the button would stop being
       pushed to the foot of the card and float up under the copy — leaving every
       card in the row with its button at a different height. */
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hm-evl-card__meta li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: rgba(255, 255, 255, .78);
}

.hm-evl-card__meta svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, .55);
}

.hm-evl-card__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--hm-gold, #E9A320);
    color: #23180F;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease;
}

.hm-evl-card__btn svg { width: 12px; height: 12px; flex: 0 0 auto; }

.hm-evl-card__btn:hover {
    color: #23180F;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(233, 163, 32, .35);
}

/* ============================== PAGINATION ============================== */
.hm-evl__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 44px;
}

/* Round buttons: a grey "previous", plain circles for the pages, a gold RING on
   the current one and a solid gold "next" — the shape and weighting used in the
   design. Fixed width and height (no horizontal padding) so they stay circles. */
.hm-evl__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #EFE3DA;
    color: #4A3B31;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.hm-evl__page:hover {
    color: #23180F;
    border-color: #E0B48F;
}

/* Current page — outlined, not filled, so it reads as "you are here" while the
   filled gold stays reserved for the forward action. */
.hm-evl__page--current {
    background: #fff;
    border: 2px solid var(--hm-gold, #E9A320);
    color: #23180F;
}

.hm-evl__page--prev {
    background: #F0EDEA;
    border-color: #F0EDEA;
    color: #4A3B31;
}

.hm-evl__page--next {
    background: var(--hm-gold, #E9A320);
    border-color: var(--hm-gold, #E9A320);
    color: #23180F;
}

.hm-evl__page[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
}

/* ============================== RESPONSIVE ============================== */
@media (max-width: 991.98px) {
    .hm-evl { padding: 104px 0 74px; }
    .hm-evl__banner { min-height: 180px; padding: 28px 30px; }
    .hm-evl-card { min-height: 250px; }
}

@media (max-width: 575.98px) {
    .hm-evl { padding: 96px 0 60px; }
    .hm-evl__banner { min-height: 150px; padding: 22px; border-radius: 16px; }
    .hm-evl__toolbar { margin: 24px 0 18px; }
    .hm-evl__search { flex: 1 1 100%; }
    .hm-evl__grid { --bs-gutter-x: 14px; --bs-gutter-y: 14px; }

    /* Two cards still share a row here, so the copy tightens rather than the
       card growing taller. */
    .hm-evl-card { min-height: 226px; }
    .hm-evl-card__body { padding: 13px 13px 12px; }
    .hm-evl-card__title { font-size: 15px; max-width: 100%; }
    .hm-evl-card__person { width: 56%; height: 68%; }
    .hm-evl-card__meta li { font-size: 11px; }
    .hm-evl-card__btn { padding: 7px 12px; font-size: 10.5px; }
}