/**
 * Homepage, Kezir tab (views/home.php): featured, happening now, trending, upcoming, announcements.
 *
 * Same language as the event list and detail pages (event-list.css, event-page.css): site HSL tokens, soft borderless
 * surfaces, one accent. The cards are the ones of the event list (.kz-ec) so a poster looks the same everywhere.
 * Scoped under .kz-hs.
 */

.kz-hs {
    --kz-ink-primary: var(--primary);
    --kz-action: var(--primary);
    --kz-warn: 38 95% 50%; --kz-warn-ink: 30 85% 28%;
}
html.dark .kz-hs { --kz-ink-primary: 144 52% 62%; --kz-action: 150 48% 33%; --kz-warn: 40 95% 60%; --kz-warn-ink: 42 100% 82%; }
.kz-hs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }

/* ── section header ─────────────────────────────────────────────────────── */
.kz-hs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.kz-hs-title { margin: 0; display: flex; align-items: center; gap: .625rem; font-size: clamp(1.375rem, 2.6vw, 1.75rem); line-height: 1.15; font-weight: 800; letter-spacing: -.015em; }
.kz-hs-sub { margin: .25rem 0 0; font-size: .9375rem; color: hsl(var(--muted-foreground)); }
.kz-hs-all { flex: none; display: inline-flex; align-items: center; gap: .375rem; padding: .5rem .875rem; border-radius: 999px; font-size: .875rem; font-weight: 700; color: hsl(var(--kz-ink-primary)); background: hsl(var(--kz-ink-primary) / .12); text-decoration: none; transition: background .2s, gap .2s; }
.kz-hs-all:hover { background: hsl(var(--kz-ink-primary) / .2); gap: .625rem; }
.kz-hs-all svg { width: 1rem; height: 1rem; }
.kz-hs-all:focus-visible, .kz-hs-nav:focus-visible, .kz-fx:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.kz-hs-live { width: .75rem; height: .75rem; border-radius: 50%; background: hsl(0 78% 55%); box-shadow: 0 0 0 0 hsl(0 78% 55% / .6); animation: kzHsPulse 1.8s ease-out infinite; flex: none; }
@keyframes kzHsPulse { 70% { box-shadow: 0 0 0 .5rem hsl(0 78% 55% / 0); } 100% { box-shadow: 0 0 0 0 hsl(0 78% 55% / 0); } }

