/**
 * AfroMag - Layout général.
 * Structure principale : contenu + sidebar en 2 colonnes sur desktop,
 * 1 colonne empilée sur mobile (mobile-first, cf. point 33 du cahier
 * des charges). Les grilles spécifiques (cartes "À la une", vidéos...)
 * sont dans cards.css.
 */

.afromag-main-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--afromag-gap);
	padding-block: var(--afromag-gap);
}

@media (min-width: 1024px) {
	.afromag-main-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}
}

.afromag-content {
	min-width: 0; /* évite que le contenu déborde dans une grille */
}

.afromag-sidebar {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--afromag-gap);
}

/* Placeholder générique pour les emplacements publicitaires */
.afromag-ad-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--afromag-color-gray-light);
	border: 1px dashed #c7c7c7;
	color: var(--afromag-color-gray-medium);
	font-size: 0.85rem;
	text-align: center;
	border-radius: var(--afromag-radius);
	padding: 12px;
}

.afromag-ad-slot--banner {
	aspect-ratio: 244 / 40; /* respecte le ratio 24,4 cm x 4 cm demandé */
	width: 100%;
}

.afromag-ad-slot--square {
	aspect-ratio: 1 / 1;
	width: 100%;
}