/* ==========================================================================
   PREMIUM SAFARI GEAR
   COFFEE / ESPRESSO PALETTE
   ========================================================================== */


/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {

    --gear-espresso: #21130d;
    --gear-dark-coffee: #2d1a12;
    --gear-coffee: #4a2c1d;
    --gear-roast: #633d28;
    --gear-caramel: #9a6845;
    --gear-copper: #b17a50;

    --gear-cream: #f6eee3;
    --gear-milk: #fbf7f1;
    --gear-oat: #e8dac9;
    --gear-sand: #d7c5b0;

    --gear-text: #2b1a12;
    --gear-muted: #806c5c;

    --gear-border:
        rgba(74, 44, 29, .16);

    --gear-shadow:
        0 22px 65px
        rgba(45, 26, 18, .13);

    --gear-shadow-hover:
        0 30px 85px
        rgba(45, 26, 18, .20);

}


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

.home-gear {
    position: relative;
    overflow: hidden;

    padding: clamp(80px, 9vw, 130px) 0;

    background: var(--gear-cream);
    color: var(--gear-text);
}


/* ==========================================================================
   BACKGROUND TEXTURE
   ========================================================================== */

.home-gear::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    opacity: 0.035;

    background-image:
        radial-gradient(
            rgba(45, 26, 18, 0.8) 0.5px,
            transparent 0.5px
        );

    background-size: 7px 7px;
}


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

.home-gear .home-container {
    position: relative;
    z-index: 1;
}


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

.home-gear .home-section-heading,
.home-gear-heading {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;
}


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

.home-gear-heading__left {
    flex: 1 1 auto;
    align-self: center;

    max-width: 680px;
}


/* ==========================================================================
   EYEBROW
   ========================================================================== */

.home-gear .home-eyebrow {
    margin: 0 0 15px;

    color: var(--gear-caramel);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
}


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

.home-gear-heading h2 {
    margin: 0;

    color: var(--gear-espresso);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(44px, 6vw, 78px);
    font-weight: 400;
    line-height: 0.94;

    letter-spacing: -0.055em;
    text-align: center;
}


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

.home-gear-heading__right {
    display: flex;

    align-items: flex-end;
    justify-content: flex-end;

    flex: 0 0 auto;

    max-width: 420px;
    gap: 28px;
}


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

.home-gear .home-section-heading__note {
    max-width: 260px;
    margin: 0;

    color: var(--gear-muted);

    font-size: 13px;
    line-height: 1.65;

    text-align: center;
}



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

.home-gear-controls {

    display: flex;

    gap: 7px;

    flex:
        0 0 auto;

}


.home-gear-control {

    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    flex:
        0 0 46px;

    padding: 0;

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

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, .35);

    color:
        var(--gear-coffee);

    font-family:
        inherit;

    font-size:
        18px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s
        cubic-bezier(.22, 1, .36, 1);

}


.home-gear-control:hover {

    border-color:
        var(--gear-espresso);

    background:
        var(--gear-espresso);

    color:
        var(--gear-cream);

    transform:
        translateY(-2px);

}


.home-gear-control:active {

    transform:
        scale(.94);

}


.home-gear-control:focus-visible {

    outline:
        2px solid
        var(--gear-caramel);

    outline-offset:
        4px;

}


.home-gear-control:disabled {

    opacity:
        .28;

    cursor:
        default;

    transform:
        none;

}


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

.home-gear-carousel {

    position: relative;

    z-index: 2;

    margin-top:
        clamp(
            40px,
            5vw,
            62px
        );

}


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

.home-gear-track {

    display: flex;

    gap:
        clamp(
            16px,
            2vw,
            26px
        );

    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    padding:
        16px
        max(
            20px,
            calc(
                (100vw - var(--home-container)) / 2
            )
        )
        40px;

    scrollbar-width:
        none;

    scroll-snap-type:
        none;

    scroll-behavior:
        auto;

    overscroll-behavior-x:
        contain;

    cursor:
        grab;

    touch-action:
        pan-y pinch-zoom;

    -webkit-overflow-scrolling:
        touch;

}


.home-gear-track::-webkit-scrollbar {

    display:
        none;

}


.home-gear-track.is-dragging {

    cursor:
        grabbing;

    scroll-behavior:
        auto;

    user-select:
        none;

}


.home-gear-track.is-dragging img {

    pointer-events:
        none;

}


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

.home-gear-card {

    position: relative;

    flex:
        0 0
        clamp(
            285px,
            29vw,
            375px
        );

    overflow: hidden;

    scroll-snap-align:
        center;

    border:
        1px solid
        rgba(74, 44, 29, .10);

    border-radius:
        5px;

    background:
        var(--gear-milk);

    box-shadow:
        0 12px 38px
        rgba(45, 26, 18, .07);

    color:
        var(--gear-text);

    opacity:
        .66;

    transform:
        scale(.965);

    transform-origin:
        center center;

    transition:
        transform .65s
        cubic-bezier(.22, 1, .36, 1),
        opacity .55s ease,
        box-shadow .55s ease;

}


