/*
 * Blog index + single post (home.php / single.php).
 * Loaded only on the blog index, post archives, and single posts.
 */

/* Full-bleed photo band under the glass header — homepage hero artwork. */
.moo-journal-cover{
    height: 402px;
    background: url('/wp-content/uploads/2026/08/light-milk-cover.jpg') center bottom / cover no-repeat;
}

/* Single posts swap in the featured image (inline style, see single.php) —
   centre the crop, since post photos have no known focal edge. */
.single-post .moo-journal-cover{
    height: 549px;
    background-position: center;
}

/* Journal headlines are set in Geist, not Hot Sans — per the Figma blog frames. */
.moo-journal-title{
    font-family: 'Geist', sans-serif;
    font-size: 50px;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

@media (max-width: 991px){
    .moo-journal-cover,
    .single-post .moo-journal-cover{
        height: 260px;
    }

    .moo-journal-title{
        font-size: 36px;
    }
}

.moo-journal-icons{
    display: block;
    width: 100%;
    margin-top: 6em;
}

/* ── Archive: article grid card ─────────────────────────────── */

.moo-article-card{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5em;
    min-height: 292px;
    padding: 12px 12px 2em;
    text-decoration: none;
}

.moo-article-card h4{
    font-size: 24px;
    padding: 0 .75em;
}

.moo-article-card-media{
    position: relative;
    height: 180px;
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.moo-article-card-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Top-down scrim so the white category pill reads on any photo. */
.moo-article-card-scrim{
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 15%, transparent 68%);
    pointer-events: none;
}

.moo-article-card-media .eyebrow{
    position: absolute;
    top: 1em;
    left: 1em;
}

/* ── Archive: featured article card ─────────────────────────── */

.moo-featured-article{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
}

.moo-featured-article-badges{
    display: flex;
    gap: 8px;
}

.moo-featured-article h3{
    font-size: 40px;
}

.moo-featured-article-text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2em;
    padding: 2.5em 2em;
}

.moo-featured-article-text p{
    font-size: 18px;
    max-width: 30em;
}

.moo-featured-article-media{
    position: relative;
    min-height: 480px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.moo-featured-article-media img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.moo-featured-article-scrim{
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--green-forest) 6%, transparent 40%);
    pointer-events: none;
}

@media (max-width: 991px){
    .moo-featured-article{
        grid-template-columns: 1fr;
    }

    .moo-featured-article-media{
        min-height: 320px;
    }
}

/* ── Single: breadcrumbs ────────────────────────────────────── */

.moo-breadcrumbs{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75em;
    font-size: 16px;
    color: var(--green-aztec-60);
    margin-bottom: 2em;
}

.moo-breadcrumbs a{
    color: var(--green-aztec-60);
    text-decoration: none;
    transition: color .2s ease;
}

.moo-breadcrumbs a:hover{
    color: var(--green-aztec);
}

.moo-breadcrumbs [aria-current]{
    color: var(--green-aztec);
    max-width: 40ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Single: sticky meta rail ───────────────────────────────── */

.moo-article-meta{
    position: sticky;
    top: 160px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 1.25em;
}

.moo-article-meta > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    padding-bottom: 1.25em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

@media (max-width: 991.98px){
    .moo-article-meta{
        position: static;
    }
}

/* ── Single: article body (classic-editor HTML) ─────────────── */

.moo-article-content{
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.moo-article-content h2,
.moo-article-content h3,
.moo-article-content h4{
    font-size: 36px;
    margin-top: .75em;
}

.moo-article-content p{
    font-size: 18px;
    line-height: 1.4;
    color: var(--green-aztec-80);
}

.moo-article-content img{
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 1em 0;
}

/* Pull-quote card — quote in Hot Sans, source line muted below. */
.moo-article-content blockquote{
    background: var(--off-white);
    border-radius: var(--radius-md);
    padding: 1.75em 1.5em 1em;
    margin: .5em 0;
}

.moo-article-content blockquote p{
    font-family: 'HotSans', sans-serif;
    letter-spacing: -0.02em;
    font-size: 20px;
    color: var(--green-aztec);
}

.moo-article-content blockquote cite{
    display: block;
    font-style: normal;
    font-size: 17px;
    color: var(--green-aztec-60);
    margin-top: 1.5em;
}

/* Newsletter input on light surfaces — the button handles itself via
   .btn-grey.outline, which borrows its border from the skin's text colour. */
.moo-newsletter-form.dark .moo-newsletter-input{
    color: var(--green-aztec);
}

.moo-newsletter-form.dark .moo-newsletter-input::placeholder{
    color: var(--green-aztec-40);
}

/* ── Single: reading progress bar ───────────────────────────── */

.moo-article-progress{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--grey);
    z-index: 1000;
    pointer-events: none;
}

.moo-article-progress span{
    display: block;
    height: 100%;
    width: 0;
    background: var(--green-aztec);
}