/**
 * Glozin Hero Slider - Pace Gallery Style
 *
 * Supports:
 *  - Fullscreen layout (full-bleed image + text overlay)
 *  - Split layout (text panel + image side by side)
 *  - 9 text-position variants for fullscreen
 *  - Per-slide CSS custom properties for colours, focal point, split ratio
 *  - Animated progress-bar controls bar
 *  - Touch swipe and mouse drag to change slides
 *
 * CSS Custom Properties (set inline on each <li.ghs__slide>):
 *  --ghs-text-color    : text / heading / CTA colour
 *  --ghs-overlay       : fullscreen overlay (color or gradient)
 *  --ghs-panel-bg      : split layout text-panel background
 *  --ghs-split-ratio   : split text-panel width (e.g. 42%)
 *  --ghs-img-position  : image object-position (e.g. 60% 30%)
 *  --ghs-duration      : autoplay duration (set by JS)
 *
 * @package Glozin Child
 */

/* ============================================================================
   SLIDER CONTAINER
   ============================================================================ */

.glozin-hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #111;
    cursor: grab;
    touch-action: pan-y; /* allow vertical scroll; JS handles horizontal swipe */
}

.glozin-hero-slider.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.glozin-hero-slider .ghs__bg-img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.glozin-hero-slider button,
.glozin-hero-slider .ghs__cta,
.glozin-hero-slider .ghs__progress-bar {
    cursor: pointer;
}

/* ============================================================================
   SLIDE LIST
   ============================================================================ */

.ghs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    height: 100%;
}

/* ============================================================================
   INDIVIDUAL SLIDE
   ============================================================================ */

.ghs__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}

.ghs__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================================
   INNER WRAPPER
   ============================================================================ */

.ghs__inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    color: inherit;
    text-decoration: none;
}

/* ============================================================================
   BACKGROUND IMAGE
   ============================================================================ */

.ghs__image-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* Blurred LQIP placeholder — fades out once the full-res image loads */
.ghs__image-wrapper--has-lqip::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--ghs-lqip);
    background-size: cover;
    background-position: center;
    filter: blur(22px);
    transform: scale(1.12);
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 1;
    pointer-events: none;
}

.ghs__image-wrapper--has-lqip.is-img-loaded::before {
    opacity: 0;
}

.ghs__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--ghs-img-position, center center);
    display: block;
    position: relative;
    z-index: 2;
}

.ghs__image-wrapper--has-lqip img {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ghs__image-wrapper--has-lqip.is-img-loaded img {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ghs__image-wrapper--has-lqip::before { transition: none; }
    .ghs__image-wrapper--has-lqip img { transition: none; opacity: 1; }
}

/* Gradient overlay for fullscreen text legibility */
.ghs__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(
        --ghs-overlay,
        linear-gradient(to right, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.22) 55%, transparent 100%)
    );
}

/* ============================================================================
   TEXT WRAPPER — FULLSCREEN (default, absolute positioned overlay)
   ============================================================================ */

