/* =============================================================================
   Ovebot blog — layouts on top of the site's design system.

   Loaded AFTER the site's /css/dist/content.css, which already brings the
   tokens (--ink, --violet-*, --grad, --glass, --radius…), fonts, header,
   footer, buttons, pills, breadcrumbs and the closing CTA. Everything here
   is built from those tokens, so a change of brand colours on the site
   reaches the blog without touching this file.

   Sections:
     1. Utilities          5. Article header + cover
     2. Hero (listings)    6. Article layout, outline, prose
     3. Topics             7. Share, tags, author box
     4. Cards + grid       8. Pagination, related, empty states
   ========================================================================== */

/* ── 1. Utilities ───────────────────────────────────────────────────────── */
/* The site's sticky bar gets shorter once the page passes 8px. With scroll
   anchoring on, the browser answers that by scrolling back up by the same
   amount, which drops the page under 8px again: the bar would flicker for
   ever right after a refresh a little below the top. */
html {
    overflow-anchor: none;
}
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-link:focus {
    position: fixed !important;
    top: 12px;
    left: 12px;
    z-index: 10000;
    width: auto;
    height: auto;
    clip: auto;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
}
:target {
    scroll-margin-top: 96px;
}

/* ── 2. Hero (index, topics, pages) ─────────────────────────────────────── */
.blog-hero {
    padding-bottom: 28px;
}
.blog-hero-copy {
    max-width: 780px;
}
.blog-hero .lede p {
    margin: 0;
}
.blog-hero-count {
    margin: 14px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-muted);
}
.blog-hero.is-article .blog-hero-copy {
    max-width: 860px;
}
h1.display.blog-title {
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.1;
    text-wrap: balance;
}
.blog-pill {
    text-decoration: none;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.blog-pill:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* ── 3. Topics ──────────────────────────────────────────────────────────── */
.blog-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}
.blog-topic {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.blog-topic:hover {
    color: var(--violet-700);
    border-color: var(--violet-200);
}
.blog-topic.is-active {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--glow);
}
.blog-topic-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--violet-50);
    color: var(--violet-700);
    font-size: 12px;
    text-align: center;
}
.blog-topic.is-active .blog-topic-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ── 4. Cards + grid ────────────────────────────────────────────────────── */
.blog-list {
    padding: 8px 0 56px;
}
.blog-section-title {
    margin: 52px 0 22px;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.blog-card {
    min-width: 0;
}
.blog-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-line);
    background: var(--glass-strong);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.blog-card-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--violet-200);
}
.blog-card-link:focus-visible {
    outline: 3px solid var(--violet-400);
    outline-offset: 3px;
}
.blog-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--violet-50), #e8f6ff);
}
.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.blog-card-link:hover .blog-card-media img {
    transform: scale(1.035);
}
.blog-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px 22px;
}
.blog-card-topic {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--violet-50);
    color: var(--violet-700);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}
.blog-card-title {
    margin: 0;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-wrap: balance;
}
.blog-card-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 13px;
    color: var(--ink-muted);
}
.blog-card-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--violet-600);
}
.blog-card-more svg {
    transition: transform .25s var(--ease);
}
.blog-card-link:hover .blog-card-more svg {
    transform: translateX(3px);
}

/* Featured: image left, text right; stacks on phones. */
.blog-card.is-featured .blog-card-link {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.blog-card.is-featured .blog-card-media {
    aspect-ratio: auto;
    min-height: 100%;
}
.blog-card.is-featured .blog-card-body {
    justify-content: center;
    gap: 14px;
    padding: 40px 44px;
}
.blog-card.is-featured .blog-card-title {
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.blog-card.is-featured .blog-card-text {
    font-size: 16.5px;
    -webkit-line-clamp: 4;
}
.blog-card.is-featured .blog-card-meta {
    margin-top: 4px;
}

/* ── 5. Article header + cover ──────────────────────────────────────────── */
.blog-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}
.blog-byline-avatar {
    flex: none;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: var(--shadow-sm);
}
.blog-byline-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.blog-byline-author {
    font-size: 15px;
    color: var(--ink-soft);
}
.blog-byline-author strong {
    color: var(--ink);
}
.blog-byline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 13.5px;
    color: var(--ink-muted);
}
.blog-byline-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.blog-cover {
    margin-top: 6px;
    margin-bottom: 0;
}
.blog-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-line);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--violet-50), #e8f6ff);
}
.blog-cover figcaption {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink-muted);
    text-align: center;
}

