/* Mazaj — targeted refresh.
 *
 * Loaded after the vendor theme so nothing in css/style.css needs editing.
 * Deleting the <link> in index.html reverts every change in this file.
 *
 * Scope: the scroll-snap carousels, hero typography, section rhythm,
 * hover/focus states, and the schedule layout on small screens. Colours are
 * the theme's own — this is not a re-skin. */

:root {
    /* The theme repeats these literals throughout and defines no custom
       properties of its own. */
    --mz-teal: #16a99f;
    --mz-teal-dark: #0d655f;
    --mz-gold: #c5a53d;
    --mz-ink: #0d0d0d;
    --mz-muted: #9e9e9e;
    --mz-line: rgba(255, 255, 255, 0.18);

    --mz-gap: 30px;
    --mz-radius: 10px;
    --mz-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------ *
 * Section rhythm
 *
 * The theme steps padding 85 → 100 → 201px across breakpoints. The jump to
 * 201px on desktop is what makes the page feel stretched and pushes the
 * schedule and booking form a long way down.
 * ------------------------------------------------------------------ */

@media (min-width: 1200px) {
    .section-lg {
        padding: 120px 0;
    }
}

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

/* The header is `position: absolute` with no z-index (css/style.css:3624) and
   sits BEFORE the hero in the DOM, so the theme relied purely on document order
   to paint it on top. Giving the hero `position: relative` below broke that —
   two positioned elements with no z-index paint in DOM order, so the hero
   covered the logo and contact details entirely. Lift the header explicitly.
   10 is clear of the hero but far below the theme's overlays (100+, 1000+). */
.header-absolute {
    z-index: 10;
}

.hero-dynamic-bg {
    position: relative;
}

/* Text sits over a photograph; without this the contrast depends entirely on
   which image happens to be uploaded. */
.hero-dynamic-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(13, 13, 13, 0.75) 0%,
        rgba(13, 13, 13, 0.55) 45%,
        rgba(13, 13, 13, 0.8) 100%
    );
    pointer-events: none;
}

.hero-dynamic-bg > * {
    position: relative;
    z-index: 1;
}

