/* ==========================================================
   SOLUTIONS EDITORIAL
   CrestBridge Services
   Version 3.0
========================================================== */


/* ==========================================================
   DESIGN TOKENS
========================================================== */

:root{

    --editorial-max:740px;
    --hero-image:460px;

    --space-1:16px;
    --space-2:24px;
    --space-3:40px;
    --space-4:64px;
    --space-5:96px;

}


/* ==========================================================
   GLOBAL SECTIONS
========================================================== */

.editorial-hero,
.editorial-chapter,
.editorial-cta{

    position:relative;
    width:100%;

}

.editorial-hero{

    padding:110px 0 0;

}

.editorial-chapter{

    padding:20px 0;

}


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

.editorial-article{

    width:100%;
    max-width:var(--editorial-max);
    margin-inline:auto;

}


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

.editorial-hero__grid{

    display:grid;

    grid-template-columns:
        minmax(0,1.35fr)
        minmax(320px,.85fr);

    align-items:center;

    gap:80px;

}

.editorial-hero__content{

    max-width:720px;

}

.editorial-hero__image{

    display:flex;
    justify-content:flex-end;

}

.editorial-hero__image img{

    display:block;

    width:100%;
    max-width:var(--hero-image);

    aspect-ratio:4 / 5;

    object-fit:cover;

    border-radius:18px;

    box-shadow:
        0 30px 80px rgba(14,42,71,.10);

    transition:
        transform .30s ease,
        box-shadow .30s ease;

}

.editorial-hero__image img:hover{

    transform:translateY(-4px);

}


/* ==========================================================
   EYEBROW
========================================================== */

.editorial-eyebrow{

    display:inline-block;

    margin-bottom:22px;

    color:var(--gold);

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.28em;

}


/* ==========================================================
   DIVIDER
========================================================== */

.editorial-divider{

    width:64px;

    height:2px;

    margin:0 0 42px;

    background:var(--gold);

}


/* ==========================================================
   HERO TYPOGRAPHY
========================================================== */

.editorial-hero h1{

    max-width:700px;

    margin:0 0 34px;

    color:var(--navy-dark);

    font-size:clamp(3.25rem,5vw,4.8rem);

    line-height:1.02;

    font-weight:700;

    letter-spacing:-0.04em;

}

.editorial-intro{

    max-width:650px;

}

.editorial-intro p{

    margin:0 0 24px;

    font-size:1.15rem;

    line-height:2;

    color:var(--text);

}

.editorial-intro p:last-child{

    margin-bottom:0;

}


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

.editorial-article h2{

    max-width:680px;

    margin:0 0 32px;

    color:var(--navy-dark);

    font-size:clamp(2.4rem,4vw,3.25rem);

    line-height:1.12;

    font-weight:700;

    letter-spacing:-0.03em;

}

.editorial-article p{

    margin:0 0 28px;

    color:var(--text);

    font-size:1.125rem;

    line-height:1.95;

}

.editorial-article p:last-child{

    margin-bottom:0;

}

.editorial-article strong{

    color:var(--navy-dark);

    font-weight:600;

}

.editorial-article em{

    font-style:italic;

}

.editorial-article a{

    color:var(--gold);

    text-decoration:none;

    border-bottom:1px solid transparent;

    transition:border-color .25s ease;

}

.editorial-article a:hover{

    border-color:var(--gold);

}

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

.editorial-cta{

    position:relative;

    padding:110px 0 90px;

    margin:0;

    background:var(--navy-dark);

    color:#fff;

}

.editorial-cta__content{

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

    margin:0 auto;

    text-align:center;

}

.editorial-cta .editorial-eyebrow{

    display:block;

    margin-bottom:20px;

    color:var(--gold);

}

.editorial-cta h2{

    max-width:700px;

    margin:0 auto 32px;

    color:#fff;

    font-size:clamp(2.4rem,4vw,3.5rem);

    line-height:1.1;

    font-weight:700;

    letter-spacing:-0.03em;

}

.editorial-cta p{

    max-width:700px;

    margin:0 auto 42px;

    color:rgba(255,255,255,.80);

    font-size:1.12rem;

    line-height:2;

}


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

.editorial-cta .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:300px;

    height:58px;

    padding:0 42px;

    border-radius:999px;

    font-weight:600;

    transition:
        transform .30s ease,
        box-shadow .30s ease;

}

.editorial-cta .btn:hover{

    transform:translateY(-2px);

    box-shadow:0 14px 32px rgba(0,0,0,.18);

}


/* ==========================================================
   SECTION RHYTHM
========================================================== */

.editorial-hero + .editorial-chapter{

    padding-top:80px;

}

.editorial-chapter + .editorial-chapter{

    padding-top:20px;

}

