/*
 * VZ Theater Plugin - premium-theater.css
 * All classes are prefixed vzt- to prevent theme collisions.
 * Font pairing: native Astra CSS variable var(--ast-global-font-family)
 */

/* ============================================================
   RESET / BASE VARIABLES
   ============================================================ */

:root {
    --vzt-primary:       rgb(255, 92, 0);
    --vzt-primary-gradient: linear-gradient(135deg, rgb(252, 185, 0) 0%, rgb(255, 105, 0) 100%);
    --vzt-secondary:     rgb(204, 36, 255);
    --vzt-overlay-dark:  rgba(0, 0, 0, 0.55);
    --vzt-text-light:    #f1f1f1;
    --vzt-text-hover:    #ffc9a9;
    --vzt-card-radius:   6px;
    --vzt-transition:    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    --vzt-font:          Oswald, sans-serif;
    --vzt-btn-font:      Poppins, sans-serif;
}

/* ============================================================
   [vzt_theater] - HERO SLIDER
   Target class: .vzt-theater-section
   ============================================================ */

.vzt-theater-section {
    position:   absolute !important;
    width:      100%;
    height:     100%;
    overflow:   hidden;
    background: #000;
    font-family: var(--vzt-font);
}

.vzt-theater-swiper {
    width:  100%;
    height: 100%;
    /* To use container height instead of viewport: change to height: 100%
       and make sure the parent element has an explicit height set.        */
}

/* ---- style="card" overrides ---- */
/* Two-class selector beats the single-class base rule, and the !important
 * declarations below override the base rule's !important on position/height. */

.vzt-style-card.vzt-theater-section {
    position:   relative !important;
    height:     auto     !important;
    overflow:   visible  !important;
    background: transparent !important;
}

/* Swiper: overflow visible so nav buttons and pagination sit outside the card */
.vzt-style-card .vzt-theater-swiper {
    height:         auto !important;
    overflow:       visible;
    padding-bottom: 36px; /* room for pagination below the card */
}

/* The slide IS the card - rounded corners clip the video and overlay.
 * clip-path is the reliable fix: it clips the element's painted output
 * (including all transformed descendants) at the compositor level, so it is
 * not affected by the child compositing layers that cause overflow:hidden +
 * border-radius to fail in Safari when children have a CSS transform.
 * overflow:hidden is kept for layout containment; border-radius kept as
 * fallback for any browser without clip-path support. */
/* aspect-ratio: 16/6 governs sizing when height="" is not set.
 * When the shortcode sets height="500px" (or any CSS value), JS puts it
 * in --vzt-theater-h and this declaration wins: an explicit height beats
 * aspect-ratio. When the variable is undefined the declaration is invalid
 * and falls back to auto, letting aspect-ratio take effect as normal. */
.vzt-style-card .vzt-theater-slide {
    overflow:      hidden;
    border-radius: var(--vzt-card-radius);
    aspect-ratio:  16 / 6;
    height:        var(--vzt-theater-h);
    position:      relative;
    transform:     translateZ(0);
    clip-path:     inset(0 round var(--vzt-card-radius));
}

/* Full-card link overlay: no CTA button in card style, whole slide is clickable */
.vzt-slide-link {
    position:        absolute;
    inset:           0;
    z-index:         5;
    text-decoration: none;
}

/* Nav buttons overflow outside the swiper into the container padding zones.
 * The swiper stays at section width (card = full content zone), so buttons are
 * pushed out via negative left/right. Section overflow:visible keeps them visible
 * and interactive. JS sets --vzt-left-bleed and --vzt-right-bleed. */
