/* ═══════════════════════════════════════════════════════════════
   single.css — Single blog post page
   ═══════════════════════════════════════════════════════════════ */

.sp-page {
    --sp-navy    : #0B2038;
    --sp-sky     : #54B6F4;
    --sp-text    : #1A3A56;
    --sp-muted   : #5C7A8C;
    --sp-bg      : #EEF4FA;
    --sp-card-bg : #FFFFFF;
    --sp-border  : #D8E7F2;
    --sp-shadow  : 0 14px 44px rgba(11,32,56,.13);
    --sp-shadow-s: 0 3px 16px rgba(11,32,56,.07);

    background : var(--sp-bg);
    font-family: Inter, system-ui, -apple-system, Arial, sans-serif;
    line-height: 1.7;
    color      : var(--sp-text);
}

.sp-page * { box-sizing: border-box; }
.sp-page img { max-width: 100%; display: block; }
.sp-page a { text-decoration: none; color: inherit; }
.sp-page p { margin: 0 0 1.4em; }

.sp-wrap {
    width : min(780px, calc(100% - 48px));
    margin: 0 auto;
}

/* ── HERO ─────────────────────────────────────────────────────── */
.sp-hero {
    background: linear-gradient(140deg, #06264a 0%, #0B2038 50%, #143A63 100%);
    padding   : 64px 0 96px;
    text-align: center;
    position  : relative;
    overflow  : hidden;
}
.sp-hero::before {
    content   : '';
    position  : absolute;
    top       : -40%; left: 50%;
    transform : translateX(-50%);
    width     : 700px; height: 700px;
    background: radial-gradient(circle, rgba(84,182,244,.12) 0%, transparent 68%);
    pointer-events: none;
}
.sp-hero::after {
    content   : '';
    position  : absolute;
    bottom    : -1px; left: 0; right: 0;
    height    : 60px;
    background: var(--sp-bg);
    clip-path : ellipse(55% 100% at 50% 100%);
}
.sp-hero .sp-wrap {
    position: relative;
    z-index : 1;
}

.sp-breadcrumb-row {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    flex-wrap      : wrap;
    gap            : 10px 16px;
    margin-bottom  : 28px;
}

/* Higher specificity (.sp-hero .sp-back-link = 0,2,0) beats .sp-page a (0,1,1) */
.sp-hero .sp-back-link {
    display    : inline-flex;
    align-items: center;
    gap        : 7px;
    font-size  : .82rem;
    font-weight: 700;
    color      : rgba(255,255,255,.88);
    transition : color .18s;
}
.sp-hero .sp-back-link:hover { color: #54B6F4; }
.sp-back-link svg { flex-shrink: 0; }

.sp-eyebrow {
    display       : inline-flex;
    padding       : 6px 16px;
    border-radius : 999px;
    background    : #54B6F4;
    border        : none;
    color         : #0B2038;
    font-weight   : 900;
    font-size     : .72rem;
    text-transform: uppercase;
    letter-spacing: .10em;
    margin-bottom : 20px;
}

.sp-hero-title {
    font-size    : clamp(1.8rem, 4.5vw, 3rem);
    font-weight  : 900;
    color        : #FFFFFF;
    line-height  : 1.1;
    letter-spacing: -.035em;
    margin       : 0 0 24px;
}

.sp-hero-meta {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-wrap      : wrap;
    gap            : 6px 14px;
    font-size      : .82rem;
    font-weight    : 600;
    color          : rgba(255,255,255,.65);
}
.sp-hero-meta time { color: rgba(255,255,255,.80); }
.sp-meta-sep { opacity: .4; }

/* ── FEATURED IMAGE ───────────────────────────────────────────── */
.sp-thumb-wrap {
    position    : relative;
    margin-top  : -48px;
    margin-bottom: 40px;
    border-radius: 20px;
    overflow    : hidden;
    box-shadow  : var(--sp-shadow);
    border      : 1px solid var(--sp-border);
    aspect-ratio: 16 / 7;
}
.sp-thumb-wrap img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    display   : block;
}

/* ── ARTICLE BODY ─────────────────────────────────────────────── */
.sp-body {
    padding: 0 0 72px;
}

.sp-article {
    background   : var(--sp-card-bg);
    border-radius: 20px;
    border       : 1px solid var(--sp-border);
    box-shadow   : var(--sp-shadow-s);
    padding      : 48px 52px;
    margin-bottom: 32px;
}

/* Typography inside article */
.sp-article h1,
.sp-article h2 {
    font-size     : clamp(1.35rem, 2.8vw, 1.9rem);
    font-weight   : 900;
    color         : var(--sp-navy);
    letter-spacing: -.025em;
    line-height   : 1.2;
    margin        : 2.2em 0 .7em;
    padding-left  : 16px;
    border-left   : 4px solid var(--sp-sky);
}
.sp-article h2:first-child { margin-top: 0; }
.sp-article h3 {
    font-size  : clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 800;
    color      : var(--sp-navy);
    margin     : 1.8em 0 .5em;
}
.sp-article h4, .sp-article h5, .sp-article h6 {
    font-weight: 700;
    color      : var(--sp-navy);
    margin     : 1.4em 0 .4em;
}
.sp-article p {
    font-size  : 1.02rem;
    color      : var(--sp-text);
    margin     : 0 0 1.5em;
    line-height: 1.85;
}

/* First paragraph after heading gets a slightly larger lead style */
.sp-article h2 + p,
.sp-article h3 + p {
    font-size: 1.04rem;
    color    : var(--sp-text);
}

.sp-article a {
    color          : var(--sp-sky);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sp-article a:hover { color: var(--sp-navy); }

.sp-article ul,
.sp-article ol {
    padding-left: 0;
    margin      : 0 0 1.6em;
    list-style  : none;
}
.sp-article ul li,
.sp-article ol li {
    position     : relative;
    padding-left : 1.6em;
    margin-bottom: .65em;
    font-size    : 1rem;
    color        : var(--sp-text);
    line-height  : 1.75;
}
.sp-article ul li::before {
    content    : '';
    position   : absolute;
    left       : 0;
    top        : .55em;
    width      : 8px;
    height     : 8px;
    border-radius: 50%;
    background : var(--sp-sky);
}
.sp-article ol {
    counter-reset: sp-ol;
}
.sp-article ol li::before {
    content       : counter(sp-ol) ".";
    counter-increment: sp-ol;
    position      : absolute;
    left          : 0;
    top           : 0;
    font-weight   : 800;
    color         : var(--sp-sky);
    font-size     : .9rem;
}

.sp-article blockquote {
    border-left  : 4px solid var(--sp-sky);
    margin       : 2em 0;
    padding      : 16px 24px;
    background   : rgba(84,182,244,.07);
    border-radius: 0 12px 12px 0;
    font-size    : 1.08rem;
    font-style   : italic;
    color        : var(--sp-navy);
}
.sp-article blockquote p { margin: 0; }

.sp-article img {
    border-radius: 14px;
    border       : 4px solid #FFFFFF;
    box-shadow   : 0 10px 36px rgba(11,32,56,.14);
    margin       : 1.6em auto;
    height       : auto;
}

.sp-article figure { margin: 1.6em 0; }
.sp-article figcaption {
    text-align: center;
    font-size : .82rem;
    color     : var(--sp-muted);
    margin-top: 8px;
}

.sp-article hr {
    border    : none;
    border-top: 1px solid var(--sp-border);
    margin    : 2.4em 0;
}

.sp-article table {
    width          : 100%;
    border-collapse: collapse;
    font-size      : .95rem;
    margin         : 1.6em 0;
}
.sp-article th,
.sp-article td {
    border  : 1px solid var(--sp-border);
    padding : 10px 14px;
    text-align: left;
}
.sp-article th {
    background : var(--sp-bg);
    font-weight: 700;
    color      : var(--sp-navy);
}

/* ── TAGS ─────────────────────────────────────────────────────── */
.sp-tags {
    display      : flex;
    flex-wrap    : wrap;
    gap          : 8px;
    align-items  : center;
    margin-bottom: 32px;
}
.sp-tags-label {
    font-size  : .8rem;
    font-weight: 700;
    color      : var(--sp-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}
.sp-tag {
    display      : inline-flex;
    padding      : 5px 14px;
    border-radius: 999px;
    background   : rgba(84,182,244,.12);
    border       : 1px solid rgba(84,182,244,.30);
    color        : var(--sp-sky);
    font-size    : .78rem;
    font-weight  : 700;
    transition   : background .2s, color .2s;
}
.sp-tag:hover { background: var(--sp-sky); color: #fff; }

/* ── POST NAVIGATION ──────────────────────────────────────────── */
.sp-nav {
    display  : grid;
    grid-template-columns: 1fr 1fr;
    gap      : 16px;
    margin-bottom: 48px;
}
.sp-nav-link {
    display      : flex;
    flex-direction: column;
    gap          : 6px;
    padding      : 20px 24px;
    background   : var(--sp-card-bg);
    border       : 1px solid var(--sp-border);
    border-radius: 16px;
    box-shadow   : var(--sp-shadow-s);
    transition   : border-color .2s, box-shadow .2s;
    color        : inherit;
}
.sp-nav-link:hover {
    border-color: var(--sp-sky);
    box-shadow  : var(--sp-shadow);
}
.sp-nav-link.sp-nav-next { text-align: right; }
.sp-nav-dir {
    display    : flex;
    align-items: center;
    gap        : 6px;
    font-size  : .72rem;
    font-weight: 800;
    color      : var(--sp-sky);
    text-transform: uppercase;
    letter-spacing: .09em;
}
.sp-nav-link.sp-nav-next .sp-nav-dir { justify-content: flex-end; }
.sp-nav-title {
    font-size  : .9rem;
    font-weight: 700;
    color      : var(--sp-navy);
    line-height: 1.3;
}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 820px) {
    .sp-wrap    { width: calc(100% - 40px); }
    .sp-article { padding: 32px 28px; }
    .sp-hero    { padding: 52px 0 80px; }
}
@media (max-width: 560px) {
    .sp-wrap      { width: calc(100% - 28px); }
    .sp-article   { padding: 24px 20px; }
    .sp-hero      { padding: 40px 0 72px; }
    .sp-nav       { grid-template-columns: 1fr; }
    .sp-thumb-wrap { aspect-ratio: 4/3; }
}