/* Blog / مقالات — mobile & tablet (desktop ≥1025px unchanged) */
@media (max-width: 1024px) {
    .mk-blog-page,
    html.mk-blog-hub-page .mk-blog-hub {
        --blg-m-pad: clamp(1rem, 4.2vw, 1.35rem);
        --blg-m-touch: 2.75rem;
        --blg-m-body: clamp(0.875rem, 3.6vw, 0.9375rem);
        --blg-m-caption: clamp(0.75rem, 3.2vw, 0.8125rem);
    }

    .mk-blog-page .mk-pub-wrap,
    .mk-blog-hub-page .main-content {
        overflow-x: clip;
        max-width: 100%;
    }

    .mk-blog-hub-page .container {
        padding-inline: var(--blg-m-pad);
        min-width: 0;
    }

    /* Article detail — shared tablet/mobile */
    .mk-blog-detail .mk-blog-detail-page {
        overflow-x: clip;
        max-width: 100%;
    }

    .mk-blog-detail .container.mk-blog-detail-layout,
    .mk-blog-detail .container.mk-blog-featured-hero {
        padding-inline: var(--blg-m-pad);
        min-width: 0;
    }

    .mk-blog-detail .mk-blog-detail-aside {
        position: static;
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .mk-blog-detail .mk-blog-toc-card.is-mobile-open {
        z-index: 1210;
        max-height: min(78dvh, 560px);
        padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    }

    .mk-blog-detail .mk-blog-toc-card.is-mobile-open::before {
        content: '';
        display: block;
        width: 2.5rem;
        height: 0.28rem;
        margin: 0 auto 0.7rem;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.38);
    }

    .mk-blog-detail .mk-blog-toc-card.is-mobile-open .mk-blog-toc-list {
        max-height: calc(78dvh - 6.5rem);
        -webkit-overflow-scrolling: touch;
    }

    body.mk-blog-toc-open {
        overflow: hidden;
    }

    .mk-blog-detail .mk-blog-toc-backdrop.is-visible {
        z-index: 1200;
    }
}

