/* =============================================================
   SA HEDGE FUND — INSIGHTS PAGE
   ============================================================= */


/* =============================================================
   00 — PAGE CONTAINER
   ============================================================= */

/*
 * Uses the same global container architecture as the rest
 * of the SA Hedge Fund website.
 *
 * The previous version used --max, which is not part of the
 * site's current layout token system.
 */

.insight-wrap{

    width:min(
        var(--layout-container),
        calc(100% - (var(--gutter) * 2))
    );

    max-width:var(--layout-container);

    margin-inline:auto;

    padding-inline:0;

}


/* =============================================================
   BUTTONS
   ============================================================= */

.insight-btn{
    display:inline-flex;

    align-items:center;

    gap:10px;

    min-height:48px;

    padding:0 26px;

    font-size:0.86rem;

    letter-spacing:0.02em;

    transition:all .25s ease;

    border:1px solid transparent;

    cursor:pointer;

    font-family:'Inter',sans-serif;
}

.insight-btn-primary{
    background:var(--gold);

    color:var(--navy-deep);

    font-weight:500;
}

.insight-btn-primary:hover{
    background:#dcb769;
}

.insight-btn-line{
    border-bottom:1px solid var(--gold-dim);

    padding:0 0 4px;

    color:var(--on-navy);
}

.insight-btn-line:hover{
    border-color:var(--gold);

    color:var(--gold);
}

.insight-btn:hover .insight-arrow{
    transform:translateX(3px);
}

.insight-arrow{
    transition:transform .25s ease;
}


/* =============================================================
   EDITORIAL PRIMITIVES
   ============================================================= */

.insight-eyebrow{
    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:0.74rem;

    letter-spacing:0.16em;

    text-transform:uppercase;

    color:var(--gold);

    margin-bottom:20px;
}

.insight-eyebrow::before{
    content:'';

    width:24px;

    height:1px;

    background:var(--gold);
}

.insight-section-head{
    max-width:640px;

    margin:0 0 clamp(36px,5vw,54px);
}

.insight-section-head h2{
    font-size:clamp(1.6rem,3.2vw,2.2rem);

    line-height:1.3;
}

.insight-section-head p{
    margin-top:16px;

    font-size:1rem;

    line-height:1.75;

    max-width:58ch;
}


/* =============================================================
   01 — HERO
   ============================================================= */

.insight-hero{
    padding:
        clamp(64px,10vw,110px)
        0
        clamp(56px,8vw,84px);

    border-bottom:
        1px solid rgba(201,162,77,0.18);
}

.insight-hero-grid{
    display:grid;

    grid-template-columns:1.05fr 0.95fr;

    gap:clamp(40px,6vw,72px);

    align-items:center;
}

.insight-hero h1{
    font-size:clamp(2.6rem, 5vw, 3.8rem);

  line-height:1.12;

  letter-spacing:-.018em;

  max-width:24ch;

  margin-bottom:28px;
}

.insight-hero-sub{
   font-size:1.08rem;

  line-height:1.78;

  color:var(--on-navy-mute);

  max-width:58ch;

  margin-bottom:42px;
}

.insight-hero-sub p{
    font-size:1.02rem;

    line-height:1.8;

    color:var(--on-navy-mute);

    max-width:60ch;
}

.insight-hero-actions{
    display:flex;

    gap:28px;

    align-items:center;

    flex-wrap:wrap;

    margin-top:32px;
}


/* =============================================================
   HERO NETWORK VISUAL
   ============================================================= */

.insight-net-visual{
    display:flex;

    align-items:center;

    justify-content:center;
}

.insight-net-visual svg{
    width:100%;

    max-width:380px;

    height:auto;
}

.insight-net-line{
    stroke:var(--gold-dim);

    stroke-width:1;
}

.insight-net-node circle{
    fill:var(--navy-deep);

    stroke:var(--gold);

    stroke-width:1;
}

.insight-net-node.insight-small circle{
    r:5;

    fill:var(--gold);

    stroke:none;
}


/* =============================================================
   02 — WHY WE PUBLISH
   ============================================================= */

.insight-why{
    background:var(--cream);

    color:var(--on-cream);

    padding:
        clamp(64px,10vw,110px)
        0;
}

.insight-why .insight-wrap{
    max-width:700px;
}

.insight-why .insight-eyebrow{
    color:var(--gold-dark);
}

