/* people gallery grid */

:root {
--people-gallery-h2-color: var(--wp--preset--color--black);
--people-gallery-item-bg-color: transparent;
--people-gallery-item-bg-color-hover: transparent;
--people-gallery-popup-bg-color: var(--wp--preset--color--cream);
--people-gallery-popup-inner-bg-color: var(--wp--preset--color--cream);
--people-gallery-button-close-bg-color: var(--wp--preset--color--cream);
--people-gallery-popup-button-text-color: var(--wp--preset--color--gray-dark);
--people-gallery-popup-button-text-color-hover: var(--wp--preset--color--red);
--people-gallery-popup-link-color: var(--wp--preset--color--gray-dark);
--people-gallery-popup-link-color-hover: var(--wp--preset--color--red)
}
.block-people-gallery {
display: block;
margin: 3em 0;
}

@media screen and (max-width:540px) {
    .people-gallery-item {
    margin-bottom: 1.5em;
    }
}
.people-gallery-grid-wrapper.row {
margin: 0 auto;
max-width: 1360px;
}
.people-gallery-item img {
vertical-align: baseline;
transition: all .3s ease;
}
.people-gallery-item .people-gallery-photo {
transition: all .3s ease;
}
.people-gallery-item .people-gallery-photo,
.people-gallery-item .people-gallery-photo {
transition: all .3s ease;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.people-gallery-item:hover .people-gallery-photo,
.people-gallery-item:focus-visible .people-gallery-photo {
transform: scale(1.02) rotate(-1deg);
transition: all .3s ease;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* .people-gallery-item:hover img,
.people-gallery-item:focus-visible img {
transition: all .3s ease;
scale:1.05;
} */
.gallery-grid-item,
.people-gallery-item {
position: relative;
/* margin-bottom: 2em; */
text-decoration: none;
}
.people-gallery-item a {
height:100%;
padding-top: 1px;
padding-bottom: .5em;
padding-left: 1px;
padding-right: 1px;
text-decoration: none;
display: block;
}
.people-gallery-item a:hover,
.people-gallery-item a:focus-visible {
background-color: var(--people-gallery-item-bg-color-hover);
transition: all .3s ease;
}
.people-gallery-item a h2,
.people-gallery-item a:link h2,
.people-gallery-item a:visited h2 {
color:var(--people-gallery-h2-color);
letter-spacing: 0;
}
/* .people-gallery-item a h3,
.people-gallery-item a:link h3,
.people-gallery-item a:visited h3 {
padding-top: 0;
margin: 0;
} */
.people-gallery-item h3 {
margin-bottom: 0;
padding: 1em 15px 2em;
text-transform: uppercase;
font-family: var(--wp--preset--font-family--myriad-pro);
font-weight: bold;
font-size: var(--wp--preset--font-size--x-small);
}
.people-gallery-item h2 {
font-size: 1.5rem;
text-transform: none;
margin: 0 0 .5em 0;
padding: .75em 15px 0;
position: relative;
}
/* .people-gallery-item h2::after {
content: '';
display: block;
position: absolute;
bottom:-8px;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 30px;
transition: all .35s ease;
height: 2px;
background-color: var(--wp--preset--color--gold-light);
} */
/* .people-gallery-item a:hover h2::after {
transition: all .35s ease;
transform: translateX(-50%) scaleX(1);
} */
.gallery-grid-item img,
.people-gallery-item img {
position: relative;
display: block;
z-index: 1;
top:0;
left:0;
width:100%;
height:auto;
}
.people-gallery-item {
text-align: center;
transition: all .3s ease;
}
.people-gallery-item {
height:100%;
}
.people-gallery-item a {
background-color: var(--people-gallery-item-bg-color);
transition: all .25s ease;
}
.people-gallery-item:after {
content: '';
position: absolute;
top:0;
left:0;
border-radius: 15px;
height:20px;
width:20px;
}
.people-gallery-item a {
/* overflow: hidden; */
display: block;
}
.people-gallery-photo {
display: block;
/* height: 300px; */
width: 100%;
aspect-ratio: 1/1;
overflow: hidden;
position: relative;
background: var(--people-gallery-item-bg-color);
}
.people-gallery-photo img {
object-fit:cover;
object-position: center top;
width: 100%;
height: 100%;
scale: 1;
}

.people-text {
font-size: .825em;
padding-bottom: 1rem;
}
.people-text h2 {
margin-top: 1rem;
margin-bottom: 0;
}
.people-text h3 {
margin-top: 0;
margin-bottom: 0;
}
.people-text p {
margin-bottom: 0;
padding-bottom: 1rem;
}
.people-excerpt {
padding: 0 1.5em;
font-size: 1rem;
}

/* people gallery grid layout */

.people-gallery-grid {
display: grid;
gap: 30px;
}

.people-gallery-grid.layout-1-column,
.people-gallery-grid.layout-2-column,
.people-gallery-grid.layout-3-column,
.people-gallery-grid.layout-4-column {
grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .people-gallery-grid.layout-2-column {
    grid-template-columns: 1fr 1fr;
    }
    .people-gallery-grid.layout-3-column {
    grid-template-columns: 1fr 1fr;
    }
    .people-gallery-grid.layout-4-column {
    grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .people-gallery-grid.layout-1-column {
    grid-template-columns: 1fr;
    }
    .people-gallery-grid.layout-2-column {
    grid-template-columns: 1fr 1fr;
    }
    .people-gallery-grid.layout-3-column {
    grid-template-columns: 1fr 1fr 1fr;
    }
    .people-gallery-grid.layout-4-column {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.people-gallery-grid > div {
box-sizing: border-box;
/* padding: 10px; */
}


/* people gallery popup */

.people-gallery-popup-data {
display: none;
}
.people-gallery-popup {
position:absolute;
z-index: 1;
opacity: 0;
pointer-events: none;
width: 100vw;
height: 100vh;
height: 100dvh;
max-width:100vw;
overflow: hidden;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%) scale(.9);
transition: all .125s ease;
background-color:var(--people-gallery-popup-bg-color);
}
.people-gallery-popup-out .people-gallery-popup {
display: block;
z-index:10000;
position: fixed;
pointer-events: all;
opacity:1;
visibility: visible;
transform:translateX(-50%) translateY(-50%) scale(1);
transition: all .25s ease;
top:50%;
left:50%;
}
.people-gallery-popup-inner {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
.people-gallery-slide-inner {
position: relative;
height: 100%;/*fix*/
}
.people-gallery-popup-photo-holder img {
display: block;
}
.people-gallery-popup-stage .people-gallery-slide .row {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
background-color: var(--people-gallery-popup-inner-bg-color);
background-origin: content-box;
}
.people-gallery-popup .people-gallery-popup-button-close,
.people-gallery-popup .people-gallery-popup-button-next,
.people-gallery-popup .people-gallery-popup-button-previous {
cursor:pointer;
display: inline-block;
padding: 0;
width: 44px;
text-align: center;
position: fixed;
z-index: 100;
top: 50%;
top: 50vh;
z-index: 100;
font-size: 1.5em;
font-family: var(--wp--preset--font-family--adobe-garamond-pro);
color: var(--wp--preset--color--gray-dark);
height: auto;
background-color: transparent;
border-color:transparent;
}
.people-gallery-popup .people-gallery-popup-button-close:hover,
.people-gallery-popup .people-gallery-popup-button-next:hover,
.people-gallery-popup .people-gallery-popup-button-previous:hover,
.people-gallery-popup .people-gallery-popup-button-close:focus-visible,
.people-gallery-popup .people-gallery-popup-button-next:focus-visible,
.people-gallery-popup .people-gallery-popup-button-previous:focus-visible,
.people-gallery-popup .people-gallery-popup-button-close:focus,
.people-gallery-popup .people-gallery-popup-button-next:focus,
.people-gallery-popup .people-gallery-popup-button-previous:focus {
color: var(--wp--preset--color--red);
}

.people-gallery-popup .people-gallery-popup-button-close {
padding: 0;
width:44px;
font-size: 1.5em;
text-align: center;
position: absolute;
background-color: var(--people-gallery-button-close-bg-color);
color:var(--people-gallery-popup-button-text-color);
}
.people-gallery-popup-button-next ,
.people-gallery-popup-button-previous {
left: auto;
top: 45%;
transition: all .25s ease;
}
.people-gallery-popup .people-gallery-popup-button-next {
right: 10px;
left: auto;
}
.people-gallery-popup .people-gallery-popup-button-previous {
left: 10px;
right: auto;
}
.people-gallery-popup-button-previous:hover,
.people-gallery-popup-button-next:hover {
transition: all .25s ease;
}
.people-gallery-popup .people-gallery-popup-button-close {
display: block;
top: 0;
right: 0;
}
.people-gallery-person-name,
.people-gallery-person-position {
text-align: center;
}
.people-gallery-popup .table {
display: table;
height: 100%;
width: 100%;
}
.people-gallery-popup .cell {
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
}
.people-gallery-popup-button-next,
.people-gallery-popup-button-previous {
display: block;
position: absolute;
z-index: 999;
top: 50%;
transform: translateY(-50%);
font-size: 1.5em;
line-height: 1em;
color: var(--people-gallery-popup-button-text-color);
text-align: center;
padding: 5px 0;
}
.people-gallery-popup-button-next {
right: 0;
text-decoration: none;
}
.people-gallery-popup-button-previous {
left: 0;
text-decoration: none;
}
.people-gallery-popup-stage .people-gallery-slide,
.people-gallery-slide {
height: 100%;
}
.people-gallery-slide a,
.people-gallery-slide a:link,
.people-gallery-slide a:visited {
color:var(--people-gallery-popup-link-color);
}
.people-gallery-slide a:hover,
.people-gallery-slide a:focus {
color:var(--people-gallery-popup-link-color-hover);
}
.people-gallery-slide h2:first-child {
margin-top: 0;
margin-bottom: .25em;
font-size: 2rem;
text-transform: capitalize;
letter-spacing: 0;
}
.people-gallery-slide h3 {
text-transform: uppercase;
font-size: 1rem;
margin-top: 1em;
/* letter-spacing: .25em; */
}
.people-gallery-slide h2 + h3 {
margin-top: 0;
margin-bottom: 2rem;
}
.people-gallery-email {
text-align: center;
margin-top: -1.5rem;
margin-bottom: 2rem;
}
.people-gallery-email a {
color: #4A4241;
text-decoration: underline;
text-decoration-color: var(--color-border-medium);
}
.people-gallery-email a:hover,
.people-gallery-email a:focus {
color:#4A4241;
text-decoration: underline;
text-decoration-color: var(--color-border-dark);
}
.people-gallery-popup .people-gallery-slide {
position: absolute;
width:100%;
height:100%;
height: -webkit-fill-available;
top:0px;
left:0px;
z-index: 70;
transform: translateX(100%);
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
pointer-events: all;
}
.people-gallery-popup .people-gallery-slide-active .scrollable,
.people-gallery-popup .people-gallery-slide-in-left .scrollable,
.people-gallery-popup .people-gallery-slide-in-right .scrollable,
.people-gallery-popup .people-gallery-slide-out-left .scrollable,
.people-gallery-popup .people-gallery-slide-out-right .scrollable {
overflow: auto;
}
.people-gallery-popup .scrollable .narrow {
padding:0 50px 50px;
}
.people-gallery-popup .people-gallery-slide.people-gallery-slide-active {
transform: translateX(0%); 
z-index: 95;
}
.people-gallery-popup .people-gallery-slide.people-gallery-slide-active + .people-gallery-slide {
z-index: 80;
}

@media only screen and (min-width: 541px) and (max-width: 768px){/* tablet */

    .people-gallery-popup-button-previous,
    .people-gallery-popup-button-next {
    width:40px;
    }
}

@media only screen and (max-width: 768px){/* mobile and tablet */
    /* .people-gallery-block {
    padding-right: 2em;
    padding-left: 2em;
    } */
    .people-gallery-slide {
    overflow-x:hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    }
    .people-gallery-slide .people-gallery-slide-inner {
    height: auto;
    min-height:100vh;
    }
    .people-gallery-popup-photo {
    height:100vw !important;
    }
    .people-gallery-popup-photo-holder {
    margin: 50px 50px 50px;
    /* overflow:hidden; */
    aspect-ratio: 1/1;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    .people-gallery-popup-text {
    height:auto !important;
    overflow:none !important;
    }
    .people-gallery-popup .people-gallery-popup-button-next {
    right: 0;
    left:auto;
    }
    .people-gallery-popup .people-gallery-popup-button-previous {
    left: 0;
    left:auto;
    }
    .people-gallery-popup-button-previous,
    .people-gallery-popup-button-next {
    width: 30px;
    }
    .people-gallery-popup .people-gallery-popup-button-next:hover,
    .people-gallery-popup .people-gallery-popup-button-previous:hover {
    color:var(--people-gallery-popup-button-text-color-hover);
    }
    .people-gallery-popup-button-close {
    background-color: var(--people-gallery-button-close-bg-color);
    color:var(--people-gallery-popup-button-text-color);
    }
    .people-gallery-popup-button-close:hover {
    color:var(--people-gallery-popup-button-text-color-hover);
    }
}

@media only screen and (min-width: 769px){/* all desktop */

    .people-gallery-popup-photo-holder {
    height: 100%;/*fix*/
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    /* .people-gallery-slide-inner,
    .people-gallery-popup-photo-holder,
    .people-gallery-slide .row,
    .people-gallery-slide .row > div {
    height: 100%;
    } */
    /* .people-gallery-popup-photo-holder {
    overflow: hidden;
    } */
    .people-gallery-popup .people-gallery-slide {
    padding: 60px;
    }
    .people-gallery-popup .scrollable .narrow {
    padding: 60px 60px 60px;
    }
    .people-gallery-popup .people-gallery-popup-button-close {
    top: 10px;
    right: 10px;
    }
    .people-gallery-popup-photo-holder img {
    object-fit: cover;
    object-position:50% 0;
    width: 100%;
    height: 100%;
    }
    
}

/* people gallery popup grid */

.people-gallery-popup-grid {
display: grid;
gap: 30px;
grid-template-columns: 1fr;
max-height: 100%;
height: 100%;
}

@media (min-width: 768px) {
    .people-gallery-popup-grid {
    grid-template-columns: 1fr;
    }
}

@media (min-width: 1000px) {
    .people-gallery-popup-grid {
    grid-template-columns: 1fr 1fr;
    }
}


/* animation */

.people-gallery-popup .people-gallery-slide-in {
animation: slide-in 0.5s forwards;
z-index: 100;
}
.people-gallery-popup .people-gallery-slide-out {
animation: slide-out 0.5s forwards;
z-index: 80;
}
.people-gallery-popup .people-gallery-slide-in-left {
animation: slide-in-left 0.5s forwards;
z-index: 100;
}
.people-gallery-popup .people-gallery-slide-in-right {
animation: slide-in-right 0.5s forwards;
z-index: 100;
}
.people-gallery-popup .people-gallery-slide-out-left {
animation: slide-out-left 0.5s forwards;
z-index: 80;
}
.people-gallery-popup .people-gallery-slide-out-right {
animation: slide-out-right 0.5s forwards;
z-index: 80;
}

@keyframes slide-in-left {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}
@keyframes slide-in-right {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0%); }
}
@keyframes slide-out-right {
    0% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}
@keyframes slide-out-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
@keyframes slide-in {
    100% { transform: translateX(0%); }
}
@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}