/* ===== Insights Page — Moonshot-Style Cards + 3D Pop-out ===== */

/* ── Active topbar link ── */
.topbar__link--active {
    color: var(--text) !important;
    font-weight: 500;
}

/* ════════════════════════════════════════════ */
/* INSIGHTS HERO HEADER                        */
/* ════════════════════════════════════════════ */
.insights-hero {
    padding: 72px 56px 48px;
    border-bottom: 1px solid var(--border);
}

.insights-hero__eyebrow {
    margin-bottom: 20px;
}

.insights-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--accent);
    padding: 5px 12px;
    border: 1px solid rgba(196, 85, 58, 0.25);
    border-radius: 100px;
    background: rgba(196, 85, 58, 0.05);
}

.insights-hero__heading {
    font-family: var(--font-body);
    font-size: clamp(42px, 6vw, 88px);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -2.5px;
    color: var(--text);
    margin-bottom: 24px;
}

.insights-hero__sub {
    font-size: 1.05rem;
    color: var(--body-color);
    line-height: 1.6;
    max-width: 440px;
}

/* ════════════════════════════════════════════ */
/* INSIGHTS CARDS SECTION                      */
/* ════════════════════════════════════════════ */
.insights-cards-section {
    padding: 64px 56px 100px;
}

.insights-section {
    padding: 80px 56px 100px;
    border-top: 1px solid var(--border);
}

/* 3D Stage — provides perspective for card pop-out */
.insights-stage {
    perspective: 1200px;
    position: relative;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


/* ════════════════════════════════════════════ */
/* INSIGHT CARD — BASE                         */
/* ════════════════════════════════════════════ */
.insight-card {
    border-radius: 20px;
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    border: none;
    min-height: 260px;
    cursor: pointer;
    outline: none;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(.4, 0, .15, 1),
        box-shadow 0.45s cubic-bezier(.4, 0, .15, 1),
        filter 0.4s ease,
        opacity 0.4s ease;
}

/* Soft decorative glow blob */
.insight-card::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Normal hover — gentle lift */
.insight-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08),
        0 8px 20px rgba(0, 0, 0, 0.04);
}

.insight-card:hover::before {
    opacity: 0.65;
    transform: scale(1.15);
}


/* ── Tag pill ── */
.insight-card__tag {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 100px;
    position: relative;
    z-index: 1;
}

/* ── Quote / headline ── */
.insight-card__quote {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.4;
    border: none;
    padding: 0;
    margin: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}

/* ── Body text ── */
.insight-card__body {
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
    opacity: 0.7;
}

/* ── Footer row ── */
.insight-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 10px;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.insight-card__no {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    opacity: 0.35;
    font-variant-numeric: tabular-nums;
}


/* ── Tags row (multiple pills) ── */
.insight-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
    z-index: 1;
}

/* ── Card title ── */
.insight-card__title {
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
    margin: 4px 0 6px;
}

/* ── Comparison side-by-side ── */
.insight-card__comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 8px 0 4px;
    position: relative;
    z-index: 1;
}

.insight-card__col {
    padding: 20px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.04);
}

body.dark .insight-card__col {
    background: rgba(255, 255, 255, 0.04);
}

.insight-card__col-head {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
    opacity: 0.8;
}

.insight-card__col-body {
    font-size: 0.82rem;
    line-height: 1.6;
    margin: 0;
    opacity: 0.7;
}

/* ── Attribution ── */
.insight-card__attr {
    font-size: 11px;
    font-style: italic;
    font-family: var(--font-display);
    opacity: 0.5;
    margin-right: auto;
}

/* ── Single-card full-width layout ── */
.insights-grid:only-child .insight-card:only-child,
.insights-grid .insight-card:only-child {
    grid-column: 1 / -1;
    max-width: 780px;
}

/* ── Quote inside long-form card ── */
.insight-card__quote {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    border: none;
    border-left: 2px solid currentColor;
    padding: 0 0 0 16px;
    margin: 8px 0 0;
    opacity: 0.85;
    flex: unset;
    position: relative;
    z-index: 1;
}

/* ════════════════════════════════════════════ */
/* 3D POP-OUT INTERACTION                      */
/* Click a card → it pops forward in 3D,       */
/* siblings blur & recede.                     */
/* ════════════════════════════════════════════ */

/* When any card is active, the grid enters "focused" mode */
.insights-grid.has-active .insight-card {
    filter: blur(3px) saturate(0.6);
    opacity: 0.45;
    transform: scale(0.96) translateZ(-60px);
    pointer-events: none;
    cursor: default;
}

