/* ============================================================
   CULTURA VISION
   PREMIUM RESEARCH SECTION
   ------------------------------------------------------------
   Layout:
   Research heading
          ↓
   ┌────────────────────┬────────────────────┐
   │ Research Ecosystem  │ 01 Research Topic │
   │                     │ 02 Research Topic │
   │       CV / AI       │ 03 Research Topic │
   │                     │ 04 Research Topic │
   │                     │ 05 Research Topic │
   │                     │ 06 Research Topic │
   └────────────────────┴────────────────────┘

   Desktop: 50 / 50 balanced composition
============================================================ */


/* ============================================================
   01. DESIGN TOKENS
============================================================ */

.research-premium {

    --research-navy: #06182c;
    --research-navy-light: #0c2d49;

    --research-orange: #ef5b22;
    --research-gold: #d9b45a;

    --research-paper: #fffdf8;
    --research-paper-dark: #f7f2e8;

    --research-text: #657386;
    --research-border: rgba(7, 26, 48, 0.14);

    --research-gold-soft: rgba(217, 180, 90, 0.20);

    position: relative;

    width: 100%;

    padding:
        120px
        34px
        90px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 55%,
            rgba(217, 180, 90, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 30%,
            rgba(24, 87, 128, 0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #f8f4eb 100%
        );
}


/* ============================================================
   02. BACKGROUND ORBS
============================================================ */

.research-orb-bg {

    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    border:
        1px solid
        rgba(217, 180, 90, 0.12);

    pointer-events: none;
}

.research-orb-left {

    left: -285px;
    top: 28%;
}

.research-orb-right {

    right: -300px;
    bottom: -180px;
}


/* ============================================================
   03. SECTION HEADING
============================================================ */

.research-premium-head {

    position: relative;

    z-index: 2;

    width:
        min(850px, 100%);

    margin:
        0 auto
        64px;

    text-align: center;
}

.research-premium-head .section-tag {

    margin-bottom: 15px;
}

.research-premium-head h2 {

    margin: 0 0 20px;

    color:
        var(--research-navy);

    font:
        600 clamp(56px, 6vw, 82px)
        / 0.88
        "Cormorant Garamond",
        Georgia,
        serif;

    letter-spacing: -2px;
}

.research-premium-head h2 em {

    color:
        var(--research-orange);

    font-style: italic;
}

.research-premium-head p {

    width:
        min(700px, 100%);

    margin:
        0 auto;

    color:
        var(--research-text);

    font-size: 12px;

    line-height: 1.75;
}


/* ============================================================
   04. MAIN RESEARCH LAYOUT
============================================================ */

.research-command {

    position: relative;

    z-index: 2;

    width:
        min(1280px, 100%);

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 58px;

    align-items: stretch;
}


/* ============================================================
   05. LEFT RESEARCH ECOSYSTEM
============================================================ */

.research-visual-premium {

    position: relative;

    width: 100%;

    height: 650px;

    box-sizing: border-box;

    overflow: hidden;

    border:
        1px solid
        rgba(7, 26, 48, 0.12);

    background:

        /* Fine horizontal grid */
        linear-gradient(
            rgba(7, 26, 48, 0.025) 1px,
            transparent 1px
        ),

        /* Fine vertical grid */
        linear-gradient(
            90deg,
            rgba(7, 26, 48, 0.025) 1px,
            transparent 1px
        ),

        /* Centre glow */
        radial-gradient(
            circle at 50% 45%,
            rgba(217, 180, 90, 0.12),
            transparent 48%
        ),

        #fffefa;

    background-size:
        34px 34px,
        34px 34px,
        100% 100%,
        100% 100%;

    box-shadow:
        0 25px 70px
        rgba(7, 26, 48, 0.08);
}


/* Inner frame */

.research-visual-premium::before {

    content: "";

    position: absolute;

    inset: 15px;

    border:
        1px solid
        rgba(217, 180, 90, 0.18);

    pointer-events: none;
}


/* ============================================================
   06. ECOSYSTEM GRID
============================================================ */

.research-grid-lines {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            transparent 49.8%,
            rgba(217, 180, 90, 0.16) 50%,
            transparent 50.2%
        ),

        linear-gradient(
            0deg,
            transparent 49.8%,
            rgba(217, 180, 90, 0.16) 50%,
            transparent 50.2%
        );

    opacity: 0.55;
}


