/* =========================================================
   BLUESTONE DIGILAB — INSIGHTS PAGE
   File: css/insights.css
   ========================================================= */

.insights-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #35a7ff;

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

    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.insights-kicker::before {
    content: "";

    width: 26px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #35a7ff,
            rgba(53,167,255,0)
        );
}

.insights-nav-active {
    color: #ffffff;
}

.insights-nav-active::after {
    width: 100%;
}


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

.insights-hero {
    position: relative;

    min-height: 92vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding: 150px 0 100px;

    background:
        radial-gradient(
            circle at 72% 36%,
            rgba(18,103,255,0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 22% 78%,
            rgba(126,82,255,0.08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #07111f,
            #081625 52%,
            #06101c
        );
}

.insights-hero-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.023) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.023) 1px,
            transparent 1px
        );

    background-size: 66px 66px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 16%,
            black 80%,
            transparent
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 16%,
            black 80%,
            transparent
        );
}

.insights-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;
}

.insights-glow-one {
    width: 430px;
    height: 430px;

    right: 7%;
    top: 18%;

    background: rgba(18,103,255,0.20);
}

.insights-glow-two {
    width: 290px;
    height: 290px;

    left: 3%;
    bottom: 3%;

    background: rgba(112,82,255,0.09);
}

.insights-hero-inner {
    position: relative;
    z-index: 4;

    display: grid;
    grid-template-columns: 1.08fr 0.92fr;

    align-items: center;

    gap: 80px;
}

.insights-hero-copy {
    max-width: 720px;
}

.insights-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 8px 14px;

    margin-bottom: 24px;

    border:
        1px solid rgba(53,167,255,0.22);

    border-radius: 999px;

    background:
        rgba(53,167,255,0.055);

    color: #a9d9ff;

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

    letter-spacing: 1.8px;
}

.insights-eyebrow > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #35a7ff;

    box-shadow:
        0 0 14px rgba(53,167,255,0.8);
}

.insights-hero-copy h1 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(64px, 7vw, 106px);

    line-height: 0.94;

    letter-spacing: -6px;

    font-weight: 800;
}

.insights-hero-copy h1 span {
    display: block;

    margin-top: 10px;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            #1267ff,
            #35a7ff 55%,
            #8a76ff
        );

    -webkit-background-clip: text;
    background-clip: text;
}

.insights-hero-copy > p {
    max-width: 630px;

    margin: 30px 0 34px;

    color: #aab6c5;

    font-size: 17px;

    line-height: 1.8;
}

.insights-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 13px;
}

.insights-primary-btn,
.insights-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 15px 22px;

    border-radius: 7px;

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

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.insights-primary-btn {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #1267ff,
            #258cff
        );

    box-shadow:
        0 12px 30px rgba(18,103,255,0.20);
}

.insights-primary-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 17px 40px rgba(18,103,255,0.30);
}

.insights-secondary-btn {
    color: #ffffff;

    border:
        1px solid rgba(255,255,255,0.14);

    background:
        rgba(255,255,255,0.035);
}

.insights-secondary-btn:hover {
    transform: translateY(-3px);

    background:
        rgba(255,255,255,0.075);
}


/* hero topic panel */

.insights-hero-panel {
    padding: 26px;

    border:
        1px solid rgba(255,255,255,0.085);

    border-radius: 20px;

    background:
        rgba(8,18,31,0.64);

    -webkit-backdrop-filter:
        blur(20px);

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 28px 80px rgba(0,0,0,0.31);
}

.insights-panel-label {
    display: block;

    margin-bottom: 14px;

    color: #687b90;

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

    letter-spacing: 1.8px;
}

.insights-topic-list {
    display: grid;
}

.insights-topic-list > div {
    display: grid;
    grid-template-columns: 48px 1fr;

    align-items: center;

    min-height: 68px;

    border-bottom:
        1px solid rgba(255,255,255,0.06);

    transition:
        padding-left 0.25s ease,
        background 0.25s ease;
}

.insights-topic-list > div:last-child {
    border-bottom: none;
}

.insights-topic-list > div:hover {
    padding-left: 8px;

    background:
        linear-gradient(
            90deg,
            rgba(53,167,255,0.06),
            transparent
        );
}

.insights-topic-list span {
    color: #35a7ff;

    font-size: 10px;
    font-weight: 700;
}

.insights-topic-list strong {
    color: #dbe5ef;

    font-size: 15px;
    font-weight: 550;
}


/* =========================================================
   SHARED HEADINGS
   ========================================================= */

.insights-section-heading {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;

    align-items: end;

    gap: 60px;

    margin-bottom: 52px;
}

