/* ============================================================
   ADVOPTIX 2027
   INVITED SPEAKERS
   LIGHT PREMIUM DESIGN
============================================================ */


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

.ax-invited-speakers {

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

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

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

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

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

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

    --border: #e2e6f2;

}


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

.ax-invited-speakers,
.ax-invited-speakers *,
.ax-invited-speakers *::before,
.ax-invited-speakers *::after {

    box-sizing: border-box;

}


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

.ax-invited-speakers {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        100px 0
        110px;

    background:

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

        radial-gradient(
            circle at 94% 80%,
            rgba(41,59,184,.045),
            transparent 28%
        ),

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

}


/* ============================================================
   LARGE LEFT CURVES
============================================================ */

.ax-speakers-arc {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

}


.ax-speakers-arc-left {

    width: 760px;

    height: 760px;

    left: -570px;

    top: -330px;

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

    box-shadow:

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

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

        0 0 0 92px
        rgba(223,173,62,.012);

}


.ax-speakers-arc-right {

    width: 650px;

    height: 650px;

    right: -470px;

    bottom: -390px;

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

    box-shadow:

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

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

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

}


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

.ax-speakers-dots {

    position: absolute;

    width: 210px;

    height: 170px;

    z-index: 0;

    pointer-events: none;

    opacity: .55;

    background-image:

        radial-gradient(
            rgba(71,48,197,.18) 1.5px,
            transparent 1.5px
        );

    background-size:
        16px 16px;

}


.ax-speakers-dots-top {

    top: 0;

    left: 18%;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent
        );

}


.ax-speakers-dots-bottom {

    right: 0;

    bottom: 20px;

    opacity: .35;

    mask-image:
        linear-gradient(
            to top,
            #000,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to top,
            #000,
            transparent
        );

}


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

.ax-invited-container {

    position: relative;

    z-index: 3;

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

    margin:
        0 auto;

}


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

.ax-invited-header {

    text-align: center;

    margin:
        0 auto
        58px;

}


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

.ax-invited-kicker {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-bottom:
        12px;

    color:
        var(--purple);

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

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .28em;

    text-transform:
        uppercase;

}


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

    content: "";

    width:
        28px;

    height:
        1px;

    background:
        var(--gold);

}


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

.ax-invited-header h1 {

    margin:
        0;

    color:
        var(--navy);

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

    font-size:
        clamp(
            50px,
            5vw,
            72px
        );

    font-weight:
        500;

    line-height:
        .95;

    letter-spacing:
        -.025em;

}


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

.ax-invited-heading-line {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    margin:
        18px 0
        17px;

}


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

    content: "";

    width:
        35px;

    height:
        1px;

    background:
        var(--gold);

}


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

    margin-right:
        8px;

}


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

    margin-left:
        8px;

}


.ax-invited-heading-line span {

    width:
        55px;

    height:
        3px;

    border-radius:
        10px;

    background:

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

}


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

.ax-invited-header > p {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        var(--text-soft);

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

    font-size:
        13px;

    line-height:
        1.75;

}


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

.ax-invited-grid {

    display:
        grid;

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

    gap:
        24px;

}


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

.ax-invited-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            226,
            230,
            242,
            .95
        );

    border-radius:
        14px;

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

    box-shadow:

        0 12px 35px
        rgba(
            25,
            38,
            95,
            .075
        );

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

}


.ax-invited-card:hover {

    transform:
        translateY(-8px);

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

    box-shadow:

        0 22px 50px
        rgba(
            71,
            48,
            197,
            .13
        );

}


/* ============================================================
   TOP GOLD EDGE
============================================================ */

.ax-invited-card::before {

    content: "";

    position:
        absolute;

    top: 0;

    left: 25%;

    width:
        50%;

    height:
        3px;

    background:

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

    border-radius:
        0 0 8px 8px;

    transform:
        scaleX(.55);

    transition:
        transform .35s ease;

}


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

    transform:
        scaleX(1);

}


/* ============================================================
   IMAGE WRAPPER
============================================================ */

.ax-invited-image-wrap {

    position:
        relative;

    width:
        calc(100% - 36px);

    aspect-ratio:
        1 / .86;

    margin:
        18px 18px 0;

    overflow:
        hidden;

    border-radius:
        11px;

    background:
        var(--soft);

}


/* ============================================================
   SPEAKER IMAGE
============================================================ */

.ax-invited-image-wrap img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform .5s cubic-bezier(.16,1,.3,1);

}


.ax-invited-card:hover
.ax-invited-image-wrap img {

    transform:
        scale(1.045);

}


/* ============================================================
   IMAGE OVERLAY
============================================================ */

.ax-invited-image-wrap::after {

    content: "";

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            180deg,
            transparent 65%,
            rgba(17,27,82,.12)
        );

    pointer-events:
        none;

}


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

.ax-speaker-index {

    position:
        absolute;

    z-index:
        4;

    left:
        10px;

    top:
        10px;

    width:
        31px;

    height:
        31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    background:
        rgba(
            17,
            27,
            82,
            .82
        );

    color:
        #ffffff;

    font-family:
        "Space Mono",
        monospace;

    font-size:
        8px;

    font-weight:
        700;

    backdrop-filter:
        blur(5px);

}


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

.ax-speaker-content {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        20px 20px 25px;

    text-align:
        center;

}


/* ============================================================
   SPEAKER NAME
============================================================ */

.ax-speaker-content h2 {

    min-height:
        48px;

    margin:
        0;

    color:
        var(--navy);

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

    font-size:
        25px;

    font-weight:
        600;

    line-height:
        1.02;

    letter-spacing:
        -.015em;

}


