/* ==========================================================
VALIRINA ATELIER — OCCASIONS CAROUSEL
RESPONSIVE MOSAIC

SECTION SPACING SYSTEM

Desktop:      35px bottom
Tablet:       30px bottom
Mobile:       24px bottom
Small mobile: 20px bottom

Top spacing is 0 because the previous component owns
the distance leading into this section.
========================================================== */


/* ==========================================================
01 — GLOBAL VARIABLES
========================================================== */

.valirina-occasions {

    /* ======================================================
       SITE TYPOGRAPHY REFERENCE

       Editorial headings:
       "Cormorant Garamond", Georgia, serif

       Body / links:
       Site default font

       Main text:
       #1d1c1a

       Secondary text:
       #625d57

       Editorial accent:
       #ad772d
    ====================================================== */

    --valirina-editorial-font:
        "Cormorant Garamond",
        Georgia,
        serif;

    --valirina-text-primary:
        #1d1c1a;

    --valirina-text-secondary:
        #625d57;

    --valirina-accent:
        #ad772d;


    /* ======================================================
       SECTION
    ====================================================== */

    --occasions-max-width:
        1600px;

    --occasions-padding-x:
        34px;

    --occasions-padding-top:
        0px;

    --occasions-padding-bottom:
        35px;

    --occasions-section-gap:
        26px;


    /* ======================================================
       HEADER
    ====================================================== */

    --occasions-header-max-width:
        760px;

    --occasions-header-gap:
        10px;

    --occasions-title-font-size:
        48px;

    --occasions-title-line-height:
        1.02;

    --occasions-title-font-weight:
        620;

    --occasions-title-letter-spacing:
        -0.042em;

    --occasions-title-color:
        var(--valirina-text-primary);

    --occasions-title-accent-color:
        var(--valirina-accent);

    --occasions-description-font-size:
        16px;

    --occasions-description-line-height:
        1.55;

    --occasions-description-color:
        var(--valirina-text-secondary);


    /* ======================================================
       CAROUSEL
    ====================================================== */

    --occasions-page-gap:
        22px;


    /* ======================================================
       DESKTOP PAGE
    ====================================================== */

    --occasions-desktop-columns:
        12;

    --occasions-desktop-rows:
        4;

    --occasions-desktop-page-height:
        430px;

    --occasions-desktop-column-gap:
        18px;

    --occasions-desktop-row-gap:
        18px;


    /* ======================================================
       TABLET PAGE
    ====================================================== */

    --occasions-tablet-columns:
        4;

    --occasions-tablet-page-height:
        440px;

    --occasions-tablet-column-gap:
        14px;

    --occasions-tablet-row-gap:
        14px;


    /* ======================================================
       MOBILE PAGE
    ====================================================== */

    --occasions-mobile-columns:
        3;

    --occasions-mobile-page-height:
        390px;

    --occasions-mobile-column-gap:
        10px;

    --occasions-mobile-row-gap:
        10px;


    /* ======================================================
       LARGE / SMALL CARD RATIO
    ====================================================== */

    --occasions-large-card-ratio:
        11;

    --occasions-small-card-ratio:
        9;


    /* ======================================================
       CARD
    ====================================================== */

    --occasion-card-radius:
        14px;

    --occasion-card-padding:
        26px;

    --occasion-card-hover-y:
        -3px;

    --occasion-card-hover-scale:
        1.004;

    --occasion-card-transition-duration:
        320ms;

    --occasion-card-transition-easing:
        cubic-bezier(0.16, 1, 0.3, 1);


    /* ======================================================
       CARD CONTENT
    ====================================================== */

    --occasion-content-gap:
        8px;

    --occasion-content-max-width:
        68%;

    --occasion-name-font-size:
        21px;

    --occasion-name-line-height:
        1.08;

    --occasion-name-font-weight:
        650;

    --occasion-name-letter-spacing:
        -0.025em;

    --occasion-name-color:
        var(--valirina-text-primary);

    --occasion-name-mobile-font-size:
        12.5px;

    --occasion-link-font-size:
        14px;

    --occasion-link-line-height:
        1.2;

    --occasion-link-font-weight:
        500;

    --occasion-link-color:
        var(--occasions-description-color);


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

    --occasion-image-width:
        66%;

    --occasion-image-height:
        72%;

    --occasion-image-right:
        0px;

    --occasion-image-bottom:
        0px;

    --occasion-image-hover-scale:
        1.035;

    --occasion-image-transition-duration:
        420ms;

    --occasion-image-transform-origin:
        right bottom;


    /* ======================================================
       CARD BACKGROUNDS
    ====================================================== */

    --occasion-bg-1:
        #EFE3D6;

    --occasion-bg-2:
        #E8D3C7;

    --occasion-bg-3:
        #FBF1E4;

    --occasion-bg-4:
        #EDEBE3;

    --occasion-bg-5:
        #F2E2D3;

    --occasion-bg-6:
        #E4D2C0;


    /* ======================================================
       NAVIGATION
    ====================================================== */

    --occasions-navigation-gap:
        26px;

    --occasions-navigation-margin-top:
        2px;


    /* ======================================================
       PROGRESS
    ====================================================== */

    --occasions-progress-height:
        3px;

    --occasions-progress-background:
        #ebe9e5;

    --occasions-progress-active:
        #1f1d1a;

    --occasions-progress-radius:
        999px;


    /* ======================================================
       CONTROLS
    ====================================================== */

    --occasions-control-size:
        42px;

    --occasions-control-icon-size:
        16px;

    --occasions-control-gap:
        8px;

    --occasions-control-border:
        #dedcd8;

    --occasions-control-background:
        #ffffff;

    --occasions-control-color:
        #1f1d1a;

    --occasions-control-disabled-opacity:
        0.32;

    --occasions-control-hover-background:
        #1f1d1a;

    --occasions-control-hover-color:
        #ffffff;

    --occasions-control-transition-duration:
        220ms;


    /* ======================================================
       FOOTER
    ====================================================== */

    --occasions-footer-margin-top:
        0px;

    --occasions-footer-align:
        flex-start;


    /* ======================================================
       CTA
    ====================================================== */

    --occasions-button-height:
        44px;

    --occasions-button-padding-x:
        22px;

    --occasions-button-font-size:
        14px;

    --occasions-button-font-weight:
        600;

    --occasions-button-letter-spacing:
        -0.01em;

    --occasions-button-background:
        #211d19;

    --occasions-button-color:
        #ffffff;

    --occasions-button-border:
        #211d19;

    --occasions-button-hover-background:
        #ffffff;

    --occasions-button-hover-color:
        #211d19;

    --occasions-button-hover-border:
        #211d19;

    --occasions-button-radius:
        999px;

    --occasions-button-transition-duration:
        220ms;
}


