/*
 * ZendaSoftware
 * ZS-6O-B1
 *
 * FlyonUI-inspired team composition.
 * Existing people, photographs, names and roles remain
 * authoritative.
 */


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

.zenda-team-b1-ready
#team {
    overflow:
        hidden;
}


.zenda-team-b1-ready
#team::after {
    content:
        "";

    position:
        absolute;

    width:
        420px;

    aspect-ratio:
        1;

    inset-inline-end:
        -240px;

    top:
        18%;

    border-radius:
        999px;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle,
            rgba(99,102,241,.11),
            transparent 70%
        );
}


/* =========================================================
 * GRIDS
 * ========================================================= */

.zenda-team-b1-ready
#team
.za-team-grid {
    position:
        relative;

    z-index:
        1;

    display:
        grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        ) !important;

    gap:
        22px !important;

    align-items:
        stretch;
}


/* =========================================================
 * MEMBER CARD
 * ========================================================= */

.zenda-team-b1-ready
#team
.za-person {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid rgba(148,163,184,.15);

    border-radius:
        24px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.040),
            rgba(255,255,255,.012)
        ),
        var(--surface);

    box-shadow:
        0 20px 62px rgba(5,5,18,.11);

    isolation:
        isolate;

    transition:
        transform .34s cubic-bezier(.2,.8,.2,1),
        border-color .28s ease,
        box-shadow .34s ease;
}


.zenda-team-b1-ready
#team
.za-person::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    pointer-events:
        none;

    border-radius:
        inherit;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            transparent 24%,
            transparent 74%,
            rgba(99,102,241,.055)
        );

    opacity:
        .68;
}


.zenda-team-b1-ready
#team
.za-person:hover,

.zenda-team-b1-ready
#team
.za-person:focus-visible {
    transform:
        translateY(-9px);

    border-color:
        rgba(129,140,248,.40);

    box-shadow:
        0 34px 90px rgba(5,5,18,.22),
        0 16px 45px rgba(99,102,241,.10);

    outline:
        none;
}


/* =========================================================
 * PORTRAIT
 * ========================================================= */

.zenda-team-b1-ready
#team
.za-person-media {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        4 / 4.7 !important;

    overflow:
        hidden;

    background:
        rgba(15,23,42,.4);
}


.zenda-team-b1-ready
#team
.za-person-media::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            to top,
            rgba(8,6,20,.42),
            transparent 38%,
            transparent 75%,
            rgba(8,6,20,.08)
        );
}


.zenda-team-b1-ready
#team
.za-person-media img {
    display:
        block;

    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        cover !important;

    object-position:
        50% 30%;

    filter:
        saturate(.96)
        contrast(1.02);

    transform:
        scale(1.002);

    transition:
        transform .62s cubic-bezier(.2,.8,.2,1),
        filter .35s ease !important;
}


.zenda-team-b1-ready
#team
.za-person:hover
.za-person-media img,

.zenda-team-b1-ready
#team
.za-person:focus-visible
.za-person-media img {
    transform:
        scale(1.055);

    filter:
        saturate(1.04)
        contrast(1.04);
}


/* =========================================================
 * MEMBER INDEX
 * ========================================================= */

.zenda-team-index {
    position:
        absolute;

    z-index:
        4;

    top:
        13px;

    inset-inline-end:
        13px;

    display:
        grid;

    place-items:
        center;

    min-width:
        34px;

    height:
        30px;

    padding:
        0 8px;

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

    border-radius:
        10px;

    background:
        rgba(7,5,18,.67);

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

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .11em;

    box-shadow:
        0 8px 24px rgba(0,0,0,.13);
}


/* =========================================================
 * BODY
 * ========================================================= */

.zenda-team-b1-ready
#team
.za-person-body {
    position:
        relative;

    z-index:
        3;

    flex:
        1 1 auto;

    padding:
        18px 18px 19px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,0)
        );
}


.zenda-team-b1-ready
#team
.za-person-name {
    color:
        var(--fg);

    font-size:
        .98rem !important;

    font-weight:
        800 !important;

    line-height:
        1.25;

    letter-spacing:
        -.015em;
}


