/* ============================================================
   SINGLE POST - blog-single.css

   The article column — header, body, author box — beside a
   sidebar carrying the contents, promo card, FAQs and popular
   posts, closing with the related row across the full width.

   Brand tokens, the sidebar card shell (.blog-side__card, its
   title, the promo card and the popular list) come from blog.css,
   which is enqueued alongside this file.
   ============================================================ */

.single-post-page {
    /* Header height + breathing room, for :target offsets and jumps. */
    --bl-sticky-top: 108px;
}

/* -- Reading progress ---------------------------------------------- */
.post-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 200;
    pointer-events: none;
    background: transparent;
}
.post-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--bl-gradient-alt);
    transition: width .12s linear;
}

/* ============================================================
   LAYOUT
   ============================================================ */
/* sections/_header.css already offsets the body by --header-h for the fixed
   header, so this is the gap below it — not the clearance. Adding a second
   full header height here is what left a ~90px hole above the breadcrumb. */
.post-article { padding: clamp(18px, 2.5vw, 28px) 0 clamp(40px, 6vw, 60px); }

/* Capped narrower than the container: at the full 1280 the article column runs
   to ~910px, which is too wide a measure to read and leaves the text ragged
   against the featured image. 1120 puts the column at ~750px — the design's
   proportions, and text that ends where the image ends. */
.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: clamp(1.75rem, 3.5vw, 3rem);
    max-width: 1120px;
    margin-inline: auto;
}
.post-main { min-width: 0; }

.post-side {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 1.6vw, 1.25rem);
    min-width: 0;
}

/* The promo card carries no icon here — unlike the listing's — so its heading
   needs the spacing the icon row would otherwise provide. */
.post-side .blog-side__cta { padding: 1.6rem 1.5rem 1.7rem; }
.post-side .blog-side__cta-heading {
    font-size: 1.15rem;
    line-height: 1.32;
    margin-bottom: .8rem;
}

/* ============================================================
   ARTICLE HEADER
   ============================================================ */
.post-crumbs {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--bl-muted);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.post-crumbs a {
    color: var(--bl-muted);
    text-decoration: none;
    transition: color .2s ease;
}
.post-crumbs a:hover,
.post-crumbs a:focus-visible { color: var(--bl-magenta); }
.post-crumbs svg { flex: 0 0 auto; opacity: .55; }
/* The title can be long; it truncates rather than wrapping the trail. */
.post-crumbs__current {
    color: var(--bl-heading);
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-head__cat {
    display: inline-flex;
    align-items: center;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .38rem .8rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--bl-accent);
    background: color-mix(in srgb, var(--bl-accent) 10%, #fff);
    transition: background .2s ease, color .2s ease;
}
.post-head__cat:hover,
.post-head__cat:focus-visible { background: var(--bl-accent); color: #fff; }

.post-head__title {
    font-size: clamp(1.75rem, 3.6vw, 2.65rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: var(--bl-heading);
    margin: .9rem 0 1rem;
    text-wrap: balance;
}

.post-head__standfirst {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(.95rem, 1.15vw, 1.05rem);
    line-height: 1.75;
    color: var(--bl-body);
    text-wrap: pretty;
}

.post-head__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    margin: clamp(1.25rem, 2.5vw, 1.75rem) 0;
}

.post-byline {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .84rem;
    color: var(--bl-muted);
}
.post-byline__avatar {
    width: 34px; height: 34px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: .72rem; font-weight: 800;
    color: #fff;
    background: var(--bl-gradient-alt);
}
.post-byline__who { display: flex; flex-direction: column; line-height: 1.3; }
.post-byline__who a {
    color: var(--bl-heading);
    font-weight: 600;
    text-decoration: none;
}
.post-byline__who a:hover,
.post-byline__who a:focus-visible { color: var(--bl-magenta); }
.post-byline__role { font-size: .74rem; color: var(--bl-muted); }
.post-byline__dot {
    width: 3px; height: 3px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
}

/* -- Share row ----------------------------------------------------- */
.post-share {
    position: relative;
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}
.post-share__label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--bl-muted);
    margin-right: .1rem;
}
.post-share__btn {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    border-radius: 50%;
    color: #fff;
    background: var(--bl-muted);
    text-decoration: none;
    transition: transform .2s ease, filter .2s ease;
}
.post-share__btn:hover,
.post-share__btn:focus-visible { transform: translateY(-2px); filter: brightness(1.1); }

