/* ============================================================
   module_calendrier.css
   Layout infocoll — mod_dpcalendar_upcoming
   Réunions d'information Oxalis : grille de 4 cards de dates
   ============================================================ */

/* ── Grille des cards ──────────────────────────────────────── */
.mod-dpcalendar-upcoming {
	margin-block: var(--space-xl);
}

.mod-dpcalendar-upcoming-infocoll__events {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	max-width: 932px;
	margin-inline: auto;
}

/* ── Card individuelle ─────────────────────────────────────── */

.infocoll-card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	/*padding-block-start: 44px; /* laisse place à l'icône absolue (~19px + 19px + marge) */
	min-height: 224px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--font-heading);
	font-optical-sizing: auto;
	font-variation-settings: "wdth" 100;
}

/* ── Décoration triple SVG (coin bas-droite, à cheval) ────── */

.infocoll-card::after {
	content: '';
	position: absolute;
	inset-inline-end: -15px;
	inset-block-end: -15px;
	width: 60px;
	height: 60px;
	background-image: url('../../images/forme-triple.svg');
	background-repeat: no-repeat;
	background-size: contain;
	transform: rotate(180deg);
	pointer-events: none;
}

/* ── Icône calendrier (absolue, haut gauche) ───────────────── */

.infocoll-card__icon {
	position: absolute;
	top: 19px;
	left: 19px;
	font-size: 19px;
	color: var(--color-accent-1);
	line-height: 1;
}

/* ── Chiffre du jour (grand) ───────────────────────────────── */

.infocoll-card__jour {
	font-size: 80px;
	font-weight: 400;
	line-height: 1;
	color: var(--color-contrast);
}

/* ── Mois (extrabold, uppercase) ───────────────────────────── */

.infocoll-card__mois {
	font-size: 30px;
	line-height: 30px;
	font-weight: 800;
	color: var(--color-contrast);
}

/* ── Heure (regular) ───────────────────────────────────────── */

.infocoll-card__heure {
	font-size: 30px;
	line-height: 1;
	font-weight: 400;
	color: var(--color-contrast);
}

/* ── Responsive ────────────────────────────────────────────── */

/* Tablette : 2 colonnes */
@media (max-width: 768px) {
	.mod-dpcalendar-upcoming-infocoll__events {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}

	.infocoll-card {
		min-height: 180px;
	}

	.infocoll-card__jour {
		font-size: 60px;
	}

	.infocoll-card__mois,
	.infocoll-card__heure {
		font-size: 26px;
		line-height: 26px;
	}
}

/* Mobile : 2 colonnes compactes */
@media (max-width: 420px) {
	.mod-dpcalendar-upcoming-infocoll__events {
		gap: var(--space-sm);
	}

	.infocoll-card {
		min-height: 160px;
		padding: var(--space-sm);
		padding-block-start: 40px; /* maintient l'espace pour l'icône */
	}

	.infocoll-card__jour {
		font-size: 48px;
	}

	.infocoll-card__mois,
	.infocoll-card__heure {
		font-size: 20px;
		line-height: 22px;
	}
}