/* ==========================================================================
   Blog: listing, article, and the homepage teaser row
   ========================================================================== */

/* Shared meta line ---------------------------------------------------------- */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: 0 0 1.25rem;
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.post-meta span + span {
    position: relative;
    padding-left: 1rem;
}

.post-meta span + span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: .3rem;
    height: 1px;
    background: var(--line);
}

/* Featured post ------------------------------------------------------------- */
.post-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
    align-items: center;
    margin-bottom: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);
    padding-bottom: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);
    border-bottom: 1px solid var(--line);
}

.post-feature__media {
    display: block;
    overflow: hidden;
    border-radius: 2px;
}

.post-feature__media picture,
.post-feature__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.post-feature__body h2 {
    font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.15rem);
    line-height: 1.2;
    margin-bottom: .75rem;
}

.post-feature__body > p:not(.eyebrow):not(.post-meta) {
    margin-bottom: 1.25rem;
}

/* Card grid ----------------------------------------------------------------- */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
}

.post-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 2px;
    overflow: hidden;
}

.post-card__media {
    display: block;
    overflow: hidden;
}

.post-card__media picture,
.post-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .5s ease;
}

.post-card__media:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
    .post-card__media img { transition: none; }
    .post-card__media:hover img { transform: none; }
}

.post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(1.4rem, 1.1rem + .9vw, 1.9rem);
}

.post-card__body h3 {
    font-size: 1.1875rem;
    line-height: 1.3;
    margin-bottom: .6rem;
}

.post-card__body > p:not(.eyebrow):not(.post-meta) {
    margin-bottom: 1.1rem;
    font-size: .9375rem;
}

.post-card__body .post-meta {
    margin: auto 0 .85rem;
}

.post-card__body .share {
    margin-top: 0;
    padding-top: .85rem;
    border-top: 1px solid var(--line);
}

/* Titles behave as links without looking like body links -------------------- */
.post-feature__body h2 a,
.post-card__body h3 a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--sage-deep), var(--sage-deep));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size .35s ease;
}

.post-feature__body h2 a:hover,
.post-card__body h3 a:hover { background-size: 100% 1px; }

.post-feature__body h2 a:focus-visible,
.post-card__body h3 a:focus-visible {
    outline: 2px solid var(--sage-deep);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .post-feature__body h2 a,
    .post-card__body h3 a { transition: none; }
}

/* Share controls ------------------------------------------------------------
   Monochrome by design: no platform brand colors, so a row of six marks stays
   quiet next to the editorial palette. -------------------------------------- */
.share {
    --share-size: 2.25rem;
    --share-icon: 1.05rem;
    max-width: 100%;
}

/* Scoped through .share so the page-header paragraph rules do not reset the
   size or color of the label and the confirmation. */
.share .share__label {
    max-width: none;
    margin: 0 0 .6rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.share__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 100%;
}

.share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--share-size);
    height: var(--share-size);
    padding: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--teal);
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.share__btn .icon {
    width: var(--share-icon);
    height: var(--share-icon);
}

.share__btn:hover,
.share__btn:focus-visible {
    color: var(--sage-deep);
    border-color: var(--sage-deep);
}

.share__btn:focus-visible {
    outline: 3px solid var(--sage-deep);
    outline-offset: 2px;
}

/* Kept in the flow and always rendered, so the live region can announce and
   the confirmation never shifts the card. */
.share .share__flash {
    max-width: 100%;
    min-height: 1.15rem;
    margin: .4rem 0 0;
    font-size: .8125rem;
    line-height: 1.15rem;
    letter-spacing: .01em;
    color: var(--teal);
}

/* Article header row */
.share--head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    margin-top: 1.35rem;
}

.share--head .share__label { margin: 0; }

/* Sits beside the row where there is room and drops below it where there is
   not, so a long fallback message can never widen the header. */
.share--head .share__flash { flex: 0 1 auto; margin: 0; }

/* Compact row on a card */
.share--compact {
    --share-size: 2.1rem;
    --share-icon: 1rem;
}

.share--compact .share__list { gap: .4rem; }

.share--compact .share__flash {
    min-height: 1rem;
    margin-top: .35rem;
    font-size: .75rem;
    line-height: 1rem;
}
.share--feature { margin-top: 1.35rem; }

@media (prefers-reduced-motion: reduce) {
    .share__btn { transition: none; }
}

/* Article ------------------------------------------------------------------- */
.page-header--post { padding-bottom: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); }
.page-header--post h1 { max-width: 22ch; }
.post-meta--head { margin-bottom: 0; }

.post-figure {
    margin: 0;
    background: var(--ivory);
    padding-top: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
}

.post-figure picture,
.post-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 2px;
}

.post-body h3 {
    font-size: 1.0625rem;
    margin-top: 1.75rem;
    margin-bottom: .5rem;
}

.post-body > p:first-child {
    font-size: 1.0625rem;
    color: var(--ink);
}

.post-body blockquote {
    margin: 1.75rem 0;
    padding: 1.1rem 0 1.1rem 1.4rem;
    border-left: 2px solid var(--sage);
    font-family: var(--font-display, inherit);
    font-size: 1.0625rem;
    color: var(--teal);
}

.post-body blockquote p:last-child { margin-bottom: 0; }

.post-body ol {
    display: grid;
    gap: .65rem;
    margin: 0 0 1.25rem;
    padding-left: 1.2rem;
}

.post-body ol li { line-height: 1.6; padding-left: .2rem; }

.post-body a {
    color: var(--sage-deep);
    text-underline-offset: .18em;
}

.blog-note { margin-top: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); }

/* Homepage teaser row ------------------------------------------------------- */
.blog-teasers { background: var(--ivory); padding-block: var(--section-y); }
.blog-teasers .post-grid { margin-top: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }

.blog-teasers__more {
    margin-top: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
    text-align: center;
}

/* Narrow -------------------------------------------------------------------- */
@media (max-width: 900px) {
    .post-feature {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
    .post-feature__media picture,
    .post-feature__media img { aspect-ratio: 3 / 2; }
}

@media (max-width: 640px) {
    .post-figure picture,
    .post-figure img { aspect-ratio: 3 / 2; }
    .page-header--post h1 { max-width: none; }
}