/* Blog detail — scoped editorial layout. The public data/SEO flow remains in the Razor view. */
.blog-detail-wrapper {
    --blog-accent: var(--color-primary, #e5232f);
    --blog-surface: #0b0b0e;
    --blog-surface-raised: #111115;
    --blog-line: rgba(255, 255, 255, .09);
    --blog-copy: #d7d7dc;
    position: relative;
    overflow: clip;
    padding-bottom: clamp(4rem, 7vw, 7rem);
    background:
        radial-gradient(circle at 8% 42%, color-mix(in srgb, var(--blog-accent) 8%, transparent), transparent 28rem),
        #050507;
}

.blog-detail-wrapper::before {
    display: none;
}

.blog-detail-wrapper .blog-detail-hero {
    min-height: 480px;
    padding: clamp(7.5rem, 10vw, 9rem) 0 clamp(3.5rem, 5vw, 4.5rem);
    border-bottom: 1px solid color-mix(in srgb, var(--blog-accent) 25%, transparent);
    isolation: isolate;
}

.blog-detail-wrapper .blog-detail-hero::after {
    position: absolute;
    z-index: -1;
    right: -8rem;
    bottom: -11rem;
    width: 34rem;
    height: 34rem;
    border: 1px solid color-mix(in srgb, var(--blog-accent) 22%, transparent);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 5rem color-mix(in srgb, var(--blog-accent) 3%, transparent), 0 0 0 10rem rgba(255, 255, 255, .012);
}

.blog-detail-hero .page-hero__shade {
    background:
        linear-gradient(90deg, rgba(3, 3, 5, .97) 0%, rgba(3, 3, 5, .88) 52%, rgba(3, 3, 5, .54) 100%),
        linear-gradient(0deg, #050507 0%, transparent 48%);
}

.blog-detail-hero__inner {
    position: relative;
    z-index: 2;
}

.blog-detail-hero .breadcrumb {
    max-width: 100%;
    margin-bottom: clamp(1.75rem, 4vw, 3.2rem);
    color: rgba(255, 255, 255, .56);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.blog-detail-hero .breadcrumb span:last-child {
    overflow: hidden;
    max-width: 28rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-detail-kicker-row {
    display: flex;
    max-width: 820px;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.25rem;
}

.blog-detail-wrapper .blog-detail-category-badge {
    margin: 0;
    padding: .42rem .72rem;
    border-color: color-mix(in srgb, var(--blog-accent) 42%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--blog-accent) 13%, rgba(0, 0, 0, .45));
    color: var(--blog-accent);
    font-size: .68rem;
    letter-spacing: .11em;
}

.blog-detail-kicker-line {
    width: 42px;
    height: 1px;
    background: var(--blog-accent);
}

.blog-detail-kicker-text {
    color: rgba(255, 255, 255, .58);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.blog-detail-wrapper .blog-detail-hero h1 {
    max-width: 980px;
    margin: 0 0 1.35rem;
    font-size: clamp(2.35rem, 5.8vw, 5rem);
    font-weight: 900;
    line-height: .99;
    letter-spacing: -.05em;
    text-wrap: balance;
}

.blog-detail-wrapper .blog-detail-hero .lead-summary {
    max-width: 790px;
    margin: 0 0 2rem;
    color: rgba(239, 239, 242, .78);
    font-size: clamp(1rem, 1.45vw, 1.18rem);
    line-height: 1.72;
}

.blog-detail-wrapper .blog-detail-meta-bar {
    max-width: 900px;
    gap: .75rem;
    padding: 0;
    border: 0;
}

.blog-detail-wrapper .blog-detail-meta-item {
    min-height: 48px;
    gap: .7rem;
    padding: .55rem .85rem;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    background: rgba(5, 5, 7, .55);
    backdrop-filter: blur(8px);
}

.blog-detail-wrapper .blog-detail-meta-item i {
    color: var(--blog-accent);
    font-size: 1rem;
}

.blog-detail-meta-item span {
    display: grid;
    color: #f3f3f5;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.25;
}

.blog-detail-meta-item small {
    margin-bottom: .16rem;
    color: rgba(255, 255, 255, .44);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .11em;
}

.blog-detail-wrapper .blog-detail-grid {
    position: relative;
    z-index: 5;
    grid-template-columns: minmax(0, 1fr) 322px;
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-top: clamp(2.25rem, 4vw, 3.25rem);
    padding-top: 0;
    align-items: start;
}

.blog-article-shell {
    overflow: hidden;
    border: 1px solid var(--blog-line);
    border-radius: 20px;
    background: linear-gradient(180deg, #0d0d10 0%, #09090b 100%);
    box-shadow: 0 32px 75px rgba(0, 0, 0, .42);
}

.blog-detail-wrapper .blog-featured-cover {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--blog-line);
    border-radius: 0;
    aspect-ratio: 21 / 9.5;
    max-height: 380px;
    box-shadow: none;
}

.blog-detail-wrapper .blog-featured-cover::after {
    position: absolute;
    inset: auto 0 0;
    height: 38%;
    content: "";
    background: linear-gradient(0deg, rgba(8, 8, 10, .92), transparent);
    pointer-events: none;
}

.blog-detail-wrapper .blog-featured-cover img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.blog-cover-accent {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: clamp(90px, 16vw, 180px);
    height: 3px;
    background: var(--blog-accent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--blog-accent) 70%, transparent);
}

.blog-cover-placeholder {
    display: grid;
    height: 100%;
    min-height: 330px;
    place-content: center;
    gap: .6rem;
    color: var(--color-text-passive);
    text-align: center;
    background: radial-gradient(circle, color-mix(in srgb, var(--blog-accent) 8%, #101014), #09090b 60%);
}

.blog-cover-placeholder i { color: var(--blog-accent); font-size: 2.6rem; }
.blog-cover-placeholder span { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.blog-article-body {
    padding: clamp(2rem, 5.5vw, 4.75rem) clamp(1.25rem, 6vw, 5.4rem) clamp(2.5rem, 6vw, 5.2rem);
}

.blog-article-introline {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
    color: var(--blog-accent);
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .15em;
}

.blog-article-introline i {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--blog-accent) 45%, transparent), transparent);
}

.blog-detail-wrapper .blog-rich-content {
    max-width: 760px;
    margin-inline: auto;
    color: var(--blog-copy);
    font-size: clamp(1rem, 1.15vw, 1.09rem);
    line-height: 1.88;
}

.blog-detail-wrapper .blog-rich-content > p:first-child::first-letter {
    float: left;
    margin: .08em .13em 0 0;
    color: var(--blog-accent);
    font-size: 3.45em;
    font-weight: 900;
    line-height: .85;
}

.blog-detail-wrapper .blog-rich-content p { margin-bottom: 1.65rem; color: var(--blog-copy); }
.blog-detail-wrapper .blog-rich-content strong { color: #fff; font-weight: 750; }
.blog-detail-wrapper .blog-rich-content a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blog-accent) 48%, transparent); text-underline-offset: .22em; }

.blog-detail-wrapper .blog-rich-content h2,
.blog-detail-wrapper .blog-rich-content h3,
.blog-detail-wrapper .blog-rich-content h4 {
    position: relative;
    margin: clamp(2.8rem, 6vw, 4.4rem) 0 1.25rem;
    padding: 0 0 0 1.2rem;
    border: 0;
    color: #fff;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.blog-detail-wrapper .blog-rich-content h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); }
.blog-detail-wrapper .blog-rich-content h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.blog-detail-wrapper .blog-rich-content h4 { font-size: 1.15rem; }

.blog-detail-wrapper .blog-rich-content h2::before,
.blog-detail-wrapper .blog-rich-content h3::before,
.blog-detail-wrapper .blog-rich-content h4::before {
    position: absolute;
    top: .12em;
    bottom: .12em;
    left: 0;
    width: 3px;
    border-radius: 99px;
    content: "";
    background: var(--blog-accent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--blog-accent) 48%, transparent);
}

.blog-detail-wrapper .blog-rich-content blockquote {
    position: relative;
    margin: 2.5rem 0;
    padding: 1.6rem 1.6rem 1.6rem 4.2rem;
    border: 1px solid color-mix(in srgb, var(--blog-accent) 26%, var(--blog-line));
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--blog-accent) 8%, #111115), #0c0c0f);
    color: #f2f2f4;
    font-size: 1.05rem;
    font-style: normal;
}

