/* ============================================================
   Scroll Steps Widget
   ============================================================

   Layout architecture
   ───────────────────
   .gtea-scroll-steps          outer wrapper — height: N × sticky-height
   └─ .gtea-scroll-steps__sticky   position:sticky; height:100vh; flex-column
      │   justify-content positions __header + __inner vertically (top/center/bottom)
      ├─ .gtea-scroll-steps__bg      position:absolute — decorative bg
      │   └─ img.__bg-img              parallax image
      ├─ .gtea-scroll-steps__overlay  position:absolute — decorative overlay
      ├─ .gtea-scroll-steps__header   in-flow flex child — title / subtitle / divider
      └─ .gtea-scroll-steps__inner    the real layout block (flex-column)
         │   nav is always at the top; panels is always below
         ├─ .gtea-scroll-steps__nav   nav bar (flex-shrink:0)
         │   └─ .gtea-scroll-steps__nav-track  flex row of tabs
         │       └─ .gtea-scroll-steps__tab × N
         └─ .gtea-scroll-steps__panels  CSS Grid stacking for cross-fade
             └─ .gtea-scroll-steps__panel × N  grid-area:1/1; opacity fade
                 └─ .gtea-scroll-steps__panel-inner
                     ├─ .gtea-scroll-steps__heading
                     ├─ .gtea-scroll-steps__description
                     └─ .gtea-scroll-steps__cta

   position:absolute is used ONLY for __bg and __overlay (purely decorative
   layers that must fill the full viewport independently of the layout).
   All layout elements (__inner, nav, panels, panel, etc.) use normal flex
   or CSS Grid flow — no absolute positioning for layout.

   Cross-fade between panels uses CSS Grid stacking (grid-area: 1/1), not
   position:absolute. The panels container auto-sizes to the tallest panel.
   ============================================================ */

/* ── Header block (in-flow flex child of __sticky, before __inner) ──
   Sits above __inner inside the sticky viewport so the decorative
   __bg and __overlay cover it correctly.
   flex-shrink:0 keeps its natural height; z-index:2 lifts it above
   __bg (z:0) and __overlay (z:1); position:relative establishes a
   stacking context without removing it from flex flow.
   align-items / justify-content / gap driven by Elementor controls.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__header {
    position: relative;
    flex-shrink: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.gtea-scroll-steps__header-title,
.gtea-scroll-steps__header-subtitle {
    box-sizing: border-box;
}

.gtea-scroll-steps__header-divider {
    box-sizing: border-box;
}

/* ── Outer wrapper ──────────────────────────────────────────
   height = N × sticky-height (driven by Elementor selector
   + CSS var --gtea-ss-count set by PHP render()).
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    /* Outer height = sticky height  +  (N−1) steps × scroll-per-step  +  anim-start offset
       All three values are driven by Elementor controls (or their defaults).
       --gtea-ss-sticky-h   : visual height of sticky panel  (default 100vh)
       --gtea-ss-count      : N, set by PHP render()
       --gtea-ss-step-scroll: scroll distance per step       (default 100vh)
       --gtea-ss-anim-start : unitless vh offset before first step (default 0)
       Each of the N steps gets exactly one step-scroll of meaningful range.
       display:flex + flex-direction:column let __sticky expand via flex-grow in
       the editor (where height:auto is in effect) without altering frontend scroll. */
    height: calc(
        var( --gtea-ss-sticky-h, 100vh ) +
        var( --gtea-ss-count, 3 ) * var( --gtea-ss-step-scroll, 100vh ) +
        var( --gtea-ss-anim-start, 0 ) * 1vh
    );
}

/* ── Sticky viewport ────────────────────────────────────────
   Default height 100vh; overridden by Elementor control.
   overflow:hidden clips decorative bg image (parallax).
   flex-column: __header and __inner are the in-flow children
   (__bg and __overlay are position:absolute — out of flow).
   justify-content positions the header+inner group at
   top / center / bottom of the viewport — controlled by the
   Vertical Position control in Tab Style → Navigation.
   isolation:isolate keeps bg/overlay z-index scoped locally.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;    /* default: header + inner group centred vertically */
    isolation: isolate;
}