.insight-why .insight-eyebrow::before{
    background:var(--gold-dark);
}

.insight-why-body p{
    font-size:1.02rem;

    line-height:1.85;

    color:var(--on-cream);

    max-width:60ch;

    margin-bottom:12px;
}

.insight-why-body p:last-child{
    margin-bottom:0;
}


/* =============================================================
   03 — FEATURED / CORNERSTONE RESEARCH
   ============================================================= */

.insight-cornerstone{
    background:var(--neutral);

    color:var(--on-cream);

    padding:
        clamp(72px,11vw,130px)
        0;

    border-top:
        1px solid rgba(11,31,51,0.08);

    border-bottom:
        1px solid rgba(11,31,51,0.08);
}

.insight-cornerstone .insight-eyebrow{
    color:var(--gold-dark);
}

.insight-cornerstone .insight-eyebrow::before{
    background:var(--gold-dark);
}

.insight-cornerstone .insight-section-head p{
    color:var(--on-cream-mute);
}

.insight-cornerstone-grid{
    display:grid;

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

    gap:1px;

    background:rgba(11,31,51,0.1);

    border:1px solid rgba(11,31,51,0.1);
}

.insight-c-card{
    background:#fff;

    padding:
        clamp(34px,4.5vw,44px)
        clamp(28px,3.5vw,34px);

    display:flex;

    flex-direction:column;

    transition:background .25s ease;
}

.insight-c-card:hover{
    background:#fbfaf8;
}

.insight-c-card .insight-meta{
    display:flex;

    gap:14px;

    align-items:center;

    margin-bottom:20px;
}

.insight-c-card .insight-tag{
    font-size:0.72rem;

    letter-spacing:0.1em;

    text-transform:uppercase;

    color:var(--gold-dark);
}

.insight-c-card .insight-rt{
    font-size:0.76rem;

    color:var(--on-cream-mute);

    position:relative;

    padding-left:14px;
}

.insight-c-card .insight-rt::before{
    content:'·';

    position:absolute;

    left:0;

    color:var(--gold-dark);
}

.insight-c-card h3{
    font-size:clamp(1.2rem,2vw,1.42rem);

    line-height:1.32;

    margin-bottom:16px;
}

.insight-c-card p{
    font-size:0.95rem;

    line-height:1.7;

    color:var(--on-cream-mute);

    flex:1;
}

.insight-c-card .insight-read{
    margin-top:24px;

    font-size:0.82rem;

    font-weight:500;

    display:inline-flex;

    gap:8px;

    align-items:center;

    color:var(--navy);

    border-bottom:
        1px solid rgba(11,31,51,0.25);

    padding-bottom:3px;

    width:fit-content;
}

.insight-c-card .insight-read:hover{
    color:var(--gold-dark);

    border-color:var(--gold);
}

.insight-c-card .insight-read:hover .insight-arrow{
    transform:translateX(3px);
}


/* =============================================================
   04 — LATEST INSIGHTS
   ============================================================= */

.insight-latest{
    background:var(--cream);

    color:var(--on-cream);

    padding:
        clamp(72px,11vw,130px)
        0;
}

.insight-latest .insight-eyebrow{
    color:var(--gold-dark);
}

.insight-latest .insight-eyebrow::before{
    background:var(--gold-dark);
}

.insight-latest .insight-section-head p{
    color:var(--on-cream-mute);
}

.insight-latest-grid{
    display:grid;

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

    gap:clamp(28px,3.5vw,40px);
}

.insight-card{
    border-top:
        1px solid rgba(11,31,51,0.22);

    padding-top:20px;

    display:flex;

    flex-direction:column;
}

.insight-card .insight-meta{
    display:flex;

    gap:14px;

    align-items:center;

    font-size:0.76rem;

    color:var(--on-cream-mute);

    margin-bottom:14px;
}

.insight-card .insight-meta .insight-tag{
    color:var(--gold-dark);

    text-transform:uppercase;

    letter-spacing:0.08em;

    font-size:0.72rem;
}

.insight-card h3{
    font-size:1.08rem;

    line-height:1.4;

    margin-bottom:12px;
}

.insight-card p{
    font-size:0.9rem;

    line-height:1.65;

    color:var(--on-cream-mute);

    flex:1;
}

.insight-card .insight-read{
    margin-top:18px;

    font-size:0.8rem;

    font-weight:500;

    display:inline-flex;

    gap:8px;

    align-items:center;

    color:var(--navy);

    border-bottom:
        1px solid rgba(11,31,51,0.25);

    padding-bottom:2px;

    width:fit-content;
}