/* ── 6. Article layout, outline, prose ──────────────────────────────────── */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    gap: 56px;
    padding-top: 48px;
    padding-bottom: 32px;
}
/* With the side column the pair spans the full width of the cover image. */
.blog-layout.has-aside {
    grid-template-columns: 280px minmax(0, 1fr);
}
.blog-main {
    min-width: 0;
}
/* Two independent boxes. By default the outline sticks over the whole
   column (scrolling on its own when taller than the window) and "Recommended
   reading" waits at the end of the column. When both fit the window together
   blog.js adds .is-stacked and the column follows the page as one block. */
.blog-aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}
.blog-aside > * {
    min-width: 0;
}
.blog-aside-toc {
    flex: 1 0 auto;
}
.blog-aside-toc .blog-toc {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 116px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.blog-aside.is-stacked {
    position: sticky;
    top: 96px;
    align-self: start;
}
.blog-aside.is-stacked .blog-aside-toc {
    flex: none;
}
.blog-toc,
.blog-reading {
    padding: 18px 18px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-line);
    background: var(--glass-strong);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow-sm);
}
.blog-toc summary,
.blog-reading-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    cursor: pointer;
    list-style: none;
}
.blog-toc summary::-webkit-details-marker {
    display: none;
}
.blog-toc ol {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}
.blog-toc li {
    counter-increment: toc;
}
.blog-toc a {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 4px;
    padding: 7px 8px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.blog-toc a::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.9;
    color: var(--violet-400);
}
.blog-toc a:hover {
    background: var(--violet-50);
    color: var(--violet-700);
}
.blog-toc a.is-current {
    background: var(--violet-50);
    color: var(--violet-700);
    font-weight: 600;
}
.blog-reading-title {
    margin: 0;
}
.blog-reading ul {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.blog-reading a {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.blog-reading a:hover {
    background: var(--violet-50);
    color: var(--violet-700);
}
.blog-reading-text {
    min-width: 0;
}
.blog-reading-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: var(--violet-50);
}
.blog-reading-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Prose: long-form reading. 18px / 1.75 on a 70-80 character line. */
.blog-prose {
    font-size: 18px;
    line-height: 1.75;
    color: var(--ink-soft);
    /* Long URLs (sources) break instead of widening the page on phones. */
    overflow-wrap: break-word;
}
.blog-prose > * {
    margin-top: 0;
    margin-bottom: 1.25em;
}
.blog-prose > :last-child {
    margin-bottom: 0;
}
.blog-prose h2,
.blog-prose h3,
.blog-prose h4 {
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.blog-prose h2 {
    margin: 2.2em 0 .7em;
    font-size: clamp(24px, 2.4vw, 30px);
    line-height: 1.2;
}
.blog-prose h3 {
    margin: 1.8em 0 .55em;
    font-size: 21px;
    line-height: 1.3;
}
.blog-prose h4 {
    margin: 1.6em 0 .5em;
    font-size: 18px;
}
.blog-prose a {
    color: var(--violet-700);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--violet-300);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s var(--ease);
}
.blog-prose a:hover {
    text-decoration-color: var(--violet-700);
}
.blog-prose strong {
    color: var(--ink);
}
.blog-prose ul,
.blog-prose ol {
    padding-left: 1.3em;
}
.blog-prose li + li {
    margin-top: .45em;
}
.blog-prose ul li::marker {
    color: var(--violet-500);
}
.blog-prose ol li::marker {
    color: var(--violet-600);
    font-weight: 700;
}
.blog-prose blockquote,
.blog-prose .wp-block-quote {
    margin: 2em 0;
    padding: 6px 0 6px 24px;
    border-left: 3px solid transparent;
    border-image: var(--grad) 1;
    font-family: var(--font-display);
    font-size: 23px;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink);
}
.blog-prose blockquote cite {
    display: block;
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    color: var(--ink-muted);
}
.blog-prose figure {
    margin: 2em 0;
}
.blog-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}
.blog-prose .wp-block-image img {
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow);
}
.blog-prose figcaption,
.blog-prose .wp-element-caption {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-muted);
    text-align: center;
}
.blog-prose hr {
    height: 1px;
    margin: 2.5em 0;
    border: 0;
    background: var(--line-strong);
}
.blog-prose code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--violet-50);
    color: var(--violet-700);
    font-family: var(--font-mono);
    font-size: .85em;
}
.blog-prose pre {
    overflow-x: auto;
    padding: 18px 20px;
    border-radius: var(--radius);
    background: var(--indigo-900);
    color: #ece8ff;
    font-size: 14px;
    line-height: 1.6;
}
.blog-prose pre code {
    padding: 0;
    background: none;
    color: inherit;
}