.insights-section-heading h2,
.latest-insights-header h2,
.thoughts-heading h2,
.newsletter-copy h2,
.insights-final-inner h2 {
    margin-top: 15px;

    color: #ffffff;

    font-size:
        clamp(42px, 5vw, 70px);

    line-height: 1.03;

    letter-spacing: -3.5px;

    font-weight: 750;
}

.insights-section-heading h2 span,
.latest-insights-header h2 span,
.thoughts-heading h2 span,
.newsletter-copy h2 span,
.insights-final-inner h2 span {
    color: #35a7ff;
}

.insights-section-heading > p {
    max-width: 470px;

    justify-self: end;

    color: #8797aa;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   FEATURED
   ========================================================= */

/* =========================================================
   FEATURED INSIGHT — COMPACT VERSION
   ========================================================= */

.featured-insight-card {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;

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

    box-shadow: 0 24px 65px rgba(0,0,0,0.26);
}


/* IMAGE SIDE */

.featured-insight-visual {
    position: relative;

    min-height: 330px;
    max-height: 380px;

    overflow: hidden;

    background: #07111f;
}

.featured-insight-visual img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;

    transition: transform 0.7s ease;
}

.featured-insight-card:hover
.featured-insight-visual img {
    transform: scale(1.03);
}


/* DARK OVERLAY */

.featured-insight-visual::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(7,17,31,0.78) 0%,
            rgba(7,17,31,0.25) 48%,
            rgba(7,17,31,0.06) 100%
        );
}


/* OPTIONAL GRID */

.featured-grid-lines {
    position: absolute;
    inset: 0;

    z-index: 2;

    opacity: 0.22;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        );

    background-size: 46px 46px;
}


/* REMOVE LARGE GLOW FEEL */

.featured-orb {
    position: absolute;

    z-index: 2;

    border-radius: 50%;

    filter: blur(55px);

    opacity: 0.35;
}

.featured-orb-one {
    width: 170px;
    height: 170px;

    right: 10%;
    top: 12%;

    background: rgba(18,103,255,0.20);
}

.featured-orb-two {
    width: 130px;
    height: 130px;

    left: 8%;
    bottom: 10%;

    background: rgba(108,82,255,0.10);
}


/* TEXT OVER IMAGE */

.featured-visual-content {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 24px;

    z-index: 3;
}

.featured-visual-content > span {
    display: block;

    margin-bottom: 10px;

    color: #72bcff;

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

    letter-spacing: 1.6px;
}

.featured-visual-content strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    color: #ffffff;

    font-size: clamp(22px, 2.7vw, 34px);

    line-height: 1;

    letter-spacing: -1.2px;
}

.featured-visual-content i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #35a7ff;
}


/* CONTENT SIDE */

.featured-insight-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 32px 34px;
}

.featured-insight-content h3 {
    margin: 15px 0 13px;

    font-size: clamp(26px, 2.8vw, 36px);

    line-height: 1.12;

    letter-spacing: -1.4px;
}

.featured-insight-content p {
    font-size: 13px;
    line-height: 1.7;
}

.featured-insight-content
.insight-read-link {
    margin-top: 20px;
}


@media (max-width: 900px) {

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

    .featured-insight-visual {
        min-height: 260px;
        max-height: 300px;
    }

    .featured-insight-content {
        padding: 26px;
    }
}

@media (max-width: 600px) {

    .featured-insight-visual {
        min-height: 220px;
        max-height: 240px;
    }

    .featured-visual-content {
        left: 20px;
        right: 20px;
        bottom: 18px;
    }

    .featured-visual-content strong {
        font-size: 24px;
    }

    .featured-insight-content {
        padding: 22px;
    }
}

/* =========================================================
   CATEGORIES
   ========================================================= */

.insights-categories {
    position: sticky;
    top: 90px;
    z-index: 40;

    border-top:
        1px solid rgba(255,255,255,0.055);

    border-bottom:
        1px solid rgba(255,255,255,0.055);

    background:
        rgba(6,14,24,0.88);

    -webkit-backdrop-filter:
        blur(18px);

    backdrop-filter:
        blur(18px);
}

.insights-category-strip {
    display: flex;
    align-items: center;

    gap: 8px;

    overflow-x: auto;

    padding: 14px 0;

    scrollbar-width: none;
}

.insights-category-strip::-webkit-scrollbar {
    display: none;
}

