/**
 * ChoirSuite — Styles du calendrier d'événements (concerts / répétitions).
 * Styles minimalistes inspirés d'une liste d'événements classique,
 * pensés pour hériter du thème Divi 5. Toutes les classes sont
 * préfixées .choirsuite-calendar-*.
 */

.choirsuite-calendar {
	box-sizing: border-box;
	width: 100%;
}

.choirsuite-calendar * {
	box-sizing: border-box;
}

.choirsuite-calendar-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.choirsuite-calendar-item {
	display: grid;
	grid-template-columns: 80px 1fr 350px;
	gap: 1.5em;
	align-items: start;
	padding: 1.75em 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.choirsuite-calendar-item:first-child {
	border-top: none;
	padding-top: 0;
}

.choirsuite-calendar-daybadge {
	border-left: 3px solid #1c8577;
	padding-left: 1em;
}

.choirsuite-calendar-dayname {
	display: block;
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.05em;
	color: rgba(0, 0, 0, 0.5);
}

.choirsuite-calendar-daynumber {
	display: block;
	font-size: 2.2em;
	font-weight: 700;
	line-height: 1.1;
}

.choirsuite-calendar-monthname {
	display: block;
	text-transform: capitalize;
	font-size: 0.8em;
	letter-spacing: 0.05em;
	color: rgba(0, 0, 0, 0.5);
}

.choirsuite-calendar-datetime {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding-bottom: 0.6em;
	margin-bottom: 0.85em;
	font-size: 20px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.6);
}

.choirsuite-calendar-price {
	margin: 0 0 0.5em;
}

.choirsuite-calendar-price strong {
	color: #1c8577;
}

.choirsuite-calendar-title {
	margin: 0 0 0.4em;
	font-size: 1.3em;
	line-height: 1.3;
}

.choirsuite-calendar-title a {
	/* Couleur fixe plutôt qu'héritée : la couleur de texte ambiante diffère
	   d'une page à l'autre (Agenda vs page Concerts), ce qui donnait un
	   titre vert sur l'une et noir sur l'autre alors qu'il doit être
	   cohérent partout où ce même template de carte est utilisé. */
	color: #1c8577 !important;
	text-decoration: none;
}

.choirsuite-calendar-title a:hover {
	text-decoration: underline;
}

.choirsuite-calendar-location {
	margin: 0 0 0.4em;
	font-weight: 600;
}

.choirsuite-calendar-excerpt {
	margin: 0;
	color: rgba(0, 0, 0, 0.6);
}

.choirsuite-calendar-media {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.choirsuite-calendar-image {
	width: 100%;
	height: 250px;
	object-fit: cover;
	border-radius: 4px;
}

.choirsuite-calendar-cta {
	display: block;
	text-align: center;
	background: linear-gradient(135deg, #3d5551 0%, #114f47 50%, #041a16 100%) !important;
	border: none !important;
	color: #f5f3ef !important;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
	padding: 0.65em;
	border-radius: 4px;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.85em;
	letter-spacing: 0.03em;
	transition: background 0.2s ease;
}

.choirsuite-calendar-cta:hover {
	background: linear-gradient(135deg, #4f6965 0%, #17665c 50%, #0a2a24 100%) !important;
	color: #f5f3ef !important;
}

.choirsuite-calendar-empty {
	padding: 1em;
	/* Contre une règle du thème (p:not(.has-background):last-of-type)
	   qui force padding-bottom à 0 sur ce <p>, resserrant le pointillé
	   côté bas — !important nécessaire pour l'emporter. */
	padding-bottom: 1em !important;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	text-align: center;
}

@media (max-width: 640px) {
	.choirsuite-calendar-item {
		grid-template-columns: 1fr;
	}
}