/* Tables scroll inside their own box on phones, never the page. */
.blog-prose .wp-block-table {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-strong);
    background: var(--card);
    box-shadow: var(--shadow-sm);
}
.blog-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
}
.blog-prose .wp-block-table thead,
.blog-prose .wp-block-table tfoot {
    border: 0;
}
.blog-prose th,
.blog-prose td {
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.blog-prose thead th {
    background: var(--surface-2);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.blog-prose tbody tr:last-child td {
    border-bottom: 0;
}
.blog-prose .is-style-ovebot-compare td:first-child {
    font-weight: 700;
    color: var(--ink);
}
.blog-prose .wp-block-table figcaption {
    padding: 0 16px 12px;
}

/* "Key takeaways": the answer-first summary at the top of an article. */
.blog-prose .is-style-ovebot-takeaways {
    position: relative;
    margin: 0 0 2.2em;
    padding: 26px 28px 24px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--violet-200);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(92, 200, 255, .14), transparent 55%),
        linear-gradient(135deg, #fff, var(--violet-50));
    box-shadow: var(--shadow);
    font-size: 17px;
}
.blog-prose .is-style-ovebot-takeaways > :first-child {
    margin-top: 0;
}
.blog-prose .is-style-ovebot-takeaways .takeaways-title {
    margin: 0 0 12px;
    font-size: 15px;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.blog-prose .is-style-ovebot-takeaways .takeaways-title strong {
    color: inherit;
}
.blog-prose .is-style-ovebot-takeaways ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.blog-prose .is-style-ovebot-takeaways li {
    position: relative;
    padding-left: 30px;
}
.blog-prose .is-style-ovebot-takeaways li::before {
    content: "";
    position: absolute;
    top: .35em;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--grad) center / cover;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E");
}
.blog-prose .is-style-ovebot-takeaways li::after {
    content: "";
    position: absolute;
    top: calc(.35em + 5px);
    left: 6px;
    width: 6px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

/* "Note": a tip inside the text. */
.blog-prose .is-style-ovebot-note {
    padding: 18px 22px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-strong);
    border-left: 4px solid var(--sky);
    background: var(--card);
    font-size: 16.5px;
}
.blog-prose .is-style-ovebot-note > :last-child {
    margin-bottom: 0;
}

/* Yoast FAQ block, rendered as the site's .faq accordion (inc/content.php). */
.blog-prose .blog-faq {
    max-width: none;
    margin: 0 0 1.6em;
}
.blog-prose .faq-q {
    font-size: 17px;
}
.blog-prose .faq-a {
    font-size: 16px;
}
.blog-prose .faq-a > :first-child {
    margin-top: 0;
}
.blog-prose .faq-a > :last-child {
    margin-bottom: 0;
}

/* Buttons placed in the text use the site's .btn look. */
.blog-prose .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 12px;
    background: var(--grad);
    box-shadow: var(--glow);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

/* ── 7. Share, tags, author box ─────────────────────────────────────────── */
/* Under every article: written with AI help, reviewed by an editor. */
.blog-ai-note {
    margin: 36px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--glass-line);
    font-size: 14px;
    font-style: italic;
    line-height: 1.6;
    color: var(--ink-muted);
}
.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}
.blog-tags a {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--violet-50);
    color: var(--violet-700);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.blog-tags a:hover {
    background: var(--violet-200);
}
.blog-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line-strong);
}
.blog-share-label {
    margin-right: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}