.ghs__text-wrapper {
    position: absolute;
    z-index: 2;
    /* Default position: bottom-left */
    bottom: 80px;
    left: 0;
    right: auto;
    top: auto;
    transform: none;
    padding: 0 48px 32px;
    max-width: clamp(260px, 55%, 520px);
    color: var(--ghs-text-color, #fff);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

/* ── 9 text-position variants (fullscreen only) ─────────────────────── */

/* Bottom row */
.ghs__text-wrapper--bottom-left {
    bottom: 80px; top: auto;
    left: 0; right: auto;
    transform: none;
    text-align: left; align-items: flex-start;
}

.ghs__text-wrapper--bottom-center {
    bottom: 80px; top: auto;
    left: 50%; right: auto;
    transform: translateX(-50%);
    text-align: center; align-items: center;
}

.ghs__text-wrapper--bottom-right {
    bottom: 80px; top: auto;
    left: auto; right: 0;
    transform: none;
    text-align: right; align-items: flex-end;
}

/* Middle row */
.ghs__text-wrapper--middle-left {
    bottom: auto; top: 50%;
    left: 0; right: auto;
    transform: translateY(-50%);
    text-align: left; align-items: flex-start;
}

.ghs__text-wrapper--middle-center {
    bottom: auto; top: 50%;
    left: 50%; right: auto;
    transform: translate(-50%, -50%);
    text-align: center; align-items: center;
}

.ghs__text-wrapper--middle-right {
    bottom: auto; top: 50%;
    left: auto; right: 0;
    transform: translateY(-50%);
    text-align: right; align-items: flex-end;
}

/* Top row */
.ghs__text-wrapper--top-left {
    bottom: auto; top: 80px;
    left: 0; right: auto;
    transform: none;
    text-align: left; align-items: flex-start;
}

.ghs__text-wrapper--top-center {
    bottom: auto; top: 80px;
    left: 50%; right: auto;
    transform: translateX(-50%);
    text-align: center; align-items: center;
}

.ghs__text-wrapper--top-right {
    bottom: auto; top: 80px;
    left: auto; right: 0;
    transform: none;
    text-align: right; align-items: flex-end;
}

/* ============================================================================
   TEXT ELEMENTS
   ============================================================================ */

.ghs__eyebrow {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin: 0;
    line-height: 1.4;
}

.ghs__heading {
    font-size: var(--ghs-heading-size, clamp(28px, 3.5vw, 52px));
    font-weight: 400;
    line-height: 1.08;
    margin: 0;
    color: inherit;
}

.ghs__subtitle {
    font-size: clamp(14px, 1.3vw, 17px);
    font-weight: 400;
    opacity: 0.9;
    margin: 0;
    line-height: 1.4;
}

.ghs__dates {
    font-size: 13px;
    opacity: 0.75;
    margin: 0;
    line-height: 1.4;
}

.ghs__body {
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 400;
    line-height: 1.55;
    opacity: 0.92;
    margin: 0;
    max-width: 42em;
}

.ghs__body p {
    margin: 0 0 0.65em;
}

.ghs__body p:last-child {
    margin-bottom: 0;
}

/* CTA pill button */
.ghs__cta {
    display: inline-block;
    width: fit-content;
    margin-top: 4px;
    padding: 9px 22px;
    border: 1px solid var(--ghs-cta-color, rgba(255, 255, 255, 0.85));
    border-radius: 30px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ghs-cta-color, var(--ghs-text-color, #fff));
    background: var(--ghs-cta-bg, transparent);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    pointer-events: auto;
}

.ghs__cta:hover {
    background: var(--ghs-cta-color, rgba(255, 255, 255, 0.15));
    color: var(--ghs-cta-bg, var(--ghs-text-color, #fff));
    text-decoration: none;
}

/* ============================================================================
   SPLIT IMAGE DISPLAY MODES
   Applied when slide_layout is split-left or split-right
   ============================================================================ */

/* Cover (default) — already set globally, nothing extra needed */

/* Contain — full image visible, no crop, letterbox fills with bg colour */
.ghs__slide--img-contain .ghs__image-wrapper,
.ghs__slide--img-padded  .ghs__image-wrapper {
    background-color: var(--ghs-img-bg, #f5f5f0);
}

.ghs__slide--img-contain .ghs__image-wrapper img,
.ghs__slide--img-padded  .ghs__image-wrapper img {
    object-fit: contain;
}

/* Padded contain — artwork sits inside a breathing room border */
.ghs__slide--img-padded .ghs__image-wrapper img {
    padding: var(--ghs-img-padding, 48px);
    box-sizing: border-box; /* padding is included in 100% w/h */
}

/* ============================================================================
   SPLIT LAYOUT — Text panel + Image side by side
   ============================================================================ */

/* Inner becomes a flex row */
.ghs__slide--split-left .ghs__inner,
.ghs__slide--split-right .ghs__inner {
    display: flex;
    flex-direction: row;
    height: 100%;
}

/* Image becomes a flex child (no longer absolutely positioned) */
.ghs__slide--split-left .ghs__image-wrapper,
.ghs__slide--split-right .ghs__image-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    inset: auto; /* override the absolute inset from fullscreen */
}

/* No gradient overlay needed for split */
.ghs__slide--split-left .ghs__overlay,
.ghs__slide--split-right .ghs__overlay {
    display: none;
}

/* Text panel becomes a flex child (no longer absolutely positioned) */
.ghs__slide--split-left .ghs__text-wrapper,
.ghs__slide--split-right .ghs__text-wrapper {
    position: relative;
    flex-shrink: 0;
    width: var(--ghs-split-ratio, 42%);
    max-width: none;
    bottom: auto; top: auto; left: auto; right: auto;
    transform: none;
    padding: 64px 56px 80px; /* bottom clears the controls bar */
    background-color: var(--ghs-panel-bg, #ffffff);
    color: var(--ghs-text-color, #1a1a1a);
    /* Per-slide alignment from CSS vars */
    justify-content: var(--ghs-panel-valign, center);
    align-items: flex-start;
    text-align: var(--ghs-text-align, left);
    overflow-y: auto;
}

/* Flex order: split-left = text | image */
.ghs__slide--split-left .ghs__text-wrapper { order: 1; }
.ghs__slide--split-left .ghs__image-wrapper { order: 2; }

/* Flex order: split-right = image | text */
.ghs__slide--split-right .ghs__image-wrapper { order: 1; }
.ghs__slide--split-right .ghs__text-wrapper  { order: 2; }

/* CTA adapts to dark panel text */
.ghs__slide--split-left .ghs__cta,
.ghs__slide--split-right .ghs__cta {
    border-color: var(--ghs-text-color, #1a1a1a);
    color: var(--ghs-text-color, #1a1a1a);
}

.ghs__slide--split-left .ghs__cta:hover,
.ghs__slide--split-right .ghs__cta:hover {
    background: var(--ghs-text-color, #1a1a1a);
    color: var(--ghs-panel-bg, #ffffff);
    border-color: var(--ghs-text-color, #1a1a1a);
}

/* ============================================================================
   CONTROLS BAR (BOTTOM)
   ============================================================================ */

.ghs__controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 0 48px 22px;
    gap: 14px;
    color: #fff;
}


/* ── Play / Pause button ─────────────────────────────────────────── */

.ghs__play-pause {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    line-height: 1;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.ghs__play-pause:hover { opacity: 1; }

.ghs__play-pause svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

/* Default (playing): show pause icon ||, hide play icon ▶
   Scoped tightly to beat any parent-theme SVG overrides           */
.ghs__play-pause .ghs__play-icon  { display: none  !important; }
.ghs__play-pause .ghs__pause-icon { display: block !important; }

/* When paused: flip icons */
.ghs__play-pause.ghs__play-pause--paused .ghs__pause-icon { display: none  !important; }
.ghs__play-pause.ghs__play-pause--paused .ghs__play-icon  { display: block !important; }

/* ── Progress bars ───────────────────────────────────────────────── */

.ghs__progress-bars {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ghs__progress-bar {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 1px;
    overflow: hidden;
    cursor: pointer;
}

.ghs__progress-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: #fff;
    transform-origin: left;
}

/* Active: CSS animation drives the fill */
.ghs__progress-bar.is-active span {
    animation: ghs-progress-fill var(--ghs-duration, 5s) linear forwards;
}

/* Paused: freeze the animation in place */
.glozin-hero-slider.is-paused .ghs__progress-bar.is-active span {
    animation-play-state: paused;
}

/* Completed slides */
.ghs__progress-bar.is-complete span {
    width: 100%;
    animation: none;
}

@keyframes ghs-progress-fill {
    from { width: 0; }
    to   { width: 100%; }
}

/* ── Slide counter ───────────────────────────────────────────────── */

.ghs__counter {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.05em;
    opacity: 0.85;
    white-space: nowrap;
    min-width: 36px;
    text-align: center;
}

/* ── Prev / Next nav ─────────────────────────────────────────────── */

.ghs__nav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ghs__prev,
.ghs__next {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    opacity: 0.85;
    transition: opacity 0.2s;
    line-height: 1;
}

.ghs__prev:hover,
.ghs__next:hover { opacity: 1; }

.ghs__prev svg,
.ghs__next svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    display: block;
}

/* ============================================================================
   FOCUS / ACCESSIBILITY
   ============================================================================ */

.glozin-hero-slider:focus { outline: none; }

.ghs__prev:focus-visible,
.ghs__next:focus-visible,
.ghs__play-pause:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 3px;
}

/* ============================================================================
   RESPONSIVE — Tablet (≤ 1024px)
   ============================================================================ */

@media (max-width: 1024px) {
    .ghs__text-wrapper {
        max-width: clamp(260px, 65%, 520px);
    }

    /* Split: slightly wider text panel */
    .ghs__slide--split-left .ghs__text-wrapper,
    .ghs__slide--split-right .ghs__text-wrapper {
        width: max(var(--ghs-split-ratio, 42%), 38%);
        padding: 48px 40px 72px;
    }
}

/* ============================================================================
   RESPONSIVE — Mobile (≤ 768px)
   ============================================================================ */

@media (max-width: 768px) {

    /* Fullscreen: text full-width, tighter bottom clearance */
    .ghs__text-wrapper {
        max-width: calc(100% - 48px);
        padding: 0 24px 20px;
        bottom: 58px;
        gap: 8px;
    }

    /* Re-apply all position variants with mobile bottom offset */
    .ghs__text-wrapper--bottom-left,
    .ghs__text-wrapper--bottom-center,
    .ghs__text-wrapper--bottom-right { bottom: 58px; }

    .ghs__text-wrapper--top-left,
    .ghs__text-wrapper--top-center,
    .ghs__text-wrapper--top-right { top: 24px; }

    .ghs__heading   { font-size: clamp(22px, 6vw, 36px); }
    .ghs__subtitle  { font-size: 14px; }
    .ghs__body      { font-size: 14px; max-width: none; }

    .ghs__controls  { padding: 0 20px 14px; gap: 10px; }
    .ghs__counter   { display: none; }

    /* Larger tap targets */
    .ghs__prev,
    .ghs__next      { padding: 10px 6px; }

    .ghs__play-pause { padding: 10px 6px 10px 0; }

    .ghs__prev svg,
    .ghs__next svg  { width: 26px; height: 26px; }

    /* Taller tap target via ::before — keeps the visual bar thin */
    .ghs__progress-bar {
        height: 3px;
        position: relative; /* needed for ::before */
    }

    .ghs__progress-bar::before {
        content: '';
        position: absolute;
        inset: -10px 0; /* extends hit area 10px above & below without affecting visuals */
    }

    /* Split: stack vertically on mobile */
    .ghs__slide--split-left .ghs__inner,
    .ghs__slide--split-right .ghs__inner {
        flex-direction: column;
    }

    .ghs__slide--split-left .ghs__image-wrapper,
    .ghs__slide--split-right .ghs__image-wrapper {
        order: 1; /* image on top */
        flex: 1;
        min-height: 0;
    }

    .ghs__slide--split-left .ghs__text-wrapper,
    .ghs__slide--split-right .ghs__text-wrapper {
        order: 2; /* text below */
        width: 100%;
        padding: 24px 24px 60px;
        overflow: visible;
        /* Keep per-slide text align on mobile */
        text-align: var(--ghs-text-align, left);
        align-items: flex-start;
        justify-content: flex-start;
    }

    /* Padded image: reduce padding on mobile */
    .ghs__slide--img-padded .ghs__image-wrapper img {
        padding: min(var(--ghs-img-padding, 32px), 24px);
    }
}

/* ============================================================================
   RESPONSIVE — Small phones (≤ 480px)
   ============================================================================ */

@media (max-width: 480px) {

    /* Portrait: bottom-to-top gradient is more readable */
    .ghs__overlay {
        background: var(
            --ghs-overlay,
            linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.2) 45%, transparent 100%)
        );
    }

    .ghs__text-wrapper {
        max-width: calc(100% - 32px);
        padding: 0 16px 16px;
        bottom: 54px;
    }

    .ghs__controls { padding: 0 16px 12px; }
    .ghs__cta { font-size: 12px; padding: 8px 18px; }

    /* Hide arrows — swipe is the primary gesture */
    .ghs__nav { display: none; }
}

/* ============================================================================
   SLIDE MOTION EFFECTS
   Pure CSS GPU-accelerated transform animations — no library required.
   Applied only when the slide has .is-active.
   Controlled via CSS custom properties set inline by the widget PHP:
     --ghs-motion-zoom : target scale value  (e.g. 1.08)
     --ghs-motion-pan  : translate distance  (e.g. 3%)
   ============================================================================ */

/* Clip the scaled image so it never bleeds outside its wrapper */
.ghs__slide--motion-ken-burns .ghs__image-wrapper,
.ghs__slide--motion-zoom-in   .ghs__image-wrapper,
.ghs__slide--motion-zoom-out  .ghs__image-wrapper,
.ghs__slide--motion-pan-left  .ghs__image-wrapper,
.ghs__slide--motion-pan-right .ghs__image-wrapper {
    overflow: hidden;
}

/* Promote animated images to GPU compositor layer */
.ghs__slide--motion-ken-burns.is-active  .ghs__bg-img,
.ghs__slide--motion-zoom-in.is-active    .ghs__bg-img,
.ghs__slide--motion-zoom-out.is-active   .ghs__bg-img,
.ghs__slide--motion-pan-left.is-active   .ghs__bg-img,
.ghs__slide--motion-pan-right.is-active  .ghs__bg-img {
    will-change: transform;
}

/* ── Keyframes ─────────────────────────────────────────────────────── */

/* Ken Burns: slow zoom IN + subtle diagonal drift */
@keyframes ghs-ken-burns {
    from { transform: scale(1) translate(0, 0); }
    to   {
        transform:
            scale(var(--ghs-motion-zoom, 1.08))
            translate(
                calc(var(--ghs-motion-pan, 3%) * -0.7),
                calc(var(--ghs-motion-pan, 3%) * -0.5)
            );
    }
}

/* Zoom In: straight scale from 1 → zoom */
@keyframes ghs-zoom-in {
    from { transform: scale(1); }
    to   { transform: scale(var(--ghs-motion-zoom, 1.08)); }
}

/* Zoom Out: starts slightly zoomed, relaxes to normal */
@keyframes ghs-zoom-out {
    from { transform: scale(var(--ghs-motion-zoom, 1.08)); }
    to   { transform: scale(1); }
}

/* Pan Left: image drifts from right to left while holding a slight zoom */
@keyframes ghs-pan-left {
    from { transform: scale(var(--ghs-motion-zoom, 1.08)) translateX(var(--ghs-motion-pan, 3%)); }
    to   { transform: scale(var(--ghs-motion-zoom, 1.08)) translateX(calc(var(--ghs-motion-pan, 3%) * -1)); }
}

/* Pan Right: image drifts from left to right */
@keyframes ghs-pan-right {
    from { transform: scale(var(--ghs-motion-zoom, 1.08)) translateX(calc(var(--ghs-motion-pan, 3%) * -1)); }
    to   { transform: scale(var(--ghs-motion-zoom, 1.08)) translateX(var(--ghs-motion-pan, 3%)); }
}

/* ── Apply animations when slide is active ─────────────────────────── */

.ghs__slide--motion-ken-burns.is-active .ghs__bg-img {
    animation: ghs-ken-burns var(--ghs-duration, 6s) linear forwards;
}

.ghs__slide--motion-zoom-in.is-active .ghs__bg-img {
    animation: ghs-zoom-in var(--ghs-duration, 6s) linear forwards;
}

.ghs__slide--motion-zoom-out.is-active .ghs__bg-img {
    animation: ghs-zoom-out var(--ghs-duration, 6s) linear forwards;
}

.ghs__slide--motion-pan-left.is-active .ghs__bg-img {
    animation: ghs-pan-left var(--ghs-duration, 6s) linear forwards;
}

.ghs__slide--motion-pan-right.is-active .ghs__bg-img {
    animation: ghs-pan-right var(--ghs-duration, 6s) linear forwards;
}

/* Pause the motion animation when the slider itself is paused */
.glozin-hero-slider.is-paused .ghs__bg-img {
    animation-play-state: paused;
}

/* ── Accessibility: respect user's reduced-motion preference ────────── */
@media (prefers-reduced-motion: reduce) {
    .ghs__bg-img { animation: none !important; }
}

/* ============================================================================
   ELEMENTOR EDITOR
   Slider stays as a normal carousel. Clicking a repeater item in the panel
   switches to that slide via the JS editor bridge.
   Autoplay is disabled in the editor so slides don't flip by themselves.
   ============================================================================ */

/* Keep slides interactive so hover / click still works on canvas */
.elementor-editor-active .ghs__slide {
    pointer-events: auto;
}

/* Freeze the progress bar animation — no autoplay in editor */
.elementor-editor-active .ghs__progress-bar.is-active span {
    animation-play-state: paused !important;
}

/* Freeze all image motion effects in editor */
.elementor-editor-active .ghs__bg-img {
    animation: none !important;
}

/* ============================================================================
   AUTO-CONTRAST CONTROLS — luminance-driven dark mode
   JS reads --ghs-panel-bg on the active slide, computes WCAG relative
   luminance, and adds .ghs--ctrl-dark to the container when the panel is
   light (luminance > 0.35).  Fullscreen slides are always white.
   ============================================================================ */

/* Dark-controls state: swap every white element to near-black */
.ghs--ctrl-dark .ghs__controls {
    color: #1a1a1a;
}

.ghs--ctrl-dark .ghs__play-pause,
.ghs--ctrl-dark .ghs__prev,
.ghs--ctrl-dark .ghs__next {
    color: #1a1a1a;
}

.ghs--ctrl-dark .ghs__progress-bar {
    background: rgba(0, 0, 0, 0.15);
}

.ghs--ctrl-dark .ghs__progress-bar span {
    background: #1a1a1a;
}