/* =========================================================
   PICKPREP BLOG
   Master Editorial Blog System
   Version: 2026.1
   Purpose: Clean, responsive, accessible long-form editorial
   ========================================================= */

/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

.blog-page{
    --blog-bg:#f8fafc;
    --blog-surface:#ffffff;
    --blog-surface-soft:#f1f5f9;

    --blog-text:#0f172a;
    --blog-text-soft:#334155;
    --blog-text-muted:#64748b;
    --blog-text-faint:#94a3b8;

    --blog-border:#e2e8f0;
    --blog-border-strong:#cbd5e1;

    --blog-accent:#2563eb;
    --blog-accent-dark:#1d4ed8;
    --blog-accent-soft:#eff6ff;

    --blog-warm:#f97316;
    --blog-warm-soft:#fff7ed;

    --blog-radius-sm:8px;
    --blog-radius-md:12px;
    --blog-radius-lg:18px;

    --blog-content-width:760px;
    --blog-wide-width:1120px;

    --blog-space-1:.5rem;
    --blog-space-2:.75rem;
    --blog-space-3:1rem;
    --blog-space-4:1.5rem;
    --blog-space-5:2rem;
    --blog-space-6:3rem;
    --blog-space-7:4rem;
    --blog-space-8:6rem;

    --blog-shadow-soft:0 8px 30px rgba(15,23,42,.06);
    --blog-focus:0 0 0 3px rgba(37,99,235,.22);

    background:var(--blog-bg);
    color:var(--blog-text);

    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

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

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* =========================================================
   02. SCOPED RESET
   ========================================================= */

.blog-page *,
.blog-page *::before,
.blog-page *::after{
    box-sizing:border-box;
}

.blog-page img{
    display:block;
    max-width:100%;
    height:auto;
}

.blog-page a{
    color:var(--blog-accent-dark);
    text-decoration-thickness:1px;
    text-underline-offset:3px;
}

.blog-page a:hover{
    color:var(--blog-accent);
}

.blog-page button,
.blog-page a{
    -webkit-tap-highlight-color:transparent;
}

.blog-page :where(h1,h2,h3,h4,p,ul,ol,figure){
    margin-block-start:0;
}

.blog-page :where(h1,h2,h3,h4){
    text-wrap:balance;
}

.blog-page :where(p,li){
    text-wrap:pretty;
}

/* =========================================================
   03. HEADER / LOGO
   ========================================================= */

.blog-header{
    width:100%;
    min-height:76px;

    display:flex;
    align-items:center;

    padding:
        14px
        clamp(1rem,4vw,2.5rem);

    background:var(--blog-surface);
    border-bottom:1px solid var(--blog-border);
}

.blog-logo{
    display:block;
    width:auto;
    height:auto;
    max-width:210px;
    max-height:58px;
    object-fit:contain;
}

@media (min-width:700px){
    .blog-header{
        min-height:86px;
        padding-inline:clamp(1.5rem,5vw,3.5rem);
    }

    .blog-logo{
        max-width:230px;
        max-height:63px;
    }
}

@media (min-width:960px){
    .blog-header{
        min-height:92px;
        padding-inline:clamp(2rem,6vw,5rem);
    }

    .blog-logo{
        max-width:245px;
        max-height:67px;
    }
}

@media (min-width:1200px){
    .blog-header{
        padding-inline:max(
            2rem,
            calc((100vw - 1120px) / 2)
        );
    }

    .blog-logo{
        max-width:255px;
    }
}

/* =========================================================
   04. PAGE CONTAINER
   ========================================================= */

.blog-container{
    width:min(
        calc(100% - 2rem),
        var(--blog-wide-width)
    );

    margin-inline:auto;
}

/* =========================================================
   05. HERO
   ========================================================= */

.blog-hero{
    padding-block:
        clamp(3.5rem,8vw,6.5rem)
        clamp(3rem,6vw,5rem);

    text-align:center;
}

.blog-hero-inner{
    width:min(100%,900px);
    margin-inline:auto;
}

.blog-category{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:32px;
    padding-inline:13px;

    border:1px solid var(--blog-border);
    border-radius:999px;

    background:var(--blog-surface);
    color:var(--blog-text-muted);

    font-size:.76rem;
    font-weight:750;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.blog-hero h1{
    max-width:900px;

    margin:
        1.25rem
        auto
        1.25rem;

    color:var(--blog-text);

    font-size:clamp(
        2.1rem,
        5vw,
        4rem
    );

    line-height:1.06;
    font-weight:780;
    letter-spacing:-.04em;
}

.blog-hero-subtitle{
    width:min(100%,720px);
    margin-inline:auto;

    color:var(--blog-text-muted);

    font-size:clamp(
        1rem,
        2vw,
        1.12rem
    );

    line-height:1.7;
}

/* =========================================================
   06. HERO ACTIONS
   ========================================================= */

.blog-quick-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;

    gap:1rem;
    margin-top:1.75rem;
}

.blog-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:44px;
    padding:.7rem 1.1rem;

    border:1px solid var(--blog-text);
    border-radius:var(--blog-radius-md);

    background:var(--blog-surface);
    color:var(--blog-text);

    font-size:.88rem;
    font-weight:700;
    line-height:1.2;

    text-decoration:none;

    transition:
        background-color 160ms ease,
        color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.blog-button:hover{
    background:var(--blog-text);
    color:#fff;
    border-color:var(--blog-text);
    transform:translateY(-1px);
}

.blog-button-secondary{
    border-color:var(--blog-border-strong);
}

/* =========================================================
   07. META
   ========================================================= */

.blog-meta{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;

    gap:.5rem 1rem;
    margin-top:1.5rem;

    color:var(--blog-text-faint);
    font-size:.8rem;
}

.blog-meta span{
    display:inline-flex;
    align-items:center;
}

/* =========================================================
   08. ARTICLE
   ========================================================= */

.blog-article{
    display:block;
    width:min(
        calc(100% - 3rem),
        var(--blog-content-width)
    );
    max-width:var(--blog-content-width);

    margin-left:auto;
    margin-right:auto;

    padding-bottom:
        clamp(4rem,8vw,7rem);
}

.blog-article p{
    margin-bottom:1.15rem;

    color:var(--blog-text-soft);
    font-size:1rem;
    line-height:1.78;
}

.blog-article strong{
    color:var(--blog-text);
    font-weight:700;
}

.blog-article h2{
    margin:
        clamp(3.5rem,7vw,5.5rem)
        0
        1.25rem;

    color:var(--blog-text);

    font-size:clamp(
        1.5rem,
        3vw,
        2rem
    );

    line-height:1.2;
    font-weight:760;
    letter-spacing:-.025em;
}

.blog-article h2:first-child{
    margin-top:2rem;
}

.blog-article h3{
    margin:
        2.5rem
        0
        .8rem;

    color:var(--blog-text);

    font-size:clamp(
        1.08rem,
        2vw,
        1.25rem
    );

    line-height:1.35;
    font-weight:720;
}

.blog-article ul,
.blog-article ol{
    margin:
        1.25rem
        0
        1.5rem;

    padding-inline-start:1.4rem;
}

.blog-article li{
    margin-bottom:.65rem;
    color:var(--blog-text-soft);
}

.blog-article li::marker{
    color:var(--blog-accent);
}

/* =========================================================
   09. ARTICLE LEAD
   ========================================================= */

.blog-lead{
    margin-bottom:3rem;
}

.blog-lead p{
    color:var(--blog-text);
    font-size:clamp(
        1.08rem,
        2.2vw,
        1.22rem
    );
    line-height:1.72;
}

.blog-lead p:first-child{
    font-weight:650;
}

.blog-lead p:last-child{
    margin-bottom:0;
}

/* =========================================================
   10. INTRO / EDITORIAL INTRO
   ========================================================= */

.blog-intro{
    margin-bottom:2.5rem;

    padding:clamp(
        1.5rem,
        4vw,
        2.25rem
    );

    border:1px solid var(--blog-border);
    border-radius:var(--blog-radius-lg);

    background:var(--blog-surface);
}

.blog-intro p:last-child{
    margin-bottom:0;
}

/* =========================================================
   11. FEATURE QUESTION
   ========================================================= */

.blog-question{
    margin:2rem 0;

    padding:
        1.5rem
        clamp(1.25rem,4vw,2rem);

    border-inline-start:
        4px solid
        var(--blog-accent);

    border-radius:
        0
        var(--blog-radius-md)
        var(--blog-radius-md)
        0;

    background:var(--blog-surface-soft);
    color:var(--blog-text);

    font-size:clamp(
        1.05rem,
        2.5vw,
        1.25rem
    );

    font-weight:700;
    line-height:1.5;
}

/* =========================================================
   12. PULL QUOTE
   ========================================================= */

.blog-pullquote{
    margin:
        clamp(2.5rem,6vw,4rem)
        0;

    padding:
        1rem
        0;

    border-block:
        1px solid
        var(--blog-border);

    color:var(--blog-text);

    font-size:clamp(
        1.2rem,
        3vw,
        1.55rem
    );

    font-weight:700;
    line-height:1.45;
    letter-spacing:-.015em;
    text-align:center;
}

.blog-pullquote p{
    margin:0;
    color:inherit;
    font-size:inherit;
    line-height:inherit;
}

/* =========================================================
   13. CALLOUT
   ========================================================= */

.blog-callout{
    margin:1.75rem 0;

    padding:
        1.25rem
        1.4rem;

    border-inline-start:
        3px solid
        var(--blog-accent);

    border-radius:
        0
        var(--blog-radius-md)
        var(--blog-radius-md)
        0;

    background:var(--blog-accent-soft);
    color:var(--blog-text-soft);
}

.blog-callout strong{
    color:var(--blog-text);
}

/* =========================================================
   14. NOTE
   ========================================================= */

.blog-note{
    margin:1.75rem 0;

    padding:
        1.2rem
        1.35rem;

    border-inline-start:
        3px solid
        var(--blog-warm);

    border-radius:
        0
        var(--blog-radius-md)
        var(--blog-radius-md)
        0;

    background:var(--blog-warm-soft);
    color:#7c2d12;
}

/* =========================================================
   15. LEARNING / PROCESS FLOW
   ========================================================= */

.blog-process{
    margin:
        2.75rem
        0
        3.5rem;

    padding:
        clamp(1.5rem,4vw,2.25rem);

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

    border-radius:
        var(--blog-radius-lg);

    background:var(--blog-surface);
}

.blog-process-title{
    margin:
        0
        0
        1.25rem;

    color:var(--blog-text-muted);

    font-size:.7rem;
    font-weight:800;
    letter-spacing:.1em;
    text-align:center;
    text-transform:uppercase;
}

.blog-process-flow{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:.65rem;

    color:var(--blog-text);
    font-size:clamp(
        .95rem,
        2vw,
        1.1rem
    );

    font-weight:720;
    text-align:center;
}

.blog-process-step{
    padding:
        .55rem
        .8rem;

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

    border-radius:
        var(--blog-radius-sm);

    background:var(--blog-surface-soft);
}

.blog-process-arrow{
    color:var(--blog-text-faint);
    font-weight:400;
}

/* =========================================================
   16. THINKING QUESTIONS
   ========================================================= */

.blog-thinking-list{
    margin:
        2rem
        0
        3rem;
}

.blog-thinking-item{
    padding:
        1.15rem
        0;

    border-block-end:
        1px solid
        var(--blog-border);
}

.blog-thinking-item:first-child{
    border-block-start:
        1px solid
        var(--blog-border);
}

.blog-thinking-item strong{
    display:block;
    margin-bottom:.3rem;
    color:var(--blog-text);
}

.blog-thinking-item p{
    margin:0;
    color:var(--blog-text-muted);
    font-size:.92rem;
}

/* =========================================================
   17. IMAGES
   ========================================================= */

.blog-image{
    display:block;
    width:100%;

    margin:2rem 0;

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

    border-radius:
        var(--blog-radius-lg);
}

.blog-image-caption{
    margin:
        -.9rem
        0
        2rem;

    color:var(--blog-text-faint);
    font-size:.78rem;
    line-height:1.5;
    text-align:center;
}

/* =========================================================
   18. CTA
   ========================================================= */

.blog-cta{
    margin:3rem 0;

    padding:
        clamp(1.75rem,5vw,3rem);

    border-radius:var(--blog-radius-lg);

    background:var(--blog-text);
    color:#fff;

    text-align:center;
}

.blog-cta h2{
    margin:
        0
        0
        .75rem;

    color:#fff;
}

.blog-cta p{
    width:min(100%,680px);

    margin:
        0
        auto
        1.5rem;

    color:#cbd5e1;
}

.blog-cta-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:44px;

    padding:
        .7rem
        1.2rem;

    border:
        1px solid
        #fff;

    border-radius:var(--blog-radius-md);

    background:#fff;
    color:var(--blog-text);

    font-weight:720;
    text-decoration:none;

    transition:
        background-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.blog-cta-button:hover{
    background:#e2e8f0;
    color:var(--blog-text);
    transform:translateY(-1px);
}

/* =========================================================
   19. FINAL EDITORIAL STATEMENT
   ========================================================= */

.blog-final-statement{
    width:min(100%,820px);

    margin:
        5rem
        auto
        2rem;

    text-align:center;
}

.blog-final-statement p{
    margin-bottom:.6rem;

    color:var(--blog-text);

    font-size:clamp(
        1rem,
        2vw,
        1.15rem
    );

    font-weight:700;
}

.blog-final-statement .blog-final-main{
    margin-top:1.25rem;

    font-size:clamp(
        1.2rem,
        3vw,
        1.5rem
    );

    font-weight:780;
    letter-spacing:-.015em;
}

/* =========================================================
   20. DIVIDER
   ========================================================= */

.blog-divider{
    width:56px;
    height:2px;

    margin:
        3rem
        auto;

    border:0;
    border-radius:999px;

    background:var(--blog-accent);
}

/* =========================================================
   21. FOOTER
   ========================================================= */

.blog-footer{
    margin-top:4rem;

    padding:
        2.5rem
        1rem;

    border-top:
        1px solid
        var(--blog-border);

    color:var(--blog-text-faint);
    font-size:.8rem;
    text-align:center;
}

/* =========================================================
   22. ACCESSIBILITY / FOCUS
   ========================================================= */

.blog-page a:focus-visible,
.blog-page button:focus-visible{
    outline:none;
    box-shadow:var(--blog-focus);
    border-radius:4px;
}

.blog-page ::selection{
    background:#dbeafe;
    color:var(--blog-text);
}

/* =========================================================
   23. TABLET
   ========================================================= */

@media (min-width:700px){

    .blog-container{
        width:min(
            calc(100% - 3rem),
            var(--blog-wide-width)
        );
    }

    .blog-article{
        width:min(
            calc(100% - 4rem),
            var(--blog-content-width)
        );
        max-width:var(--blog-content-width);
        margin-left:auto;
        margin-right:auto;
    }
}

/* =========================================================
   24. DESKTOP
   ========================================================= */

@media (min-width:960px){

    .blog-process-flow{
        flex-wrap:nowrap;
    }

    .blog-process-step{
        min-width:0;
    }
}

/* =========================================================
   25. LARGE DESKTOP
   ========================================================= */

@media (min-width:1200px){

    .blog-container{
        width:min(
            calc(100% - 4rem),
            var(--blog-wide-width)
        );
    }

    .blog-article{
        width:min(
            calc(100% - 5rem),
            780px
        );
        max-width:780px;
        margin-left:auto;
        margin-right:auto;
    }
}

/* =========================================================
   26. SMALL MOBILE
   ========================================================= */

@media (max-width:520px){

    .blog-container{
        width:calc(100% - 2rem);
        margin-left:auto;
        margin-right:auto;
    }

    .blog-article{
        width:calc(100% - 2rem);
        max-width:none;
        margin-left:auto;
        margin-right:auto;
    }

    .blog-quick-actions{
        flex-direction:column;
    }

    .blog-button{
        width:min(100%,300px);
    }

    .blog-process-flow{
        flex-direction:column;
        align-items:stretch;
    }

    .blog-process-step{
        width:100%;
        text-align:center;
    }

    .blog-process-arrow{
        transform:rotate(90deg);
        align-self:center;
    }
}

/* =========================================================
   27. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .blog-page *,
    .blog-page *::before,
    .blog-page *::after{
        scroll-behavior:auto !important;

        transition-duration:.01ms !important;

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }
}

/* =========================================================
   28. HIGH CONTRAST / FORCED COLORS
   ========================================================= */

@media (forced-colors:active){

    .blog-button,
    .blog-cta-button,
    .blog-category,
    .blog-process,
    .blog-process-step,
    .blog-intro,
    .blog-cta{
        border:1px solid ButtonText;
    }

    .blog-page a:focus-visible,
    .blog-page button:focus-visible{
        outline:2px solid Highlight;
        box-shadow:none;
    }
}

/* =========================================================
   29. PRINT
   ========================================================= */

@media print{

    .blog-page{
        background:#fff;
        color:#000;
    }

    .blog-quick-actions{
        display:none;
    }

    .blog-hero{
        padding:
            1rem
            0
            2rem;
    }

    .blog-hero h1{
        color:#000;
        font-size:2rem;
    }

    .blog-hero-subtitle,
    .blog-article p,
    .blog-article li{
        color:#222;
    }

    .blog-intro,
    .blog-process,
    .blog-callout,
    .blog-note,
    .blog-cta{
        background:#fff;
        box-shadow:none;
        break-inside:avoid;
    }

    .blog-cta{
        color:#000;
        border:1px solid #999;
    }

    .blog-cta h2,
    .blog-cta p{
        color:#000;
    }

    .blog-cta-button{
        color:#000;
        border-color:#000;
    }

    .blog-footer{
        color:#333;
    }
}