.home-gear-card.is-active {

    opacity:
        1;

    transform:
        scale(1);

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

}


.home-gear-card:hover {

    box-shadow:
        var(--gear-shadow-hover);

}


.home-gear-card:focus {

    outline:
        none;

}


.home-gear-card:focus-visible {

    outline:
        2px solid
        var(--gear-caramel);

    outline-offset:
        4px;

}


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

.home-gear-card__image {

    position: relative;

    aspect-ratio:
        4 / 4.55;

    overflow: hidden;

    background:
        var(--gear-dark-coffee);

}


.home-gear-card__image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit:
        cover;

    transform:
        scale(1.001);

    transform-origin:
        center center;

    user-select:
        none;

    -webkit-user-drag:
        none;

    transition:
        transform 1.2s
        cubic-bezier(.16, 1, .3, 1);

}


.home-gear-card:hover
.home-gear-card__image img {

    transform:
        scale(1.055);

}


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

.home-gear-card__image::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(33, 19, 13, 0) 35%,
            rgba(33, 19, 13, .04) 50%,
            rgba(33, 19, 13, .68) 100%
        );

}


.home-gear-card__image::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(124, 78, 47, .12),
            transparent 45%
        );

    mix-blend-mode:
        multiply;

}


/* ==========================================================================
   WHATSAPP ACTION
   ========================================================================== */

.home-gear-card__action {

    position: absolute;

    z-index: 5;

    left: 20px;
    bottom: 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    min-height:
        39px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(255, 247, 236, .28);

    border-radius:
        999px;

    background:
        rgba(33, 19, 13, .56);

    color:
        #fff8ed;

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    cursor:
        pointer;

    user-select:
        none;

    transition:
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        transform .35s
        cubic-bezier(.22, 1, .36, 1);

}


.home-gear-card__action:hover {

    background:
        rgba(33, 19, 13, .82);

    border-color:
        rgba(255, 247, 236, .5);

    transform:
        translateY(-2px);

}


.home-gear-card__action:active {

    transform:
        scale(.96);

}


.home-gear-card__action:focus-visible {

    outline:
        2px solid
        #fff8ed;

    outline-offset:
        3px;

}


/*
 * Supports the optional icon from the original CSS.
 */

.home-gear-card__action-icon {

    display: grid;

    width:
        21px;

    height:
        21px;

    place-items:
        center;

    flex:
        0 0 21px;

    border-radius:
        50%;

    background:
        var(--gear-caramel);

    color:
        #fff8ed;

    font-size:
        12px;

    line-height:
        1;

    transition:
        background .35s ease,
        transform .35s ease;

}


.home-gear-card__action:hover
.home-gear-card__action-icon {

    background:
        var(--gear-copper);

    transform:
        rotate(8deg);

}


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

.home-gear-card__body {

    min-height:
        154px;

    padding:
        22px
        23px
        25px;

    background:
        var(--gear-milk);

}


.home-gear-card__body > div {

    min-width:
        0;

}


.home-gear-card__number {

    display:
        inline-block;

    margin-bottom:
        10px;

    color:
        var(--gear-caramel);

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        .17em;

}


.home-gear-card h3 {

    margin:
        0;

    color:
        var(--gear-espresso);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            23px,
            2.1vw,
            29px
        );

    font-weight:
        400;

    line-height:
        1.05;

    letter-spacing:
        -.035em;

}


.home-gear-card p {

    margin:
        11px 0 0;

    max-width:
        290px;

    color:
        var(--gear-muted);

    font-size:
        12px;

    line-height:
        1.6;

}


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

.home-gear-carousel__footer {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        22px;

    padding:
        0
        max(
            20px,
            calc(
                (100vw - var(--home-container)) / 2
            )
        );

}


.home-gear-progress {

    position:
        relative;

    flex:
        1 1 auto;

    height:
        1px;

    overflow:
        hidden;

    background:
        rgba(74, 44, 29, .14);

}


.home-gear-progress__bar {

    position:
        absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width:
        0;

    background:
        var(--gear-caramel);

    transition:
        width .55s
        cubic-bezier(.22, 1, .36, 1);

}


.home-gear-counter {

    min-width:
        48px;

    color:
        rgba(74, 44, 29, .52);

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        .16em;

    text-align:
        right;

}


/* ==========================================================================
   EDGE FADE
   ========================================================================== */

.home-gear-carousel::before,
.home-gear-carousel::after {

    content: "";

    position:
        absolute;

    z-index:
        8;

    top:
        0;

    bottom:
        35px;

    width:
        65px;

    pointer-events:
        none;

}


.home-gear-carousel::before {

    left:
        0;

    background:
        linear-gradient(
            90deg,
            var(--gear-cream),
            transparent
        );

}