.vzt-style-card .vzt-nav-prev,
.vzt-style-card .vzt-nav-next {
    top:             0;
    bottom:          0;
    height:          auto;
    margin-top:      0;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.vzt-style-card .vzt-nav-prev {
    left:  calc( -1 * var(--vzt-left-bleed,  44px) );
    right: auto;
    width: var(--vzt-left-bleed, 44px);
}

.vzt-style-card .vzt-nav-next {
    right: calc( -1 * var(--vzt-right-bleed, 44px) );
    left:  auto;
    width: var(--vzt-right-bleed, 44px);
}

/* Pagination sits in the padding-bottom area below the card */
.vzt-style-card .vzt-pagination {
    bottom: 8px;
}

/* ---- vzt_hero: single-slide hero, no carousel ---- */

/* Full-bleed mode: stretch to cover the section exactly like a Swiper instance would. */
.vzt-hero-single {
    position: absolute;
    inset:    0;
}

/* The slide itself must be a positioning context for .vzt-slide-bg (position: absolute).
 * Width + height fill the .vzt-hero-single wrapper. */
.vzt-hero-single .vzt-theater-slide {
    position: relative;
    width:    100%;
    height:   100%;
}

/* Card style: static flow so the section collapses to the slide's aspect-ratio.
 * .vzt-style-card .vzt-theater-slide already handles border-radius, clip-path,
 * aspect-ratio, and the --vzt-theater-h custom property for fixed heights. */
.vzt-style-card .vzt-hero-single {
    position: static;
    overflow: visible;
}

/* ---- Background Layer ---- */

.vzt-slide-bg {
    position: absolute;
    inset:    0;
    overflow: hidden;
}

.vzt-slide-video,
.vzt-slide-thumb {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center 15%;
    transform:        scale(1.15);
    transform-origin: center 15%;
}

.vzt-slide-video.vzt-intro-slide-video {
    object-position: center center;
    transform-origin: center center;
}

.vzt-slide-thumb {
    background-size:     cover;
    background-position: center 15%;
}

/* Dark gradient scrim over the background */
.vzt-slide-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.3)  60%,
        rgba(0,0,0,0.05) 100%
    );
}

/* ---- Foreground Content Layer ---- */

.vzt-slide-content {
    padding-bottom:  0.25rem;
    position:        absolute;
    bottom:          12%;
    left:            6%;
    max-width:       60%;
    display:         flex;
    flex-direction:  column;
    gap:             12px;
    /* mix-blend-mode:  color-dodge; */
}

.vzt-slide-content > *,
.vzt-slide-text > * {
    margin-bottom: 0 !important;
}

/* Text column inside .vzt-slide-content.
 * Desktop: becomes the left side of a flex row (see min-width: 1024px block).
 * Tablet/Mobile: stacks vertically inside .vzt-slide-content column. */
