/* =========================================================
   BAPBI NEWS
   Shared BAPBI Theme
   ========================================================= */


/* =========================================================
   PAGE FOUNDATION
   ========================================================= */

.news-page {
    background: var(--ivory, #f5eee3);
    color: var(--text-dark, #2d2521);
    font-family: var(--font-body), "Inter", sans-serif;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.news-page h1,
.news-page h2,
.news-page h3,
.news-page h4,
.news-page h5,
.news-page h6 {
    font-family: var(--font-display), "Cormorant Garamond", serif;
}

.news-page p,
.news-page li,
.news-page time,
.news-page a,
.news-page span {
    font-family: var(--font-body), "Inter", sans-serif;
}


/* =========================================================
   NEWS HERO
   ========================================================= */

.news-hero {
    position: relative;
    padding: 96px 20px 76px;
    background:
        linear-gradient(
            135deg,
            var(--espresso, #24120d) 0%,
            var(--brown, #4a2919) 58%,
            var(--espresso-light, #5a3422) 100%
        );
    color: var(--white, #ffffff);
    border-bottom: 1px solid var(--border-dark, rgba(200, 164, 93, .3));
    overflow: hidden;
}

.news-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212, 170, 82, .18),
            transparent 58%
        );
    pointer-events: none;
}

.news-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -80px;
    width: 420px;
    height: 160px;
    transform: translateX(-50%);
    background: rgba(200, 164, 93, .08);
    filter: blur(60px);
    pointer-events: none;
}

.news-hero .content-container {
    position: relative;
    z-index: 1;
    width: min(100%, var(--container-width, 1180px));
    margin-inline: auto;
    text-align: center;
}

.news-hero .section-eyebrow {
    margin: 0 0 16px;
    color: var(--gold-light, #e3bd69);
    letter-spacing: .18em;
}

.news-hero h1 {
    margin: 0 auto 22px;
    color: var(--white, #ffffff);
    font-family: var(--font-display), "Cormorant Garamond", serif;
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    line-height: 1;
}

.news-hero p:not(.section-eyebrow) {
    width: min(100%, 780px);
    margin: 0 auto;
    color: rgba(255, 255, 255, .82);
    font-family: var(--font-body), "Inter", sans-serif;
    font-size: clamp(1rem, 1.7vw, 1.15rem);
    line-height: 1.85;
}


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

.news-section {
    padding: 82px 20px 94px;
    background: var(--ivory, #f5eee3);
}

.news-section > .content-container {
    width: min(100%, var(--container-width, 1180px));
    margin-inline: auto;
}


/* =========================================================
   NEWS LIST
   ========================================================= */

.news-list {
    width: min(100%, 900px);
    margin: 0 auto;
    display: grid;
    gap: 26px;
}


/* =========================================================
   NEWS ENTRY
   ========================================================= */

.news-entry {
    position: relative;
    padding: 36px 40px 38px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(91, 58, 35, .16);
    border-top: 3px solid var(--gold, #c8a45d);
    box-shadow: 0 14px 36px rgba(50, 30, 18, .08);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.news-entry:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(50, 30, 18, .12);
    border-color: rgba(200, 164, 93, .45);
}


/* =========================================================
   NEWS META
   ========================================================= */

.news-entry time,
.news-entry .news-category {
    display: inline-block;
    margin-right: 14px;
    margin-bottom: 13px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.4;
    text-transform: uppercase;
}

.news-entry time {
    color: var(--gold-dark, #9d782e);
}

.news-entry .news-category {
    color: var(--text-muted, #776b62);
}


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

.news-entry h2 {
    margin: 0 0 16px;
    color: var(--espresso, #24120d);
    font-family: var(--font-display), "Cormorant Garamond", serif;
    font-size: clamp(1.9rem, 3vw, 2.55rem);
    font-weight: 600;
    line-height: 1.1;
}


/* =========================================================
   NEWS CONTENT
   ========================================================= */

.news-entry p {
    margin: 0 0 20px;
    color: var(--text-muted, #71665e);
    font-size: .98rem;
    line-height: 1.8;
}

.news-entry p:last-of-type {
    margin-bottom: 24px;
}


/* =========================================================
   NEWS LINKS
   ========================================================= */

.news-entry a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--espresso, #24120d);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid var(--gold, #c8a45d);
    padding-bottom: 4px;
    transition:
        color .2s ease,
        border-color .2s ease;
}

.news-entry a:hover {
    color: var(--gold-dark, #9d782e);
    border-color: var(--espresso, #24120d);
}


/* =========================================================
   MULTIPLE NEWS LINKS
   ========================================================= */

.news-entry-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 4px;
}


/* =========================================================
   NEWS NOTE
   ========================================================= */

.news-note {
    width: min(100%, 900px);
    margin: 38px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(91, 58, 35, .14);
    text-align: center;
    color: var(--text-muted, #776b62);
    font-size: .9rem;
    font-style: italic;
}


/* =========================================================
   SHARED BAPBI FOOTER
   ========================================================= */

.news-page .site-footer {
    background: var(--espresso, #24120d);
    color: var(--text-light, #f3e8d8);
}

.news-page .site-footer p,
.news-page .site-footer a,
.news-page .site-footer span {
    font-family: var(--font-body), "Inter", sans-serif;
}

.news-page .site-footer h2,
.news-page .site-footer .footer-brand h2 {
    font-family: var(--font-display), "Cormorant Garamond", serif;
    color: var(--gold-light, #e3bd69);
}

.news-page .site-footer .footer-description,
.news-page .site-footer .footer-quote p,
.news-page .site-footer .footer-bottom p,
.news-page .site-footer .footer-links a,
.news-page .site-footer .footer-brand p {
    color: var(--text-muted, #b9a99a);
}

.news-page .site-footer .footer-eyebrow {
    color: var(--gold-light, #e3bd69);
}

.news-page .site-footer .footer-links a:hover,
.news-page .site-footer .footer-legal a:hover {
    color: var(--gold-light, #e3bd69);
}


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

@media (min-width: 761px) and (max-width: 1100px) and (orientation: landscape) {

    .news-hero {
        padding: 78px 20px 62px;
    }

    .news-section {
        padding: 68px 20px 78px;
    }

    .news-list {
        max-width: 820px;
    }

    .news-entry {
        padding: 32px 36px 34px;
    }

}


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

@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {

    .news-hero {
        padding: 68px 20px 58px;
    }

    .news-hero .content-container,
    .news-section > .content-container {
        width: calc(100% - 64px);
        max-width: 820px;
        margin-inline: auto;
    }

    .news-hero h1 {
        font-size: clamp(2.5rem, 6vw, 3.7rem);
    }

    .news-hero p:not(.section-eyebrow) {
        max-width: 700px;
        font-size: 1rem;
        line-height: 1.75;
    }

    .news-section {
        padding: 68px 0 78px;
    }

    .news-list {
        width: 100%;
        max-width: 820px;
        gap: 22px;
    }

    .news-entry {
        padding: 32px 34px 34px;
    }

    .news-entry h2 {
        font-size: clamp(1.8rem, 4vw, 2.35rem);
    }

    .news-entry p {
        font-size: .95rem;
        line-height: 1.75;
    }

}


/* =========================================================
   NARROW TABLET PORTRAIT
   ========================================================= */

@media (min-width: 601px) and (max-width: 760px) and (orientation: portrait) {

    .news-hero .content-container,
    .news-section > .content-container {
        width: calc(100% - 44px);
    }

    .news-hero {
        padding: 60px 0 52px;
    }

    .news-section {
        padding: 56px 0 68px;
    }

    .news-entry {
        padding: 28px 28px 30px;
    }

    .news-entry h2 {
        font-size: 1.95rem;
    }

    .news-entry p {
        font-size: .92rem;
    }

}


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

@media (max-width: 600px) {

    .news-hero {
        padding: 68px 18px 58px;
    }

    .news-hero h1 {
        font-size: 2.55rem;
    }

    .news-hero p:not(.section-eyebrow) {
        font-size: .95rem;
        line-height: 1.7;
    }

    .news-section {
        padding: 52px 16px 68px;
    }

    .news-list {
        gap: 18px;
    }

    .news-entry {
        padding: 27px 23px 29px;
    }

    .news-entry time,
    .news-entry .news-category {
        display: block;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .news-entry h2 {
        font-size: 1.7rem;
        line-height: 1.12;
    }

    .news-entry p {
        font-size: .92rem;
        line-height: 1.72;
    }

    .news-entry-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

}


/* =========================================================
   SHARED STICKY SITE NAVIGATION
   ========================================================= */

.site-header {
    position: sticky !important;
    top: 0;
    z-index: 1000;
}