.insight-card .insight-read:hover{
    color:var(--gold-dark);

    border-color:var(--gold);
}

.insight-card .insight-read:hover .insight-arrow{
    transform:translateX(3px);
}


/* =============================================================
   PAGINATION
   ============================================================= */

.insight-pagination{
    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:72px;

    font-size:1rem;

    font-weight:400;
}

.insight-pagination .page-numbers{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:34px;

    height:34px;

    color:var(--on-cream-mute);

    transition:.25s ease;
}

.insight-pagination a{
    transition:all .2s ease;
}

.insight-pagination a:hover{
    color:var(--gold-dark);

    transform:translateY(-1px);
}

.insight-pagination .current{
    color:var(--on-cream);

    position:relative;
}

.insight-pagination .current::after{
    content:'';

    position:absolute;

    left:20%;

    right:20%;

    bottom:-8px;

    height:2px;

    background:var(--gold);
}

.insight-pagination .prev,
.insight-pagination .next{
    width:auto;

    padding:0 4px;
}

.insight-pagination .dots{
    pointer-events:none;
}


/* =============================================================
   05 — RESEARCH THEMES
   ============================================================= */

.insight-themes{
    background:var(--neutral);

    color:var(--on-cream);

    padding:
        clamp(72px,11vw,130px)
        0;

    border-top:
        1px solid rgba(11,31,51,0.08);
}

.insight-themes .insight-eyebrow{
    color:var(--gold-dark);
}

.insight-themes .insight-eyebrow::before{
    background:var(--gold-dark);
}

.insight-themes .insight-section-head p{
    color:var(--on-cream-mute);
}

.insight-themes-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:1px;

    background:rgba(11,31,51,0.1);

    border:1px solid rgba(11,31,51,0.1);
}

.insight-theme-card{
    background:#fff;

    padding:clamp(28px,3.5vw,34px);

    display:block;

    transition:background .25s ease;
}

.insight-theme-card:hover{
    background:#fbfaf8;
}

.insight-theme-card h3{
    font-size:1.08rem;

    margin-bottom:10px;
}

.insight-theme-card p{
    font-size:0.9rem;

    line-height:1.6;

    color:var(--on-cream-mute);

    margin-bottom:16px;
}

.insight-theme-card .insight-go{
    font-size:0.78rem;

    letter-spacing:0.03em;

    font-weight:500;

    color:var(--gold-dark);

    display:inline-flex;

    align-items:center;

    gap:6px;
}

.insight-theme-card:hover .insight-go .insight-arrow{
    transform:translateX(3px);
}


/* =============================================================
   06 — KNOWLEDGE FRAMEWORK
   ============================================================= */

.insight-kf{
    background:var(--navy);

    padding:
        clamp(72px,11vw,130px)
        0;

    border-top:
        1px solid rgba(201,162,77,0.18);

    border-bottom:
        1px solid rgba(201,162,77,0.18);

    text-align:center;
}

.insight-kf .insight-section-head{
    margin-left:auto;

    margin-right:auto;

    text-align:center;
}

.insight-kf .insight-eyebrow{
    justify-content:center;
}

.insight-kf .insight-section-head p{
    color:var(--on-navy-mute);

    margin-left:auto;

    margin-right:auto;
}

.insight-kf-flow{
    position:relative;

    display:grid;

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

    gap:10px;

    padding-top:16px;

    max-width:920px;

    margin:0 auto;
}

.insight-kf-flow::before{
    content:'';

    position:absolute;

    top:20px;

    left:8%;

    right:8%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--gold-dim),
            var(--gold),
            var(--gold-dim)
        );
}

.insight-kf-step{
    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;
}

.insight-kf-dot{
    width:40px;

    height:40px;

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

    border-radius:50%;

    background:var(--navy);

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:'Playfair Display',serif;

    font-style:italic;

    color:var(--gold);

    font-size:0.82rem;

    z-index:1;

    margin-bottom:14px;
}

.insight-kf-step h4{
    font-family:'Inter',sans-serif;

    font-weight:600;

    font-size:0.86rem;

    letter-spacing:0.01em;

    color:var(--on-navy);
}

.insight-kf-explain{
    max-width:640px;

    margin:
        clamp(44px,6vw,64px)
        auto
        0;
}

