/*
 * ATT Elementor Bridge — CSS componente Academy (M4).
 *
 * Interamente derivato dai token `--attelbrg-*` (assets/css/attelbrg-tokens.css):
 * nessun colore/spazio hardcoded fuori dai token (AC43). Baseline funzionale; la
 * fedeltà visuale completa, gli stati hover/focus e il contrasto WCAG sono rifiniti
 * in M6. Caricato per-widget via get_style_depends() (footprint zero).
 */

.attelbrg-academy-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--attelbrg-space-lg);
	font-family: var(--attelbrg-font-body);
	color: var(--attelbrg-color-text);
}

@media (max-width: 1024px) {
	.attelbrg-academy-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.attelbrg-academy-grid {
		grid-template-columns: 1fr;
	}
}

.attelbrg-academy__card {
	display: flex;
	flex-direction: column;
	gap: var(--attelbrg-space-sm);
	padding: var(--attelbrg-space-md);
	background: var(--attelbrg-color-surface);
	border: var(--attelbrg-border-width-hairline) solid var(--attelbrg-color-border);
	border-radius: var(--attelbrg-radius-md);
}

.attelbrg-academy__title {
	margin: 0;
	font-family: var(--attelbrg-font-heading);
	font-weight: var(--attelbrg-weight-heading);
	color: var(--attelbrg-color-text-strong);
}

.attelbrg-academy__title a {
	color: inherit;
	text-decoration: none;
}

.attelbrg-academy__subtitle {
	margin: 0;
	color: var(--attelbrg-color-text-muted);
}

.attelbrg-academy__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--attelbrg-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--attelbrg-color-text-muted);
}

.attelbrg-academy-calendar {
	display: flex;
	flex-direction: column;
	gap: var(--attelbrg-space-xl);
	font-family: var(--attelbrg-font-body);
}

.attelbrg-academy-calendar__month {
	display: flex;
	flex-direction: column;
	gap: var(--attelbrg-space-md);
}

.attelbrg-academy-calendar__month-label {
	margin: 0;
	font-family: var(--attelbrg-font-heading);
	font-weight: var(--attelbrg-weight-heading);
	color: var(--attelbrg-color-text-strong);
}

.attelbrg-academy-trainers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 68px;
	row-gap: 40px;
	font-family: var(--attelbrg-font-body);
	color: var(--attelbrg-color-text);
}

@media (max-width: 1024px) {
	.attelbrg-academy-trainers {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.attelbrg-academy-trainers {
		grid-template-columns: 1fr;
	}
}

/* Modalità carosello: la disposizione (slidesPerView/righe) è gestita da Swiper,
   il container non impone la griglia CSS. */
.attelbrg-academy-trainers--carousel {
	display: block;
	position: relative;
}

.attelbrg-academy-trainers--carousel .swiper-slide {
	height: auto;
}

/* Row-gap del carosello a 40px. Swiper Grid usa `spaceBetween` (68px = col-gap) anche fra le righe,
   applicando un margin-top inline alle sole slide di riga >0: lo si sovrascrive per differenziare i
   due gap (col 68 / row 40). Il selettore `[style*="margin-top"]` colpisce solo quelle slide. */
.attelbrg-academy-trainers--carousel .swiper-slide[style*="margin-top"] {
	margin-top: 40px !important;
}

/* Card senza sfondo né bordo esterno (mockup): sola colonna immagine + testo centrato. */
.attelbrg-trainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	text-align: center;
}

/* Contenitore immagine: ring a gradiente conico (::before) + angolo-triangolo teal (::after),
   entrambi ritagliati dai 8px di raggio. La sfumatura verde precedente è stata rimossa. */
.attelbrg-trainer__media {
	position: relative;
	width: 100%;
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
}

.attelbrg-trainer__media::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	z-index: 1;
	pointer-events: none;
	background: conic-gradient(
		from 270deg,
		var(--e-global-color-ec47253, #00c287) 0deg,
		var(--e-global-color-a5dcddd, #1d86da) 140deg,
		var(--e-global-color-799abcb, #9530c0) 280deg,
		var(--e-global-color-ec47253, #00c287) 360deg
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.attelbrg-trainer__media::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: var(--e-global-color-ec47253, #00c287);
	border-bottom: 24px solid transparent;
	border-left-width: 24px;
	border-top: 0;
	border-right: 0;
	z-index: 1;
}

.attelbrg-trainer__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Azzera i margini di tutti i <p> nelle card: il tema/Elementor Kit inietta un margin-block ai
   paragrafi con specificità che batte le regole per-campo qui sotto; la spaziatura verticale è
   affidata al gap del flex della card. !important necessario per vincere l'override del tema. */
.attelbrg-trainer p {
	margin: 0 !important;
}

.attelbrg-trainer__name {
	margin: 0;
	font-family: "Lato", var(--attelbrg-font-heading), sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--attelbrg-color-accent);
	min-height: 2em;
}

.attelbrg-trainer__country {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-family: "Lato", var(--attelbrg-font-body), sans-serif;
	font-size: 16px;
	color: var(--attelbrg-color-text);
}

/* I wrapper icona avvolgono un SVG 16px (fill giallo baked-in): allineati verticalmente. */
.attelbrg-trainer__pin,
.attelbrg-trainer__langs-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.attelbrg-trainer__pin svg,
.attelbrg-trainer__langs-icon svg {
	display: block;
}

.attelbrg-trainer__langs {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin: 0;
	font-size: 1.1em;
	line-height: 1;
}

.attelbrg-trainer__flag {
	line-height: 1;
}

.attelbrg-trainer__link {
	color: var(--attelbrg-color-accent);
	font-weight: var(--attelbrg-weight-body-bold);
	text-decoration: none;
}

/* Dots di paginazione del carosello: bullet attivo giallo, allungato (pill). Flusso statico sotto la
   griglia con 80px di distanza dall'ultima riga. Selettore compound `.__dots.swiper-pagination`
   (specificità 0,2,0) per battere `.swiper-pagination{position:absolute}` di Swiper: senza `static`
   il `margin-top` è inerte (elemento absolute ancorato a `bottom`, dots sovrapposti alle card). */
.attelbrg-academy-trainers__dots.swiper-pagination {
	position: static;
	display: flex;
	justify-content: center;
	gap: var(--attelbrg-space-sm);
	margin-top: 80px;
}

.attelbrg-academy-trainers__dots .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--attelbrg-color-surface-raised);
	opacity: 1;
	transition: width 0.2s ease, background-color 0.2s ease;
}

.attelbrg-academy-trainers__dots .swiper-pagination-bullet-active {
	width: 28px;
	background: var(--attelbrg-color-accent);
}

.attelbrg-academy-notice {
	padding: var(--attelbrg-space-sm) var(--attelbrg-space-md);
	background: var(--attelbrg-color-surface);
	border: var(--attelbrg-border-width-hairline) solid var(--attelbrg-color-border);
	border-radius: var(--attelbrg-radius-sm);
	color: var(--attelbrg-color-text-muted);
	font-family: var(--attelbrg-font-body);
}