/* =========================================================
   VIDALEN — INSIGHTS
   Editorial / Industrial Design System
========================================================= */


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

.insights-hero {
    min-height: 680px;
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(
            90deg,
            rgba(3, 31, 59, .97) 0%,
            rgba(6, 44, 82, .88) 45%,
            rgba(6, 44, 82, .48) 100%
        ),
        url("assets/hero-insights.webp")
        center / cover no-repeat;

    color: #fff;

    display: flex;
    flex-direction: column;
}


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

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

    background-size: 80px 80px;

    mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            rgba(0,0,0,.65) 55%,
            transparent 100%
        );

    opacity: .35;

    pointer-events: none;
}


.insights-hero-orbit {
    position: absolute;

    border: 1px solid rgba(80, 212, 218, .22);

    border-radius: 50%;

    pointer-events: none;
}


.orbit-a {
    width: 520px;
    height: 520px;

    right: -160px;
    top: 90px;

    transform: rotate(-20deg);
}


.orbit-b {
    width: 340px;
    height: 340px;

    right: -55px;
    top: 180px;

    border-color: rgba(255,255,255,.12);
}


.insights-hero-inner {
    width: min(
        1180px,
        calc(100% - 48px)
    );

    margin-inline: auto;

    flex: 1;

    display: grid;

    grid-template-columns:
        1fr 240px;

    align-items: center;

    gap: 60px;

    padding-top: 120px;
    padding-bottom: 80px;

    position: relative;
    z-index: 2;
}


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


.insights-kicker {
    margin: 0 0 20px;

    font:
        500 10px/1.3
        "DM Mono",
        monospace;

    letter-spacing: .12em;

    color: #d5e6ee;
}


.insights-hero h1 {
    margin: 0 0 27px;

    max-width: 780px;

    font-size:
        clamp(48px, 6vw, 68px);

    line-height: 1.02;

    letter-spacing: -.06em;

    color: #fff;
}


.insights-hero h1 em {
    color: #fce117;
}


.insights-hero-text {
    max-width: 530px;

    margin: 0;

    color: #d7e4eb;

    font-size: 16px;

    line-height: 1.7;
}


.insights-hero-index {
    align-self: center;

    display: flex;
    flex-direction: column;

    gap: 15px;

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

    font:
        10px
        "DM Mono",
        monospace;

    letter-spacing: .08em;

    border-left: 1px solid
        rgba(255,255,255,.22);

    padding-left: 25px;
}


.insights-hero-index strong {
    font:
        600 76px/1
        var(--serif);

    color: var(--cyan);

    letter-spacing: -.07em;
}


.insights-hero-index i {
    width: 55px;
    height: 1px;

    background: var(--cyan);

    display: block;
}


.insights-hero-bottom {
    position: relative;
    z-index: 3;

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

    padding: 22px 0;
}


.insights-hero-bottom .container {
    display: flex;

    align-items: center;

    justify-content: space-between;

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

    font:
        10px
        "DM Mono",
        monospace;

    letter-spacing: .04em;
}


.hero-scroll {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #fff;
}


.hero-scroll i {
    width: 30px;
    height: 1px;

    background: var(--cyan);

    display: block;
}



/* =========================================================
   SECTION HEADING
========================================================= */

.insights-section-heading {

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 70px;

    align-items: end;

    margin-bottom: 52px;
}


.insights-section-heading > p {

    max-width: 380px;

    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    color: #516474;
}


.insights-section-heading h2 {

    margin: 0;

}



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

.featured-card {

    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    min-height: 510px;

    background: #062c52;

    color: #fff;

    overflow: hidden;

    transform:
        translateY(35px);

    opacity: 0;

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


.featured-card.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


.featured-image {

    min-height: 510px;

    position: relative;

    overflow: hidden;

    background: #031f3b;
}


.featured-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

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


.featured-card:hover
.featured-image img {

    transform: scale(1.045);

}


.featured-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 40%,
            rgba(3,31,59,.35) 100%
        );
}


.featured-number {

    position: absolute;

    top: 25px;
    left: 25px;

    font:
        10px
        "DM Mono",
        monospace;

    letter-spacing: .1em;

    color: #fff;
}


