/********************************************************/
/*
/*      Team members CSS
/*
/********************************************************/
.wp-block-cke-team-members,
:is(.edit-post-visual-editor, .editor-styles-wrapper) .is-root-container > .wp-block-cke-team-members {
	width: 100% !important;
	max-width: var(--wp--style--global--wide-size) !important;
}

.wp-block-cke-team-members,
.wp-block-cke-team-members > .team-members {
	display: grid;
}

.wp-block-cke-team-members > .team-member-full-cards {
	display: contents;
}

.wp-block-cke-team-members {
	grid-template-columns: 57.5% 40%;
	grid-template-rows: max-content minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--2-5);
	row-gap: unset;
}

.wp-block-cke-team-members > :is(.team-members, .acf-innerblocks-container) {
	grid-column: 1;
}

.wp-block-cke-team-members > .acf-innerblocks-container {
	grid-row: 1;
	max-width: calc(100% * (2/3));
	height: max-content;
}

.wp-block-cke-team-members > .team-members {
	grid-row: 2;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: max-content;
	align-items: start;
	column-gap: var(--wp--preset--spacing--2);
	row-gap: var(--wp--preset--spacing--2-5);
	height: max-content;
	margin-block-start: var(--wp--preset--spacing--2-5);
}

.wp-block-cke-team-members .team-member-full-card {
	grid-row: 1 / span 2;
	grid-column: 2;
}

/* Text spacing */
.wp-block-cke-team-members :is(.acf-innerblocks-container, .team-member-card, .team-member-details, .team-member-description) > * {
	margin-block: unset;
}

.wp-block-cke-team-members :is(.acf-innerblocks-container, .team-member-card, .team-member-details, .team-member-description) > :not(.close-btn) + * {
	margin-block-start: 1em;
}

.wp-block-cke-team-members .team-member-card > .team-member-email {
	margin-block-start: unset;
}

.wp-block-cke-team-members .team-member-card > :not(.team-member-name) {
	max-width: calc(100% - 50px);
	overflow-wrap: break-word;
}

.wp-block-cke-team-members .team-member-card > .team-member-phone {
	margin-block-start: var(--wp--preset--spacing--1-5);
}

.wp-block-cke-team-members .team-member-card > .team-member-title {
	margin-block-start: var(--wp--preset--spacing--2);
}

/* Cards */
.wp-block-cke-team-members :is(.team-member-card, .team-member-full-card, .team-member-picture, .team-member-details) {
	width: 100%;
	border-radius: 40px;
	box-sizing: border-box;
	overflow: clip;
}

.wp-block-cke-team-members :is(.team-member-card, .team-member-details) {
	display: flex;
	background-color: var(--wp--custom--color--default--text);
}

.wp-block-cke-team-members :is(.team-member-card, .team-member-details) * {
	color: var(--wp--custom--color--default--bg);
	transition: color .3s;
}

.wp-block-cke-team-members .team-member-card {
	flex-direction: column;
	position: relative;
	justify-content: end;
	height: auto;
	aspect-ratio: 490/333;
	padding: var(--wp--preset--spacing--1-5);
	cursor: pointer;
	transform: translateY(0px) rotate(0deg);
	transition: background-color .3s, transform .3s;
}

.wp-block-cke-team-members .team-member-card:is(:hover, :focus, .active) {
	background-color: var(--wp--custom--color--default--accent);
	transform: translateY(-15px) rotate(-3deg);
}

.wp-block-cke-team-members .team-member-card:is(:hover, :focus, .active) * {
	color: var(--wp--custom--color--default--text);
}

/* Full cards */
.wp-block-cke-team-members .team-member-full-card {
	display: grid !important;
	grid-template-columns: 100%;
	grid-template-rows: 0fr;
	position: relative;
	height: 0px;
	opacity: 0;
	pointer-events: none;
	transition: grid-template-rows .3s, height .3s .6s, opacity .3s .6s;
}

.wp-block-cke-team-members .team-member-full-card.active {
	grid-template-rows: 1fr;
	height: 100%;
	opacity: 1;
	pointer-events: all;
	transition: height .3s, opacity .3s;
}

.wp-block-cke-team-members .team-member-full-card > .close-overlay {
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(var(--wp--custom--color--rgb-values--elephant-blue), .95);
	cursor: pointer;
}

.wp-block-cke-team-members .team-member-full-card-inner {
	grid-row: 1;
	grid-column: 1;
}

.wp-block-cke-team-members .team-member-full-card-inner > .team-member-picture {
	position: relative;
	height: auto;
	aspect-ratio: 72/65;
	border: 12px solid var(--wp--preset--color--white);
	border-radius: 40px;
	box-sizing: border-box;
	overflow: clip;
	z-index: 1;
}

