/* ============================================================
 * Club Sport Core — Blocs Gutenberg (rendu frontend)
 *
 * Design par défaut minimal. Le thème peut tout surcharger via :
 *  - les classes BEM (cspt-activites-grid, cspt-evenement-card, etc.)
 *  - les variables CSS personnalisables (--cspt-*)
 * ============================================================ */

/* Variables surchargeables par le thème */
.cspt-activites-grid,
.cspt-evenements,
.cspt-horaires {
	--cspt-grid-gap: 1.5rem;
	--cspt-card-radius: 8px;
	--cspt-card-bg: #fff;
	--cspt-card-border: 1px solid #e5e5e5;
	--cspt-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
	--cspt-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
	--cspt-text-secondary: #666;
	--cspt-accent: #1f4d8f;
}

/* ============================================================
 * Bloc : activites-grid
 * ============================================================ */

.cspt-activites-grid {
	display: grid;
	grid-template-columns: repeat(var(--cspt-grid-columns, 4), 1fr);
	gap: var(--cspt-grid-gap);
	margin: 1.5rem 0;
}

@media (max-width: 1024px) {
	.cspt-activites-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 720px) {
	.cspt-activites-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.cspt-activites-grid {
		grid-template-columns: 1fr;
	}
}

.cspt-activites-grid--empty {
	text-align: center;
	padding: 2rem;
	color: var(--cspt-text-secondary);
}

.cspt-activite-card {
	background: var(--cspt-card-bg);
	border-radius: var(--cspt-card-radius);
	overflow: hidden;
	box-shadow: var(--cspt-card-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
}

.cspt-activite-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--cspt-card-shadow-hover);
}

.cspt-activite-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.cspt-activite-card__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: var(--cspt-card-accent, var(--cspt-accent));
	overflow: hidden;
}

.cspt-activite-card__media--placeholder {
	background-color: var(--cspt-card-accent, var(--cspt-accent));
}

.cspt-activite-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cspt-activite-card__body {
	padding: 1rem;
	border-top: 4px solid var(--cspt-card-accent, var(--cspt-accent));
}

.cspt-activite-card__title {
	font-size: 1.05rem;
	margin: 0 0 0.25rem;
	line-height: 1.3;
}

.cspt-activite-card__subtitle {
	margin: 0;
	font-size: 0.85rem;
	color: var(--cspt-text-secondary);
	line-height: 1.4;
}

/* ============================================================
 * Bloc : prochains-evenements
 * ============================================================ */

.cspt-evenements {
	margin: 1.5rem 0;
}

.cspt-evenements--empty {
	text-align: center;
	padding: 1.5rem;
	color: var(--cspt-text-secondary);
}

.cspt-evenements__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.cspt-evenement-card {
	background: var(--cspt-card-bg);
	border-radius: var(--cspt-card-radius);
	border: var(--cspt-card-border);
	overflow: hidden;
	transition: border-color 0.15s, transform 0.15s;
	display: flex;
	align-items: stretch;
}

.cspt-evenement-card:hover {
	border-color: var(--cspt-accent);
}

.cspt-evenement-card__link {
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem;
	text-decoration: none;
	color: inherit;
	align-items: center;
	flex: 1;
	min-width: 0;
}

/* Icône de téléchargement du formulaire d'inscription, à droite du contenu. */
.cspt-evenement-card__formulaire {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0 0.75rem;
	color: var(--cspt-accent);
	text-decoration: none;
	border-left: 1px solid var(--cspt-border, rgba(0, 0, 0, 0.08));
	transition: background-color 0.15s, color 0.15s;
}
.cspt-evenement-card__formulaire:hover,
.cspt-evenement-card__formulaire:focus {
	background-color: var(--cspt-bg-secondary);
}
.cspt-evenement-card__formulaire svg {
	width: 20px;
	height: 20px;
	display: block;
}

.cspt-evenement-card__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 52px;
	padding: 0.4rem 0.5rem;
	background: var(--cspt-accent);
	color: #fff;
	border-radius: calc(var(--cspt-card-radius) / 2);
	line-height: 1;
}

.cspt-evenement-card__day {
	font-size: 1.5rem;
	font-weight: 700;
}

.cspt-evenement-card__month {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 0.15rem;
}

.cspt-evenement-card__body {
	flex: 1;
	min-width: 0;
}

.cspt-evenement-card__title {
	font-size: 0.95rem;
	margin: 0 0 0.15rem;
	line-height: 1.3;
}

.cspt-evenement-card__badge {
	display: inline-block;
	margin-left: 0.25rem;
	color: var(--cspt-accent);
	font-size: 0.85em;
	cursor: help;
}

.cspt-evenement-card__meta {
	font-size: 0.8rem;
	color: var(--cspt-text-secondary);
	margin: 0;
}

.cspt-evenement-card__time {
	font-weight: 500;
}

