/* Geotest.ru — Блог (list) + Статья (detail) shared styles.
   Tokens come from ../design-system/tokens.css, shared atoms from
   components.css. Included by both blog.html and article.html since the
   "Похожие публикации" block on Статья reuses the same card grid. */

/* ===================== Blog hero (title) ===================== */
.blog-hero.section-boxed { border-top: none; --corner-mark-border-top: 0px; }
.blog-hero .corner-mark { display: none; }
.blog-hero.section-boxed > .container { padding: 56px var(--space-40) var(--space-40); display: flex; align-items: flex-end; }
.blog-hero__heading { display: flex; flex-direction: column; gap: var(--space-16); }
.blog-hero__heading h1 { font: var(--text-h1-desktop); color: var(--color-grey-20); }
.blog-hero__heading p { font: var(--text-large-desktop); color: var(--color-grey-20); }

/* ===================== Featured post ===================== */
.featured-post.section-boxed > .container { padding-block: 0; }
.featured-post { margin-top: -1px; }
.featured-post .product-card--lead { margin-top: -1px; }
.featured-post > .container { display: flow-root; }
.featured-post .product-card__body-group { gap: var(--space-20); }
.featured-post .badge { align-self: flex-start; }
.featured-post__title { font: var(--text-h3-desktop); color: var(--color-grey-20); }
.featured-post__desc { font: var(--text-medium-desktop); color: var(--color-grey-40); }
.featured-post .button-blue { background: var(--color-grey-20); align-self: flex-start; }
.featured-post .button-blue:hover { background: #000; }
.featured-post .product-card__media-inner {
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    background: var(--color-grey-94);
}
.featured-post .product-card__media-inner img { object-position: 20% center; }

.blog-post-card .badge-tag--muted,
.featured-post .badge-tag--tint {
    padding: var(--space-4) var(--space-8);
    font-size: 12px;
    line-height: 16px;
    --badge-color: var(--color-blue-80);
    mix-blend-mode: normal;
}

.blog-products-cta .cta__body { color: var(--color-grey-40); }

@media (min-width: 1024px) and (max-width: 1199px) {
    .blog-products-cta .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
    .blog-products-cta .cta__illustration {
        display: flex;
        position: absolute;
        top: 0;
        left: 50%;
        right: 0;
        bottom: 0;
        margin: 0;
        overflow: hidden;
    }
}

@media (min-width: 1420px) {
    .blog-products-cta .cta__illustration img {
        object-fit: contain;
        object-position: right center;
        transform: scale(1.2);
        transform-origin: right center;
    }
}

/* ===================== Listing (filter bar + grid + load more) ===================== */
.blog-listing { scroll-margin-top: calc(var(--header-height) + var(--space-24)); }
.blog-listing.section-boxed > .container { padding-block: 0; }
.blog-filter__row {
    display: flex;
    align-items: center;
    gap: var(--space-48);
    padding: var(--space-20) var(--space-40);
}
.blog-listing__grid-wrap { padding: var(--space-24) 0 var(--space-40); }
.blog-grid__more { display: flex; justify-content: center; padding: var(--space-20) 0 0; }

@media (max-width: 766px) {
    .blog-grid__more .button-large { margin-bottom: 20px; }
}

/* ===================== Article header ===================== */
.article-header.section-boxed > .container { padding: var(--space-20) var(--space-40); }
.back-link { margin-bottom: var(--space-20); }
@media (min-width: 481px) {
    .back-link { padding-left: 0; }
}
.article-header.section-boxed { --corner-mark-border-top: 0px; }
.article-header__top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-40);
    padding-top: var(--space-40);
    --corner-mark-border-top: 1px;
    --corner-mark-border-left: var(--space-40);
    --corner-mark-border-right: var(--space-40);
}
.article-header__top .corner-mark--tl,
.article-header__top .corner-mark--tr { top: calc(-10px - var(--corner-mark-border-top, 0px) + 1px); }
.article-header__top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    height: 1px;
    background: var(--color-card-border);
}
.article-header__title { font: var(--text-h1-desktop); color: var(--color-grey-20); max-width: 720px; }
.article-header__tags .badge { --badge-color: var(--color-blue-80); font: var(--text-medium-desktop); }
.article-header__tags { display: flex; gap: var(--space-16); flex-wrap: wrap; justify-content: flex-end; padding-top: var(--space-12); }
.article-header__meta { display: flex; align-items: center; gap: 28px; margin-top: var(--space-24); }
.article-header__author { display: flex; align-items: center; gap: var(--space-8); }
.article-header__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--color-grey-90); flex-shrink: 0; }
.article-header__author-name { font: var(--text-large-desktop); color: var(--color-grey-20); }
.article-header__meta-item { display: flex; align-items: center; gap: var(--space-4); font: var(--text-large-desktop); color: var(--color-grey-46); }

