/*
 * Page d’accueil.
 *
 * Trois blocs : le hero (nom, dates, accroche, portrait), les trois entrées
 * vers les parties du site, puis une actualité discrète.
 */

/* --------------------------------------------------------------- Hero. */

.cvigee-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	align-items: center;
	gap: var(--space-section);
	padding-block: var(--space-section) clamp(40px, 6vw, 80px);
}

.cvigee-hero__dates {
	font-family: var(--font-ui);
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 22px;
}

.cvigee-hero__accroche {
	max-width: 30ch;
	margin-top: 26px;
}

/* Filet court sous l’accroche : la signature de la maquette. */
.cvigee-hero__filet {
	width: 84px;
	height: 1px;
	background-color: var(--color-accent);
	margin-top: 34px;
}

.cvigee-hero__portrait {
	justify-self: center;
}

.cvigee-hero__portrait img {
	display: block;
	width: min(330px, 84vw);
	height: auto;
}

/* ------------------------------------------------------ Trois parties. */

.cvigee-parties {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-lg);
	border-top: var(--rule);
	padding-top: var(--space-xs);
}

.cvigee-partie {
	display: block;
	padding: 34px 0 var(--space-xs);
	color: var(--color-ink);
}

.cvigee-partie:hover,
.cvigee-partie:focus {
	color: var(--color-accent);
}

.cvigee-partie__numero {
	font-family: var(--font-ui);
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 18px;
}

.cvigee-partie__titre {
	font-size: var(--fs-h2);
	margin: 0 0 12px;
	/* Hérite la couleur du lien, pour que le survol emporte tout le bloc. */
	color: inherit;
}

.cvigee-partie__texte {
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	color: var(--color-text-secondary);
	max-width: 28ch;
	margin: 0;
}

/* ---------------------------------------------------------- Actualité. */

/* La date et le texte d’une actualité sont dans base.css : la liste des
   actualités les partage avec l’accueil. */
.cvigee-actualite {
	padding-top: clamp(44px, 6vw, 72px);
}

/* Le titre d’une actualité est le lien lui-même : encre, accent au survol —
   l’inverse d’un lien dans un texte, où c’est l’accent qui le désigne. */
.cvigee-actualite__texte--titre a {
	color: var(--color-ink);
}

.cvigee-actualite__texte--titre a:hover,
.cvigee-actualite__texte--titre a:focus {
	color: var(--color-accent);
}

@media (max-width: 900px) {

	.cvigee-hero {
		gap: var(--space-lg);
	}

	.cvigee-hero__portrait img {
		width: min(260px, 62vw);
	}
}

/*
 * Le portrait ne passe avant le nom qu’une fois la grille réduite à une seule
 * colonne — sous ~714px, où deux pistes de 300px et leur gouttière ne tiennent
 * plus. Au-dessus, inverser l’ordre mettrait le portrait à gauche du titre,
 * à rebours de la maquette.
 */
@media (max-width: 700px) {

	.cvigee-hero__portrait {
		order: -1;
	}
}