/* =========================================================
   SINGLE BLOG PAGE RESPONSIVE CSS
========================================================= */

/* ================================
   ROOT
================================ */

:root{

    --sp-primary:#ce0f2c;
    --sp-dark:#111111;
    --sp-text:#555555;
    --sp-light:#f7f7f7;
    --sp-white:#ffffff;
    --sp-border:#e7e7e7;

    --sp-radius:24px;

    --sp-shadow:
        0 10px 30px rgba(0,0,0,0.08);

    --sp-transition:all .3s ease;

}

/* ================================
   CONTAINER
================================ */

.sp-container{

    width:100%;
    max-width:1200px;

    margin:0 auto;

    padding-left:20px;
    padding-right:20px;

}

/* ================================
   READING PROGRESS
================================ */

.sp-reading-progress{

    position:fixed;

    top:0;
    left:0;

    width:0%;
    height:4px;

    background:var(--sp-primary);

    z-index:9999;

}

/* ================================
   BLOG HERO
================================ */

.sp-blog-hero{

    position:relative;

    padding:
        50px 0
        50px;

    background:
        linear-gradient(
            180deg,
            #0d0d0d 0%,
            #1a1a1a 100%
        );

    overflow:hidden;

}

.sp-blog-hero__overlay{

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(206,15,44,0.25),
            transparent 40%
        );

    pointer-events:none;

}

.sp-blog-hero .sp-container{

    position:relative;
    z-index:2;

}

.sp-blog-hero__category{

    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-bottom:20px;

}

.sp-blog-hero__category a{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:
        10px 18px;

    border-radius:999px;

    text-decoration:none;

    background:
        rgba(255,255,255,0.12);

    color:#fff;

    font-size:14px;
    font-weight:600;

    backdrop-filter:blur(8px);

    transition:var(--sp-transition);

}

.sp-blog-hero__category a:hover{

    background:var(--sp-primary);

}

.sp-blog-hero__title{

    max-width:1200px;

    color:#fff;

    font-size:clamp(32px,6vw,72px);
    line-height:1.1;
    font-weight:800;

    margin-bottom:30px;

}

.sp-blog-hero__meta{

    display:flex;
    flex-wrap:wrap;
    gap:14px;

    margin-bottom:40px;

}

.sp-meta-item{

    display:flex;
    align-items:center;
    gap:8px;

    padding:
        12px 18px;

    border-radius:999px;

    background:
        rgba(255,255,255,0.08);

    color:#ffffff;

    font-size:14px;
    font-weight:500;

    backdrop-filter:blur(10px);

}

.sp-blog-hero__image{

    overflow:hidden;

    border-radius:30px;

    box-shadow:var(--sp-shadow);

}

.sp-blog-hero__image img{

    width:100%;
    height:auto;

    object-fit:cover;

}

/* ================================
   BLOG CONTENT
================================ */

.sp-blog-content{

    padding:
        30px 0;

    background:#fff;

}

.sp-blog-layout{

    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        340px;

    gap:50px;

    align-items:start;

}

/* ================================
   ARTICLE
================================ */

.sp-blog-article{

    min-width:0;

}

/* ================================
   TOC
================================ */

.sp-toc-box{

    margin-bottom:40px;

    padding:30px;

    border:1px solid var(--sp-border);

    border-radius:24px;

    background:#fafafa;

}

.sp-toc-box h3{

    font-size:22px;

    margin-bottom:20px;

    color:var(--sp-dark);

}

.sp-toc-box ul{

    display:flex;
    flex-direction:column;
    gap:14px;

    list-style:none;

}

.sp-toc-box a{

    color:var(--sp-text);

    font-weight:500;

    text-decoration:none;

    transition:var(--sp-transition);

}

.sp-toc-box a:hover{

    color:var(--sp-primary);

    padding-left:6px;

}

/* ================================
   ARTICLE CONTENT
================================ */

.sp-article-content{

    color:var(--sp-text);

    font-size:18px;
    line-height:1.9;

}

.sp-article-content > *{

    margin-bottom:24px;

}

.sp-article-content h2{

    margin-top:60px;
    margin-bottom:20px;

    font-size:clamp(28px,4vw,42px);

    line-height:1.2;

    color:var(--sp-dark);

}

