/* =========================================================
   ROOT
========================================================= */

:root {

    --amw-blue:
        #192f63;

    --amw-blue-dark:
        #10234d;

    --amw-blue-light:
        #294986;

    --amw-gold:
        #d8a83e;

    --amw-gold-light:
        #f0c96a;

    --amw-bg:
        #f5f7fb;

    --amw-white:
        #ffffff;

    --amw-border:
        #e7ebf2;

    --amw-text:
        #172033;

    --amw-muted:
        #6c7485;

    --amw-radius:
        22px;

    --amw-shadow:
        0 14px 40px
        rgba(16, 35, 77, 0.10);

}


/* =========================================================
   RESET
========================================================= */

* {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}


html {

    scroll-behavior:
        smooth;

}


body {

    min-height:
        100vh;

    background:
        var(--amw-bg);

    color:
        var(--amw-text);

    font-family:
        "DM Sans",
        sans-serif;

}


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

.promotion-page {

    width:
        100%;

}


/* =========================================================
   INTRO
========================================================= */

.promotion-intro {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        310px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        70px 30px;

    background:
        linear-gradient(
            135deg,
            var(--amw-blue-dark),
            var(--amw-blue)
        );

}


/* Décoration 1 */

.promotion-intro::before {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    border-radius:
        50%;

    background:
        rgba(216, 168, 62, 0.10);

    top:
        -240px;

    right:
        -100px;

}


/* Décoration 2 */

.promotion-intro::after {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255,255,255,0.12);

    bottom:
        -170px;

    left:
        -70px;

}


.promotion-intro-content {

    position:
        relative;

    z-index:
        2;

    width:
        min(900px, 100%);

    text-align:
        center;

}


.promotion-kicker {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        14px;

    color:
        var(--amw-gold-light);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        2.5px;

}


.promotion-intro h1 {

    color:
        var(--amw-white);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );

    line-height:
        1.05;

    margin-bottom:
        18px;

}


.promotion-intro p {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        rgba(255,255,255,0.78);

    font-size:
        17px;

    line-height:
        1.7;

}


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

.promotion-section {

    width:
        min(
            1450px,
            calc(100% - 50px)
        );

    margin:
        0 auto;

    padding:
        65px 0 90px;

}


/* =========================================================
   HEADING
========================================================= */

.promotion-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        32px;

}


.section-label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--amw-gold);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.promotion-heading h2 {

    color:
        var(--amw-blue-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            30px,
            4vw,
            44px
        );

}


.promotion-count {

    flex:
        0 0 auto;

    padding:
        10px 18px;

    border:
        1px solid
        var(--amw-border);

    border-radius:
        50px;

    background:
        var(--amw-white);

    color:
        var(--amw-blue);

    font-size:
        14px;

    font-weight:
        700;

}


/* =========================================================
   GRID
========================================================= */

.promotion-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        28px;

}


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

.promotion-link {

    display:
        block;

    color:
        inherit;

    text-decoration:
        none;

}


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

.promotion-card {

    position:
        relative;

    overflow:
        hidden;

    width:
        100%;

    min-height:
        390px;

    border:
        1px solid
        rgba(16, 35, 77, 0.08);

    border-radius:
        var(--amw-radius);

    background:
        var(--amw-white);

    box-shadow:
        var(--amw-shadow);

    isolation:
        isolate;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


.promotion-link:hover
.promotion-card {

    transform:
        translateY(-7px);

    box-shadow:
        0 24px 55px
        rgba(16, 35, 77, 0.17);

}


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

.promotion-image {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    min-height:
        390px;

    overflow:
        hidden;

    background:
        #e9edf4;

}


.promotion-image img {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    display:
        block;

    transition:
        transform 0.7s
        cubic-bezier(
            .2,
            .7,
            .2,
            1
        );

}


.promotion-link:hover
.promotion-image img {

    transform:
        scale(1.045);

}


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

.promotion-overlay {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    padding:
        30px;

    background:
        linear-gradient(
            to top,
            rgba(8, 18, 42, 0.92) 0%,
            rgba(8, 18, 42, 0.58) 35%,
            rgba(8, 18, 42, 0.05) 72%,
            transparent 100%
        );

}


.promotion-overlay-label {

    width:
        fit-content;

    margin-bottom:
        10px;

    padding:
        6px 11px;

    border-radius:
        6px;

    background:
        var(--amw-gold);

    color:
        var(--amw-blue-dark);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

}


.promotion-overlay-title {

    max-width:
        800px;

    color:
        var(--amw-white);

    font-size:
        clamp(
            22px,
            3vw,
            34px
        );

    font-weight:
        800;

    line-height:
        1.2;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,0.2);

}


