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

.insights-section {
    background: #f3f3ef;
    color: #090909;

    padding: 125px 0 100px;

    overflow: hidden;
}

.insights-container {
    width: calc(100% - 80px);
    max-width: 1240px;

    margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.insights-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin-bottom: 60px;
}

.insights-heading {
    max-width: 650px;
}

.insights-kicker {
    display: block;
    margin-bottom: 22px;
    font-family: "DM Mono", monospace;
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--ds-text-muted);
}

.insights-heading h2 {
    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(65px, 7vw, 105px);
    line-height: .84;

    letter-spacing: -.08em;

    font-weight: 650;
        background: linear-gradient(
        45deg,
        #ff914d 0%,
        #a02d37 50%,
        #383838 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.insights-heading p {
    max-width: 380px;

    margin: 8px 0 0;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    line-height: 1.55;

    color: rgba(9,9,9,.55);
}


.insights-all {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 5px;

    color: #090909;

    text-decoration: none;

    font-family: "DM Mono", monospace;
    font-size: 9px;

    transition: color .25s ease;
}

.insights-all span {
    color: #ff914d;

    transition: transform .25s ease;
}

.insights-all:hover {
    color: #ff914d;
}

.insights-all:hover span {
    transform: translate(3px, -3px);
}


/* =========================================================
   GRID
   ========================================================= */

.insights-grid {
    display: grid;

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

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.insight-card {
    background: #ffffff;

    border: 1px solid rgba(9,9,9,.13);
    border-radius: 4px;

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.insight-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.08);
}


/* =========================================================
   IMAGE / VISUAL
   ========================================================= */

.insight-image {
    position: relative;

    display: block;

    height: 215px;

    overflow: hidden;

    text-decoration: none;
}


/* CATEGORY */

.insight-category {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 2;

    padding: 8px 9px;

    border: 1px solid rgba(255,255,255,.45);

    color: #ffffff;

    font-family: "DM Mono", monospace;
    font-size: 8px;

    letter-spacing: .03em;
}


/* =========================================================
   DESIGN VISUAL
   ========================================================= */

.insight-image-design {
    background: #aaa39d;
}

.insight-visual-text {
    position: absolute;

    right: 45px;
    bottom: -5px;

    font-family: "Manrope", sans-serif;

    font-size: 145px;
    line-height: .75;

    letter-spacing: -.12em;

    font-weight: 600;

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

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1);
}

.insight-card:hover .insight-visual-text {
    transform: scale(1.06) translateX(-8px);
}


/* =========================================================
   GROWTH VISUAL
   ========================================================= */

.insight-image-growth {
    background:
        linear-gradient(
            135deg,
            #32211e,
            #77321f
        );
}

.insight-visual-arrow {
    position: absolute;

    right: 42px;
    top: 50%;

    transform: translateY(-40%);

    font-family: "Manrope", sans-serif;

    font-size: 90px;
    line-height: 1;

    color: #ff914d;

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1);
}

.insight-card:hover .insight-visual-arrow {
    transform:
        translate(10px, -50%);
}


/* =========================================================
   TECH VISUAL
   ========================================================= */

.insight-image-tech {
    background: #111616;
}

.insight-visual-code {
    position: absolute;

    right: 38px;
    bottom: 10px;

    font-family: "DM Mono", monospace;

    font-size: 90px;
    line-height: 1;

    letter-spacing: -.12em;

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

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1);
}

.insight-card:hover .insight-visual-code {
    transform: scale(1.08);
}


/* =========================================================
   CONTENT
   ========================================================= */

.insight-content {
    min-height: 160px;

    padding: 27px 19px 20px;

    display: flex;
    flex-direction: column;
}


/* META */

.insight-meta {
    display: flex;
    gap: 5px;

    margin-bottom: 15px;

    font-family: "DM Mono", monospace;
    font-size: 8px;

    color: #777;
}

.insight-meta span:first-child {
    color: #555;
}


/* TITLE */

.insight-content h3 {
    margin: 0;

    max-width: 360px;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: -.025em;

    font-weight: 650;
}

.insight-content h3 a {
    color: #090909;
    text-decoration: none;
}


/* READ */

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

    margin-top: auto;

    color: #090909;

    text-decoration: none;

    font-family: "DM Mono", monospace;
    font-size: 8px;

    transition: color .25s ease;
}

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

.insight-read:hover {
    color: #ff914d;
}

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


/* =========================================================
   FOOTER
   ========================================================= */

.insights-footer {
    display: flex;
    justify-content: space-between;

    margin-top: 55px;
    padding-top: 20px;

    border-top: 1px solid rgba(9,9,9,.15);

    font-family: "DM Mono", monospace;
    font-size: 8px;

    letter-spacing: .06em;

    color: rgba(9,9,9,.35);
}


/* =========================================================
   REVEAL
   ========================================================= */

.insights-heading,
.insights-all,
.insight-card,
.insights-footer {
    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.insights-section.is-visible .insights-heading,
.insights-section.is-visible .insights-all,
.insights-section.is-visible .insight-card,
.insights-section.is-visible .insights-footer {
    opacity: 1;
    transform: translateY(0);
}

.insights-section.is-visible .insights-all {
    transition-delay: .08s;
}

.insights-section.is-visible .insight-card:nth-child(1) {
    transition-delay: .1s;
}

.insights-section.is-visible .insight-card:nth-child(2) {
    transition-delay: .18s;
}

.insights-section.is-visible .insight-card:nth-child(3) {
    transition-delay: .26s;
}

.insights-section.is-visible .insights-footer {
    transition-delay: .34s;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .insights-section {
        padding: 90px 0 75px;
    }

    .insights-container {
        width: calc(100% - 30px);
    }

    .insights-header {
        display: block;

        margin-bottom: 45px;
    }

    .insights-heading h2 {
        font-size: clamp(57px, 15vw, 82px);
    }

    .insights-heading p {
        margin-top: 18px;
    }

    .insights-all {
        margin-top: 25px;
    }


    /* Horizontal editorial cards */

    .insights-grid {
        display: flex;

        gap: 15px;

        width: calc(100vw - 15px);

        overflow-x: auto;

        padding-right: 15px;
        padding-bottom: 15px;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }

    .insights-grid::-webkit-scrollbar {
        display: none;
    }

    .insight-card {
        flex: 0 0 82vw;

        scroll-snap-align: start;
    }

    .insight-image {
        height: 210px;
    }

    .insight-content {
        min-height: 165px;
    }

    .insights-footer {
        margin-top: 35px;
    }

}