/* ============================================================
   ADVOPTIX 2027
   SCIENTIFIC SESSIONS PAGE
   LIGHT PREMIUM THEME
============================================================ */


/* ============================================================
   ROOT VARIABLES
============================================================ */

.ax-sessions {

    --session-navy: #111b52;
    --session-navy-dark: #0b1544;

    --session-blue: #293bb8;
    --session-blue-dark: #202d9b;

    --session-purple: #4730c5;
    --session-purple-dark: #3524a8;
    --session-purple-soft: #7569df;

    --session-gold: #dfad3e;
    --session-gold-light: #edca78;

    --session-white: #ffffff;
    --session-paper: #fbfcff;
    --session-soft: #f5f7fd;

    --session-text: #142052;
    --session-text-soft: #61709d;
    --session-muted: #8791af;

    --session-border: #e2e6f2;
    --session-border-soft: #edf0f8;

}


/* ============================================================
   RESET
============================================================ */

.ax-sessions,
.ax-sessions *,
.ax-sessions *::before,
.ax-sessions *::after {

    box-sizing: border-box;

}


/* ============================================================
   MAIN SECTION
============================================================ */

.ax-sessions {

    position: relative;

    width: 100%;

    min-height: 100vh;

    padding:
        95px 0
        100px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 5% 18%,
            rgba(71, 48, 197, .075),
            transparent 25%
        ),

        radial-gradient(
            circle at 95% 78%,
            rgba(41, 59, 184, .055),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfcff 45%,
            #f5f7fd 100%
        );

    color:
        var(--session-text);

}


/* ============================================================
   VERY SUBTLE TOP COLOR WASH
============================================================ */

.ax-sessions::before {

    content: "";

    position: absolute;

    width: 720px;

    height: 720px;

    left: -500px;

    top: -390px;

    border-radius: 50%;

    border:
        1px solid
        rgba(71, 48, 197, .09);

    box-shadow:

        0 0 0 22px
        rgba(71, 48, 197, .025),

        0 0 0 52px
        rgba(71, 48, 197, .018),

        0 0 0 90px
        rgba(223, 173, 62, .014);

    pointer-events: none;

    z-index: 0;

}


/* ============================================================
   RIGHT DECORATIVE CURVES
============================================================ */

.ax-sessions::after {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    right: -430px;

    bottom: -410px;

    border-radius: 50%;

    border:
        1px solid
        rgba(71, 48, 197, .10);

    box-shadow:

        0 0 0 24px
        rgba(71, 48, 197, .025),

        0 0 0 55px
        rgba(71, 48, 197, .020),

        0 0 0 90px
        rgba(223, 173, 62, .018);

    pointer-events: none;

    z-index: 0;

}


/* ============================================================
   TECHNICAL DOT PATTERN
============================================================ */

.ax-sessions-grid {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 0;

    pointer-events: none;

    opacity: .55;

    background-image:

        radial-gradient(
            rgba(17, 27, 82, .12) 1px,
            transparent 1px
        );

    background-size:
        18px 18px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.65) 18%,
            rgba(0,0,0,.25) 50%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.65) 18%,
            rgba(0,0,0,.25) 50%,
            transparent 100%
        );

}


/* ============================================================
   GLOW — LEFT
============================================================ */

.ax-sessions-glow-left {

    position: absolute;

    width: 420px;

    height: 420px;

    left: -290px;

    top: 250px;

    z-index: 0;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(71, 48, 197, .09) 0%,
            rgba(71, 48, 197, .035) 38%,
            transparent 72%
        );

    pointer-events: none;

}


/* ============================================================
   GLOW — RIGHT
============================================================ */

.ax-sessions-glow-right {

    position: absolute;

    width: 480px;

    height: 480px;

    right: -300px;

    bottom: 120px;

    z-index: 0;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(223, 173, 62, .055) 0%,
            rgba(71, 48, 197, .025) 38%,
            transparent 72%
        );

    pointer-events: none;

}


/* ============================================================
   MAIN CONTAINER
============================================================ */

.ax-sessions-container {

    position: relative;

    z-index: 5;

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

    margin:
        0 auto;

}


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

.ax-sessions-heading {

    position: relative;

    text-align:
        center;

    margin:
        0 auto
        52px;

}


/* ============================================================
   SMALL LABEL
============================================================ */

.ax-sessions-kicker {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-bottom:
        14px;

    color:
        var(--session-purple);

    font-family:
        "Space Mono",
        "Courier New",
        monospace;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .28em;

    text-transform:
        uppercase;

}


/* ============================================================
   KICKER LINES
============================================================ */

.ax-sessions-kicker::before,
.ax-sessions-kicker::after {

    content: "";

    width:
        25px;

    height:
        1px;

    background:
        var(--session-gold);

}


/* ============================================================
   MAIN TITLE
============================================================ */