/* ===================== Article body + TOC ===================== */
.article-main { margin-top: -1px; }
.article-main.section-boxed > .container { padding: 0; }
.article-main__grid { display: flex; align-items: flex-start; gap: 0; }
.article-body {
    flex: 1;
    min-width: 0;
    border-right: 1px solid var(--color-card-border);
    padding: var(--space-40) var(--space-40) var(--space-40);
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    font: var(--text-large-desktop);
    color: var(--color-grey-20);
}
.article-body > * { min-width: 0; }
.article-body h2,
.article-body h3,
.article-body h4 { scroll-margin-top: 84px; font: var(--text-h3-desktop); color: var(--color-grey-20); margin-top: var(--space-16); }
.article-body p { font: var(--text-large-desktop); color: var(--color-grey-20); }
.article-body figure { display: flex; flex-direction: column; gap: var(--space-12); margin: 0; }
.article-body figure img,
.article-body .article-figure-inner {
    width: 100%;
    aspect-ratio: 455 / 302;
    border-radius: 0;
}
.article-body .article-figure:has(> .article-figure-inner[href*="apps.apple.com"]),
.article-body .article-figure:has(> .article-figure-inner[href*="play.google.com"]) {
    width: auto;
    flex-basis: auto;
}
.article-body .article-figure-inner[href*="apps.apple.com"],
.article-body .article-figure-inner[href*="play.google.com"] {
    width: auto;
    aspect-ratio: auto;
    align-self: flex-start;
    background: none;
    border: none;
}
.article-body .article-figure-inner[href*="apps.apple.com"] img,
.article-body .article-figure-inner[href*="play.google.com"] img {
    width: auto;
    max-width: none;
    height: 58px;
    aspect-ratio: auto;
    object-fit: contain;
}
.article-body .flow--row:has(> .article-figure > .article-figure-inner[href*="apps.apple.com"]),
.article-body .flow--row:has(> .article-figure > .article-figure-inner[href*="play.google.com"]) {
    gap: var(--space-8);
}
.article-body figcaption { font: var(--text-medium-semibold-desktop); color: var(--color-grey-20); }
.article-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-body table {
    width: 100%;
    min-width: 480px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-3);
    font: var(--text-medium-desktop);
    color: var(--color-grey-20);
}
.article-body thead { background: var(--color-grey-96); }
.article-body th,
.article-body td {
    min-width: 96px;
    padding: var(--space-12) var(--space-16);
    text-align: left;
    overflow-wrap: break-word;
    border-bottom: 1px solid var(--color-card-border);
    border-right: 1px solid var(--color-card-border);
}
.article-body th { font-weight: var(--font-weight-bold); }
.article-body tr:last-child td { border-bottom: none; }
.article-body th:last-child,
.article-body td:last-child { border-right: none; }
.article-body thead th:first-child { border-top-left-radius: var(--radius-3); }
.article-body thead th:last-child { border-top-right-radius: var(--radius-3); }
.article-figure-inner {
    background: var(--color-grey-96);
    border: 1px solid var(--color-card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-52);
    font: var(--text-small-desktop);
    text-align: center;
}