.sp-article-content h3{

    margin-top:40px;
    margin-bottom:16px;

    font-size:clamp(22px,3vw,30px);

    color:var(--sp-dark);

}

.sp-article-content p{

    color:#4f4f4f;

}

.sp-article-content ul,
.sp-article-content ol{

    padding-left:24px;

}

.sp-article-content li{

    margin-bottom:10px;

}

.sp-article-content img{

    margin:
        30px auto;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--sp-shadow);

}

.sp-article-content blockquote{

    padding:
        30px;

    border-left:
        5px solid var(--sp-primary);

    background:#fafafa;

    border-radius:18px;

    font-size:20px;
    font-weight:600;

    color:#222;

}

.sp-article-content table{

    width:100%;

    overflow-x:auto;

    border-collapse:collapse;

}

.sp-article-content table td,
.sp-article-content table th{

    border:1px solid #ddd;

    padding:14px;

}

/* ================================
   SHARE BOX
================================ */

.sp-share-box{

    margin-top:60px;

    padding:35px;

    border-radius:24px;

    background:#111;

    color:#fff;

}

.sp-share-box h4{

    font-size:24px;

    margin-bottom:24px;

}

.sp-share-buttons{

    display:flex;
    flex-wrap:wrap;
    gap:14px;

}

.sp-share-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    min-width:140px;

    padding:
        14px 22px;

    border-radius:999px;

    background:var(--sp-primary);

    color:#fff;

    font-weight:600;

    transition:var(--sp-transition);

}

.sp-share-btn:hover{

    transform:translateY(-3px);

}

/* ================================
   AUTHOR BOX
================================ */

.sp-author-box{

    margin-top:50px;

    display:flex;
    gap:24px;

    align-items:flex-start;

    padding:35px;

    border-radius:28px;

    background:#fafafa;

    border:1px solid var(--sp-border);

}

.sp-author-avatar img{

    border-radius:50%;

}

.sp-author-content h4{

    font-size:24px;

    margin-bottom:12px;

    color:var(--sp-dark);

}

.sp-author-content p{

    color:var(--sp-text);

    line-height:1.8;

}

/* ================================
   SIDEBAR
================================ */

.sp-blog-sidebar{

    position:sticky;
    top:100px;

    display:flex;
    flex-direction:column;
    gap:30px;

}

/* ================================
   SIDEBAR CTA
================================ */

.sp-sidebar-cta{

    padding:35px;

    border-radius:30px;

    background:
        linear-gradient(
            180deg,
            #ce0f2c 0%,
            #7a0719 100%
        );

    color:#fff;

    overflow:hidden;

}

.sp-sidebar-badge{

    display:inline-block;

    margin-bottom:18px;

    padding:
        8px 16px;

    border-radius:999px;

    background:
        rgba(255,255,255,0.16);

    font-size:13px;
    font-weight:700;

}

.sp-sidebar-cta h3{

    font-size:32px;

    line-height:1.2;

    margin-bottom:14px;

}

.sp-sidebar-cta p{

    margin-bottom:26px;

    line-height:1.8;

}

/* ================================
   BUTTON
================================ */

.sp-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:
        16px 28px;

    border-radius:999px;

    background:#fff;

    text-decoration:none;

    color:#111;

    font-weight:700;

    transition:var(--sp-transition);

}

.sp-btn:hover{

    transform:translateY(-3px);

}

/* ================================
   SIDEBAR WIDGET
================================ */

.sp-sidebar-widget{

    padding:30px;

    border-radius:28px;

    border:1px solid var(--sp-border);

    background:#fff;

}

.sp-sidebar-widget h3{

    margin-bottom:26px;

    font-size:24px;

    color:var(--sp-dark);

}

/* ================================
   RECENT POSTS
================================ */