.home-gear-carousel::after {

    right:
        0;

    background:
        linear-gradient(
            270deg,
            var(--gear-cream),
            transparent
        );

}


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

@media (max-width: 1100px) {

    .home-gear-heading {

        gap:
            35px;

    }


    .home-gear-heading__right {

        max-width:
            380px;

    }


    .home-gear-card {

        flex-basis:
            clamp(
                280px,
                34vw,
                350px
            );

    }

}


@media (max-width: 900px) {

    .home-gear {

        padding:
            82px 0;

    }


    .home-gear-heading {

        align-items:
            flex-start;

    }


    .home-gear-heading h2 {

        font-size:
            clamp(
                42px,
                7vw,
                60px
            );

    }


    .home-gear-heading__right {

        max-width:
            320px;

    }


    .home-gear-card {

        flex-basis:
            min(
                340px,
                42vw
            );

    }

}


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

@media (max-width: 700px) {

    .home-gear {

        padding:
            68px 0 72px;

    }


    .home-gear-heading {

        display:
            block;

    }


    .home-gear-heading h2 {

        font-size:
            clamp(
                42px,
                13vw,
                56px
            );

    }


    .home-gear-heading__right {

        display:
            block;

        margin-top:
            20px;

        max-width:
            330px;

    }


    .home-gear .home-section-heading__note {

        font-size:
            12px;

    }


    .home-gear-controls {

        display:
            none;

    }


    .home-gear-carousel {

        margin-top:
            32px;

    }


    .home-gear-track {

        gap:
            13px;

        padding:
            8px
            18px
            24px;

        scroll-snap-type:
            none;

        touch-action:
            pan-y pinch-zoom;

    }


    .home-gear-card {

        flex:
            0 0
            calc(
                100vw - 48px
            );

        max-width:
            390px;

        border-radius:
            5px;

        transform:
            scale(.985);

    }


    .home-gear-card.is-active {

        transform:
            scale(1);

    }


    .home-gear-card__image {

        aspect-ratio:
            4 / 4.7;

    }


    .home-gear-card__body {

        min-height:
            137px;

        padding:
            19px
            19px
            21px;

    }


    .home-gear-card h3 {

        font-size:
            24px;

    }


    .home-gear-card p {

        margin-top:
            9px;

        font-size:
            11.5px;

    }


    .home-gear-card__action {

        left:
            15px;

        bottom:
            15px;

        min-height:
            36px;

        padding:
            0 12px;

        font-size:
            8px;

    }


    .home-gear-carousel__footer {

        margin-top:
            18px;

        padding:
            0 18px;

    }


    .home-gear-carousel::before,
    .home-gear-carousel::after {

        display:
            none;

    }

}


/* ==========================================================================
   SMALL PHONES
   ========================================================================== */

@media (max-width: 390px) {

    .home-gear {

        padding:
            58px 0 64px;

    }


    .home-gear-heading h2 {

        font-size:
            40px;

    }


    .home-gear-track {

        padding-left:
            15px;

        padding-right:
            15px;

    }


    .home-gear-card {

        flex-basis:
            calc(
                100vw - 34px
            );

    }


    .home-gear-card__body {

        min-height:
            130px;

        padding:
            17px;

    }


    .home-gear-card h3 {

        font-size:
            22px;

    }


    .home-gear-card p {

        font-size:
            11px;

    }


    .home-gear-card__action {

        left:
            13px;

        bottom:
            13px;

    }

}


/* ==========================================================================
   VERY SMALL PHONES
   ========================================================================== */

@media (max-width: 340px) {

    .home-gear-heading h2 {

        font-size:
            37px;

    }


    .home-gear-card {

        flex-basis:
            calc(
                100vw - 28px
            );

    }


    .home-gear-card__body {

        padding:
            15px;

    }


    .home-gear-card h3 {

        font-size:
            21px;

    }


    .home-gear-card__action {

        min-height:
            34px;

        padding:
            0 10px;

        font-size:
            7px;

    }

}


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

.home-gear-card:focus-visible {

    outline:
        2px solid
        var(--gear-caramel);

    outline-offset:
        5px;

}


.home-gear-card__action:focus-visible,
.home-gear-control:focus-visible {

    outline:
        2px solid
        var(--gear-caramel);

    outline-offset:
        4px;

}


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

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

    .home-gear-card,
    .home-gear-card img,
    .home-gear-card__action,
    .home-gear-card__action-icon,
    .home-gear-control,
    .home-gear-progress__bar {

        transition:
            none !important;

    }


    .home-gear-track {

        scroll-behavior:
            auto;

    }


    .home-gear-card:hover {

        box-shadow:
            0 12px 38px
            rgba(45, 26, 18, .07);

    }


    .home-gear-card:hover
    .home-gear-card__image img {

        transform:
            none;

    }


    .home-gear-card__action:hover {

        transform:
            none;

    }


    .home-gear-card__action:hover
    .home-gear-card__action-icon {

        transform:
            none;

    }

}