@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;padding: 10px;box-sizing: border-box;position: relative;}
.staff-thumbnail {position: relative;width: 100%;overflow: hidden;cursor: pointer;}
.staff-thumbnail img {width: 100%;height: auto;display: block;transition: transform 0.3s ease;}
.staff-thumbnail::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:hover img {filter: brightness(50%);transform: scale(1.05);}
.staff-thumbnail:hover::before {opacity: 1;}
.staff-name {background: #000000;color: #fff;font-size: 16px;font-weight: bold;text-transform: uppercase;padding: 15px 10px;ext-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;}
.modal-content {background: #fff;padding: 20px;width: 50%;max-width: 600px;max-height: 90vh;overflow-y: auto;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;}
body.modal-open {overflow: hidden;}
.ineditmode .modal, .ineditmode .modal-content {display: none !important;visibility: hidden !important;height: 0 !important;overflow: hidden !important;}

@media only screen and (max-width:768px){
	ul.staffWrapper li {padding: 4px;}
}
@media (hover: none) and (pointer: coarse) {
	.staff-thumbnail::before { opacity: 1 !important;}
	.staff-thumbnail img {filter: brightness(50%);}
}

/* Modal Animation */
@keyframes fadeIn {
    from {opacity: 0;transform: translateY(-20px);}
    to {opacity: 1;transform: translateY(0);}}
/* Responsive: Fullscreen Modal for Small Screens */
@media (max-width: 768px) {
	.modal-content {width: 90%;}}