.blog-share-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--ink-soft);
    cursor: pointer;
    transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.blog-share-btn:hover {
    color: var(--violet-700);
    border-color: var(--violet-300);
    transform: translateY(-1px);
}
.blog-share-btn.is-copied {
    color: #fff;
    border-color: transparent;
    background: var(--ok);
}
.blog-author {
    display: flex;
    gap: 18px;
    margin-top: 36px;
    padding: 24px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-line);
    background: var(--glass-strong);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow-sm);
}
.blog-author-avatar {
    flex: none;
    border-radius: 50%;
}
.blog-author-label {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.blog-author-name {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
}
.blog-author-bio {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* ── 8. Pagination, related, empty states ───────────────────────────────── */
.blog-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 44px;
}
.blog-pagination .page-numbers {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--ink-soft);
    font-weight: 700;
    text-decoration: none;
    transition: border-color .2s var(--ease), color .2s var(--ease);
}
.blog-pagination a.page-numbers:hover {
    border-color: var(--violet-300);
    color: var(--violet-700);
}
.blog-pagination .page-numbers.current {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--glow);
}
.blog-pagination .page-numbers.dots {
    border: 0;
    background: none;
}
.blog-related {
    padding: 24px 0 40px;
}
.blog-related .blog-section-title {
    margin-top: 24px;
}
.blog-empty {
    padding: 48px 0;
    font-size: 17px;
    color: var(--ink-muted);
    text-align: center;
}
.blog-final {
    padding: 24px 0 64px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .blog-layout.has-aside {
        grid-template-columns: minmax(0, 760px);
        gap: 0;
    }
    .blog-aside.is-stacked,
    .blog-aside-toc .blog-toc {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .blog-toc {
        margin-bottom: 32px;
    }
    /* Below the two columns the newest articles are already in "Keep reading". */
    .blog-reading {
        display: none;
    }
}
@media (max-width: 960px) {
    .blog-card.is-featured .blog-card-link {
        grid-template-columns: 1fr;
    }
    .blog-card.is-featured .blog-card-media {
        aspect-ratio: 16 / 9;
    }
    .blog-card.is-featured .blog-card-body {
        padding: 24px 24px 26px;
    }
}
@media (max-width: 640px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .blog-topics {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: -28px;
        padding: 2px 28px 6px;
        scrollbar-width: none;
    }
    .blog-topics::-webkit-scrollbar {
        display: none;
    }
    .blog-topic {
        flex: none;
    }
    .blog-layout {
        padding-top: 32px;
    }
    .blog-prose {
        font-size: 17px;
    }
    /* Tables keep readable columns and scroll sideways in their frame. */
    .blog-prose table {
        min-width: 560px;
    }
    .blog-prose .is-style-ovebot-takeaways {
        padding: 20px;
    }
    .blog-author {
        flex-direction: column;
    }
    .blog-cover img {
        border-radius: var(--radius-lg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .blog-card-link,
    .blog-card-media img,
    .blog-card-more svg,
    .blog-share-btn {
        transition: none;
    }
    .blog-card-link:hover,
    .blog-card-link:hover .blog-card-media img {
        transform: none;
    }
}