/* ============================================================
   Oswald — self-hosted, loaded only on pages with the slider
   ============================================================ */

@font-face {
    font-display: swap;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/oswald/oswald-v57-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/oswald/oswald-v57-latin-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/oswald/oswald-v57-latin-700.woff2') format('woff2');
}

/* ============================================================
   Lightweight Fullscreen Slider — v2.3.2
   ============================================================ */

:root {
    --lws-frame: 36px;
}

.sdnslider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.sdnslider-slider {
    position: relative;
    width: 100%;
    /* --lws-vh is set once by JS on page load (window.innerHeight).
       This locks the height permanently so browser chrome showing/hiding
       during scroll never causes the image to resize or appear to zoom. */
    height: calc(var(--lws-vh, 100vh) - (2 * var(--lws-frame)));
    overflow: hidden;
    display: block;
    touch-action: pan-y;
    user-select: none;
    transform: translateZ(0);
}

.vc_row:has(.sdnslider-wrapper),
.vc_row.wpb_row:has(.sdnslider-wrapper),
.vc_row-inner:has(.sdnslider-wrapper),
.wpb_column:has(.sdnslider-wrapper),
.vc_column_container:has(.sdnslider-wrapper),
.vc_column-inner:has(.sdnslider-wrapper),
.l-section:has(.sdnslider-wrapper),
.l-section-h:has(.sdnslider-wrapper),
.row-container:has(.sdnslider-wrapper),
.limit-holder:has(.sdnslider-wrapper) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
}

/* ── Slides ── */
/* Desktop: opacity-based cross-fade. CSS handles the transition,
   JS toggles the .active class. No translateX involved on desktop. */
.sdnslider-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.45s ease-in-out;
    z-index: 1;
}

.sdnslider-slide.active {
    opacity: 1;
    z-index: 2;
}

/* Mobile: JS takes over with translateX. Opacity is always 1 here;
   visibility is controlled entirely by transform position.
   Transitions are set/cleared by JS to enable live finger tracking. */
@media (max-width: 767px) {
    .sdnslider-slide {
        opacity: 1;
        transition: none; /* JS sets this dynamically */
        transform: translateX(200%); /* parked off-screen; JS repositions */
        will-change: transform;
    }
    .sdnslider-slide.active {
        opacity: 1; /* keep visible — position handles show/hide */
        z-index: 1; /* no z-index stacking needed for translate mode */
    }
}

/* ── Image ── */
.sdnslider-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* ══════════════════════════════════════════════
   #4 — Text overlay with slide-in animation
   Slides enter from the RIGHT side (the white frame edge),
   travels left to its resting position.
   Triggered when the parent .sdnslider-slide gets .active.
   ══════════════════════════════════════════════ */
.sdnslider-text {
    position: absolute;
    top: 8%;
    right: 0;
    z-index: 10;
    text-align: right;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    max-width: 75%;
    box-sizing: border-box;
    /* Hidden by default — becomes visible when slide is active */
    pointer-events: none;
}

.sdnslider-text h2,
.sdnslider-text p {
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    background: #ffffff;
    color: #000;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 12px auto;
    padding: 0 20px;
    white-space: nowrap;
    box-sizing: border-box;
    /* Clipped to zero width at the right edge — grows leftward on activation */
    clip-path: inset(0 0 0 100%);
    transition: none;
}

/* Grow the white box from right to left — no opacity change, pure reveal */
.sdnslider-slide.active .sdnslider-text h2 {
    clip-path: inset(0 0 0 0%);
    transition: clip-path 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.sdnslider-slide.active .sdnslider-text p {
    clip-path: inset(0 0 0 0%);
    /* Subtitle reveals slightly after the title */
    transition: clip-path 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s;
}

.sdnslider-text h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 60px;
}

.sdnslider-text p {
    font-size: 14px;
    font-weight: 400;
    line-height: 45px;
    letter-spacing: 2px;
}

/* ── Navigation arrows ── */
.sdnslider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 60px;
    background: #ffffff;
    border: none;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'revicons';
    font-size: 20px;
    color: #000;
    line-height: 1;
    padding: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.sdnslider-arrow.prev { left: 0; }
.sdnslider-arrow.next { right: 0; }

.sdnslider-arrow.prev::before,
.sdnslider-arrow.next::before {
    display: block;
    transition: transform 0.15s ease-out;
}

.sdnslider-arrow.prev::before { content: "\e819"; }
.sdnslider-arrow.next::before { content: "\e81a"; }

.sdnslider-arrow.prev:hover::before { transform: translateX(-5px); }
.sdnslider-arrow.next:hover::before { transform: translateX(5px); }

/* ── Scroll-down chevron ── */
.sdnslider-scroll-down {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    animation: lws-chevron-bounce 2s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
}

.sdnslider-scroll-down::before {
    content: "\e819";
    font-family: 'revicons';
    font-size: 30px;
    color: rgba(255,255,255,0.9);
    line-height: 1;
    display: block;
    transform: rotate(-90deg);
    transition: color 0.15s ease-out;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}

.sdnslider-scroll-down:hover {
    animation-play-state: paused;
    transform: translateX(-50%) translateY(5px);
    transition: transform 0.15s ease-out;
}

