/* ==========================================================================
   EVENTS — PREMIUM COFFEE / CREAM IMAGE CARD GRID
   ========================================================================== */


/*
|--------------------------------------------------------------------------
| EVENTS VARIABLES
|--------------------------------------------------------------------------
*/

:root {

    /* ----------------------------------------------------------------------
       COFFEE / CREAM PALETTE
    ---------------------------------------------------------------------- */

    --events-cream:
        #f4eadb;

    --events-cream-light:
        #faf4eb;

    --events-cream-deep:
        #ead9c2;

    --events-coffee:
        #402212;

    --events-coffee-dark:
        #241108;

    --events-coffee-soft:
        #5a3420;

    --events-coffee-light:
        #70462d;

    --events-gold:
        #f5d99f;

    --events-gold-strong:
        #d69a4c;

    --events-white:
        #ffffff;

    --events-text:
        #402212;

    --events-muted:
        rgba(255, 255, 255, .78);


    /* ----------------------------------------------------------------------
       SECTION BACKGROUND
    ---------------------------------------------------------------------- */

    --events-background:
        var(--events-cream);


    /* ----------------------------------------------------------------------
       IMAGE OVERLAY
    ---------------------------------------------------------------------- */

    --events-overlay:
        linear-gradient(
            to bottom,
            rgba(36, 17, 8, .02) 0%,
            rgba(36, 17, 8, .06) 18%,
            rgba(36, 17, 8, .18) 34%,
            rgba(36, 17, 8, .48) 55%,
            rgba(20, 8, 3, .84) 76%,
            rgba(20, 8, 3, .97) 100%
        );


    /* ----------------------------------------------------------------------
       SHADOWS
    ---------------------------------------------------------------------- */

    --events-shadow:
        0 18px 50px
        rgba(64, 34, 18, .16);

    --events-shadow-hover:
        0 30px 75px
        rgba(64, 34, 18, .25);


    /* ----------------------------------------------------------------------
       MOTION
    ---------------------------------------------------------------------- */

    --events-ease:
        cubic-bezier(.22, 1, .36, 1);

    --events-ease-soft:
        cubic-bezier(.16, 1, .3, 1);

    --events-duration:
        700ms;

    --events-duration-fast:
        400ms;
}


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

.home-events {

    position:
        relative;

    width:
        100%;

    padding:
        clamp(75px, 9vw, 135px)
        0;

    overflow:
        hidden;

    background:
        var(--events-background);

    color:
        var(--events-text);

}


/* ==========================================================================
   SUBTLE COFFEE TEXTURE / LIGHT
   ========================================================================== */

.home-events::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255, 255, 255, .45),
            transparent 34%
        ),

        radial-gradient(
            circle at 85% 85%,
            rgba(214, 154, 76, .08),
            transparent 35%
        );

}


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

.home-events .home-container {

    position:
        relative;

    z-index:
        1;

    width:
        min(
            calc(100% - 40px),
            1280px
        );

    margin-inline:
        auto;

}


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

.home-events .home-section-heading {

    width:
        100%;

    margin:
        0 0
        clamp(
            40px,
            5vw,
            68px
        );

    text-align:
        center;

}


.home-events .home-section-heading > div {

    width:
        100%;

}


.home-events .home-eyebrow {

    margin:
        0 0 12px;

    color:
        var(--events-coffee-light);

    font-size:
        .7rem;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;

}


.home-events .home-section-heading h2 {

    width:
        100%;

    max-width:
        850px;

    margin:
        0 auto;

    color:
        var(--events-coffee);

    font-weight:
        600;

    line-height:
        1.04;

    letter-spacing:
        -.035em;

}


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

.home-events-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                360px
            )
        );

    justify-content:
        center;

    align-items:
        center;

    align-content:
        center;

    gap:
        clamp(
            20px,
            2.4vw,
            32px
        );

    width:
        100%;

    margin:
        0 auto;

}


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

.home-event-card {

    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        360px;

    min-width:
        0;

    min-height:
        0;

    overflow:
        hidden;

    isolation:
        isolate;

    border:
        1px solid
        rgba(
            64,
            34,
            18,
            .13
        );

    border-radius:
        0;

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

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

    opacity:
        1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        transform
        var(--events-duration)
        var(--events-ease),

        box-shadow
        var(--events-duration)
        var(--events-ease),

        border-color
        var(--events-duration-fast)
        ease;

    will-change:
        transform;

}


/* ==========================================================================
   EVENT IMAGE — FULL CARD
   ========================================================================== */

.home-event-card__image {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

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

    border-radius:
        0;

}


.home-event-card__image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    border-radius:
        0;

    transform:
        scale(1.001);

    transition:
        transform
        900ms
        var(--events-ease);

}


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

.home-event-card__overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

    background:
        var(--events-overlay);

    border-radius:
        0;

}


/* ==========================================================================
   CARD BODY — TEXT OVER IMAGE
   ========================================================================== */

.home-event-card__body {

    position:
        absolute;

    inset:
        auto 0 0 0;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    min-height:
        58%;

    padding:
        clamp(
            27px,
            3vw,
            38px
        );

    color:
        var(--events-white);

    text-align:
        left;

    background:
        transparent;

    border-radius:
        0;

}


/* ==========================================================================
   EVENT DAY
   ========================================================================== */

.home-event-card__day {

    display:
        block;

    margin:
        0 0 12px;

    color:
        var(--events-gold);

    font-size:
        .67rem;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        .19em;

    text-transform:
        uppercase;

}


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

