/*
 * Home "Spotlight" carousel — cinematic featured-events stage.
 * Self-contained (scoped to .spot), loaded only by index.php.
 */

.spot {
    --sp-accent: var(--brand-accent, #10b981);
    --sp-soft: #6ee7b7;
    --sp-deep: #031a14;
    max-width: 1200px;
    margin: .5rem auto 1.75rem;
    padding: 0 1rem;
}

.spot *,
.spot *::before,
.spot *::after { box-sizing: border-box; }

.spot button { font: inherit; margin: 0; }
.spot h2,
.spot p { margin: 0; }

/* ---------- Stage ---------- */
.spot-stage {
    position: relative;
    display: grid;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background: var(--sp-deep);
    box-shadow: 0 34px 70px -24px rgba(3, 26, 20, .6), 0 0 0 1px rgba(255, 255, 255, .06) inset;
    contain: layout paint;
}

/* All slides share one grid cell, so the stage is as tall as the tallest slide. */
.spot-slide {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    min-height: 410px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility 0s linear .8s;
}

.spot-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition-delay: 0s;
}

/* ---------- Backdrop ---------- */
.spot-bg { position: absolute; inset: 0; overflow: hidden; }

.spot-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .9;
}

.spot-bg--none {
    background:
        radial-gradient(60% 90% at 78% 30%, color-mix(in srgb, var(--sp-accent) 55%, transparent), transparent 70%),
        linear-gradient(135deg, #04382b, #031a14);
}

.spot-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(3, 26, 20, .94) 0%, rgba(3, 26, 20, .72) 46%, rgba(3, 26, 20, .22) 100%),
        radial-gradient(55% 90% at 82% 45%, color-mix(in srgb, var(--sp-accent) 40%, transparent), transparent 70%);
}

.spot-shade::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.3px);
    background-size: 20px 20px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 75%);
    mask-image: linear-gradient(90deg, #000, transparent 75%);
}

.spot-ghost {
    position: absolute;
    right: 3.2rem;
    bottom: -1.6rem;
    font-size: clamp(7rem, 16vw, 13rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, .09);
    pointer-events: none;
    user-select: none;
}

/* ---------- Layout ---------- */
.spot-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: center;
    gap: 2rem;
    padding: 2.5rem 3rem 4.6rem;
}

.spot-copy { min-width: 0; }

/* staggered entrance for the copy column */
.spot-copy > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}

.spot-slide.is-active .spot-copy > * {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * .08s + .2s);
}

.spot-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #a7f3d0;
    background: rgba(16, 185, 129, .16);
    border: 1px solid rgba(52, 211, 153, .45);
}

.spot-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sp-soft);
    box-shadow: 0 0 8px 2px rgba(110, 231, 183, .55);
}

.spot .spot-title {
    margin: .9rem 0 1rem;
    font-size: clamp(1.9rem, 3.8vw, 3.1rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #fff;
    text-shadow: 0 2px 26px rgba(0, 0, 0, .35);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.spot-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; }

.spot-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: .45rem .95rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .22);
}

.spot-chip svg { flex: none; width: 16px; height: 16px; color: var(--sp-soft); }
.spot-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* countdown */
.spot-cd { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.3rem; }

.spot-cd-label {
    margin-right: .3rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
}

.spot-cd-unit {
    min-width: 58px;
    padding: .45rem .5rem;
    text-align: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .18);
}