/* ============================================================
   SMALL GOLD / PURPLE LINE
============================================================ */

.ax-speaker-line {

    width:
        48px;

    height:
        2px;

    margin:
        12px auto
        14px;

    background:

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

}


/* ============================================================
   AFFILIATION
============================================================ */

.ax-speaker-affiliation {

    min-height:
        45px;

    margin:
        0;

    color:
        var(--text-soft);

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

    font-size:
        11.5px;

    line-height:
        1.55;

}


/* ============================================================
   TALK
============================================================ */

.ax-speaker-talk {

    margin:
        18px 0 0;

    color:
        var(--text);

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

    font-size:
        11.5px;

    line-height:
        1.65;

}


/* ============================================================
   TALK LABEL
============================================================ */

.ax-speaker-talk strong {

    color:
        var(--gold);

    font-weight:
        800;

}


/* ============================================================
   LAST CARD
   CENTER THE 9TH SPEAKER
============================================================ */

.ax-invited-card-last {

    grid-column:
        2 / 4;

    justify-self:
        center;

    width:
        calc(
            50% - 12px
        );

}


/* ============================================================
   BOTTOM LINE
============================================================ */

.ax-speakers-bottom-line {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    width:
        min(
            100%,
            900px
        );

    margin:
        48px auto 0;

}


.ax-speakers-bottom-line span {

    flex:
        1;

    height:
        1px;

    background:

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

}


.ax-speakers-bottom-line span:last-child {

    background:

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

}


.ax-speakers-bottom-line small {

    color:
        var(--muted);

    font-family:
        "Space Mono",
        monospace;

    font-size:
        7px;

    font-weight:
        600;

    letter-spacing:
        .15em;

    white-space:
        nowrap;

}


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

@media (max-width: 1100px) {

    .ax-invited-grid {

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

        gap:
            20px;

    }


    .ax-invited-card-last {

        grid-column:
            2;

        width:
            100%;

    }

}


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

@media (max-width: 800px) {

    .ax-invited-speakers {

        padding:
            75px 0
            80px;

    }


    .ax-invited-container {

        width:
            calc(100% - 36px);

    }


    .ax-invited-grid {

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

        gap:
            18px;

    }


    .ax-invited-card-last {

        grid-column:
            1 / -1;

        width:
            calc(50% - 9px);

    }


    .ax-speaker-content h2 {

        font-size:
            23px;

    }

}


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

@media (max-width: 600px) {

    .ax-invited-speakers {

        padding:
            58px 0
            65px;

    }


    .ax-invited-container {

        width:
            calc(100% - 28px);

    }


    /* Header */

    .ax-invited-header {

        margin-bottom:
            35px;

    }


    .ax-invited-kicker {

        font-size:
            8px;

        letter-spacing:
            .20em;

        gap:
            8px;

    }


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

        width:
            18px;

    }


    .ax-invited-header h1 {

        font-size:
            45px;

        line-height:
            .98;

    }


    .ax-invited-heading-line {

        margin:
            15px 0;

    }


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

        width:
            22px;

    }


    .ax-invited-heading-line span {

        width:
            42px;

        height:
            2px;

    }


    .ax-invited-header > p {

        padding:
            0 8px;

        font-size:
            11px;

        line-height:
            1.7;

    }


    /* Grid */

    .ax-invited-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    /* Cards */

    .ax-invited-card {

        width:
            100%;

    }


    .ax-invited-card-last {

        grid-column:
            auto;

        width:
            100%;

        justify-self:
            stretch;

    }


    .ax-invited-image-wrap {

        width:
            calc(100% - 32px);

        margin:
            16px 16px 0;

        aspect-ratio:
            1 / .82;

    }


    .ax-speaker-content {

        padding:
            18px 18px 23px;

    }


    .ax-speaker-content h2 {

        min-height:
            auto;

        font-size:
            26px;

    }


    .ax-speaker-affiliation {

        min-height:
            auto;

        font-size:
            11.5px;

    }


    .ax-speaker-talk {

        margin-top:
            16px;

        font-size:
            11.5px;

    }


    /* Bottom */

    .ax-speakers-bottom-line {

        margin-top:
            32px;

    }


    .ax-speakers-bottom-line small {

        font-size:
            5.5px;

        letter-spacing:
            .08em;

    }


    /* Decorations */

    .ax-speakers-arc-left {

        width:
            430px;

        height:
            430px;

        left:
            -330px;

        top:
            -170px;

    }


    .ax-speakers-arc-right {

        width:
            400px;

        height:
            400px;

        right:
            -310px;

        bottom:
            -250px;

    }


    .ax-speakers-dots-top {

        left:
            5%;

        width:
            130px;

        height:
            100px;

        background-size:
            13px 13px;

    }


    .ax-speakers-dots-bottom {

        width:
            130px;

        height:
            100px;

        background-size:
            13px 13px;

    }

}


/* ============================================================
   SMALL PHONE
============================================================ */

@media (max-width: 400px) {

    .ax-invited-speakers {

        padding:
            50px 0
            55px;

    }


    .ax-invited-container {

        width:
            calc(100% - 22px);

    }


    .ax-invited-header h1 {

        font-size:
            39px;

    }


    .ax-invited-kicker {

        font-size:
            7px;

    }


    .ax-invited-header > p {

        font-size:
            10px;

    }


    .ax-invited-image-wrap {

        aspect-ratio:
            1 / .80;

    }


    .ax-speaker-content h2 {

        font-size:
            24px;

    }


    .ax-speaker-affiliation,
    .ax-speaker-talk {

        font-size:
            11px;

    }


    .ax-speakers-bottom-line {

        display:
            none;

    }

}