/* ==========================================================
02 — LARGE DESKTOP
========================================================== */

@media (min-width: 1440px) {

    .valirina-occasions {

        --occasions-padding-x:
            40px;

        --occasions-desktop-page-height:
            430px;

        --occasions-title-font-size:
            40px;

        --occasion-name-font-size:
            22px;

        --occasion-card-padding:
            26px;
    }
}


/* ==========================================================
03 — LAPTOP
========================================================== */

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

    .valirina-occasions {

        --occasions-padding-x:
            28px;

        --occasions-padding-top:
            0px;

        --occasions-padding-bottom:
            35px;

        --occasions-desktop-page-height:
            370px;

        --occasions-desktop-column-gap:
            14px;

        --occasions-desktop-row-gap:
            14px;

        --occasions-title-font-size:
            41px;

        --occasions-description-font-size:
            15px;

        --occasion-name-font-size:
            18px;

        --occasion-link-font-size:
            13px;

        --occasion-card-padding:
            20px;

        --occasions-footer-margin-top:
            5px;
    }
}


/* ==========================================================
04 — TABLET
========================================================== */

@media (max-width: 1024px) and (min-width: 768px) {

    .valirina-occasions {

        --occasions-padding-x:
            22px;

        --occasions-padding-top:
            0px;

        --occasions-padding-bottom:
            30px;

        --occasions-title-font-size:
            38px;

        --occasions-description-font-size:
            15px;

        --occasion-card-padding:
            17px;

        --occasion-name-font-size:
            17px;

        --occasion-link-font-size:
            12px;

        --occasion-content-gap:
            5px;

        --occasion-content-max-width:
            78%;

        --occasion-image-width:
            74%;

        --occasion-image-height:
            64%;

        --occasions-control-size:
            40px;

        --occasions-control-icon-size:
            15px;

        --occasions-footer-margin-top:
            5px;
    }
}


/* ==========================================================
05 — MOBILE
========================================================== */

@media (max-width: 767px) {

    .valirina-occasions {

        --occasions-padding-x:
            16px;

        --occasions-padding-top:
            0px;

        --occasions-padding-bottom:
            24px;

        --occasions-section-gap:
            22px;

        --occasions-title-font-size:
            34px;

        --occasions-description-font-size:
            14.5px;

        --occasion-card-padding:
            12px;

        --occasion-name-font-size:
            var(--occasion-name-mobile-font-size);

        --occasion-link-font-size:
            10.5px;

        --occasion-content-gap:
            4px;

        --occasion-content-max-width:
            100%;

        --occasion-image-width:
            78%;

        --occasion-image-height:
            61%;

        --occasions-control-size:
            38px;

        --occasions-control-icon-size:
            14px;

        --occasions-navigation-gap:
            14px;

        --occasions-button-height:
            42px;

        --occasions-button-padding-x:
            18px;

        --occasions-button-font-size:
            13px;

        --occasions-footer-margin-top:
            5px;
    }
}