.spot-cd-unit b {
    display: block;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.spot-cd-unit small {
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

/* price + call to action */
.spot-buy { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem 1.4rem; }

.spot-price small {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.spot-price strong { display: block; font-size: 1.65rem; line-height: 1.15; font-weight: 800; color: #fff; }
.spot-price del { display: block; font-size: .85rem; color: rgba(255, 255, 255, .55); }

.spot .spot-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.5rem;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    color: #032b1f;
    background: linear-gradient(135deg, #a7f3d0, var(--sp-accent));
    box-shadow: 0 14px 30px -10px rgba(16, 185, 129, .8), inset 0 1px 0 rgba(255, 255, 255, .55);
    transition: transform .2s ease, box-shadow .2s ease;
}

.spot .spot-cta svg { width: 18px; height: 18px; transition: transform .2s ease; }
.spot .spot-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(16, 185, 129, .95), inset 0 1px 0 rgba(255, 255, 255, .55); }
.spot .spot-cta:hover svg { transform: translateX(4px); }
.spot .spot-cta:focus-visible,
.spot-arrow:focus-visible,
.spot-bar:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Poster "ticket" ---------- */
.spot-poster {
    position: relative;
    justify-self: center;
    display: block;
    width: min(100%, 270px);
    aspect-ratio: 3 / 4;
    opacity: 0;
    transform: perspective(1100px) translateX(70px) rotateY(-28deg) rotateZ(5deg) scale(.9);
    transition: opacity .8s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1);
}

.spot-slide.is-active .spot-poster {
    opacity: 1;
    transform: perspective(1100px) rotateY(-11deg) rotateX(3deg) rotateZ(2.5deg);
    transition-delay: .25s;
}

.spot-stage:hover .spot-slide.is-active .spot-poster {
    transform: perspective(1100px) rotateY(-4deg) rotateX(1deg) rotateZ(1deg) scale(1.03);
    transition-delay: 0s;
    transition-duration: .6s;
}

.spot-poster::before {
    content: "";
    position: absolute;
    inset: 8px 12px -8px;
    z-index: -1;
    border-radius: 24px;
    background: rgba(0, 0, 0, .3);
    box-shadow: 0 26px 34px -8px rgba(0, 0, 0, .55);
}

.spot-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(160deg, #0b4f3c, #052e23);
    /* ticket notches on both sides */
    -webkit-mask:
        radial-gradient(circle 11px at 0 58%, #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 11px at 100% 58%, #0000 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle 11px at 0 58%, #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 11px at 100% 58%, #0000 98%, #000) right / 51% 100% no-repeat;
}

.spot-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.spot-face--none {
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .55);
}

.spot-face--none svg { width: 64px; height: 64px; }

.spot-face::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .38) 48%, transparent 60%);
    transform: translateX(-130%);
    pointer-events: none;
}

.spot-slide.is-active .spot-face::after { animation: spot-shine 1.7s .9s ease-out 1 forwards; }
.spot-poster:hover .spot-face::after { animation: spot-shine 1.1s ease-out; }

@keyframes spot-shine {
    from { transform: translateX(-130%); }
    to   { transform: translateX(130%); }
}