/* ============================================================
   07. RESEARCH ORBITS
============================================================ */

.research-orbit {

    position: absolute;

    left: 50%;
    top: 45%;

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        rgba(217, 180, 90, 0.30);

    border-radius: 50%;

    pointer-events: none;
}

.orbit-one {

    width: 145px;
    height: 145px;
}

.orbit-two {

    width: 285px;
    height: 285px;
}

.orbit-three {

    width: 465px;
    height: 465px;
}


/* ============================================================
   08. CENTRAL CV AI CORE
============================================================ */

.research-core {

    position: absolute;

    left: 50%;
    top: 45%;

    transform:
        translate(-50%, -50%);

    width: 125px;
    height: 125px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        var(--research-navy);

    color: #ffffff;

    box-shadow:
        0 18px 45px
        rgba(6, 24, 44, 0.24),

        0 0 0 10px
        rgba(217, 180, 90, 0.10);

    z-index: 5;
}


/* Gold outer ring */

.research-core::after {

    content: "";

    position: absolute;

    inset: -7px;

    border:
        1px solid
        var(--research-gold);

    border-radius: 50%;

    opacity: 0.75;
}

.research-core strong {

    font:
        700 30px / 1
        "Cormorant Garamond",
        Georgia,
        serif;
}

.research-core small {

    margin-top: 5px;

    color:
        #e1c66f;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* ============================================================
   09. ECOSYSTEM CONNECTIONS
============================================================ */

.research-connection {

    position: absolute;

    left: 50%;
    top: 45%;

    width: 215px;
    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(217, 180, 90, 0.65),
            rgba(217, 180, 90, 0.05)
        );

    z-index: 1;

    pointer-events: none;
}

.c1 {
    transform: rotate(-145deg);
}

.c2 {
    transform: rotate(-90deg);
}

.c3 {
    transform: rotate(-35deg);
}

.c4 {
    transform: rotate(35deg);
}

.c5 {
    transform: rotate(90deg);
}

.c6 {
    transform: rotate(145deg);
}


/* ============================================================
   10. ECOSYSTEM NODES
============================================================ */