/* Network colours — recognisable at 34px without a label. */
.post-share__btn--fb { background: #1877F2; }
.post-share__btn--x  { background: #14171A; }
.post-share__btn--li { background: #0A66C2; }
.post-share__btn--wa { background: #25D366; }
.post-share__btn--copy {
    color: var(--bl-body);
    background: #EFEAF2;
}
.post-share__btn--copy:hover { background: #E3DCE9; }

.post-share__toast {
    position: absolute;
    top: -2.1rem; right: 0;
    padding: .25rem .6rem;
    border-radius: 6px;
    font-size: .72rem; font-weight: 600;
    color: #fff;
    background: var(--bl-heading);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    white-space: nowrap;
}
.post-share__toast.is-shown { opacity: 1; }

/* -- Featured image ------------------------------------------------ */
/* Wider than 16:9 on a desktop column: at ~750px wide a 16:9 figure runs to
   420px tall and pushes the article below the fold. Phones keep the taller
   crops set further down — there the image is the only thing on the row. */
.post-head__media {
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 2.2 / 1;
    background: color-mix(in srgb, var(--bl-accent) 7%, #fff);
    border: 1px solid var(--bl-border);
}
.post-head__media img,
.post-head__media .blog-ph {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* ============================================================
   KEY TAKEAWAYS
   ============================================================ */
.post-takeaways {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: clamp(1.5rem, 3vw, 2rem) 0;
    padding: 1.3rem 1.5rem;
    border-radius: 14px;
    background: var(--bl-tint);
}
.post-takeaways__icon {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    color: #fff;
    background: var(--bl-magenta);
    box-shadow: 0 10px 22px -12px rgba(198,32,82,.9);
}
.post-takeaways__body { min-width: 0; }
.post-takeaways__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bl-magenta);
    margin: .35rem 0 .7rem;
}
.post-takeaways__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--bl-body);
}
.post-takeaways__list li {
    position: relative;
    padding-left: 1.6rem;
}
.post-takeaways__list li + li { margin-top: .5rem; }
/* Tick drawn from a background image so it needs no extra markup. */
.post-takeaways__list li::before {
    content: "";
    position: absolute;
    left: 0; top: .15em;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--bl-magenta) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}

/* ============================================================
   CONTENTS
   ============================================================ */
/* Sidebar card — numbered, matching the design's reading order. */
.post-toc__list {
    list-style: none;
    counter-reset: toc;
    margin: 0;
    padding: 0;
}
.post-toc__list li { counter-increment: toc; }
.post-toc__list li + li { border-top: 1px solid var(--bl-border); }

.post-toc__link {
    display: flex;
    gap: .6rem;
    padding: .6rem 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--bl-body);
    text-decoration: none;
    transition: color .2s ease;
}
.post-toc__link::before {
    content: counter(toc) ".";
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--bl-muted);
    transition: color .2s ease;
}
.post-toc__link:hover,
.post-toc__link:focus-visible { color: var(--bl-magenta); }
.post-toc__link.is-current { color: var(--bl-magenta); font-weight: 600; }
.post-toc__link.is-current::before { color: var(--bl-magenta); }

/* Collapsed variant — replaces the card below 1100px. */
.post-toc-inline {
    display: none;
    margin: 0 0 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--bl-border);
    background: var(--bl-surface);
}
.post-toc-inline > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.1rem;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 700;
    color: var(--bl-heading);
    list-style: none;
}
.post-toc-inline > summary::-webkit-details-marker { display: none; }
.post-toc-inline > summary svg { transition: transform .2s ease; flex: 0 0 auto; }
.post-toc-inline[open] > summary svg { transform: rotate(180deg); }
.post-toc-inline__list {
    margin: 0;
    padding: 0 1.1rem 1rem 2.4rem;
    font-size: .88rem;
    color: var(--bl-body);
}
.post-toc-inline__list li + li { margin-top: .45rem; }
.post-toc-inline__list a { color: var(--bl-body); text-decoration: none; }
.post-toc-inline__list a:hover,
.post-toc-inline__list a:focus-visible { color: var(--bl-magenta); text-decoration: underline; }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.post-faq__item + .post-faq__item { border-top: 1px solid var(--bl-border); }

.post-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem 0;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--bl-heading);
    list-style: none;
    transition: color .2s ease;
}
.post-faq__q::-webkit-details-marker { display: none; }
.post-faq__q:hover { color: var(--bl-magenta); }

