/* ==========================================================================
   PAGES DES CATÉGORIES PARENTES
   ==========================================================================
   Chantier docs/refonte-categories/ (arbitrages.md §3, plan-phase-3.md),
   d'après la maquette maquettes/maquette_categorie_vehicles.png.
   Lot 3.1 — bandeau, grille et carte de sous-catégorie, desktop et tablette.
   Lot 3.2 — liste sur téléphone, en fin de feuille.

   CANTONNEMENT
   Feuille chargée uniquement en contexte « parent » (inc/tfd-parent-view.php)
   et toutes les règles sont écrites sous la classe de <body> .tfd-parent-view.

   SPÉCIFICITÉ
   Les feuilles du thème parent sont chargées après celles du thème enfant :
   à poids égal elles gagnent. Les sélecteurs reprennent donc la classe de
   contexte, ce qui suffit sans !important.

   Charte : orange #F15A29 (--primary), texte #202A35, gris #5F6670 ; mêmes
   liseré, rayon et couleurs que la carte d'annonce (listing-card.css).
   ========================================================================== */

.tfd-parent-view {
	--tfd-pv-text: #202A35;
	--tfd-pv-muted: #5F6670;
	--tfd-pv-placeholder: #8A919B;
	--tfd-pv-border: #E3E6EA;
	--tfd-pv-border-hover: #D5D9DE;
	--tfd-pv-radius: 8px;
	--tfd-pv-hero-radius: 12px;
	--tfd-pv-hero-bg: #2B3340;   /* fond du bandeau sans image */
	--tfd-pv-image-bg: #EEF1F4;  /* emplacement d'une vignette absente */
	--tfd-pv-gap: 20px;
	--tfd-pv-card-min: 200px;    /* 5 colonnes à 1170px, puis 4, 3, 2 */
}

/* padding-bottom : nativement la page n'a aucune marge basse. */
.tfd-parent-view .hp-page.site-main {
	padding-top: 20px;
	padding-bottom: 64px;
}

/* 64px natifs : pensés pour le bandeau pleine largeur, remplacé ici. */
.tfd-parent-view .hp-page .hp-page__header {
	margin-bottom: 28px;
}

/* ==========================================================================
   BANDEAU
   ==========================================================================
   Part hivepress/listing-category/view/tfd-parent-hero.php. L'image est
   fournie par la part dans la variable --tfd-pv-hero-image et n'est appliquée
   qu'à partir de 768px : sous cette largeur le bandeau est un simple en-tête
   sur fond blanc (maquette mobile, décision du 2026-10-06) et le navigateur
   ne télécharge pas une image de fond dont la règle ne s'applique pas.
   ========================================================================== */

.tfd-parent-view .tfd-parent-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 260px;
	padding: 28px 32px;
	overflow: hidden;
	border-radius: var(--tfd-pv-hero-radius);
	background-color: var(--tfd-pv-hero-bg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
}

/* NOTE (2026-10-07) — Hauteur fixe assumée. Un bandeau au format des
   fichiers (8:3, image entière, thème 0.7.71) a été essayé puis refusé par
   Dan : trop haut. À 260 px, l'image 1600 × 600 est recadrée en haut et en
   bas (cover, centré) ; le cadrage des sujets se règle dans les fichiers. */
.tfd-parent-view .tfd-parent-hero--image {
	background-image: var(--tfd-pv-hero-image);
}

/* Voile : lisibilité du texte blanc sur n'importe quelle photo. */
.tfd-parent-view .tfd-parent-hero--image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55));
}

.tfd-parent-view .tfd-parent-hero__content {
	position: relative;
	z-index: 1;
	max-width: 100%;
}

.tfd-parent-view .tfd-breadcrumb {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
}

.tfd-parent-view .tfd-breadcrumb p {
	margin: 0;
}

.tfd-parent-view .tfd-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.tfd-parent-view .tfd-breadcrumb a:hover,
.tfd-parent-view .tfd-breadcrumb a:focus {
	color: #fff;
	text-decoration: underline;
}

