/* Prochaines messes : shortcode [pp_messes] (inc/messesinfo.php) */

/* Couleurs du module (à relier aux variables de theme.json si besoin)
   ========================================================================== */

.pp-messes-cards,
.pp-messes {
	--pp-messes-ink: #14213D;
	--pp-messes-accent: #0B69B1;
	--pp-messes-surface: #F3EEE6;
	--pp-messes-muted: #5B6B84;
	--pp-messes-radius: 1rem;
}

/* Éléments communs
   ========================================================================== */

.pp-messe-time {
	flex: none;
	align-self: center;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	background: #F3EEE6;
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	color: var(--pp-messes-ink);
}

.pp-messe-label {
	font-size: 0.8125rem;
	color: rgba(20, 33, 61, 0.7);
}

/* Cartes (accueil) : affichage="cartes"
   ========================================================================== */

.pp-messes-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-messes-cards .pp-messe-card {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
	margin: 0;
	padding: 1.25rem;
	border-radius: 0.625rem;
	background: #FFFFFF;
}

.pp-messe-card .pp-messe-date {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 3.625rem;
	height: 3.625rem;
	border-radius: 0.25rem;
	background: var(--pp-messes-accent);
	color: #FFFFFF;
	line-height: 1;
}

.pp-messe-card .pp-messe-dow {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pp-messe-card .pp-messe-day {
	margin-top: 0.25rem;
	font-size: 1.375rem;
	font-weight: 500;
}

.pp-messe-card .pp-messe-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	margin-left: 0.125rem;
}

.pp-messe-card .pp-messe-title {
	overflow: hidden;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--pp-messes-ink);
}

.pp-messe-card.is-special .pp-messe-date {
	background: #E89A3C;
}

/* Le widget Shortcode d'Elementor prend toute la largeur de son conteneur */
.elementor-widget-shortcode:has(.pp-messes-cards) {
	width: 100%;
	max-width: 100%;
	align-self: stretch;
}

@media (max-width: 1024px) {
	.pp-messes-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Liste complète (page Messes) : affichage="liste"
   Une carte beige par jour, sur le modèle des cartes de la charte (« Vos contacts »).
   Titres et texte héritent de la typographie du thème.
   ========================================================================== */

.pp-messes {
	display: grid;
	gap: 1.5rem;
}

.pp-messes .pp-messes-day {
	padding: 2.5rem;
	border-radius: var(--pp-messes-radius);
	background: var(--pp-messes-surface);
}

.pp-messes .pp-messes-date {
	margin: 0 0 1.25rem;
	color: var(--pp-messes-ink);
}

.pp-messes .pp-messes-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-messes .pp-messes-item {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: center;
	gap: 1.5rem;
	margin: 0;
	padding: 1rem 0;
	border-top: 1px solid rgba(20, 33, 61, 0.1);
}

.pp-messes .pp-messes-item:last-child {
	padding-bottom: 0;
}

.pp-messes .pp-messe-time {
	justify-self: start;
	padding: 0.375rem 0.875rem;
	background: #FFFFFF;
	font-size: 0.9375rem;
}

.pp-messes .pp-messes-place,
.pp-messes .pp-messes-info {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.pp-messes .pp-messes-place strong {
	font-weight: 600;
	color: var(--pp-messes-ink);
}

.pp-messes .pp-messes-city,
.pp-messes .pp-messe-label {
	font-size: 0.9375rem;
	color: var(--pp-messes-muted);
}

.pp-messes .pp-messes-comment {
	font-size: 0.9375rem;
	color: var(--pp-messes-ink);
}

.pp-messes .pp-messes-item.is-special .pp-messe-time {
	background: #E89A3C;
	color: #FFFFFF;
}

.pp-messes .pp-messes-source {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--pp-messes-muted);
}

@media (max-width: 767px) {
	.pp-messes .pp-messes-day {
		padding: 1.5rem;
	}

	.pp-messes .pp-messes-item {
		grid-template-columns: 4.25rem minmax(0, 1fr);
		gap: 0.375rem 1rem;
	}

	.pp-messes .pp-messes-info {
		grid-column: 2;
	}
}