.featured-content {

    padding: 48px 43px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.article-meta {

    display: flex;

    align-items: center;

    gap: 11px;

    color: var(--cyan);

    font:
        10px
        "DM Mono",
        monospace;

    letter-spacing: .09em;
}


.article-meta i {

    width: 18px;
    height: 1px;

    background: rgba(255,255,255,.3);

}


.featured-content h3 {

    font-size:
        clamp(28px, 3vw, 40px);

    line-height: 1.08;

    letter-spacing: -.05em;

    margin: 35px 0 20px;

    max-width: 430px;
}


.featured-content > p {

    color: #c7d8e3;

    font-size: 13px;

    line-height: 1.7;

    max-width: 410px;

    margin: 0;
}


.featured-footer {

    margin-top: 45px;

    padding-top: 18px;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    font:
        9px
        "DM Mono",
        monospace;

    letter-spacing: .07em;
}


.featured-footer a {

    color: var(--cyan);

    text-decoration: none;

    font:
        700 11px
        var(--font);

    letter-spacing: 0;
}


.featured-footer a i {

    font-style: normal;

    font-size: 17px;

    margin-left: 10px;
}



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

.insight-categories {

    background: var(--navy);

    color: #fff;

    padding: 90px 0 0;
}


.categories-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding-bottom: 28px;

    border-bottom:
        1px solid
        rgba(255,255,255,.18);
}


.categories-header > span {

    font:
        9px
        "DM Mono",
        monospace;

    letter-spacing: .08em;

    color: #a9c2d0;
}


.categories-list {

    display: grid;

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

    border-left:
        1px solid
        rgba(255,255,255,.16);
}


.category-item {

    min-height: 145px;

    padding: 23px;

    border-right:
        1px solid
        rgba(255,255,255,.16);

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

    color: #fff;

    text-decoration: none;

    display: flex;

    flex-direction: column;

    position: relative;

    transition:
        background .3s ease,
        color .3s ease;
}


.category-item span {

    font:
        10px
        "DM Mono",
        monospace;

    color: #8ca9ba;
}


.category-item strong {

    margin-top: auto;

    font-size: 18px;

    letter-spacing: -.035em;
}


.category-item i {

    position: absolute;

    right: 22px;
    bottom: 20px;

    font-style: normal;

    font-size: 19px;

    color: var(--cyan);

    opacity: .55;

    transition:
        transform .25s,
        opacity .25s;
}


.category-item:hover,
.category-item.active {

    background: #fce117;

    color: var(--deep);
}


.category-item:hover span,
.category-item.active span {

    color: rgba(3,31,59,.65);
}


.category-item:hover i,
.category-item.active i {

    color: var(--deep);

    opacity: 1;

    transform:
        translate(3px,-3px);
}



/* =========================================================
   ARTICLES
========================================================= */

.articles {

    background: var(--paper);
}


.articles-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 55px;
}


.articles-heading h2 {

    margin: 0;

}


.articles-counter {

    display: flex;

    align-items: center;

    gap: 14px;

    border-left:
        1px solid
        var(--line);

    padding-left: 20px;
}


.articles-counter strong {

    font:
        600 45px/1
        var(--serif);

    color: var(--blue);
}


.articles-counter span {

    font:
        9px/1.4
        "DM Mono",
        monospace;

    letter-spacing: .06em;
}


.articles-grid {

    display: grid;

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

    border-left:
        1px solid
        var(--line);

    border-top:
        1px solid
        var(--line);
}


.insight-card {

    min-height: 365px;

    padding: 25px;

    border-right:
        1px solid
        var(--line);

    border-bottom:
        1px solid
        var(--line);

    display: flex;

    flex-direction: column;

    background: transparent;

    color: var(--ink);

    transform:
        translateY(25px);

    opacity: 0;

    transition:
        opacity .6s ease,
        transform .6s ease,
        background .3s ease;
}


.insight-card.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


.insight-card:hover {

    background: #fff;
}


.insight-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.article-number {

    font:
        10px
        "DM Mono",
        monospace;

    color: var(--blue);
}


.article-category {

    font:
        9px
        "DM Mono",
        monospace;

    letter-spacing: .08em;

    color: #6a7c87;
}


.insight-card-body {

    margin-top: auto;

    margin-bottom: 30px;
}


.insight-card h3 {

    font-size: 22px;

    line-height: 1.16;

    letter-spacing: -.045em;

    margin: 0 0 15px;

    max-width: 340px;
}


.insight-card p {

    margin: 0;

    max-width: 330px;

    color: #62717c;

    font-size: 12px;

    line-height: 1.6;
}


