/* =========================================================
   DOORWAY SOLUTION
   PRODUCTS PAGE
========================================================= */


/* =========================================================
   01. VARIABLES
========================================================= */

:root {

    --brand-blue: #3f4198;
    --brand-blue-light: #5558bd;
    --brand-blue-dark: #292b72;

    --charcoal: #242124;

    --white: #ffffff;

    --light: #f5f5f7;
    --light-alt: #eeeeF2;

    --text-muted: #6d6e77;

    --border:
        rgba(36, 33, 36, .12);

    --heading:
        "Manrope",
        sans-serif;

    --body:
        "Inter",
        sans-serif;

    --container:
        1400px;

    --mobile-padding:
        17px;
}



/* =========================================================
   02. RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    overflow-x: hidden;

    color:
        var(--charcoal);

    background:
        var(--light);

    font-family:
        var(--body);

    -webkit-font-smoothing:
        antialiased;
}


img {
    display: block;

    max-width: 100%;
}


figure {
    margin: 0;
}


a {
    color: inherit;

    text-decoration: none;
}


button {
    font: inherit;
}



/* =========================================================
   03. MAIN CONTAINER
========================================================= */

.products-container {

    width:
        min(
            calc(100% - 64px),
            var(--container)
        );

    margin:
        0 auto;
}



/* =========================================================
   04. PRODUCTS HERO
========================================================= */

.products-hero {

    position: relative;

    min-height:
        72vh;

    padding:
        180px 0
        105px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 24%,
            rgba(63, 65, 152, .09),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #f7f7f9 0%,
            #eeeeF2 100%
        );
}



/* subtle architectural grid */

.products-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .45;

    background-image:
        linear-gradient(
            rgba(36, 33, 36, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(36, 33, 36, .025) 1px,
            transparent 1px
        );

    background-size:
        90px 90px;
}



/* subtle blue accent */

.products-hero::after {

    content: "";

    position: absolute;

    top: 0;
    right: 9%;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            transparent,
            rgba(63, 65, 152, .13),
            transparent
        );
}



/* =========================================================
   05. HERO CONTENT
========================================================= */

.products-hero-content {

    position: relative;

    z-index: 2;

    max-width:
        920px;
}



/* eyebrow */

.products-eyebrow {

    display: flex;

    align-items: center;

    gap: 13px;

    color:
        var(--brand-blue);
}


.products-eyebrow > span {

    width: 36px;
    height: 1px;

    background:
        var(--brand-blue);
}


.products-eyebrow strong {

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;
}



/* hero heading */

.products-hero h1 {

    max-width:
        950px;

    margin:
        45px 0 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            64px,
            7.3vw,
            112px
        );

    font-weight:
        500;

    line-height:
        .90;

    letter-spacing:
        -.065em;
}


.products-hero h1 span {

    display: block;

    color:
        var(--brand-blue);
}



/* hero text */

.products-hero p {

    max-width:
        570px;

    margin:
        35px 0 0;

    color:
        var(--text-muted);

    font-size:
        17px;

    line-height:
        1.7;
}



/* explore link */

.products-hero-link {

    width:
        min(
            100%,
            260px
        );

    margin-top:
        38px;

    padding-bottom:
        13px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        rgba(36, 33, 36, .18);

    font-size:
        13px;

    font-weight:
        600;

    transition:
        color .25s ease,
        border-color .25s ease;
}


.products-hero-link strong {

    color:
        var(--brand-blue);

    font-size:
        17px;

    transition:
        transform .25s ease;
}


.products-hero-link:hover {

    color:
        var(--brand-blue);

    border-color:
        var(--brand-blue);
}


.products-hero-link:hover strong {

    transform:
        translateY(4px);
}

/* =========================================================
   PRODUCT SHOWCASE
========================================================= */

.product-showcase {
    width: 100%;
}



/* =========================================================
   CONTAINER
========================================================= */

.products-container {
    width:
        min(
            calc(100% - 64px),
            1380px
        );

    margin:
        0 auto;
}



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