/* ── Background container ───────────────────────────────────
   position:absolute is correct here — __bg is a purely
   decorative layer that must fill the full sticky viewport
   regardless of where __inner (layout block) sits.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

/* ── Background image ───────────────────────────────────────
   Extra height for parallax headroom:
     top    = − parallaxPx
     height = 100% + 2 × parallaxPx
   JS translateY drives the parallax movement.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__bg-img {
    position: absolute;
    left: 0;
    width: 100%;
    top: calc( -1 * var( --gtea-ss-parallax, 80px ) );
    height: calc( 100% + var( --gtea-ss-parallax, 80px ) * 2 );
    object-fit: cover;
    object-position: center center;
    will-change: transform;
    pointer-events: none;
    user-select: none;
    display: block;
}

/* ── Overlay ────────────────────────────────────────────────
   position:absolute is correct here — __overlay is a purely
   decorative tint that must fill the full sticky viewport.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ── Inner ──────────────────────────────────────────────────
   Layout block for nav + panels — second in-flow flex child
   of __sticky (after __header). Takes its natural height so
   __sticky's justify-content can centre the header+inner
   group vertically without being consumed by flex-grow.
   flex-shrink:0 prevents unwanted shrinkage when content is
   short. width:100% so nav and panels span the full sticky
   width. pointer-events:none lets bg clicks pass through; nav
   and panel-inner re-enable pointer-events for themselves.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__inner {
    position: relative;
    flex-shrink: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    pointer-events: none;
}

/* ── Nav — horizontal scrollable tab bar ────────────────────
   flex-shrink:0 keeps the nav at its natural height so the
   panels below it are never pushed out of view.
   overflow-x:scroll with hidden scrollbar.
   JS scrolls it programmatically only when the active tab
   is outside the visible area (see revealTab()).
   pointer-events:auto re-enables interaction.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__nav {
    flex-shrink: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE / Edge legacy */
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
}

.gtea-scroll-steps__nav::-webkit-scrollbar {
    display: none;
}

/* ── Nav track — flex row of tabs ───────────────────────────
   min-width:100% ensures the track is at least as wide as
   the nav so tab percentage widths resolve against the nav.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__nav-track {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-width: 100%;
    box-sizing: border-box;
}

/* ── Tab ────────────────────────────────────────────────────
   JS sets explicit pixel widths based on nav width ÷ visible_tabs.
   Opacity differentiates active from inactive.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__tab {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: default;
    box-sizing: border-box;
    opacity: 0.45;
    transition: opacity 0.35s ease;
}

.gtea-scroll-steps__tab--active {
    opacity: 1;
}

/* ── Tab label ──────────────────────────────────────────────
   Text span inside each nav tab.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__tab-label {
    display: block;
}

/* ── Panels area ────────────────────────────────────────────
   Direct child of __inner — always below the nav in normal
   flex-column flow. No absolute positioning needed.
   CSS Grid with grid-template-columns:1fr stacks all panels
   in the same single-column grid, letting them share the
   same space for the opacity cross-fade effect.
   Container auto-sizes to the tallest panel's content.
   pointer-events:none base; active panel re-enables it.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__panels {
    display: grid;
    grid-template-columns: 1fr;
    box-sizing: border-box;
    pointer-events: none;
}

/* ── Panel ──────────────────────────────────────────────────
   grid-area:1/1 places every panel in the same grid cell,
   creating a cross-fade stack without position:absolute.
   Inactive: opacity 0, pointer-events none.
   Active  : opacity 1, pointer-events auto.
   display:flex so align-items/justify-content alignment
   controls position panel-inner within the panel area.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__panel {
    grid-area: 1 / 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    box-sizing: border-box;
}

.gtea-scroll-steps__panel--active {
    opacity: 1;
    pointer-events: auto;
}

/* ── Panel inner ────────────────────────────────────────────
   Wraps heading + description + CTA.
   flex-column so components stack vertically.
   align-self / align-items on children control horizontal
   position (cross axis of the column).
   Max-width, padding, bg from Elementor controls.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__panel-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    padding: 40px;
    pointer-events: auto;
}

/* ── Heading ────────────────────────────────────────────────
   display:flex flex-column so alignment controls work.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__heading {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* ── Description ────────────────────────────────────────────
   Same flex setup as heading so alignment controls work.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__description {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.gtea-scroll-steps__description p:last-child {
    margin-bottom: 0;
}

/* ── CTA ────────────────────────────────────────────────────
   Flex row wrapper so horizontal-alignment control works.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__cta {
    display: flex;
    flex-direction: row;
}

.gtea-scroll-steps__cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}

/* ── CTA icon structure (.gtea-cta compatible) ──────────────
   Self-contained icon rules so widget-cta.css need not be
   loaded for icon animations to work.
   ─────────────────────────────────────────────────────────── */