.tfd-parent-view .tfd-breadcrumb .separator {
	margin: 0 8px;
	color: rgba(255, 255, 255, 0.6);
}

.tfd-parent-view .tfd-breadcrumb .last {
	color: #fff;
	font-weight: 700;
}

.tfd-parent-view h1.tfd-parent-hero__title {
	margin: 0;
	font-size: 40px;
	line-height: 1.15;
	font-weight: 700;
	color: #fff;
}

/* ==========================================================================
   GRILLE DES SOUS-CATÉGORIES
   ==========================================================================
   Le bloc natif listing_categories rend une grille flex (.hp-col-sm-4 : 3
   colonnes, gouttières en padding compensées par des marges négatives sur
   .hp-row). On passe en grille CSS, comme pour les annonces
   (listing-card.css) : le nombre de colonnes découle de la largeur minimale
   de carte, 5 à la largeur du contenu, puis 4, 3, 2 selon l'espace réel.
   Une ligne incomplète garde des cartes de la même largeur.
   ========================================================================== */

.tfd-parent-view .hp-listing-categories.hp-grid > .hp-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--tfd-pv-card-min), 1fr));
	gap: var(--tfd-pv-gap);
	margin-right: 0;
	margin-left: 0;
}

.tfd-parent-view .hp-listing-categories.hp-grid > .hp-row > .hp-grid__item {
	flex: none;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.tfd-parent-view .hp-listing-categories.hp-grid {
	margin-bottom: 0;
}

/* ==========================================================================
   CARTE DE SOUS-CATÉGORIE
   ==========================================================================
   Part hivepress/listing-category/view/block/tfd-subcategory-card.php :
   image 16:9, nom suivi d'un chevron, compteur (ligne réservée même vide) ;
   un seul lien sur toute la carte.
   ========================================================================== */

.tfd-parent-view .tfd-subcategory {
	height: 100%;
}

.tfd-parent-view .tfd-subcategory__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--tfd-pv-border);
	border-radius: var(--tfd-pv-radius);
	background: #fff;
	color: var(--tfd-pv-text);
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.tfd-parent-view .tfd-subcategory__link:hover,
.tfd-parent-view .tfd-subcategory__link:focus-visible {
	border-color: var(--tfd-pv-border-hover);
	box-shadow: 0 4px 12px rgba(32, 42, 53, 0.08);
	color: var(--tfd-pv-text);
}

.tfd-parent-view .tfd-subcategory__image {
	aspect-ratio: 16 / 9;
	background: var(--tfd-pv-image-bg);
}

.tfd-parent-view .tfd-subcategory__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tfd-parent-view .tfd-subcategory__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
}

.tfd-parent-view h3.tfd-subcategory__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--tfd-pv-text);
}

.tfd-parent-view .tfd-subcategory__link:hover h3.tfd-subcategory__name {
	color: var(--primary);
}

/* min-height : la ligne existe même sans compteur, les cartes restent
   alignées (arbitrages §3). */
.tfd-parent-view .tfd-subcategory__count {
	min-height: 20px;
	font-size: 14px;
	line-height: 20px;
	color: var(--tfd-pv-muted);
}

/* Chevron tracé en CSS, aucune icône à charger. Il suit le dernier mot du
   nom, dans un même élément insécable (retour de Dan du 2026-10-06 : calé
   au bord droit, il flottait loin d'un nom court). */
.tfd-parent-view .tfd-subcategory__name-end {
	white-space: nowrap;
}

.tfd-parent-view .tfd-subcategory__arrow {
	display: inline-block;
	position: relative;
	top: -1px;
	width: 8px;
	height: 8px;
	margin-left: 10px;
	border-top: 2px solid var(--tfd-pv-muted);
	border-right: 2px solid var(--tfd-pv-muted);
	transform: rotate(45deg);
	vertical-align: middle;
	transition: border-color 0.2s;
}