/* ── rows: swipe on phones, arrows on desktop (assets/js/home-rows.js) ─── */
.kz-hs-rowwrap { position: relative; }
.kz-hs-row { display: flex; gap: 1rem; overflow-x: auto; padding: .375rem .25rem 1rem; margin: 0 -.25rem; scroll-snap-type: x proximity; scroll-padding: 0 .25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.kz-hs-row::-webkit-scrollbar { display: none; }
.kz-hs-item { flex: 0 0 min(17rem, 74%); scroll-snap-align: start; min-width: 0; display: flex; }
.kz-hs-item > .kz-ec { width: 100%; }
.kz-hs-item.is-small { flex-basis: 12.5rem; }
.kz-hs-nav { position: absolute; top: 50%; margin-top: -1.375rem; z-index: 4; display: none; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; color: hsl(var(--foreground)); background: hsl(var(--card)); box-shadow: 0 6px 18px hsl(0 0% 0% / .28); cursor: pointer; transition: opacity .2s, transform .2s; }
.kz-hs-nav svg { width: 1.25rem; height: 1.25rem; }
.kz-hs-nav.is-prev { left: -.875rem; } .kz-hs-nav.is-next { right: -.875rem; }
.kz-hs-nav:hover { transform: scale(1.06); }
.kz-hs-nav[hidden] { display: none !important; }
@media (min-width: 640px) { .kz-hs-nav { display: grid; } }

/* ── featured: wide cards, the poster and the one thing to do ─────────── */
.kz-fx-row { display: flex; padding: .25rem; margin: 0 -.25rem; }
.kz-fx { position: relative; flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(10rem, 50%) minmax(0, 1fr); border-radius: 1.5rem; overflow: hidden; color: inherit; text-decoration: none; background: hsl(var(--card)); box-shadow: var(--shadow-soft); transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s; isolation: isolate; }
.kz-fx::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 120% at 0% 0%, hsl(var(--kz-ink-primary) / .16), transparent 62%); }
.kz-fx:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px hsl(0 0% 0% / .45); }
.kz-fx-row:not(.is-multi) .kz-fx { max-width: 52rem; }
.kz-fx-media { position: relative; min-height: 20rem; overflow: hidden; background: hsl(var(--muted)); }
.kz-fx-media > .kz-fx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1); transition: opacity .3s ease, transform .9s cubic-bezier(.22, .61, .36, 1); }
.kz-fx:hover .kz-fx-media > .kz-fx-img { transform: scale(1.08); }
.kz-fx-media .kz-card-cover { position: absolute; inset: 0; }
.kz-fx-body { display: grid; gap: .5rem; align-content: center; padding: 1.25rem 1.25rem 1.25rem 1.5rem; min-width: 0; }
.kz-fx-badge { justify-self: start; display: inline-flex; align-items: center; gap: .5rem; padding: .3125rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: hsl(var(--kz-warn-ink)); background: hsl(var(--kz-warn) / .22); }
.kz-fx-badge i { width: .5rem; height: .5rem; border-radius: 50%; background: hsl(var(--kz-warn)); box-shadow: 0 0 0 0 hsl(var(--kz-warn) / .7); animation: kzHsPulseW 2s ease-out infinite; }
.kz-fx-badge small { font-size: inherit; font-weight: 700; letter-spacing: 0; text-transform: none; opacity: .8; }
@keyframes kzHsPulseW { 70% { box-shadow: 0 0 0 .4rem hsl(var(--kz-warn) / 0); } 100% { box-shadow: 0 0 0 0 hsl(var(--kz-warn) / 0); } }
.kz-fx-title { margin: 0; font-size: clamp(1.1875rem, 2.4vw, 1.625rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kz-fx .kz-ec-meta { font-size: .875rem; }
.kz-fx-cta { justify-self: start; display: inline-flex; align-items: center; gap: .5rem; margin-top: .125rem; padding: .5rem .875rem; border-radius: .75rem; font-size: .875rem; font-weight: 700; color: #fff; background: hsl(var(--kz-action)); box-shadow: 0 8px 20px -8px hsl(var(--kz-action) / .6); transition: gap .25s, filter .15s; }
.kz-fx:hover .kz-fx-cta { gap: .875rem; filter: brightness(1.08); }
.kz-fx-cta svg { width: 1.125rem; height: 1.125rem; }
@media (max-width: 639px) {
    .kz-fx { grid-template-columns: minmax(7.5rem, 46%) minmax(0, 1fr); border-radius: 1.25rem; }
    .kz-fx-media { min-height: 14rem; }
    .kz-fx-body { padding: .875rem; gap: .4375rem; }
    .kz-fx-title { font-size: 1rem; -webkit-line-clamp: 3; }
    .kz-fx-cta { padding: .5rem .875rem; font-size: .875rem; }
    .kz-fx .kz-ec-meta { font-size: .8125rem; }
}

@media (prefers-reduced-motion: reduce) { .kz-fx, .kz-fx-img, .kz-hs-live, .kz-fx-badge i { transition: none; animation: none; } .kz-fx:hover { transform: none; } }

/* ── trending: a short ranking ──────────────────────────────────────────── */
.kz-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .kz-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(3, auto); } }
.kz-tl-row { display: flex; align-items: center; gap: .875rem; padding: .625rem .875rem .625rem .5rem; border-radius: 1rem; color: inherit; text-decoration: none; background: hsl(var(--muted) / .55); transition: background .25s, transform .35s cubic-bezier(.22, .61, .36, 1); }
.kz-tl-row:hover { background: hsl(var(--muted)); transform: translateX(3px); }
.kz-tl-row:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.kz-tl-rank { flex: none; width: 1.75rem; text-align: center; font-size: 1.375rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: hsl(var(--kz-ink-primary)); }
.kz-tl-thumb { flex: none; width: 3.5rem; height: 3.5rem; border-radius: .75rem; overflow: hidden; background: hsl(var(--muted)); }
.kz-tl-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.kz-tl-text { flex: 1; min-width: 0; display: grid; gap: .125rem; }
.kz-tl-text b { font-size: .9375rem; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-tl-text small { font-size: .8125rem; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-tl-views { flex: none; display: inline-flex; align-items: center; gap: .3125rem; font-size: .8125rem; font-weight: 700; color: hsl(var(--muted-foreground)); }
.kz-tl-views svg { width: .9375rem; height: .9375rem; }
@media (prefers-reduced-motion: reduce) { .kz-tl-row { transition: none; } .kz-tl-row:hover { transform: none; } }

/* "happening now": the same list, with a live marker instead of a rank */
.kz-tl.is-live .kz-tl-row { padding-left: .625rem; background: hsl(0 78% 55% / .08); box-shadow: inset 3px 0 0 hsl(0 78% 55%); }
.kz-tl.is-live .kz-tl-row:hover { background: hsl(0 78% 55% / .14); }
@media (min-width: 900px) { .kz-tl.is-live { grid-auto-flow: row; grid-template-rows: none; } }
.kz-tl-now { flex: none; display: inline-flex; align-items: center; gap: .4375rem; 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%); }
.kz-tl-now i { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; animation: kzEcLive 1.6s ease-in-out infinite; }
.kz-tl-now.is-off { background: hsl(var(--muted-foreground) / .35); color: hsl(var(--foreground)); }
@media (prefers-reduced-motion: reduce) { .kz-tl-now i { animation: none; } }
.kz-tl.is-live:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); }