.research-node-premium {

    position: absolute;

    z-index: 6;

    width: 98px;
    height: 66px;

    padding:
        9px 12px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    border:
        1px solid
        rgba(217, 180, 90, 0.75);

    background:
        rgba(255, 253, 248, 0.96);

    color:
        var(--research-navy);

    box-shadow:
        0 9px 25px
        rgba(7, 26, 48, 0.07);

    cursor: pointer;

    text-align: left;

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


/* Node number */

.research-node-premium span {

    color:
        var(--research-orange);

    font-size: 6px;

    font-weight: 900;

    letter-spacing: 1px;
}


/* Node title */

.research-node-premium b {

    margin-top: 3px;

    font-size: 10px;

    letter-spacing: 0.7px;
}


/* Node subtitle */

.research-node-premium small {

    margin-top: 3px;

    color: #75808d;

    font-size: 5.5px;

    letter-spacing: 0.7px;
}


/* Node hover */

.research-node-premium:hover,
.research-node-premium.active {

    transform:
        translateY(-5px);

    background:
        var(--research-navy);

    color: #ffffff;

    border-color:
        var(--research-gold);

    box-shadow:
        0 14px 32px
        rgba(7, 26, 48, 0.16);
}

.research-node-premium:hover small,
.research-node-premium.active small {

    color:
        #c4d0da;
}


/* ============================================================
   11. NODE POSITIONS
============================================================ */

.rn-ai {

    left: 28px;
    top: 62px;
}

.rn-data {

    left: 50%;
    top: 25px;

    transform:
        translateX(-50%);
}

.rn-art {

    right: 25px;
    top: 93px;
}

.rn-history {

    right: 25px;
    bottom: 108px;
}

.rn-education {

    left: 50%;
    bottom: 30px;

    transform:
        translateX(-50%);
}

.rn-digital {

    left: 27px;
    bottom: 94px;
}


/* Keep centred nodes centred during hover */

.rn-data:hover,
.rn-data.active {

    transform:
        translateX(-50%)
        translateY(-5px);
}

.rn-education:hover,
.rn-education.active {

    transform:
        translateX(-50%)
        translateY(-5px);
}


/* ============================================================
   12. ECOSYSTEM CAPTION
============================================================ */

.research-visual-caption {

    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-top: 12px;

    border-top:
        1px solid
        rgba(7, 26, 48, 0.12);
}

.research-visual-caption span {

    color:
        var(--research-orange);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;
}

.research-visual-caption b {

    color:
        var(--research-text);

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.4px;
}


/* ============================================================
   13. RIGHT RESEARCH TOPICS
============================================================ */

.research-topics {

    width: 100%;

    height: 650px;

    display: flex;

    flex-direction: column;

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

    overflow: hidden;
}


/* ============================================================
   14. INDIVIDUAL RESEARCH TOPIC
============================================================ */

.research-topic {

    position: relative;

    flex: 1 1 0;

    min-height: 0;

    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        30px;

    gap: 14px;

    align-items: flex-start;

    padding:
        18px 0;

    box-sizing: border-box;

    border-bottom:
        1px solid
        rgba(7, 26, 48, 0.12);

    cursor: pointer;

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


/* Active vertical marker */

.research-topic::before {

    content: "";

    position: absolute;

    left: -18px;
    top: 0;

    width: 3px;
    height: 0;

    background:
        linear-gradient(
            var(--research-orange),
            var(--research-gold)
        );

    transition:
        height 0.35s ease;
}

.research-topic.active::before {

    height: 100%;
}


/* Active background */

.research-topic.active {

    padding-left: 10px;

    background:
        linear-gradient(
            90deg,
            rgba(239, 91, 34, 0.025),
            transparent
        );
}


/* ============================================================
   15. TOPIC NUMBER
============================================================ */

.topic-number {

    padding-top: 4px;

    color:
        var(--research-orange);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


/* ============================================================
   16. TOPIC CONTENT
============================================================ */

.topic-main {

    min-width: 0;
}

.topic-label {

    margin-bottom: 5px;

    color:
        #a57d28;

    font-size: 6.5px;

    font-weight: 900;

    letter-spacing: 1.7px;
}

.research-topic h3 {

    margin: 0;

    color:
        var(--research-navy);

    font:
        600 clamp(23px, 2vw, 29px)
        / 1.08
        "Cormorant Garamond",
        Georgia,
        serif;
}

.research-topic p {

    max-width: 560px;

    margin:
        7px 0 0;

    color:
        var(--research-text);

    font-size: 9px;

    line-height: 1.55;
}


/* ============================================================
   17. TOPIC TAGS
============================================================ */

.topic-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 9px;

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height 0.35s ease,
        opacity 0.35s ease;
}

.research-topic.active .topic-tags {

    max-height: 30px;

    opacity: 1;
}

.topic-tags span {

    padding:
        4px 6px;

    border:
        1px solid
        rgba(7, 26, 48, 0.14);

    color:
        #697687;

    font-size: 5.5px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* ============================================================
   18. TOPIC ARROW
============================================================ */

.topic-arrow {

    padding-top: 4px;

    color:
        var(--research-orange);

    font-size: 14px;

    transition:
        transform 0.3s ease;
}

.research-topic:hover .topic-arrow,
.research-topic.active .topic-arrow {

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


/* ============================================================
   19. RESEARCH FOOTER
============================================================ */

.research-footer-line {

    width:
        min(1280px, 100%);

    margin:
        38px auto 0;

    display: flex;

    align-items: center;

    gap: 15px;

    color:
        #9a6f24;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.6px;
}

.research-footer-line i {

    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            rgba(217, 180, 90, 0.7),
            transparent
        );
}

.research-footer-line b {

    color:
        #59697a;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.8px;
}


/* ============================================================
   20. LARGE DESKTOP
============================================================ */

@media (min-width: 1450px) {

    .research-command {

        width:
            min(1360px, 100%);

        gap: 70px;
    }

    .research-visual-premium,
    .research-topics {

        height: 680px;
    }

    .research-topic h3 {

        font-size: 30px;
    }

    .research-topic p {

        font-size: 9.5px;
    }
}


/* ============================================================
   21. TABLET
============================================================ */

@media (max-width: 1050px) {

    .research-premium {

        padding:
            100px 24px 75px;
    }

    .research-command {

        grid-template-columns: 1fr;

        width:
            min(760px, 100%);

        gap: 40px;
    }

    .research-visual-premium {

        height: 520px;
    }

    .research-topics {

        height: auto;

        overflow: visible;
    }

    .research-topic {

        flex: none;

        min-height: 145px;
    }
}


/* ============================================================
   22. MOBILE
============================================================ */

@media (max-width: 700px) {

    .research-premium {

        padding:
            80px 18px 60px;
    }

    .research-premium-head {

        margin-bottom: 40px;
    }

    .research-premium-head h2 {

        font-size: 54px;

        letter-spacing: -1.5px;
    }

    .research-premium-head p {

        font-size: 11px;
    }


    /* Ecosystem */

    .research-visual-premium {

        height: 430px;
    }

    .orbit-one {

        width: 125px;
        height: 125px;
    }

    .orbit-two {

        width: 225px;
        height: 225px;
    }

    .orbit-three {

        width: 350px;
        height: 350px;
    }

    .research-core {

        width: 150px;
        height: 150px;
    }

    .research-core strong {

        font-size: 25px;
    }

    .research-connection {

        width: 155px;
    }


    /* Nodes */

    .research-node-premium {

        width: 72px;
        height: 53px;

        padding:
            6px 8px;
    }

    .research-node-premium b {

        font-size: 8px;
    }

    .research-node-premium small {

        font-size: 5px;
    }

    .rn-ai {

        left: 12px;
        top: 50px;
    }

    .rn-data {

        top: 14px;
    }

    .rn-art {

        right: 12px;
        top: 68px;
    }

    .rn-history {

        right: 12px;
        bottom: 82px;
    }

    .rn-education {

        bottom: 20px;
    }

    .rn-digital {

        left: 12px;
        bottom: 68px;
    }


    /* Caption */

    .research-visual-caption {

        left: 18px;
        right: 18px;
        bottom: 14px;
    }

    .research-visual-caption b {

        display: none;
    }


    /* Topics */

    .research-topic {

        min-height: 145px;

        grid-template-columns:
            28px
            minmax(0, 1fr)
            20px;

        gap: 8px;

        padding:
            18px 0;
    }

    .research-topic h3 {

        font-size: 22px;
    }

    .research-topic p {

        font-size: 8.5px;
    }


    /* Footer */

    .research-footer-line {

        display: none;
    }
}


/* ============================================================
   23. SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .research-premium {

        padding:
            70px 14px 50px;
    }

    .research-premium-head h2 {

        font-size: 46px;
    }

    .research-visual-premium {

        height: 390px;
    }

    .orbit-three {

        width: 315px;
        height: 315px;
    }

    .research-topic {

        min-height: 155px;
    }

    .research-topic h3 {

        font-size: 20px;
    }
}


/* ============================================================
   24. ACCESSIBILITY
============================================================ */

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

    .research-node-premium,
    .research-topic,
    .topic-arrow,
    .topic-tags {

        transition: none;
    }
}