@media (max-width: 767px) {
    /* List hub */
    .mk-blog-hub-page .blg-hero__shell {
        min-height: clamp(16rem, 48vw, 20rem);
        padding-top: clamp(6.5rem, 34vw, 9.5rem);
    }

    .mk-blog-hub-page .blg-hero__title-main {
        font-size: clamp(1.35rem, 6vw, 1.65rem);
    }

    .mk-blog-hub-page .blg-hero__title-accent {
        font-size: clamp(1.15rem, 5vw, 1.4rem);
    }

    .mk-blog-hub-page .blg-hero__lead {
        max-width: none;
        font-size: var(--blg-m-body);
        line-height: 1.75;
    }

    .mk-blog-hub-page .blg-hero__metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .mk-blog-hub-page .blg-hero__metric:not(:first-child) {
        padding-inline-start: 0;
    }

    .mk-blog-hub-page .blg-hero__metric:not(:first-child)::before {
        display: none;
    }

    .mk-blog-hub-page .blg-hero__metric dt {
        font-size: 0.65rem;
    }

    .mk-blog-hub-page .blg-hero__topics {
        gap: 0.35rem;
    }

    .mk-blog-hub-page .blg-hero__topics > span:not(.blg-hero__topics-sep) {
        padding: 0.28rem 0.5rem;
        font-size: var(--blg-m-caption);
        background: rgba(124, 58, 237, 0.06);
        border-radius: 999px;
    }

    .mk-blog-hub-page .blg-hero__topics-sep {
        display: none;
    }

    .mk-blog-hub-page .mk-blog-filter-bar {
        position: sticky;
        top: var(--mk-site-header-h, 3.35rem);
        z-index: 800;
        padding: 0.45rem 0;
        background: color-mix(in srgb, #f7f8fc 92%, transparent);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    }

    .mk-blog-hub-page .mk-blog-filter-nav {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mk-blog-hub-page .mk-blog-filter-pill {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .mk-blog-hub-page .mk-blog-list-band {
        padding-block: 1.25rem 1.5rem;
    }

    .mk-blog-hub-page .mk-blog-grid {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .mk-blog-hub-page .mk-blog-filter-pill {
        min-height: var(--blg-m-touch);
        padding: 0.5rem 0.95rem;
        font-size: var(--blg-m-body);
        -webkit-tap-highlight-color: transparent;
    }

    .mk-blog-hub-page .mk-blog-featured-media {
        min-height: 12rem;
        max-height: 42vw;
    }

    .mk-blog-hub-page .mk-blog-featured-title {
        font-size: var(--blg-m-body);
        line-height: 1.55;
    }

    .mk-blog-hub-page .mk-blog-featured-cta {
        width: 100%;
        justify-content: center;
        min-height: var(--blg-m-touch);
        margin-top: 0.65rem;
        font-size: var(--blg-m-body);
    }

    .mk-blog-hub-page .mk-blog-card {
        border-radius: 14px;
    }

    .mk-blog-hub-page .mk-blog-card-title {
        font-size: var(--blg-m-body);
        line-height: 1.55;
    }

    .mk-blog-hub-page .mk-blog-cta-card {
        text-align: center;
        padding: 1.15rem 1rem;
    }

    .mk-blog-hub-page .mk-blog-cta-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .mk-blog-hub-page .mk-blog-cta-actions .btn {
        min-height: var(--blg-m-touch);
        width: 100%;
        justify-content: center;
    }

    /* Article detail */
    .mk-blog-detail .mk-blog-detail-hero {
        padding-block: 1.15rem 1rem;
        margin-bottom: 0.65rem;
    }

    .mk-blog-detail .mk-blog-detail-hero-inner {
        padding-inline: var(--blg-m-pad);
    }

    .mk-blog-detail .mk-blog-breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0.75rem;
        font-size: var(--blg-m-caption);
    }

    .mk-blog-detail .mk-blog-breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .mk-blog-detail .mk-blog-breadcrumb a,
    .mk-blog-detail .mk-blog-breadcrumb-current {
        flex-shrink: 0;
    }

    .mk-blog-detail .mk-blog-detail-hero-tags {
        gap: 0.3rem;
        margin-bottom: 0.55rem;
    }

    .mk-blog-detail .mk-blog-detail-hero h1 {
        font-size: clamp(1.25rem, 5.5vw, 1.55rem);
        line-height: 1.35;
        text-wrap: balance;
        margin-bottom: 0.45rem;
    }

    .mk-blog-detail .mk-blog-detail-lead {
        font-size: var(--blg-m-body);
        line-height: 1.75;
        margin-bottom: 0.75rem;
    }

    .mk-blog-detail .mk-blog-detail-meta-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        padding: 0.75rem;
        border-radius: 14px;
        background: rgba(124, 58, 237, 0.04);
        border: 1px solid rgba(124, 58, 237, 0.08);
    }

    html.mk-public[data-theme="dark"] .mk-blog-detail .mk-blog-detail-meta-panel {
        background: rgba(124, 58, 237, 0.08);
        border-color: rgba(167, 139, 250, 0.12);
    }

    .mk-blog-detail .mk-blog-detail-author {
        gap: 0.65rem;
    }

    .mk-blog-detail .mk-blog-author-avatar {
        width: 2.35rem;
        height: 2.35rem;
        font-size: 0.85rem;
    }

    .mk-blog-detail .mk-blog-meta-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        width: 100%;
    }

    .mk-blog-detail .mk-blog-meta-chip {
        font-size: var(--blg-m-caption);
        padding: 0.32rem 0.55rem;
        border-radius: 999px;
    }

    .mk-blog-detail .mk-blog-featured-hero {
        margin-bottom: 0.85rem;
    }

    .mk-blog-detail .mk-blog-featured-figure {
        margin: 0;
    }

    .mk-blog-detail .mk-blog-featured-figure-frame {
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, 0.14);
    }

    .mk-blog-detail .mk-blog-featured-figure-frame img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        max-height: min(52vw, 15.5rem);
    }

    .mk-blog-detail .mk-blog-detail-layout {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .mk-blog-detail .mk-blog-detail-main {
        order: 1;
        min-width: 0;
    }

    .mk-blog-detail .mk-blog-detail-aside {
        order: 2;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }

    .mk-blog-detail .mk-blog-article-toolbar {
        position: sticky;
        top: calc(var(--mk-site-header-h, 3.35rem) + 2px);
        z-index: 780;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.45rem;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.65rem;
        border-radius: 14px;
        background: color-mix(in srgb, var(--mk-card, #fff) 92%, transparent);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(148, 163, 184, 0.14);
        box-shadow: 0 10px 28px -22px rgba(15, 23, 42, 0.25);
    }

    .mk-blog-detail #blog-toc-toggle {
        flex: 1;
        justify-content: center;
        min-height: var(--blg-m-touch);
        font-size: var(--blg-m-body);
        border-radius: 12px;
    }

    .mk-blog-detail #blog-toc-toggle.is-active {
        border-color: rgba(124, 58, 237, 0.35);
        color: #7c3aed;
        background: rgba(124, 58, 237, 0.08);
    }

    .mk-blog-detail .mk-blog-toolbar-actions {
        gap: 0.35rem;
    }

    .mk-blog-detail .mk-blog-toolbar-btn {
        min-height: var(--blg-m-touch);
        min-width: var(--blg-m-touch);
        padding: 0;
        justify-content: center;
        border-radius: 12px;
        -webkit-tap-highlight-color: transparent;
    }

    .mk-blog-detail .mk-blog-article {
        border-radius: 16px;
        border-color: rgba(148, 163, 184, 0.12);
        box-shadow: 0 14px 36px -28px rgba(15, 23, 42, 0.18);
    }

    .mk-blog-detail .mk-blog-prose {
        font-size: var(--blg-m-body);
        line-height: 1.88;
        padding: 1rem var(--blg-m-pad) 1.15rem;
    }

    .mk-blog-detail .mk-blog-prose h2 {
        font-size: clamp(1.1rem, 4.8vw, 1.25rem);
        margin-top: 1.65rem;
        scroll-margin-top: calc(var(--mk-site-header-h, 3.35rem) + 4.25rem);
    }

    .mk-blog-detail .mk-blog-prose h3 {
        font-size: var(--blg-m-body);
        scroll-margin-top: calc(var(--mk-site-header-h, 3.35rem) + 4.25rem);
    }

    .mk-blog-detail .mk-blog-prose table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: var(--blg-m-caption);
    }

    .mk-blog-detail .mk-blog-prose pre {
        font-size: var(--blg-m-caption);
        padding: 0.85rem;
    }

    .mk-blog-detail .mk-blog-prose blockquote {
        font-size: var(--blg-m-body);
        padding: 0.75rem 0.85rem;
    }

    .mk-blog-detail .mk-blog-faq-item summary {
        min-height: var(--blg-m-touch);
        padding: 0.8rem 0.85rem;
        font-size: var(--blg-m-body);
        line-height: 1.55;
        -webkit-tap-highlight-color: transparent;
    }

    .mk-blog-detail .mk-blog-article-tags {
        padding: 0  var(--blg-m-pad) 0.85rem;
        gap: 0.45rem;
    }

    .mk-blog-detail .mk-blog-article-tags-list {
        gap: 0.35rem;
    }

    .mk-blog-detail .mk-blog-share {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
        margin: 0 var(--blg-m-pad) 0.85rem;
        padding: 0.95rem;
        border-radius: 14px;
        border: 1px solid rgba(148, 163, 184, 0.12);
        background: rgba(124, 58, 237, 0.03);
    }

    .mk-blog-detail .mk-blog-share-copy p {
        font-size: var(--blg-m-caption);
        line-height: 1.65;
    }

    .mk-blog-detail .mk-blog-share-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
        width: 100%;
    }

    .mk-blog-detail .mk-blog-share-btn {
        min-height: var(--blg-m-touch);
        justify-content: center;
        width: 100%;
        border-radius: 12px;
        font-size: var(--blg-m-body);
        -webkit-tap-highlight-color: transparent;
    }

    .mk-blog-detail .mk-blog-article-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
        padding: 0.85rem var(--blg-m-pad) 1rem;
        border-top: 1px solid rgba(148, 163, 184, 0.1);
    }

    .mk-blog-detail .mk-blog-back {
        min-height: var(--blg-m-touch);
        justify-content: center;
        border-radius: 12px;
        -webkit-tap-highlight-color: transparent;
    }

    .mk-blog-detail .mk-blog-read-estimate {
        justify-content: center;
        font-size: var(--blg-m-caption);
    }

    .mk-blog-detail .mk-blog-post-nav {
        grid-template-columns: 1fr;
        gap: 0.55rem;
        margin-top: 0.85rem;
    }

    .mk-blog-detail .mk-blog-post-nav-link {
        min-height: var(--blg-m-touch);
        padding: 0.8rem 0.9rem;
        border-radius: 14px;
        -webkit-tap-highlight-color: transparent;
    }

    .mk-blog-detail .mk-blog-post-nav-title {
        font-size: var(--blg-m-body);
        line-height: 1.5;
    }

    .mk-blog-detail .mk-blog-related {
        margin-top: 1.35rem;
        padding-bottom: 0.5rem;
    }

    .mk-blog-detail .mk-blog-related-head h2 {
        font-size: clamp(1.05rem, 4.5vw, 1.15rem);
    }

    .mk-blog-detail .mk-blog-related-grid {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .mk-blog-detail .mk-blog-related-card--rich {
        border-radius: 14px;
        -webkit-tap-highlight-color: transparent;
    }

    .mk-blog-detail .mk-blog-related-body h3 {
        font-size: var(--blg-m-body);
        line-height: 1.5;
    }

    .mk-blog-detail .mk-blog-aside-card {
        border-radius: 14px;
        padding: 0.95rem;
    }

    .mk-blog-detail .mk-blog-aside-card .btn {
        width: 100%;
        min-height: var(--blg-m-touch);
        justify-content: center;
        margin-top: 0.35rem;
        border-radius: 12px;
        -webkit-tap-highlight-color: transparent;
    }

    .mk-blog-detail .mk-blog-aside-link {
        min-height: var(--blg-m-touch);
        justify-content: center;
        border-radius: 12px;
        -webkit-tap-highlight-color: transparent;
    }

    .mk-blog-detail .mk-blog-toc-head {
        min-height: var(--blg-m-touch);
        padding-bottom: 0.65rem;
        font-size: var(--blg-m-body);
    }

    .mk-blog-detail .mk-blog-toc-list a {
        min-height: var(--blg-m-touch);
        display: flex;
        align-items: center;
        padding: 0.5rem 0.65rem;
        font-size: var(--blg-m-caption);
        border-radius: 10px;
    }

    .mk-blog-detail .mk-blog-read-progress {
        height: 2px;
        z-index: 900;
    }
}

@media (max-width: 360px) {
    .mk-blog-hub-page .blg-hero__metrics {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .mk-blog-hub-page .mk-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}