.blog-detail-wrapper .blog-rich-content blockquote::before {
    position: absolute;
    top: 1.2rem;
    left: 1.35rem;
    content: "\201C";
    color: var(--blog-accent);
    font-family: Georgia, serif;
    font-size: 3.7rem;
    line-height: 1;
}

.blog-detail-wrapper .blog-rich-content img {
    margin: 2.4rem 0;
    border-color: var(--blog-line);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

.blog-detail-wrapper .blog-rich-content ul,
.blog-detail-wrapper .blog-rich-content ol {
    display: grid;
    gap: .75rem;
    margin: 1.4rem 0 2rem;
    padding: 0;
    list-style: none;
}

.blog-detail-wrapper .blog-rich-content li {
    position: relative;
    padding: .7rem .85rem .7rem 2.15rem;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 8px;
    background: rgba(255, 255, 255, .018);
    color: var(--blog-copy);
}

.blog-detail-wrapper .blog-rich-content li::before {
    position: absolute;
    top: 1.08rem;
    left: .9rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    content: "";
    background: var(--blog-accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--blog-accent) 60%, transparent);
}

.blog-detail-wrapper .blog-rich-content .is-tech-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.blog-detail-wrapper .blog-rich-content .is-tech-list li {
    display: flex;
    min-height: 48px;
    align-items: center;
    padding: .7rem .75rem .7rem 2.15rem;
    border-color: color-mix(in srgb, var(--blog-accent) 18%, rgba(255, 255, 255, .08));
    background: linear-gradient(135deg, color-mix(in srgb, var(--blog-accent) 6%, #111115), #0b0b0e);
    color: #f5f5f6;
    font-size: .82rem;
    font-weight: 750;
    letter-spacing: .025em;
}

.blog-detail-wrapper .tech-code-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    margin: 1.35rem 0 2.2rem;
}

.blog-detail-wrapper .blog-rich-content .tech-code-chip {
    position: relative;
    display: flex;
    min-height: 52px;
    align-items: center;
    margin: 0;
    padding: .75rem .75rem .75rem 2.35rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--blog-accent) 22%, rgba(255, 255, 255, .08));
    border-radius: 9px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--blog-accent) 7%, #111115), #0a0a0d);
}