.vzt-slide-text {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.vzt-slide-title {
    font-family:    var(--vzt-font);
    font-size:      2.6rem;
    font-weight:    700;
    color:          var(--vzt-text-light);
    margin:         0;
    line-height:    1;
    padding-top:    0.05em;
    text-transform: uppercase;
    text-shadow:    0 2px 8px rgba(0,0,0,0.6);
}

.vzt-slide-title .vzt-flag {
    font-size:      0.5em;
    vertical-align: top;
    line-height:    1;
    text-transform: none;
}

.vzt-slide-excerpt {
    font-size:   1rem;
    font-weight: 300;
    color:       var(--vzt-text-light);
    line-height: 1.6;
    margin:      0;
    /* Limit to 3 lines max */
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp:         3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* Meta badge row: length, format, release_date, purchase_only, polaroid */
.vzt-slide-meta {
    display:     flex;
    flex-wrap:   wrap;
    gap:         6px;
    align-items: center;
}

.vzt-meta-badge {
    display:        inline-block;
    font-size:      0.5rem;
    line-height:    0.5rem;
    font-weight:    600;
    text-transform: uppercase;
    padding:        0.25rem 0.4rem;
    border-radius:  3px;
    background:     rgba(255,255,255,0.12);
    color:          var(--vzt-text-light);
}

/* Accent colour overrides per badge type - customize freely */
.vzt-meta-length  { color: var(--vzt-text-light); }
.vzt-meta-format  { color: var(--vzt-text-light); }
.vzt-meta-release { color: var(--vzt-text-light); }

/* CTA button row - wraps multiple platform links */
.vzt-slide-cta-row {
    margin-top:  0.75em;
    margin-left: -2px;
    display:     flex;
    flex-wrap:   wrap;
    gap:         10px;
    align-items: center;
}

/* Base: all theater CTA buttons share this shape and font */
.vzt-slide-cta {
    display:         inline-block;
    padding:         0.75rem 2.5rem;
    font-family:     var(--vzt-btn-font);
    font-size:       1rem;
    line-height:     1;
    font-weight:     700;
    text-decoration: none;
    text-align:      center;
    border-radius:   50em;
    border:          none;
    transition:      transform 0.2s ease, box-shadow 0.2s ease;
}
.vzt-slide-cta:hover,
.vzt-slide-cta:active {
    transform:  scale(1.02);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    color:      #ffffff;
}

/* Primary button */
.vzt-cta-primary {
    background: var(--vzt-primary-gradient);
    color:      #ffffff;
}

/* Swiper navigation overrides for theater */
.vzt-nav-next,
.vzt-nav-prev {
    color: rgba(255,255,255,0.7);
}

.vzt-nav-next:hover,
.vzt-nav-prev:hover {
    color: #fff;
}

.vzt-pagination .swiper-pagination-bullet-active {
    background: var(--vzt-primary);
}

/* No results fallback */
.vzt-no-results {
    color:   #aaa;
    padding: 2rem;
    text-align: center;
}

/* ============================================================
   [vzt_showcase] - HORIZONTAL CAROUSEL ROW
   Target class: .vzt-showcase-section
   ============================================================ */

.vzt-showcase-section {
    position:    relative;
    padding:     0;
    /* background:  #111; */
    font-family: var(--vzt-font);
    /* overflow: intentionally omitted - the swiper extends with negative margins
     * into container padding zones for nav arrows and card bleed. Any overflow
     * clipping (including overflow-x: clip) cuts off the nav buttons and hover-
     * scaled cards that land outside the section's border box. Horizontal scroll
     * containment is handled by the Astra theme at the body/page-wrapper level. */
}

/* Slides inside the container padding zones are dimmed.
 * JS toggles this class via getBoundingClientRect checks on each translate event. */
.vzt-showcase-swiper .swiper-slide.vzt-slide-overflow .vzt-video-card {
    opacity: 0.45;
}

/* Overflow cards act as nav buttons. Suppress all hover effects so they do not
 * zoom, reveal video, or show overlay text. A subtle opacity lift signals clickability. */
.vzt-showcase-swiper .swiper-slide.vzt-slide-overflow .vzt-video-card:hover {
    transform: none;
    opacity:   0.6;
}

.vzt-showcase-swiper .swiper-slide.vzt-slide-overflow .vzt-video-card:hover .vzt-card-teaser {
    opacity: 0;
}

/* Keep overlay text hidden for overflow cards even when overlay is enabled */
.vzt-overlay-enabled .swiper-slide.vzt-slide-overflow .vzt-video-card:hover .vzt-card-series,
.vzt-overlay-enabled .swiper-slide.vzt-slide-overflow .vzt-video-card:hover .vzt-card-footer::before,
.vzt-overlay-enabled .swiper-slide.vzt-slide-overflow .vzt-video-card:hover .vzt-card-title,
.vzt-overlay-enabled .swiper-slide.vzt-slide-overflow .vzt-video-card:hover .vzt-card-meta {
    opacity: 0;
}

.vzt-showcase-swiper {
    width:   100%;
    padding: 1rem 0; /* Vertical room for scale effect */
    overflow: visible;    /* Allow scaled cards to overflow row bounds */
}

/* Pre-init state for seed="true" carousels: clip the seeded slides so they
 * don't overflow the section before JS applies bleed and Swiper initializes.
 * Fallback widths use 100% as a proxy for --vzt-content-width (slightly wider
 * than the content zone due to bleed, corrected immediately when JS runs).
 * display:flex + gap mirror what Swiper applies after init so cards show with
 * correct spacing from the moment HTML is parsed, with no visible reflow. */
.vzt-showcase-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    gap: 14px;
    overflow: hidden;
}
.vzt-ratio-portrait .vzt-showcase-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc( (100% - 5 * 14px) / 6 );   /* 6 per row, 5 gaps */
}
.vzt-ratio-landscape .vzt-showcase-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc( (100% - 2 * 14px) / 3 );   /* 3 per row, 2 gaps */
}

