/* -------------------------------- 
----
---- EQUIPO
----
-------------------------------- */
 

.grid-team {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--grid), 100%), 1fr));
	gap:var(--gap);
} 

.card-team {
cursor: pointer;
 }

.team-modal-name {
	--space: var(--wp--preset--spacing--s);
    display: flex;
    align-items: end;
    justify-content: space-between;
    border-bottom: 1px solid var(--wp--preset--color--medium);
    margin-bottom: var(--space);
    padding-bottom: var(--space);
}

.team-modal-name svg {
	display:block;
	
}

.team-modal-name a       { color:var(--wp--preset--color--contrast); }
.team-modal-name a:hover { opacity:.5 }

.card-team-img {
	height: var(--cardHeight);
	background-color: var(--wp--preset--color--lightgrey);
	border-radius: var(--cardRadius); 
	overflow: clip;
	transition: all 350ms ease;

}
 
.card-team-img img {
	display: block;
	object-fit: cover;
	object-position: top center;
	height: 100%;
	width: 100%;
	border-radius: var(--cardRadius); 
	border:1px solid var(--wp--preset--color--lightgrey);
 
	z-index: 30;
}
 
.card-team:hover .card-team-img  {
 box-shadow: var(--shadow-5);
}



 
.wp-block-cover:has(.section-team) {
	overflow: unset;
}

.section-team {
	--grid:220px;
	--gap:var(--wp--preset--spacing--m);
	--cardHeight: 400px;
	--modalW:60vw;
	--modalH:100%;
	--modalInset:0 0 0 auto;
	--imgW:calc(100% - var(--modalW));
	--imgH:100%;
	--imgInset:0 auto 0 0;
	--modalPadd:var(--wp--preset--spacing--xl);
	max-width: 100%;
}

 .team-modal {
	position: fixed;
	height: var(--modalH);
	inset:var(--modalInset);
	width: var(--modalW);
	transform: translateX(100%);
	z-index: 31;
 	padding:  var(--modalPadd);

	background-color: var(--wp--preset--color--lightgrey);
 	transition: all 850ms;
}
 

.team-modal.openmodal {
	transform: translateX(0);
	overflow-y: auto;
}

 
.card-team.openmodal img {
	position: fixed;
	inset: var(--imgInset);
	height: var(--imgH);
	width: var(--imgW);
	border-radius:0px; 
	border:none;
	z-index: 30;
}

.close-modal {
	position: absolute;
	inset:0 0 auto auto;
	padding: var(--wp--preset--spacing--xs);
}

@media only screen and (max-width:1024px) {
	.section-team {
	    --modalPadd:var(--wp--preset--spacing--l);
	}
}

@media only screen and (max-width:620px) {
	.section-team {
	    --grid: 150px;
	    --gap: var(--wp--preset--spacing--s);
	    --cardHeight: 240px;
	    --modalW: 100%;
	    --modalH: 60vh;
	    --modalInset:auto 0 0 0;
	    --imgW:100%;
		--imgH:calc(100vh - var(--modalH));
		--imgInset:0 auto 0 0;
	    --modalPadd:var(--wp--preset--spacing--xl) var(--wp--preset--spacing--m);
	}
 
}