/* ==========================================================
06 — SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

    .valirina-occasions {

        --occasions-padding-top:
            0px;

        --occasions-padding-bottom:
            20px;

        --occasions-mobile-page-height:
            360px;

        --occasions-title-font-size:
            31px;

        --occasion-card-padding:
            10px;

        --occasion-name-mobile-font-size:
            11.5px;

        --occasion-link-font-size:
            10px;

        --occasions-mobile-column-gap:
            8px;

        --occasions-mobile-row-gap:
            8px;
    }
}


/* ==========================================================
07 — RESET
========================================================== */

.valirina-occasions,
.valirina-occasions *,
.valirina-occasions *::before,
.valirina-occasions *::after {

    box-sizing:
        border-box;
}


/* ==========================================================
08 — SECTION
========================================================== */

.valirina-occasions {

    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    gap:
        var(--occasions-section-gap) !important;

    width:
        calc(
            100% - (var(--occasions-padding-x) * 2)
        ) !important;

    max-width:
        var(--occasions-max-width) !important;

    margin:
        0 auto !important;

    padding:
        var(--occasions-padding-top)
        0
        var(--occasions-padding-bottom) !important;

    overflow:
        visible !important;
}


.valirina-occasions
> .e-con-inner {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    gap:
        var(--occasions-section-gap) !important;

    width:
        100% !important;

    max-width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
09 — HEADER
========================================================== */

.valirina-occasions
.occasions-header,
.valirina-occasions
.occasions-header > .e-con-inner {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    gap:
        var(--occasions-header-gap) !important;

    width:
        100% !important;

    max-width:
        var(--occasions-header-max-width) !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
10 — TITLE
========================================================== */

.valirina-occasions
.occasions-title {

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-occasions
.occasions-title
.elementor-heading-title {

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--occasions-title-color) !important;

    font-family:
        var(--valirina-editorial-font) !important;

    font-size:
        var(--occasions-title-font-size) !important;

    font-weight:
        var(--occasions-title-font-weight) !important;

    line-height:
        var(--occasions-title-line-height) !important;

    letter-spacing:
        var(--occasions-title-letter-spacing) !important;

    text-wrap:
        balance;
}


.valirina-occasions
.occasions-title
.elementor-heading-title span,
.valirina-occasions
.occasions-title span {

    color:
        var(--occasions-title-accent-color) !important;

    font-family:
        inherit !important;

    font-size:
        inherit !important;

    font-weight:
        inherit !important;

    line-height:
        inherit !important;

    letter-spacing:
        inherit !important;

    font-style:
        normal !important;
}


/* ==========================================================
11 — DESCRIPTION
========================================================== */

.valirina-occasions
.occasions-description {

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-occasions
.occasions-description,
.valirina-occasions
.occasions-description p {

    color:
        var(--occasions-description-color) !important;

    font-size:
        var(--occasions-description-font-size) !important;

    line-height:
        var(--occasions-description-line-height) !important;
}


.valirina-occasions
.occasions-description p {

    margin:
        0 !important;
}


/* ==========================================================
12 — CAROUSEL VIEWPORT
========================================================== */

.valirina-occasions
.occasions-carousel {

    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    cursor:
        grab;

    touch-action:
        pan-y;
}


.valirina-occasions
.occasions-carousel.is-dragging {

    cursor:
        grabbing;
}


.valirina-occasions
.occasions-carousel > .e-con-inner {

    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;
}


/* ==========================================================
13 — TRACK
========================================================== */

.valirina-occasions
.occasions-track {

    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;
}


.valirina-occasions
.occasions-track > .e-con-inner {

    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        stretch !important;

    gap:
        var(--occasions-page-gap) !important;

    width:
        100% !important;

    min-width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    will-change:
        transform;
}


.valirina-occasions
.occasions-track:not(:has(> .e-con-inner)) {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        stretch !important;

    gap:
        var(--occasions-page-gap) !important;

    max-width:
        none !important;

    will-change:
        transform;
}


/* ==========================================================
14 — VIRTUAL PAGE
========================================================== */

.valirina-occasions
.occasions-page {

    position:
        relative !important;

    flex:
        0 0 100% !important;

    width:
        100% !important;

    min-width:
        100% !important;

    max-width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;
}


/* ==========================================================
15 — DESKTOP PAGE
========================================================== */

@media (min-width: 1025px) {

    .valirina-occasions
    .occasions-page {

        display:
            grid !important;

        height:
            var(--occasions-desktop-page-height) !important;

        min-height:
            var(--occasions-desktop-page-height) !important;

        grid-template-columns:
            repeat(
                var(--occasions-desktop-columns),
                minmax(0, 1fr)
            ) !important;

        grid-template-rows:
            repeat(
                var(--occasions-desktop-rows),
                minmax(0, 1fr)
            ) !important;

        column-gap:
            var(--occasions-desktop-column-gap) !important;

        row-gap:
            var(--occasions-desktop-row-gap) !important;
    }
}


/* ==========================================================
16 — CARD BASE
========================================================== */

.valirina-occasions
.occasion-card {

    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    height:
        100% !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        var(--occasion-card-padding) !important;

    border:
        none !important;

    border-radius:
        var(--occasion-card-radius) !important;

    background:
        var(--occasion-bg-1);

    box-shadow:
        none !important;

    overflow:
        hidden !important;

    isolation:
        isolate;

    cursor:
        pointer;

    transition:
        transform
        var(--occasion-card-transition-duration)
        var(--occasion-card-transition-easing);
}


.valirina-occasions
.occasion-card > .e-con-inner {

    position:
        static !important;

    display:
        contents !important;
}


/* ==========================================================
17 — AUTOMATIC BACKGROUND COLORS
========================================================== */

.valirina-occasions
.occasion-card:nth-child(6n + 1) {

    background:
        var(--occasion-bg-1);
}

.valirina-occasions
.occasion-card:nth-child(6n + 2) {

    background:
        var(--occasion-bg-2);
}

.valirina-occasions
.occasion-card:nth-child(6n + 3) {

    background:
        var(--occasion-bg-3);
}

.valirina-occasions
.occasion-card:nth-child(6n + 4) {

    background:
        var(--occasion-bg-4);
}

.valirina-occasions
.occasion-card:nth-child(6n + 5) {

    background:
        var(--occasion-bg-5);
}

.valirina-occasions
.occasion-card:nth-child(6n + 6) {

    background:
        var(--occasion-bg-6);
}


/* ==========================================================
18 — MANUAL BACKGROUND COLORS
========================================================== */

.valirina-occasions
.occasion-card.occasion-bg-1 {

    background:
        var(--occasion-bg-1) !important;
}

.valirina-occasions
.occasion-card.occasion-bg-2 {

    background:
        var(--occasion-bg-2) !important;
}

.valirina-occasions
.occasion-card.occasion-bg-3 {

    background:
        var(--occasion-bg-3) !important;
}

.valirina-occasions
.occasion-card.occasion-bg-4 {

    background:
        var(--occasion-bg-4) !important;
}

.valirina-occasions
.occasion-card.occasion-bg-5 {

    background:
        var(--occasion-bg-5) !important;
}

.valirina-occasions
.occasion-card.occasion-bg-6 {

    background:
        var(--occasion-bg-6) !important;
}


/* ==========================================================
19 — CARD CONTENT
========================================================== */

.valirina-occasions
.occasion-content {

    position:
        relative !important;

    z-index:
        3;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    gap:
        var(--occasion-content-gap) !important;

    width:
        auto !important;

    max-width:
        var(--occasion-content-max-width) !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
20 — CARD NAME
========================================================== */

.valirina-occasions
.occasion-name {

    width:
        auto !important;

    max-width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-occasions
.occasion-name
.elementor-heading-title {

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--occasion-name-color) !important;

    font-family:
        var(--valirina-editorial-font) !important;

    font-size:
        var(--occasion-name-font-size) !important;

    font-weight:
        var(--occasion-name-font-weight) !important;

    line-height:
        var(--occasion-name-line-height) !important;

    letter-spacing:
        var(--occasion-name-letter-spacing) !important;
}


@media (max-width: 767px) {

    .valirina-occasions
    .occasion-name {

        width:
            100% !important;

        max-width:
            100% !important;
    }


    .valirina-occasions
    .occasion-name
    .elementor-heading-title {

        white-space:
            nowrap !important;

        overflow:
            visible !important;

        word-break:
            normal !important;

        overflow-wrap:
            normal !important;

        hyphens:
            none !important;
    }
}


/* ==========================================================
21 — CARD LINK — "DÉCOUVRIR"
========================================================== */

.valirina-occasions
.occasion-link,
.valirina-occasions
.occasion-link p,
.valirina-occasions
.occasion-link a {

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--occasion-link-color) !important;

    font-size:
        var(--occasion-link-font-size) !important;

    font-weight:
        var(--occasion-link-font-weight) !important;

    line-height:
        var(--occasion-link-line-height) !important;

    text-decoration:
        underline !important;

    text-underline-offset:
        3px;
}


/* ==========================================================
22 — CARD IMAGE
========================================================== */

.valirina-occasions
.occasion-image {

    position:
        absolute !important;

    z-index:
        1;

    right:
        var(--occasion-image-right) !important;

    bottom:
        var(--occasion-image-bottom) !important;

    width:
        var(--occasion-image-width) !important;

    max-width:
        var(--occasion-image-width) !important;

    height:
        var(--occasion-image-height) !important;

    max-height:
        var(--occasion-image-height) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    pointer-events:
        none;

    transform-origin:
        var(--occasion-image-transform-origin) !important;

    transition:
        transform
        var(--occasion-image-transition-duration)
        var(--occasion-card-transition-easing);
}


.valirina-occasions
.occasion-image
.elementor-widget-container {

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-occasions
.occasion-image img {

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    object-fit:
        contain !important;

    object-position:
        100% 100% !important;
}


/* ==========================================================
23 — CARD HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

    .valirina-occasions
    .occasion-card:hover {

        transform:
            translate3d(
                0,
                var(--occasion-card-hover-y),
                0
            )
            scale(
                var(--occasion-card-hover-scale)
            );
    }


    .valirina-occasions
    .occasion-card:hover
    .occasion-image {

        transform:
            scale(
                var(--occasion-image-hover-scale)
            );
    }
}


/* ==========================================================
24 — DESKTOP COL START
========================================================== */

.valirina-occasions .col-1  { --col-start: 1; }
.valirina-occasions .col-2  { --col-start: 2; }
.valirina-occasions .col-3  { --col-start: 3; }
.valirina-occasions .col-4  { --col-start: 4; }
.valirina-occasions .col-5  { --col-start: 5; }
.valirina-occasions .col-6  { --col-start: 6; }
.valirina-occasions .col-7  { --col-start: 7; }
.valirina-occasions .col-8  { --col-start: 8; }
.valirina-occasions .col-9  { --col-start: 9; }
.valirina-occasions .col-10 { --col-start: 10; }
.valirina-occasions .col-11 { --col-start: 11; }
.valirina-occasions .col-12 { --col-start: 12; }


/* ==========================================================
25 — DESKTOP COL SPAN
========================================================== */

.valirina-occasions .span-1  { --col-span: 1; }
.valirina-occasions .span-2  { --col-span: 2; }
.valirina-occasions .span-3  { --col-span: 3; }
.valirina-occasions .span-4  { --col-span: 4; }
.valirina-occasions .span-5  { --col-span: 5; }
.valirina-occasions .span-6  { --col-span: 6; }
.valirina-occasions .span-7  { --col-span: 7; }
.valirina-occasions .span-8  { --col-span: 8; }
.valirina-occasions .span-9  { --col-span: 9; }
.valirina-occasions .span-10 { --col-span: 10; }
.valirina-occasions .span-11 { --col-span: 11; }
.valirina-occasions .span-12 { --col-span: 12; }


/* ==========================================================
26 — DESKTOP ROW START
========================================================== */

.valirina-occasions .row-1 { --row-start: 1; }
.valirina-occasions .row-2 { --row-start: 2; }
.valirina-occasions .row-3 { --row-start: 3; }
.valirina-occasions .row-4 { --row-start: 4; }


/* ==========================================================
27 — DESKTOP ROW SPAN
========================================================== */

.valirina-occasions .rowspan-1 { --row-span: 1; }
.valirina-occasions .rowspan-2 { --row-span: 2; }
.valirina-occasions .rowspan-3 { --row-span: 3; }
.valirina-occasions .rowspan-4 { --row-span: 4; }


/* ==========================================================
28 — APPLY DESKTOP GEOMETRY
========================================================== */

@media (min-width: 1025px) {

    .valirina-occasions
    .occasions-page
    > .occasion-card {

        grid-column:
            var(--col-start, auto)
            /
            span
            var(--col-span, 1) !important;

        grid-row:
            var(--row-start, auto)
            /
            span
            var(--row-span, 1) !important;
    }
}


/* ==========================================================
29 — TABLET AUTOMATIC MOSAIC
20 ROW SYSTEM
========================================================== */

@media (max-width: 1024px) and (min-width: 768px) {

    .valirina-occasions
    .occasions-page {

        display:
            grid !important;

        height:
            var(--occasions-tablet-page-height) !important;

        min-height:
            var(--occasions-tablet-page-height) !important;

        grid-template-columns:
            repeat(
                var(--occasions-tablet-columns),
                minmax(0, 1fr)
            ) !important;

        grid-template-rows:
            repeat(
                20,
                minmax(0, 1fr)
            ) !important;

        column-gap:
            var(--occasions-tablet-column-gap) !important;

        row-gap:
            0 !important;
    }


    .valirina-occasions
    .occasions-page
    > .occasion-card {

        grid-column:
            auto !important;

        grid-row:
            auto !important;
    }


    /* COLUMN 1 */

    .valirina-occasions
    .occasions-page
    > .occasion-card:nth-child(1) {

        grid-column:
            1 / span 1 !important;

        grid-row:
            1 /
            span
            var(--occasions-large-card-ratio) !important;

        margin-bottom:
            calc(
                var(--occasions-tablet-row-gap) / 2
            ) !important;
    }


    .valirina-occasions
    .occasions-page
    > .occasion-card:nth-child(2) {

        grid-column:
            1 / span 1 !important;

        grid-row:
            calc(
                var(--occasions-large-card-ratio) + 1
            )
            /
            span
            var(--occasions-small-card-ratio) !important;

        margin-top:
            calc(
                var(--occasions-tablet-row-gap) / 2
            ) !important;
    }


    /* COLUMN 2 */

    .valirina-occasions
    .occasions-page
    > .occasion-card:nth-child(3) {

        grid-column:
            2 / span 1 !important;

        grid-row:
            1 /
            span
            var(--occasions-small-card-ratio) !important;

        margin-bottom:
            calc(
                var(--occasions-tablet-row-gap) / 2
            ) !important;
    }


    .valirina-occasions
    .occasions-page
    > .occasion-card:nth-child(4) {

        grid-column:
            2 / span 1 !important;

        grid-row:
            calc(
                var(--occasions-small-card-ratio) + 1
            )
            /
            span
            var(--occasions-large-card-ratio) !important;

        margin-top:
            calc(
                var(--occasions-tablet-row-gap) / 2
            ) !important;
    }


    /* COLUMN 3 */

    .valirina-occasions
    .occasions-page
    > .occasion-card:nth-child(5) {

        grid-column:
            3 / span 1 !important;

        grid-row:
            1 /
            span
            var(--occasions-large-card-ratio) !important;

        margin-bottom:
            calc(
                var(--occasions-tablet-row-gap) / 2
            ) !important;
    }


    .valirina-occasions
    .occasions-page
    > .occasion-card:nth-child(6) {

        grid-column:
            3 / span 1 !important;

        grid-row:
            calc(
                var(--occasions-large-card-ratio) + 1
            )
            /
            span
            var(--occasions-small-card-ratio) !important;

        margin-top:
            calc(
                var(--occasions-tablet-row-gap) / 2
            ) !important;
    }


    /* COLUMN 4 */

    .valirina-occasions
    .occasions-page
    > .occasion-card:nth-child(7) {

        grid-column:
            4 / span 1 !important;

        grid-row:
            1 /
            span
            var(--occasions-small-card-ratio) !important;

        margin-bottom:
            calc(
                var(--occasions-tablet-row-gap) / 2
            ) !important;
    }


    .valirina-occasions
    .occasions-page
    > .occasion-card:nth-child(8) {

        grid-column:
            4 / span 1 !important;

        grid-row:
            calc(
                var(--occasions-small-card-ratio) + 1
            )
            /
            span
            var(--occasions-large-card-ratio) !important;

        margin-top:
            calc(
                var(--occasions-tablet-row-gap) / 2
            ) !important;
    }
}


/* ==========================================================
30 — MOBILE AUTOMATIC MOSAIC
20 ROW SYSTEM
========================================================== */

@media (max-width: 767px) {

    .valirina-occasions
    .occasions-page {

        display:
            grid !important;

        height:
            var(--occasions-mobile-page-height) !important;

        min-height:
            var(--occasions-mobile-page-height) !important;

        grid-template-columns:
            repeat(
                var(--occasions-mobile-columns),
                minmax(0, 1fr)
            ) !important;

        grid-template-rows:
            repeat(
                20,
                minmax(0, 1fr)
            ) !important;

        column-gap:
            var(--occasions-mobile-column-gap) !important;

        row-gap:
            0 !important;
    }


    .valirina-occasions
    .occasions-page
    > .occasion-card {

        grid-column:
            auto !important;

        grid-row:
            auto !important;
    }


    /* COLUMN 1 */

    .valirina-occasions
    .occasions-page
    > .occasion-card:nth-child(1) {

        grid-column:
            1 / span 1 !important;

        grid-row:
            1 /
            span
            var(--occasions-large-card-ratio) !important;

        margin-bottom:
            calc(
                var(--occasions-mobile-row-gap) / 2
            ) !important;
    }


    .valirina-occasions
    .occasions-page
    > .occasion-card:nth-child(2) {

        grid-column:
            1 / span 1 !important;

        grid-row:
            calc(
                var(--occasions-large-card-ratio) + 1
            )
            /
            span
            var(--occasions-small-card-ratio) !important;

        margin-top:
            calc(
                var(--occasions-mobile-row-gap) / 2
            ) !important;
    }


    /* COLUMN 2 */

    .valirina-occasions
    .occasions-page
    > .occasion-card:nth-child(3) {

        grid-column:
            2 / span 1 !important;

        grid-row:
            1 /
            span
            var(--occasions-small-card-ratio) !important;

        margin-bottom:
            calc(
                var(--occasions-mobile-row-gap) / 2
            ) !important;
    }


    .valirina-occasions
    .occasions-page
    > .occasion-card:nth-child(4) {

        grid-column:
            2 / span 1 !important;

        grid-row:
            calc(
                var(--occasions-small-card-ratio) + 1
            )
            /
            span
            var(--occasions-large-card-ratio) !important;

        margin-top:
            calc(
                var(--occasions-mobile-row-gap) / 2
            ) !important;
    }


    /* COLUMN 3 */

    .valirina-occasions
    .occasions-page
    > .occasion-card:nth-child(5) {

        grid-column:
            3 / span 1 !important;

        grid-row:
            1 /
            span
            var(--occasions-large-card-ratio) !important;

        margin-bottom:
            calc(
                var(--occasions-mobile-row-gap) / 2
            ) !important;
    }


    .valirina-occasions
    .occasions-page
    > .occasion-card:nth-child(6) {

        grid-column:
            3 / span 1 !important;

        grid-row:
            calc(
                var(--occasions-large-card-ratio) + 1
            )
            /
            span
            var(--occasions-small-card-ratio) !important;

        margin-top:
            calc(
                var(--occasions-mobile-row-gap) / 2
            ) !important;
    }
}


/* ==========================================================
31 — NAVIGATION
========================================================== */

.valirina-occasions
.occasions-navigation,
.valirina-occasions
.occasions-navigation > .e-con-inner {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        var(--occasions-navigation-gap) !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        var(--occasions-navigation-margin-top)
        0
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
32 — PROGRESS
========================================================== */

.valirina-occasions
.occasions-progress {

    position:
        relative !important;

    display:
        block !important;

    flex:
        1 1 auto !important;

    width:
        auto !important;

    min-width:
        0 !important;

    height:
        var(--occasions-progress-height) !important;

    min-height:
        var(--occasions-progress-height) !important;

    max-height:
        var(--occasions-progress-height) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border-radius:
        var(--occasions-progress-radius) !important;

    background:
        var(--occasions-progress-background) !important;

    overflow:
        hidden !important;
}


.valirina-occasions
.occasions-progress > .e-con-inner {

    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
33 — PROGRESS ACTIVE
========================================================== */

.valirina-occasions
.occasions-progress-bar {

    position:
        absolute !important;

    z-index:
        2;

    top:
        0 !important;

    left:
        0 !important;

    display:
        block !important;

    width:
        0%;

    height:
        100% !important;

    min-height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        none !important;

    border-radius:
        var(--occasions-progress-radius) !important;

    background:
        var(--occasions-progress-active) !important;

    pointer-events:
        none;

    transition:
        width
        420ms
        cubic-bezier(0.16, 1, 0.3, 1);
}


.valirina-occasions
.occasions-progress-bar > .e-con-inner {

    display:
        none !important;
}


/* ==========================================================
34 — CONTROLS
========================================================== */

.valirina-occasions
.occasions-controls,
.valirina-occasions
.occasions-controls > .e-con-inner {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    flex:
        0 0 auto !important;

    gap:
        var(--occasions-control-gap) !important;

    width:
        auto !important;

    max-width:
        max-content !important;

    margin:
        0 0 0 auto !important;

    padding:
        0 !important;
}


@media (max-width: 767px) {

    .valirina-occasions
    .occasions-navigation,
    .valirina-occasions
    .occasions-navigation > .e-con-inner {

        display:
            flex !important;

        flex-direction:
            row !important;

        flex-wrap:
            nowrap !important;

        align-items:
            center !important;

        justify-content:
            space-between !important;

        width:
            100% !important;
    }


    .valirina-occasions
    .occasions-progress {

        flex:
            1 1 auto !important;

        width:
            auto !important;

        min-width:
            0 !important;
    }


    .valirina-occasions
    .occasions-controls {

        flex:
            0 0 auto !important;

        width:
            auto !important;

        max-width:
            max-content !important;

        margin-left:
            auto !important;

        margin-right:
            0 !important;
    }


    .valirina-occasions
    .occasions-controls > .e-con-inner {

        flex:
            0 0 auto !important;

        width:
            auto !important;

        max-width:
            max-content !important;

        margin-left:
            auto !important;

        margin-right:
            0 !important;
    }
}


/* ==========================================================
35 — PREV / NEXT
========================================================== */

.valirina-occasions
.occasions-prev,
.valirina-occasions
.occasions-next {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex:
        0 0
        var(--occasions-control-size) !important;

    width:
        var(--occasions-control-size) !important;

    min-width:
        var(--occasions-control-size) !important;

    max-width:
        var(--occasions-control-size) !important;

    height:
        var(--occasions-control-size) !important;

    min-height:
        var(--occasions-control-size) !important;

    max-height:
        var(--occasions-control-size) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        1px solid
        var(--occasions-control-border) !important;

    border-radius:
        50% !important;

    background:
        var(--occasions-control-background) !important;

    color:
        var(--occasions-control-color) !important;

    box-shadow:
        none !important;

    cursor:
        pointer;

    overflow:
        hidden !important;

    transition:
        background
        var(--occasions-control-transition-duration)
        ease,
        color
        var(--occasions-control-transition-duration)
        ease,
        border-color
        var(--occasions-control-transition-duration)
        ease,
        opacity
        var(--occasions-control-transition-duration)
        ease,
        transform
        var(--occasions-control-transition-duration)
        ease;
}


/* ==========================================================
36 — CONTROL ICON RESET
========================================================== */

.valirina-occasions
.occasions-prev
.elementor-widget-container,
.valirina-occasions
.occasions-next
.elementor-widget-container,
.valirina-occasions
.occasions-prev
.elementor-icon-wrapper,
.valirina-occasions
.occasions-next
.elementor-icon-wrapper {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-occasions
.occasions-prev
.elementor-icon,
.valirina-occasions
.occasions-next
.elementor-icon {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        var(--occasions-control-icon-size) !important;

    height:
        var(--occasions-control-icon-size) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    font-size:
        var(--occasions-control-icon-size) !important;

    color:
        inherit !important;

    fill:
        currentColor !important;

    line-height:
        1 !important;
}


.valirina-occasions
.occasions-prev svg,
.valirina-occasions
.occasions-next svg {

    display:
        block !important;

    width:
        var(--occasions-control-icon-size) !important;

    height:
        var(--occasions-control-icon-size) !important;

    fill:
        currentColor !important;

    stroke:
        currentColor !important;
}


/* ==========================================================
37 — DISABLED CONTROL
========================================================== */

.valirina-occasions
.occasions-prev.is-disabled,
.valirina-occasions
.occasions-next.is-disabled {

    opacity:
        var(--occasions-control-disabled-opacity) !important;

    background:
        var(--occasions-control-background) !important;

    color:
        var(--occasions-control-color) !important;

    border-color:
        var(--occasions-control-border) !important;

    pointer-events:
        none;
}


/* ==========================================================
38 — CONTROL HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

    .valirina-occasions
    .occasions-prev:not(.is-disabled):hover,
    .valirina-occasions
    .occasions-next:not(.is-disabled):hover {

        background:
            var(--occasions-control-hover-background) !important;

        color:
            var(--occasions-control-hover-color) !important;

        border-color:
            var(--occasions-control-hover-background) !important;

        transform:
            translateY(-1px);
    }
}


/* ==========================================================
39 — FOOTER
========================================================== */

.valirina-occasions
.occasions-footer {

    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        row !important;

    align-items:
        center !important;

    justify-content:
        var(--occasions-footer-align) !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    margin-top:
        calc(
            var(--occasions-footer-margin-top)
            - var(--occasions-section-gap)
        ) !important;

    margin-right:
        0 !important;

    margin-bottom:
        0 !important;

    margin-left:
        0 !important;

    padding:
        0 !important;
}


.valirina-occasions
.occasions-footer > .e-con-inner {

    display:
        flex !important;

    flex-direction:
        row !important;

    align-items:
        center !important;

    justify-content:
        var(--occasions-footer-align) !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
40 — CTA WIDGET
========================================================== */

.valirina-occasions
.occasions-all-button {

    display:
        inline-flex !important;

    flex:
        0 0 auto !important;

    width:
        auto !important;

    max-width:
        max-content !important;

    margin:
        0 !important;

    padding:
        0 !important;

    align-self:
        center !important;
}


.valirina-occasions
.occasions-all-button
.elementor-widget-container {

    display:
        inline-flex !important;

    width:
        auto !important;

    max-width:
        max-content !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
41 — CTA BUTTON
========================================================== */

.valirina-occasions
.occasions-all-button
.elementor-button {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        max-content !important;

    height:
        var(--occasions-button-height) !important;

    min-height:
        var(--occasions-button-height) !important;

    margin:
        0 !important;

    padding:
        0
        var(--occasions-button-padding-x) !important;

    border:
        1px solid
        var(--occasions-button-border) !important;

    border-radius:
        var(--occasions-button-radius) !important;

    background:
        var(--occasions-button-background) !important;

    color:
        var(--occasions-button-color) !important;

    font-size:
        var(--occasions-button-font-size) !important;

    font-weight:
        var(--occasions-button-font-weight) !important;

    line-height:
        1 !important;

    letter-spacing:
        var(--occasions-button-letter-spacing) !important;

    text-decoration:
        none !important;

    white-space:
        nowrap !important;

    box-shadow:
        none !important;

    cursor:
        pointer;

    transition:
        background
        var(--occasions-button-transition-duration)
        ease,
        color
        var(--occasions-button-transition-duration)
        ease,
        border-color
        var(--occasions-button-transition-duration)
        ease,
        transform
        var(--occasions-button-transition-duration)
        ease;
}


.valirina-occasions
.occasions-all-button
.elementor-button-text {

    color:
        inherit !important;

    font:
        inherit !important;

    line-height:
        1 !important;
}


/* ==========================================================
42 — CTA HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

    .valirina-occasions
    .occasions-all-button
    .elementor-button:hover {

        background:
            var(--occasions-button-hover-background) !important;

        color:
            var(--occasions-button-hover-color) !important;

        border-color:
            var(--occasions-button-hover-border) !important;

        transform:
            translateY(-2px);
    }
}


/* ==========================================================
43 — DRAG
========================================================== */

.valirina-occasions
.occasions-carousel.is-dragging
.occasion-card {

    pointer-events:
        none;
}


/* ==========================================================
44 — PAGE START
========================================================== */

.valirina-occasions
.occasion-page-start {

    /*
     * Semantic JS marker.
     */
}


/* ==========================================================
45 — REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .valirina-occasions *,
    .valirina-occasions *::before,
    .valirina-occasions *::after {

        transition:
            none !important;

        animation:
            none !important;
    }
}