/* ============================================================
   SS.ge — Blog responsive overrides
   Companion to blog.css. Breakpoints follow the legacy stack:
     1630 / 1300 / 1200 / 1100 / 768 / 600
   ============================================================ */

/* ============================================================
   1630px — narrower aside, tighter gutters
   ============================================================ */
@media (max-width: 1630px) {
    :root {
        --container-max: 1260px;
        --aside-width: 280px;
    }

    .blog-card {
        grid-template-columns: 360px minmax(0, 1fr);
        gap: var(--s-5);
    }
}

/* ============================================================
   1300px — aside becomes lighter; card thumb shrinks
   ============================================================ */
@media (max-width: 1300px) {
    :root {
        --container-gutter: 24px;
        --aside-width: 260px;
        --layout-gap: 24px;
    }

    .blog-list-page__title {
        font-size: 30px;
    }

    .article-main {
        padding: var(--s-6);
    }

    .article-title {
        font-size: 26px;
    }

    .blog-card {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: var(--s-4);
    }

    .blog-card__title {
        font-size: 17px;
    }

    .blog-card__excerpt {
        -webkit-line-clamp: 3;
    }

    .related__grid {
        gap: var(--s-4);
    }
}

/* ============================================================
   1200px — single column: aside drops below main
   ============================================================ */
@media (max-width: 1200px) {
    .blog-layout,
    .article-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-aside {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-4);
    }

    .aside-brand {
        grid-column: 1 / -1;
    }

    .aside-ad--placeholder {
        aspect-ratio: 16 / 9;
    }
}

/* ============================================================
   1100px — top tighten
   ============================================================ */
@media (max-width: 1100px) {
    .blog-list-page {
        padding: var(--s-6) 0 var(--s-12);
    }
}

/* ============================================================
   768px — stack card; smaller type; aside becomes single column
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --container-gutter: 16px;
        --layout-gap: 20px;
    }

    /* List page */
    .blog-list-page {
        padding: var(--s-5) 0 var(--s-10);
    }

    .blog-list-page__title {
        font-size: 24px;
    }

    .blog-categories {
        padding-bottom: var(--s-2);
    }

    .blog-category {
        height: 36px;
        padding: 0 var(--s-4);
        font-size: 13px;
    }

    /* Card stacks: image on top, body below */
    .blog-card {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-3);
        padding: var(--s-3);
    }

    .blog-card__media {
        aspect-ratio: 16 / 9;
    }

    .blog-card__body {
        padding: 0;
    }

    .blog-card__title {
        font-size: 16px;
    }

    .blog-card__excerpt {
        font-size: 13px;
        -webkit-line-clamp: 3;
    }

    .blog-meta {
        margin-top: var(--s-3);
        padding-top: var(--s-3);
    }

    .blog-meta__item {
        font-size: 11px;
    }

    /* Pagination */
    .pagination {
        gap: var(--s-1);
        margin-top: var(--s-6);
    }

    .pagination__item,
    .pagination__nav {
        min-width: 40px;
        height: 40px;
        padding: 0 var(--s-2);
        font-size: 13px;
    }

    /* Aside on small screens — single column again */
    .blog-aside {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Breadcrumbs */
    .breadcrumbs {
        padding: var(--s-4) 0 var(--s-2);
        font-size: 12px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

        .breadcrumbs::-webkit-scrollbar {
            display: none;
        }

    /* Article page */
    .article-hero {
        border-radius: var(--radius-md);
    }

    .article-main-col {
        gap: var(--s-3);
    }

    .article-main {
        padding: var(--s-5) var(--s-4);
    }

    .article-toolbar {
        margin-bottom: var(--s-4);
    }

    .article-title {
        font-size: 22px;
        margin-bottom: var(--s-4);
    }

    .article-body {
        font-size: 14px;
        line-height: 1.65;
    }

        .article-body h2 {
            font-size: 19px;
        }

        .article-body h3 {
            font-size: 17px;
        }

    /* Author footer */
    .article-author {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-3);
        margin-top: var(--s-6);
    }

    .article-author__avatar {
        width: 44px;
        height: 44px;
    }

    /* Related articles → single column scroll */
    .related {
        margin-top: var(--s-8);
    }

    .related__title {
        font-size: 18px;
    }

    .related__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-4);
    }
}

/* ============================================================
   600px — tightest mobile
   ============================================================ */
@media (max-width: 600px) {
    :root {
        --container-gutter: 12px;
    }

    .blog-list-page__title {
        font-size: 22px;
        margin-bottom: var(--s-4);
    }

    .blog-card__title {
        font-size: 15px;
    }

    .blog-card__excerpt {
        -webkit-line-clamp: 2;
    }

    .blog-meta {
        gap: var(--s-2);
    }

    .blog-meta__divider {
        display: none;
    }

    .article-title {
        font-size: 20px;
    }

    .article-action {
        width: 34px;
        height: 34px;
    }

        .article-action svg {
            width: 16px;
            height: 16px;
        }
}

/* ============================================================
   RSS strip — mobile: horizontal scroll, blog-card item style
   ============================================================ */
@media (max-width: 768px) {
    /* Remove card wrapper styling on mobile */
    .aside-card.aside-rss {
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        overflow: visible;
    }

    .aside-rss__strip {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--s-1);
        gap: var(--s-3);
    }

    .aside-rss__strip::-webkit-scrollbar {
        height: 4px;
    }

    .aside-rss__strip::-webkit-scrollbar-track {
        background: var(--bg-muted);
        border-radius: 2px;
    }

    .aside-rss__strip::-webkit-scrollbar-thumb {
        background: var(--border-1);
        border-radius: 2px;
    }

    /* blog-card mobile style: full-width card, shows partial next card */
    .aside-rss__item {
        display: flex;
        flex-direction: column;
        flex: 0 0 calc(100% - 40px);
        scroll-snap-align: start;
        gap: var(--s-3);
        align-items: stretch;
        background: var(--bg-canvas);
        border: 1px solid var(--border-1);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        padding: var(--s-3);
        overflow: hidden;
    }

    .aside-rss__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: var(--radius-sm);
        background-color: var(--bg-muted);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        flex-shrink: 0;
    }

    .aside-rss__body {
        padding: 0;
    }

    .aside-rss__title {
        font-size: 13px;
    }
}