.cspt-evenement-card__lieu-ville {
	color: #999;
	font-size: 0.95em;
}

/* Variante "cards" : layout vertical au lieu d'horizontal */
.cspt-evenements--cards .cspt-evenements__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}

.cspt-evenements--cards .cspt-evenement-card__link {
	flex-direction: column;
	align-items: stretch;
	padding: 1rem;
}

.cspt-evenements--cards .cspt-evenement-card__date {
	min-width: 0;
	flex-direction: row;
	gap: 0.5rem;
	padding: 0.4rem 0.75rem;
	align-self: flex-start;
	margin-bottom: 0.5rem;
}

.cspt-evenements--cards .cspt-evenement-card__day {
	font-size: 1.1rem;
}

.cspt-evenements--cards .cspt-evenement-card__month {
	margin-top: 0;
}

/* ============================================================
 * Bloc : horaires-activite
 * ============================================================ */

.cspt-horaires {
	margin: 1.5rem 0;
}

.cspt-horaires--empty {
	text-align: center;
	padding: 1rem;
	color: var(--cspt-text-secondary);
	font-size: 0.9rem;
}

/* Variante "grouped" : <dl> par jour */
.cspt-horaires__day-list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cspt-horaires__day-group {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 0.5rem 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid #f0f0f0;
}

.cspt-horaires__day-group:last-child {
	border-bottom: none;
}

.cspt-horaires__day {
	font-weight: 600;
	color: var(--cspt-accent);
	font-size: 0.9rem;
	margin: 0;
	grid-column: 1;
}

.cspt-horaires__creneau {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	grid-column: 2;
}

.cspt-horaires__day-group .cspt-horaires__creneau + .cspt-horaires__creneau {
	grid-column: 2;
}

.cspt-horaires__time {
	font-weight: 500;
	margin-right: 0.25rem;
}

.cspt-horaires__lieu {
	color: var(--cspt-text-secondary);
}

.cspt-horaires__public {
	display: inline-block;
	background: #f0f0f0;
	color: var(--cspt-text-secondary);
	font-size: 0.75rem;
	padding: 0.1em 0.5em;
	border-radius: 10px;
	margin-left: 0.25rem;
}

/* Variante "flat" : tableau */
.cspt-horaires__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.cspt-horaires__table th,
.cspt-horaires__table td {
	padding: 0.4rem 0.5rem;
	text-align: left;
	border-bottom: 1px solid #f0f0f0;
}

.cspt-horaires__table th {
	width: 90px;
	font-weight: 600;
	color: var(--cspt-accent);
}

/* ============================================================
 * Bloc : disciplines-grid (1.6.0)
 *
 * Très proche de activites-grid mais avec des cartes plus larges
 * (moins de colonnes par défaut, le contenu est plus consistant).
 * ============================================================ */

.cspt-disciplines-grid {
	display: grid;
	grid-template-columns: repeat(var(--cspt-grid-columns, 3), 1fr);
	gap: var(--cspt-grid-gap);
	margin: 1.5rem 0;
}

@media (max-width: 720px) {
	.cspt-disciplines-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.cspt-disciplines-grid {
		grid-template-columns: 1fr;
	}
}

.cspt-disciplines-grid--empty {
	text-align: center;
	padding: 2rem;
	color: var(--cspt-text-secondary);
}

.cspt-discipline-card {
	background: var(--cspt-card-bg);
	border-radius: var(--cspt-card-radius);
	overflow: hidden;
	box-shadow: var(--cspt-card-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cspt-discipline-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--cspt-card-shadow-hover);
}

.cspt-discipline-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.cspt-discipline-card__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--cspt-card-accent, var(--cspt-accent));
	overflow: hidden;
}

.cspt-discipline-card__media--placeholder {
	background-color: var(--cspt-card-accent, var(--cspt-accent));
}

.cspt-discipline-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cspt-discipline-card__body {
	padding: 1.25rem;
	border-top: 4px solid var(--cspt-card-accent, var(--cspt-accent));
}

.cspt-discipline-card__title {
	font-size: 1.15rem;
	margin: 0 0 0.4rem;
	line-height: 1.3;
}

.cspt-discipline-card__subtitle {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
	color: var(--cspt-text-secondary);
	line-height: 1.4;
}

.cspt-discipline-card__count {
	margin: 0;
	font-size: 0.8rem;
	color: var(--cspt-text-secondary);
	font-weight: 500;
}

/* ============================================================
 * Bloc : enseignants-grid (1.7.0)
 *
 * Grille de cartes "enseignant" : photo carrée centrée, nom, courte
 * description. Pas de page individuelle, donc carte non cliquable.
 * ============================================================ */

.cspt-enseignants-section {
	margin: 1.5rem 0;
}

.cspt-enseignants-section__title {
	font-size: 1.5rem;
	margin: 0 0 1rem;
	line-height: 1.3;
}