.editorial-chapter:last-of-type{

    padding-bottom:110px;

}

.editorial-cta + .site-footer{

    margin-top:0;

}


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

.editorial-article > *:last-child{

    margin-bottom:0;

}

.editorial-article ul,
.editorial-article ol{

    margin:0 0 32px 28px;

    color:var(--text);

    font-size:1.08rem;

    line-height:1.9;

}

.editorial-article li{

    margin-bottom:12px;

}

.editorial-article blockquote{

    margin:48px 0;

    padding-left:28px;

    border-left:3px solid var(--gold);

    color:var(--navy-dark);

    font-size:1.35rem;

    line-height:1.6;

    font-weight:500;

}

.editorial-article hr{

    margin:64px 0;

    border:none;

    border-top:1px solid rgba(14,42,71,.08);

}

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

@media (max-width:1200px){

    .editorial-hero__grid{

        gap:60px;

    }

}


@media (max-width:992px){

    /* ---------------------------------
       HERO
    --------------------------------- */

    .editorial-hero{

        padding:80px 0 70px;

    }

    .editorial-hero__grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .editorial-hero__content{

        max-width:none;

    }

    .editorial-hero__image{

        justify-content:center;

    }

    .editorial-hero__image img{

        max-width:560px;

    }

    /* ---------------------------------
       TYPOGRAPHY
    --------------------------------- */

    .editorial-hero h1{

        font-size:3.4rem;

    }

    .editorial-article h2{

        font-size:2.5rem;

    }

    .editorial-intro p{

        font-size:1.08rem;

    }

    .editorial-article p{

        font-size:1.05rem;

    }

    /* ---------------------------------
       SPACING
    --------------------------------- */

    .editorial-chapter{

        padding:60px 0;

    }

    .editorial-cta{

        padding:90px 0 80px;

    }

}


@media (max-width:768px){

    /* ---------------------------------
       HERO
    --------------------------------- */

    .editorial-hero{

        padding:60px 0 50px;

    }

    .editorial-hero__grid{

        gap:36px;

    }

    .editorial-hero__image{

        order:-1;

    }

    .editorial-hero__image img{

        max-width:100%;

        border-radius:14px;

    }

    /* ---------------------------------
       TYPOGRAPHY
    --------------------------------- */

    .editorial-eyebrow{

        font-size:12px;

        letter-spacing:.22em;

    }

    .editorial-hero h1{

        font-size:2.55rem;

    }

    .editorial-intro p{

        font-size:1.05rem;

        line-height:1.9;

    }

    .editorial-article h2{

        font-size:2rem;

    }

    .editorial-article p{

        font-size:1rem;

        line-height:1.85;

    }

    .editorial-blockquote{

        font-size:1.15rem;

    }

    /* ---------------------------------
       CTA
    --------------------------------- */

    .editorial-cta{

        padding:80px 0 70px;

    }

    .editorial-cta h2{

        font-size:2.2rem;

    }

    .editorial-cta p{

        font-size:1rem;

    }

    .editorial-cta .btn{

        width:100%;

        min-width:0;

    }

}


@media (max-width:576px){

    .editorial-hero{

        padding:50px 0 40px;

    }

    .editorial-chapter{

        padding:45px 0;

    }

    .editorial-divider{

        margin-bottom:28px;

    }

    .editorial-hero h1{

        font-size:2.15rem;

    }

    .editorial-article h2{

        font-size:1.75rem;

    }

    .editorial-intro p{

        font-size:1rem;

    }

    .editorial-article p{

        font-size:.98rem;

    }

    .editorial-article ul,
    .editorial-article ol{

        margin-left:22px;

    }

}

/* ==========================================================
   POLISH
========================================================== */

.editorial-hero__image img,
.editorial-cta .btn,
.editorial-article a{

    transition:all .30s ease;

}

.editorial-article a:hover{

    opacity:.85;

}

.editorial-cta .btn:hover{

    transform:translateY(-2px);

}

::selection{

    background:var(--gold);

    color:#fff;

}

html{

    scroll-behavior:smooth;

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.editorial-cta .btn:focus-visible,
.editorial-article a:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:4px;

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    html{

        scroll-behavior:auto;

    }

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================================
   PRINT
========================================================== */

@media print{

    .editorial-hero{

        padding:0;

    }

    .editorial-chapter{

        padding:24px 0;

    }

    .editorial-cta{

        display:none;

    }

    .editorial-hero__grid{

        display:block;

    }

    .editorial-hero__image{

        display:none;

    }

    .editorial-hero h1{

        font-size:2.25rem;

    }

    .editorial-article h2{

        font-size:1.6rem;

    }

}


/* ==========================================================
   END
========================================================== */