/**
 * 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
 *  - Responsive / mobile swipe
 *
 * 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;
    touch-action: pan-y; /* allow vertical scroll; JS handles horizontal swipe */
}

/* ============================================================================
   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;
}

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

/* 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: clamp(28px, 3.5vw, 52px);
    font-weight: 400;
    line-height: 1.08;
    margin: 0;
    /* Inherits color from .ghs__text-wrapper via currentColor */
    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;
}

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

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

/* ============================================================================
   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;
    background-color: var(--ghs-panel-bg, #ffffff);
    color: var(--ghs-text-color, #1a1a1a);
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    overflow-y: auto;
    /* Push above the controls bar */
    padding-bottom: 80px;
}

/* 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;
}

/* On split slides the controls sit over the image half — keep them white */
.ghs__slide--split-left ~ .ghs__controls,
.ghs__slide--split-right ~ .ghs__controls {
    /* stays #fff by default since it overlays the image portion */
}

/* ── 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: show pause icon (||), hide play icon (▶) */
.ghs__play-icon  { display: none; }
.ghs__pause-icon { display: block; }

/* When paused: flip — show play icon, hide pause icon */
.ghs__play-pause--paused .ghs__pause-icon { display: none; }
.ghs__play-pause--paused .ghs__play-icon  { display: block; }

/* ── 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__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 invisible tap area on progress bars */
    .ghs__progress-bar {
        height: 3px;
        padding: 8px 0;
        margin: -8px 0;
    }

    /* 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;
        /* Let text height be natural */
        overflow: visible;
    }
}

/* ============================================================================
   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; }
}

/* ============================================================================
   ELEMENTOR EDITOR
   ============================================================================ */

.elementor-editor-active .ghs__slide {
    pointer-events: auto;
}