@media (max-width: 1023px) {
    .vzt-showcase-swiper:not(.swiper-initialized) .swiper-wrapper {
        gap: 12px;
    }
    .vzt-ratio-portrait .vzt-showcase-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc( (100% - 3 * 12px) / 4 );   /* 4 per row, 3 gaps */
    }
    .vzt-ratio-landscape .vzt-showcase-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc( (100% - 1 * 12px) / 2 );   /* 2 per row, 1 gap */
    }
}

@media (max-width: 767px) {
    .vzt-showcase-swiper:not(.swiper-initialized) .swiper-wrapper {
        gap: 10px;
    }
    .vzt-ratio-portrait .vzt-showcase-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc( (100% - 1 * 10px) / 2 );   /* 2 per row, 1 gap */
    }
    .vzt-ratio-landscape .vzt-showcase-swiper:not(.swiper-initialized) .swiper-slide {
        width: 100%;   /* 1 per row, no gap needed */
    }
}

/* Each Swiper slide in a showcase row.
 * slidesPerView is set to 'auto' so Swiper respects CSS width.
 * JS sets --vzt-content-width (px) = swiper width minus left+right bleed.
 * Slide widths are derived from that variable so they fill the content zone,
 * not the full extended swiper. Gap counts match spaceBetween per breakpoint. */
.vzt-showcase-swiper .swiper-slide {
    position: relative;
}

/* Portrait slides - desktop default: 6 per row, gap 14px */
.vzt-ratio-portrait .vzt-showcase-swiper .swiper-slide {
    width: calc( ( var(--vzt-content-width) - 5 * 14px ) / 6 );
}

/* Landscape slides - desktop default: 3 per row, gap 14px */
.vzt-ratio-landscape .vzt-showcase-swiper .swiper-slide {
    width: calc( ( var(--vzt-content-width) - 2 * 14px ) / 3 );
}

/* Elevate the slide containing the hovered card above its neighbours.
 * Overflow slides are excluded: they act as nav buttons, not hovered cards. */
.vzt-showcase-swiper .swiper-slide:not(.vzt-slide-overflow):has(.vzt-video-card:hover) {
    z-index: 10;
}

/* ---- Card Base ---- */

.vzt-video-card {
    position:      relative;
    border-radius: var(--vzt-card-radius);
    overflow:      hidden;
    background:    #222;
    cursor:        pointer;
    outline:       none;
    transition: var(--vzt-transition), opacity 0.3s ease;
    transform-origin: center center;
}

.vzt-card-thumb {
    display:    block;
    width:      100%;
    height:     auto;
    object-fit: cover;
    object-position:  center center;
    transform:        scale(1);
    transform-origin: center center;
}

/* Aspect ratio per shortcode ratio="" attribute */
.vzt-ratio-portrait .vzt-card-thumb  { aspect-ratio: 9/16; }
.vzt-ratio-landscape .vzt-card-thumb { aspect-ratio: 16/9; }

/* ---- Mixed ratio row ---- */
/* --vzt-row-height (set by JS) equals portrait card height at the current breakpoint.
 *
 * Both orientations use the same physical scale:
 *   Portrait : width  = rowH * 9/16   height = rowH        (9:16)
 *   Landscape: width  = rowH          height = rowH * 9/16  (16:9)
 *
 * The landscape card is the same image at the same scale as portrait, just rotated.
 * It sits centered vertically inside the slide, leaving blank space above and below. */
.vzt-ratio-mixed .vzt-showcase-swiper .swiper-slide {
    height: var(--vzt-row-height);
}

/* Portrait: card fills the full slide height */
.vzt-ratio-mixed .swiper-slide[data-orientation="portrait"] .vzt-video-card {
    height: 100%;
}