.ax-sessions-heading h1 {

    margin:
        0;

    color:
        var(--session-navy);

    font-family:
        "Cormorant Garamond",
        "Cormorant",
        Georgia,
        serif;

    font-size:
        clamp(
            48px,
            5vw,
            70px
        );

    font-weight:
        500;

    line-height:
        .95;

    letter-spacing:
        -.025em;

}


/* ============================================================
   TITLE UNDERLINE
============================================================ */

.ax-sessions-heading-line {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        20px 0 18px;

}


.ax-sessions-heading-line::before {

    content: "";

    width:
        42px;

    height:
        1px;

    margin-right:
        8px;

    background:
        var(--session-gold);

}


.ax-sessions-heading-line span {

    display:
        block;

    width:
        58px;

    height:
        3px;

    border-radius:
        10px;

    background:

        linear-gradient(
            90deg,
            var(--session-purple),
            var(--session-gold)
        );

}


.ax-sessions-heading-line::after {

    content: "";

    width:
        42px;

    height:
        1px;

    margin-left:
        8px;

    background:
        var(--session-gold);

}


/* ============================================================
   DESCRIPTION
============================================================ */

.ax-sessions-heading p {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        var(--session-text-soft);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.75;

}


/* ============================================================
   SESSION LIST
============================================================ */

.ax-sessions-list {

    width:
        min(
            100%,
            900px
        );

    margin:
        0 auto;

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

}


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

.ax-session-card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    width:
        100%;

    min-height:
        62px;

    padding:
        0 20px;

    overflow:
        hidden;

    border:
        1px solid
        var(--session-border);

    border-radius:
        8px;

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

    box-shadow:
        0 10px 28px
        rgba(
            25,
            38,
            95,
            .055
        );

    color:
        var(--session-text);

    text-decoration:
        none;

    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}


/* ============================================================
   LEFT PURPLE ACCENT
============================================================ */

.ax-session-card::before {

    content: "";

    position:
        absolute;

    left: 0;

    top: 0;

    width:
        3px;

    height:
        100%;

    background:

        linear-gradient(
            180deg,
            var(--session-purple),
            var(--session-gold)
        );

    opacity:
        .35;

    transition:
        opacity .3s ease;

}


/* ============================================================
   HOVER SHINE
============================================================ */

.ax-session-card::after {

    content: "";

    position:
        absolute;

    left:
        -120%;

    top: 0;

    width:
        70%;

    height:
        100%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(71,48,197,.035),
            transparent
        );

    transform:
        skewX(-18deg);

    transition:
        left .65s ease;

}


.ax-session-card:hover::after {

    left:
        140%;

}


.ax-session-card:hover {

    transform:
        translateX(6px);

    border-color:
        rgba(
            71,
            48,
            197,
            .30
        );

    background:
        #ffffff;

    box-shadow:
        0 16px 38px
        rgba(
            71,
            48,
            197,
            .105
        );

}


.ax-session-card:hover::before {

    opacity:
        1;

}


/* ============================================================
   NUMBER
============================================================ */

.ax-session-number {

    position:
        relative;

    z-index:
        2;

    flex:
        0 0 48px;

    color:
        var(--session-gold);

    font-family:
        "Space Mono",
        "Courier New",
        monospace;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .08em;

}


/* ============================================================
   TITLE
============================================================ */

.ax-session-title {

    position:
        relative;

    z-index:
        2;

    flex:
        1;

    padding:
        17px 15px;

    color:
        var(--session-navy);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.45;

    text-align:
        left;

    transition:
        color .25s ease;

}


.ax-session-card:hover
.ax-session-title {

    color:
        var(--session-purple);

}


/* ============================================================
   ARROW
============================================================ */

.ax-session-arrow {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    border:
        1px solid
        var(--session-border);

    border-radius:
        50%;

    color:
        var(--session-purple);

    background:
        var(--session-paper);

    font-size:
        10px;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease;

}


.ax-session-card:hover
.ax-session-arrow {

    transform:
        translateX(4px);

    background:
        var(--session-purple);

    border-color:
        var(--session-purple);

    color:
        #ffffff;

}


/* ============================================================
   BOTTOM INFORMATION
============================================================ */

.ax-sessions-footer {

    display:
        flex;

    align-items:
        center;

    width:
        min(
            900px,
            100%
        );

    margin:
        38px auto 0;

    gap:
        18px;

}


.ax-sessions-footer span {

    flex:
        1;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(
                71,
                48,
                197,
                .18
            )
        );

}


.ax-sessions-footer span:last-child {

    background:

        linear-gradient(
            90deg,
            rgba(
                223,
                173,
                62,
                .18
            ),
            transparent
        );

}


.ax-sessions-footer p {

    margin:
        0;

    color:
        var(--session-muted);

    font-family:
        "Space Mono",
        "Courier New",
        monospace;

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        .16em;

    text-align:
        center;

    white-space:
        nowrap;

}


/* ============================================================
   SMALL DECORATIVE GOLD DOTS
============================================================ */