/* ── "happening now" (views/home.php, .kz-nl): a list, one row per event: thumbnail with a live dot, what / where / until when,
   a chip with the time left, and a thin progress line along the bottom edge of the row. Same tiles as "Em alta". ─────────── */
.kz-nl { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .kz-nl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kz-nl-row { position: relative; display: flex; align-items: center; gap: .875rem; padding: .625rem .875rem .75rem .625rem; border-radius: 1rem; overflow: hidden; color: inherit; text-decoration: none;
    background: hsl(var(--muted) / .55); transition: background .25s, transform .35s cubic-bezier(.22, .61, .36, 1); }
.kz-nl-row:hover { background: hsl(var(--muted)); transform: translateX(3px); }
.kz-nl-row:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.kz-nl-thumb { position: relative; flex: none; width: 3.5rem; height: 3.5rem; border-radius: .875rem; background: hsl(var(--muted)); }
.kz-nl-thumb > img, .kz-nl-thumb > .kz-card-cover { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: 50% 25%; display: grid; place-items: center; }
.kz-nl-pulse { position: absolute; right: -.2rem; top: -.2rem; width: .75rem; height: .75rem; border-radius: 50%; background: hsl(0 80% 55%); box-shadow: 0 0 0 2px hsl(var(--background)); animation: kzHsPulse 1.8s ease-out infinite; }
.kz-nl-text { flex: 1; min-width: 0; display: grid; gap: .125rem; }
.kz-nl-text b { font-size: 1rem; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-nl-text small { font-size: .8125rem; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-nl-chip { flex: none; padding: .25rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; color: hsl(0 70% 38%); background: hsl(0 80% 55% / .14); }
html.dark .kz-nl-chip { color: hsl(0 90% 78%); background: hsl(0 80% 55% / .2); }
.kz-nl-chip.is-off { color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); }
.kz-nl-go { flex: none; width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); transition: transform .25s; }
.kz-nl-row:hover .kz-nl-go { transform: translateX(3px); }
.kz-nl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: .1875rem; background: hsl(var(--muted-foreground) / .15); }
.kz-nl-bar i { display: block; height: 100%; background: linear-gradient(90deg, hsl(0 80% 58%), hsl(14 90% 55%)); border-radius: 0 999px 999px 0; }
.kz-nl-row.is-off .kz-nl-thumb { filter: grayscale(.9); }
@media (max-width: 420px) { .kz-nl-chip { display: none; } }
@media (prefers-reduced-motion: reduce) { .kz-nl-row, .kz-nl-go, .kz-nl-pulse { transition: none; animation: none; } .kz-nl-row:hover { transform: none; } }

