.ticketyboo-slider {
    overflow: hidden;
    position: relative;
    width: 100%; /* This should be the viewport width of the slider */
    height: auto;
}

.ticketyboo-slides-container {
    display: flex;
    align-items: stretch; /* every slide stretches to the tallest one */
    /* Width of the centred zone that holds `--tb-columns` full images, with the
       prev/next peeks filling the remaining margins. The constant keeps the
       peek-to-image ratio consistent across column counts; at 1 column this
       resolves to 48% (the original single-column width). SEE MOBILE BELOW. */
    width: calc(100% * var(--tb-columns, 1) / (var(--tb-columns, 1) + 1.08333));
    transition: transform 0.5s ease-in-out;
    will-change: transform;
    margin: 0 auto;
    user-select: none;
    -webkit-user-select: none;
}

/* The slide is a flex column so the inner can fill the stretched height */
.ticketyboo-slide {
    /* Each slide is an equal fraction of the centred zone, so `--tb-columns`
       full images share its width evenly (resolves to 100% at 1 column). */
    flex: 0 0 calc(100% / var(--tb-columns, 1));
    width: calc(100% / var(--tb-columns, 1));
    box-sizing: border-box;
    padding: 0 40px; /* Adjust padding as necessary - different on mobile */
    display: flex;
    flex-direction: column;
}

/* The inner holds the media, the background colour, and the vertical alignment.
   It fills the slide so its background fills any empty space above/below the media. */
.ticketyboo-slide-inner {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;       /* default = middle (overridden via [data-alignment]) */
    justify-content: center;
    background: var(--tb-bg, transparent);
    border-radius: var(--tb-radius, 0);
    overflow: hidden;
}

.ticketyboo-slider-wrapper[data-alignment="top"]    .ticketyboo-slide-inner { align-items: flex-start; }
.ticketyboo-slider-wrapper[data-alignment="bottom"] .ticketyboo-slide-inner { align-items: flex-end;   }

.ticketyboo-slide img,
.ticketyboo-slide video {
    width: 100%;
    height: auto;
    display: block;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--tb-radius, 0);
    -webkit-user-drag: none;
    user-drag: none;
    transition: transform ease-out 0.3s;
}

.ticketyboo-slide img:hover { 
    transform: scale(103%); 
}

/* ---------- Title / caption overlays ---------- */
/* The media wrapper is only present when a title or caption is shown. It sizes
   to the image so "over" text can anchor to the image edges, and stacks the
   text beneath the image for the "under" style. */
.ticketyboo-media {
    position: relative;
    width: 100%;
}

.ticketyboo-media.ticketyboo-text-under {
    display: flex;
    flex-direction: column;
}

.ticketyboo-text .ticketyboo-title,
.ticketyboo-text .ticketyboo-caption {
    margin: 0;
}

.ticketyboo-text .ticketyboo-title + .ticketyboo-caption {
    margin-top: 8px;
}

/* "over": positioned over the image, bottom-left, 30px off the edges, white. */
.ticketyboo-text-over .ticketyboo-text {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 30px;
    text-align: left;
    color: #fff;
    /* text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); */
    z-index: 0;
}

.ticketyboo-text-over .ticketyboo-text::before {
    content:''; 
    background: linear-gradient(0deg, rgba(20,0,20,0.6) 0%, rgba(20,0,20,0) 100%); 
    width: calc(100% + 60px); 
    z-index: -1; 
    position: absolute; 
    left: -30px; 
    bottom: -30px; 
    display: block; 
    height: 90px; 
    border-radius: var(--tb-radius, 0);
}

/* "under": below the image, left aligned, 30px gap, black. */
.ticketyboo-text-under .ticketyboo-text {
    margin-top: 30px;
    text-align: left;
    color: #000;
}

/* Theme-proofing for the text colour.
   Themes like Avada colour the <h3>/<p> elements directly via their global
   typography. A colour set only on the parent .ticketyboo-text is then ignored,
   because an element's own colour always beats an inherited one — no matter how
   many !importants sit on the parent. So we colour the title/caption elements
   themselves, with a wrapper-prefixed selector (high specificity) and
   !important to outrank the theme's dynamic CSS regardless of load order. */
