/* Secondary Blog library and editorial article surfaces. */
.content-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--byco-line);
    background:
        linear-gradient(rgba(40, 49, 58, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40, 49, 58, 0.035) 1px, transparent 1px),
        var(--byco-paper);
    background-size: 40px 40px;
}
.content-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.72fr);
    gap: var(--space-lg);
    align-items: end;
    padding-block: var(--space-xl);
}
.content-hero h1 {
    max-width: 12ch;
    margin: 0;
    font-size: var(--type-display);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
}
.content-hero__lead {
    max-width: 46rem;
    margin: 0;
    color: color-mix(in oklch, var(--byco-ink) 84%, white);
    font-size: var(--type-lead);
    line-height: 1.45;
}

.blog-list {
    display: grid;
    gap: var(--space-sm);
}
.blog-list__item {
    border: 1px solid var(--byco-line);
    background: var(--byco-paper);
}
.blog-list__link {
    display: grid;
    grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 0.66fr);
    min-height: 13rem;
    color: inherit;
}
.blog-list__link:hover {
    color: inherit;
    text-decoration: none;
}
.blog-list__link:focus-visible {
    outline: 3px solid var(--byco-teal);
    outline-offset: 3px;
}
.blog-list__media {
    min-height: 100%;
    overflow: hidden;
    border-right: 1px solid var(--byco-line);
    background: var(--byco-soft);
}
.blog-list__media img {
    width: 100%;
    height: 100%;
    min-height: 13rem;
    object-fit: cover;
    transition: transform 260ms var(--ease-out), filter 260ms var(--ease-out);
}
.blog-list__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-md);
}
.blog-list__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--space-xs);
}
.blog-list__badges span,
.post-meta .badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border: 1px solid var(--byco-line-strong);
    border-radius: 0;
    background: var(--byco-paper) !important;
    color: var(--byco-ink) !important;
    font-family: var(--byco-font-condensed);
    font-size: var(--type-caption);
    font-weight: 800;
    letter-spacing: 0.075em;
    line-height: 1;
    text-transform: uppercase;
}
.blog-list__badges span { padding: 0.48rem 0.58rem; }
.blog-list h2 {
    max-width: 22ch;
    margin: 0;
    font-size: var(--type-title);
    font-weight: 800;
    line-height: 1;
}
.blog-list p {
    max-width: 58ch;
    margin: var(--space-xs) 0 0;
    color: color-mix(in oklch, var(--byco-ink) 78%, white);
    line-height: 1.62;
}
.blog-list__read {
    margin-top: auto;
    padding-top: var(--space-sm);
    color: var(--byco-crimson);
    font-family: var(--byco-font-condensed);
    font-weight: 800;
    letter-spacing: 0.035em;
}
.blog-list__link:hover .blog-list__media img {
    transform: scale(1.035);
    filter: saturate(0.85) contrast(1.08);
}
.blog-list__link:hover .blog-list__read { color: var(--byco-crimson-dark); }
.blog-list__item--featured .blog-list__link {
    grid-template-columns: minmax(18rem, 0.55fr) minmax(0, 0.45fr);
    min-height: clamp(20rem, 38vw, 30rem);
}
.blog-list__item--featured .blog-list__media img { min-height: clamp(20rem, 38vw, 30rem); }
.blog-list__item--featured h2 {
    max-width: 14ch;
    font-size: var(--type-headline);
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.blog-article-page { padding: var(--space-lg) 0 var(--space-xl); }
.content-breadcrumb { margin-bottom: var(--space-md); }
.content-breadcrumb .breadcrumb {
    margin: 0;
    font-size: var(--type-small);
    line-height: 1.35;
}
article.post {
    max-width: 74rem;
    margin: 0 auto;
}
.post__header {
    display: grid;
    grid-template-columns: minmax(0, 0.58fr) minmax(20rem, 0.42fr);
    gap: var(--space-lg);
    align-items: end;
    margin-bottom: var(--space-lg);
}
article.post h1 {
    grid-column: 1;
    max-width: 12ch;
    margin: 0;
    font-size: var(--type-display-compact);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
}
article.post .post-meta {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 var(--space-xs);
    color: color-mix(in oklch, var(--byco-ink) 76%, white);
    font-size: var(--type-small);
    font-weight: 600;
}
.post-meta .badge { padding: 0.42rem 0.55rem; }
.post__figure {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--byco-line);
    background: var(--byco-soft);
}
.post__figure img {
    display: block;
    width: 100%;
    height: clamp(18rem, 34vw, 28rem);
    object-fit: cover;
}
.post__body {
    max-width: 72ch;
    margin: 0 auto;
    font-size: var(--type-body-large);
    line-height: 1.72;
}
.post__body h2 {
    margin: var(--space-lg) 0 var(--space-xs);
    font-size: var(--type-title);
    font-weight: 800;
    line-height: 1;
}
.post__body p,
.post__body ul { color: color-mix(in oklch, var(--byco-ink) 88%, white); }
.post__body p + p { margin-top: 1.05rem; }
.post__body ul { padding-left: 1.15rem; }
.post__body li + li { margin-top: 0.55rem; }
.bordered-block--article {
    margin: var(--space-lg) 0;
    padding: var(--space-md);
}
.bordered-block--article h3 {
    margin: 0 0 var(--space-2xs);
    font-size: var(--type-title-small);
    font-weight: 800;
    line-height: 1;
}
.bordered-block--article p {
    margin: 0 0 var(--space-sm);
    color: color-mix(in oklch, var(--byco-ink) 78%, white);
    font-size: var(--type-small);
}
.bordered-block__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}
.cta-band--article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm) var(--space-md);
    align-items: center;
    margin: var(--space-xl) 0 0;
}
.cta-band--article h2 {
    margin: 0 0 var(--space-2xs);
    font-size: var(--type-title);
    font-weight: 800;
    line-height: 1;
}
.cta-band--article p {
    margin: 0;
    color: #edf3f6;
}

@media (max-width: 1199.98px) {
    .content-hero__grid,
    .post__header { grid-template-columns: 1fr; }
    .post__figure {
        grid-column: 1;
        grid-row: auto;
    }
    article.post h1,
    article.post .post-meta { grid-column: 1; }
}

@media (max-width: 767.98px) {
    .content-hero { background-size: 32px 32px; }
    .content-hero__grid,
    .blog-list__link,
    .blog-list__item--featured .blog-list__link,
    .cta-band--article { grid-template-columns: 1fr; }
    .content-hero h1 {
        max-width: 10ch;
        font-size: var(--type-display-mobile);
    }
    .blog-list__media {
        border-right: 0;
        border-bottom: 1px solid var(--byco-line);
    }
    article.post h1 { font-size: var(--type-display-compact-mobile); }
    .post__figure img {
        height: auto;
        min-height: 15rem;
    }
    .post__body { font-size: var(--type-body); }
}