/* what a ranking row is: a small tag in front of the title */
.kz-tl-text b { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.kz-tl-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-tl-kind { flex: none; padding: .0625rem .4375rem; border-radius: .375rem; font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--kz-ink-primary)); background: hsl(var(--kz-ink-primary) / .14); }
.kz-tl-kind.is-notice { --kz-info: 215 85% 55%; --kz-info-ink: 215 70% 34%; color: hsl(var(--kz-info-ink)); background: hsl(var(--kz-info) / .16); }
html.dark .kz-tl-kind.is-notice { --kz-info: 215 90% 68%; --kz-info-ink: 215 95% 84%; }

/* phones: the kind moves from a pill in front of the title to a plain word in the line below, and the row is tighter */
.kz-tl-kind-sm { display: none; }
@media (max-width: 639px) {
    .kz-tl-text b > .kz-tl-kind { display: none; }
    .kz-tl-kind-sm { display: inline; margin-right: .375rem; font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--kz-ink-primary)); }
    .kz-tl-kind-sm.is-notice { color: hsl(215 70% 38%); }
    html.dark .kz-tl-kind-sm.is-notice { color: hsl(215 95% 80%); }
    .kz-tl { gap: .375rem; }
    .kz-tl-row { gap: .625rem; padding: .5rem .625rem .5rem .375rem; border-radius: .875rem; }
    .kz-tl-rank { width: 1.25rem; font-size: 1.0625rem; }
    .kz-tl-thumb { width: 2.75rem; height: 2.75rem; border-radius: .625rem; }
    .kz-tl-text b { font-size: .875rem; }
    .kz-tl-text small { font-size: .75rem; }
    .kz-tl-views { font-size: .75rem; gap: .25rem; }
    .kz-tl-views svg { width: .8125rem; height: .8125rem; }
}

/* ── featured stack (several live at once): one card in front, the next ones peeking out to its left, where the posters are ── */
/* the room on the left of the card is where the deck shows: the stack is wider than the card by what the peeks need */
.kz-fx-stack { position: relative; max-width: 56rem; padding-left: 4.5rem; }
/* all cards share one grid cell, so the deck is as tall as its tallest card and nothing is positioned by hand */
.kz-fx-deck { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: .75rem; }
.kz-fx-deck > .kz-fx { grid-area: 1 / 1; width: 100%; max-width: none; flex: none; transform-origin: 0 50%;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .4s ease, filter .4s ease, box-shadow .5s; will-change: transform; }
.kz-fx-deck > .kz-fx[data-pos="0"] { z-index: 5; }
/* behind: the left edge moves out past the front card, a little smaller each time: what shows is the poster side */
.kz-fx-deck > .kz-fx[data-pos="1"] { z-index: 4; transform: translateX(-2.25rem) scale(.94); filter: brightness(.95); pointer-events: none; }
.kz-fx-deck > .kz-fx[data-pos="2"] { z-index: 3; transform: translateX(-4.5rem) scale(.88); filter: brightness(.9); pointer-events: none; }
.kz-fx-deck > .kz-fx:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]) { z-index: 2; transform: translateX(-4.5rem) scale(.88); opacity: 0; pointer-events: none; }
html.dark .kz-fx-deck > .kz-fx[data-pos="1"] { filter: brightness(.82); }
html.dark .kz-fx-deck > .kz-fx[data-pos="2"] { filter: brightness(.7); }
.kz-fx-deck > .kz-fx[data-pos="0"]:hover { transform: translateY(-3px); }
/* leaving: slides off to the right and fades (the left side is the deck); entering (going back): starts there and settles into the front */
.kz-fx-deck > .kz-fx.is-leaving { z-index: 6; transform: translate(9%, -.5rem) rotate(2.5deg) !important; opacity: 0 !important; pointer-events: none; }
.kz-fx-deck > .kz-fx.is-entering { z-index: 6; transform: translate(9%, -.5rem) rotate(2.5deg); opacity: 0; }
.kz-fx-deck > .kz-fx.is-faded { opacity: 0; }
.kz-fx-deck > .kz-fx.no-anim { transition: none !important; }