/* ===================== Table of contents (right rail) ===================== */
.article-toc { flex-shrink: 0; width: 360px; padding: var(--space-20) var(--space-40) var(--space-40) var(--space-8); align-self: flex-start; position: sticky; top: 84px; background: var(--color-grey-white); }
.article-toc__title {
    display: block;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    cursor: default;
    font: var(--text-h5-desktop);
    color: var(--color-grey-20);
}
.article-toc__chevron { display: none; }
.article-toc__list { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-20) 0 0 var(--space-12); }
.article-toc__link { font: var(--text-large-desktop); color: var(--color-grey-20); transition: color .12s; }
.article-toc__link:hover { color: var(--color-blue-80); }
.article-toc__link.is-active { font-weight: var(--font-weight-bold); color: var(--color-blue-80); }
@media (min-width: 961px) {
    .article-toc { background: transparent; }
    .article-toc__title { padding-left: var(--space-12); }
}
.article-body .article-figure-inner { margin: 0; width: 100%; }
@media (min-width: 768px) {
    .article-body > .flow > .article-figure:first-of-type .article-figure-inner {
        margin: -32px -32px 0 -32px;
        width: calc(100% + 64px);
    }
}
@media (min-width: 961px) {
    .article-body:only-child { max-width: 1160px; margin-inline: auto; border-right: none; }
}