.sp-recent-posts{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.sp-recent-post-card{

    display:flex;
    gap:16px;

    align-items:center;

}

.sp-recent-post-thumb{

    width:90px;
    min-width:90px;

    overflow:hidden;

    border-radius:18px;

}

.sp-recent-post-thumb img{

    width:100%;
    height:90px;

    object-fit:cover;

}

.sp-recent-post-content h4{

    margin-top:8px;

    font-size:17px;
    line-height:1.4;

}

.sp-recent-post-content a{

    color:#111;

    text-decoration:none;

    transition:var(--sp-transition);

}

.sp-recent-post-content a:hover{

    color:var(--sp-primary);

}

.sp-recent-post-date{

    font-size:13px;

    color:#888;

}

/* ================================
   QUICK CONTACT
================================ */

.sp-sidebar-contact{

    padding:35px;

    border-radius:28px;

    background:#111;

    text-align:center;

    color:#fff;

}

.sp-sidebar-contact h4{

    margin-bottom:20px;

    font-size:26px;

}

/* ================================
   BOTTOM CTA
================================ */

.sp-bottom-cta{

    padding:
        90px 0;

    text-align:center;

    background:
        linear-gradient(
            180deg,
            #111111 0%,
            #1c1c1c 100%
        );

    color:#fff;

}

.sp-bottom-cta h2{

    font-size:clamp(34px,5vw,58px);

    margin-bottom:20px;

}

.sp-bottom-cta p{

    max-width:700px;

    margin:
        0 auto 30px;

    font-size:18px;

    line-height:1.8;

}

/* ================================
   RELATED POSTS
================================ */

.sp-related-posts{

    padding:
        90px 0;

    background:#fafafa;

}

.sp-section-heading{

    text-align:center;

    margin-bottom:50px;

}

.sp-section-heading span{

    display:inline-block;

    margin-bottom:12px;

    color:var(--sp-primary);

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.sp-section-heading h2{

    font-size:clamp(32px,5vw,54px);

    color:var(--sp-dark);

}

.sp-related-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:30px;

}

.sp-related-card{

    overflow:hidden;

    border-radius:28px;

    background:#fff;

    box-shadow:var(--sp-shadow);

    transition:var(--sp-transition);

}

.sp-related-card:hover{

    transform:translateY(-8px);

}

/* FIX UNDERLINE ISSUE */

.sp-related-card a{

    display:block;

    text-decoration:none;

    color:inherit;

}

.sp-related-card a:hover{

    text-decoration:none;

}

.sp-related-thumb{

    overflow:hidden;

}

.sp-related-thumb img{

    width:100%;
    height:260px;

    object-fit:cover;

}

.sp-related-content{

    padding:30px;

}

.sp-related-content h3{

    margin-top:12px;

    font-size:24px;

    line-height:1.4;

    color:#111;

    text-decoration:none;

}

.sp-related-date{

    color:#888;

    font-size:14px;

    text-decoration:none;

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px){

    .sp-blog-layout{

        grid-template-columns:1fr;

    }

    .sp-blog-sidebar{

        position:relative;
        top:auto;

    }

    .sp-related-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

}

@media (max-width: 768px){

    .sp-blog-hero{

        padding:
            80px 0
            50px;

    }

    .sp-blog-content{

        padding:
            20px 0;

    }

    .sp-bottom-cta,
    .sp-related-posts{

        padding:
            70px 0;

    }

    .sp-author-box{

        flex-direction:column;

    }

    .sp-share-buttons{

        flex-direction:column;

    }

    .sp-share-btn{

        width:100%;

    }

    .sp-related-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width: 576px){

    .sp-container{

        padding-left:16px;
        padding-right:16px;

    }

    .sp-blog-hero__meta{

        gap:10px;

    }

    .sp-meta-item{

        width:100%;

        justify-content:center;

    }

    .sp-blog-hero__image{

        border-radius:20px;

    }

    .sp-toc-box,
    .sp-share-box,
    .sp-author-box,
    .sp-sidebar-cta,
    .sp-sidebar-widget,
    .sp-sidebar-contact{

        padding:24px;

        border-radius:22px;

    }

    .sp-article-content{

        font-size:16px;
        line-height:1.8;

    }

    .sp-article-content h2{

        margin-top:40px;

    }

    .sp-sidebar-cta h3{

        font-size:28px;

    }

    .sp-related-thumb img{

        height:220px;

    }

}

@media (max-width: 380px){

    .sp-blog-hero__title{

        font-size:30px;

    }

    .sp-bottom-cta h2{

        font-size:32px;

    }

    .sp-share-box h4,
    .sp-sidebar-contact h4{

        font-size:22px;

    }

}