.ticketyboo-slider-wrapper .ticketyboo-text-over .ticketyboo-title,
.ticketyboo-slider-wrapper .ticketyboo-text-over .ticketyboo-caption {
    color: #fff !important;
}
.ticketyboo-slider-wrapper .ticketyboo-text-under .ticketyboo-title,
.ticketyboo-slider-wrapper .ticketyboo-text-under .ticketyboo-caption {
    color: #000 !important;
}

/* Drag enabled: show grab cursor; switch to grabbing during an active drag */
.ticketyboo-slider.has-drag { cursor: grab; }
.ticketyboo-slider.is-dragging { cursor: grabbing; }

/* Swipe enabled: let the browser handle vertical scroll, but reserve horizontal for us */
.ticketyboo-slider.has-swipe { touch-action: pan-y; }

.ticketyboo-controls {
    position: relative;
    width: 100%;
    margin: 30px 0;
    text-align: center;
}

.ticketyboo-controls button {
    -webkit-appearance: none;
    border: none;
    background: var(--button_gradient_top_color_hover);
    color: var(--button_accent_color);
    width: 40px; height: 40px; margin: 0 5px; padding: 0; border-radius: 50%;
    font-size: 0;
    cursor: pointer;
    transition: all ease 0.35s;
}

.ticketyboo-controls button::before {
    font-size: 14px; line-height: 1; font-family: "Font Awesome 5 Free"; font-weight: 900;
}

.ticketyboo-controls button.prev::before { content: '\f060'; }
.ticketyboo-controls button.next::before { content: '\f061'; }

.ticketyboo-controls button:hover {
    background: var(--button_gradient_top_color);
    color: #fff;
}


/* ---------- VERTICAL orientation ---------- */
/* The same track engine as horizontal, rotated: the box has a fixed height
   (--tb-height) and the track scrolls on the Y axis. The centred slide sits in
   the middle with top/bottom peeks of its neighbours. */
.ticketyboo-slider-wrapper[data-orientation="vertical"] .ticketyboo-slider {
    display: flex;
    flex-direction: column;
    justify-content: center;            /* centre the track's centred-zone in the box */
    height: var(--tb-height, 600px);
}
.ticketyboo-slider-wrapper[data-orientation="vertical"] .ticketyboo-slides-container {
    flex-direction: column;
    width: 100%;
    /* The active (centred) slide occupies this share of the box height; the
       remainder is split between the top/bottom peeks. Driven by the
       `active-height` shortcode param (default 48%). Larger = bigger active
       slide, smaller peeks. */
    height: var(--tb-active, 48%);
    margin: 0;
}
.ticketyboo-slider-wrapper[data-orientation="vertical"] .ticketyboo-slide {
    flex: 0 0 100%;                     /* one slide fills the centred-zone height */
    width: 100%;
    height: 100%;
    padding: 12px 0;                    /* vertical gap between slides */
}
/* Collapse the card to the image's natural width so the title bar and the
   rounded corners align to the IMAGE, not the full slider width. The image is
   sized by height (natural ratio, never cropped); the wrapper chain shrinks to
   it (fit-content) and the full-width outer wrapper centres it. Uniform slide
   height keeps the peeks aligned; the empty side space is the page (or the
   slider background, if one is set). */
