/* ==============================================================
   ABOUT PAGE
   Uses the site's existing global variables/styles
================================================================ */


/* ==============================================================
   ABOUT HERO
================================================================ */

.about-hero {
    min-height: 75vh;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(22, 13, 9, .97) 0%,
            rgba(22, 13, 9, .88) 45%,
            rgba(22, 13, 9, .55) 100%
        ),
        url("https://karibubensmaker.com/public/assets/images/site/about-hero.jpg")
        center / cover
        no-repeat;
}


.about-hero__content {
    max-width: 760px;

    padding: 120px 0;
}


.about-hero h1 {
    max-width: 800px;

    margin-bottom: 30px;

    color: #f8ead8;

    font-size:
        clamp(
            55px,
            9vw,
            125px
        );

    font-weight: 400;

    line-height: .9;

    letter-spacing: -3px;
}


.about-hero h1 span {
    display: block;

    color: #a9693b;

    font-style: italic;
}


.about-hero p {
    max-width: 650px;

    color: #d6c2ae;

    font-size: 17px;

    line-height: 1.9;
}


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

.about-intro {
    padding: 130px 0;

    background: #efe0cc;

    color: #28140c;
}


.about-intro__grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;

    align-items: center;
}


.about-intro .eyebrow {
    color: #a9693b;
}


.about-intro h2 {
    color: #28140c;

    max-width: 560px;
}


.about-intro__text {
    max-width: 600px;
}


.about-intro__text p {
    color: #684b39;

    margin-bottom: 22px;

    font-size: 16px;
}


.about-intro__text p:last-child {
    margin-bottom: 0;
}


/* ==============================================================
   VINTAGE EXPERIENCE
================================================================ */

.about-vintage {
    padding: 130px 0;

    background: #160d09;
}


.about-vintage__grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 90px;

    align-items: center;
}


.about-vintage__content {
    max-width: 600px;
}


.about-vintage__content h2 {
    max-width: 560px;

    color: #f8ead8;
}


.about-vintage__content p {
    max-width: 580px;

    margin-top: 22px;

    color: #d6c2ae;
}


.about-vintage__features {
    display: flex;

    flex-direction: column;

    gap: 15px;
}


/* ==============================================================
   VINTAGE FEATURE
================================================================ */

.about-feature {
    display: grid;

    grid-template-columns:
        55px 1fr;

    gap: 18px;

    padding: 24px;

    background: #21120c;

    border:
        1px solid
        rgba(201, 154, 99, .15);

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


.about-feature:hover {
    transform:
        translateX(6px);

    background: #28150e;

    border-color:
        rgba(201, 154, 99, .4);
}


.about-feature__icon {
    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #c99a63;

    background:
        rgba(201, 154, 99, .08);

    border:
        1px solid
        rgba(201, 154, 99, .18);
}


.about-feature__icon svg {
    width: 25px;
    height: 25px;
}


.about-feature h3 {
    margin-bottom: 7px;

    color: #f8ead8;

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

    font-size: 20px;

    font-weight: 400;
}


.about-feature p {
    color: #a9907b;

    font-size: 14px;

    line-height: 1.7;
}


/* ==============================================================
   SERVICES
================================================================ */

.about-services {
    padding: 130px 0;

    background: #efe0cc;

    color: #28140c;
}


.about-services .eyebrow {
    color: #a9693b;
}


.about-services h2 {
    max-width: 650px;

    color: #28140c;
}


.about-services__grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 25px;

    margin-top: 60px;
}


/* ==============================================================
   SERVICE CARDS
================================================================ */

.about-service-card {
    position: relative;

    padding: 45px 38px;

    background: #f5ead7;

    border:
        1px solid
        rgba(40, 20, 12, .12);

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.about-service-card::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -120px;
    bottom: -120px;

    border-radius: 50%;

    background:
        rgba(169, 105, 59, .08);

    transition:
        transform .5s ease;
}


.about-service-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(169, 105, 59, .3);

    box-shadow:
        0 20px 45px rgba(40, 20, 12, .12);
}


.about-service-card:hover::after {
    transform: scale(1.35);
}


.about-service-card__icon {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    color: #a9693b;

    border:
        1px solid
        rgba(169, 105, 59, .3);
}


.about-service-card__icon svg {
    width: 27px;
    height: 27px;
}


.about-service-card h3 {
    margin-bottom: 13px;

    color: #28140c;

    font-size: 25px;

    font-weight: 400;
}