.sdnslider-scroll-down:hover::before { color: #ffffff; }

@keyframes lws-chevron-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0);   opacity: 0.75; }
    50%       { transform: translateX(-50%) translateY(6px); opacity: 1;    }
}

/* ── Counter overlay ──────────────────────────────────────────────────────
   Hidden by default on desktop. Shown via media queries on mobile and
   portrait tablet. MUST be defined here (before the media queries) so
   that the media-query display:block rules can override this display:none.
   CSS cascade: later rules with equal specificity win — if this were
   placed after the media queries, display:none would always override them. */
.sdnslider-counter {
    display: none;
    position: absolute;
    bottom: 8px;
    right: 16px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #ffffff;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    padding: 4px 11px;
    border-radius: 20px;
    pointer-events: none;
    user-select: none;
}

/* ════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════ */

/* ── Tablet (768px – 1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .sdnslider-text h2 { font-size: 16px; line-height: 38px; padding: 0 12px; }
    .sdnslider-text p  { font-size: 9px;  line-height: 28px; padding: 0 12px; letter-spacing: 1px; }
    .sdnslider-arrow   { width: 28px; height: 56px; }
}

/* ── Small desktop (1025px – 1199px) ── */
@media (min-width: 1025px) and (max-width: 1199px) {
    .sdnslider-text h2 { font-size: 19px; line-height: 46px; padding: 0 14px; }
    .sdnslider-text p  { font-size: 11px; line-height: 34px; padding: 0 14px; letter-spacing: 1.5px; }
}

/* ── Medium desktop (1200px – 1399px) ── */
@media (min-width: 1200px) and (max-width: 1399px) {
    .sdnslider-text h2 { font-size: 23px; line-height: 52px; }
    .sdnslider-text p  { font-size: 13px; line-height: 42px; letter-spacing: 1.8px; }
}

/* ── Short viewport (< 500px tall) — hide chevron so it doesn't clip ── */
@media (max-height: 500px) {
    .sdnslider-scroll-down { display: none; }
}

/* ── Portrait orientation (≥ 768px) ──────────────────────────────────────
   On a vertically-held tablet the website renders in mobile layout
   (hamburger menu). Match that by showing the slider at 3:2 instead of
   fullscreen — the same behaviour as on smartphones.
   No upper width limit: all tablets fall here (768px iPad mini → 1024px+).

   The parent container overrides (height/min-height) are needed because
   Uncode sets min-height: 100vh on fullscreen sections. Without them,
   the section stays full-viewport-height even after the slider shrinks,
   leaving a large white gap before the content below. Uncode removes its
   own min-height below ~960px (mobile layout), which is why the gap only
   appears between ~960px and the portrait breakpoint. */
@media (min-width: 768px) and (orientation: portrait) {

    .sdnslider-wrapper {
        aspect-ratio: 3 / 2;
        height: auto;
    }

    .sdnslider-slider {
        height: 100%;
    }

    /* Force parent WPBakery/Uncode containers to wrap the slider's
       actual height instead of staying at their fullscreen height. */
    .vc_row:has(.sdnslider-wrapper),
    .vc_row.wpb_row:has(.sdnslider-wrapper),
    .vc_row-inner:has(.sdnslider-wrapper),
    .wpb_column:has(.sdnslider-wrapper),
    .vc_column_container:has(.sdnslider-wrapper),
    .vc_column-inner:has(.sdnslider-wrapper),
    .l-section:has(.sdnslider-wrapper),
    .l-section-h:has(.sdnslider-wrapper),
    .row-container:has(.sdnslider-wrapper),
    .limit-holder:has(.sdnslider-wrapper) {
        height: auto !important;
        min-height: 0 !important;
    }

    .sdnslider-text        { display: none; }
    .sdnslider-arrow       { display: none; }
    .sdnslider-scroll-down { display: none; }
    .sdnslider-counter     { display: block; }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {

    .sdnslider-wrapper {
        overflow: hidden;
        aspect-ratio: 3 / 2;
        max-height: 75vw;
        height: auto;
    }

    .sdnslider-slider {
        width: 100%;
        height: 100%;
        aspect-ratio: unset;
        max-height: unset;
        overflow: hidden;
    }

    /* Same parent container reset as portrait tablet — ensures no gap
       below the slider if Uncode's fullscreen height applies on mobile. */
    .vc_row:has(.sdnslider-wrapper),
    .vc_row.wpb_row:has(.sdnslider-wrapper),
    .vc_row-inner:has(.sdnslider-wrapper),
    .wpb_column:has(.sdnslider-wrapper),
    .vc_column_container:has(.sdnslider-wrapper),
    .vc_column-inner:has(.sdnslider-wrapper),
    .l-section:has(.sdnslider-wrapper),
    .l-section-h:has(.sdnslider-wrapper),
    .row-container:has(.sdnslider-wrapper),
    .limit-holder:has(.sdnslider-wrapper) {
        height: auto !important;
        min-height: 0 !important;
    }

    .sdnslider-text        { display: none; }
    .sdnslider-arrow       { display: none; }
    .sdnslider-scroll-down { display: none; }
    .sdnslider-counter     { display: block; }
}