/*
 * CMG Home Featured — feuille de style
 * Updated: 2026-07-22 10:59 (Europe/Zurich)
 *
 * Identité visuelle reprise du rendu KingComposer d'origine : couleurs, bordures,
 * arrondis, typographie et fond gris sont inchangés.
 *
 * La mise en page, elle, est corrigée. KingComposer donnait 50% à chaque colonne
 * mais posait un retrait de 30px sur celle de gauche uniquement, donc l'image
 * perdait 30px une rangée sur deux : les vignettes n'avaient pas toutes la même
 * taille. Le basculement en pile n'intervenait par ailleurs qu'en dessous de
 * 480px, ce qui laissait une plage de 480 à 900px avec des titres sur cinq ou
 * six lignes dans des colonnes trop étroites.
 *
 * Le passage à une colonne dépend maintenant de la largeur réelle de la carte,
 * pas de celle de la fenêtre, car le thème gk-portfolio contraint le contenu de
 * façon variable selon la page.
 *
 * Aucune dépendance externe. Open Sans et Font Awesome viennent du thème.
 */

/* ---------------------------------------------------------------- conteneur */

.cmg-container {
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

.cmg-featured,
.cmg-featured *,
.cmg-featured *::before,
.cmg-featured *::after {
	box-sizing: border-box;
}

/* Référence pour les requêtes de conteneur ci dessous. */
.cmg-featured {
	container-type: inline-size;
	container-name: cmg;
}

/* ------------------------------------------------------------------ rangée */

.cmg-featured__item {
	display: flex;
	align-items: center;
	gap: 30px;
	width: 100%;
	padding: 20px;
	margin-bottom: 30px;
	border: 1px solid #ddd;
	background-color: #ebebeb;
}

.cmg-featured__item:last-child {
	margin-bottom: 0;
}

/* Colonnes strictement égales, quelle que soit la rangée. */
.cmg-featured__text,
.cmg-featured__media {
	flex: 1 1 0;
	min-width: 0;
}

/* Zigzag. Le DOM garde le titre en premier, seul l'ordre visuel s'inverse. */
.cmg-featured__item:nth-child(even) {
	flex-direction: row-reverse;
}

/* ------------------------------------------------------------------- titre */

.cmg-featured__title {
	margin: 8px;
	font-family: "Open Sans", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.cmg-featured__title a {
	display: block;
	color: #9b9b9e;
	text-decoration: none;
}

.cmg-featured__title a:hover,
.cmg-featured__title a:focus-visible {
	color: #777779;
	text-decoration: underline;
}

/* ------------------------------------------------------------------ bouton */

.cmg-featured__button {
	display: inline-block;
	padding: 10px 20px;
	margin: 0 8px 8px;
	border: 1px solid #777777;
	border-radius: 4px;
	background-color: #ffffff;
	color: #777777;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.cmg-featured__button:hover,
.cmg-featured__button:focus-visible {
	background-color: #777777;
	border-color: #777777;
	color: #ffffff;
	text-decoration: none;
}

.cmg-featured__button .fa {
	margin-left: 4px;
}

.cmg-featured a:focus-visible {
	outline: 2px solid #777779;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------- image */

.cmg-featured__media {
	display: flex;
	justify-content: flex-end;
}

/* L'image se cale toujours vers le bord extérieur de la carte. */
.cmg-featured__item:nth-child(even) .cmg-featured__media {
	justify-content: flex-start;
}

.cmg-featured__media figure {
	margin: 0;
	width: 100%;
	max-width: 440px;
}

.cmg-featured__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 440 / 340;
	object-fit: cover;
	border: 1px solid #777777;
	border-radius: 8px;
}

/* -------------------------------------------------------------- une colonne
   Déclenché sur la largeur de la carte, pas sur celle de la fenêtre.
   En dessous de 700px, deux colonnes deviennent illisibles avec des titres
   d'articles aussi longs. */

@container cmg (max-width: 700px) {

	.cmg-featured__item,
	.cmg-featured__item:nth-child(even) {
		flex-direction: column;
		align-items: stretch;
		gap: 15px;
		padding: 15px;
		margin-bottom: 20px;
	}

	/* Image en tête : c'est elle qui accroche l'oeil sur mobile.
	   Le plafond de 440px est conservé, les crops n'ont pas plus de définition
	   et les agrandir ne ferait que les rendre flous. */
	.cmg-featured__media,
	.cmg-featured__item:nth-child(even) .cmg-featured__media {
		order: -1;
		justify-content: center;
	}

	.cmg-featured__title {
		margin: 0 0 12px;
	}

	.cmg-featured__button {
		margin: 0;
	}
}

/* Repli pour les navigateurs sans requêtes de conteneur. */
@supports not (container-type: inline-size) {

	@media only screen and (max-width: 900px) {

		.cmg-featured__item,
		.cmg-featured__item:nth-child(even) {
			flex-direction: column;
			align-items: stretch;
			gap: 15px;
			padding: 15px;
			margin-bottom: 20px;
		}

		.cmg-featured__media,
		.cmg-featured__item:nth-child(even) .cmg-featured__media {
			order: -1;
			justify-content: center;
		}

		.cmg-featured__media figure {
			max-width: none;
		}

		.cmg-featured__title {
			margin: 0 0 12px;
		}

		.cmg-featured__button {
			margin: 0;
		}
	}
}

/* ------------------------------------------------------------------ entrée */

@media (prefers-reduced-motion: no-preference) {

	.cmg-featured {
		animation: cmg-fade-in-down 1s ease-out both;
	}

	@keyframes cmg-fade-in-down {
		from { opacity: 0; transform: translateY(-20px); }
		to   { opacity: 1; transform: none; }
	}
}