.cspt-enseignants-grid {
	display: grid;
	grid-template-columns: repeat(var(--cspt-grid-columns, 3), 1fr);
	gap: var(--cspt-grid-gap);
}

@media (max-width: 720px) {
	.cspt-enseignants-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.cspt-enseignants-grid {
		grid-template-columns: 1fr;
	}
}

.cspt-enseignants-grid--empty {
	text-align: center;
	padding: 2rem;
	color: var(--cspt-text-secondary);
}

.cspt-enseignant-card {
	background: var(--cspt-card-bg);
	border-radius: var(--cspt-card-radius);
	text-align: center;
	display: flex;
	flex-direction: column;
	padding: 1rem;
}

.cspt-enseignant-card__media {
	width: 100%;
	max-width: 180px;
	aspect-ratio: 1 / 1;
	margin: 0 auto 0.75rem;
	background-color: var(--cspt-bg-secondary, #f0f0f0);
	border-radius: var(--cspt-card-radius);
	overflow: hidden;
}

.cspt-enseignant-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cspt-enseignant-card__image--placeholder {
	background: linear-gradient(
		135deg,
		var(--cspt-bg-secondary, #e8e8e8) 0%,
		var(--cspt-bg-elevated, #f5f5f5) 100%
	);
}

.cspt-enseignant-card__body {
	padding: 0;
}

.cspt-enseignant-card__name {
	font-size: 1.1rem;
	margin: 0 0 0.4rem;
	line-height: 1.3;
}

.cspt-enseignant-card__description {
	margin: 0;
	font-size: 0.9rem;
	color: var(--cspt-text-secondary);
	line-height: 1.4;
}

/* ============================================================
 * Bloc : lieux-grid
 * ============================================================ */

.cspt-lieux-grid-block {
	margin: 1.5rem 0;
}

.cspt-lieux-grid-block__title {
	font-size: 1.5rem;
	margin: 0 0 1rem;
	color: var(--cspt-text-primary);
}

.cspt-lieux-grid-block__map {
	/* Le thème fournit les couleurs/bords via .cspt-lieux-map.
	 * Hauteur dédiée au contexte "bloc" (plus compacte qu'archive).
	 * La carte est affichée APRÈS la grille des villes : marge en haut pour
	 * la détacher visuellement, pas de marge en bas par défaut. */
	height: 360px;
	margin-top: 1.5rem;
	margin-bottom: 0;
}

.cspt-lieux-grid-block--empty {
	padding: 1.5rem;
	text-align: center;
	color: var(--cspt-text-secondary);
	background-color: var(--cspt-bg-secondary, transparent);
	border-radius: var(--cspt-card-radius);
}

/* Surcharge du grid auto-fill du thème quand le bloc impose un nombre
 * explicite de colonnes (mode "carte par lieu" - legacy). Le thème reste
 * valable sur l'archive lieux. La nouvelle grille par ville
 * (.cspt-villes-grid) utilise un layout vertical compact non paramétrable. */
.cspt-lieux-grid--cols-1 { grid-template-columns: 1fr; }
.cspt-lieux-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cspt-lieux-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cspt-lieux-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.cspt-lieux-grid--cols-3,
	.cspt-lieux-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
	.cspt-lieux-grid--cols-2,
	.cspt-lieux-grid--cols-3,
	.cspt-lieux-grid--cols-4 { grid-template-columns: 1fr; }
}

/* ============================================================
 * Bloc : instruction
 * ============================================================ */

.cspt-instruction {
	margin: 1.5rem 0;
}

.cspt-instruction__title {
	font-size: 1.5rem;
	margin: 0 0 0.75rem;
	color: var(--cspt-text-primary);
}

.cspt-instruction__content {
	line-height: 1.6;
}

.cspt-instruction--empty {
	padding: 1rem;
	background: var(--cspt-bg-secondary, #f0f0f0);
	color: var(--cspt-text-secondary);
	border-radius: var(--cspt-card-radius);
	text-align: center;
}

/* Alignement forcé via la sidebar du bloc.
 *
 * Le contenu vient de l'éditeur Gutenberg : chaque paragraphe peut porter
 * sa propre classe `has-text-align-{left,center,right}` ou un style inline,
 * qui sans !important gagneraient contre une simple règle sur le wrapper.
 * On force donc sur tous les descendants textuels usuels. */
.cspt-instruction--align-left,
.cspt-instruction--align-left :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li, blockquote, dl, dt, dd, address, figcaption, .cspt-instruction__title) {
	text-align: left !important;
}
.cspt-instruction--align-center,
.cspt-instruction--align-center :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li, blockquote, dl, dt, dd, address, figcaption, .cspt-instruction__title) {
	text-align: center !important;
}
.cspt-instruction--align-right,
.cspt-instruction--align-right :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li, blockquote, dl, dt, dd, address, figcaption, .cspt-instruction__title) {
	text-align: right !important;
}