.product-section {
    position: relative;

    padding:
        100px 0;

    background:
        #ffffff;
}


.product-section-alt {
    background:
        #f5f5f7;
}



/* =========================================================
   SMALL PRODUCT LABEL
========================================================= */

.product-section-kicker {
    margin-bottom:
        32px;

    color:
        var(--brand-blue, #3f4198);

    font-family:
    var(--body);

    font-size:
        14px;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}



/* =========================================================
   DESKTOP LAYOUT

   LEFT:
   TITLE + DESCRIPTION

   RIGHT:
   GALLERY
========================================================= */

.product-section-layout {
    display: grid;

    grid-template-columns:
        minmax(280px, .52fr)
        minmax(0, 1.48fr);

    grid-template-areas:
        "title gallery"
        "description gallery";

    grid-template-rows:
        auto auto;

    column-gap:
        clamp(
            55px,
            6vw,
            100px
        );

    row-gap:
        25px;

    align-items:
        center;
}



/* =========================================================
   TITLE
========================================================= */

.product-section-title {
    grid-area:
        title;

    align-self:
        end;

    max-width:
        430px;

    margin:
        0;

    color:
        var(--charcoal, #242124);

    font-family:
    var(--heading);

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

    font-weight:
        500;

    line-height:
        .96;

    letter-spacing:
        -.055em;
}



/* =========================================================
   DESCRIPTION
========================================================= */

.product-section-description {
    grid-area:
        description;

    align-self:
        start;

    max-width:
        390px;

    margin:
        0;

    color:
        var(--text-muted, #6d6e77);

    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        17px;

    line-height:
        1.75;
}



/* =========================================================
   GALLERY
========================================================= */

.product-gallery {
    grid-area:
        gallery;

    width:
        100%;

    min-width:
        0;

    overflow:
        hidden;

    background:
        #eeeeF2;

    border:
        1px solid
        rgba(36, 33, 36, .08);
}



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

   1920 x 1200 = 16:10
========================================================= */

.product-gallery-media {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;

    background:
        #eeeeF2;
}



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

.product-gallery-slides {
    position:
        absolute;

    inset:
        0;
}



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

.product-gallery-slide {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    margin:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .5s ease,
        visibility .5s ease;
}


.product-gallery-slide.active {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}



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

   IMPORTANT:
   CONTAIN = NEVER CROP THE IMAGE
========================================================= */

.product-gallery-slide img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;

    object-position:
        center;

    transform:
        none !important;
}



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

.product-gallery-controls {
    min-height:
        66px;

    padding:
        0 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    background:
        #ffffff;

    border-top:
        1px solid
        rgba(36, 33, 36, .09);
}



/* =========================================================
   COUNTER
========================================================= */

.product-gallery-counter {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--charcoal, #242124);

    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .08em;
}


.product-gallery-counter span:nth-child(2),
.product-gallery-counter [data-total] {
    color:
        rgba(36, 33, 36, .40);
}



/* =========================================================
   ARROWS
========================================================= */

.product-gallery-arrows {
    display:
        flex;

    gap:
        6px;
}


.product-gallery-arrows button {
    width:
        42px;

    height:
        42px;

    padding:
        0;

    display:
        grid;

    place-items:
        center;

    color:
        var(--charcoal, #242124);

    background:
        #f5f5f7;

    border:
        1px solid
        rgba(36, 33, 36, .12);

    cursor:
        pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


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

    .product-gallery-arrows button:hover {
        color:
            #ffffff;

        background:
            var(--brand-blue, #3f4198);

        border-color:
            var(--brand-blue, #3f4198);
    }


    .product-gallery-arrows button:active {
        transform:
            scale(.94);
    }

}



/* =========================================================
   TABLET
   768px - 1024px

   TITLE
   GALLERY
   DESCRIPTION
========================================================= */

@media (max-width: 1024px) {

    .products-container {
        width:
            min(
                calc(100% - 48px),
                900px
            );
    }


    .product-section {
        padding:
            80px 0;
    }


    .product-section-kicker {
        margin-bottom:
            28px;
    }


    .product-section-layout {
        display:
            grid;

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

        grid-template-areas:
            "title"
            "gallery"
            "description";

        row-gap:
            28px;
    }


    .product-section-title {
        width:
            100%;

        max-width:
            700px;
    }


    .product-section-description {
        width:
            100%;

        max-width:
            650px;
    }


    .product-gallery {
        width:
            100%;
    }


    .product-gallery-media {
        aspect-ratio:
            16 / 10;
    }

}



/* =========================================================
   MOBILE
   UP TO 767px
========================================================= */

@media (max-width: 767px) {

    .products-container {
        width:
            calc(
                100% - 34px
            );
    }


    .product-section {
        padding:
            64px 0;
    }


    .product-section-kicker {
        margin-bottom:
            23px;
    }


    .product-section-layout {
        grid-template-areas:
            "title"
            "gallery"
            "description";

        row-gap:
            24px;
    }


    .product-section-title {
        width:
            100%;

        max-width:
            none;
    }


    .product-gallery {
        width:
            100%;
    }


    /*
       Keep 16:10 here too.

       So 1920 × 1200 source images
       keep exactly the same ratio.
    */

    .product-gallery-media {
        aspect-ratio:
            16 / 10;
    }


    .product-gallery-controls {
        min-height:
            58px;

        padding:
            0 11px;
    }


    .product-gallery-arrows {
        gap:
            5px;
    }


    .product-gallery-arrows button {
        width:
            38px;

        height:
            38px;
    }


    .product-section-description {
        width:
            100%;

        max-width:
            none;
    }

}



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

@media (max-width: 390px) {

    .products-container {
        width:
            calc(
                100% - 28px
            );
    }


    .product-gallery-controls {
        padding:
            0 9px;
    }


    .product-gallery-arrows button {
        width:
            36px;

        height:
            36px;
    }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .product-gallery-slide,
    .product-gallery-arrows button {
        transition:
            none !important;
    }

}
/* =========================================================
   17. CTA SECTION
========================================================= */

.products-cta {

    padding:
        120px 0;

    background:
        linear-gradient(
            145deg,
            #11131a 0%,
            #151823 52%,
            #0e1017 100%
        );

    color:
        #ffffff;
}



/* =========================================================
   18. CTA INNER
========================================================= */

.products-cta-inner {

    padding-top:
        34px;

    display: grid;

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

    align-items:
        end;

    gap:
        70px;

    border-top:
        1px solid
        rgba(255, 255, 255, .12);
}



/* label */

.products-cta-label {

    display: block;

    color:
        var(--brand-blue-light);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}



/* CTA heading */

.products-cta h2 {

    max-width:
        880px;

    margin:
        42px 0 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            55px,
            6vw,
            92px
        );

    font-weight:
        500;

    line-height:
        .94;

    letter-spacing:
        -.06em;
}


.products-cta h2 span {

    display: block;

    color:
        var(--brand-blue-light);
}



/* =========================================================
   19. CTA BUTTON
========================================================= */

.products-cta-button {

    min-width:
        240px;

    min-height:
        58px;

    padding:
        0 17px
        0 21px;

    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    background:
        var(--brand-blue);

    color:
        #ffffff;

    font-family:
        var(--heading);

    font-size:
        12px;

    font-weight:
        600;

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.products-cta-button strong {

    font-size:
        18px;

    font-weight:
        400;

    transition:
        transform .25s ease;
}


.products-cta-button:hover {

    background:
        var(--brand-blue-light);

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 35px
        rgba(0, 0, 0, .20);
}


.products-cta-button:hover strong {

    transform:
        translate(3px, -3px);
}



/* =========================================================
   20. TABLET
========================================================= */

@media (max-width: 1024px) {


    /* Hero */

    .products-hero {

        min-height:
            auto;

        padding:
            155px 0
            95px;
    }


    .products-hero h1 {

        font-size:
            clamp(
                65px,
                10vw,
                92px
            );
    }
    }