/* Landscape: slide centers its shorter card vertically */
.vzt-ratio-mixed .swiper-slide[data-orientation="landscape"] {
    display:     flex;
    align-items: center;
}

.vzt-ratio-mixed .swiper-slide[data-orientation="landscape"] .vzt-video-card {
    width:  100%;
    height: calc(var(--vzt-row-height) * 9 / 16);
}

/* Thumb fills the card in both orientations - Swiper mode only.
 * Flow mode uses natural aspect-ratio sizing per card orientation. */
.vzt-ratio-mixed .vzt-showcase-swiper .vzt-card-thumb {
    height:       100%;
    aspect-ratio: unset;
}

/* ---- Teaser Video Overlay ---- */

/*
 * .vzt-card-teaser starts hidden (opacity: 0).
 * JS sets preload="auto" and calls .play() on mouseenter.
 * Transitions to opacity: 1 after a short delay.
 */
.vzt-card-teaser {
    position:         absolute;
    inset:            0;
    width:            100%;
    height:           100%;
    object-fit:       cover;
    object-position:  center 20%; /* matches card-thumb framing above */
    opacity:          0;
    transition:       opacity 0.3s ease;
    pointer-events:   none;
}

/* Card is an <a> tag - block display, no underline */
a.vzt-video-card {
    display:         block;
    text-decoration: none;
}

/* ---- "More" end card ---- */
/*
 * The card body is an empty <a>. All visible content comes from ::before
 * (icon) and ::after (label) so everything is overridable via CSS:
 *
 *   .vzt-more-card::before { content: "\2192"; }   change icon
 *   .vzt-more-card::after  { content: "See All"; } change label
 *   .vzt-more-card::before { display: none; }       hide icon
 */
.vzt-more-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    width:           100%;
    background:      rgba(255,255,255,0.04);
    border:          1px solid rgba(255,255,255,0.1);
    border-radius:   var(--vzt-card-radius);
    text-decoration: none;
    color:           var(--vzt-text-light);
    transition:      background 0.3s ease;
}

.vzt-ratio-portrait  .vzt-more-card { aspect-ratio: 9/16; }
.vzt-ratio-landscape .vzt-more-card { aspect-ratio: 16/9; }

/* Default label - set content: "" to hide, or any string to replace */
.vzt-more-card::after {
    content:        "Explore More";
    white-space: pre-wrap;
    text-align:    center;
    font-family:    var(--vzt-btn-font);
    font-size:      0.7rem;
    line-height:    1rem;
    font-weight:    600;
    /* text-transform: uppercase; */
    opacity:        0.5;
    transition:     opacity 0.3s ease, color 0.3s ease;
}

.vzt-more-card:hover {
    background: rgba(255,255,255,0.09);
}

.vzt-more-card:hover::after {
    opacity: 1;
    color: var(--vzt-secondary);
}

.vzt-series-raw .vzt-more-card::after {
    content: "Explore\A'The Raw Series'";
}

.vzt-series-boy .vzt-more-card::after {
    content: "Explore\A'The Boy Series'";
}

.vzt-series-edge .vzt-more-card::after {
    content: "Explore\A'The Edge Series'";
}

.vzt-series-instinct .vzt-more-card::after {
    content: "Explore\A'The Instinct Series'";
}

.vzt-series-life-lust .vzt-more-card::after {
    content: "Explore\ALife & Lust";
}

.vzt-series-hi-my-name-is .vzt-more-card::after {
    content: "Explore\AHi, My Name Is";
}

/* ---- Hover Scale + Video Reveal ---- */

/*
 * HOVER ZOOM SIZE - adjust scale value here.
 * scale(1.0)  = no zoom
 * scale(1.08) = 8% zoom  ← current
 * scale(1.15) = 15% zoom
 */
.vzt-video-card:hover {
    transform: scale(1.20);
    z-index:   20;
}

.vzt-video-card:hover .vzt-card-teaser {
    opacity: 1;
}

/* ---- Series name - top left, visible on hover only ---- */