/* under the card, one row: a progress bar split in one segment per event (the one showing fills up until the next takes over),
   the count, and the arrows */
.kz-fx-controls { display: flex; align-items: center; gap: 1rem; }
.kz-fx-dots { display: flex; align-items: center; flex: 1; min-width: 0; gap: .375rem; }
.kz-fx-dot { position: relative; flex: 1; max-width: 9rem; height: .25rem; border-radius: 999px; background: hsl(var(--muted-foreground) / .22); cursor: pointer; overflow: hidden; transition: background .25s, height .2s; }
/* the segment is thin; its tap target is not */
.kz-fx-dot::after { content: ''; position: absolute; inset: -.75rem 0; }
.kz-fx-dot:hover { background: hsl(var(--muted-foreground) / .38); }
.kz-fx-dot > i { position: absolute; inset: 0; border-radius: inherit; background: hsl(var(--kz-action)); transform-origin: 0 50%; transform: scaleX(0); }
.kz-fx-dot.is-done > i, .kz-fx-dot.is-on > i { transform: scaleX(1); }
.kz-fx-dot.is-done > i { opacity: .55; }
/* still on its own: the showing segment fills over the time it stays; hovering the stack holds it */
[data-kz-autoplay]:not([data-kz-autoplay-off]) .kz-fx-dot.is-on > i { transform: scaleX(0); animation: kzFxFill var(--kz-fx-ms, 6500ms) linear forwards; }
[data-kz-autoplay]:not([data-kz-autoplay-off]):hover .kz-fx-dot.is-on > i,
[data-kz-autoplay]:not([data-kz-autoplay-off]):focus-within .kz-fx-dot.is-on > i { animation-play-state: paused; }
@keyframes kzFxFill { to { transform: scaleX(1); } }
.kz-fx-dot:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
.kz-fx-count { flex: none; font-size: .8125rem; font-variant-numeric: tabular-nums; color: hsl(var(--muted-foreground)); letter-spacing: .02em; }
.kz-fx-count b { color: hsl(var(--foreground)); font-weight: 700; }
.kz-fx-arrows { flex: none; display: flex; gap: .5rem; }
.kz-fx-arrow { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; color: hsl(var(--foreground)); background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(var(--border)); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s, transform .2s; }
.kz-fx-arrow svg { width: 1.125rem; height: 1.125rem; transition: transform .2s; }
.kz-fx-arrow:hover { background: hsl(var(--kz-action)); color: #fff; box-shadow: none; }
.kz-fx-arrow[data-kz-stack-nav="-1"]:hover svg { transform: translateX(-2px); }
.kz-fx-arrow[data-kz-stack-nav="1"]:hover svg { transform: translateX(2px); }
.kz-fx-arrow:active { transform: scale(.92); }
.kz-fx-arrow:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
@media (max-width: 639px) {
    .kz-fx-stack { padding-left: 1.75rem; }
    .kz-fx-deck > .kz-fx[data-pos="1"] { transform: translateX(-.875rem) scale(.95); }
    .kz-fx-deck > .kz-fx[data-pos="2"] { transform: translateX(-1.75rem) scale(.9); }
    .kz-fx-deck > .kz-fx:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]) { transform: translateX(-1.75rem) scale(.9); }
}
@media (prefers-reduced-motion: reduce) { .kz-fx-deck > .kz-fx, .kz-fx-dot, .kz-fx-arrow { transition: none; } .kz-fx-dot.is-on > i { animation: none !important; transform: scaleX(1) !important; } }

