/* G2 Theme : Le Mag (category.php / archives / recherche). DA Riso Zine.
   Bandeau + article à la une + grille penchée + bannière CTA annuaire. */

/* ====================== BANDEAU ====================== */
.g2-mag-hero {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 64px;
	padding-bottom: 60px;
}
.g2-mag-hero__title { --g2-h1: 96px; max-width: 880px; }
.g2-mag-hero__intro {
	max-width: 640px;
	margin: 0;
	text-wrap: pretty;
}

/* ====================== ARTICLE À LA UNE ====================== */
.g2-feat-wrap { padding-top: 64px; padding-bottom: 20px; }

.g2-feat {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	background: var(--g2-white);
	border: var(--g2-bd);
	box-shadow: var(--g2-sh-blue-8);
	text-decoration: none;
	color: var(--g2-ink);
}
.g2-feat:hover { color: var(--g2-ink); }
.g2-feat__tape {
	top: -13px;
	left: 60px;
	width: 120px;
	height: 26px;
	transform: rotate(-3deg);
}
.g2-feat__media {
	min-height: 380px;
	border-right: var(--g2-bd);
}
.g2-feat__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	padding: 36px 36px 38px;
}
.g2-feat__title {
	font-family: var(--g2-font-display);
	font-weight: 400;
	font-size: 44px;
	line-height: .95;
	color: var(--g2-ink);   /* noir comme les titres d'article, pas le bleu de la maquette */
	text-wrap: balance;
	margin: 0;
}
.g2-feat__excerpt { font-size: 14px; line-height: 1.75; margin: 0; }
.g2-feat__more { align-self: flex-start; font-size: 15px; }
.g2-feat:hover .g2-feat__more { color: var(--g2-blue); }

/* ====================== GRILLE ====================== */
.g2-mag-gridwrap { padding-top: 56px; padding-bottom: 40px; }
/* Sans article à la une ni bannière (recherche, archives) : plus d'air. */
.g2-mag-gridwrap--solo { padding-top: 72px; padding-bottom: 96px; }

/* ====================== BANNIÈRE CTA ANNUAIRE ====================== */
.g2-magcta-wrap { padding-top: 40px; padding-bottom: 90px; }

.g2-magcta {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	background: var(--g2-blue);
	color: #fff;
	border: var(--g2-bd);
	box-shadow: var(--g2-sh-pink-8);
}
.g2-magcta__media {
	position: relative;
	min-height: 280px;
	background: var(--g2-ink);
	border-right: var(--g2-bd);
	overflow: hidden;
}
.g2-magcta__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	padding: 40px;
}
.g2-magcta__title {
	font-family: var(--g2-font-display);
	font-weight: 400;
	font-size: 46px;
	line-height: .95;
	text-transform: lowercase;
	text-shadow: 4px 3px 0 var(--g2-pink);
	text-wrap: balance;
	margin: 0;
}
.g2-magcta__blurb { font-size: 14px; line-height: 1.7; margin: 0; }

/* ====================== RESPONSIVE ====================== */
@media (max-width: 960px) {
	.g2-feat, .g2-magcta { grid-template-columns: 1fr; }
	.g2-feat__media {
		min-height: 0;
		aspect-ratio: 16 / 10;
		border-right: 0;
		border-bottom: var(--g2-bd);
	}
	.g2-magcta__media {
		min-height: 0;
		aspect-ratio: 16 / 9;
		border-right: 0;
		border-bottom: var(--g2-bd);
	}
}

@media (max-width: 760px) {
	.g2-mag-hero { padding-top: 44px; padding-bottom: 44px; }
	.g2-feat-wrap { padding-top: 48px; }
	.g2-feat__body, .g2-magcta__body { padding: 26px 20px; }
	.g2-feat__title { font-size: 34px; }
	.g2-magcta__title { font-size: 36px; }
	.g2-magcta-wrap { padding-bottom: 64px; }
	.g2-mag-gridwrap--solo { padding-top: 52px; padding-bottom: 64px; }
}