.insight-card > a {

    color: inherit;

    text-decoration: none;

    font:
        800 11px
        var(--font);
}


.insight-card > a i {

    font-style: normal;

    margin-left: 12px;

    font-size: 17px;

    transition:
        transform .2s;
}


.insight-card:hover > a i {

    transform:
        translate(3px,-3px);
}


.insight-card-dark {

    background: var(--navy);

    color: #fff;
}


.insight-card-dark:hover {

    background: #0a416e;
}


.insight-card-dark .article-number {

    color: var(--cyan);
}


.insight-card-dark .article-category {

    color: #9bb5c4;
}


.insight-card-dark p {

    color: #b9cbd5;
}


.insight-card-cyan {

    background: var(--cyan);

    color: var(--deep);
}


.insight-card-cyan:hover {

    background: #70e0e3;
}


.insight-card-cyan .article-number {

    color: var(--deep);
}


.insight-card-cyan .article-category {

    color: rgba(3,31,59,.7);
}


.insight-card-cyan p {

    color: rgba(3,31,59,.72);
}


.insight-card-orange {

    background: var(--orange);

    color: #fff;
}


.insight-card-orange:hover {

    background: #f3a94f;
}


.insight-card-orange .article-number,
.insight-card-orange .article-category {

    color: rgba(255,255,255,.75);
}


.insight-card-orange p {

    color: rgba(255,255,255,.83);
}



/* =========================================================
   CASE STUDIES
========================================================= */

.case-studies {

    background: var(--deep);

    color: #fff;

    padding: 110px 0;
}


.case-heading {

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 70px;

    align-items: end;

    margin-bottom: 55px;
}


.case-heading h2 {

    margin: 0;
}


.case-heading > p {

    max-width: 390px;

    margin: 0;

    color: #bdcfda;

    font-size: 13px;

    line-height: 1.7;
}


.case-placeholder {

    min-height: 300px;

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

    display: grid;

    grid-template-columns:
        100px 1fr 150px;

    align-items: stretch;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,0)
        );

    transform:
        translateY(25px);

    opacity: 0;

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


.case-placeholder.is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


.case-placeholder-number {

    padding: 28px;

    border-right:
        1px solid
        rgba(255,255,255,.18);

    color: var(--cyan);

    font:
        10px
        "DM Mono",
        monospace;
}