.wp-block-cke-team-members .team-member-full-card-inner > .team-member-picture img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details {
	flex-wrap: wrap;
	padding-block: var(--wp--preset--spacing--4) var(--wp--preset--spacing--2);
	padding-inline: var(--wp--preset--spacing--2-5) var(--wp--preset--spacing--4-5);
	opacity: 0;
	translate: 0% -100%;
	transition: translate .6s, opacity .1s .6s;
}

.wp-block-cke-team-members .team-member-full-card.active > .team-member-full-card-inner > .team-member-details {
	opacity: 1;
	translate: 0% calc(var(--wp--preset--spacing--5) * -1);
	transition: translate .6s .3s, opacity .1s;
}

.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > :not(.team-member-email, .team-member-phone) {
	width: 100%;
}

.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .close-btn {
}

.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .team-member-phone {
	margin-inline: auto var(--wp--preset--spacing--3-5);
}

.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details a:is(:hover, :focus) {
	color: var(--wp--custom--color--default--focus);
}

/* Buttons */
.wp-block-cke-team-members .team-member-card {
	--btn-svg: url(../../assets/images/arrow.svg);
	--btn-bg-color: 216, 216, 216;
	--btn-bg-color-active: var(--wp--custom--color--rgb-values--elephant-blue);
	--mask: url(../../assets/images/arrow-mask.svg);
}

.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .close-btn {
	--btn-svg: url(../../assets/images/x.svg);	
	--btn-bg-color: 216, 216, 216;
	--btn-bg-color-active: var(--wp--custom--color--rgb-values--astral-blue);
	--mask: url(../../assets/images/x-mask.svg);
	
	display: grid;
	position: absolute;
	/* top: var(--wp--preset--spacing--4); */
	top: var(--wp--preset--spacing--6);
	right: var(--wp--preset--spacing--4-5);
	width: 42px;
	height: 42px;
	cursor: pointer;
}

.wp-block-cke-team-members .team-member-card::before,
.wp-block-cke-team-members .team-member-card::after,
.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .close-btn::before,
.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .close-btn::after {
	content: '';
	display: inline-block;
	width: 42px;
	height: 42px;
	aspect-ratio: 1;
	border-radius: 50%;
	box-sizing: border-box;
	transition: background .3s, border .3s, opacity .3s !important;
}

.wp-block-cke-team-members .team-member-card::before,
.wp-block-cke-team-members .team-member-card::after {
	position: absolute;
	bottom: var(--wp--preset--spacing--1);
	right: var(--wp--preset--spacing--1);	
}

.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .close-btn::before,
.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .close-btn::after {
	grid-row: 1;
	grid-column: 1;
}

.wp-block-cke-team-members .team-member-card::before,
.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .close-btn::before {
	background: var(--btn-svg) no-repeat center / 18px;
	opacity: 1;
}

.wp-block-cke-team-members .team-member-card::after,
.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .close-btn::after {
	background: rgb(var(--btn-bg-color));
	border: 2px solid rgb(var(--btn-bg-color));
	mask-image: var(--mask);
	mask-position: center;
	mask-size: 42px;
	mask-repeat: no-repeat;
}

.wp-block-cke-team-members .team-member-card.active::after {
	--mask: url(../../assets/images/x-mask.svg);
}

.wp-block-cke-team-members .team-member-card:is(:hover, :focus, .active)::before,
.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .close-btn:is(:hover, :focus)::before {
	opacity: 0;
}

.wp-block-cke-team-members .team-member-card:is(:hover, :focus, .active)::after,
.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .close-btn:is(:hover, :focus)::after {
	background: rgb(var(--btn-bg-color-active));
	border: 2px solid rgb(var(--btn-bg-color-active));
}

/******************************/
/* Responsive
/******************************/
@media (width <= 1600px) {
	.wp-block-cke-team-members {
		grid-template-columns: 62.5% 35%;
		column-gap: var(--wp--preset--spacing--1-5);
	}
	
	.wp-block-cke-team-members > .team-members {
		column-gap: var(--wp--preset--spacing--1-5);
		row-gap: var(--wp--preset--spacing--2);
	}
}