.blog-detail-wrapper .blog-rich-content .tech-code-chip::before {
    position: absolute;
    left: .9rem;
    width: 9px;
    height: 9px;
    border: 2px solid var(--blog-accent);
    border-radius: 2px;
    content: "";
    transform: rotate(45deg);
    box-shadow: 0 0 12px color-mix(in srgb, var(--blog-accent) 42%, transparent);
}

.blog-detail-wrapper .blog-rich-content .tech-code-chip strong {
    color: #f6f6f7;
    font-size: .82rem;
    letter-spacing: .035em;
}

.blog-detail-wrapper .blog-rich-content pre,
.blog-detail-wrapper .blog-rich-content table {
    max-width: 100%;
    margin: 2rem 0;
    overflow-x: auto;
    border: 1px solid var(--blog-line);
    border-radius: 10px;
    background: #08080a;
}

.blog-detail-wrapper .blog-rich-content pre { padding: 1.25rem; }
.blog-detail-wrapper .blog-rich-content table { width: 100%; border-collapse: separate; border-spacing: 0; }
.blog-detail-wrapper .blog-rich-content th,
.blog-detail-wrapper .blog-rich-content td { padding: .8rem 1rem; border-bottom: 1px solid var(--blog-line); text-align: left; }
.blog-detail-wrapper .blog-rich-content th { color: #fff; background: color-mix(in srgb, var(--blog-accent) 8%, #101013); }

.blog-detail-wrapper .blog-article-footer {
    margin-top: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--blog-line);
    border-radius: 14px;
    background: var(--blog-surface);
}

.blog-detail-wrapper .blog-tags-list { padding-bottom: 1rem; border-bottom: 1px solid var(--blog-line); }
.blog-detail-wrapper .blog-tag-pill { border-radius: 999px; background: rgba(255, 255, 255, .025); color: var(--blog-copy); }
.blog-detail-wrapper .blog-tag-pill:hover { color: var(--blog-accent); }

.blog-detail-wrapper .blog-share-bar { justify-content: space-between; gap: 1rem; }
.blog-share-heading { display: flex; align-items: center; gap: .8rem; }
.blog-share-heading > i { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--blog-accent) 12%, #101013); color: var(--blog-accent); }
.blog-share-heading span { display: grid; }
.blog-share-heading small { color: var(--color-text-passive); font-size: .58rem; font-weight: 800; letter-spacing: .12em; }
.blog-share-heading strong { color: #fff; font-size: .88rem; }
.blog-share-actions { display: flex; gap: .55rem; }

.blog-detail-wrapper .blog-share-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 9px;
    cursor: pointer;
}