.tfd-parent-view .tfd-subcategory__link:hover .tfd-subcategory__arrow {
	border-color: var(--primary);
}

/* ==========================================================================
   TABLETTE (768 – 991px)
   ========================================================================== */

@media (max-width: 991px) {
	.tfd-parent-view .tfd-parent-hero {
		min-height: 200px;
		padding: 20px 24px;
	}

	.tfd-parent-view h1.tfd-parent-hero__title {
		font-size: 32px;
	}
}

/* ==========================================================================
   TÉLÉPHONE (< 768px) : en-tête sans image, sous-catégories en liste
   ==========================================================================
   Lot 3.2, maquette mobile : une ligne par sous-catégorie, vignette 16:9 à
   gauche, nom et compteur au centre, chevron au bord droit centré sur la
   ligne (décision du 2026-10-06). Même balisage que la grille, seule la
   disposition change.
   ========================================================================== */

@media (max-width: 767px) {
	.tfd-parent-view .hp-page.site-main {
		padding-top: 16px;
		padding-bottom: 40px;
	}

	.tfd-parent-view .hp-page .hp-page__header {
		margin-bottom: 20px;
	}

	.tfd-parent-view .tfd-parent-hero,
	.tfd-parent-view .tfd-parent-hero--image {
		min-height: 0;
		padding: 0;
		border-radius: 0;
		background-color: transparent;
		background-image: none;
		color: var(--tfd-pv-text);
	}

	.tfd-parent-view .tfd-parent-hero--image::before {
		content: none;
	}

	.tfd-parent-view .tfd-breadcrumb {
		margin-bottom: 8px;
		font-size: 13px;
		color: var(--tfd-pv-muted);
	}

	.tfd-parent-view .tfd-breadcrumb a:hover,
	.tfd-parent-view .tfd-breadcrumb a:focus {
		color: var(--primary);
		text-decoration: none;
	}

	.tfd-parent-view .tfd-breadcrumb .separator {
		color: var(--tfd-pv-placeholder);
	}

	.tfd-parent-view .tfd-breadcrumb .last {
		color: var(--tfd-pv-text);
	}

	.tfd-parent-view h1.tfd-parent-hero__title {
		font-size: 28px;
		color: var(--tfd-pv-text);
	}

	/* Liste : une colonne, lignes serrées. */
	.tfd-parent-view .hp-listing-categories.hp-grid > .hp-row {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	/* min-height : même hauteur de ligne avec ou sans compteur, nom sur une
	   ou deux lignes (retour de Dan du 2026-10-06). */
	.tfd-parent-view .tfd-subcategory__link {
		position: relative;
		flex-direction: row;
		align-items: center;
		min-height: 80px;
	}

	/* Vignette fixe : 96 × 54, arrondie, détachée du bord par une marge. */
	.tfd-parent-view .tfd-subcategory__image {
		flex: 0 0 96px;
		width: 96px;
		margin: 10px 0 10px 10px;
		overflow: hidden;
		border-radius: 6px;
	}

	.tfd-parent-view .tfd-subcategory__body {
		gap: 2px;
		padding: 10px 40px 10px 12px;
	}

	.tfd-parent-view h3.tfd-subcategory__name {
		font-size: 15px;
	}

	/* En liste, le chevron quitte le nom pour le bord droit de la carte,
	   centré sur sa hauteur quel que soit le nombre de lignes (décision de
	   Dan du 2026-10-06, maquette mobile). Même balisage : il reste dans le
	   nom, seul son positionnement change. */
	.tfd-parent-view .tfd-subcategory__arrow {
		position: absolute;
		top: 50%;
		right: 16px;
		width: 9px;
		height: 9px;
		margin: 0;
		transform: translateY(-50%) rotate(45deg);
	}

	/* En ligne, l'alignement est horizontal : la ligne du compteur n'a plus
	   besoin d'être réservée quand elle est vide. */
	.tfd-parent-view .tfd-subcategory__count {
		min-height: 0;
		font-size: 13px;
		line-height: 18px;
	}
}