/********************************************************/
/*
/*      Events calendar CSS
/*
/********************************************************/
.wp-block-cke-events-calendar:not(.acf-block-component) {
	position: relative;
	width: var(--wp--style--global--wide-size);
	max-width: var(--wp--style--global--wide-size) !important;
}

.wp-block-cke-events-calendar .acf-innerblocks-container {
	max-width: 70%;
	margin-block-end: var(--wp--preset--spacing--4);
}

.wp-block-cke-events-calendar .acf-innerblocks-container > * {
	margin-block: 0;
}

.wp-block-cke-events-calendar .acf-innerblocks-container > * + * {
	margin-block-start: 1em;
}

.wp-block-cke-events-calendar .formations-events-filters {
	display: flex;
	justify-content: space-between;
	column-gap: var(--wp--preset--spacing--1);
}

.wp-block-cke-events-calendar .formation-event-filter {
	display: flex;
	flex-direction: column;
	width: calc((100% - (var(--wp--preset--spacing--1) * 1)) / 2);
}

.wp-block-cke-events-calendar .formation-event-filter > p {
	margin-block-start: unset;
}

.wp-block-cke-events-calendar .formation-event-filter > div + div {
	margin-block-start: var(--wp--preset--spacing--0-75);
}

.wp-block-cke-events-calendar #formations-events-filter-form #reset-filters {
	width: max-content;
	max-width: 100%;
	margin-block-start: var(--wp--preset--spacing--1);
}

.wp-block-cke-events-calendar #formations-events-filter-form #reset-filters::before {
	mask: url(../../assets/images/refresh.svg) center center / 60% no-repeat, linear-gradient(#000 0 0);
	mask-composite: exclude;
}

.wp-block-cke-events-calendar #formations-events-items {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	border: 2px solid var(--wp--custom--default-color--text);
	border-radius: 2rem;
}

.wp-block-cke-events-calendar .htmx-request ~ #formations-events-items,
.wp-block-cke-events-calendar #formations-events-items:has(.no-content) {
	border-color: transparent !important;
}

.wp-block-cke-events-calendar #formations-events-filter-form ~ #formations-events-items {
	min-height: 40px;
	margin-block-start: var(--wp--preset--spacing--3);
}

.wp-block-cke-events-calendar .formation-event-item {
	display: grid;
	grid-template-columns: 12.5% 33% 12.5% 12.5% 12.5% 2.5rem;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	padding-inline: var(--wp--preset--spacing--4) var(--wp--preset--spacing--1-5);
}

.wp-block-cke-events-calendar .formation-event-item:not(:first-child) {
	padding-block-start: var(--wp--preset--spacing--1);
}

.wp-block-cke-events-calendar .formation-event-item:not(:last-child) {
	padding-block-end: var(--wp--preset--spacing--1);
	border-block-end: 2px solid var(--wp--custom--default-color--text);
}

.wp-block-cke-events-calendar .formation-event-item > * {
	justify-self: center;
	text-align: center;
	margin-block: unset;
}

.wp-block-cke-events-calendar .formation-event-item :is(.event-date, .event-title) {
	justify-self: unset;
	font-weight: 500;
}

.wp-block-cke-events-calendar .formation-event-item .event-title {
	padding-block-start: .2em;
	padding-inline: var(--wp--preset--spacing--1);
	border-inline: 2px solid var(--wp--custom--default-color--text);
}

.wp-block-cke-events-calendar .formation-event-item .event-link {
	grid-column: 6;
	width: 2.5rem;
	height: auto;
	aspect-ratio: 1;
	background-color: var(--wp--custom--default-color--accent);
	mask: url(../../assets/images/arrow.svg) center center / 50% no-repeat, linear-gradient(#000 0 0);
	mask-composite: exclude;
	border-radius: 50%;
	transition: background-color .3s;
}

.wp-block-cke-events-calendar .formation-event-item .event-link:hover {
	background-color: var(--wp--custom--default-color--focus);
}

.wp-block-cke-events-calendar #loading {
	display: none;
	position: absolute;
	bottom: 0;
	left: 50%;
	translate: -50%;
}

.wp-block-cke-events-calendar .htmx-request + #loading {
	display: block;
}

.wp-block-cke-events-calendar .no-content {
	grid-column: 1 / span 3;
	width: max-content;
	color: var(--wp--preset--color--white);
	margin-inline: auto;
}

.wp-block-cke-events-calendar:is(.has-off-black-background-color, .has-black-background-color) .see-all-events {
	margin-block-start: var(--wp--preset--spacing--2);
}

/* Dark bg style */
.wp-block-cke-events-calendar:is(.has-off-black-background-color, .has-black-background-color) .formation-event-filter select,
.wp-block-cke-events-calendar:is(.has-off-black-background-color, .has-black-background-color) .formation-event-filter input:is([type="radio"], [type="checkbox"]) + label::before,
.wp-block-cke-events-calendar:is(.has-off-black-background-color, .has-black-background-color) #formations-events-items,
.wp-block-cke-events-calendar:is(.has-off-black-background-color, .has-black-background-color) .formation-event-item:not(:last-child),
.wp-block-cke-events-calendar:is(.has-off-black-background-color, .has-black-background-color) .formation-event-item .event-title,
.wp-block-cke-events-calendar:is(.has-off-black-background-color, .has-black-background-color) .see-all-events .wp-block-button__link:not(:hover) {
	border-color: var(--wp--custom--default-color--bg);
}

