/* ==========================================================================
   CARTE D'ANNONCE — composant commun à tout le site
   ==========================================================================
   Chantier docs/refonte-categories/ (arbitrages.md §4 ter, plan-phase-2.md,
   lot 2.3 a). Structure : inc/tfd-listing-cards.php.

   UNE SEULE CARTE
   Gabarit HivePress listing_view_block, rendu dans les grilles (catégories,
   recherche, pages marque, favoris, page d'un vendeur) et dans les carrousels
   (accueil, annonces similaires). Toutes les règles sont écrites sous
   .hp-listing--view-block et ne dépendent d'aucun conteneur. Un conteneur ne
   règle que ce qui l'entoure : largeur, gouttières, défilement. Quand la place
   manque (rail de l'accueil, mobile), la carte se resserre d'elle-même d'après
   la largeur réellement disponible (container query, en fin de feuille),
   jamais d'après la page où elle se trouve (décision du 2026-10-06).

   Contenu, dans l'ordre : photo (badge « featured », cœur Favorite), titre,
   prix, lieu, date. Rien de propre à une catégorie.

   ORIGINE
   Fusion de l'ancienne section « LISTING CARDS » de style.css et des règles
   de carte de home-carousels.css, dont cette carte reprend le parti pris
   (celle de l'accueil était la seule à la charte). Le cœur et le prix ne sont
   plus déplacés par un script : ils sont à leur place dans le HTML.

   SPÉCIFICITÉ
   Feuille chargée après celles du thème parent et de HivePress. Les
   sélecteurs doublent tout de même la classe de la carte
   (.hp-listing.hp-listing--view-block) pour ne pas dépendre de cet ordre.
   Les rares !important répondent à ceux de style.css, signalés un par un.

   Charte : orange #F15A29 (--primary), texte #202A35, gris #5F6670,
   bordure #E3E6EA, rayon 8px — celle des cadres de category-view.css.
   ========================================================================== */

.hp-listing--view-block {
	--tfd-card-text: #202A35;
	--tfd-card-muted: #5F6670;
	--tfd-card-date: #767676;
	--tfd-card-border: #E3E6EA;
	--tfd-card-border-hover: #D5D9DE;
	--tfd-card-radius: 8px;
	--tfd-card-padding: 14px;
	--tfd-card-title-size: 16px;
	--tfd-card-price-size: 18px;
	--tfd-card-meta-size: 14px;
	--tfd-card-date-size: 13px;
	--tfd-card-heart-size: 36px;
}

/* ==========================================================================
   ENVELOPPE
   ========================================================================== */

/* Colonne pleine hauteur : dans une grille comme dans un rail, les cartes
   d'une même rangée ont la même hauteur.
   overflow: hidden rogne la photo au rayon de la carte, sans arrondir le bas
   de l'image : elle reste solidaire du texte. */
