/**
 * Event list (views/events/index.php + views/components/event-card-modern.php).
 *
 * Same language as the create and detail pages (post-form.css, event-page.css): the site's HSL tokens, soft borderless
 * surfaces, one accent. Posters are shown whole (never cropped) over a blurred copy of themselves; the date sits on the
 * poster; everything else is quiet. Scoped under .kz-el so nothing leaks into other pages.
 */

.kz-el {
    --kz-ink-primary: var(--primary);
    --kz-action: var(--primary);
    --kz-warn: 38 95% 50%; --kz-warn-ink: 30 85% 28%;
    max-width: 1320px;
}
html.dark .kz-el { --kz-ink-primary: 144 52% 62%; --kz-action: 150 48% 33%; --kz-warn: 40 95% 60%; --kz-warn-ink: 42 100% 82%; }

/* ── header ─────────────────────────────────────────────────────────────── */
.kz-el-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.kz-el-title { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.kz-el-count { margin: .375rem 0 0; font-size: .9375rem; color: hsl(var(--muted-foreground)); }
.kz-el-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1.125rem; border-radius: .875rem; font: inherit; font-size: .9375rem; font-weight: 700; color: #fff; background: hsl(var(--kz-action)); text-decoration: none; box-shadow: 0 8px 20px -8px hsl(var(--kz-action) / .6); transition: filter .15s, transform .1s; }
.kz-el-btn:hover { filter: brightness(1.08); }
.kz-el-btn:active { transform: translateY(1px); }
.kz-el-btn svg { width: 1.125rem; height: 1.125rem; }
.kz-el-btn:focus-visible, .kz-el-pill:focus-visible, .kz-el-seg a:focus-visible, .kz-el-select:focus-visible, .kz-ec:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* ── toolbar: upcoming / past, categories, sort ─────────────────────────── */
.kz-el-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; margin-bottom: 1.5rem; }
.kz-el-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.kz-el-seg { display: inline-flex; padding: .1875rem; border-radius: .875rem; background: hsl(var(--muted)); }
.kz-el-seg a { padding: .5rem 1rem; border-radius: .6875rem; font-size: .875rem; font-weight: 700; color: hsl(var(--muted-foreground)); text-decoration: none; transition: background .15s, color .15s; }
.kz-el-seg a:hover { color: hsl(var(--foreground)); }
.kz-el-seg a[aria-current="page"] { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px hsl(0 0% 0% / .15); }
.kz-el-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.kz-el-select { min-height: 2.5rem; padding: 0 2rem 0 .875rem; border-radius: .75rem; font: inherit; font-size: .875rem; font-weight: 600; color: hsl(var(--foreground)); background-color: hsl(var(--muted)); cursor: pointer; }
html.dark .kz-el-select { color-scheme: dark; }
.kz-el-switch { display: inline-flex; align-items: center; gap: .625rem; font-size: .875rem; font-weight: 600; color: hsl(var(--muted-foreground)); cursor: pointer; user-select: none; }
.kz-el-switch input { position: absolute; opacity: 0; pointer-events: none; }
.kz-el-switch i { position: relative; width: 2.5rem; height: 1.375rem; border-radius: 999px; background: hsl(var(--muted-foreground) / .3); transition: background .2s; flex: none; }
.kz-el-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px hsl(0 0% 0% / .3); transition: transform .2s; }
.kz-el-switch input:checked + i { background: hsl(var(--kz-action)); }
.kz-el-switch input:checked + i::after { transform: translateX(1.125rem); }
.kz-el-switch input:focus-visible + i { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

.kz-el-pills { display: flex; gap: .5rem; overflow-x: auto; padding: .125rem .125rem .375rem; margin: 0 -.125rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); }
.kz-el-pills::-webkit-scrollbar { display: none; }
.kz-el-pill { flex: none; display: inline-flex; align-items: center; gap: .375rem; min-height: 2.5rem; padding: .25rem .875rem .25rem .5rem; border-radius: 999px; font-size: .875rem; font-weight: 600; white-space: nowrap; color: hsl(var(--foreground)); background: hsl(var(--muted)); text-decoration: none; transition: background .15s, color .15s, transform .1s; }
.kz-el-pill:hover { background: hsl(var(--muted-foreground) / .2); }
.kz-el-pill[aria-current="true"] { background: hsl(var(--kz-action)); color: #fff; }
.kz-el-pill.is-all { padding-left: .875rem; }

/* ── grid + card ────────────────────────────────────────────────────────── */
.kz-el-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
/* The entrance uses "backwards" (not "both"): a finished animation that keeps its end value would override the hover transform.
   The hover shadow is a pseudo-element faded with opacity, which is cheap; animating a big blurred box-shadow repaints every frame. */
.kz-ec { position: relative; display: flex; flex-direction: column; border-radius: 1.25rem; background: hsl(var(--card)); color: inherit; text-decoration: none; overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .35s cubic-bezier(.22, .61, .36, 1); animation: kzEcIn .5s cubic-bezier(.2, .8, .2, 1) backwards; will-change: transform; }
.kz-ec::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: 0 18px 36px -16px hsl(0 0% 0% / .4); opacity: 0; transition: opacity .35s ease; }
.kz-ec:hover, .kz-ec:focus-visible { transform: translateY(-3px); }
.kz-ec:hover::after, .kz-ec:focus-visible::after { opacity: 1; }
@keyframes kzEcIn { from { opacity: 0; transform: translateY(14px); } }