.zenda-team-b1-ready
#team
.za-person-role {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        26px;

    margin-top:
        9px !important;

    padding:
        5px 9px;

    border:
        1px solid rgba(129,140,248,.15);

    border-radius:
        999px;

    background:
        rgba(99,102,241,.065);

    color:
        var(--fg-2) !important;

    font-size:
        .68rem !important;

    font-weight:
        650;

    line-height:
        1.3;
}


/* =========================================================
 * CORE TEAM ACCENT
 * ========================================================= */

.zenda-team-b1-ready
#team
.za-team-grid--core
.za-person {
    --member-accent:
        rgba(124,92,255,.42);
}


.zenda-team-b1-ready
#team
.za-team-grid--core
.za-person::after {
    content:
        "";

    position:
        absolute;

    z-index:
        3;

    inset-inline:
        18px;

    bottom:
        0;

    height:
        2px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(124,92,255,.78),
            transparent
        );

    opacity:
        .48;
}


/* =========================================================
 * PROFESSIONAL TEAM ACCENT
 * ========================================================= */

.zenda-team-b1-ready
#team
.za-team-grid--professional {
    position:
        relative;
}


.zenda-team-b1-ready
#team
.za-team-grid--professional
.za-person {
    border-color:
        rgba(34,211,238,.16);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(34,211,238,.065),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.010)
        ),
        var(--surface);
}


.zenda-team-b1-ready
#team
.za-team-grid--professional
.za-person:hover,

.zenda-team-b1-ready
#team
.za-team-grid--professional
.za-person:focus-visible {
    border-color:
        rgba(34,211,238,.38);

    box-shadow:
        0 34px 90px rgba(5,5,18,.21),
        0 16px 44px rgba(34,211,238,.08);
}


.zenda-team-b1-ready
#team
.za-team-grid--professional
.za-person-role {
    border-color:
        rgba(34,211,238,.16);

    background:
        rgba(34,211,238,.055);
}


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

@media (max-width: 1080px) {

    .zenda-team-b1-ready
    #team
    .za-team-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:
            18px !important;
    }


    .zenda-team-b1-ready
    #team
    .za-person-media {
        aspect-ratio:
            4 / 4.2 !important;
    }

}


/* =========================================================
 * MOBILE — INTENTIONAL LARGE CARDS
 * ========================================================= */

@media (max-width: 640px) {

    .zenda-team-b1-ready
    #team
    .za-team-grid {
        grid-template-columns:
            minmax(0,1fr)
            !important;

        gap:
            16px !important;
    }


    .zenda-team-b1-ready
    #team
    .za-person {
        border-radius:
            21px;

        max-width:
            440px;

        margin-inline:
            auto;
    }


    .zenda-team-b1-ready
    #team
    .za-person-media {
        aspect-ratio:
            4 / 4.15 !important;
    }


    .zenda-team-b1-ready
    #team
    .za-person-body {
        padding:
            17px !important;
    }


    .zenda-team-b1-ready
    #team
    .za-person-name {
        font-size:
            1rem !important;
    }


    .zenda-team-index {
        top:
            11px;

        inset-inline-end:
            11px;
    }

}


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

@media (max-width: 390px) {

    .zenda-team-b1-ready
    #team
    .za-person-media {
        aspect-ratio:
            1 / 1.05 !important;
    }

}


/* =========================================================
 * RTL
 * ========================================================= */

html[dir="rtl"]
.zenda-team-b1-ready
#team
.za-person-body {
    text-align:
        right;
}


/* =========================================================
 * LIGHT MODE
 * ========================================================= */

html:not(.dark)
.zenda-team-b1-ready
#team
.za-person {
    box-shadow:
        0 20px 54px rgba(31,41,55,.07);
}


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

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

    .zenda-team-b1-ready
    #team
    .za-person,

    .zenda-team-b1-ready
    #team
    .za-person-media img {
        transition:
            none !important;

        transform:
            none !important;
    }

}