.gtea-scroll-steps__cta .gtea-cta__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gtea-scroll-steps__cta .gtea-cta__icon-wrap svg {
    width: 16px;
    height: 16px;
}

.gtea-scroll-steps__cta .gtea-cta__icon-clip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.gtea-scroll-steps__cta .gtea-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gtea-scroll-steps__cta .gtea-cta__icon--clone {
    position: absolute;
    inset: 0;
    transform: translateX( -110% );
}

/* Slide animation */
.gtea-scroll-steps__cta .gtea-cta__icon-wrap--anim-slide .gtea-cta__icon-clip {
    overflow: hidden;
}

.gtea-scroll-steps__cta .gtea-cta__icon-wrap--anim-slide .gtea-cta__icon:not( .gtea-cta__icon--clone ) {
    transition: transform var( --gtea-icon-anim-duration, 300ms ) cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gtea-scroll-steps__cta .gtea-cta__icon-wrap--anim-slide .gtea-cta__icon--clone {
    transition: transform var( --gtea-icon-anim-duration, 300ms ) cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gtea-scroll-steps__cta-link:hover .gtea-cta__icon-wrap--anim-slide.gtea-cta__icon-wrap--on-hover .gtea-cta__icon:not( .gtea-cta__icon--clone ) {
    transform: translateX( 110% );
}

.gtea-scroll-steps__cta-link:hover .gtea-cta__icon-wrap--anim-slide.gtea-cta__icon-wrap--on-hover .gtea-cta__icon--clone {
    transform: translateX( 0 );
}

.gtea-scroll-steps__cta-link:focus .gtea-cta__icon-wrap--anim-slide.gtea-cta__icon-wrap--on-focus .gtea-cta__icon:not( .gtea-cta__icon--clone ) {
    transform: translateX( 110% );
}

.gtea-scroll-steps__cta-link:focus .gtea-cta__icon-wrap--anim-slide.gtea-cta__icon-wrap--on-focus .gtea-cta__icon--clone {
    transform: translateX( 0 );
}

/* ═══════════════════════════════════════════════════════════
   Elementor editor overrides
   ═══════════════════════════════════════════════════════════
   Goal: the editor preview must be visually identical to the
   frontend state — only the active item visible, same layout,
   same styles, same hierarchy (nav above, content below).

   Sticky reverts to position:relative so it flows in the
   canvas. All base styles (flex-column, justify-content,
   typography, spacing, backgrounds) are inherited from the
   base rules — no override needed for those.

   The only overrides needed are:
   1. Disable sticky positioning (already done via position:relative)
   2. Reset height to auto so __header + __inner never overflow the
      container and get clipped by overflow:hidden
   3. Reset parallax bg-img offset/transform
   4. Allow nav tabs to wrap so all are visible for styling
   5. Ensure the active panel is visible (base rule already
      handles this — __panel--active has opacity:1)
   6. Disable JS-driven tab widths so tabs have natural size
   ─────────────────────────────────────────────────────────── */
body.elementor-editor-active .gtea-scroll-steps {
    height: auto !important;
}

body.elementor-editor-active .gtea-scroll-steps__sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;     /* allow container to grow — prevents overflow:hidden
                                    from clipping __header when __header + __inner
                                    exceed 100vh (the base rule's fixed height) */
    flex-grow: 1;                /* fills the min-height set by the Section Height
                                    control on the .gtea-scroll-steps root container */
    min-height: 60vh;            /* fallback so bg/overlay are visible with no content */
    overflow: hidden !important;
    /* All other styles (display, flex-direction, justify-content, padding,
       backgrounds, etc.) are inherited from the base rule — no override needed. */
}

/* Reset parallax: bg-img at natural position, no transform */
body.elementor-editor-active .gtea-scroll-steps__bg-img {
    top: 0 !important;
    height: 100% !important;
    will-change: auto;
    transform: none !important;
}

/* Nav: keep the same overflow-x:scroll + single-row layout as frontend.
   JS runs applyTabWidths() in editor too (see widget-scroll-steps.js),
   so pixel widths are calculated identically to frontend.
   Only opacity needs an override (tabs are dimmed in base CSS). */
body.elementor-editor-active .gtea-scroll-steps__tab {
    opacity: 1 !important;
}

/* Panels: the CSS Grid stacking (grid-area:1/1) and opacity
   mechanism work identically in editor and frontend.
   __panel--active (set by PHP on item 0) has opacity:1 → visible.
   All other panels have opacity:0 → invisible.
   NO overrides needed here — base CSS already handles this correctly.
   Result: editor shows only item 0 (same as initial frontend state). */