/**
 * Bloc : lg/presse-listing
 *
 * Listing des communiqués de presse avec sidebar contact.
 * Mobile-first : empilé, puis 2 colonnes sur desktop.
 *
 * SPECS VISUELLES:
 * ─────────────────────────────────────────────────────────────
 * - Titre : "ESPACE PRESSE & MÉDIAS" (avec "PRESSE & MÉDIAS" en rouge)
 * - Sous-titre descriptif
 * - Layout 2 colonnes :
 *   - GAUCHE (~65%) : Liste de cartes communiqués, empilées verticalement :
 *     - Chaque carte : fond blanc, border-radius, padding
 *     - Gauche : grande date sur 2 lignes ("25" très grand + "DEC" en dessous, gris)
 *     - Badge : "COMMUNIQUÉ OFFICIEL" (rouge) ou "REVUE DE PRESSE" (noir)
 *     - Titre en bold
 *     - Extrait en texte gris
 *     - Icône flèche ↗ en haut à droite de la carte
 *   - DROITE (~35%) : Sidebar sticky "CONTACT PRESSE" :
 *     - Carte fond blanc, border-radius
 *     - Titre "CONTACT PRESSE" en bold
 *     - Photo ronde de la personne + Nom "Sophie DUBREUIL" + Titre "Directrice de la Communication"
 *     - Téléphone avec icône : "04 93 00 00 00"
 *     - Email avec icône : "service.presse@groupe-lg.com"
 *     - Les 2 contacts ont un fond gris clair et border-radius
 * - Bouton "Afficher plus de contenu" en bas, pill outline noir
 * ─────────────────────────────────────────────────────────────
 *
 * Couche : @layer blocks
 *
 * @since 1.0.0
 */

/* ── Titre ── */

.lg-presse-listing__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);
		}

.lg-presse-listing__title-accent {
			color: var(--color-accent);
		}

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

.lg-presse-listing__subtitle {
			font-size: var(--fs-body);
			line-height: var(--lh-body);
			color: var(--color-text-muted);
			margin-top: var(--space-4);
			margin-bottom: var(--space-8);
		}

/* ── Layout 2 colonnes ── */

.lg-presse-listing__layout {
			display: grid;
			gap: var(--space-8);
		}

/* ── Liste des communiqués (gauche) ── */

.lg-presse-listing__main {
			display: flex;
			flex-direction: column;
			gap: var(--space-5);
		}

/* ── Carte communiqué ── */

.lg-presse-listing__card {
			display: grid;
			grid-template-columns: auto 1fr auto;
			gap: var(--space-4);
			align-items: start;
			background: var(--color-blanc);
			border-radius: var(--radius-md);
			padding: var(--space-5);
			box-shadow: var(--shadow-sm);
			transition: box-shadow var(--transition-base);
		}

.lg-presse-listing__card:hover {
			box-shadow: var(--shadow-md);
		}

/* Grande date à gauche */

.lg-presse-listing__card-date {
			display: flex;
			flex-direction: column;
			align-items: center;
			min-width: 50px;
		}

.lg-presse-listing__card-date-day {
			font-family: var(--ff-heading);
			font-size: var(--fs-h1);
			font-weight: var(--fw-bold);
			line-height: 1;
			color: var(--color-text-muted);
		}

.lg-presse-listing__card-date-month {
			font-size: var(--fs-body-sm);
			font-weight: var(--fw-medium);
			text-transform: uppercase;
			color: var(--color-text-muted);
		}

/* Badge type de communiqué */

.lg-presse-listing__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);
			margin-bottom: var(--space-2);
		}

.lg-presse-listing__card-badge--officiel {
			background: var(--color-accent);
		}

.lg-presse-listing__card-badge--revue {
			background: var(--color-noir-primary);
		}

.lg-presse-listing__card-title {
			font-family: var(--ff-heading);
			font-size: var(--fs-body-lg);
			font-weight: var(--fw-bold);
			line-height: var(--lh-heading);
			color: var(--color-noir-primary);
		}

.lg-presse-listing__card-excerpt {
			font-size: var(--fs-body-sm);
			line-height: var(--lh-body);
			color: var(--color-text-muted);
			margin-top: var(--space-2);
		}

/* Flèche en haut à droite */

.lg-presse-listing__card-arrow {
			font-size: var(--fs-body-lg);
			color: var(--color-text-muted);
			transition: color var(--transition-base);
		}

.lg-presse-listing__card:hover .lg-presse-listing__card-arrow {
			color: var(--color-accent);
		}

/* ── Sidebar contact presse (droite) ── */

.lg-presse-listing__sidebar {
			/* Sticky uniquement sur desktop */
		}

.lg-presse-listing__contact {
			background: var(--color-blanc);
			border-radius: var(--radius-md);
			padding: var(--space-6);
			box-shadow: var(--shadow-sm);
		}

.lg-presse-listing__contact-title {
			font-family: var(--ff-heading);
			font-size: var(--fs-h4);
			font-weight: var(--fw-bold);
			text-transform: uppercase;
			color: var(--color-noir-primary);
			margin-bottom: var(--space-5);
		}

.lg-presse-listing__contact-photo {
			width: 80px;
			height: 80px;
			border-radius: var(--radius-full);
			-o-object-fit: cover;
			   object-fit: cover;
			margin-bottom: var(--space-3);
		}

.lg-presse-listing__contact-name {
			font-size: var(--fs-body);
			font-weight: var(--fw-bold);
			color: var(--color-noir-primary);
		}

.lg-presse-listing__contact-role {
			font-size: var(--fs-body-sm);
			color: var(--color-text-muted);
			margin-bottom: var(--space-4);
		}

/* Coordonnées avec fond gris clair */

.lg-presse-listing__contact-phone,
		.lg-presse-listing__contact-email {
			display: flex;
			align-items: center;
			gap: var(--space-3);
			padding: var(--space-3) var(--space-4);
			background: var(--color-gris-bg);
			border-radius: var(--radius-sm);
			font-size: var(--fs-body-sm);
			color: var(--color-noir-primary);
			margin-top: var(--space-2);
			text-decoration: none;
			transition: background var(--transition-base);
		}

.lg-presse-listing__contact-phone:hover,
		.lg-presse-listing__contact-email:hover {
			background: var(--color-gris-border);
		}

/* ── Bouton load more ── */

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

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

/* ============================================
		   Desktop — 2 colonnes (65% / 35%)
		   ============================================ */

@media (min-width: 1024px) {
			.lg-presse-listing__layout {
				grid-template-columns: 65fr 35fr;
			}

			.lg-presse-listing__sidebar {
				position: sticky;
				top: var(--space-8);
			}
		}