/* =========================================================
   LUARK FULLSCREEN SLIDER
========================================================= */

html {
    scroll-behavior: auto;
}

.luark-fs-slider {
    position: relative;
    width: 100%;
    height: var(--luark-slide-height);
    overflow: hidden;
    box-sizing: border-box;

    display: grid;
    grid-template-rows: 72px 1fr;
}

/* =========================================================
   TABS
========================================================= */

.luark-fs-tabs {
    position: relative;
    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 40px;

    width: 100%;
    height: 72px;

    overflow: visible;
}

.luark-fs-tab {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 160px;
    height: 48px;

    padding: 0 24px;

    border: 0;
    background: transparent;

    color: #e4001b;

    font-size: 17px;
    font-weight: 500;
    line-height: 1;

    cursor: pointer;

    opacity: .45;

    transition:
        opacity .25s ease,
        color .25s ease,
        background .25s ease;
}

.luark-fs-tab:hover {
    opacity: 1;
}

.luark-fs-tab.is-active {
    opacity: 1;

    background: #e4001b;
    color: #ffffff;

    border-radius: 3px;
}

.luark-fs-tab.is-active::after {
    content: '';

    position: absolute;

    left: 24px;
    right: 24px;
    bottom: -10px;

    height: 2px;

    background: #e4001b;
}

/* =========================================================
   TRACK
========================================================= */

.luark-fs-track {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 0;

    overflow: hidden;
}

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

.luark-fs-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    max-height: 100%;

    display: grid;

    grid-template-columns:
        var(--luark-left-width)
        var(--luark-image-width)
        var(--luark-content-width);

    gap: var(--luark-column-gap);

    align-items: start;

    padding:
        clamp(40px, 4vw, 80px)
        clamp(30px, 5vw, 120px)
        clamp(40px, 4vw, 80px);

    background: var(--luark-slide-bg);

    overflow: hidden;
    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(42px);

    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.75s;

    will-change: opacity, transform;

    scroll-margin-top: 0 !important;
}

.luark-fs-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0);

    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}


/* =========================================================
   LEFT
========================================================= */

.luark-fs-left {
    position: relative;

    width: 100%;
    height: 100%;
    max-height: 100%;

    overflow: hidden;

    z-index: 2;
}

.luark-fs-title {
    margin: 0;

    font-size: clamp(48px, 4.4vw, 86px);
    line-height: 0.9;
    font-weight: 500;
    letter-spacing: -0.035em;

    color: #004b87;
}

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

.luark-fs-image {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    max-height: 100%;

    overflow: hidden;
}

.luark-fs-image img {
    width: auto;
    max-width: 100%;
    max-height: 100%;

    height: auto;
    display: block;

    object-fit: contain;
}

/* =========================================================
   RIGHT
========================================================= */

.luark-fs-content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    gap: 40px;

    width: 100%;
    height: 100%;
    max-height: 100%;

    overflow: hidden;

    padding: 48px 58px;

    background: var(--luark-content-bg);

    box-sizing: border-box;
}

.luark-fs-wysiwyg {
    position: relative;

    font-size: 16px;
    line-height: 1.45;

    color: #ffffff;

    overflow: hidden;
}

.luark-fs-wysiwyg,
.luark-fs-wysiwyg * {
    font-family: inherit;
}

.luark-fs-wysiwyg p {
    margin: 0 0 22px 0;
}

.luark-fs-wysiwyg p:last-child {
    margin-bottom: 0;
}

.luark-fs-wysiwyg,
.luark-fs-wysiwyg p,
.luark-fs-wysiwyg span,
.luark-fs-wysiwyg strong,
.luark-fs-wysiwyg b,
.luark-fs-wysiwyg li {
    color: inherit;
}

/* =========================================================
   LINK
========================================================= */

.luark-fs-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    width: fit-content;

    text-decoration: none;

    font-size: 16px;
    font-weight: 600;

    color: #ffffff;

    transition:
        opacity 0.25s ease,
        color 0.25s ease;
}

.luark-fs-link:hover {
    opacity: 0.8;
}

.luark-fs-link svg {
    width: 22px;
    height: 22px;

    flex-shrink: 0;
}

/* =========================================================
   RESPONSIVE
========================================================= */
/* =========================================================
   DESKTOP FIT SCALE
========================================================= */

.luark-fs-slider{
    --luark-fs-inner-scale:1;
}

.luark-fs-left,
.luark-fs-image,
.luark-fs-content{
    transform:scale(var(--luark-fs-inner-scale));
    transform-origin:center center;
}

/* =========================================================
   1800
========================================================= */