@media (width <= 1300px) {
	.wp-block-cke-team-members {
		grid-template-columns: 100%;
	}
	
	.wp-block-cke-team-members > .acf-innerblocks-container {
		max-width: 90%;
	}
	
	.wp-block-cke-team-members .team-member-full-card {
		grid-row: unset;
		grid-column: unset;
		position: fixed;
		width: var(--wp--custom--viewport-width);
		height: 100svh;
		border-radius: unset;
		transition: grid-template-rows .3s, height .3s, opacity .3s;
		z-index: 1003; /* High z-index to be above the cookie settings floating button and header */
	}
	
	.wp-block-cke-team-members .team-member-full-card,
	.wp-block-cke-team-members .team-member-full-card > .close-overlay {
		top: 0;
		left: 0;
	}
	
	.wp-block-cke-team-members .team-member-full-card > .close-overlay,
	.wp-block-cke-team-members .team-member-full-card-inner {
		position: absolute;
	}
	
	.wp-block-cke-team-members .team-member-full-card > .close-overlay {
		display: block;
	}
	
	.wp-block-cke-team-members .team-member-full-card-inner {
		display: flex;
		position: absolute;
		width: 95%;
		height: 95%;
		top: 2.5%;
		left: 2.5%;
	}
	
	.wp-block-cke-team-members .team-member-full-card-inner > .team-member-picture {
		width: 40%;
		min-width: 40%;
		max-width: 40%;
		aspect-ratio: unset;
	}
	
	.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details,
	.wp-block-cke-team-members .team-member-full-card.active > .team-member-full-card-inner > .team-member-details {
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: start;
		width: calc(60% + var(--wp--preset--spacing--3));
		min-width: calc(60% + var(--wp--preset--spacing--3));
		max-width: calc(60% + var(--wp--preset--spacing--3));
		padding-block: var(--wp--preset--spacing--3);
		padding-inline: var(--wp--preset--spacing--6) var(--wp--preset--spacing--3);
		border-radius: 0 40px 40px 0;
		translate: calc(var(--wp--preset--spacing--3) * -1) 0;
		transition: translate .6s, opacity .1s;
	}
	
	.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > * {
		height: max-content;
	}
	
	.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .close-btn {
		top: var(--wp--preset--spacing--3);
		right: var(--wp--preset--spacing--3);
	}
	
	.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .team-member-description {
		max-height: 80%;
		padding-inline-end: var(--wp--preset--spacing--1-5);
		margin-block-end: var(--wp--preset--spacing--1);
		overflow-y: auto;
	}
	
	.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .team-member-email {
		margin-block-start: auto;
	}
}

@media (width <= 1000px) {
	.wp-block-cke-team-members .team-member-full-card-inner {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	
	.wp-block-cke-team-members .team-member-full-card-inner > .team-member-picture {
		border-inline-start: unset;
		border-radius: 0 40px 40px 0;
	}
	
	.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details,
	.wp-block-cke-team-members .team-member-full-card.active > .team-member-full-card-inner > .team-member-details {
		border-radius: unset !important;
	}
}

@media (width <= 800px) {
	.wp-block-cke-team-members > .team-members {
		display: flex;
		flex-direction: column;
	}
	
	.wp-block-cke-team-members .team-member-card {
		justify-content: center;
		aspect-ratio: unset;
		padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--2-5);
	}
	
	.wp-block-cke-team-members .team-member-card:is(:hover, :focus, .active) {
		transform: translateY(-10px) rotate(-2deg);
	}
	
	.wp-block-cke-team-members .team-member-card::before,
	.wp-block-cke-team-members .team-member-card::after {
		right: var(--wp--preset--spacing--1-5);
	}
}

@media (width <= 700px) {
	.wp-block-cke-team-members .team-member-full-card-inner {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: 40% 60%;
	}
	
	.wp-block-cke-team-members .team-member-full-card > .close-overlay {
		background-color: rgba(var(--wp--custom--color--rgb-values--elephant-blue), 1);
	}
	
	.wp-block-cke-team-members .team-member-full-card-inner > .team-member-picture,
	.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details,
	.wp-block-cke-team-members .team-member-full-card.active > .team-member-full-card-inner > .team-member-details {
		grid-column: 1;
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}
	
	.wp-block-cke-team-members .team-member-full-card-inner > .team-member-picture {
		grid-row: 1;
		border-radius: 0 0 40px 40px;
		border-inline-start: 12px solid var(--wp--preset--color--white);
		border-block-start: unset;
	}
	
	.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details,
	.wp-block-cke-team-members .team-member-full-card.active > .team-member-full-card-inner > .team-member-details {
		grid-row: 2;
		position: relative;
		padding: var(--wp--preset--spacing--2);
		translate: unset;
	}
	
	.wp-block-cke-team-members .team-member-full-card-inner > .team-member-details > .close-btn {
		top: var(--wp--preset--spacing--1-5);
		right: var(--wp--preset--spacing--1-5);
	}
}

@media (width <= 500px) {
	.wp-block-cke-team-members .team-member-full-card-inner {
		grid-template-rows: 30% 70%;
	}
}