.insight-filter {
    flex-shrink: 0;

    padding: 9px 13px;

    border:
        1px solid rgba(255,255,255,0.075);

    border-radius: 999px;

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

    color: #8c9bad;

    font-family: inherit;

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

    cursor: pointer;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.insight-filter:hover,
.insight-filter.active {
    color: #ffffff;

    border-color:
        rgba(53,167,255,0.30);

    background:
        rgba(53,167,255,0.10);
}


/* =========================================================
   LATEST INSIGHTS
   ========================================================= */

/* =========================================================
   LATEST INSIGHTS — IMPROVED CARD SIZE
   ========================================================= */

.insights-editorial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

.editorial-card {
    overflow: hidden;

    display: flex;
    flex-direction: column;

    border: 1px solid rgba(255,255,255,0.075);
    border-radius: 18px;

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

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.editorial-card:hover {
    transform: translateY(-6px);

    border-color: rgba(53,167,255,0.20);

    box-shadow: 0 24px 65px rgba(0,0,0,0.25);
}


/* large and wide cards */
.editorial-card-large,
.editorial-card-wide {
    grid-column: span 2;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    min-height: 340px;
}


/* image wrapper */
.editorial-visual {
    position: relative;
    overflow: hidden;

    min-height: 220px;
    max-height: 260px;

    background: #07111f;
}

.editorial-card-large .editorial-visual,
.editorial-card-wide .editorial-visual {
    min-height: 100%;
    max-height: none;
}


/* actual images */
.editorial-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.65s cubic-bezier(.2,.7,.2,1);
}

.editorial-card:hover .editorial-image img {
    transform: scale(1.04);
}


/* dark overlay on image */
.editorial-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(7,17,31,0.72) 0%,
            rgba(7,17,31,0.20) 45%,
            rgba(7,17,31,0.03) 100%
        );

    pointer-events: none;
}


/* category label on image */
.editorial-category {
    position: absolute;
    left: 18px;
    bottom: 16px;
    z-index: 2;

    color: #ffffff;

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

    letter-spacing: 1.5px;
    text-transform: uppercase;
}


/* text content */
.editorial-content {
    padding: 20px 22px 24px;
}

.editorial-card-large .editorial-content,
.editorial-card-wide .editorial-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 26px 28px;
}

.editorial-content h3 {
    margin: 14px 0 12px;

    color: #ffffff;

    font-size: clamp(22px, 2.1vw, 30px);
    line-height: 1.18;
    letter-spacing: -1px;
}

.editorial-content p {
    color: #8797aa;

    font-size: 13px;
    line-height: 1.75;
}

.insight-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    color: #6e8093;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.insight-read-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    margin-top: 20px;

    color: #35a7ff;

    font-size: 12px;
    font-weight: 600;
}

.insight-read-link i {
    transition: transform 0.25s ease;
}

.insight-read-link:hover i {
    transform: translateX(4px);
}


/* =========================================================
   QUICK THOUGHTS
   ========================================================= */

.insights-thoughts {
    padding: 120px 0;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(18,103,255,0.07),
            transparent 30%
        ),
        #07111f;
}

.thoughts-heading {
    max-width: 760px;

    margin-bottom: 45px;
}

.thoughts-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 18px;
}

.thought-card {
    min-height: 230px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 24px;

    border:
        1px solid rgba(255,255,255,0.075);

    border-radius: 16px;

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

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.thought-card:hover {
    transform: translateY(-5px);

    background:
        rgba(53,167,255,0.045);
}

.thought-card > span {
    color: #35a7ff;

    font-size: 10px;
    font-weight: 700;
}

.thought-card p {
    color: #c2ccd6;

    font-size: 16px;

    line-height: 1.6;
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.insights-newsletter {
    padding: 110px 0;

    border-top:
        1px solid rgba(255,255,255,0.05);

    border-bottom:
        1px solid rgba(255,255,255,0.05);

    background:
        linear-gradient(
            135deg,
            #08131f,
            #091928
        );
}

.newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 0.9fr;

    align-items: center;

    gap: 80px;
}

.newsletter-copy p {
    max-width: 560px;

    margin-top: 20px;

    color: #8696a8;

    font-size: 15px;

    line-height: 1.8;
}

.newsletter-form {
    padding: 24px;

    border:
        1px solid rgba(255,255,255,0.075);

    border-radius: 16px;

    background:
        rgba(255,255,255,0.025);
}

.newsletter-form label {
    display: block;

    margin-bottom: 10px;

    color: #a9b6c4;

    font-size: 11px;
    font-weight: 600;
}

.newsletter-input-row {
    display: grid;
    grid-template-columns: 1fr auto;

    gap: 10px;
}

.newsletter-form input {
    min-width: 0;

    padding: 14px 15px;

    border:
        1px solid rgba(255,255,255,0.09);

    border-radius: 7px;

    outline: none;

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

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;
}

.newsletter-form input:focus {
    border-color:
        rgba(53,167,255,0.42);
}

.newsletter-form button {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 14px 18px;

    border: none;
    border-radius: 7px;

    background:
        linear-gradient(
            90deg,
            #1267ff,
            #258cff
        );

    color: #ffffff;

    font-family: inherit;

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

    cursor: pointer;
}

.newsletter-form small {
    display: block;

    margin-top: 10px;

    color: #65778a;

    font-size: 9px;
}


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

.insights-final-cta {
    position: relative;

    overflow: hidden;

    padding: 145px 0;

    background:
        linear-gradient(
            135deg,
            #07111f,
            #081827 50%,
            #07111f
        );

    text-align: center;
}

.insights-final-inner {
    position: relative;
    z-index: 3;

    max-width: 900px;
}

.insights-final-inner h2 {
    font-size:
        clamp(52px, 7vw, 90px);
}

.insights-final-inner p {
    max-width: 650px;

    margin:
        25px auto 0;

    color: #8999ab;

    font-size: 15px;

    line-height: 1.85;
}

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

    gap: 12px;

    margin-top: 35px;

    padding: 16px 24px;

    border-radius: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #1267ff,
            #258cff
        );

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

    box-shadow:
        0 12px 34px rgba(18,103,255,0.22);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.insights-cta-button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 45px rgba(18,103,255,0.33);
}