/* Plus sign drawn from two rules, so it can become a minus on open. */
.post-faq__sign {
    position: relative;
    flex: 0 0 auto;
    width: 16px; height: 16px;
}
.post-faq__sign::before,
.post-faq__sign::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 2px;
    border-radius: 1px;
    background: var(--bl-magenta);
    transform: translate(-50%, -50%);
    transition: transform .2s ease, opacity .2s ease;
}
.post-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.post-faq__item[open] .post-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.post-faq__a {
    padding: 0 0 .9rem;
    font-size: .85rem;
    line-height: 1.65;
    color: var(--bl-body);
}
.post-faq__a p { margin: 0; }
.post-faq__a p + p { margin-top: .6em; }

/* ============================================================
   ARTICLE TYPOGRAPHY
   ============================================================ */
.post-content {
    font-size: clamp(1rem, 1.15vw, 1.0625rem);
    line-height: 1.8;
    color: var(--bl-body);
}
/* Rhythm is owned by the sibling rule. `.post-content p { margin: 0 }` used to
   sit after it and, being the more specific selector, silently cancelled the
   gap between paragraphs — hence the reset on the child, which ties. */
.post-content > * { margin: 0; }
.post-content > * + * { margin-top: 1.35em; }

/* First paragraph reads as a lede without the editor having to mark it up. */
.post-content > p:first-child {
    font-size: 1.1em;
    line-height: 1.7;
    color: var(--bl-heading);
}

.post-content h2,
.post-content h3,
.post-content h4 {
    color: var(--bl-heading);
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-wrap: balance;
    /* Anchor jumps from the contents card must clear the fixed header. */
    scroll-margin-top: var(--bl-sticky-top);
}
.post-content h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 800;
    margin-top: 2.2em;
    padding-top: 1.3rem;
    border-top: 1px solid var(--bl-border);
}
.post-content h3 {
    font-size: clamp(1.1rem, 1.7vw, 1.25rem);
    font-weight: 700;
    margin-top: 1.9em;
}
.post-content h4 {
    font-size: 1.02rem;
    font-weight: 700;
    margin-top: 1.7em;
}
.post-content h2 + *,
.post-content h3 + *,
.post-content h4 + * { margin-top: .7em; }

.post-content a {
    color: var(--bl-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity .2s ease;
}
.post-content a:hover { opacity: .75; }

.post-content strong { color: var(--bl-heading); font-weight: 700; }

/* Unordered lists get the design's magenta tick; ordered lists keep their
   numbers, which carry meaning a tick would throw away. */
.post-content ol { padding-left: 1.35rem; }
.post-content li + li { margin-top: .5em; }
.post-content ol li::marker { color: var(--bl-accent); font-weight: 700; }

.post-content ul {
    list-style: none;
    padding-left: 0;
}
.post-content ul li {
    position: relative;
    padding-left: 1.85rem;
}
.post-content ul li::before {
    content: "";
    position: absolute;
    left: 0; top: .35em;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--bl-accent) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
/* Nested lists step back to a plain disc — ticks all the way down read as
   noise rather than structure. */
.post-content ul ul { margin-top: .5em; }
.post-content ul ul li { padding-left: 1.1rem; }
.post-content ul ul li::before {
    top: .62em;
    width: 5px; height: 5px;
    background: var(--bl-accent);
}

.post-content blockquote {
    margin-inline: 0;
    padding: 1.35rem 1.6rem;
    border-radius: 14px;
    border: 1px solid var(--bl-border);
    border-left: 3px solid var(--bl-accent);
    background: #FBF8FD;
    font-size: 1.08em;
    line-height: 1.65;
    font-weight: 500;
    color: var(--bl-heading);
}
.post-content blockquote p { margin: 0; }
.post-content blockquote p + p { margin-top: .7em; }
.post-content blockquote cite {
    display: block;
    margin-top: .8em;
    font-size: .8em;
    font-weight: 600;
    font-style: normal;
    color: var(--bl-muted);
}

.post-content img,
.post-content figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--bl-border);
}
.post-content figure { margin-inline: 0; }
.post-content figcaption {
    margin-top: .6rem;
    font-size: .82rem;
    color: var(--bl-muted);
    text-align: center;
}

.post-content hr {
    border: 0;
    height: 1px;
    background: var(--bl-border);
    margin-block: 2.2em;
}