.ticketyboo-slider-wrapper[data-orientation="vertical"] .ticketyboo-slide > .ticketyboo-slide-inner {
    width: 100%;                       /* full slide: centres the card, holds any background */
    height: 100%;
}
.ticketyboo-slider-wrapper[data-orientation="vertical"] .ticketyboo-slide-inner .ticketyboo-slide-inner,
.ticketyboo-slider-wrapper[data-orientation="vertical"] .ticketyboo-slide .ticketyboo-media {
    width: fit-content;                /* shrink to the image */
    max-width: 100%;
    height: 100%;
}
.ticketyboo-slider-wrapper[data-orientation="vertical"] .ticketyboo-slide img,
.ticketyboo-slider-wrapper[data-orientation="vertical"] .ticketyboo-slide video {
    width: auto;                       /* natural ratio, height-fit -> defines the card width */
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;               /* fully visible, never cropped */
    display: block;
}
/* Prev/Next become up/down for vertical & stacked sliders (Font Awesome 5). */
.ticketyboo-slider-wrapper[data-orientation="vertical"] .ticketyboo-controls button.prev::before,
.ticketyboo-slider-wrapper[data-orientation="stacked"] .ticketyboo-controls button.prev::before { content: '\f062'; }
.ticketyboo-slider-wrapper[data-orientation="vertical"] .ticketyboo-controls button.next::before,
.ticketyboo-slider-wrapper[data-orientation="stacked"] .ticketyboo-controls button.next::before { content: '\f063'; }


/* ---------- STACKED orientation ---------- */
/* A card stack inside a fixed-height box. Each slide is absolutely positioned
   and centred; the per-card transform / opacity / z-index / transition are set
   inline by script.js (one set per "depth" from the active card). This file
   only owns the box, the card geometry, and the look (shadow, corners). */
.ticketyboo-slider-wrapper[data-orientation="stacked"] .ticketyboo-slider {
    position: relative;
    height: var(--tb-height, 600px);
    overflow: hidden;
}
.ticketyboo-slider-wrapper[data-orientation="stacked"] .ticketyboo-slides-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;        /* not a flex track */
    transform: none;       /* the container itself never translates */
    margin: 0;
}
.ticketyboo-slider-wrapper[data-orientation="stacked"] .ticketyboo-slide {
    position: absolute;
    left: 5%;
    width: 90%;
    top: 10%;                                      /* peek room above (back cards lift up into it) */
    height: 85%;                                   /* the available area the card fits within */
    padding: 0;
    box-sizing: border-box;
    display: flex;                                 /* centre the natural-ratio image in the area */
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    will-change: transform, opacity;
    /* transform / opacity / z-index / transition come from JS (per depth). No
       box styling here — the rounded, shadowed "card" is the image itself, so a
       card matches its image's natural ratio (contained, never cropped) rather
       than filling a fixed box. */
}
.ticketyboo-slider-wrapper[data-orientation="stacked"] .ticketyboo-slide .ticketyboo-slide-inner,
.ticketyboo-slider-wrapper[data-orientation="stacked"] .ticketyboo-slide .ticketyboo-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.ticketyboo-slider-wrapper[data-orientation="stacked"] .ticketyboo-slide img,
.ticketyboo-slider-wrapper[data-orientation="stacked"] .ticketyboo-slide video {
    width: auto;
    height: auto;
    max-width: 100%;                               /* natural ratio, fully visible, never cropped */
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: var(--tb-radius, 0);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    display: block;
}
/* The hover scale on images would fight the per-card transforms — disable it. */
.ticketyboo-slider-wrapper[data-orientation="stacked"] .ticketyboo-slide img:hover { transform: none; }
/* Vertical and stacked capture a vertical finger-swipe to navigate, so reserve
   the Y touch axis for us (browser keeps horizontal). Overrides base pan-y. */
.ticketyboo-slider-wrapper[data-orientation="vertical"] .ticketyboo-slider.has-swipe,
.ticketyboo-slider-wrapper[data-orientation="stacked"] .ticketyboo-slider.has-swipe { touch-action: pan-x; }


/* MOBILE */
@media (max-width: 1000px) {
/* Mobile uses a smaller peek, so a different constant; resolves to 67% at 1 column. */
.ticketyboo-slides-container { width: calc(100% * var(--tb-columns, 1) / (var(--tb-columns, 1) + 0.49254)); }
.ticketyboo-slide { padding: 0 8px; }
.ticketyboo-controls { margin: 15px 0 30px 0; }
.ticketyboo-controls button { width: 33px; height: 33px; }
}