/* a row without a picture: the cover of its category (same tile the cards use) */
.kz-tl-thumb .kz-card-cover { width: 100%; height: 100%; }

/* ── premium touch: these are the paid placements ─────────────────────────────────────────────────────────────
   A thin gold edge with a warm glow, a light sweep that crosses the card now and then (and again when you hover it),
   and a shimmer on the badge. Only the card in front moves; the ones behind just carry the gold edge. */
.kz-fx { box-shadow: var(--shadow-soft), 0 0 0 1.5px hsl(var(--kz-warn) / .5), 0 22px 48px -26px hsl(var(--kz-warn) / .55); }
.kz-fx:hover { box-shadow: var(--shadow-soft), 0 0 0 1.5px hsl(var(--kz-warn) / .8), 0 26px 56px -24px hsl(var(--kz-warn) / .75); }
html.dark .kz-fx { box-shadow: 0 0 0 1.5px hsl(var(--kz-warn) / .55), 0 22px 48px -22px hsl(var(--kz-warn) / .4); }

/* the sweep: a slanted band of light, parked outside the card and sent across it */
.kz-fx::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transform: translateX(-130%) skewX(-18deg);
    background: linear-gradient(100deg, transparent 38%, hsl(0 0% 100% / .34) 50%, transparent 62%); }
.kz-fx-row .kz-fx::after, .kz-fx-deck > .kz-fx[data-pos="0"]::after { animation: kzFxShine 7s ease-in-out 1.2s infinite; }
.kz-fx-row .kz-fx:hover::after, .kz-fx-deck > .kz-fx[data-pos="0"]:hover::after { animation: kzFxShineHover .9s ease-out 1; }
@keyframes kzFxShine {
    0%, 62% { opacity: 0; transform: translateX(-130%) skewX(-18deg); }
    66% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; transform: translateX(130%) skewX(-18deg); }
}
@keyframes kzFxShineHover {
    0% { opacity: 1; transform: translateX(-130%) skewX(-18deg); }
    100% { opacity: 0; transform: translateX(130%) skewX(-18deg); }
}