/* The active/popped card overrides the blur */
.insights-grid.has-active .insight-card.is-popped {
    filter: none;
    opacity: 1;
    transform: scale(1.08) translateZ(80px);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.18),
        0 12px 30px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(196, 85, 58, 0.12);
    z-index: 50;
    pointer-events: auto;
    cursor: pointer;
}

body.dark .insights-grid.has-active .insight-card.is-popped {
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.45),
        0 12px 30px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(212, 105, 79, 0.15);
}

/* Close hint on active card */
.insight-card.is-popped::after {
    content: 'click to close';
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0.35;
    z-index: 2;
    pointer-events: none;
    font-family: var(--font-body);
    color: inherit;
}


/* ════════════════════════════════════════════ */
/* CARD COLOR VARIATIONS — LIGHT MODE          */
/* ════════════════════════════════════════════ */

/* Card 1 — Warm Terracotta Tint */
.insight-card--warm {
    background: linear-gradient(145deg, #f5e6df 0%, #f0d8cc 40%, #eeddd4 100%);
    color: #3d2218;
}

.insight-card--warm .insight-card__tag {
    background: rgba(196, 85, 58, 0.12);
    color: #b04a30;
}

.insight-card--warm .insight-card__quote {
    color: #2c1810;
}

.insight-card--warm .insight-card__body {
    color: #5a3e34;
}

.insight-card--warm .insight-card__no {
    color: #87604f;
}

.insight-card--warm::before {
    background: radial-gradient(circle, #e8a088 0%, transparent 70%);
    bottom: -40px;
    right: -30px;
}

/* Card 2 — Soft Sand / Cream */
.insight-card--sand {
    background: linear-gradient(145deg, #f7f1e8 0%, #f0e8d8 40%, #ece4d6 100%);
    color: #3d3425;
}

.insight-card--sand .insight-card__tag {
    background: rgba(180, 140, 80, 0.12);
    color: #8a6d3b;
}

.insight-card--sand .insight-card__quote {
    color: #2e2618;
}

.insight-card--sand .insight-card__body {
    color: #6b5c44;
}

.insight-card--sand .insight-card__no {
    color: #9a8a6f;
}

.insight-card--sand::before {
    background: radial-gradient(circle, #e8d8a8 0%, transparent 70%);
    top: -30px;
    left: -20px;
}

/* Card 3 — Dusty Rose */
.insight-card--rose {
    background: linear-gradient(145deg, #f3e4e6 0%, #edd6da 40%, #f0dce0 100%);
    color: #3a2025;
}

.insight-card--rose .insight-card__tag {
    background: rgba(180, 80, 100, 0.10);
    color: #a04960;
}

.insight-card--rose .insight-card__quote {
    color: #2d181c;
}

.insight-card--rose .insight-card__body {
    color: #6b4450;
}

.insight-card--rose .insight-card__no {
    color: #9a7580;
}

.insight-card--rose::before {
    background: radial-gradient(circle, #e0a8b8 0%, transparent 70%);
    top: -20px;
    right: -40px;
}

/* Card 4 — Deep Terracotta (stronger) */
.insight-card--terra {
    background: linear-gradient(145deg, #e8c4b4 0%, #ddb8a4 50%, #d8b09e 100%);
    color: #2e1a12;
}

.insight-card--terra .insight-card__tag {
    background: rgba(255, 255, 255, 0.25);
    color: #7a3a22;
}

.insight-card--terra .insight-card__quote {
    color: #2a1610;
}

.insight-card--terra .insight-card__body {
    color: #4e2e22;
}

.insight-card--terra .insight-card__no {
    color: #7a5848;
}

.insight-card--terra::before {
    background: radial-gradient(circle, #c89070 0%, transparent 70%);
    bottom: -30px;
    left: -20px;
}

/* Card 5 — Warm Grey Sage */
.insight-card--sage {
    background: linear-gradient(145deg, #e8e5de 0%, #dedad2 40%, #e2dfd8 100%);
    color: #33302a;
}

.insight-card--sage .insight-card__tag {
    background: rgba(100, 100, 80, 0.10);
    color: #6b6650;
}

.insight-card--sage .insight-card__quote {
    color: #252320;
}

.insight-card--sage .insight-card__body {
    color: #5a5750;
}

.insight-card--sage .insight-card__no {
    color: #8a8578;
}

.insight-card--sage::before {
    background: radial-gradient(circle, #c8c0a8 0%, transparent 70%);
    bottom: -30px;
    right: -30px;
}

/* Card 6 — Apricot Glow */
.insight-card--apricot {
    background: linear-gradient(145deg, #f7e8da 0%, #f2dcc8 40%, #edcfb8 100%);
    color: #3a2a1a;
}

.insight-card--apricot .insight-card__tag {
    background: rgba(200, 120, 60, 0.12);
    color: #9a5c2a;
}

.insight-card--apricot .insight-card__quote {
    color: #2e2014;
}

.insight-card--apricot .insight-card__body {
    color: #6a5038;
}

.insight-card--apricot .insight-card__no {
    color: #a08868;
}

.insight-card--apricot::before {
    background: radial-gradient(circle, #e8b888 0%, transparent 70%);
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}

/* Card 7 — Soft Blush */
.insight-card--blush {
    background: linear-gradient(145deg, #f5e8e2 0%, #f0ddd4 40%, #eccfcf 100%);
    color: #3a2020;
}

.insight-card--blush .insight-card__tag {
    background: rgba(196, 85, 58, 0.10);
    color: #b04a40;
}

.insight-card--blush .insight-card__quote {
    color: #2c1818;
}

.insight-card--blush .insight-card__body {
    color: #6a4040;
}

.insight-card--blush .insight-card__no {
    color: #a07878;
}

.insight-card--blush::before {
    background: radial-gradient(circle, #dda0a0 0%, transparent 70%);
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
}

/* Card 8 — Ivory Neutral */
.insight-card--ivory {
    background: linear-gradient(145deg, #f2ede6 0%, #ebe5dc 40%, #e8e0d4 100%);
    color: #352e26;
}

.insight-card--ivory .insight-card__tag {
    background: rgba(140, 110, 80, 0.10);
    color: #7a6540;
}

.insight-card--ivory .insight-card__quote {
    color: #2a2418;
}

.insight-card--ivory .insight-card__body {
    color: #5e5440;
}

.insight-card--ivory .insight-card__no {
    color: #9a8e78;
}

.insight-card--ivory::before {
    background: radial-gradient(circle, #d8c8a8 0%, transparent 70%);
    bottom: -40px;
    left: -30px;
}


/* ════════════════════════════════════════════ */
/* DARK MODE COLOR VARIATIONS                  */
/* ════════════════════════════════════════════ */
body.dark .insight-card--warm {
    background: linear-gradient(145deg, #2e201a 0%, #352218 40%, #3a2720 100%);
    color: #e8d0c4;
}

body.dark .insight-card--warm .insight-card__tag {
    background: rgba(212, 105, 79, 0.18);
    color: #e0845a;
}

body.dark .insight-card--warm .insight-card__quote {
    color: #eeddd0;
}

body.dark .insight-card--warm .insight-card__body {
    color: #b89880;
}

body.dark .insight-card--warm .insight-card__no {
    color: #7a5e50;
}

body.dark .insight-card--warm::before {
    background: radial-gradient(circle, rgba(196, 85, 58, 0.3) 0%, transparent 70%);
}

body.dark .insight-card--sand {
    background: linear-gradient(145deg, #28251c 0%, #2e2a1e 40%, #332e22 100%);
    color: #e0d8c4;
}

body.dark .insight-card--sand .insight-card__tag {
    background: rgba(200, 170, 100, 0.15);
    color: #c8a860;
}

body.dark .insight-card--sand .insight-card__quote {
    color: #ece4d0;
}

body.dark .insight-card--sand .insight-card__body {
    color: #a89878;
}

body.dark .insight-card--sand .insight-card__no {
    color: #706650;
}

body.dark .insight-card--sand::before {
    background: radial-gradient(circle, rgba(200, 170, 100, 0.25) 0%, transparent 70%);
}

body.dark .insight-card--rose {
    background: linear-gradient(145deg, #2a1e20 0%, #302024 40%, #352428 100%);
    color: #e0c8d0;
}

body.dark .insight-card--rose .insight-card__tag {
    background: rgba(200, 90, 120, 0.15);
    color: #d07088;
}

body.dark .insight-card--rose .insight-card__quote {
    color: #eedce0;
}

body.dark .insight-card--rose .insight-card__body {
    color: #a88090;
}

body.dark .insight-card--rose .insight-card__no {
    color: #705860;
}

body.dark .insight-card--rose::before {
    background: radial-gradient(circle, rgba(200, 90, 120, 0.25) 0%, transparent 70%);
}

body.dark .insight-card--terra {
    background: linear-gradient(145deg, #2d1c14 0%, #3a2418 40%, #3e281c 100%);
    color: #e8c8b0;
}

body.dark .insight-card--terra .insight-card__tag {
    background: rgba(255, 255, 255, 0.08);
    color: #d08858;
}

body.dark .insight-card--terra .insight-card__quote {
    color: #f0d8c0;
}

body.dark .insight-card--terra .insight-card__body {
    color: #b08868;
}

body.dark .insight-card--terra .insight-card__no {
    color: #705040;
}

body.dark .insight-card--terra::before {
    background: radial-gradient(circle, rgba(196, 85, 58, 0.35) 0%, transparent 70%);
}

body.dark .insight-card--sage {
    background: linear-gradient(145deg, #24231e 0%, #2a2822 40%, #2e2c26 100%);
    color: #d8d4c8;
}

body.dark .insight-card--sage .insight-card__tag {
    background: rgba(160, 160, 120, 0.12);
    color: #b0aa88;
}

body.dark .insight-card--sage .insight-card__quote {
    color: #e4e0d4;
}

body.dark .insight-card--sage .insight-card__body {
    color: #989488;
}

body.dark .insight-card--sage .insight-card__no {
    color: #6a6858;
}

body.dark .insight-card--sage::before {
    background: radial-gradient(circle, rgba(160, 160, 120, 0.2) 0%, transparent 70%);
}

body.dark .insight-card--apricot {
    background: linear-gradient(145deg, #2a2218 0%, #30261a 40%, #382c1e 100%);
    color: #e0d0b8;
}

body.dark .insight-card--apricot .insight-card__tag {
    background: rgba(220, 140, 70, 0.15);
    color: #d8a050;
}

body.dark .insight-card--apricot .insight-card__quote {
    color: #f0e0c8;
}

body.dark .insight-card--apricot .insight-card__body {
    color: #a89070;
}

body.dark .insight-card--apricot .insight-card__no {
    color: #706050;
}

body.dark .insight-card--apricot::before {
    background: radial-gradient(circle, rgba(220, 140, 70, 0.25) 0%, transparent 70%);
}

body.dark .insight-card--blush {
    background: linear-gradient(145deg, #2a1e1e 0%, #302020 40%, #352424 100%);
    color: #e0c8c8;
}

body.dark .insight-card--blush .insight-card__tag {
    background: rgba(196, 85, 58, 0.15);
    color: #d07060;
}

body.dark .insight-card--blush .insight-card__quote {
    color: #eedada;
}

body.dark .insight-card--blush .insight-card__body {
    color: #a88080;
}

body.dark .insight-card--blush .insight-card__no {
    color: #706060;
}

body.dark .insight-card--blush::before {
    background: radial-gradient(circle, rgba(196, 85, 58, 0.25) 0%, transparent 70%);
}

body.dark .insight-card--ivory {
    background: linear-gradient(145deg, #26231e 0%, #2c2820 40%, #302c24 100%);
    color: #dcd4c4;
}

body.dark .insight-card--ivory .insight-card__tag {
    background: rgba(200, 170, 120, 0.12);
    color: #c0a068;
}

body.dark .insight-card--ivory .insight-card__quote {
    color: #e8e0d0;
}

body.dark .insight-card--ivory .insight-card__body {
    color: #9a9078;
}

body.dark .insight-card--ivory .insight-card__no {
    color: #686058;
}

body.dark .insight-card--ivory::before {
    background: radial-gradient(circle, rgba(200, 170, 120, 0.2) 0%, transparent 70%);
}

body.dark .insight-card:hover {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3),
        0 8px 20px rgba(0, 0, 0, 0.2);
}


/* ════════════════════════════════════════════ */
/* RESPONSIVE                                  */
/* ════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .insights-hero {
        padding: 56px 40px 40px;
    }

    .insights-cards-section {
        padding: 48px 40px 80px;
    }

    .insights-section {
        padding: 60px 40px 80px;
    }

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

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

@media (max-width: 820px) {
    .insights-hero {
        padding: 40px 24px 32px;
    }

    .insights-cards-section {
        padding: 36px 24px calc(100px + env(safe-area-inset-bottom, 16px));
    }

    .insights-section {
        padding: 48px 24px calc(100px + env(safe-area-inset-bottom, 16px));
    }

    .insights-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .insight-card {
        min-height: auto;
    }

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

    /* On mobile, popped card is simpler */
    .insights-grid.has-active .insight-card.is-popped {
        transform: scale(1.03) translateZ(40px);
    }
}