@charset "utf-8";
/* CSS Document */

ul.staffWrapper {width:96%;max-width:1200px;display:flex;flex-wrap:wrap;justify-content:center;padding:0px 0px 100px 0px;margin:0 auto;text-align:center;list-style-type:none;}
ul.staffWrapper li {max-width:300px;width:25%;min-width:180px;display:flex;flex-direction:column;padding:10px;box-sizing:border-box;position:relative;}

/* STAFF THUMBNAILS */
.staff-thumbnail {width:100%;flex:1;display:flex;flex-direction:column;background-color:#000;overflow:hidden;cursor:default;position:relative;}
.staff-thumbnail img {width:100%;height:auto;display:block;transition:transform 0.3s ease;}

/* ENABLE HOVER ONLY WHEN BIO EXISTS */
.staff-thumbnail.has-bio {cursor:pointer;}
.staff-thumbnail.has-bio::before {content:"READ BIO";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:16px;font-weight:bold;opacity:0;transition:opacity 0.3s ease;z-index:1;}
.staff-thumbnail.has-bio:hover img {filter:brightness(50%);transform:scale(1.05);}
.staff-thumbnail.has-bio:hover::before {opacity:1;}

/* STAFF INFORMATION */
.staff-name {display:flex;flex-direction:column;justify-content:center;min-height:80px;background:#000000;color:#fff;font-size:16px;font-weight:bold;text-transform:uppercase;padding:15px 10px;text-align:center;margin-top:-5px;}
.staff-title {font-size:0.9em;font-weight:normal;font-style:italic;}

/* MODAL STYLES */
.modal {
    display:none;
    padding:20px;
    position:fixed;
    z-index:1000;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.6);
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    overscroll-behavior:contain;
}

.modal-content {
    background:#fff;
    padding:20px;
    width:50%;
    max-width:600px;
    max-height:90vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    box-sizing:border-box;
    border-radius:10px;
    position:relative;
    animation:fadeIn 0.3s ease-in-out;
}

/* CLOSE BUTTON */
.modal-content .close {position:absolute;top:10px;right:15px;font-size:24px;font-weight:bold;cursor:pointer;color:#333;}

/* PREVENT BACKGROUND SCROLLING */
body.modal-open {overflow:hidden;}

/* CONCRETE CMS EDIT MODE */
.ineditmode .modal,
.ineditmode .modal-content {display:none !important;visibility:hidden !important;height:0 !important;overflow:hidden !important;}

/* RESPONSIVE */
@media only screen and (max-width:768px) {
    ul.staffWrapper li {padding:4px;}
}

/* TOUCH DEVICES - ONLY STAFF WITH BIOS */
@media (hover:none) and (pointer:coarse) {
    .staff-thumbnail.has-bio::before {opacity:1 !important;}
    .staff-thumbnail.has-bio img {filter:brightness(50%);}
}

/* MODAL ANIMATION */
@keyframes fadeIn {
    from {opacity:0;transform:translateY(-20px);}
    to {opacity:1;transform:translateY(0);}
}

/* RESPONSIVE MODAL */
@media (max-width:768px) {
    .modal-content {width:90%;}
}