/* System Design series additions. Everything is scoped to avoid changing legacy pages. */
.system-design-page {
    --sd-cyan: #63e6ff;
    --sd-blue: #5685ff;
    --sd-violet: #9b73ff;
    --sd-green: #50d890;
    --sd-coral: #ff8a78;
}

.sd-series-hero {
    position: relative;
    overflow: hidden;
}

.sd-series-hero::after {
    content: ";
    position: absolute;
    inset: auto -10% -160px 38%;
    height: 340px;
    border-radius: 50%;
    background: rgba(66, 126, 255, .16);
    filter: blur(70px);
    pointer-events: none;
}

.sd-series-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 28px;
    color: var(--blog-muted);
    font-size: 14px;
    font-weight: 700;
}

.sd-series-badge::before {
    content: ";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sd-green);
    box-shadow: 0 0 0 6px rgba(80, 216, 144, .12);
}

.sd-library {
    padding: 72px 0 100px;
}

.sd-section-heading {
    max-width: 720px;
    margin-bottom: 34px;
}

.sd-section-heading h2 {
    margin: 9px 0 10px;
    color: var(--blog-text);
    font-size: clamp(30px, 5vw, 46px);
}

.sd-section-heading p { margin: 0; color: var(--blog-muted); font-size: 17px; line-height: 1.7; }

.sd-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.sd-post-card {
    overflow: hidden;
    border: 1px solid var(--blog-border);
    border-radius: 22px;
    background: var(--blog-surface);
    box-shadow: 0 18px 48px rgba(5, 10, 32, .15);
}

.sd-post-card__visual { position: relative; display: block; overflow: hidden; aspect-ratio: 1200 / 630; background: #0a1740; }
.sd-post-card__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sd-post-card:hover .sd-post-card__visual img { transform: scale(1.035); }

.sd-post-card__number,
.sd-post-card__status {
    position: absolute;
    top: 14px;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(8, 16, 44, .82);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    backdrop-filter: blur(9px);
}

.sd-post-card__number { left: 14px; padding: 7px 10px; }
.sd-post-card__status { right: 14px; padding: 7px 11px; }
.sd-post-card__status--soon { color: #dbe4ff; }
.sd-post-card__body { padding: 24px; }
.sd-post-card__body h2 { margin: 11px 0 11px; color: var(--blog-text); font-size: 25px; line-height: 1.24; }
.sd-post-card__body p { margin: 0 0 20px; color: var(--blog-muted); font-size: 15px; line-height: 1.7; }
.sd-post-card__meta { color: var(--blog-muted); font-size: 13px; }
.sd-card-placeholder { display: inline-flex; min-height: 43px; align-items: center; padding: 10px 15px; border: 1px solid var(--blog-border); border-radius: 9px; color: var(--blog-muted); font-size: 13px; font-weight: 700; }

.sd-roadmap {
    margin-top: 68px;
    padding: 34px;
    border: 1px solid var(--blog-border);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(86, 133, 255, .1), rgba(155, 115, 255, .06)), var(--blog-surface);
}

.sd-roadmap h2 { margin: 0 0 22px; color: var(--blog-text); font-size: 29px; }
.sd-roadmap ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; margin: 0; padding-left: 23px; color: var(--blog-muted); }
.sd-roadmap li { padding: 10px 4px; border-bottom: 1px solid var(--blog-border); }
.sd-roadmap li::marker { color: var(--sd-cyan); font-weight: 800; }

.sd-diagram {
    margin: 30px 0 38px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid var(--blog-border);
    border-radius: 20px;
    background: radial-gradient(circle at 50% 0, rgba(86, 133, 255, .16), transparent 46%), var(--blog-surface);
}

.sd-diagram figcaption { margin-top: 19px; color: var(--blog-muted); font-size: 14px; line-height: 1.55; text-align: center; }
.sd-diagram__title { display: block; margin-bottom: 23px; color: var(--blog-text); font-size: 15px; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
.sd-flow { display: flex; align-items: center; justify-content: center; gap: 13px; }
.sd-node { display: grid; min-height: 78px; min-width: 126px; padding: 14px; place-items: center; border: 1px solid rgba(99, 230, 255, .35); border-radius: 14px; background: rgba(86, 133, 255, .1); color: var(--blog-text); font-size: 14px; font-weight: 800; text-align: center; box-shadow: inset 0 0 25px rgba(86, 133, 255, .07); }
.sd-node small { display: block; margin-top: 4px; color: var(--blog-muted); font-size: 11px; font-weight: 600; }
.sd-node--accent { border-color: rgba(155, 115, 255, .6); background: rgba(155, 115, 255, .14); }
.sd-node--large { min-height: 140px; min-width: 154px; }
.sd-arrow { flex: 0 0 auto; color: var(--sd-cyan); font-size: 29px; line-height: 1; }
.sd-cluster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.sd-cluster .sd-node { min-width: 92px; }

.sd-two-up,
.sd-pros-cons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 28px 0 34px; }
.sd-mini-card { padding: 23px; border: 1px solid var(--blog-border); border-radius: 16px; background: var(--blog-surface); }
.sd-mini-card h3 { margin: 0 0 10px; font-size: 22px; }
.sd-mini-card p:last-child,
.sd-mini-card ul:last-child { margin-bottom: 0; }
.sd-pros { border-top: 3px solid var(--sd-green); }
.sd-cons { border-top: 3px solid var(--sd-coral); }

.sd-example {
    margin: 27px 0;
    padding: 22px 24px;
    border: 1px solid rgba(99, 230, 255, .28);
    border-radius: 15px;
    background: rgba(99, 230, 255, .06);
}
.sd-example strong { display: block; margin-bottom: 7px; color: var(--sd-cyan); }
.sd-example p:last-child { margin-bottom: 0; }

.sd-lesson-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 46px 0; }
.sd-lesson-nav a { display: block; padding: 19px; border: 1px solid var(--blog-border); border-radius: 14px; background: var(--blog-surface); text-decoration: none; }
.sd-lesson-nav span { display: block; margin-bottom: 5px; color: var(--blog-muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sd-lesson-nav strong { color: var(--blog-text); }
.sd-lesson-nav a:last-child { text-align: right; }

.sd-interview { counter-reset: interview; display: grid; gap: 13px; margin: 24px 0 34px; }
.sd-interview li { position: relative; margin: 0 !important; padding: 18px 18px 18px 57px; border: 1px solid var(--blog-border); border-radius: 13px; background: var(--blog-surface); list-style: none; }
.sd-interview li::before { counter-increment: interview; content: counter(interview); position: absolute; top: 17px; left: 17px; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; background: rgba(86, 133, 255, .15); color: var(--sd-cyan); font-size: 12px; font-weight: 900; }

@media (max-width: 991px) {
    .sd-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-post-card:first-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .sd-library { padding: 50px 0 72px; }
    .sd-post-grid,
    .sd-roadmap ol,
    .sd-two-up,
    .sd-pros-cons,
    .sd-lesson-nav { grid-template-columns: 1fr; }
    .sd-post-card:first-child { grid-column: auto; }
    .sd-roadmap,
    .sd-diagram { padding: 22px 16px; }
    .sd-flow { flex-direction: column; }
    .sd-arrow { transform: rotate(90deg); }
    .sd-cluster { width: 100%; }
    .sd-cluster .sd-node { min-width: 0; padding-inline: 8px; font-size: 12px; }
    .sd-lesson-nav a:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .sd-post-card__visual img { transition: none; }
}