/* Événements — liste des marchés et ateliers publics à venir.
   Reprend les couleurs du thème (variables Global Styles) avec des valeurs
   de repli si le thème ne les définit pas. */

.htk-events {
	--htk-accent: var(--wp--preset--color--accent-1, #e17a3e);
	--htk-ink: var(--wp--preset--color--contrast, #17130f);
	--htk-line: var(--wp--preset--color--accent-4, #dcc9ae);
	max-width: 760px;
	margin-inline: auto;
	color: var(--htk-ink);
}

.htk-events-title {
	margin: 0 0 1rem;
	text-align: center;
}

.htk-events-empty {
	text-align: center;
	opacity: 0.8;
}

.htk-events-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.htk-event {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1rem;
	border: 1px solid var(--htk-line);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.5);
}

/* Pastille de date : jour de la semaine, numéro, mois. */
.htk-event-date {
	flex: 0 0 4.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.5rem 0.25rem;
	border-radius: 8px;
	background: var(--htk-accent);
	color: #fff;
	line-height: 1.1;
	text-transform: uppercase;
}

.htk-event-weekday,
.htk-event-month {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}

.htk-event-day {
	font-size: 1.9rem;
	font-weight: 700;
}

.htk-event-body {
	flex: 1;
	min-width: 0;
}

.htk-event-type {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--htk-accent);
}

.htk-event-name {
	margin: 0.1rem 0 0.3rem;
	font-size: 1.2rem;
}

.htk-event-body p {
	margin: 0 0 0.25rem;
}

.htk-event-when {
	font-weight: 600;
}

/* « Lieu, adresse » : la virgule seulement s'il y a un lieu avant. */
.htk-event-where strong + span::before {
	content: ", ";
}

/* inline-block : sur un écran étroit, le lien passe entier à la ligne
   suivante au lieu de déborder de la carte. */
.htk-event-where a {
	display: inline-block;
	margin-left: 0.4rem;
	white-space: nowrap;
}

.htk-event-desc {
	font-size: 0.95em;
	opacity: 0.9;
}

.htk-event-more a {
	font-weight: 700;
}

/* Affiche de l'événement : vignette à droite, un clic l'ouvre en grand. */
.htk-event-poster {
	flex: 0 0 9rem;
	display: block;
	line-height: 0;
}

.htk-event-poster img {
	width: 100%;
	height: auto;
	max-height: 14rem;
	object-fit: contain;
	border-radius: 6px;
	border: 1px solid var(--htk-line);
	background: #fff;
	transition: transform 0.15s;
}

.htk-event-poster:hover img {
	transform: scale(1.03);
}

/* Écran étroit : l'affiche passe sous le texte, plus grande. */
@media (max-width: 600px) {
	.htk-event {
		flex-wrap: wrap;
	}

	.htk-event-body {
		flex-basis: calc(100% - 6rem);
	}

	.htk-event-poster {
		flex: 0 0 100%;
		max-width: 16rem;
		margin-inline: auto;
	}

	.htk-event-poster img {
		max-height: none;
	}
}

@media (max-width: 480px) {
	.htk-event {
		gap: 0.75rem;
		padding: 0.75rem;
	}

	.htk-event-date {
		flex-basis: 3.75rem;
	}
}