.insights-cta-button i {
    transition:
        transform 0.25s ease;
}

.insights-cta-button:hover i {
    transform: translateX(4px);
}

.insights-cta-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(110px);
}

.cta-glow-one {
    width: 420px;
    height: 420px;

    left: -90px;
    bottom: -150px;

    background:
        rgba(18,103,255,0.17);
}

.cta-glow-two {
    width: 300px;
    height: 300px;

    right: -60px;
    top: -70px;

    background:
        rgba(111,83,255,0.10);
}


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

@media (max-width: 1050px) {

    .insights-categories {
        top: 54px;
    }

    .insights-hero-inner {
        gap: 50px;
    }

    .thoughts-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}


@media (max-width: 900px) {

    .insights-hero {
        min-height: auto;

        padding:
            120px 0 95px;
    }

    .insights-hero-inner,
    .insights-section-heading,
    .featured-insight-card,
    .newsletter-inner {
        grid-template-columns: 1fr;
    }

    .insights-hero-panel {
        margin-top: 10px;
    }

    .insights-section-heading {
        align-items: start;

        gap: 20px;
    }

    .insights-section-heading > p {
        justify-self: start;
    }

    .featured-insight-visual {
        min-height: 390px;
    }

    .editorial-card-large,
    .editorial-card-wide {
        grid-template-columns: 1fr;
    }

    .newsletter-inner {
        gap: 36px;
    }

}


@media (max-width: 700px) {

    .insights-editorial-grid {
        grid-template-columns: 1fr;
    }

    .editorial-card-large,
    .editorial-card-wide {
        grid-column: auto;
    }

    .thoughts-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .insights-hero {
        padding:
            100px 0 78px;
    }

    .insights-hero-copy h1 {
        letter-spacing: -3px;
    }

    .insights-hero-copy > p {
        font-size: 14px;
    }

    .insights-primary-btn,
    .insights-secondary-btn {
        width: 100%;
    }

    .insights-featured,
    .latest-insights,
    .insights-thoughts,
    .insights-newsletter {
        padding:
            85px 0;
    }

    .insights-section-heading h2,
    .latest-insights-header h2,
    .thoughts-heading h2,
    .newsletter-copy h2 {
        letter-spacing: -2.3px;
    }

    .featured-insight-content,
    .editorial-card-large
    .editorial-content,
    .editorial-card-wide
    .editorial-content {
        padding: 26px;
    }

    .featured-visual-content {
        left: 24px;
        right: 24px;
        bottom: 26px;
    }

    .featured-visual-content strong {
        gap: 8px;

        font-size: 28px;
    }

    .insight-meta-row {
        flex-wrap: wrap;
    }

    .newsletter-input-row {
        grid-template-columns: 1fr;
    }

    .newsletter-form button {
        justify-content: center;
    }

    .insights-final-cta {
        padding:
            105px 0;
    }

    .insights-final-inner h2 {
        letter-spacing: -3px;
    }

}


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

    .editorial-card,
    .thought-card,
    .insights-primary-btn,
    .insights-secondary-btn {
        transition: none;
    }

}




@media (max-width: 900px) {

    .editorial-card-large,
    .editorial-card-wide {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .editorial-card-large .editorial-visual,
    .editorial-card-wide .editorial-visual {
        min-height: 240px;
        max-height: 300px;
    }

    .editorial-card-large .editorial-content,
    .editorial-card-wide .editorial-content {
        padding: 24px;
    }
}

@media (max-width: 700px) {

    .insights-editorial-grid {
        grid-template-columns: 1fr;
    }

    .editorial-card-large,
    .editorial-card-wide {
        grid-column: auto;
    }

    .editorial-visual {
        min-height: 210px;
        max-height: 240px;
    }

    .editorial-content {
        padding: 20px;
    }

    .editorial-content h3 {
        font-size: 24px;
    }

    .insight-meta-row {
        flex-wrap: wrap;
    }
}