.blog-share-btn.is-copied { border-color: #32c66b; color: #32c66b; }

.blog-detail-wrapper .blog-nav-grid { gap: 1rem; margin-top: 1.25rem; }
.blog-detail-wrapper .blog-nav-card { position: relative; min-height: 132px; justify-content: center; overflow: hidden; padding: 1.45rem; border-radius: 14px; background: linear-gradient(135deg, #101014, #09090b); }
.blog-detail-wrapper .blog-nav-card::after { position: absolute; inset: auto -25px -35px auto; width: 95px; height: 95px; border: 1px solid color-mix(in srgb, var(--blog-accent) 18%, transparent); border-radius: 50%; content: ""; }
.blog-detail-wrapper .blog-nav-card:hover { border-color: color-mix(in srgb, var(--blog-accent) 65%, transparent); box-shadow: 0 16px 36px rgba(0, 0, 0, .22); }
.blog-detail-wrapper .blog-nav-title { max-width: 92%; font-size: 1rem; }

.blog-detail-wrapper .blog-sidebar {
    position: sticky;
    top: 104px;
    gap: 1rem;
}

.blog-detail-wrapper .blog-sidebar-widget,
.blog-detail-wrapper .sidebar-cta-card {
    border-color: var(--blog-line);
    border-radius: 16px;
    background: rgba(11, 11, 14, .96);
    box-shadow: 0 24px 55px rgba(0, 0, 0, .3);
}

.blog-detail-wrapper .blog-sidebar-widget { padding: 1.35rem; }
.blog-detail-wrapper .blog-sidebar-title { margin-bottom: .7rem; padding-bottom: 1rem; font-size: .78rem; letter-spacing: .1em; }
.blog-detail-wrapper .sidebar-posts-list { gap: 0; }
.blog-detail-wrapper .sidebar-post-item { gap: .75rem; padding: .75rem 0; border-bottom: 1px solid rgba(255, 255, 255, .065); }
.blog-detail-wrapper .sidebar-post-item:last-child { border-bottom: 0; }
.blog-detail-wrapper .sidebar-post-thumb { width: 72px; height: 62px; border-radius: 8px; filter: saturate(.82); transition: filter .2s ease, transform .2s ease; }
.blog-detail-wrapper .sidebar-post-item:hover { transform: none; }
.blog-detail-wrapper .sidebar-post-item:hover .sidebar-post-thumb { filter: saturate(1.08); transform: scale(1.025); }
.blog-detail-wrapper .sidebar-post-date { color: var(--blog-accent); font-size: .61rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.blog-detail-wrapper .sidebar-post-title { font-size: .81rem; line-height: 1.38; }

.blog-detail-wrapper .sidebar-cta-card {
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    padding: 1.65rem;
    border-color: color-mix(in srgb, var(--blog-accent) 32%, transparent);
    text-align: left;
    background: linear-gradient(145deg, color-mix(in srgb, var(--blog-accent) 11%, #111115), #09090c 70%);
}

.blog-detail-wrapper .sidebar-cta-card::after {
    position: absolute;
    right: -36px;
    bottom: -50px;
    width: 135px;
    height: 135px;
    border: 18px solid color-mix(in srgb, var(--blog-accent) 5%, transparent);
    border-radius: 50%;
    content: "";
}

.blog-detail-wrapper .sidebar-cta-icon { border-radius: 12px; background: color-mix(in srgb, var(--blog-accent) 12%, #111115); color: var(--blog-accent); }
.blog-detail-wrapper .sidebar-cta-h3 { position: relative; z-index: 1; font-size: 1.16rem; line-height: 1.25; }
.blog-detail-wrapper .sidebar-cta-p { position: relative; z-index: 1; line-height: 1.62; }
.blog-detail-wrapper .sidebar-cta-btn { position: relative; z-index: 1; display: flex; min-height: 44px; align-items: center; justify-content: space-between; border-radius: 8px; font-size: .76rem; }

.blog-related-section {
    padding: clamp(4rem, 8vw, 7rem) 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, #060608, #030304);
}

.blog-related-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.blog-related-heading .section-subtitle,
.blog-related-heading .section-title { margin: 0; text-align: left; }
.blog-related-heading .section-title { margin-top: .35rem; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.blog-related-all { display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .35rem; border-bottom: 1px solid color-mix(in srgb, var(--blog-accent) 45%, transparent); font-size: .78rem; font-weight: 750; }

.blog-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
.blog-related-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, .085); border-radius: 14px; background: #0c0c0f; transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.blog-related-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--blog-accent) 45%, transparent); box-shadow: 0 22px 45px rgba(0, 0, 0, .3); }
.blog-related-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #111; }
.blog-related-media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .35s ease, filter .35s ease; }
.blog-related-card:hover .blog-related-media img { transform: scale(1.035); filter: saturate(1.05); }
.blog-related-content { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.blog-related-content > span { margin-bottom: .55rem; color: var(--blog-accent); font-size: .62rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.blog-related-content h3 { margin: 0 0 .65rem; font-size: 1.08rem; line-height: 1.3; }
.blog-related-content h3 a { color: #fff; }
.blog-related-content p { display: -webkit-box; margin-bottom: 1.1rem; overflow: hidden; color: var(--color-text-muted); font-size: .82rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.blog-related-content .service-link { margin-top: auto; font-size: .72rem; }

@media (max-width: 991px) {
    .blog-detail-wrapper .blog-detail-hero { min-height: auto; padding-bottom: 3rem; }
    .blog-detail-wrapper .blog-detail-grid { grid-template-columns: 1fr; margin-top: 2rem; }
    .blog-detail-wrapper .blog-sidebar { position: static; display: grid; grid-template-columns: 1.15fr .85fr; }
    .blog-detail-wrapper .blog-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-detail-wrapper .blog-nav-card.next { text-align: right; }
    .blog-detail-wrapper .blog-nav-card.next .blog-nav-label { justify-content: flex-end; }
}

@media (max-width: 720px) {
    .blog-detail-wrapper .blog-detail-hero { padding-top: 6.5rem; padding-bottom: 2.25rem; }
    .blog-detail-hero .page-hero__shade { background: linear-gradient(0deg, #050507 2%, rgba(3, 3, 5, .7) 60%, rgba(3, 3, 5, .85)); }
    .blog-detail-hero .breadcrumb { margin-bottom: 1.5rem; }
    .blog-detail-kicker-line, .blog-detail-kicker-text { display: none; }
    .blog-detail-wrapper .blog-detail-hero h1 { font-size: clamp(2.15rem, 11vw, 3.25rem); line-height: 1.03; }
    .blog-detail-wrapper .blog-detail-meta-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
    .blog-detail-wrapper .blog-detail-meta-item:first-child { grid-column: 1 / -1; }
    .blog-detail-wrapper .blog-detail-meta-item { min-width: 0; padding: .55rem .65rem; }
    .blog-detail-wrapper .blog-detail-grid { margin-top: 1.5rem; }
    .blog-article-shell { border-radius: 14px; }
    .blog-detail-wrapper .blog-featured-cover { aspect-ratio: 16 / 9; max-height: 280px; }
    .blog-article-body { padding: 2rem 1.15rem 2.5rem; }
    .blog-article-introline { align-items: start; font-size: .58rem; }
    .blog-detail-wrapper .blog-rich-content { font-size: 1rem; line-height: 1.82; }
    .blog-detail-wrapper .blog-rich-content .is-tech-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-detail-wrapper .tech-code-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-detail-wrapper .blog-rich-content blockquote { padding: 3.7rem 1.15rem 1.25rem; }
    .blog-detail-wrapper .blog-rich-content blockquote::before { top: .8rem; left: 1rem; }
    .blog-detail-wrapper .blog-share-bar { align-items: flex-start; flex-direction: column; }
    .blog-share-actions { width: 100%; }
    .blog-detail-wrapper .blog-share-btn { flex: 1; }
    .blog-detail-wrapper .blog-nav-grid { grid-template-columns: 1fr; }
    .blog-detail-wrapper .blog-nav-card.next { text-align: left; }
    .blog-detail-wrapper .blog-nav-card.next .blog-nav-label { justify-content: flex-start; }
    .blog-detail-wrapper .blog-sidebar { grid-template-columns: 1fr; }
    .blog-related-heading { align-items: flex-start; flex-direction: column; }
    .blog-related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .blog-detail-wrapper .blog-detail-meta-bar { grid-template-columns: 1fr; }
    .blog-detail-wrapper .blog-detail-meta-item:first-child { grid-column: auto; }
    .blog-detail-wrapper .blog-rich-content .is-tech-list { grid-template-columns: 1fr; }
    .blog-detail-wrapper .tech-code-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-related-card,
    .blog-related-media img,
    .blog-detail-wrapper .sidebar-post-thumb { transition: none; }
}