.hp-listing.hp-listing--view-block {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin-bottom: 0;
	border: 1px solid var(--tfd-card-border);
	border-radius: var(--tfd-card-radius);
	box-shadow: none;
	background-color: #fff;
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.hp-listing.hp-listing--view-block:hover {
	border-color: var(--tfd-card-border-hover);
	box-shadow: 0 4px 14px rgba(32, 42, 53, 0.1);
}

/* ==========================================================================
   PHOTO
   ========================================================================== */

.hp-listing.hp-listing--view-block .hp-listing__header {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
}

/* 3:2 (décision du 2026-10-06) : un peu plus panoramique que le 4:3 des
   vignettes hp_landscape_small (400 × 300), proche de la maquette sans
   descendre au 16:9.
   !important : le script de HivePress pose aspect-ratio: 1.3333 / 1 en style
   inline sur ce conteneur (constaté en préprod), et sur chaque diapositive
   quand une annonce à plusieurs photos devient un diaporama (frontend.js).
   Seul !important passe devant un style inline. */
.hp-listing.hp-listing--view-block .hp-listing__image,
.hp-listing.hp-listing--view-block .hp-listing__image .slick-slide {
	aspect-ratio: 3 / 2 !important;
}

.hp-listing.hp-listing--view-block .hp-listing__image {
	background-color: #F3F4F6;
}

/* cover plutôt que le contain natif : contain laisse des bandes sur tout ce
   qui n'est pas exactement en 4:3, très marquées sur les photos en portrait.
   Le recadrage peut amputer le filigrane en bord d'image, sans conséquence à
   cette taille : il est intact sur la page de l'annonce. */
.hp-listing.hp-listing--view-block .hp-listing__image img,
.hp-listing.hp-listing--view-block .hp-listing__image video {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Badge « featured » : pastille orange en haut à gauche de la photo.
   La couleur de fond est déjà forcée par style.css (--primary).
   -------------------------------------------------------------------------- */

.hp-listing.hp-listing--view-block .hp-listing__featured-badge {
	top: 10px;
	left: 10px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-image: none;
	box-shadow: 0 1px 4px rgba(32, 42, 53, 0.18);
	color: #fff;
}

.hp-listing.hp-listing--view-block .hp-listing__featured-badge i {
	font-size: 12px;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Cœur Favorite : pastille blanche en haut à droite de la photo.
   Placé dans l'en-tête de la carte par inc/tfd-listing-cards.php. L'état
   actif est porté par data-state="active", posé par HivePress au rendu et
   tenu à jour au clic (frontend.js, composant toggle).
   -------------------------------------------------------------------------- */

.hp-listing.hp-listing--view-block .hp-listing__header .hp-listing__action--favorite {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tfd-card-heart-size);
	height: var(--tfd-card-heart-size);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 1px 4px rgba(32, 42, 53, 0.18);
	color: #8A919B;
	line-height: 1;
	transition: color 0.15s ease, transform 0.15s ease;
}

.hp-listing.hp-listing--view-block .hp-listing__header .hp-listing__action--favorite i {
	display: block;
	margin: 0;
	font-size: 15px;
	line-height: 1;
}

.hp-listing.hp-listing--view-block .hp-listing__header .hp-listing__action--favorite:hover,
.hp-listing.hp-listing--view-block .hp-listing__header .hp-listing__action--favorite:focus-visible,
.hp-listing.hp-listing--view-block .hp-listing__header .hp-listing__action--favorite[data-state="active"] {
	color: var(--primary);
}

.hp-listing.hp-listing--view-block .hp-listing__header .hp-listing__action--favorite:hover {
	transform: scale(1.06);
}

.hp-listing.hp-listing--view-block .hp-listing__header .hp-listing__action--favorite:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* ==========================================================================
   TEXTE
   ========================================================================== */

/* Le texte occupe la hauteur restante de la carte. Les informations se
   suivent depuis le haut, sans vide entre elles : sur une carte au titre
   court ou sans prix, l'espace libre reste en bas (cf. le lieu et la date). */
.hp-listing.hp-listing--view-block .hp-listing__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: var(--tfd-card-padding);
	background-color: #fff;
}

/* --------------------------------------------------------------------------
   Titre : 2 lignes au plus.
   Pas de hauteur réservée : deux lignes imposées creusaient un vide sous les
   titres courts. max-height sert de garde-fou si -webkit-line-clamp n'est pas
   honoré (moteur ancien, WebView) : la troisième ligne est rognée au lieu de
   pousser le contenu.
   !important sur la graisse : style.css impose 700 !important à tous les
   titres d'annonce. Sur la carte, c'est le prix qui porte le gras.
   -------------------------------------------------------------------------- */

.hp-listing.hp-listing--view-block .hp-listing__content .hp-listing__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	max-height: 2.6em;
	margin: 0 0 6px;
	overflow: hidden;
	font-size: var(--tfd-card-title-size);
	font-weight: 500 !important;
	line-height: 1.3;
	color: var(--tfd-card-text);
}

.hp-listing.hp-listing--view-block .hp-listing__content .hp-listing__title a {
	font-weight: 500 !important;
	color: inherit;
	transition: color 0.15s ease;
}

.hp-listing.hp-listing--view-block .hp-listing__content .hp-listing__title a:hover,
.hp-listing.hp-listing--view-block .hp-listing__content .hp-listing__title a:focus {
	color: var(--primary);
}

/* --------------------------------------------------------------------------
   Prix : emplacement d'attributs « primary » de HivePress, placé sous le
   titre par inc/tfd-listing-cards.php. Les règles visent l'emplacement, pas
   un attribut nommé. Une annonce sans prix laisse un conteneur vide, sans
   hauteur : les marges sont portées par l'attribut, pas par le conteneur.
   -------------------------------------------------------------------------- */

.hp-listing.hp-listing--view-block .hp-listing__attributes--primary {
	display: block;
	min-width: 0;
	margin: 0;
}