.insight-kf-explain p{
    font-size:1rem;

    line-height:1.8;

    color:var(--on-navy-mute);

    margin-bottom:12px;
}

.insight-kf-explain p:last-child{
    margin-bottom:0;
}


/* =============================================================
   07 — RESEARCH SUBSCRIPTION
   ============================================================= */

.insight-subscribe{
    background:var(--cream);

    color:var(--on-cream);

    padding:
        clamp(64px,10vw,110px)
        0;

    text-align:center;
}

.insight-subscribe .insight-wrap{
    max-width:520px;
}

.insight-subscribe .insight-eyebrow{
    justify-content:center;

    color:var(--gold-dark);
}

.insight-subscribe .insight-eyebrow::before{
    background:var(--gold-dark);
}

.insight-subscribe h2{
    font-size:clamp(1.4rem,2.8vw,1.85rem);

    line-height:1.32;

    margin-bottom:18px;
}

.insight-subscribe p{
    font-size:0.98rem;

    line-height:1.75;

    color:var(--on-cream-mute);

    margin-bottom:32px;
}

.insight-sub-form{
    display:flex;

    gap:16px;

    align-items:flex-end;

    justify-content:center;

    flex-wrap:wrap;
}

.insight-sub-field{
    flex:1;

    min-width:220px;

    text-align:left;
}

.insight-sub-field label{
    display:block;

    font-size:0.72rem;

    letter-spacing:0.1em;

    text-transform:uppercase;

    color:var(--on-cream-mute);

    margin-bottom:10px;
}

.insight-sub-field input{
    width:100%;

    border:none;

    border-bottom:
        1px solid rgba(11,31,51,0.28);

    background:transparent;

    font-family:'Inter',sans-serif;

    font-size:1rem;

    color:var(--on-cream);

    padding:8px 2px 12px;

    transition:border-color .2s ease;
}

.insight-sub-field input::placeholder{
    color:rgba(90,101,121,0.5);
}

.insight-sub-field input:focus{
    outline:none;

    border-color:var(--gold);
}

.insight-sub-note{
    margin-top:20px;

    font-size:0.78rem;

    color:var(--on-cream-mute);
}

.insight-sub-thanks{
    display:none;

    font-family:'Playfair Display',serif;

    font-style:italic;

    font-size:1.05rem;

    color:var(--navy);

    margin-top:8px;
}

.insight-sub-thanks.insight-show{
    display:block;
}

.insight-sub-form.insight-hidden{
    display:none;
}


/* =============================================================
   CLOSING
   ============================================================= */

.insight-closing{
    padding:
        clamp(76px,11vw,140px)
        0;

    text-align:center;
}

.insight-closing .insight-rule{
    width:44px;

    height:2px;

    background:var(--gold);

    margin:0 auto 36px;
}

.insight-closing h2{
    font-size:clamp(1.8rem,4vw,2.6rem);

    max-width:20ch;

    margin:0 auto 20px;

    line-height:1.28;
}

.insight-closing p{
    max-width:52ch;

    margin:0 auto 40px;

    color:var(--on-navy-mute);

    font-size:1.02rem;

    line-height:1.75;
}

.insight-closing-actions{
    display:flex;

    gap:28px;

    justify-content:center;

    flex-wrap:wrap;

    align-items:center;
}


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

@media (max-width:980px){

    .nav-links{
        display:none;
    }

    .nav-burger{
        display:flex;
    }

    .insight-hero-grid{
        grid-template-columns:1fr;
    }

    .insight-cornerstone-grid{
        grid-template-columns:1fr;
    }

    .insight-latest-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


@media (max-width:760px){

    .insight-kf-flow{
        grid-template-columns:repeat(6,1fr);

        gap:4px;
    }

    .insight-kf-flow::before{
        left:6%;

        right:6%;
    }

    .insight-kf-dot{
        width:30px;

        height:30px;

        font-size:0.68rem;
    }

    .insight-kf-step h4{
        font-size:0.66rem;
    }

}


@media (max-width:640px){

    .insight-latest-grid{
        grid-template-columns:1fr;
    }

    .insight-sub-form{
        flex-direction:column;

        align-items:stretch;
    }

}


@media (max-width:480px){

    .insight-hero-actions,
    .insight-closing-actions{
        flex-direction:column;

        align-items:flex-start;
    }

    .insight-closing-actions{
        align-items:center;
    }

}