.case-placeholder-content {

    padding: 42px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.case-placeholder-content > span {

    font:
        9px
        "DM Mono",
        monospace;

    letter-spacing: .1em;

    color: var(--cyan);
}


.case-placeholder-content h3 {

    font-size: 32px;

    line-height: 1.1;

    letter-spacing: -.045em;

    margin: 17px 0 12px;

    max-width: 500px;
}


.case-placeholder-content p {

    margin: 0;

    max-width: 530px;

    color: #b9cbd5;

    font-size: 12px;

    line-height: 1.6;
}


.case-placeholder-action {

    border-left:
        1px solid
        rgba(255,255,255,.18);

    padding: 28px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: flex-end;

    color: #9eb6c4;

    font:
        9px
        "DM Mono",
        monospace;
}


.case-placeholder-action i {

    font-style: normal;

    color: var(--cyan);

    font-size: 27px;
}



/* =========================================================
   PERSPECTIVE
========================================================= */

.perspective {

    background: #e6ecee;
}


.perspective-grid {

    display: grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap: 80px;

    align-items: center;

    transform:
        translateY(25px);

    opacity: 0;

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


.perspective-grid.is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


.perspective-mark {

    min-height: 300px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    border-right:
        1px solid
        var(--line);

    padding-right: 70px;
}


.perspective-mark span {

    font:
        10px
        "DM Mono",
        monospace;

    letter-spacing: .1em;

    color: var(--blue);

    margin-bottom: 12px;
}


.perspective-mark strong {

    font:
        600 120px/0.85
        var(--serif);

    letter-spacing: -.08em;

    color: var(--blue);
}


.perspective-mark i {

    display: block;

    width: 70px;

    height: 2px;

    background: var(--cyan);

    margin-top: 30px;
}


.perspective-copy h2 {

    margin: 0 0 25px;

    max-width: 650px;
}


.perspective-copy > p:not(.eyebrow) {

    max-width: 570px;

    color: #526572;

    font-size: 14px;

    line-height: 1.75;

    margin-bottom: 28px;
}



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

.insights-cta {

    background: var(--blue);

    color: #fff;

    padding: 100px 0;
}


.insights-cta-inner {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    align-items: end;
}


.insights-cta h2 {

    margin: 0 0 25px;
}


.insights-cta p:not(.eyebrow) {

    max-width: 430px;

    margin: 0;

    color: #d4e8f3;

    font-size: 14px;

    line-height: 1.7;
}


.cta-actions {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 25px;

    justify-self: end;
}


.cta-secondary {

    color: #fff;

    text-decoration: none;

    font:
        800 12px
        var(--font);

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

    padding-bottom: 5px;
}


.cta-secondary span {

    margin-left: 15px;

    font-size: 17px;
}



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

@media (max-width: 900px) {

    .insights-hero {

        min-height: 650px;

    }


    .insights-hero-inner {

        grid-template-columns: 1fr;

        gap: 35px;

        padding-top: 105px;

    }


    .insights-hero-index {

        display: none;

    }


    .insights-section-heading,
    .case-heading {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .featured-card {

        grid-template-columns: 1fr;

    }


    .featured-image {

        min-height: 380px;

    }


    .featured-content {

        padding: 40px 32px;

    }


    .categories-list {

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

    }


    .articles-grid {

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

    }


    .perspective-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .perspective-mark {

        min-height: auto;

        border-right: 0;

        border-bottom:
            1px solid
            var(--line);

        padding:
            0 0 35px;

    }


    .perspective-mark strong {

        font-size: 90px;

    }


    .insights-cta-inner {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .cta-actions {

        justify-self: start;

    }

}



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

@media (max-width: 600px) {

    .insights-hero {

        min-height: 650px;

        background:
            linear-gradient(
                180deg,
                rgba(3,31,59,.96) 0%,
                rgba(6,44,82,.84) 65%,
                rgba(6,44,82,.68) 100%
            ),
            url("assets/insights-hero-mobile.jpg")
            center / cover no-repeat;

    }


    .insights-hero-grid {

        background-size:
            55px 55px;

        opacity: .2;

    }


    .insights-hero-inner {

        width:
            min(
                100% - 32px,
                1180px
            );

        padding-top: 95px;

        padding-bottom: 55px;

    }


    .insights-hero h1 {

        font-size: 46px;

        letter-spacing: -.055em;

    }


    .insights-hero-text {

        font-size: 14px;

    }


    .insights-hero-bottom .container {

        justify-content: center;

    }


    .insights-hero-bottom
    .container > span:first-child,
    .insights-hero-bottom
    .container > span:last-child {

        display: none;

    }


    .insights-section-heading {

        margin-bottom: 38px;

    }


    .featured-image {

        min-height: 300px;

    }


    .featured-content {

        padding: 32px 23px;

    }


    .featured-content h3 {

        font-size: 29px;

        margin-top: 28px;

    }


    .featured-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

    }


    .insight-categories {

        padding-top: 70px;

    }


    .categories-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

    }


    .categories-list {

        grid-template-columns: 1fr;

    }


    .category-item {

        min-height: 105px;

    }


    .articles-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 25px;

    }


    .articles-counter {

        border-left: 0;

        border-top:
            1px solid
            var(--line);

        padding:
            15px 0 0;

    }


    .articles-grid {

        grid-template-columns: 1fr;

    }


    .insight-card {

        min-height: 330px;

    }


    .case-studies {

        padding: 75px 0;

    }


    .case-placeholder {

        grid-template-columns: 1fr;

    }


    .case-placeholder-number {

        border-right: 0;

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

    }


    .case-placeholder-content {

        padding: 30px 24px;

    }


    .case-placeholder-content h3 {

        font-size: 27px;

    }


    .case-placeholder-action {

        border-left: 0;

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

        min-height: 100px;

        flex-direction: row;

        align-items: center;

    }


    .perspective-mark {

        padding-bottom: 30px;

    }


    .perspective-mark strong {

        font-size: 78px;

    }


    .insights-cta {

        padding: 75px 0;

    }


    .insights-cta h2 {

        font-size: 38px;

    }


    .cta-actions {

        width: 100%;

    }


    .cta-actions .button {

        width: 100%;

    }

}



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

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

    .featured-card,
    .insight-card,
    .case-placeholder,
    .perspective-grid {

        opacity: 1;

        transform: none;

        transition: none;

    }


    .featured-image img,
    .category-item,
    .insight-card,
    .insight-card > a i {

        transition: none;

    }

}