/**
 * Cartes de contenu : événements et biens immobiliers.
 *
 * Séparé de patterns.css pour rester lisible : ce fichier ne décrit que des
 * cartes de listing, chacune adaptée à ce que son public regarde en premier.
 * Pour un événement c'est la date ; pour un logement, le prix et la taille.
 */

/* ==========================================================================
   Carte d'événement
   Le bloc de date à gauche fait office de repère : on scanne une colonne de
   dates, pas une colonne de titres.
   ========================================================================== */

.ccc-event {
	position: relative;
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--ccc-space-4);
	align-items: start;
	padding: var(--ccc-space-4) var(--ccc-space-4) var(--ccc-space-4) 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ccc-border, #d8dce0);
	border-radius: 0;
	transition: none;
}

/* Le filet qui relie les dates entre elles. */
.ccc-event::before {
	content: '';
	position: absolute;
	left: 31px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--ccc-border, #d8dce0);
	z-index: 0;
}

.ccc-event:first-child::before { top: var(--ccc-space-4); }
.ccc-event:last-child::before { bottom: auto; height: var(--ccc-space-4); }

.ccc-event:hover .ccc-event__title a,
.ccc-event:focus-within .ccc-event__title a {
	color: var(--ccc-primary, #173F73);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ccc-event__date {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-height: 62px;
	padding: 6px 0;
	margin: 0;
	background: var(--ccc-surface, #fff);
	border: 1px solid var(--ccc-border, #d8dce0);
	border-radius: var(--ccc-radius-sm);
	color: var(--ccc-primary-deep, #0B1F3A);
	font-family: var(--ccc-font-heading, sans-serif);
	line-height: 1;
	text-align: center;
}

/* Le jour en gros, le mois en petit : la hiérarchie fait le travail, pas la
   couleur. Le chiffre est en jaune sur fond profond — un contraste de 9:1,
   et le repère que l'œil cherche en premier dans un agenda. */
.ccc-event__date strong {
	display: block;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ccc-primary-deep, #0B1F3A);
}

.ccc-event__date span {
	display: block;
	margin-top: 2px;
	font-family: var(--ccc-font-body, sans-serif);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ccc-text-muted, #6b757e);
}

.ccc-event__body {
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-2);
	min-width: 0;
}

.ccc-event__title {
	margin: 0;
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: var(--ccc-text-lg);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.012em;
}

.ccc-event__title a {
	color: var(--ccc-text, #14181c);
	text-decoration: none;
}

.ccc-event__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ccc-event__meta,
.ccc-event__excerpt {
	margin: 0;
	font-size: var(--ccc-text-sm);
	line-height: 1.55;
	color: var(--ccc-text-muted, #6b757e);
}

.ccc-event__meta {
	font-weight: 600;
	color: var(--ccc-text-muted, #6b757e);
}

/* ==========================================================================
   Carte de bien immobilier
   ========================================================================== */

.ccc-property {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ccc-surface, #fff);
	border: 1px solid var(--ccc-border, #d8dce0);
	border-radius: var(--ccc-radius-lg);
	overflow: hidden;
	transition: transform var(--ccc-transition-base) ease,
		box-shadow var(--ccc-transition-base) ease;
}

.ccc-property:hover,
.ccc-property:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--ccc-shadow-lg);
}

.ccc-property__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(140deg, var(--ccc-primary-subtle, #e7ecf3), var(--ccc-neutral-100, #eceef0));
	overflow: hidden;
}

.ccc-property__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Étiquette du type d'offre : séjour court, location ou vente. C'est le
   premier tri mental du visiteur. */
.ccc-property__badge {
	position: absolute;
	top: var(--ccc-space-3);
	left: var(--ccc-space-3);
	z-index: 2;
	margin: 0;
	padding: 5px 11px;
	border-radius: var(--ccc-radius-full);
	background: var(--ccc-primary, #173F73);
	color: #fff;
	font-family: var(--ccc-font-body, sans-serif);
	font-size: var(--ccc-text-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ccc-property__body {
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-2);
	padding: var(--ccc-space-5, 20px) var(--ccc-space-6);
	flex: 1;
}

.ccc-property__title {
	margin: 0;
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: var(--ccc-text-lg);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.012em;
}

.ccc-property__title a {
	color: var(--ccc-text, #14181c);
	text-decoration: none;
}

.ccc-property__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ccc-property__price {
	margin: 0;
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: var(--ccc-text-2xl);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.028em;
	color: var(--ccc-primary-deep, #0B1F3A);
}

.ccc-property__price small {
	font-family: var(--ccc-font-body, sans-serif);
	font-size: var(--ccc-text-sm);
	font-weight: 500;
	color: var(--ccc-text-muted, #6b757e);
}

/* Caractéristiques : surface, chambres, couchages. Séparées par un point
   médian plutôt que par des icônes, qui demanderaient une légende. */
.ccc-property__specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ccc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--ccc-text-sm);
	color: var(--ccc-text-muted, #6b757e);
}

.ccc-property__specs li + li::before {
	content: '·';
	margin-right: var(--ccc-space-2);
}

.ccc-property__excerpt {
	margin: 0;
	font-size: var(--ccc-text-sm);
	line-height: 1.55;
	color: var(--ccc-text-muted, #6b757e);
}

/* --- Étiquette PEB --------------------------------------------------------
   Mention obligatoire dans toute annonce immobilière en Wallonie. On la rend
   lisible plutôt que discrète : c'est une information que le candidat
   locataire ou acheteur cherche activement. */

.ccc-epc {
	display: inline-flex;
	align-items: center;
	gap: var(--ccc-space-2);
	margin: 0;
	font-size: var(--ccc-text-xs);
	font-weight: 600;
	color: var(--ccc-text-muted, #6b757e);
}

.ccc-epc__letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border-radius: var(--ccc-radius-sm);
	font-family: var(--ccc-font-body, sans-serif);
	font-size: var(--ccc-text-sm);
	font-weight: 700;
	color: #14181c;
	background: var(--ccc-neutral-200, #d8dce0);
}

/* L'échelle va du vert au rouge. La lettre reste lisible sans la couleur :
   l'information n'est jamais portée par la teinte seule (§18). */
.ccc-epc--a-plus-plus .ccc-epc__letter,
.ccc-epc--a-plus .ccc-epc__letter,
.ccc-epc--a .ccc-epc__letter { background: #1a7f4b; color: #fff; }
.ccc-epc--b .ccc-epc__letter { background: #5aa53c; color: #fff; }
.ccc-epc--c .ccc-epc__letter { background: #a8c22e; }
.ccc-epc--d .ccc-epc__letter { background: #f2c14e; }
.ccc-epc--e .ccc-epc__letter { background: #e08a2e; color: #fff; }
.ccc-epc--f .ccc-epc__letter { background: #d1502e; color: #fff; }
.ccc-epc--g .ccc-epc__letter { background: #b3261e; color: #fff; }

/* La bande de filtres rapides vivait ici et dans `patterns.css`, avec deux
   définitions divergentes du même sélecteur — le rendu dépendait de l'ordre de
   chargement. Elle appartient aux motifs, puisqu'elle sert aussi hors des
   listes : elle n'est plus définie que là-bas. */

@media (max-width: 480px) {
	.ccc-event {
		grid-template-columns: 64px 1fr;
		gap: var(--ccc-space-3);
	}

	.ccc-event__date strong {
		font-size: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ccc-event,
	.ccc-property,
	.ccc-quickfilter {
		transition: none;
	}

	.ccc-property:hover {
		transform: none;
	}
}