@media (max-width:1800px) and (min-width:1601px){

    .luark-fs-slider{
        --luark-fs-inner-scale:.92;
    }

    .luark-fs-content{
        padding:30px !important;
    }

    .luark-fs-title{
        font-size:clamp(42px,3vw,72px);
    }

    .luark-fs-content .luark-fs-wysiwyg,
    .luark-fs-content .luark-fs-wysiwyg *,
    .luark-fs-content .luark-fs-wysiwyg p{
        font-size:14px !important;
        line-height:1.4 !important;
    }

}

/* =========================================================
   1600
========================================================= */

@media (max-width:1600px) and (min-width:1401px){

    .luark-fs-slider{
        --luark-fs-inner-scale:.84;
    }

    .luark-fs-slide{
		gap:20px !important;
    }

    .luark-fs-content{
        padding:24px !important;
    }


    .luark-fs-content .luark-fs-wysiwyg,
    .luark-fs-content .luark-fs-wysiwyg *,
    .luark-fs-content .luark-fs-wysiwyg p{
        font-size:13px !important;
        line-height:1.35 !important;
    }
    .luark-fs-title{
        font-size:clamp(26px,2vw,45px);
        line-height:.90;
    }
}

/* =========================================================
   1400
========================================================= */

@media (max-width:1400px) and (min-width:1201px){

    .luark-fs-slider{
        --luark-fs-inner-scale:.82;
    }

    .luark-fs-slide{
        gap:15px !important;
    }

    .luark-fs-content{
        padding:20px !important;
    }

    .luark-fs-title{
        font-size:clamp(30px,2.4vw,48px);
        line-height:.92;
    }

    .luark-fs-content .luark-fs-wysiwyg,
    .luark-fs-content .luark-fs-wysiwyg *,
    .luark-fs-content .luark-fs-wysiwyg p{
        font-size:13px !important;
        line-height:1.20 !important;
    }


}

/* =========================================================
   1200 TABLET
========================================================= */

@media (max-width:1200px) and (min-width:767px){

    .luark-fs-slider{
        --luark-fs-inner-scale:.74;
    }

    .luark-fs-slide{
        grid-template-columns:1fr !important;
        gap:20px !important;
	    padding:20px !important;
    }

    .luark-fs-image{
        display:none !important;
    }

    .luark-fs-left,
    .luark-fs-content{
        width:100%;
        max-width:100%;
        height:auto;
        max-height:none;
        transform:none !important;
	    margin-bottom:6px !important;
    }

    .luark-fs-content{
        padding:22px !important;
    }

    .luark-fs-title{
        font-size:clamp(20px,2vw,36px);
        line-height:.9;
    }

    .luark-fs-content .luark-fs-wysiwyg,
    .luark-fs-content .luark-fs-wysiwyg *,
    .luark-fs-content .luark-fs-wysiwyg p{
        font-size:16px !important;
        line-height:1.18 !important;
    }
	.luark-fs-slide{
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:20px !important;
    align-content:start !important;
	}

}
/* =========================================================
   MOBILE FULLSCREEN SLIDER
========================================================= */

@media (max-width: 767px){

    .luark-fs-slider{
        height:auto !important;
        display:block;
        overflow:visible;
    }

    .luark-fs-tabs{
        display:flex;
        justify-content:flex-start;
        gap:12px;
        padding:16px 18px 10px;
        overflow-x:auto;
        flex-wrap:nowrap;
    }

    .luark-fs-tab{
        flex:0 0 auto;
        min-width:auto;
        height:30px;
        padding:0 14px;
        font-size:13px;
    }

    .luark-fs-track{
        height:auto;
        overflow:visible;
    }

    .luark-fs-slide{
        position:relative;
        display:none;
        height:auto;
        max-height:none;
        grid-template-columns:1fr;
        gap:16px;
        padding:18px;
        overflow:visible;
    }

    .luark-fs-slide.active{
        display:grid;
    }

    .luark-fs-image{
        display:none !important;
    }

    .luark-fs-left,
    .luark-fs-content{
        width:100%;
        height:auto;
        max-height:none;
        transform:none !important;
    }

    .luark-fs-title{
        font-size:20px !important;
        line-height:1.15 !important;
        letter-spacing:0 !important;
        margin:0;
    }

    .luark-fs-content{
        padding:18px !important;
        overflow:hidden;
    }

    .luark-fs-wysiwyg,
    .luark-fs-wysiwyg *,
    .luark-fs-wysiwyg p{
        font-size:14px !important;
        line-height:1.35 !important;
    }
}