/**
 * Bloc : lg/actualites-grid
 *
 * Grille d'actualités avec layouts rotatifs et filtres AJAX.
 * Mobile-first : cartes empilées, puis grilles sur desktop.
 *
 * SPECS VISUELLES:
 * ─────────────────────────────────────────────────────────────
 * - 2 sections distinctes sur la page listing :
 *   Section 1 : "NOS ACTUALITÉS DU GROUPE."
 *   Section 2 : "LES ACTUALITÉS DE NOS MARQUES DISTRIBUÉES."
 * - Chaque section :
 *   - Titre avec partie en rouge + underline rouge
 *   - Filtres : 2 select/dropdown pills ("FILTRER PAR UNIVERS" + "TRIER PAR")
 *     - Filtre actif : fond rouge, texte blanc
 *     - Filtre inactif : fond blanc, bordure grise
 *   - Grille de cartes avec 3 LAYOUTS ROTATIFS :
 *     Layout A : 1 grande carte à gauche (1/3, full height) + grille 2x2 petites cartes à droite (5 cartes total)
 *     Layout B : grille 3 colonnes, carte du milieu plus grande (5 cartes total)
 *     Layout C : 1 grande carte à droite + grille 2x2 à gauche (miroir de A)
 *   - Carte actualité :
 *     - Image en haut (cover, ratio ~16/10)
 *     - Badge overlay sur image : "NOUVEAUTÉ" ou "ACTUALITÉ" (fond blanc, texte noir, petit)
 *     - Sous l'image : badge marque/univers (noir "GROUPE LG" ou couleur marque "MERCEDES-BENZ")
 *     - Date : "29 JAN. 2025" en petit gris
 *     - Titre : bold, 2 lignes max (truncate)
 *     - Extrait : texte gris, 2-3 lignes max
 *   - Grande carte : même contenu mais plus grand
 * - Bouton "Afficher plus d'actualités" en bas : pill outline noir
 * - Load more : charge le layout suivant A->B->C->A...
 * ─────────────────────────────────────────────────────────────
 *
 * Couche : @layer blocks
 *
 * @since 1.0.0
 */

/* ── Section ── */

.lg-actualites-grid__section {
			margin-bottom: var(--space-12);
		}

/* ── Titre de section ── */

.lg-actualites-grid__title {
			font-family: var(--ff-heading);
			font-size: var(--fs-h2);
			font-weight: var(--fw-bold);
			line-height: var(--lh-tight);
			text-transform: uppercase;
			color: var(--color-noir-primary);
			margin-bottom: var(--space-6);
		}

.lg-actualites-grid__title-accent {
			color: var(--color-accent);
		}

.lg-actualites-grid__title-bar {
			display: block;
			width: 60px;
			height: 3px;
			background: var(--color-accent);
			border-radius: var(--radius-sm);
			margin-top: var(--space-3);
		}

/* ── Filtres ── */

.lg-actualites-grid__filters {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-3);
			margin-bottom: var(--space-6);
		}

.lg-actualites-grid__filter {
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			padding: var(--space-2) var(--space-4);
			border: 1px solid var(--color-gris-border);
			border-radius: var(--radius-pill);
			background: var(--color-blanc);
			color: var(--color-text-muted);
			font-size: var(--fs-body-sm);
			font-weight: var(--fw-medium);
			text-transform: uppercase;
			cursor: pointer;
			transition: all var(--transition-base);
		}

.lg-actualites-grid__filter--active {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: var(--color-blanc);
		}

/* ── Grille de cartes ── */

.lg-actualites-grid__grid {
			display: grid;
			gap: var(--space-5);
		}

/* ── Carte actualité ── */

.lg-actualites-grid__card {
			display: flex;
			flex-direction: column;
			background: var(--color-blanc);
			border-radius: var(--radius-md);
			overflow: hidden;
			transition: box-shadow var(--transition-base);
		}

.lg-actualites-grid__card:hover {
			box-shadow: var(--shadow-md);
		}

.lg-actualites-grid__card-image {
			position: relative;
			aspect-ratio: 16 / 10;
			overflow: hidden;
		}

.lg-actualites-grid__card-image img {
				width: 100%;
				height: 100%;
				-o-object-fit: cover;
				   object-fit: cover;
			}

/* Badge overlay sur l'image ("NOUVEAUTÉ" / "ACTUALITÉ") */

.lg-actualites-grid__card-badge-overlay {
			position: absolute;
			top: var(--space-3);
			left: var(--space-3);
			padding: var(--space-1) var(--space-3);
			background: var(--color-blanc);
			color: var(--color-noir-primary);
			font-size: var(--fs-caption);
			font-weight: var(--fw-bold);
			text-transform: uppercase;
			border-radius: var(--radius-sm);
		}

/* Badge marque/univers sous l'image */

.lg-actualites-grid__card-badge {
			display: inline-block;
			padding: var(--space-1) var(--space-3);
			font-size: var(--fs-caption);
			font-weight: var(--fw-bold);
			text-transform: uppercase;
			border-radius: var(--radius-sm);
			color: var(--color-blanc);
			background: var(--color-noir-primary);
			margin-top: var(--space-3);
		}

.lg-actualites-grid__card-date {
			font-size: var(--fs-caption);
			color: var(--color-text-muted);
			margin-top: var(--space-2);
		}

.lg-actualites-grid__card-title {
			font-family: var(--ff-heading);
			font-size: var(--fs-body);
			font-weight: var(--fw-bold);
			line-height: var(--lh-heading);
			color: var(--color-noir-primary);
			margin-top: var(--space-2);
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

.lg-actualites-grid__card-excerpt {
			font-size: var(--fs-body-sm);
			line-height: var(--lh-body);
			color: var(--color-text-muted);
			margin-top: var(--space-2);
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

.lg-actualites-grid__card--big .lg-actualites-grid__card-title {
			font-size: var(--fs-h4);
		}

/* ── Bouton load more ── */

.lg-actualites-grid__load-more {
			display: flex;
			justify-content: center;
			margin-top: var(--space-8);
		}

.lg-actualites-grid__load-more .btn {
			border-color: var(--color-noir-primary);
			color: var(--color-noir-primary);
			border-radius: var(--radius-pill);
		}

/* ============================================
		   Desktop — Layouts rotatifs
		   ============================================ */

@media (min-width: 1024px) {
	.lg-actualites-grid {

			/* Layout A : 1 grande carte gauche + 2x2 grille droite */

			/* Layout B : 3 colonnes, carte du milieu plus grande */

			/* Layout C : miroir de A, grande carte à droite */
	}
			.lg-actualites-grid__grid--layout-a {
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: 1fr 1fr;
			}

				.lg-actualites-grid__grid--layout-a .lg-actualites-grid__card--big {
					grid-row: 1 / -1;
					grid-column: 1;
				}
			.lg-actualites-grid__grid--layout-b {
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: 1fr 1fr;
			}

				.lg-actualites-grid__grid--layout-b .lg-actualites-grid__card--big {
					grid-row: 1 / -1;
					grid-column: 2;
				}
			.lg-actualites-grid__grid--layout-c {
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: 1fr 1fr;
			}

				.lg-actualites-grid__grid--layout-c .lg-actualites-grid__card--big {
					grid-row: 1 / -1;
					grid-column: 3;
				}
		}