/* ===================== Навигация по статье: аккордеон ≤960px ===================== */
@media (max-width: 960px) {
    .article-main__grid { flex-direction: column; gap: 0; }
    .article-body { width: 100%; border-right: none; }
    .article-body h2,
    .article-body h3,
    .article-body h4 { scroll-margin-top: 150px; }
    .article-header .corner-mark,
    .article-main .corner-mark { display: none; }
    .article-main.section-boxed { border-top: none; }

    .article-toc {
        order: -1;
        position: sticky;
        top: var(--header-height);
        z-index: 6;
        padding: 0;
        align-self: stretch;
        width: auto;
        margin: 1px 1px 0;
        background: var(--color-grey-white);
    }
    .article-toc::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 100vw;
        margin-left: -50vw;
        height: 1px;
        background: var(--color-card-border);
        z-index: -1;
    }
    .article-toc__inner {
        position: relative;
        margin: 1px;
        padding: var(--space-16) var(--container-margin-mobile);
    }
    .article-toc__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-8);
        width: 100%;
        padding: 11px var(--space-16) 11px var(--space-12);
        border: 1px solid var(--color-card-border);
        border-radius: 3px;
        cursor: pointer;
        font: var(--text-large-mobile);
        transition: border-radius .2s ease-out;
    }
    .article-toc.is-expanded .article-toc__title {
        border-radius: 3px 3px 0 0;
        border-bottom: none;
    }
    .article-toc__chevron { display: block; width: 20px; height: 20px; flex-shrink: 0; transition: transform .2s ease-out; }
    .article-toc.is-expanded .article-toc__chevron { transform: rotate(180deg); }
    .article-toc__list { display: none; flex-direction: column; padding: var(--space-16) 0 0 var(--space-12); gap: var(--space-12); }
    .article-toc.is-expanded .article-toc__list { display: flex; }

    .article-toc.is-stuck .article-toc__list {
        display: flex;
        position: absolute;
        top: 100%;
        margin-top: calc(-1 * var(--space-16));
        left: var(--container-margin-mobile);
        right: var(--container-margin-mobile);
        padding: var(--space-8) var(--space-16);
        gap: 0;
        background: var(--color-grey-white);
        border: 1px solid var(--color-card-border);
        border-top: none;
        border-radius: 0 0 3px 3px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s;
        z-index: 2;
    }
    .article-toc.is-expanded.is-stuck .article-toc__list {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity .2s ease-out, transform .2s ease-out;
    }
    .article-toc.is-stuck .article-toc__link { padding: 10px 0; font-size: 15px; line-height: 1.5; }
    .article-toc.is-stuck .article-toc__list { max-height: 60vh; overflow-y: auto; }

    .article-toc__backdrop {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(51, 51, 51, .4);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease-out, visibility 0s linear .2s;
        z-index: 1;
    }
    .article-toc.is-expanded.is-stuck .article-toc__backdrop {
        opacity: 1;
        visibility: visible;
        transition: opacity .2s ease-out;
    }
}
@media (min-width: 481px) and (max-width: 960px) {
    .article-toc__inner { padding-inline: var(--space-40); }
    .article-toc.is-stuck .article-toc__list { left: var(--space-40); right: var(--space-40); }
    .article-header__tags { justify-content: flex-start; }
}
@media (min-width: 767px) and (max-width: 960px) {
    .article-toc__inner { padding-inline: 16px; }
}
@media (max-width: 1279px) {
    .article-header__top { flex-direction: column; }
    .article-header__tags { order: -1; }
}
@media (min-width: 481px) and (max-width: 1199px) {
    .article-header__top { gap: var(--space-20); padding-top: var(--space-24); }
}
@media (min-width: 1199px) and (max-width: 1278px) {
    .article-header__top { padding-top: var(--space-20); gap: var(--space-20); }
}
@media (max-width: 1199px) {
    .article-header.section-boxed > .container { padding: var(--space-20) 16px; }
    .article-header__top { --corner-mark-border-left: 16px; --corner-mark-border-right: 16px; }
}
/* ===================== Related posts ===================== */
.article-related.section-boxed > .container { padding: var(--space-20) 0 0; }
.article-related .eyebrow { padding-inline: var(--space-40); }
.article-related__title { font: var(--text-h2-desktop); color: var(--color-grey-20); padding-inline: var(--space-40); margin-top: var(--space-8); }
.article-related .blog-grid { margin-top: var(--space-20); grid-template-columns: repeat(3, 1fr); margin-bottom: -1px; }
@media (min-width: 481px) and (max-width: 960px) {
    .article-related .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .article-related .blog-post-card:nth-child(3) { display: none; }
}
.carousel-dots { display: none; align-items: center; justify-content: flex-start; gap: 4px; margin-top: var(--space-16); padding-bottom: var(--space-16); }
.carousel-dots__item { width: 8px; height: 8px; border-radius: 999px; background: var(--color-card-border); flex-shrink: 0; transition: width .2s ease, background-color .2s ease; }
.carousel-dots__item.is-active { width: 24px; background: var(--color-blue-80); }
@media (max-width: 1199px) {
    .article-related .eyebrow { padding-inline: 16px; }
    .article-related__title { padding-inline: 16px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .article-related .corner-mark--tr,
    .article-related .corner-mark--bl,
    .article-related .corner-mark--br { display: none; }
}

/* ===================== Блог — мобайл (≤767px) ===================== */
@media (max-width: 767px) {
    /* ---------- Крестики-уголки: убраны целиком на мобайле ---------- */
    .featured-post .corner-mark,
    .blog-listing .corner-mark { display: none; }

    /* ---------- Хиро (заголовок страницы) ---------- */
    .blog-hero.section-boxed > .container {
        padding: var(--space-24) var(--container-margin-mobile) var(--space-24);
    }
    .blog-hero__heading { gap: var(--space-12); }
    .blog-hero__heading h1 { font: var(--text-h1-mobile); }
    .blog-hero__heading p { font: var(--text-large-mobile); }

    /* ---------- "Новая публикация" ---------- */
    .featured-post .product-card--lead { flex-direction: column-reverse; }
    .featured-post .product-card__media {
        height: 280px;
        padding: var(--space-16);
        border: none;
    }
    .featured-post .product-card__copy {
        padding-inline: var(--container-margin-mobile);
        padding-top: 0;
        padding-bottom: var(--space-16);
        gap: var(--space-16);
    }
    .featured-post .eyebrow { font: var(--text-medium-mobile); }
    .featured-post .product-card__body-group { gap: var(--space-12); }
    .featured-post__title { font: var(--text-h5-mobile); }

    /* ---------- Фильтр: поиск НАД табами, не рядом ---------- */
    .blog-listing.section-boxed > .container { padding-inline: var(--container-margin-mobile); }
    .blog-filter__row { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
    .blog-filter__row .search-bar { order: -1; padding: var(--space-12) 0; }
    .blog-filter__row .tabs { padding: 0 0 var(--space-12); gap: 6px; }
    .blog-filter__row .tab {
        padding: 6px var(--space-12);
        font: var(--text-medium-bold-mobile);
    }

    /* ---------- Карточки: во весь экран, без подложки ---------- */
    .blog-listing__grid-wrap {
        background: none;
        padding: 0;
        margin-inline: calc(-1 * var(--container-margin-mobile));
    }
    .blog-grid { border-left: none; }
    .blog-post-card__media { padding: var(--space-16); border-bottom: none; }
    .blog-post-card__body { padding: var(--space-4) var(--space-16) var(--space-32); }
    .blog-post-card__title { font: var(--text-h6-mobile); }

    .button-large { padding: 11px 20px; height: auto; }
    .blog-grid__more { padding-inline: var(--container-margin-mobile); }
    .blog-listing::after { display: none; }
    .footer__divider { display: none; }
}

/* ===================== Сетка карточек: 2 колонки, 481–1023px ===================== */
@media (min-width: 481px) and (max-width: 1023px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-post-card { border-right: 1px solid var(--color-card-border); }
    .blog-post-card--wide .blog-post-card__body { padding-top: var(--space-16); }
}

/* ===================== Широкая карточка: ширина по брейкпоинтам ===================== */
@media (max-width: 1023px) {
    .blog-post-card--wide { grid-column: 1 / -1; }
}

/* ===================== Широкая карточка — раскладка по ширине экрана ===================== */
@media (max-width: 480px) {
    .featured-post .button-blue { align-self: stretch; width: 100%; }
    .blog-grid__more .button-large { width: 100%; }

    .blog-grid { grid-template-columns: 1fr; }
    .blog-post-card { border-right: none; }
    .blog-post-card--wide { flex-direction: column-reverse; background: rgba(10, 109, 174, .04); }
    .blog-post-card--wide .blog-post-card__media { flex: none; height: 224px; padding: var(--space-16); border-bottom: none; }
    .blog-post-card--wide .blog-post-card__body { border-right: none; justify-content: flex-start; gap: 0; }
    .blog-post-card--wide .blog-post-card__meta { margin-bottom: var(--space-12); }
    .blog-post-card--wide .blog-post-card__title { font: var(--text-h5-mobile); margin-bottom: var(--space-8); }
    .blog-post-card--wide .blog-post-card__desc { font: var(--text-medium-mobile); color: var(--color-grey-40); }
    .blog-post-card--wide .blog-post-card__arrow { margin-top: var(--space-20); }
    .blog-post-card--wide .badge-tag--muted { --badge-bg: #fff; }
}

@media (min-width: 481px) {
    .blog-post-card--wide .blog-post-card__body,
    .blog-post-card--wide .blog-post-card__media {
        flex: 0 0 50%;
    }
    .blog-post-card--wide .blog-post-card__title { margin-bottom: var(--space-12); }
}

/* ===================== .featured-post — раскладка по ширине экрана ===================== */
@media (min-width: 768px) {
    .featured-post .product-card--lead { flex-direction: row; }
    .featured-post .product-card__copy,
    .featured-post .product-card__media {
        flex: 0 0 50%;
        width: auto;
    }
    .featured-post .product-card__media {
        border-left: 1px solid var(--color-card-border);
        border-top: none;
    }

}
@media (min-width: 768px) and (max-width: 1199px) {
    .featured-post .product-card__body-group { gap: var(--space-16); }
    .featured-post .product-card__copy { gap: var(--space-24); }
}

/* ===================== Заголовок обычной карточки: h6 на 767–1279px ===================== */
@media (min-width: 767px) and (max-width: 1279px) {
    .blog-post-card__title { font: var(--text-h6-desktop); }
}

/* ===================== Карточка перед широкой: убрать пустоту 768–1023px ===================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .blog-post-card:has(+ .blog-post-card--wide) { order: 1; }
}

/* ===================== Серая подложка сетки — во весь экран (≥768px) ===================== */
@media (min-width: 768px) {
    .blog-listing__grid-wrap { position: relative; z-index: 0; }
    .blog-listing__grid-wrap::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        margin-left: -50vw;
        z-index: -1;
        background: var(--color-grey-96);
        border-top: 1px solid var(--color-card-border);
    }
}

/* ===================== Строка фильтра: поиск над табами, 767–1279px ===================== */
@media (min-width: 767px) and (max-width: 1279px) {
    .blog-filter__row { flex-direction: column; align-items: stretch; gap: 0; padding-inline: var(--container-gutter); }
    .blog-filter__row .search-bar {
        position: relative;
        order: -1;
        margin-bottom: var(--space-20);
        padding-bottom: var(--space-20);
    }
}
@media (min-width: 768px) and (max-width: 1279px) {
    .blog-filter__row .search-bar::after {
        content: "";
        position: absolute;
        left: calc(-1 * var(--container-gutter));
        right: calc(-1 * var(--container-gutter));
        bottom: 0;
        height: 1px;
        background: var(--color-card-border);
    }
}

/* ===================== Статья — мобайл, типографика (≤767px) ===================== */
@media (max-width: 767px) {
    .article-header__title { font: var(--text-h2-mobile); }
    .article-header__author-name { font: var(--text-large-mobile); }
    .article-body { font: var(--text-large-mobile); }
    .article-body h2,
    .article-body h3,
    .article-body h4 { font: var(--text-h3-mobile); }
    .article-body p { font: var(--text-large-mobile); }
    .article-body figcaption { font: var(--text-small-semibold-mobile); }
    .article-related__title { font: var(--text-h2-mobile); }
    .article-toc__inner { display: none; }

    .article-related .corner-mark--tr,
    .article-related .corner-mark--bl,
    .article-related .corner-mark--br { display: none; }
    .article-related .corner-mark--tl { left: 6px; }
}

/* ===================== Статья — мобайл (≤480px) ===================== */
@media (max-width: 480px) {
    .article-header.section-boxed > .container { padding: var(--space-12) var(--container-margin-mobile) var(--space-24); }
    .back-link { margin-bottom: var(--space-12); padding-top: var(--space-8); padding-bottom: var(--space-8); padding-left: 0; padding-right: 0; }
    .article-header__top {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 0;
    }
    .article-header__tags { order: -1; justify-content: flex-start; gap: var(--space-8); padding-top: var(--space-16); padding-bottom: var(--space-16); }
    .article-header__tags .badge {
        padding: var(--space-4) var(--space-8);
        font-size: 12px;
        line-height: 16px;
    }
    .article-header__title { max-width: none; }
    .article-header__meta { flex-wrap: wrap; justify-content: space-between; gap: var(--space-16) 0; margin-top: var(--space-16); }
    .article-header__author { flex-basis: 100%; }

    .article-body {
        padding: var(--space-16) var(--container-margin-mobile);
        gap: var(--space-16);
    }
    .article-body h2,
    .article-body h3,
    .article-body h4 { margin-top: var(--space-12); }

    /* ---------- Похожие публикации: горизонтальная карусель ---------- */
    .article-related.section-boxed > .container { padding: var(--space-16) var(--container-margin-mobile) 0; }
    .article-related .eyebrow { padding-inline: 0; }
    .article-related__title { padding-inline: 0; }
    .article-related .blog-grid {
        display: flex;
        gap: var(--space-12);
        margin-top: var(--space-16);
        margin-bottom: 0;
        margin-inline: calc(-1 * var(--container-margin-mobile));
        padding-left: var(--container-margin-mobile);
        scroll-padding-left: var(--container-margin-mobile);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        border-left: none;
        border-top: none;
        scrollbar-width: none;
    }
    .article-related .blog-grid::-webkit-scrollbar { display: none; }
    .article-related .blog-post-card { flex: 0 0 300px; scroll-snap-align: start; border: 1px solid var(--color-card-border); }
    .article-related .carousel-dots { display: flex; }
}