.ax-sessions-container::before {

    content: "";

    position:
        absolute;

    width:
        6px;

    height:
        6px;

    left:
        -28px;

    top:
        190px;

    border-radius:
        50%;

    background:
        var(--session-gold);

    box-shadow:
        0 0 0 5px
        rgba(
            223,
            173,
            62,
            .10
        );

}


/* ============================================================
   SECOND DECORATIVE DOT
============================================================ */

.ax-sessions-container::after {

    content: "";

    position:
        absolute;

    width:
        5px;

    height:
        5px;

    right:
        -25px;

    bottom:
        120px;

    border-radius:
        50%;

    background:
        var(--session-purple-soft);

    box-shadow:
        0 0 0 5px
        rgba(
            117,
            105,
            223,
            .08
        );

}


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

@media (max-width: 1000px) {

    .ax-sessions {

        padding:
            80px 0
            80px;

    }


    .ax-sessions-container {

        width:
            calc(100% - 40px);

    }


    .ax-sessions-list {

        max-width:
            820px;

    }

}


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

@media (max-width: 700px) {

    .ax-sessions {

        min-height:
            auto;

        padding:
            65px 0
            65px;

    }


    .ax-sessions-container {

        width:
            calc(100% - 28px);

    }


    /* --------------------------------------------------------
       Heading
    -------------------------------------------------------- */

    .ax-sessions-heading {

        margin-bottom:
            35px;

    }


    .ax-sessions-kicker {

        font-size:
            8px;

        letter-spacing:
            .22em;

        gap:
            8px;

    }


    .ax-sessions-kicker::before,
    .ax-sessions-kicker::after {

        width:
            18px;

    }


    .ax-sessions-heading h1 {

        font-size:
            clamp(
                39px,
                11vw,
                52px
            );

        line-height:
            .98;

    }


    .ax-sessions-heading-line {

        margin:
            16px 0 14px;

    }


    .ax-sessions-heading-line::before,
    .ax-sessions-heading-line::after {

        width:
            22px;

    }


    .ax-sessions-heading-line span {

        width:
            42px;

        height:
            2px;

    }


    .ax-sessions-heading p {

        max-width:
            480px;

        padding:
            0 8px;

        font-size:
            11px;

        line-height:
            1.7;

    }


    /* --------------------------------------------------------
       Session cards
    -------------------------------------------------------- */

    .ax-sessions-list {

        width:
            100%;

        gap:
            9px;

    }


    .ax-session-card {

        min-height:
            62px;

        padding:
            0 11px;

        border-radius:
            7px;

    }


    .ax-session-number {

        flex:
            0 0 28px;

        font-size:
            8px;

    }


    .ax-session-title {

        padding:
            13px 7px;

        font-size:
            11px;

        line-height:
            1.4;

    }


    .ax-session-arrow {

        width:
            28px;

        height:
            28px;

        flex:
            0 0 28px;

        font-size:
            8px;

    }


    .ax-session-card:hover {

        transform:
            translateX(2px);

    }


    /* --------------------------------------------------------
       Footer
    -------------------------------------------------------- */

    .ax-sessions-footer {

        margin-top:
            30px;

        gap:
            10px;

    }


    .ax-sessions-footer p {

        font-size:
            6px;

        letter-spacing:
            .08em;

    }


    /* --------------------------------------------------------
       Decorative elements
    -------------------------------------------------------- */

    .ax-sessions-container::before,
    .ax-sessions-container::after {

        display:
            none;

    }


    .ax-sessions-glow-left {

        width:
            260px;

        height:
            260px;

        left:
            -190px;

        top:
            170px;

    }


    .ax-sessions-glow-right {

        width:
            300px;

        height:
            300px;

        right:
            -220px;

        bottom:
            100px;

    }

}


/* ============================================================
   SMALL PHONES
============================================================ */

@media (max-width: 430px) {

    .ax-sessions {

        padding:
            52px 0
            55px;

    }


    .ax-sessions-container {

        width:
            calc(100% - 22px);

    }


    .ax-sessions-heading {

        margin-bottom:
            30px;

    }


    .ax-sessions-kicker {

        font-size:
            7px;

        letter-spacing:
            .17em;

    }


    .ax-sessions-heading h1 {

        font-size:
            35px;

    }


    .ax-sessions-heading p {

        font-size:
            10px;

    }


    .ax-session-card {

        min-height:
            64px;

        padding:
            0 8px;

    }


    .ax-session-number {

        flex:
            0 0 23px;

        font-size:
            7px;

    }


    .ax-session-title {

        padding:
            12px 5px;

        font-size:
            10px;

    }


    .ax-session-arrow {

        width:
            25px;

        height:
            25px;

        flex:
            0 0 25px;

        font-size:
            7px;

    }


    .ax-sessions-footer {

        display:
            none;

    }


    .ax-sessions-grid {

        opacity:
            .30;

        background-size:
            16px 16px;

    }

}