/* HABLUXE COMMUNITY STAFF CARD GRID V1 */

/* HABLUXE COMMUNITY STAFF CARD GRID V2 */

/* HABLUXE COMMUNITY STAFF CARD GRID V3 */

.staff-member-card {
    min-width:0;
    min-height:300px;
    display:grid;
    grid-template-columns:210px minmax(0,1fr);
    overflow:hidden;
    border:1px solid #355165;
    border-radius:16px;
    background:
        linear-gradient(
            145deg,
            rgba(24,48,70,.98),
            rgba(7,18,32,.98)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 18px 40px rgba(0,0,0,.28);
    transition:.18s ease;
}

.staff-member-card:hover {
    border-color:#58a9ff;
    transform:translateY(-3px);
}

.staff-member-card__avatar-panel {
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    width:150px;
    flex-shrink:0;
    overflow:hidden;
    background:
        linear-gradient(
            180deg,
            rgba(45,75,112,.95),
            rgba(10,24,42,.98)
        );
}

.staff-member-card__avatar-panel::after {
    content:"";
    position:absolute;
    inset:auto 20px 20px;
    height:80px;
    border-radius:50%;
    background:rgba(88,169,255,.12);
    filter:blur(20px);
}

.staff-member-card__avatar {
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.staff-member-card__avatar img {
    height:235px;
    max-height:none;
    max-width:none;
    image-rendering:pixelated;
    transform:translateY(8px);
    filter:drop-shadow(0 12px 16px rgba(0,0,0,.55));
}

.staff-member-card__status {
    z-index:2;
    position:absolute;
    top:14px;
    left:14px;
    padding:5px 11px;
    border-radius:999px;
    font-size:10px;
    font-weight:900;
    background:rgba(5,18,30,.9);
    border:1px solid rgba(255,255,255,.14);
}

.staff-member-card__content {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:26px 34px;
    gap:8px;
}

.staff-member-card__identity {
    max-width:none;
}

.staff-member-card__label {
    color:#76c9ed;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.staff-member-card__identity h3 {
    margin:6px 0 3px;
    font-size:27px;
    line-height:1.1;
    letter-spacing:-.02em;
}

.staff-member-card__role {
    margin:0;
    color:#66b7ff;
    font-size:15px;
    font-weight:900;
    text-transform:uppercase;
}

.staff-member-card__motto {
    margin:12px 0 20px;
    max-width:none;
    color:#c0d2e0;
    font-size:13px;
    line-height:1.55;
}

.staff-member-card__stats {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:auto;
    margin-bottom:12px;
}

.staff-member-card__stats > div {
    padding:11px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    background:rgba(255,255,255,.045);
}

.staff-member-card__stats dt {
    font-size:10px;
    color:#91aabd;
}

.staff-member-card__stats dd {
    margin:4px 0 0;
    color:white;
    font-size:18px;
    font-weight:900;
}

.staff-member-card__button {
    width:100%;
    display:block;
    text-align:center;
    padding:12px 18px;
    border-radius:9px;
    background:
        linear-gradient(
            180deg,
            #2581d4,
            #1768b0
        );
    color:white;
    font-size:13px;
    font-weight:900;
}@media (max-width:900px) {
    .staff-member-card {
        min-height:0;
    }
}
/* HABLUXE COMMUNITY STAFF CARD PREMIUM CONTENT V2 */

.staff-member-card__identity h3 a {
    color:#ffffff;
    text-decoration:none;
}

.staff-member-card__identity h3 a:hover {
    color:#76c9ed;
}

.staff-member-card__role {
    text-transform:uppercase;
    letter-spacing:.04em;
}

.staff-member-card__motto {
    min-height:38px;
}

.staff-member-card__stats > div {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );
}

.staff-member-card__button {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12);
    transition:.18s ease;
}

.staff-member-card__button:hover {
    filter:brightness(1.12);
}

/* HABLUXE STAFF STATUS IN-HOTEL OFFLINE V1 */
.staff-member-card__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.staff-member-card__status::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 999px;
}

.staff-member-card__status--online {
    color: #baffcf;
    background: rgba(20, 96, 54, .78);
    border-color: rgba(79, 231, 132, .62);
    box-shadow: 0 0 0 1px rgba(79, 231, 132, .08), 0 0 14px rgba(34, 197, 94, .22);
    animation: habluxeStaffOnlineGlow 1.8s ease-in-out infinite;
}

.staff-member-card__status--online::before {
    background: #4ff08a;
    box-shadow: 0 0 8px rgba(79, 240, 138, .9);
    animation: habluxeStaffOnlineDot 1.15s ease-in-out infinite;
}

.staff-member-card__status--offline {
    color: #ffc0c0;
    background: rgba(111, 28, 34, .80);
    border-color: rgba(255, 102, 111, .58);
    box-shadow: 0 0 0 1px rgba(255, 102, 111, .07), 0 0 14px rgba(239, 68, 68, .20);
    animation: habluxeStaffOfflineGlow 1.8s ease-in-out infinite;
}

.staff-member-card__status--offline::before {
    background: #ff6670;
    box-shadow: 0 0 8px rgba(255, 102, 112, .86);
    animation: habluxeStaffOfflineDot 1.15s ease-in-out infinite;
}

.staff-member-card__status-value {
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.staff-member-card__status-value--online {
    color: #68eda0;
    text-shadow: 0 0 10px rgba(34, 197, 94, .25);
    animation: habluxeStaffOnlineText 1.8s ease-in-out infinite;
}

.staff-member-card__status-value--offline {
    color: #ff7c85;
    text-shadow: 0 0 10px rgba(239, 68, 68, .22);
    animation: habluxeStaffOfflineText 1.8s ease-in-out infinite;
}

@keyframes habluxeStaffOnlineGlow {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(79, 231, 132, .08), 0 0 12px rgba(34, 197, 94, .18);
    }
    50% {
        box-shadow: 0 0 0 1px rgba(79, 231, 132, .17), 0 0 22px rgba(34, 197, 94, .34);
    }
}

@keyframes habluxeStaffOfflineGlow {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(255, 102, 111, .07), 0 0 12px rgba(239, 68, 68, .16);
    }
    50% {
        box-shadow: 0 0 0 1px rgba(255, 102, 111, .16), 0 0 22px rgba(239, 68, 68, .31);
    }
}

@keyframes habluxeStaffOnlineDot {
    0%, 100% { transform: scale(.86); opacity: .72; }
    50% { transform: scale(1.16); opacity: 1; }
}

@keyframes habluxeStaffOfflineDot {
    0%, 100% { transform: scale(.86); opacity: .68; }
    50% { transform: scale(1.14); opacity: 1; }
}

@keyframes habluxeStaffOnlineText {
    0%, 100% { text-shadow: 0 0 7px rgba(34, 197, 94, .18); }
    50% { text-shadow: 0 0 13px rgba(34, 197, 94, .38); }
}

@keyframes habluxeStaffOfflineText {
    0%, 100% { text-shadow: 0 0 7px rgba(239, 68, 68, .16); }
    50% { text-shadow: 0 0 13px rgba(239, 68, 68, .34); }
}

@media (prefers-reduced-motion: reduce) {
    .staff-member-card__status--online,
    .staff-member-card__status--offline,
    .staff-member-card__status--online::before,
    .staff-member-card__status--offline::before,
    .staff-member-card__status-value--online,
    .staff-member-card__status-value--offline {
        animation: none !important;
    }
}