.spot-date {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    padding: .4rem .65rem .45rem;
    border-radius: 14px;
    text-align: center;
    line-height: 1;
    color: #031a14;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

.spot-date span { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #059669; }
.spot-date b { display: block; margin-top: .15rem; font-size: 1.45rem; font-weight: 900; }

/* ---------- Controls ---------- */
.spot-controls {
    position: absolute;
    z-index: 3;
    left: 3rem;
    right: 3rem;
    bottom: 1.15rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.spot-counter {
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .85);
    white-space: nowrap;
}

.spot-counter i { font-style: normal; color: rgba(255, 255, 255, .45); }

.spot-bars { flex: 1; display: flex; gap: .45rem; }

.spot-bar {
    position: relative;
    flex: 1;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.spot-bar::before,
.spot-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 9px;
    height: 4px;
    border-radius: 4px;
}

.spot-bar::before { background: rgba(255, 255, 255, .22); transition: background .2s; }
.spot-bar:hover::before { background: rgba(255, 255, 255, .4); }

.spot-bar::after {
    background: linear-gradient(90deg, var(--sp-soft), var(--sp-accent));
    transform: scaleX(0);
    transform-origin: left;
}

.spot-bar.is-done::after { transform: scaleX(1); }
.spot-bar.is-current::after { animation: spot-fill var(--spot-dur, 6.5s) linear forwards; }
.spot.is-paused .spot-bar.is-current::after { animation-play-state: paused; }

@keyframes spot-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.spot-nav { display: flex; gap: .5rem; }

.spot-arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.spot-arrow svg { width: 18px; height: 18px; }
.spot-arrow:hover { background: var(--sp-accent); border-color: var(--sp-accent); transform: scale(1.08); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .spot-inner { padding: 2rem 1.75rem 4.6rem; gap: 1.25rem; }
    .spot-controls { left: 1.75rem; right: 1.75rem; }
    .spot-poster { width: min(100%, 220px); }
}

@media (max-width: 700px) {
    .spot { padding: 0 .75rem; }
    .spot-stage { border-radius: 22px; }
    .spot-slide { min-height: 0; }
    .spot-inner { grid-template-columns: minmax(0, 1fr); padding: 1.4rem 1.25rem 4.4rem; gap: .9rem; }
    .spot-poster { order: -1; justify-self: start; width: 132px; transform: none; opacity: 0; }
    .spot-slide.is-active .spot-poster { transform: rotate(-3deg); }
    .spot-stage:hover .spot-slide.is-active .spot-poster { transform: rotate(-3deg); }
    .spot .spot-title { margin: .6rem 0 .75rem; font-size: 1.65rem; }
    .spot-ghost { display: none; }
    .spot-controls { left: 1.25rem; right: 1.25rem; gap: .6rem; }
    .spot-counter { display: none; }
    .spot-arrow { width: 38px; height: 38px; }
    .spot-cd-unit { min-width: 50px; }
    .spot-cd-unit b { font-size: 1.25rem; }
}

@media (max-width: 420px) {
    .spot-cd-label { display: none; }
    .spot-buy { gap: .75rem 1rem; }
    .spot .spot-cta { padding: .75rem 1.2rem; }
}

/* Lite mode: added by script on low-memory / few-core / data-saver devices */
.spot-lite .spot-shade::after,
.spot-lite .spot-ghost,
.spot-lite .spot-face::after { display: none; }
.spot-lite .spot-copy > * { transition: opacity .3s ease; transform: none; }
.spot-lite .spot-slide.is-active .spot-copy > * { transition-delay: 0s; }
.spot-lite .spot-poster,
.spot-lite .spot-stage:hover .spot-slide.is-active .spot-poster { transition: opacity .3s ease; transform: rotate(2deg); }
.spot-lite .spot-slide { transition-duration: .4s; }
.spot-lite .spot-poster::before { box-shadow: 0 14px 20px -8px rgba(0, 0, 0, .5); }

@media (prefers-reduced-motion: reduce) {
    .spot *,
    .spot *::before,
    .spot *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    .spot-bar.is-current::after { transform: scaleX(1); }
}


/* =====================================================================
   Adverts — a slim, classic "framed banner"
   ===================================================================== */
.adv {
    --adv-page: #f5f5f5;         /* colour behind the legend so it "cuts" the frame line */
    --adv-paper: #fffbf1;
    --adv-rule: #cdbf9d;
    --adv-ink: #7a6a44;
    max-width: 1200px;
    margin: 1.05rem auto .7rem;
    padding: 0 1rem;
}

.adv *,
.adv *::before,
.adv *::after { box-sizing: border-box; }

.adv-frame {
    position: relative;
    padding: 6px;
    background: var(--adv-paper);
    border: 1px solid var(--adv-rule);
    border-radius: 6px;
    box-shadow:
        inset 0 0 0 1px #fff,
        0 1px 2px rgba(74, 58, 20, .08),
        0 8px 16px -10px rgba(74, 58, 20, .35);
}

/* small italic legend set into the frame line: costs no extra height */
.adv-tag,
.adv-count {
    position: absolute;
    top: -9px;
    z-index: 2;
    padding: 0 .55rem;
    font: italic 400 .72rem/1.1 Georgia, "Times New Roman", serif;
    letter-spacing: .07em;
    color: var(--adv-ink);
    background: var(--adv-page);
}

.adv-tag { left: 20px; }
.adv-count { right: 20px; font-style: normal; letter-spacing: .04em; }
.adv-count b { font-weight: 700; }

.adv-stage {
    position: relative;
    height: clamp(58px, 6.2vw, 78px);
    overflow: hidden;
    border-radius: 3px;
    background: #efe7d3;
    outline: 1px solid #e4dbc3;
    outline-offset: 0;
}

.adv-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}

.adv-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.adv-slide img,
.adv-link {
    display: block;
    width: 100%;
    height: 100%;
}

.adv-slide img { object-fit: cover; object-position: center; }

.adv-link:focus-visible { outline: 3px solid var(--sp-accent, #10b981); outline-offset: -3px; }

@media (max-width: 560px) {
    .adv { padding: 0 .75rem; margin-top: .9rem; }
    .adv-stage { height: 54px; }
    .adv-tag { left: 14px; }
    .adv-count { right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .adv-slide { transition-duration: .01ms; transition-delay: 0s; }
}