:root{--p-border:#c1b7a9;--p-teal:#2f4f50;--p-meta:#627b7b;--p-popup:#607b7a;--p-text:#43392F;}

.tandco-personale{margin:40px 0;font-family:inherit;}
.personale-filters{margin-bottom:30px;}
.personale-filter-group{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;justify-content:center;}

.personale-filter-group .filter-btn{
border:1px solid var(--p-border);
background:transparent;
border-radius:999px;
min-width:200px;
max-width:100%;
padding-left:30px!important;
padding-right:30px!important;
font-size:15px!important;
font-weight:600!important;
height:50px!important;
line-height:45px!important;
cursor:pointer;
color:var(--p-text)!important;
-webkit-text-fill-color:var(--p-text)!important;
appearance:none;
-webkit-appearance:none;
transition:background .18s ease,color .18s ease,border-color .18s ease,transform .08s ease,box-shadow .08s ease;
}

.personale-filter-group .filter-btn:hover{
background:rgba(47,79,80,.08);
border-color:var(--p-teal);
color:var(--p-teal)!important;
-webkit-text-fill-color:var(--p-teal)!important;
transform:translateY(-1px);
}

.personale-filter-group .filter-btn.is-active,
.personale-filter-group .filter-btn.is-active:hover{
background:var(--p-teal);
border-color:var(--p-teal);
color:#fff!important;
-webkit-text-fill-color:#fff!important;
transform:none;
}

.personale-filter-group .filter-btn:active{
transform:scale(.94);
box-shadow:0 0 0 2px rgba(47,79,80,.15);
}

.personale-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:0;
}

.personale-card{
display:flex;
flex-direction:column;
text-decoration:none;
color:inherit;
cursor:pointer;
opacity:1;
transform:scale(1);
}

.personale-card.is-hidden{display:none!important;}

@keyframes personaleCardPop{
0%{opacity:0;transform:scale(.95);}
100%{opacity:1;transform:scale(1);}
}

.tandco-personale.animating .personale-card:not(.is-hidden){
animation:personaleCardPop .35s ease;
}

.personale-card-image{
position:relative;
aspect-ratio:4/5;
}

.personale-card-image-before,
.personale-card-image-after{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
filter:grayscale(100%);
transition:opacity .22s ease;
}

.personale-card-image-before{opacity:1;}
.personale-card-image-after{opacity:0;}

.personale-card.has-hover-image:hover .personale-card-image-after{opacity:1;}
.personale-card.has-hover-image:hover .personale-card-image-before{opacity:0;}

.personale-card-meta{
background:var(--p-meta);
color:#fff;
padding:10px 14px 12px;
}

.personale-card-name{font-size:16px;font-weight:600;}
.personale-card-role{font-size:13px;opacity:.9;margin-top:3px;}

.personale-fb-full .fancybox__content{
padding:0;
margin:0;
background:transparent;
width:100vw;
max-width:100vw;
height:100vh;
max-height:100vh;
}

.personale-popup{
width:100vw;
height:100vh;
max-width:none;
max-height:none;
position:relative;
z-index:1;
}

.personale-popup-inner{
width:100%;
height:100%;
display:flex;
background:var(--p-popup);
color:#fff;
max-width:1360px;
margin:0 auto;
}

.personale-popup-left,
.personale-popup-right{
flex:1 1 0;
min-width:0;
}

.personale-popup-left{
box-sizing:border-box;
overflow-y:auto;
padding:100px;
}

.personale-popup-right{background:#000;}

.personale-popup-photo{
width:100%;
height:100%;
background-size:cover;
background-position:center;
filter:grayscale(100%);
border-left:10px solid #fff;
}

.personale-popup-role{font-size:20px;margin-bottom:10px;}
.personale-popup-name{font-size:52px;margin:0 0 16px;}
.personale-popup-content h2{font-size:20px;margin-top:0;margin-bottom:12px;}
.personale-popup-content p{font-size:15px;line-height:1.6;margin-bottom:10px;}

/* -----------------------
   MOBIL
----------------------- */

@media (max-width:900px){

.personale-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0;
}

.personale-card{
display:flex;
flex-direction:column;
height:100%;
}

.personale-card-meta{
background:#2f4f50!important;
color:#fff;
display:flex;
flex-direction:column;
justify-content:center;
min-height:72px;
padding:12px;
}

.personale-card-name{
font-size:15px;
line-height:1.2;
margin:0;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.personale-card-role{
font-size:13px;
margin-top:4px;
}

.personale-fb-full .fancybox__content,
.personale-fb-full .fancybox__slide{
padding:0!important;
}

.personale-popup{
height:100vh;
}

.personale-popup-inner{
flex-direction:column;
max-width:100%;
height:100%;
justify-content:flex-start;
}

.personale-popup-right{
order:-1;
flex:0 0 auto;
width:100%;
height:auto;
min-height:0;
margin:24px 0 12px;
padding:0;
background:transparent;
display:flex;
justify-content:center;
align-items:center;
}

.personale-popup-photo{
width:150px;
height:150px;
border-radius:50%;
background-size:cover;
background-position:center;
filter:grayscale(100%);
border-left:0;
}

.personale-popup-left{
flex:1 1 auto;
width:100%;
padding:0 18px 24px;
margin:0;
overflow-y:auto;
text-align:center;
}

.personale-popup-role{
margin-top:6px;
font-size:13px;
}

.personale-popup-name{
font-size:26px;
margin:10px 0 14px;
}

.personale-popup-content h3 { font-size: 18px !important; }

.personale-popup-content p{
font-size:14px;
line-height:1.6;
margin-bottom:12px;
}

}

/* -----------------------
   FANCYBOX FIX
----------------------- */

.fancybox__button--close{z-index:1000000!important;pointer-events:auto!important; top: 50px; }
.personale-popup{pointer-events:auto;  }