/* Shared editorial cards: homepage feature and the browsable advice library. */
.homepage-articles,
.article-library {
    --article-ink: #172637;
    --article-muted: #526274;
    --article-line: #dce4e9;
    --article-green: var(--color-brand, #006b2e);
    color: var(--article-ink);
}

.homepage-articles { padding: 3rem 0; }
.homepage-articles__inner { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
.homepage-articles__header { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.homepage-articles__header h2 { margin: 0; font-size: 1.625rem; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.homepage-articles__header h2 { scroll-margin-top: 7rem; }
.homepage-articles__header p,
.article-library__intro { margin-top: .4rem; color: var(--article-muted); font-size: 1rem; line-height: 1.5; }
.homepage-articles__layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 2rem; align-items: stretch; }
.homepage-articles__layout--single { grid-template-columns: minmax(0, 1fr); max-width: 42rem; }
.homepage-articles__secondary { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.article-arrow { display: inline-block; width: 1.125rem; height: 1.125rem; flex: none; }
.article-all-link { display: inline-flex; justify-content: center; align-items: center; gap: .625rem; padding: .6rem 1rem; min-height: 2.75rem; border: 1px solid #cbd5df; border-radius: .5rem; color: var(--article-ink); background: #fff; font-size: .9375rem; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s, background-color .15s; }
.article-all-link:hover { border-color: var(--article-green); color: var(--article-green); background: #f8fbf9; }
.article-all-link--mobile { display: none; }
.article-card { min-width: 0; }
.article-card__link { display: grid; color: inherit; text-decoration: none; border-radius: .625rem; }
.article-card__copy { min-width: 0; }
.article-card__topic { display: block; margin-bottom: .375rem; color: var(--article-green); font-size: .8125rem; font-weight: 600; line-height: 1.35; }
.article-card__title { margin: 0; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; transition: color .15s; }
.article-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: .5rem; color: var(--article-muted); font-size: .9375rem; line-height: 1.5; }
.article-card__read { display: inline-flex; align-items: center; gap: .375rem; margin-top: .75rem; color: var(--article-green); font-size: .875rem; font-weight: 600; }
.article-card__link:hover .article-card__title { color: var(--article-green); }
.article-card__link:hover .article-card__read { text-decoration: underline; text-underline-offset: .2em; }
.article-card__media { overflow: hidden; background: #edf1f3; }
.article-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-card__media--diagram { display: flex; align-items: center; justify-content: center; padding: .75rem; background: #fff; border: 1px solid var(--article-line); }
.article-card__media--diagram img { object-fit: contain; }
.article-card__media--placeholder { display: flex; align-items: center; justify-content: center; background: #edf2ef; color: #547360; }
.article-card__media--placeholder svg { width: 2rem; height: 2rem; }
.article-card__fallback { display: none; }
.article-card__media--placeholder .article-card__fallback { display: block; }
.article-card__media--placeholder img { display: none; }
.article-card--featured { border: 1px solid var(--article-line); border-radius: .75rem; background: #fff; overflow: hidden; transition: border-color .15s; }
.article-card--featured:hover { border-color: #afc9b8; }
.article-card--featured .article-card__link { height: 100%; grid-template-rows: auto 1fr; }
.article-card--featured .article-card__media { width: 100%; aspect-ratio: 2.2; }
.article-card--featured .article-card__media--diagram { padding: 2rem; border: 0; border-bottom: 1px solid var(--article-line); }
.article-card--featured .article-card__media--placeholder svg { width: 4rem; height: 4rem; }
.article-card--featured .article-card__copy { display: flex; flex-direction: column; align-items: flex-start; padding: 1.25rem 1.5rem 1.4rem; }
.article-card--featured .article-card__title { font-size: 1.5rem; letter-spacing: -.015em; }
.article-card--featured .article-card__excerpt { margin-bottom: .85rem; font-size: 1rem; }
.article-card--featured .article-card__read { margin-top: auto; }
.article-card--compact + .article-card--compact { border-top: 1px solid var(--article-line); }
.article-card--compact .article-card__link { grid-template-columns: 7rem minmax(0, 1fr); align-items: start; gap: 1.125rem; padding-block: 1.25rem; }
.article-card--compact:first-child .article-card__link { padding-top: .25rem; }
.article-card--compact:last-child .article-card__link { padding-bottom: .25rem; }
.article-card--compact .article-card__media { aspect-ratio: 4/3; border-radius: .5rem; margin-top: .125rem; }
.article-card--compact .article-card__title { font-size: 1.125rem; }
.article-card--compact .article-card__read { margin-top: .5rem; }
.homepage-articles a:focus-visible,
.article-library a:focus-visible { outline: 3px solid var(--article-green); outline-offset: 4px; }
.article-card--featured .article-card__link:focus-visible { outline-offset: -4px; }

.article-library { max-width: 64rem; margin-inline: auto; padding: 2.5rem 1rem 3rem; }
.article-library__back { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--article-muted); font-size: .9375rem; text-decoration: none; }
.article-library__back .article-arrow { transform: rotate(180deg); }
.article-library__back:hover { color: var(--article-green); text-decoration: underline; text-underline-offset: .2em; }
.article-library__header { margin: 1.125rem 0 1.75rem; }
.article-library h1 { margin: 0; font-size: 2rem; line-height: 1.2; letter-spacing: -.025em; font-weight: 700; }
.article-library__topics { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.125rem; }
.article-library__topic { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 2.75rem; padding: .5rem .875rem; border: 1px solid var(--article-line); border-radius: .5rem; background: #fff; color: var(--article-muted); font-size: .9375rem; text-decoration: none; }
.article-library__topic:hover { border-color: #afc9b8; color: var(--article-green); }
.article-library__topic[aria-current='page'] { background: #eaf3ed; border-color: var(--article-green); color: var(--article-green); font-weight: 600; }
.article-library__topic-count { font-size: .8125rem; font-variant-numeric: tabular-nums; }
.article-library__count { color: var(--article-muted); font-size: .875rem; margin-bottom: .5rem; }
.article-card--list { border-top: 1px solid var(--article-line); }
.article-card--list .article-card__link { grid-template-columns: 11rem minmax(0, 1fr); align-items: start; gap: 1.5rem; padding: 1.5rem 0; }
.article-card--list .article-card__media { aspect-ratio: 16/11; border-radius: .625rem; }
.article-card--list .article-card__title { font-size: 1.3125rem; }
.article-card--list .article-card__excerpt { max-width: 42rem; font-size: 1rem; }
.article-library__empty { padding: 3rem 1.5rem; text-align: center; border-block: 1px solid var(--article-line); color: var(--article-muted); }
.article-library__empty .article-all-link { margin-top: 1rem; }

@media (max-width: 767px) {
    .homepage-articles { padding-block: 2.25rem; }
    .homepage-articles__layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .article-card--featured .article-card__media { aspect-ratio: 2.4; }
    .article-card--compact .article-card__link { padding-block: 1.125rem; }
    .article-library { padding-top: 1.5rem; }
}
@media (max-width: 639px) {
    .homepage-articles__header { margin-bottom: 1.25rem; }
    .homepage-articles__header h2 { font-size: 1.5rem; scroll-margin-top: 10rem; }
    .article-card__excerpt { -webkit-line-clamp: 3; }
    .article-all-link--desktop { display: none; }
    .article-all-link--mobile { display: flex; margin-top: 1.5rem; }
    .article-card--featured .article-card__copy { padding: 1.125rem; }
    .article-card--featured .article-card__media { aspect-ratio: 2.4; }
    .article-card--featured .article-card__title { font-size: 1.375rem; }
    .article-card--compact .article-card__link { grid-template-columns: 5rem minmax(0, 1fr); gap: .875rem; }
    .article-card--compact .article-card__media { aspect-ratio: 1; }
    .article-card--compact .article-card__excerpt { font-size: .875rem; }
    .article-library h1 { font-size: 1.75rem; }
    .article-library__topics { gap: .375rem; }
    .article-library__topic { padding: .5rem .75rem; font-size: .875rem; }
    .article-card--list .article-card__link { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding-block: 1.25rem; }
    .article-card--list .article-card__media { aspect-ratio: 1; }
    .article-card--list .article-card__title { font-size: 1.125rem; }
    .article-card--list .article-card__excerpt { font-size: .9375rem; }
    /* Keep the short answer readable across the full phone width. */
    :is(.article-card--compact, .article-card--list) .article-card__link { row-gap: 0; }
    :is(.article-card--compact, .article-card--list) .article-card__copy { display: contents; }
    :is(.article-card--compact, .article-card--list) .article-card__media { grid-column: 1; grid-row: 1 / 3; }
    :is(.article-card--compact, .article-card--list) .article-card__topic { grid-column: 2; align-self: end; }
    :is(.article-card--compact, .article-card--list) .article-card__title { grid-column: 2; }
    :is(.article-card--compact, .article-card--list) .article-card__excerpt { grid-column: 1 / -1; margin-top: .75rem; -webkit-line-clamp: 2; }
    :is(.article-card--compact, .article-card--list) .article-card__read { grid-column: 1 / -1; margin-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .article-card--featured, .article-card__title, .article-all-link { transition: none; }
}