.about-service-card p {
    max-width: 550px;

    color: #684b39;

    font-size: 15px;

    line-height: 1.8;
}


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

.about-events {
    padding: 130px 0;

    background: #160d09;
}


.about-events__heading {
    max-width: 700px;

    margin-bottom: 65px;
}


.about-events__heading h2 {
    color: #f8ead8;
}


.about-events__heading p {
    max-width: 580px;

    margin-top: 22px;

    color: #d6c2ae;
}


/* ==============================================================
   EVENT LIST
================================================================ */

.about-events__list {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid
        rgba(248, 234, 216, .15);

    border-bottom:
        1px solid
        rgba(248, 234, 216, .15);
}


.about-event {
    display: grid;

    grid-template-columns:
        42px 1fr;

    gap: 18px;

    padding: 38px 28px;

    border-right:
        1px solid
        rgba(248, 234, 216, .15);
}


.about-event:first-child {
    padding-left: 0;
}


.about-event:last-child {
    border-right: 0;
}


.about-event__number {
    color: #c99a63;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    letter-spacing: 2px;
}


.about-event h3 {
    margin-bottom: 10px;

    color: #f8ead8;

    font-size: 23px;

    font-weight: 400;
}


.about-event p {
    color: #a9907b;

    font-size: 14px;

    line-height: 1.75;
}


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

.about-closing {
    min-height: 75vh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 120px 0;

    background:
        linear-gradient(
            rgba(20, 8, 4, .72),
            rgba(20, 8, 4, .92)
        ),
        url("https://karibubensmaker.com/public/assets/images/home/call-to-action.webp")
        center / cover
        no-repeat;

    text-align: center;
}


.about-closing__content {
    max-width: 850px;
}


.about-closing h2 {
    color: #f8ead8;

    font-size:
        clamp(
            55px,
            8vw,
            110px
        );
}


.about-closing p {
    max-width: 680px;

    margin:
        28px auto 0;

    color: #d6c2ae;
}


/* ==============================================================
   ABOUT BUTTON
================================================================ */

.about-button {
    display: inline-block;

    margin-top: 40px;

    padding: 18px 35px;

    border:
        1px solid
        #c99762;

    color: #f4dfc6;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    letter-spacing: 3px;

    text-transform: uppercase;

    text-decoration: none;

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


.about-button:hover {
    background: #c99762;

    color: #1a0c07;

    border-color: #c99762;
}


.about-button:focus-visible {
    outline:
        2px solid
        #f4dfc6;

    outline-offset: 4px;
}


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

@media (max-width: 800px) {

    .about-hero {
        min-height: 70vh;
    }


    .about-hero__content {
        padding: 100px 0;
    }


    .about-hero h1 {
        font-size:
            clamp(
                50px,
                14vw,
                85px
            );

        letter-spacing: -2px;
    }


    .about-intro,
    .about-vintage,
    .about-services,
    .about-events {
        padding: 90px 0;
    }


    .about-intro__grid,
    .about-vintage__grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .about-services__grid {
        grid-template-columns: 1fr;

        margin-top: 45px;
    }


    .about-events__list {
        grid-template-columns: 1fr;
    }


    .about-event,
    .about-event:first-child {
        padding: 30px 0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(248, 234, 216, .15);
    }


    .about-event:last-child {
        border-bottom: 0;
    }


    .about-closing {
        min-height: 65vh;

        padding: 90px 0;
    }

}


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

@media (max-width: 480px) {

    .about-hero__content {
        padding: 80px 0;
    }


    .about-hero h1 {
        font-size:
            clamp(
                47px,
                15vw,
                72px
            );
    }


    .about-hero p {
        font-size: 15px;
    }


    .about-intro,
    .about-vintage,
    .about-services,
    .about-events {
        padding: 75px 0;
    }


    .about-feature {
        grid-template-columns:
            45px 1fr;

        padding: 20px;

        gap: 15px;
    }


    .about-feature__icon {
        width: 45px;
        height: 45px;
    }


    .about-service-card {
        padding: 32px 25px;
    }


    .about-closing {
        padding: 80px 0;
    }


    .about-closing h2 {
        font-size: 52px;
    }


    .about-button {
        padding:
            16px 28px;
    }

}


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

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

    .about-feature,
    .about-service-card,
    .about-service-card::after,
    .about-button {
        transition: none;
    }

}