.promotion-discover {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        16px;

    color:
        var(--amw-gold-light);

    font-size:
        14px;

    font-weight:
        700;

}


.promotion-discover i {

    font-size:
        12px;

    transition:
        transform 0.25s ease;

}


.promotion-link:hover
.promotion-discover i {

    transform:
        translateX(5px);

}


/* =========================================================
   PORTRAIT
========================================================= */

.promotion-card.ratio-portrait
.promotion-image {

    min-height:
        520px;

}


.promotion-card.ratio-square
.promotion-image {

    min-height:
        470px;

}


/* =========================================================
   LOADING
========================================================= */

.promotion-loading {

    min-height:
        400px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    color:
        var(--amw-muted);

    font-size:
        14px;

}


.loading-spinner {

    width:
        42px;

    height:
        42px;

    border:
        3px solid
        var(--amw-border);

    border-top-color:
        var(--amw-blue);

    border-radius:
        50%;

    animation:
        promotionSpin
        0.8s linear infinite;

}


@keyframes promotionSpin {

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   EMPTY
========================================================= */

.promotion-empty {

    min-height:
        420px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        40px;

}


.empty-icon {

    width:
        75px;

    height:
        75px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        20px;

    border-radius:
        50%;

    background:
        rgba(216,168,62,0.12);

    color:
        var(--amw-gold);

    font-size:
        28px;

}


.promotion-empty h3 {

    margin-bottom:
        9px;

    color:
        var(--amw-blue-dark);

    font-size:
        22px;

}


.promotion-empty p {

    max-width:
        500px;

    color:
        var(--amw-muted);

    line-height:
        1.7;

}


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

.promotion-image img.image-error {

    opacity:
        0;

}


.promotion-image:has(
    img.image-error
)::after {

    content:
        "Image indisponible";

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--amw-muted);

    font-size:
        14px;

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .promotion-section {

        width:
            min(
                100% - 32px,
                700px
            );

        padding-top:
            50px;

    }


    .promotion-grid {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .promotion-card,
    .promotion-image {

        min-height:
            420px;

    }


    .promotion-card.ratio-portrait
    .promotion-image {

        min-height:
            500px;

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (
    max-width: 600px
) {

    .promotion-intro {

        min-height:
            260px;

        padding:
            55px 20px;

    }


    .promotion-intro h1 {

        font-size:
            42px;

    }


    .promotion-intro p {

        font-size:
            15px;

    }


    .promotion-section {

        width:
            calc(100% - 24px);

        padding:
            38px 0 60px;

    }


    .promotion-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            16px;

        margin-bottom:
            22px;

    }


    .promotion-heading h2 {

        font-size:
            30px;

    }


    .promotion-count {

        font-size:
            13px;

    }


    .promotion-grid {

        gap:
            16px;

    }


    .promotion-card,
    .promotion-image {

        min-height:
            340px;

        border-radius:
            17px;

    }


    .promotion-card.ratio-portrait
    .promotion-image {

        min-height:
            450px;

    }


    .promotion-card.ratio-square
    .promotion-image {

        min-height:
            370px;

    }


    .promotion-overlay {

        padding:
            22px;

    }


    .promotion-overlay-title {

        font-size:
            22px;

    }


    .promotion-overlay-label {

        font-size:
            9px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
    max-width: 380px
) {

    .promotion-intro h1 {

        font-size:
            36px;

    }


    .promotion-card,
    .promotion-image {

        min-height:
            300px;

    }


    .promotion-card.ratio-portrait
    .promotion-image {

        min-height:
            390px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    html {

        scroll-behavior:
            auto;

    }


    .promotion-card,
    .promotion-image img,
    .promotion-discover i {

        transition:
            none;

    }


    .loading-spinner {

        animation:
            none;

    }

}