.hero-dynamic-bg h1 {
    font-size: clamp(2rem, 1.2rem + 3.4vw, 4.25rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* ------------------------------------------------------------------ *
 * Carousels — CSS scroll-snap
 *
 * Replaces Owl Carousel for these two strips. The markup is a plain track of
 * items; there is no cloning, no transform bookkeeping and no fixed pixel
 * width, so changing the number of items cannot desync anything.
 * ------------------------------------------------------------------ */

.mz-carousel {
    position: relative;
}

.mz-track {
    display: flex;
    gap: var(--mz-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;
    /* No visible scrollbar: this is a carousel, not a scrolling region.
       Swipe, wheel, the arrow buttons and keyboard all still work. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mz-track::-webkit-scrollbar {
    display: none;
}

/* When everything already fits there is nothing to scroll, so centre the row
   rather than leaving it hugging the left edge — four partner logos in a
   six-across grid would otherwise sit with dead space beside them.
   dynamic-content.js sets .mz-has-overflow when the track actually overflows. */
.mz-carousel:not(.mz-has-overflow) .mz-track {
    justify-content: center;
}

.mz-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Recent Nights was data-items="1": one full-width slide at every breakpoint,
   each slide holding a wide image and a round one. */
.mz-item-slide {
    flex: 0 0 100%;
    width: 100%;
}

/* Partner logos reproduce Owl's responsive sizing, which came from
   data-items="1" data-sm-items="3" data-md-items="4" data-xl-items="6".
   Owl sized each item as a fraction of the track, which is what spread the
   logos evenly across the row; a fixed pixel width clustered them to the left.
   Breakpoints are Owl's own (js/script.js:793-795), and unset ones inherit the
   next size down, so lg resolves to md's 4. */
.mz-item-logo {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 576px) {
    .mz-item-logo { flex-basis: calc((100% - 2 * var(--mz-gap)) / 3); }
}

@media (min-width: 768px) {
    .mz-item-logo { flex-basis: calc((100% - 3 * var(--mz-gap)) / 4); }
}

@media (min-width: 1200px) {
    .mz-item-logo { flex-basis: calc((100% - 5 * var(--mz-gap)) / 6); }
}

.mz-item .product-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

/* The round item in each slide. */
.mz-item .product-image.rounded-pill {
    aspect-ratio: 1 / 1;
}

/* Arrows. Hidden by dynamic-content.js when everything already fits, and
   disabled at whichever end the track has reached. */
.mz-nav {
    position: absolute;
    top: 38%;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 1px solid var(--mz-line);
    border-radius: 50%;
    background: rgba(13, 13, 13, 0.72);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s var(--mz-ease), opacity 0.2s var(--mz-ease);
}

.mz-nav:hover:not(:disabled) {
    background: var(--mz-teal);
}

.mz-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.mz-nav[hidden] {
    display: none;
}

.mz-prev { left: -8px; }
.mz-next { right: -8px; }

@media (max-width: 767px) {
    /* Touch users swipe; arrows would only cover the images. */
    .mz-nav { display: none; }
}

/* ------------------------------------------------------------------ *
 * Venue map
 *
 * An OpenStreetMap embed. The greyscale filter approximates the desaturated
 * styling the theme's (never-working) Google map was configured for.
 * ------------------------------------------------------------------ */

.mz-map {
    position: relative;
}

.mz-map-frame {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    border-radius: var(--mz-radius);
    filter: grayscale(0.85) contrast(1.05);
    transition: filter 0.4s var(--mz-ease);
}

.mz-map:hover .mz-map-frame,
.mz-map-frame:focus-within {
    filter: grayscale(0);
}

.mz-map-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.875rem;
    color: var(--mz-teal);
}

@media (max-width: 767px) {
    .mz-map-frame { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
    .mz-map-frame { transition: none; }
}

/* ------------------------------------------------------------------ *
 * Cards — artists, recent nights, partners
 * ------------------------------------------------------------------ */

.person,
.mz-item .product {
    transition: transform 0.28s var(--mz-ease);
}

.person:hover,
.mz-item .product:hover {
    transform: translateY(-4px);
}

.person-img,
.mz-item .product-image {
    transition: filter 0.28s var(--mz-ease), box-shadow 0.28s var(--mz-ease);
}

.person:hover .person-img,
.mz-item .product:hover .product-image {
    filter: saturate(1.08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

/* Partner logos keep the theme's own treatment — full colour, with the
   .image-link:hover fade from css/style.css. A greyscale filter was tried here
   and made the row look washed out and broken. */
.mz-item-logo img {
    max-width: 140px;
    height: auto;
}

/* ------------------------------------------------------------------ *
 * Schedule
 *
 * The time column is the thing people scan for, so it stays visually distinct.
 * Below md the grid collapses and the time used to run into the act title.
 * ------------------------------------------------------------------ */

.event-time {
    font-size: 1.0625rem;
    color: var(--mz-teal);
}

.event-title {
    letter-spacing: -0.015em;
}

@media (max-width: 767px) {
    .event {
        text-align: left;
    }

    .event-time {
        display: inline-block;
        margin-bottom: 10px;
        padding: 3px 12px;
        border-radius: 999px;
        background: rgba(22, 169, 159, 0.12);
        font-size: 0.9375rem;
    }

    .event-item + .event-item {
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid rgba(128, 128, 128, 0.22);
    }

    .event-person {
        margin-top: 10px;
    }
}

/* ------------------------------------------------------------------ *
 * Focus visibility
 *
 * The theme ships no focus styling at all, so keyboard users cannot see where
 * they are. :focus-visible keeps mouse clicks free of outlines.
 * ------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--mz-teal);
    outline-offset: 3px;
    border-radius: 2px;
}

.context-dark a:focus-visible,
.bg-primary a:focus-visible,
.hero-dynamic-bg a:focus-visible {
    outline-color: #fff;
}

/* ------------------------------------------------------------------ *
 * Motion preferences
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .mz-track {
        scroll-behavior: auto;
    }

    .person,
    .mz-item .product,
    .person-img,
    .mz-item .product-image,
    .mz-nav {
        transition: none;
    }

    .person:hover,
    .mz-item .product:hover {
        transform: none;
    }
}