/* ==== HERO ==== */
/* The post hero's media is a photo: sized to the reading column and cropped to a flat 16:9 (the list hero has no media). */
body.page-blog .page-hero__media {
    max-width: calc(680px + 2 * var(--container-pad));
    margin-inline: auto;
}

/* Match the article track once the side tracks appear: 2 × (200px aside min + 32px gap) = 464px. */
@media (min-width: 1200px) {
    body.page-blog .page-hero__media {
        max-width: min(calc(680px + 2 * var(--container-pad)), calc(100% - 464px));
    }
}

body.page-blog .page-hero__media img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
}

/* ==== FEATURED ==== */
.blog-featured {
    display: grid;
    gap: var(--s-6);
}

.blog-featured__body {
    display: grid;
    align-content: start;
    gap: var(--s-3);
}

.blog-featured__body h2 a {
    text-decoration: none;
}

.blog-featured__body h2 a:hover {
    text-decoration: underline;
}

@media (min-width: 1024px) {
    .blog-featured {
        grid-template-columns: 7fr 5fr;
        align-items: center;
        gap: var(--s-8);
    }

    .blog-featured__body {
        max-width: 44ch;
    }
}

/* ==== CARD GRID (list grid + related) ==== */
.blog-cards {
    display: grid;
    gap: var(--s-6);
}

.blog-cards .card__body h3 a {
    text-decoration: none;
}

.blog-cards .card__body h3 a:hover {
    text-decoration: underline;
}

.blog-related__title {
    margin-bottom: var(--s-6);
}

@media (min-width: 768px) {
    .blog-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .blog-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-7);
    }

    .blog-related__title {
        margin-bottom: var(--s-7);
    }
}

/* ==== POST BODY ==== */
/* Reading column: the article (.prose caps it at 680px) is centered; the aside sits beside it on desktop. */
.blog-body__toc-mobile {
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: var(--s-7);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: var(--s-4);
}

.blog-body__toc-mobile summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: var(--c-ink-2);
}

.blog-body__toc-mobile .toc {
    margin-top: var(--s-4);
}

.blog-body__grid {
    display: grid;
    gap: var(--s-7);
}

.blog-body__article {
    min-width: 0;
    margin-inline: auto;
}

.blog-body__aside {
    display: none;
}

.blog-body__share {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.blog-body__share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h);
    height: var(--control-h);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius);
    color: var(--c-ink);
}

.blog-body__share a:hover {
    background: var(--c-tint);
}

.blog-body__popular-title {
    margin-bottom: var(--s-3);
}

.blog-body__popular-list {
    display: grid;
    gap: var(--s-1);
}

.blog-body__popular-list a {
    display: block;
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--c-line);
    font-size: var(--fs-small);
    text-decoration: none;
}

.blog-body__popular-list a:hover {
    color: var(--c-ink-2);
}

/* Desktop: equal side tracks keep the article on the page's center axis; the aside fills the right track.
   Below 1200px the side tracks would squeeze the text, so the single column + collapsible TOC stays. */
@media (min-width: 1200px) {
    .blog-body__toc-mobile {
        display: none;
    }

    .blog-body__grid {
        grid-template-columns: minmax(200px, 1fr) minmax(0, 680px) minmax(200px, 1fr);
        gap: var(--s-6);
        align-items: start;
    }

    .blog-body__article {
        grid-column: 2;
    }

    .blog-body__aside {
        grid-column: 3;
        display: grid;
        gap: var(--s-6);
        max-width: 240px;
        position: sticky;
        top: calc(var(--mh-height) + var(--s-6));
    }

    .blog-body__toc {
        gap: var(--s-3);
    }
}