.post-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    padding: .15em .4em;
    border-radius: 5px;
    background: color-mix(in srgb, var(--bl-accent) 9%, transparent);
    color: var(--bl-heading);
    /* A long token must wrap rather than widen the column on a phone. */
    overflow-wrap: anywhere;
}
.post-content pre {
    padding: 1.1rem 1.25rem;
    border-radius: 12px;
    background: var(--bl-dark);
    color: #EDE6F7;
    overflow-x: auto;
    font-size: .86rem;
    line-height: 1.65;
}
.post-content pre code { background: none; padding: 0; color: inherit; overflow-wrap: normal; }

/* Tables scroll rather than pushing the page sideways. */
.post-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    display: block;
    overflow-x: auto;
}
.post-content th,
.post-content td {
    padding: .7rem .9rem;
    border: 1px solid var(--bl-border);
    text-align: left;
}
.post-content th {
    background: #FBF8FD;
    color: var(--bl-heading);
    font-weight: 700;
}

/* Embeds keep their aspect ratio instead of overflowing the measure. */
.post-content iframe,
.post-content video,
.post-content .wp-block-embed__wrapper iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 14px;
}

.post-content__pages {
    margin-top: 2em;
    display: flex; gap: .5rem; flex-wrap: wrap;
    font-size: .85rem; font-weight: 600;
    color: var(--bl-muted);
}
.post-content__pages a { color: var(--bl-accent); }

.post-content__source {
    margin-top: 2.5em;
    padding-top: 1.1rem;
    border-top: 1px solid var(--bl-border);
    font-size: .85rem;
    color: var(--bl-muted);
}

/* ============================================================
   TAGS · AUTHOR
   ============================================================ */
.post-tags {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-top: 2rem;
}
.post-tags__label {
    font-size: .78rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--bl-muted);
}
.post-tags__tag {
    font-size: .8rem;
    padding: .32rem .75rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--bl-body);
    background: var(--bl-surface);
    border: 1px solid var(--bl-border);
    transition: color .2s ease, border-color .2s ease;
}
.post-tags__tag:hover,
.post-tags__tag:focus-visible {
    color: var(--bl-magenta);
    border-color: color-mix(in srgb, var(--bl-magenta) 45%, var(--bl-border));
}

.post-author {
    display: grid;
    /* The share column is fixed: sized on content it takes its widest row —
       label plus five buttons — and steals the width from the bio. */
    grid-template-columns: auto minmax(0, 1fr) 236px;
    align-items: start;
    gap: 1.1rem;
    margin-top: clamp(2rem, 4vw, 2.75rem);
    padding: 1.4rem 1.5rem;
    border-radius: 14px;
    background: var(--bl-surface);
    border: 1px solid var(--bl-border);
}
.post-author__avatar {
    width: 54px; height: 54px;
    align-self: start;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 1rem; font-weight: 800;
    color: #fff;
    background: var(--bl-gradient-alt);
}
.post-author__body { min-width: 0; }
.post-author__kicker {
    display: block;
    font-size: .78rem;
    color: var(--bl-muted);
}
.post-author__name {
    font-size: 1rem;
    font-weight: 700;
    margin: .1rem 0 .4rem;
    color: var(--bl-magenta);
}
.post-author__name a { color: inherit; text-decoration: none; }
.post-author__name a:hover,
.post-author__name a:focus-visible { text-decoration: underline; }
.post-author__role {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    color: var(--bl-muted);
}
.post-author__bio {
    margin: 0;
    font-size: .85rem;
    line-height: 1.65;
    color: var(--bl-body);
    text-wrap: pretty;
}

.post-author__share {
    align-self: center;
    padding-left: 1.5rem;
    border-left: 1px solid var(--bl-border);
}
/* The label takes a line of its own and the buttons keep their row underneath,
   rather than the whole thing stacking into a column of five. */
.post-author__share .post-share__label {
    flex: 1 0 100%;
    margin-bottom: .25rem;
    font-size: .84rem;
    color: var(--bl-heading);
}

/* ============================================================
   RELATED ARTICLES
   ============================================================ */
.post-related {
    padding: 0 0 clamp(48px, 7vw, 76px);
}
.post-related__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.post-related__heading {
    position: relative;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bl-heading);
    margin: 0;
    padding-bottom: .6rem;
}
.post-related__heading::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 40px; height: 3px;
    border-radius: 2px;
    background: var(--bl-magenta);
}
.post-related__all {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .86rem; font-weight: 600;
    color: var(--bl-magenta);
    text-decoration: none;
}
.post-related__all svg { transition: transform .25s ease; }
.post-related__all:hover svg,
.post-related__all:focus-visible svg { transform: translateX(3px); }

