/* CLC Événements — vue en cartes (grille), 2.10.0.
   ============================================================================
   Grille adaptative : autant de colonnes que la largeur en permet, chacune
   d'au moins --clc-gr-min. Pas de media query : la grille suit la largeur de
   son conteneur, donc aussi une colonne étroite d'une mise en page.

   Signature CLC : coin haut-gauche à 0 sur le visuel et la pastille d'état.
   Variables : --clc-text, --clc-accent, --clc-font (comme les autres blocs).

   Modes : clc-grille--carte / --sobre
           clc-grille-fmt-paysage / -carre / -portrait
           clc-gr-carte--complet / --ferme / --dernieres
*/

.clc-grille {
	font-family: var( --clc-font, inherit );
	color: var( --clc-text, #111 );
	container-type: inline-size;
}

.clc-grille-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, var( --clc-gr-min, 260px ) ), 1fr ) );
	gap: 24px;
}

.clc-gr-carte {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
	background: #fff;
}

.clc-grille--carte .clc-gr-carte {
	border: 1px solid color-mix( in srgb, currentColor 14%, transparent );
	border-radius: 0 16px 0 16px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
}

.clc-grille--sobre .clc-gr-carte {
	background: transparent;
}

/* ── Visuel ──────────────────────────────────────────────────────────── */

.clc-gr-visuel {
	position: relative;
	overflow: hidden;
	aspect-ratio: 210 / 297; /* défaut : affiche A4 (2.11.1) */
	background: color-mix( in srgb, currentColor 8%, transparent );
}

.clc-grille-fmt-paysage .clc-gr-visuel { aspect-ratio: 3 / 2; }
.clc-grille-fmt-carre .clc-gr-visuel { aspect-ratio: 1 / 1; }
.clc-grille-fmt-portrait .clc-gr-visuel { aspect-ratio: 210 / 297; } /* affiche A4 */

.clc-grille--sobre .clc-gr-visuel {
	border-radius: 0 16px 0 16px;
}

.clc-gr-visuel a {
	display: block;
	width: 100%;
	height: 100%;
}

.clc-gr-visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.clc-gr-novisuel {
	display: block;
	width: 100%;
	height: 100%;
}

/* Pastille d'état posée sur le visuel, en haut à gauche. */
.clc-gr-visuel .clc-ha-badge {
	position: absolute;
	top: 10px;
	left: 0;
	padding: 4px 12px 4px 10px;
	border-radius: 0 8px 8px 0;
	font-size: 13px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
}

/* Événement complet ou fermé : le visuel s'éteint légèrement. */
.clc-gr-carte--complet .clc-gr-visuel img,
.clc-gr-carte--ferme .clc-gr-visuel img {
	filter: grayscale( 0.6 );
	opacity: 0.85;
}

/* ── Corps ───────────────────────────────────────────────────────────── */

.clc-gr-corps {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 6px;
	padding: 14px 16px 16px;
}

.clc-grille--sobre .clc-gr-corps {
	padding: 12px 0 0;
}

.clc-gr-dates {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.clc-gr-titre {
	margin: 0;
	font-size: var( --clc-gr-title, 20px );
	line-height: 1.2;
	font-weight: 800;
}

.clc-gr-titre a {
	color: inherit;
	text-decoration: none;
}

.clc-gr-titre a:hover,
.clc-gr-titre a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.clc-gr-titre .clc-ha-badge {
	margin-left: 4px;
	position: relative;
	top: -2px;
}

.clc-gr-lieu {
	font-size: 14px;
	opacity: 0.8;
}

.clc-gr-extrait {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
}

/* ── Pied : tarif à gauche, boutons à droite, calés en bas de carte ──── */

.clc-gr-pied {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.clc-gr-prix {
	font-size: 15px;
	font-weight: 800;
}

.clc-gr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.clc-gr-btn {
	display: inline-block;
	border: 2px solid var( --clc-text, #111 );
	border-radius: 30px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	color: var( --clc-text, #111 );
	background: transparent;
}

.clc-gr-btn:visited {
	color: var( --clc-text, #111 );
}

.clc-gr-btn:hover,
.clc-gr-btn:focus-visible {
	background: var( --clc-accent, #f5d000 );
	color: var( --clc-text, #111 );
}

.clc-gr-btn--reserver {
	background: var( --clc-accent, #f5d000 );
}

.clc-gr-btn--reserver:hover,
.clc-gr-btn--reserver:focus-visible {
	background: var( --clc-text, #111 );
	color: #fff;
}

.clc-gr-agenda {
	padding-top: 20px;
}

.clc-grille-vide {
	font-style: italic;
}

/* Éditeur : les liens de l'aperçu ne doivent pas emmener ailleurs. */
.editor-styles-wrapper .clc-grille a {
	pointer-events: none;
}