/* =========================================================
   ROOT — Cornell DNA Palette
   ========================================================= */

:root {
    /* AI Enablement — Cornell Green */
    --cornell-dna-green:        #388b19;
    --cornell-dna-green-light:  #DBF1D3;

    /* AI Literacy — Cornell Yellow */
    --cornell-dna-yellow:       #977d05;
    --cornell-dna-yellow-light: #FFF7CF;

    /* AI Innovation Lab — Cornell Orange */
    --cornell-dna-orange:       #a96109;
    --cornell-dna-orange-light: #FCE8CC;

    /* AI Governance — Cornell Red */
    --cornell-dna-red:          #B31B1B;
    --cornell-dna-red-light:    #F4D6D6;
}

/* =========================================================
   LAB MODEL — INTRO TYPOGRAPHY
   ========================================================= */

body.the-lab-model .lab-model-intro-wrapper .lab-model-intro h2.wp-block-heading {
    font-size: 5em;
}

body.the-lab-model .lab-model-intro-wrapper .lab-model-intro h2 em {
    font-style: normal;
}

body.the-lab-model .lab-model-intro-wrapper .lab-model-intro h2.scroll-reveal--1,
body.the-lab-model .lab-model-intro-wrapper .lab-model-intro h2.scroll-reveal--2,
body.the-lab-model .lab-model-intro-wrapper .lab-model-intro h2.scroll-reveal--4{
    font-size: 1.3em;
    text-wrap: balance;
    color: var(--wp--preset--color--dark-gray)!important;
}

body.the-lab-model .lab-model-intro-wrapper .lab-model-intro h2.scroll-reveal--1,
body.the-lab-model .lab-model-intro-wrapper .lab-model-intro h2.scroll-reveal--2 {
    max-width: 500px;
}

body.the-lab-model .lab-model-intro-wrapper .lab-model-intro h2.scroll-reveal--4 {
    max-width: 600px;
    margin-top: -1.5em;
}


/* =========================================================
   RESPONSIVE — MOBILE ( ≤768px )
   ========================================================= */

@media (max-width: 768px) {

    .lab-model-intro > * {
        max-width: 100%;
    }

    .lab-model-intro h2.wp-block-heading {
        margin: 0.4em auto !important;
        font-size: 3em;
    }

    body.the-lab-model .lab-model-intro-wrapper .lab-model-intro h2.scroll-reveal--1,
    body.the-lab-model .lab-model-intro-wrapper .lab-model-intro h2.scroll-reveal--2 {
        font-size: 1em;
    }

    body.the-lab-model .lab-model-intro-wrapper .lab-model-intro h2.scroll-reveal--4 {
        margin-top: initial;
        margin-bottom: 1em;
        font-size: 0.7em;
        text-wrap: balance;
    }

    .lab-model-column-wrapper {
        margin-top: 4em;
    }

    .the-lab-model-dna-wrapper .cornell-dna-tooltip {
        display: flex;
        gap: 1em;
        z-index: 2;
    }

    .the-lab-model-dna-wrapper .dna-explainer-wrapper {
        gap: 1.5em;
    }

    .the-lab-model-dna-wrapper figure {
        min-width: 40px;
    }

    body.the-lab-model .the-lab-model-dna-wrapper .dna-wrapper {
        max-height: 200px;
        padding-top: 80px;
    }

    body.the-lab-model .the-lab-model-dna-wrapper .dna-wrapper svg {
        max-height: 320px;
        margin-top: -150px;
        transform: rotate(65deg);
    }
}


/* =========================================================
   RESPONSIVE — DESKTOP ( ≥768px )
   ========================================================= */

@media (min-width: 768px) {
    body.the-lab-model .wp-block-group:not(.lab-model-intro) h2 {
        margin-bottom: 0.3em;
        font-size: 2.5em;
    }

    .lab-model-column-wrapper {
        margin-top: 10em;
    }

    section .lab-model-column-wrapper:last-of-type {
        margin-bottom: 10em !important;
    }
}


/* =========================================================
   REDUCED MOTION — DESKTOP ANIMATIONS
   ========================================================= */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (min-width: 1200px) {
    body.the-lab-model .band {
        overflow: visible !important;
    }

    /* Also check parent section */
    section.type-page:has(.lab-model-intro-wrapper) {
        overflow: visible !important;
    }

    .lab-model-intro-wrapper {
        min-height: 140vh;
        position: relative;
    }

    .lab-model-intro {
        position: sticky;
        top: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2.4em;
    }
}


/* =========================================================
   DNA TOOLTIP COLORS
   ========================================================= */

body #main .cornell-dna-tooltip-1 h3 { color: var(--cornell-dna-green); }
body #main .cornell-dna-tooltip-2 h3 { color: var(--cornell-dna-yellow); }
body #main .cornell-dna-tooltip-3 h3 { color: var(--cornell-dna-orange); }
body #main .cornell-dna-tooltip-4 h3 { color: var(--cornell-dna-red); }

.cornell-dna-tooltip h3 {
    margin-bottom: 0.2em;
}

/* =========================================================
   TWO-PLUS-ONE GRID LAYOUT
   ========================================================= */

.lab-model-column-wrapper .two-plus-one {
    --grid-gap: 3em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
}

.lab-model-column-wrapper .two-plus-one > div:nth-child(3) {
    grid-column: 1 / 3;
    max-width: calc(50% - var(--grid-gap) / 2);
    margin: 0 auto;
}

@media (max-width: 1023px) {

    .lab-model-column-wrapper .two-plus-one {
        grid-template-columns: 1fr;
    }

    .lab-model-column-wrapper .two-plus-one > div:nth-child(3) {
        grid-column: auto;
        max-width: none;
        margin: 0;
    }
}


/* =========================================================
   DNA VISUALS
   ========================================================= */

.the-lab-model-dna-wrapper figure {
    width: 80px;
    background: transparent;
}

.the-lab-model-dna-wrapper .dna-wrapper svg {
    max-width: 100%;
    max-height: 600px;
    height: auto;
}

.dna-explainer-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3em;
}

.dna-explainer-wrapper > div {
    gap: 0.2em;
}


/* =========================================================
   DNA INTERACTION — HOVER + ANIMATED STATES
   ========================================================= */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

    .cornell-dna-tooltip {
        transition: all 0.3s ease-in;
    }

    .cornell-dna-marker {
        transition: fill 0.3s ease-in;
    }

    .cornell-dna-tooltip:hover {
        scale: 1.05;
    }

    .cornell-dna-tooltip-1:hover,
    .cornell-dna-tooltip-3:hover{
        cursor: e-resize;
    }

    .cornell-dna-tooltip-2:hover,
    .cornell-dna-tooltip-4:hover{
        cursor: w-resize;
    }

    body:has(.cornell-dna-tooltip-1:hover) svg .cornell-dna-marker-1 {
        stroke: var(--cornell-dna-green);  
        fill: var(--cornell-dna-green);
    }

    body:has(.cornell-dna-tooltip-2:hover) svg .cornell-dna-marker-2 {
        stroke: var(--cornell-dna-yellow);  
        fill: var(--cornell-dna-yellow);
    }

    body:has(.cornell-dna-tooltip-3:hover) svg .cornell-dna-marker-3 {
        stroke: var(--cornell-dna-orange);  
        fill: var(--cornell-dna-orange);
    }

    body:has(.cornell-dna-tooltip-4:hover) svg .cornell-dna-marker-4 {
        stroke: var(--cornell-dna-red);  
        fill: var(--cornell-dna-red);
    }
}