.vzt-card-series {
    position:        absolute;
    top:             8px;
    left:            10px;
    z-index:         3;
    font-family:     var(--vzt-font);
    font-size:       0.8rem;
    font-weight:     400;
    text-transform:  uppercase;
    color:           var(--vzt-text-light);
    opacity:         0;
    transition:      opacity 0.3s ease;
    pointer-events:  none;
}

.vzt-overlay-enabled .vzt-video-card:hover .vzt-card-series {
    opacity: 1;
}

/* ---- Footer - gradient fades in on hover, title + meta also fade in on hover ---- */

.vzt-card-footer {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    padding:        36px 10px 10px;
    z-index:        3;
    display:        flex;
    flex-direction: column;
    gap:            3px;
    pointer-events: none;
}

/* Gradient lives on ::before so it has its own opacity independent of the
 * text children. Fades in with the title/meta on hover. */
.vzt-card-footer::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient( to top, rgba(0,0,0,0.88) 0%, transparent 100% );
    opacity:    0;
    transition: opacity 0.3s ease;
    z-index:    -1;
}

.vzt-overlay-enabled .vzt-video-card:hover .vzt-card-footer::before {
    opacity: 1;
}

.vzt-card-title {
    font-family:    var(--vzt-font);
    font-size:      1rem;
    font-weight:    600;
    color:          var(--vzt-text-light);
    margin:         0;
    line-height:    1.2;
    opacity:        0;
    transition:     opacity 0.25s ease;
}

.vzt-overlay-enabled .vzt-video-card:hover .vzt-card-title {
    opacity: 1;
}

/* Card meta row: format + release_date, fades in with title */
.vzt-card-meta {
    display:     flex;
    gap:         6px;
    align-items: center;
    opacity:     0;
    transition:  opacity 0.25s ease;
}

.vzt-overlay-enabled .vzt-video-card:hover .vzt-card-meta {
    opacity: 1;
}

.vzt-card-format,
.vzt-card-release {
    font-family:    var(--vzt-font);
    font-size:      0.6rem;
    font-weight:    500;
    text-transform: uppercase;
    color:          var(--vzt-text-light);
}


/*
 * Per-series accent colour overrides.
 * Target: .vzt-series-{slug} on .vzt-video-card or .vzt-theater-slide
 * Slugs match the serie taxonomy term slugs in WordPress.
 * Customize the border/accent colour for each series below.
 */