/* the badge: a slow gold shimmer */
.kz-fx-badge { background: linear-gradient(100deg, hsl(var(--kz-warn) / .22) 0%, hsl(var(--kz-warn) / .5) 50%, hsl(var(--kz-warn) / .22) 100%); background-size: 220% 100%; animation: kzFxBadge 4.5s linear infinite; }
@keyframes kzFxBadge { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

@media (prefers-reduced-motion: reduce) {
    .kz-fx::after { animation: none !important; opacity: 0; }
    .kz-fx-badge { animation: none; background: hsl(var(--kz-warn) / .22); }
}

/* premium body and action: a warm paper tone fading out from the poster, and a gold button to match the edge */
.kz-fx-body { background: linear-gradient(135deg, hsl(var(--kz-warn) / .09), hsl(var(--kz-warn) / .02) 55%, transparent); }
.kz-fx-cta { color: hsl(35 80% 12%); background: linear-gradient(135deg, hsl(var(--kz-warn)), hsl(var(--kz-warn) / .82)); box-shadow: 0 8px 20px -8px hsl(var(--kz-warn) / .75), inset 0 1px 0 hsl(0 0% 100% / .35); }
.kz-fx:hover .kz-fx-cta { filter: brightness(1.06) saturate(1.1); }
html.dark .kz-fx-body { background: linear-gradient(135deg, hsl(var(--kz-warn) / .12), transparent 60%); }


/* trending this week on phones and tablets: a row you swipe sideways, three entries tall, the next column peeking in */
@media (max-width: 899px) {
    .kz-tl:not(.is-live) { grid-template-columns: none; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: min(88%, 24rem); gap: .375rem .625rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; }
    .kz-tl:not(.is-live)::-webkit-scrollbar { display: none; }
    .kz-tl:not(.is-live) > li { scroll-snap-align: start; min-width: 0; }
}

/* the side panel "Anúncios e serviços": a smaller heading and the two "Ver todos" ways in (the pill on top, the full-width bar below) */
.kz-hs-all { color: hsl(var(--kz-ink-primary, var(--primary))); background: hsl(var(--kz-ink-primary, var(--primary)) / .12); }
.kz-hs-all:hover { background: hsl(var(--kz-ink-primary, var(--primary)) / .2); }
.kz-hs-head.is-side { align-items: center; margin-bottom: .75rem; }
.kz-hs-head.is-side .kz-hs-title { font-size: 1.25rem; }
.kz-hs-head.is-side .kz-hs-sub { margin-top: .125rem; font-size: .8125rem; }
.kz-hs-more { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 2.875rem; padding: .5rem 1rem; border-radius: .875rem; font-size: .9375rem; font-weight: 700; color: hsl(var(--kz-ink-primary, var(--primary))); background: hsl(var(--kz-ink-primary, var(--primary)) / .12); text-decoration: none; transition: background .2s, gap .2s; }
.kz-hs-more:hover { background: hsl(var(--kz-ink-primary, var(--primary)) / .2); gap: .75rem; }
.kz-hs-more:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.kz-hs-more svg { width: 1.125rem; height: 1.125rem; }

/* "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; }

/* ── "Em alta": a row of posters (views/home.php, .kz-rk). Only the picture and its category; the row scrolls like the others (arrows from
   kz-hs-rowwrap) and the posters are spaced like the cards of the other rows. ──────────────────────────────────────────────── */
.kz-hs-item.is-rank { flex: 0 0 auto; display: block; }
.kz-rk { position: relative; display: block; padding: 0 0 .25rem; color: inherit; text-decoration: none; }
.kz-rk-poster { position: relative; display: block; width: 9.5rem; aspect-ratio: 3 / 4; border-radius: 1rem; overflow: hidden; background: hsl(var(--muted)); box-shadow: var(--shadow-soft); transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s; }
.kz-rk-poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.kz-rk-poster .kz-card-cover { position: absolute; inset: 0; display: grid; place-items: center; }
.kz-rk-cat { position: absolute; left: .5rem; top: .5rem; z-index: 1; max-width: calc(100% - 1rem); display: inline-flex; align-items: center; gap: .3125rem; padding: .1875rem .5rem .1875rem .3125rem; border-radius: 999px; font-size: .6875rem; font-weight: 700; line-height: 1.3; color: #fff; background: hsl(0 0% 0% / .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kz-rk-cat .kz-rk-ico { flex: none; width: .875rem; height: .875rem; stroke-width: 2.25; }
.kz-rk-cat > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-rk:hover .kz-rk-poster { transform: translateY(-4px); box-shadow: 0 18px 32px -16px hsl(0 0% 0% / .5); }
.kz-rk:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; border-radius: 1rem; }
@media (max-width: 640px) { .kz-rk-poster { width: 8rem; border-radius: .875rem; } }
@media (prefers-reduced-motion: reduce) { .kz-rk-poster { transition: none; } .kz-rk:hover .kz-rk-poster { transform: none; } }
/* no progress line along the bottom of a live row: the chip says how long is left */
.kz-nl-bar { display: none; }
.kz-nl-row { padding-bottom: .625rem; }