.wp-block-cke-events-calendar:is(.has-off-black-background-color, .has-black-background-color) .formation-event-filter select,
.wp-block-cke-events-calendar:is(.has-off-black-background-color, .has-black-background-color) .formation-event-filter input:is([type="radio"], [type="checkbox"]) + label::before,
.wp-block-cke-events-calendar:is(.has-off-black-background-color, .has-black-background-color) .formation-event-item > *,
.wp-block-cke-events-calendar:is(.has-off-black-background-color, .has-black-background-color) .see-all-events .wp-block-button__link:not(:hover) {
	color: var(--wp--custom--default-color--bg);
}

.wp-block-cke-events-calendar:is(.has-off-black-background-color, .has-black-background-color) .formation-event-filter input:is([type="radio"], [type="checkbox"]):checked + label::after,	
.wp-block-cke-events-calendar:is(.has-off-black-background-color, .has-black-background-color) .see-all-events .wp-block-button__link:not(:hover)::before {
	background-color: var(--wp--custom--default-color--bg);
}

/* Backend style */
body.wp-admin .wp-block-cke-events-calendar:not(.acf-block-component) {
	width: 100%;
}

@media (max-width: 1400px) {
	.wp-block-cke-events-calendar #formations-events-items { padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--3); }
}

@media (max-width: 1200px) {
	.wp-block-cke-events-calendar .formation-event-item { padding-inline: var(--wp--preset--spacing--1-5); }
}

@media (max-width: 1000px) {
	.wp-block-cke-events-calendar .acf-innerblocks-container { max-width: 80%; }
	.wp-block-cke-events-calendar .formation-event-item { padding-inline: unset; }
}

@media (max-width: 900px) {
	.wp-block-cke-events-calendar .formations-events-filters { flex-wrap: wrap; row-gap: var(--wp--preset--spacing--1-5); }
	.wp-block-cke-events-calendar .formation-event-filter { width: 100%; }
	.wp-block-cke-events-calendar #formations-events-filter-form #reset-filters { margin-block-start: var(--wp--preset--spacing--1-5); }
	.wp-block-cke-events-calendar #formations-events-items { padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2); }
	.wp-block-cke-events-calendar .formation-event-item { grid-template-columns: 45.5% 12.5% 12.5% 12.5% 2.5rem; grid-template-rows: max-content max-content;
														  row-gap: 0; }
	.wp-block-cke-events-calendar .formation-event-item .event-date { grid-column: 1 / span 5; justify-self: start; font-size: var(--wp--preset--font-size--x-small);
																	  font-weight: 400; }
	.wp-block-cke-events-calendar .formation-event-item .event-title { text-align: start; padding-block-start: unset; padding-inline: unset; border-inline: unset; }
}

@media (max-width: 750px) {
	.wp-block-cke-events-calendar .acf-innerblocks-container { max-width: 90%; }
	.wp-block-cke-events-calendar .formation-event-item { grid-template-columns: max-content 33% 1fr 17.5% 17.5% 2.5rem; gap: var(--wp--preset--spacing--0-75); }
	.wp-block-cke-events-calendar .formation-event-item:not(:last-child) { padding-block-end: var(--wp--preset--spacing--1-5); }
	.wp-block-cke-events-calendar .formation-event-item:not(:first-child) { padding-block-start: var(--wp--preset--spacing--1-5); }
	.wp-block-cke-events-calendar .formation-event-item .event-date { grid-column: 1; }
	.wp-block-cke-events-calendar .formation-event-item .event-title { grid-column: 1 / span 3; }
	.wp-block-cke-events-calendar .formation-event-item .event-time { grid-column: 2 / span 2; grid-row: 1; justify-self: start;
																	  font-size: var(--wp--preset--font-size--x-small); font-weight: 400; }
	.wp-block-cke-events-calendar .formation-event-item .event-link { grid-column: 6; grid-row: 1 / span 2; }
}

@media (max-width: 600px) {
	.wp-block-cke-events-calendar #formations-events-items { padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--1-5); }
	.wp-block-cke-events-calendar .formation-event-item { grid-template-columns: max-content max-content 1fr 2.5rem; }
	.wp-block-cke-events-calendar .formation-event-item .event-title { grid-column: 1 / span 3; }
	.wp-block-cke-events-calendar .formation-event-item .event-time { grid-column: 2 / span 2; }
	.wp-block-cke-events-calendar .formation-event-item :is(.event-city, .event-available-tickets) { justify-self: start; }
	.wp-block-cke-events-calendar .formation-event-item .event-city { grid-column: 1; }
	.wp-block-cke-events-calendar .formation-event-item .event-available-tickets { grid-column: 2; }
	.wp-block-cke-events-calendar .formation-event-item .event-link { grid-column: 4; grid-row: 1 / span 3; }
}

@media (max-width: 400px) {
	.wp-block-cke-events-calendar .formation-event-item .event-title { grid-column: 1 / span 4; }
	.wp-block-cke-events-calendar .formation-event-item .event-link { grid-column: 4; grid-row: 3; }
}

@media (max-width: 320px) {
	.wp-block-cke-events-calendar .formation-event-item :is(.event-date, .event-time, .event-city, .event-available-tickets) { grid-column: 1 / span 2; }
	.wp-block-cke-events-calendar .formation-event-item .event-title { grid-row: 3; }
	.wp-block-cke-events-calendar .formation-event-item .event-time { grid-row: 2; }
	.wp-block-cke-events-calendar .formation-event-item .event-city { grid-row: 4; }
	.wp-block-cke-events-calendar .formation-event-item .event-available-tickets { grid-row: 5; }
	.wp-block-cke-events-calendar .formation-event-item .event-link { grid-row: 4 / span 2; }
}