.vzt-series-first-date    { --vzt-series-color: #e8a87c; }
.vzt-series-raw           { --vzt-series-color: #e05c5c; }
.vzt-series-boy           { --vzt-series-color: #6a9ed4; }
.vzt-series-edge          { --vzt-series-color: #a97fe0; }
.vzt-series-instinct      { --vzt-series-color: #4caf7d; }
.vzt-series-life-lust     { --vzt-series-color: #e0668c; }
.vzt-series-hi-my-name-is { --vzt-series-color: #5bbfbf; }
.vzt-series-others        { --vzt-series-color: #888; }

/* Hero slide: thin left accent border per series */
.vzt-theater-slide[data-series] .vzt-slide-content {
    border-left: 0.25rem solid var(--vzt-series-color, var(--vzt-secondary));
    padding-left: 0.75rem;
}

/* Hero: series label above the title - no background, plain white small text */
.vzt-slide-series {
    font-family:    var(--vzt-font);
    font-size:      1rem;
    font-weight:    400;
    letter-spacing: 0em;
    text-transform: uppercase;
    color:          var(--vzt-text-light);
    padding-left: 1px;
}

/* ============================================================
   [vzt_showcase] - FLOW MODE  (scroll="flow")
   Cards flow inline and wrap to new rows. No carousel or navigation.
   ============================================================ */

.vzt-showcase-flow {
    display:         flex;
    flex-wrap:       wrap;
    gap:             14px;
    padding:         1rem 0; /* Vertical breathing room for hover scale */
    justify-content: flex-start;
}

/* align= attribute on [vzt_showcase scroll="flow"] */
.vzt-showcase-flow[data-align="center"]    { justify-content: center; }
.vzt-showcase-flow[data-align="right"]     { justify-content: flex-end; }
.vzt-showcase-flow[data-align="justified"] { justify-content: space-between; }

/* Mixed ratio: vertically center portrait and landscape cards within each row */
.vzt-ratio-mixed .vzt-showcase-flow {
    align-items: center;
}

/* Flow items need position:relative so z-index elevation works on hover */
.vzt-showcase-flow .vzt-flow-item {
    position: relative;
    /* Portrait default: 6 per row at desktop, gap 14px */
    flex: 0 0 calc( (100% - 5 * 14px) / 6 );
}

/* Landscape: 3 per row at desktop */
.vzt-ratio-landscape .vzt-showcase-flow .vzt-flow-item {
    flex: 0 0 calc( (100% - 2 * 14px) / 3 );
}

/* Mixed portrait item: same column width as a portrait-only row */
.vzt-ratio-mixed .vzt-showcase-flow .vzt-flow-item[data-orientation="portrait"] {
    flex: 0 0 calc( (100% - 5 * 14px) / 6 );
}

/* Mixed landscape item: same column width as a landscape-only row */
.vzt-ratio-mixed .vzt-showcase-flow .vzt-flow-item[data-orientation="landscape"] {
    flex: 0 0 calc( (100% - 2 * 14px) / 3 );
}

/* Mixed flow: natural aspect-ratio per orientation (not the Swiper fill approach) */
.vzt-ratio-mixed .vzt-showcase-flow .vzt-flow-item[data-orientation="portrait"] .vzt-card-thumb {
    aspect-ratio: 9 / 16;
}

.vzt-ratio-mixed .vzt-showcase-flow .vzt-flow-item[data-orientation="landscape"] .vzt-card-thumb {
    aspect-ratio: 16 / 9;
}

/* Elevate the hovered flow item above its neighbours so the scale does not get clipped */
.vzt-showcase-flow .vzt-flow-item:has(.vzt-video-card:hover) {
    z-index: 10;
}

/* Swiper navigation overrides for showcase.
 * Buttons are placed at left:0 / right:0 inside the extended swiper so they
 * land in the container padding zones. JS sets --vzt-left-bleed and
 * --vzt-right-bleed on the swiper element so the button fills the zone.
 * top:0 + bottom:0 + height:auto makes the hit area span the full row height. */
.vzt-showcase-prev,
.vzt-showcase-next {
    color:           rgba(255,255,255,0.7);
    top:             0;
    bottom:          0;
    height:          auto;
    margin-top:      0;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.vzt-showcase-prev {
    left:  0;
    right: auto;
    width: var(--vzt-left-bleed, 44px);
}

.vzt-showcase-next {
    right: 0;
    left:  auto;
    width: var(--vzt-right-bleed, 44px);
}

.vzt-showcase-prev:hover,
.vzt-showcase-next:hover {
    color: #fff;
}

/* ============================================================
   DESKTOP  -  min-width: 1024px
   CTA repositioned to lower-right corner via flex row on .vzt-slide-content.
   ============================================================ */

@media (min-width: 1024px) {

    /* Extend content div to span from left edge to right edge of the slide so
     * the CTA can sit at the far right while text stays on the left. */
    .vzt-slide-content {
        flex-direction: row;
        align-items:    flex-end;
        right:          6%;
        max-width:      none;
    }

    .vzt-slide-series {
        font-size: 0.9rem;
    }

    /* Constrain the text column so it does not crowd the centre of the slide. */
    .vzt-slide-text {
        max-width:  55%;
        flex-shrink: 0;
    }

    /* Push CTA to the right end of the flex row. */
    .vzt-slide-cta-row {
        margin-left: auto;
        margin-top:  0;
        flex-shrink: 0;
    }
}

/* ============================================================
   TABLET  -  max-width: 1023px
   ============================================================ */

@media (max-width: 1023px) {

    /* Hero heading scale down */
    .vzt-slide-title {
        font-size: 2.0rem !important;
    }

    .vzt-slide-series {
        font-size: 0.8rem;
    }

    .vzt-slide-content {
        left:      40px;
        right:     40px;
        max-width: none;
    }

    .vzt-slide-text {
        max-width: 100%; /* inherits .vzt-slide-content constraint */
    }

    /* Showcase rows: 4 portrait / 2 landscape per row, gap 12px */
    .vzt-ratio-portrait .vzt-showcase-swiper .swiper-slide {
        width: calc( ( var(--vzt-content-width) - 3 * 12px ) / 4 );
    }
    .vzt-ratio-landscape .vzt-showcase-swiper .swiper-slide {
        width: calc( ( var(--vzt-content-width) - 12px ) / 2 );
    }

    /* Flow mode: 4 portrait / 2 landscape per row, gap 12px */
    .vzt-showcase-flow { gap: 12px; }
    .vzt-showcase-flow .vzt-flow-item                                                      { flex: 0 0 calc( (100% - 3 * 12px) / 4 ); }
    .vzt-ratio-landscape .vzt-showcase-flow .vzt-flow-item                                 { flex: 0 0 calc( (100% - 12px) / 2 ); }
    .vzt-ratio-mixed .vzt-showcase-flow .vzt-flow-item[data-orientation="portrait"]        { flex: 0 0 calc( (100% - 3 * 12px) / 4 ); }
    .vzt-ratio-mixed .vzt-showcase-flow .vzt-flow-item[data-orientation="landscape"]       { flex: 0 0 calc( (100% - 12px) / 2 ); }

    /* Nav arrows (theater + showcase): 75% of default 44px */
    .vzt-theater-section,
    .vzt-showcase-section {
        --swiper-navigation-size: 33px;
    }
}

/* ============================================================
   MOBILE  -  max-width: 767px
   ============================================================ */

@media (max-width: 767px) {

    .vzt-slide-title {
        font-size: 1.7rem !important;
    }

    .vzt-slide-content {
        left:      20px;
        right:     20px;
        max-width: none;
        bottom:    10%;
        gap:       8px;
    }

    .vzt-slide-text {
        gap: 8px; /* tighten text element spacing to match content gap */
    }

    .vzt-slide-excerpt {
        display: none; /* Hide excerpt on small screens for breathing room */
    }

    /* Showcase rows: 2 portrait / 1 landscape per row, gap 10px */
    .vzt-ratio-portrait .vzt-showcase-swiper .swiper-slide {
        width: calc( ( var(--vzt-content-width) - 10px ) / 2 );
    }
    .vzt-ratio-landscape .vzt-showcase-swiper .swiper-slide {
        width: var(--vzt-content-width);
    }

    /* Flow mode: 2 portrait / 1 landscape per row, gap 10px */
    .vzt-showcase-flow { gap: 10px; }
    .vzt-showcase-flow .vzt-flow-item                                                      { flex: 0 0 calc( (100% - 10px) / 2 ); }
    .vzt-ratio-landscape .vzt-showcase-flow .vzt-flow-item                                 { flex: 0 0 100%; }
    .vzt-ratio-mixed .vzt-showcase-flow .vzt-flow-item[data-orientation="portrait"]        { flex: 0 0 calc( (100% - 10px) / 2 ); }
    .vzt-ratio-mixed .vzt-showcase-flow .vzt-flow-item[data-orientation="landscape"]       { flex: 0 0 100%; }

    /* Disable heavy hover transforms on mobile */
    .vzt-video-card:hover {
        transform: none;
        z-index:   auto;
    }

    /* Show overlay text on mobile when overlay is enabled - no hover on touch */
    .vzt-overlay-enabled .vzt-card-series,
    .vzt-overlay-enabled .vzt-card-title,
    .vzt-overlay-enabled .vzt-card-meta {
        opacity: 1;
    }

    /* Keep teaser video hidden on mobile - show static cover only */
    .vzt-card-teaser {
        display: none;
    }

    /* Nav arrows (theater + showcase): 50% of default 44px */
    .vzt-theater-section,
    .vzt-showcase-section {
        --swiper-navigation-size: 22px;
    }
}