/* ==========================================================================
   Widget: Vertical Focus Carousel
   BEM root: .gtea-vertical-focus
   ========================================================================== */

/* ── Root ─────────────────────────────────────────────────────────── */
.gtea-vertical-focus {
    width: 100%;
    box-sizing: border-box;
}

/* ── Inner — flex row; pagination on left or right ────────────────── */
.gtea-vertical-focus__inner {
    display: flex;
    flex-direction: row; /* overridden by Elementor nav_position control */
    align-items: stretch;
    box-sizing: border-box;
}

/* ── Carousel area — positioning context for the floating cursor ──── */
/*
 * Wraps the viewport and grows to fill the inner flex row (taking the
 * flex:1 role the viewport used to have). The floating cursor lives here
 * — NOT inside the masked viewport — so it is not affected by the
 * viewport's top/bottom fade mask.
 */
.gtea-vertical-focus__carousel-area {
    flex: 1;
    min-width: 0;
    position: relative;
    box-sizing: border-box;
    /* Reserve vertical-axis gestures for the JS drag handler: the browser may
       still pan horizontally, but vertical swipes change slides instead of
       scrolling the page. */
    touch-action: pan-x;
}

/* Block text/image selection while the user is dragging the carousel. */
.gtea-vertical-focus__carousel-area.is-dragging,
.gtea-vertical-focus__carousel-area.is-dragging * {
    user-select: none;
    -webkit-user-select: none;
}

/* ── Viewport ─────────────────────────────────────────────────────── */
/*
 * Height is set by Elementor's viewport_height control.
 * The mask-image creates fade-out edges at top and bottom so
 * inactive slides dissolve out of view gracefully.
 */
.gtea-vertical-focus__viewport {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 600px; /* default; overridden by Elementor control */
    box-sizing: border-box;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 20%,
        black 80%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 20%,
        black 80%,
        transparent 100%
    );
}

/* ── Container — positioning context for absolute slides ──────────── */
.gtea-vertical-focus__container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── Slide ────────────────────────────────────────────────────────── */
/*
 * Each slide occupies 1/3 of the viewport height.
 * Height is set by Elementor via calc(viewport_height / 3).
 * Default matches the 600px viewport default.
 *
 * Slides are absolutely stacked at the top; JS assigns
 * is-prev / is-active / is-next to position and reveal them.
 */
.gtea-vertical-focus__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(600px / 3); /* default; overridden by Elementor control */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: transform 600ms ease, opacity 600ms ease;
    overflow: hidden;
}

/* Previous slide — top third */
.gtea-vertical-focus__slide.is-prev {
    transform: translateY(0%);
    opacity: 0.4; /* overridden by inactive_slide_opacity control */
}

/* Active slide — center third */
.gtea-vertical-focus__slide.is-active {
    transform: translateY(100%); /* 100% of own height = 1/3 of viewport */
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* Next slide — bottom third */
.gtea-vertical-focus__slide.is-next {
    transform: translateY(200%); /* 200% of own height = 2/3 of viewport */
    opacity: 0.4; /* overridden by inactive_slide_opacity control */
}

/* ── Slide content elements ───────────────────────────────────────── */
.gtea-vertical-focus__slide-subtitle {
    box-sizing: border-box;
}

.gtea-vertical-focus__slide-title {
    margin: 0;
    box-sizing: border-box;
}

.gtea-vertical-focus__slide-desc {
    margin: 0;
    box-sizing: border-box;
}

/* ── Slide image ──────────────────────────────────────────────────── */
.gtea-vertical-focus__slide-image-wrap {
    overflow: hidden;
    box-sizing: border-box;
}

.gtea-vertical-focus__slide-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    box-sizing: border-box;
    transition: all 300ms ease-in-out;
}

/* ── Slide CTAs ───────────────────────────────────────────────────── */
.gtea-vertical-focus__slide-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    box-sizing: border-box;
}

/* ── Pagination — vertical column of dots and lines ──────────────── */
.gtea-vertical-focus__pagination {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
}

/* ── Dot wrapper ──────────────────────────────────────────────────── */
.gtea-vertical-focus__dot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Dot mark (the clickable circle) ─────────────────────────────── */
.gtea-vertical-focus__dot-mark {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    border: none;
    padding: 0;
    flex-shrink: 0;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.gtea-vertical-focus__dot-mark:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.gtea-vertical-focus__dot-mark:focus:not(:focus-visible) {
    outline: none;
}

.gtea-vertical-focus__dot.is-active .gtea-vertical-focus__dot-mark {
    background-color: #333;
}

/* ── Dot connector — vertical line between dots ───────────────────── */
/*
 * flex: 1 distributes available height equally between all connectors,
 * so connector height scales automatically with the viewport height.
 */
.gtea-vertical-focus__dot-connector {
    flex: 1;
    min-height: 40px; /* overridden by connector_min_height control */
    width: 2px;       /* overridden by connector_width control */
    background-color: #e0e0e0;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── Line progress fill — grows from 0% to 100% height via JS ─────── */
.gtea-vertical-focus__line-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #333;
}

/* ── Floating cursor ──────────────────────────────────────────────── */
/*
 * Drag hint that follows the pointer over the carousel area. Mirrors the
 * Testimonials Carousel cursor: absolutely positioned, never intercepts
 * pointer events, fades in/out via opacity, and re-positions instantly via
 * a JS-set transform.
 */
.gtea-vertical-focus__cursor {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translate(0, 0) translate(-50%, -50%);
    transition: opacity 200ms ease-in-out;
    z-index: 100;
    white-space: nowrap;
    user-select: none;
}

.gtea-vertical-focus__cursor--visible {
    opacity: 1;
}

.gtea-vertical-focus__cursor--above {
    flex-direction: column;
}

/* Editor static preview — cursor centred on the carousel area */
.gtea-vertical-focus--editor .gtea-vertical-focus__cursor {
    top: 50%;
    left: 50%;
    opacity: 1;
    transform: translate(-50%, -50%);
}

.gtea-vertical-focus__cursor-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtea-vertical-focus__cursor-icon svg,
.gtea-vertical-focus__cursor-icon i {
    display: block;
}