/* Coyochi page-specific overrides */

.inner-hero {
    min-height: 88svh;
    padding: 22px 0 46px;
    background: #37291f;
}

.inner-hero:before {
    background-image: url("../img/coyochi-banner.webp");
    filter: saturate(.92) contrast(.96) brightness(.98);
}

.inner-hero:after {
    background:
        linear-gradient(90deg, rgba(26, 18, 13, .74) 0%, rgba(38, 27, 19, .56) 25%, rgba(60, 42, 28, .14) 54%, rgba(30, 20, 14, .30) 100%),
        linear-gradient(180deg, rgba(20, 14, 10, .22) 0%, rgba(20, 14, 10, .06) 44%, rgba(55, 41, 31, .44) 100%);
}

.inner-hero .topline {
    color: rgba(255, 248, 236, .88);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .34);
}

.inner-hero .nav {
    background: rgba(55, 41, 31, .34);
    border-color: rgba(255, 248, 236, .28);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .16);
}

/* Brighter menu contrast for the Coyochi banner image */
.inner-hero .brand-name,
.inner-hero .nav-center a {
    color: rgba(255, 248, 236, .96);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .42);
}

.inner-hero .nav-center a:hover,
.inner-hero .nav-center a:focus {
    color: #fffdf7;
}

.inner-hero .nav-center a {
    position: relative;
    isolation: isolate;
    padding: 10px 14px;
    border-radius: 999px;
    transition:
        color .24s ease,
        background .24s ease,
        box-shadow .24s ease,
        transform .24s ease;
}

.inner-hero .nav-center a:hover,
.inner-hero .nav-center a:focus {
    color: #fffdf7;
    background: rgba(255, 248, 236, .16);
    box-shadow:
        0 0 18px rgba(233, 201, 133, .24),
        inset 0 0 0 1px rgba(255, 248, 236, .18);
    transform: translateY(-1px);
}

.inner-hero .nav-actions .btn {
    box-shadow: 0 12px 26px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.inner-hero-content {
    min-height: calc(88svh - 116px);
    padding: 82px 0 24px;
}

.inner-title {
    max-width: 560px;
    margin: 0 0 16px;
    text-shadow: 0 18px 50px rgba(0, 0, 0, .20);
}

.inner-intro {
    max-width: 500px;
    color: rgba(255, 248, 236, .88);
    font-size: 16px;
    line-height: 1.78;
    text-shadow: none;
}

.article-card {
    background: linear-gradient(145deg, rgba(255, 249, 239, .84), rgba(235, 222, 203, .62));
}

@media (max-width: 960px) {
    .inner-hero {
        min-height: 64svh;
    }

    .inner-hero-content {
        min-height: calc(64svh - 110px);
    }
}

@media (max-width: 768px) {
    .inner-hero:before {
        background-size: 100% auto;
        background-position: center top;
    }

    .inner-hero .mobile-menu.menu-open {
        background: rgba(55, 41, 31, .96);
        border: 1px solid rgba(255, 248, 236, .16);
    }

    .inner-hero .mobile-menu.menu-open a {
        color: rgba(255, 248, 236, .94);
        text-shadow: none;
    }

    .inner-hero .mobile-menu.menu-open a:hover,
    .inner-hero .mobile-menu.menu-open a:focus {
        color: #fffdf7;
    }

    .inner-hero .mobile-menu.menu-open {
        background: rgba(55, 41, 31, .96);
        border: 1px solid rgba(255, 248, 236, .16);
    }
}

@media (max-width: 620px) {
    .inner-hero {
        min-height: 100svh;
        padding-bottom: 0;
    }

    .inner-hero:before {
        background-size: auto 118%;
        background-position: center top;
    }

    .inner-hero:after {
        background:
            linear-gradient(90deg,
                rgba(24, 15, 11, .48) 0%,
                rgba(35, 22, 16, .26) 42%,
                rgba(24, 14, 10, .06) 72%,
                rgba(20, 12, 9, .14) 100%),
            linear-gradient(180deg,
                rgba(20, 12, 9, .14) 0%,
                rgba(20, 12, 9, .02) 42%,
                rgba(34, 20, 14, .34) 72%,
                rgba(30, 17, 12, .66) 100%);
    }

    .inner-hero-content {
        min-height: calc(100svh - 92px);
        display: grid;
        align-items: end;
        padding: 0 0 22px;
    }

    .inner-copy {
        max-width: 300px;
    }

    .inner-title {
        max-width: 230px;
        margin: 0 0 4px;
        font-size: clamp(40px, 11.8vw, 50px);
        line-height: .88;
        letter-spacing: -.045em;
        text-shadow:
            0 2px 8px rgba(0, 0, 0, .46),
            0 14px 36px rgba(0, 0, 0, .28);
    }

    .inner-divider {
        display: none;
    }

    .inner-intro {
        max-width: 300px;
        margin: 0;
        font-size: 14px;
        line-height: 1.58;
        color: rgba(255, 248, 236, .92);
        text-shadow: 0 2px 9px rgba(0, 0, 0, .48);
    }

    .article-section {
        padding-top: 34px;
    }

    .article-card {
        padding: 20px;
    }
}