.post-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.5rem);
}

.post-mini {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    border-radius: 14px;
    background: var(--bl-surface);
    border: 1px solid var(--bl-border);
    box-shadow: var(--bl-shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.post-mini:hover,
.post-mini:focus-within {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--bl-accent) 34%, var(--bl-border));
    box-shadow: var(--bl-shadow-lg);
}

.post-mini__media {
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 1 / 1;
    background: color-mix(in srgb, var(--bl-accent) 8%, #fff);
}
.post-mini__media img,
.post-mini__media .blog-ph {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.post-mini:hover .post-mini__img { transform: scale(1.06); }

.post-mini__body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}
.post-mini__title {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.38;
    margin: 0;
    text-wrap: pretty;
}
.post-mini__title a {
    color: var(--bl-heading);
    text-decoration: none;
    transition: color .2s ease;
}
.post-mini__title a:hover,
.post-mini__title a:focus-visible { color: var(--bl-accent); }
/* Stretched link — the thumbnail needs no anchor of its own. */
.post-mini__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.post-mini__meta {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    font-size: .75rem;
    color: var(--bl-muted);
}
.post-mini__dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
}
.post-mini__more {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: auto;
    padding-top: .5rem;
    font-size: .8rem; font-weight: 700;
    color: var(--bl-accent);
}
.post-mini__more svg { transition: transform .25s ease; }
.post-mini:hover .post-mini__more svg { transform: translateX(3px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Laptops — the sidebar narrows before the measure gets tight. */
@media (max-width: 1240px) {
    .post-layout { grid-template-columns: minmax(0, 1fr) 272px; }
}

/* Tablets — one column. The contents move into the collapsed panel above the
   text, where they are still useful; the rest of the sidebar follows the
   article and lays out two-up. */
@media (max-width: 1100px) {
    .post-layout { grid-template-columns: minmax(0, 1fr); max-width: none; }

    /* Full width now, so the taller crop reads correctly again. */
    .post-head__media { aspect-ratio: 16 / 9; }

    .post-toc-inline { display: block; }
    .post-side .post-toc { display: none; }

    .post-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        margin-top: clamp(1.5rem, 3vw, 2rem);
    }
    .post-side .blog-side__cta { grid-column: 1 / -1; }

    .post-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Large phones. */
@media (max-width: 760px) {
    .post-side { grid-template-columns: minmax(0, 1fr); }
    .post-related__grid { grid-template-columns: minmax(0, 1fr); }

    /* The share row moves under the byline rather than squeezing beside it. */
    .post-head__meta { justify-content: flex-start; }

    .post-author {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 1.1rem;
    }
    .post-author__share { align-self: start; }
    /* The share block drops to a full-width row under the bio, so the divider
       becomes a rule above it instead of beside it. */
    .post-author__share {
        grid-column: 1 / -1;
        padding-left: 0;
        padding-top: 1.1rem;
        border-left: 0;
        border-top: 1px solid var(--bl-border);
    }
}

@media (max-width: 560px) {
    .post-article { padding-top: .9rem; }

    .post-head__title { font-size: clamp(1.55rem, 7.4vw, 2rem); }
    .post-head__media { aspect-ratio: 3 / 2; }

    /* Only the last step of the trail is worth the width. */
    .post-crumbs__current { max-width: 18ch; }

    .post-takeaways {
        flex-direction: column;
        gap: .75rem;
        padding: 1.15rem 1.2rem;
    }
    .post-takeaways__icon { width: 42px; height: 42px; }

    .post-author { padding: 1.2rem; }
    .post-author__avatar { width: 46px; height: 46px; font-size: .9rem; }

    .post-mini { grid-template-columns: 76px minmax(0, 1fr); gap: .8rem; }
}

@media (max-width: 400px) {
    .post-byline { font-size: .78rem; }
    .post-share__btn { width: 32px; height: 32px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .post-progress__bar,
    .post-share__btn,
    .post-mini,
    .post-mini__media img,
    .post-toc__link,
    .post-toc-inline > summary svg,
    .post-faq__sign::before,
    .post-faq__sign::after { transition: none; }

    .post-share__btn:hover,
    .post-mini:hover { transform: none; }

    .post-mini:hover .post-mini__img { transform: none; }

    .post-related__all:hover svg,
    .post-mini:hover .post-mini__more svg { transform: none; }
}