/*
 * Page d'accueil éditoriale — chargé uniquement sur is_front_page().
 * Le composant carte partagé (.mqc-card, .mqc-card-grid, visuels de
 * secours, .mqc-section*) vit dans editorial.css (chargé globalement,
 * puisque réutilisé par les articles associés et les archives). Ce
 * fichier ne contient plus que ce qui est réellement propre à l'accueil :
 * l'arrangement du bloc vedette et le bloc sponsorisé.
 */

/* --- Bloc vedette ------------------------------------------------------- */

.mqc-featured-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.mqc-featured-secondary {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

/* --- Bloc sponsorisé, discret mais clairement identifié ---------------- */

.mqc-sponsored {
	background: var(--mqc-bg);
}

.mqc-sponsored-label {
	margin: 0 0 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mqc-anthracite);
}

/* Empilée par défaut (mobile) : une mise en page en ligne avec une image de
   largeur fixe (200px) déborderait d'un viewport à 375px, la carte-body ne
   pouvant pas rétrécir sous sa largeur de contenu (min-width:auto par défaut
   sur les enfants flex). La ligne n'est appliquée qu'à partir de la tablette. */
.mqc-card--sponsored {
	max-width: 640px;
}

/* --- Tablette : 2 colonnes, bloc vedette encore empilé ; carte sponsorisée
   en ligne (image + texte côte à côte) -------------------------------- */

@media (min-width: 769px) {
	.mqc-featured-secondary {
		grid-template-columns: repeat(2, 1fr);
	}

	.mqc-card--sponsored {
		flex-direction: row;
		gap: 20px;
	}

	.mqc-card--sponsored .mqc-card-media {
		flex: 0 0 200px;
		aspect-ratio: 4 / 3;
	}

	.mqc-card--sponsored .mqc-card-body {
		justify-content: center;
	}
}

/* --- Desktop : grille éditoriale complète -------------------------------- */

@media (min-width: 1024px) {
	.mqc-latest-news .mqc-card-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.mqc-featured-grid {
		grid-template-columns: 1.6fr 1fr;
		align-items: stretch;
	}

	.mqc-featured-secondary {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 24px;
	}
}