.hp-listing.hp-listing--view-block .hp-listing__attributes--primary .hp-listing__attribute {
	margin: 0 0 8px;
	overflow: hidden;
	font-size: var(--tfd-card-price-size);
	font-weight: 700;
	line-height: 1.2;
	color: var(--tfd-card-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Lieu puis date, chacun sur sa ligne, à la suite du prix.
   Deux lignes plutôt qu'une : sur une carte étroite, les réunir obligeait à
   tronquer le lieu pour garder la date (décision du 2026-10-06).

   NOTE (2026-10-06) — Une première version calait ce bloc en bas de la carte
   (margin-top: auto) pour aligner lieux et dates d'une même rangée. Refusé
   par Dan sur la préprod : les cartes au titre sur une ligne, ou sans prix,
   montraient un grand vide au milieu du texte. Les informations restent
   groupées ; c'est le bas de la carte qui absorbe la différence de hauteur.
   -------------------------------------------------------------------------- */

.hp-listing.hp-listing--view-block .hp-listing__details--primary {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	margin: 0;
}

/* Seul le lieu peut se réduire : un long quartier est tronqué proprement ;
   la valeur complète reste lisible au survol (attribut title, posé par la
   part tfd-listing-location). */
.hp-listing.hp-listing--view-block .hp-listing__location {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	font-size: var(--tfd-card-meta-size);
	line-height: 1.35;
	color: var(--tfd-card-muted);
}

/* L'icône porte une marge droite héritée du thème, qui s'ajoutait au gap. */
.hp-listing.hp-listing--view-block .hp-listing__location i {
	flex: 0 0 auto;
	margin: 0;
	font-size: 0.9em;
	color: var(--primary);
}

.hp-listing.hp-listing--view-block .hp-listing__location span,
.hp-listing.hp-listing--view-block .hp-listing__location a {
	min-width: 0;
	overflow: hidden;
	color: inherit;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Date : petite, grise, casse normale (le thème parent la met en majuscules
   espacées).
   NOTE (2026-09-28) — en prod, « POSTED ON 08/07/2026 » écrasait le lieu
   jusqu'à une lettre. Réglé à la source : la part
   hivepress/listing/view/block/tfd-listing-created-date.php n'écrit que la
   date sur les cartes.
   !important sur la couleur : style.css impose #2d2d2d !important à
   .hp-listing__date, classe partagée avec la page annonce. */
.hp-listing.hp-listing--view-block .hp-listing__created-date {
	display: block;
	margin: 0;
	font-size: var(--tfd-card-date-size);
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tfd-card-date) !important;
}

/* ==========================================================================
   GRILLE D'ANNONCES : 3 / 2 / 1 colonnes (arbitrages §4 ter)
   ==========================================================================
   Toutes les grilles d'annonces du site : catégories et recherche, favoris,
   pages marque, page d'un vendeur (décision du 2026-10-06 : même largeur de
   carte partout). Les carrousels de l'accueil et des annonces similaires
   gardent leur rail (home-carousels.css, sélecteurs plus précis que ceux-ci).

   Le nombre de colonnes n'est pas imposé : il découle d'une largeur minimale
   de carte, environ 240px (230px exactement : la colonne de contenu des pages
   marque, vendeur et favoris fait 749px utiles, soit trois cartes de 236px ;
   à 240px elles retombaient à deux colonnes de 365px, loin des 247px des
   pages du chantier). Deux colonnes quand l'espace manque, une sur mobile.

   HivePress rend la grille en flex, avec des colonnes .hp-col-sm-* dont les
   gouttières sont des paddings, compensés par des marges négatives sur
   .hp-row. On passe en grille CSS : les gouttières sont portées par gap, et
   ces paddings, marges et largeurs sont remis à zéro.

   Les annonces « featured » restent en tête, dans le même flux que les
   autres (décision du 2026-10-06) : aucune règle ne force les annonces
   normales à commencer sur une nouvelle ligne. Avec 12 cartes par page
   (tfd-core, tfd-listing-featured.php), les lignes sont pleines.
   ========================================================================== */

.hp-listings.hp-grid > .hp-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 20px;
	margin-right: 0;
	margin-left: 0;
}

.hp-listings.hp-grid > .hp-row > .hp-grid__item {
	flex: none;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* L'espace sous la grille était porté par la marge basse des items (2rem),
   remise à zéro ci-dessus. */
.hp-listings.hp-grid:not(:last-child) {
	margin-bottom: 32px;
}

/* ==========================================================================
   COMPTEUR « N listings »
   ==========================================================================
   Part hivepress/listing/view/tfd-result-count.php, rendue au-dessus de la
   grille sur les pages du chantier et, depuis le 2026-10-06, sur les pages
   marque : même présentation partout (Dan : « 17 listings », pas
   « 17 LISTINGS »). Le thème parent met .hp-result-count en majuscules
   espacées ; le sélecteur à (0,3,0) passe devant quel que soit l'ordre des
   feuilles.
   ========================================================================== */

.hp-page__topbar .hp-result-count.tfd-result-count {
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tfd-card-text, #202A35);
}

.hp-page__topbar .hp-result-count.tfd-result-count .tfd-result-count__number {
	font-size: 18px;
	font-weight: 700;
}

/* ==========================================================================
   CARTE ÉTROITE : adaptation à la largeur réellement disponible
   ==========================================================================
   Un seul composant, une seule hiérarchie : pas de variante « carrousel ».
   Quand l'emplacement de la carte passe sous 230px (rail de l'accueil et des
   annonces similaires : 204px, 42vw sur mobile), les tailles se resserrent
   d'un cran, quel que soit le contexte. Les cartes des grilles ne descendent
   jamais sous 230px (grille ci-dessus) et gardent les tailles de base.

   Le repère de taille est l'item de grille ou de rail qui contient la carte.
   Sans prise en charge des container queries (moteur ancien), les tailles de
   base s'appliquent partout : rendu un peu plus serré dans les rails, sans
   casse.
   ========================================================================== */

.hp-grid__item:has(> .hp-listing--view-block) {
	container-type: inline-size;
}

@container (max-width: 230px) {
	.hp-listing--view-block {
		--tfd-card-padding: 12px;
		--tfd-card-title-size: 15px;
		--tfd-card-price-size: 16px;
		--tfd-card-meta-size: 13px;
		--tfd-card-date-size: 12px;
		--tfd-card-heart-size: 32px;
	}
}