.home-event-card h3 {

    margin:
        0;

    color:
        var(--events-white);

    font-size:
        clamp(
            1.45rem,
            2vw,
            1.9rem
        );

    font-weight:
        600;

    line-height:
        1.08;

    letter-spacing:
        -.025em;

    text-shadow:
        0 3px 20px
        rgba(
            0,
            0,
            0,
            .30
        );

    overflow-wrap:
        anywhere;

}


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

.home-event-card p {

    margin:
        15px 0 0;

    max-width:
        96%;

    color:
        var(--events-muted);

    font-size:
        clamp(
            .86rem,
            .95vw,
            .96rem
        );

    line-height:
        1.62;

    text-shadow:
        0 2px 14px
        rgba(
            0,
            0,
            0,
            .25
        );

    overflow-wrap:
        anywhere;

}


/* ==========================================================================
   EVENT TIME
   ========================================================================== */

.home-event-card__time {

    display:
        block;

    margin-top:
        auto;

    padding-top:
        23px;

    color:
        var(--events-gold);

    font-size:
        .67rem;

    font-weight:
        800;

    line-height:
        1.4;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

    text-shadow:
        0 2px 14px
        rgba(
            0,
            0,
            0,
            .35
        );

}


.home-event-card__time::before {

    content:
        "";

    display:
        block;

    width:
        30px;

    height:
        1px;

    margin:
        0 0 12px;

    background:
        var(--events-gold-strong);

}


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

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

    .home-event-card:hover {

        transform:
            translate3d(
                0,
                -8px,
                0
            );

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

        border-color:
            rgba(
                214,
                154,
                76,
                .38
            );

    }


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

        transform:
            scale(1.055);

    }

}


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

.home-empty {

    width:
        min(
            100%,
            700px
        );

    margin:
        0 auto;

    padding:
        48px 28px;

    color:
        var(--events-coffee);

    text-align:
        center;

    border:
        1px solid
        rgba(
            64,
            34,
            18,
            .12
        );

    border-radius:
        0;

    background:
        var(--events-cream-light);

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

}


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

@media (max-width: 1120px) {

    .home-events {
        background: #241108;


    }

    .home-events::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(78, 3, 3, 0.45),
            transparent 34%
        ),

        radial-gradient(
            circle at 85% 85%,
            rgba(214, 154, 76, .08),
            transparent 35%
        );

}

    .home-events .home-container {

        width:
            min(
                calc(100% - 34px),
                980px
            );

    }


    .home-events-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    360px
                )
            );

        gap:
            24px;

    }


    .home-event-card {

        height:
            530px;

    }

}

.home-events .home-section-heading h2 {
    color: var(--events-gold-strong);
}


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

@media (max-width: 760px) {

    .home-events {

        padding:
            clamp(
                60px,
                11vw,
                90px
            )
            0;

        background: #241108;

    }


    .home-events .home-container {

        width:
            calc(
                100% - 30px
            );

    }


    .home-events .home-section-heading {

        margin-bottom:
            35px;

    }


    .home-events-grid {

        grid-template-columns:
            minmax(
                0,
                500px
            );

        justify-content:
            center;

        gap:
            22px;

    }


    .home-event-card {

        height:
            510px;

    }


    .home-event-card__body {

        min-height:
            57%;

        padding:
            27px 24px 29px;

    }

}


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

@media (max-width: 520px) {

    .home-events {

        padding:
            55px 0 65px;

        background: #241108;

    }

    .home-events::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(78, 3, 3, 0.45),
            transparent 34%
        ),

        radial-gradient(
            circle at 85% 85%,
            rgba(214, 154, 76, .08),
            transparent 35%
        );

}


    .home-events .home-container {

        width:
            calc(
                100% - 24px
            );

    }


    .home-events .home-section-heading {

        margin-bottom:
            29px;

    }


    .home-events .home-eyebrow {

        margin-bottom:
            9px;

        font-size:
            .63rem;

        letter-spacing:
            .18em;

    }


    .home-events-grid {

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

        gap:
            18px;

    }


    .home-event-card {

        height:
            470px;

        box-shadow:
            0 14px 38px
            rgba(
                64,
                34,
                18,
                .15
            );

    }


    .home-event-card__body {

        min-height:
            59%;

        padding:
            23px 20px 24px;

    }


    .home-event-card__day {

        margin-bottom:
            9px;

        font-size:
            .61rem;

    }


    .home-event-card h3 {

        font-size:
            1.34rem;

        line-height:
            1.1;

    }


    .home-event-card p {

        margin-top:
            11px;

        max-width:
            100%;

        font-size:
            .84rem;

        line-height:
            1.56;

    }


    .home-event-card__time {

        padding-top:
            19px;

        font-size:
            .61rem;

    }


    .home-event-card__time::before {

        width:
            24px;

        margin-bottom:
            9px;

    }


    .home-empty {

        padding:
            35px 20px;

    }

}


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

@media (max-width: 380px) {

    .home-events {
        background: #241108;
    }



    .home-events .home-container {

        width:
            calc(
                100% - 20px
            );

    }


    .home-event-card {

        height:
            440px;

    }


    .home-event-card__body {

        min-height:
            61%;

        padding:
            20px 17px 21px;

    }


    .home-event-card h3 {

        font-size:
            1.2rem;

    }


    .home-event-card p {

        font-size:
            .8rem;

    }

}


/* ==========================================================================
   TOUCH DEVICES
   ========================================================================== */

@media (hover: none) {

    .home-event-card:hover {

        transform:
            none;

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

    }


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

        transform:
            scale(1.001);

    }

}


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

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

    .home-event-card,
    .home-event-card__image img {

        transition:
            none;

    }


    .home-event-card:hover {

        transform:
            none;

    }

}