.kz-ec-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: hsl(var(--muted)); isolation: isolate; }
/* One frame for every poster, and every poster fills it: it is zoomed until it fits (centred a little above the middle, where
   a poster's headline usually sits). On hover it zooms in slowly, like the cards on the home page. */
/* "> .kz-ec-img": the site-wide ".img-skeleton > img" sets transition: opacity only, which would drop the zoom's transition */
.kz-ec-media > .kz-ec-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1); transition: opacity .3s ease, transform .45s cubic-bezier(.22, .61, .36, 1), filter .45s ease; will-change: transform; }
.kz-ec:hover .kz-ec-media > .kz-ec-img, .kz-ec:focus-visible .kz-ec-media > .kz-ec-img { transform: scale(1.1); filter: brightness(1.05); }
.kz-ec-media .kz-card-cover { position: absolute; inset: 0; }
.kz-ec-date { position: absolute; top: .75rem; left: .75rem; z-index: 2; display: grid; justify-items: center; min-width: 3.25rem; padding: .375rem .5rem .4375rem; border-radius: .875rem; line-height: 1; color: hsl(var(--foreground)); background: hsl(var(--card) / .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px hsl(0 0% 0% / .25); }
.kz-ec-date b { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.kz-ec-date span { margin-top: .1875rem; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--kz-ink-primary)); }
.kz-ec-date small { margin-top: .125rem; font-size: .625rem; font-weight: 700; color: hsl(var(--muted-foreground)); }
.kz-ec-tag { position: absolute; right: .75rem; bottom: .75rem; z-index: 2; display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 800; color: #fff; background: hsl(0 0% 8% / .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kz-ec-tag svg { width: .875rem; height: .875rem; }
.kz-ec-flag { position: absolute; top: .75rem; right: .75rem; z-index: 2; padding: .3125rem .75rem; border-radius: 999px; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: hsl(0 72% 46%); box-shadow: 0 4px 14px hsl(0 0% 0% / .3); }
.kz-ec.is-cancelled .kz-ec-media > .kz-ec-img, .kz-ec.is-cancelled .kz-ec-media .kz-card-cover { filter: grayscale(.9); opacity: .75; }
.kz-ec.is-cancelled .kz-ec-title { text-decoration: line-through; text-decoration-color: hsl(var(--muted-foreground) / .6); color: hsl(var(--muted-foreground)); }

.kz-ec-body { display: grid; gap: .625rem; padding: 1rem 1.125rem 1.125rem; align-content: start; flex: 1; }
.kz-ec-cat { justify-self: start; display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .625rem .1875rem .25rem; border-radius: 999px; font-size: .75rem; font-weight: 700; color: hsl(var(--kz-ink-primary)); background: hsl(var(--kz-ink-primary) / .13); }
.kz-ec-title { margin: 0; font-size: 1.125rem; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kz-ec-meta { display: grid; gap: .375rem; margin-top: .125rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.kz-ec-meta div { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.kz-ec-meta svg { width: 1rem; height: 1rem; flex: none; color: hsl(var(--kz-ink-primary)); }
.kz-ec-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── empty state ────────────────────────────────────────────────────────── */
.kz-el-empty { display: grid; justify-items: center; gap: .5rem; padding: 4rem 1rem; text-align: center; }
.kz-el-empty-ico { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; border-radius: 1.5rem; color: hsl(var(--kz-ink-primary)); background: hsl(var(--kz-ink-primary) / .13); margin-bottom: .5rem; }
.kz-el-empty-ico svg { width: 2.25rem; height: 2.25rem; }
.kz-el-empty strong { font-size: 1.25rem; font-weight: 800; }
.kz-el-empty p { margin: 0 0 .75rem; color: hsl(var(--muted-foreground)); }

@media (max-width: 639px) {
    .kz-el-head { align-items: center; }
    .kz-el-btn span { display: none; }
    .kz-el-btn { width: 2.75rem; padding: 0; }
    .kz-el-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .kz-ec { border-radius: 1rem; }
    .kz-ec-body { padding: .75rem .75rem .875rem; gap: .5rem; }
    .kz-ec-title { font-size: .9375rem; }
    .kz-ec-meta { font-size: .8125rem; }
    .kz-ec-date { top: .5rem; left: .5rem; min-width: 2.75rem; }
    .kz-ec-date b { font-size: 1.125rem; }
}
@media (max-width: 380px) { .kz-el-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .kz-ec, .kz-ec-img { animation: none; transition: none; } .kz-ec:hover { transform: none; } .kz-ec:hover .kz-ec-img { transform: none; } }

/* ── loading more ───────────────────────────────────────────────────────── */
.kz-el-more { display: grid; justify-items: center; gap: .5rem; padding: 2rem 0 1rem; }
.kz-el-more[hidden] { display: none; }
.kz-el-btn.is-soft { color: hsl(var(--foreground)); background: hsl(var(--muted)); box-shadow: none; cursor: pointer; }
.kz-el-btn:disabled { opacity: .6; cursor: progress; }
.kz-el-more-note { margin: 0; min-height: 1.25rem; font-size: .875rem; color: hsl(var(--kz-danger-ink, var(--destructive))); }

/* "happening now" flag (homepage) */
.kz-ec-flag.is-live { display: inline-flex; align-items: center; gap: .4375rem; background: hsl(0 72% 46%); }
.kz-ec-flag.is-live i { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; animation: kzEcLive 1.6s ease-in-out infinite; }
@keyframes kzEcLive { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .kz-ec-flag.is-live i { animation: none; } }

/* cancelled: a big red band across the middle of the poster, so nobody misses it (the live flag keeps its corner pill) */
.kz-ec-flag:not(.is-live) { top: 50%; left: -8%; right: -8%; transform: translateY(-50%) rotate(-9deg); padding: .75rem 0; border-radius: 0; text-align: center; font-size: clamp(1.125rem, 2.2vw, 1.5rem); letter-spacing: .22em; box-shadow: 0 8px 24px hsl(0 0% 0% / .4), inset 0 2px 0 hsl(0 0% 100% / .18), inset 0 -2px 0 hsl(0 0% 0% / .15); }
.kz-ec.is-cancelled .kz-ec-media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: hsl(0 0% 0% / .28); pointer-events: none; }
.kz-ec-flag.is-closed { background: hsl(220 9% 40%); }
.kz-ec.is-closed .kz-ec-media > .kz-ec-img, .kz-ec.is-closed .kz-ec-media .kz-card-cover { filter: grayscale(.9); opacity: .75; }
.kz-ec.is-closed .kz-ec-media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: hsl(0 0% 0% / .28); pointer-events: none; }
.kz-ec.is-closed .kz-ec-title { color: hsl(var(--muted-foreground)); }

/* ── search page ─────────────────────────────────────────────────────────────────────────────────────────────── */
.kz-sr-form { position: relative; display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.kz-sr-form input[type="search"] { flex: 1; min-width: 0; min-height: 3rem; padding: 0 1rem 0 2.75rem; border-radius: .875rem; font: inherit; font-size: 1rem; color: hsl(var(--foreground)); background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.kz-sr-form input[type="search"]:focus { outline: 2px solid hsl(var(--kz-action) / .55); outline-offset: 0; }
.kz-sr-ico { position: absolute; left: .9375rem; top: 50%; width: 1.25rem; height: 1.25rem; margin-top: -.625rem; color: hsl(var(--muted-foreground)); pointer-events: none; }
.kz-sr-form .kz-el-btn { flex: none; min-height: 3rem; }
.kz-sr-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.kz-sr-tabs::-webkit-scrollbar { display: none; }
.kz-sr-tabs a { white-space: nowrap; }
.kz-sr-n { display: inline-block; min-width: 1.25rem; margin-left: .25rem; padding: 0 .3125rem; border-radius: 999px; font-size: .75rem; font-weight: 700; text-align: center; color: hsl(var(--muted-foreground)); background: hsl(var(--muted-foreground) / .15); }
.kz-sr-tabs a[aria-current="page"] .kz-sr-n { color: #fff; background: hsl(var(--kz-action)); }
.kz-sr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kz-sr-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .625rem .3125rem .75rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: hsl(var(--kz-action)); background: hsl(var(--kz-action) / .12); text-decoration: none; transition: background .15s; }
.kz-sr-chip svg { width: .75rem; height: .75rem; }
.kz-sr-chip:hover { background: hsl(var(--kz-action) / .22); }
.kz-sr-clear { font-size: .8125rem; font-weight: 600; color: hsl(var(--muted-foreground)); text-decoration: underline; text-underline-offset: 2px; }
.kz-sr-item { display: grid; grid-template-rows: auto 1fr; align-content: start; gap: .375rem; min-width: 0; }
.kz-sr-item > .kz-ec { width: 100%; }
.kz-sr-kind { justify-self: start; padding: .125rem .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); }
.kz-sr-kind.is-eventos { color: hsl(var(--kz-action)); background: hsl(var(--kz-action) / .12); }
.kz-sr-kind.is-avisos { color: hsl(35 80% 30%); background: hsl(var(--kz-warn) / .2); }
.kz-sr-kind.is-anuncios { color: hsl(215 60% 38%); background: hsl(215 70% 50% / .13); }
.kz-sr-btn-ico { display: none; width: 1.25rem; height: 1.25rem; }
@media (max-width: 639px) {
    /* phones: the button is just the magnifier, and the selects share the row */
    .kz-sr-form .kz-el-btn { padding-inline: .875rem; }
    .kz-sr-btn-text { display: none; }
    .kz-sr-btn-ico { display: block; }
    .kz-sr .kz-el-tools { width: 100%; }
    .kz-sr .kz-el-tools .kz-el-select { flex: 1 1 8rem; min-width: 0; }
}
.kz-sr-tabs { min-width: 0; }
.kz-sr-past { margin: 1.5rem 0 0; text-align: center; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.kz-sr-past a { font-weight: 700; color: hsl(var(--kz-action, var(--primary))); }
.kz-sr-estado a { padding: .4375rem .75rem; }

/* "Patrocinado": the mark of a paid ad. Gold on purpose (the same family as the featured events), the same everywhere. */
.kz-sponsored { display: inline-flex; align-items: center; gap: .25em; border-radius: 999px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #4a2c00; background: linear-gradient(135deg, #fde68a 0%, #fbbf24 55%, #f59e0b 100%); box-shadow: 0 1px 4px hsl(32 90% 20% / .35), inset 0 1px 0 hsl(0 0% 100% / .5); }
.kz-sponsored::before { content: '\2605'; font-size: .95em; line-height: 1; }
.kz-ec-tag.kz-sponsored { color: #4a2c00; background: linear-gradient(135deg, #fde68a 0%, #fbbf24 55%, #f59e0b 100%); backdrop-filter: none; }

/* the category row on a computer (assets/js/kz-pills.js): arrows at the edges, fades only where there is more to see, drag */
.kz-pills-wrap { position: relative; }
.kz-pills-wrap .kz-el-pills { -webkit-mask-image: none; mask-image: none; cursor: grab; }
.kz-pills-wrap .kz-el-pills a { -webkit-user-drag: none; user-select: none; }
.kz-pills-wrap.can-next .kz-el-pills { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); }
.kz-pills-wrap.can-prev .kz-el-pills { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem); mask-image: linear-gradient(90deg, transparent, #000 3rem); }
.kz-pills-wrap.can-prev.can-next .kz-el-pills { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
.kz-el-pills.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.kz-el-pills.is-dragging a { pointer-events: none; }
.kz-pills-nav { position: absolute; top: calc(50% - .1875rem); z-index: 3; display: none; place-items: center; width: 2.25rem; height: 2.25rem; margin-top: -1.125rem; border-radius: 999px; color: hsl(var(--foreground)); background: hsl(var(--card)); box-shadow: 0 4px 14px hsl(0 0% 0% / .22), inset 0 0 0 1px hsl(var(--border)); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.kz-pills-nav svg { width: 1.0625rem; height: 1.0625rem; }
.kz-pills-nav.is-prev { left: -.25rem; }
.kz-pills-nav.is-next { right: -.25rem; }
.kz-pills-nav:hover { background: hsl(var(--kz-action)); color: #fff; transform: scale(1.06); }
.kz-pills-nav:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.kz-pills-wrap.can-prev .kz-pills-nav.is-prev, .kz-pills-wrap.can-next .kz-pills-nav.is-next { display: grid; }
@media (hover: none) { .kz-pills-nav { display: none !important; } }

/* category: a pill at the top right of the picture, like on the listing cards (no icon). The "happening now" flag, which used to sit there,
   moves to the bottom left. */
.kz-ec-catpill { position: absolute; top: .75rem; right: .75rem; z-index: 2; max-width: calc(100% - 4.75rem); padding: .1875rem .625rem; border-radius: 999px; font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4;
    color: hsl(var(--primary-foreground, 0 0% 100%)); background: hsl(var(--kz-action, var(--primary))); box-shadow: 0 2px 8px hsl(0 0% 0% / .25); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-ec-flag.is-live { top: auto; right: auto; left: .75rem; bottom: .75rem; }
@media (max-width: 640px) { .kz-ec-catpill { top: .5rem; right: .5rem; max-width: calc(100% - 3.75rem); font-size: .625rem; } .kz-ec-flag.is-live { left: .5rem; bottom: .5rem; } }

/* what is over is grey, and gets its colours back under the pointer (or the keyboard focus) */
/* the picture keeps the zoom of the active cards (same curve and time) and gets its colour back slowly alongside it */
.kz-ec.is-closed .kz-ec-media > .kz-ec-img { transition: transform .45s cubic-bezier(.22, .61, .36, 1), filter .7s ease, opacity .7s ease; }
.kz-ec.is-closed .kz-ec-media .kz-card-cover, .kz-ec.is-closed .kz-ec-title, .kz-ec.is-closed .kz-ec-media::after { transition: filter .7s ease, opacity .7s ease, color .7s ease, background .7s ease; }
.kz-ec.is-closed:hover .kz-ec-media > .kz-ec-img, .kz-ec.is-closed:focus-visible .kz-ec-media > .kz-ec-img { filter: grayscale(0) brightness(1.05); opacity: 1; }
.kz-ec.is-closed:hover .kz-ec-media .kz-card-cover, .kz-ec.is-closed:focus-visible .kz-ec-media .kz-card-cover { filter: none; opacity: 1; }
.kz-ec.is-closed:hover .kz-ec-media::after, .kz-ec.is-closed:focus-visible .kz-ec-media::after { background: transparent; }
.kz-ec.is-closed:hover .kz-ec-title, .kz-ec.is-closed:focus-visible .kz-ec-title { color: inherit; }

/* numbered pages of the search */
.kz-pg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .375rem; margin: 2rem 0 .5rem; }
.kz-pg a, .kz-pg-gap { min-width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center; padding: 0 .75rem; border-radius: .75rem; font-size: .9375rem; font-weight: 700; text-decoration: none; color: hsl(var(--foreground)); background: hsl(var(--muted) / .6); transition: background .15s, color .15s; }
.kz-pg a:hover { background: hsl(var(--muted)); }
.kz-pg a.is-on { color: #fff; background: hsl(var(--kz-action, var(--primary))); }
.kz-pg-gap { background: none; color: hsl(var(--muted-foreground)); min-width: 1.25rem; padding: 0; }
.kz-pg-step { display: inline-flex !important; align-items: center; gap: .375rem; }
.kz-pg-step svg { width: 1rem; height: 1rem; }
@media (max-width: 480px) { .kz-pg-step span { display: none; } .kz-pg a, .kz-pg-gap { min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem; } }

/* an event that is over says so, on the picture (the grey alone does not): bottom left, where the live flag goes */
.kz-ec-ended { position: absolute; left: .75rem; bottom: .75rem; z-index: 3; display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem .375rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: hsl(220 10% 18% / .86); box-shadow: 0 4px 14px hsl(0 0% 0% / .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kz-ec-ended svg { width: .9375rem; height: .9375rem; flex: none; }
@media (max-width: 640px) { .kz-ec-ended { left: .5rem; bottom: .5rem; font-size: .6875rem; padding: .3125rem .625rem .3125rem .5rem; } }