/* Studio Lintz : composants visuels reutilisables. */

/**
 * Intro editoriale.
 * Cible .ar-editorial-intro et l'ancienne classe .ar-about-intro.
 */

.ar-editorial-intro,
.ar-about-intro {
	position: relative;
	padding-top: clamp(3rem, 7vw, 6rem);
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

.ar-eyebrow {
	margin-bottom: 1.2rem;

	color: var(--ar-text);
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.ar-editorial-intro h1,
.ar-about-intro h1 {
	max-width: 920px;
	margin-bottom: 1.4rem;

	font-size: clamp(4rem, 10vw, 8rem);
	line-height: 0.95;
	letter-spacing: 0.02em;
}

.ar-subtitle {
	margin-top: 0;
	margin-bottom: 1.7rem;

	color: var(--ar-blue);
	font-family: var(--ar-font-body);
	font-size: clamp(0.85rem, 1.4vw, 1.05rem);
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1.5;
	text-transform: uppercase;
}




/**
 * Separateur court.
 * Trace un repere dore sous les introductions editoriales.
 */

.ar-separator-small,
.ar-editorial-intro .wp-block-separator,
.ar-about-intro .wp-block-separator {
	width: 82px !important;
	max-width: 82px !important;
	height: 1px;
	margin: 0 0 2.2rem 0 !important;

	border: 0 !important;
	background: var(--ar-gold) !important;
	opacity: 1;
}




/**
 * Texte editorial.
 * Garde les paragraphes larges, lisibles et legers.
 */

.ar-editorial-intro p,
.ar-about-intro p {
	max-width: 760px;
	margin-bottom: 1.35rem;

	color: var(--ar-text);
	font-size: clamp(1rem, 1.25vw, 1.08rem);
	font-weight: 300;
	line-height: 1.85;
}

.ar-editorial-intro p strong,
.ar-about-intro p strong {
	font-weight: 500;
}




/**
 * Signature large.
 * Cible .ar-signature-large et l'ancienne classe .ar-about-signature.
 */

.ar-signature-large,
.ar-about-signature {
	margin-top: 2.4rem;

	color: var(--ar-blue);
	font-family: var(--ar-font-signature);
	font-size: clamp(2.8rem, 6vw, 5rem);
	line-height: 1;
}




/**
 * Responsive des composants editoriaux.
 * Reduit les titres, textes et signatures sur mobile.
 */

@media (max-width: 767px) {
	.ar-editorial-intro,
	.ar-about-intro {
		padding-top: 2.5rem;
		padding-bottom: 4rem;
	}

	.ar-editorial-intro h1,
	.ar-about-intro h1 {
		font-size: clamp(3.4rem, 18vw, 5rem);
	}

	.ar-subtitle {
		font-size: 0.78rem;
		letter-spacing: 0.16em;
	}

	.ar-editorial-intro p,
	.ar-about-intro p {
		font-size: 0.98rem;
		line-height: 1.75;
	}

	.ar-signature-large,
	.ar-about-signature {
		font-size: 3.2rem;
	}
}



/**
 * Groupe editorial large.
 * Centre les groupes alignwide dans une largeur confortable.
 */

.wp-block-group.alignwide {
	width: min(1180px, calc(100vw - 48px));
	max-width: min(1180px, calc(100vw - 48px));
	margin-left: auto;
	margin-right: auto;
}




/**
 * Intro editoriale native.
 * Style les premiers blocs d'un groupe large sans classe dediee.
 */

.wp-block-group.alignwide > h1:first-child,
.wp-block-group.alignwide > h2:first-child {
	max-width: 920px;
	margin-bottom: 1.4rem;

	font-size: clamp(4rem, 10vw, 8rem);
	line-height: 0.95;
	letter-spacing: 0.02em;
}

.wp-block-group.alignwide > p:first-of-type {
	margin-top: 0;
	margin-bottom: 1.7rem;

	color: var(--ar-blue);
	font-family: var(--ar-font-body);
	font-size: clamp(0.85rem, 1.4vw, 1.05rem);
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1.5;
	text-transform: uppercase;
}




/**
 * Separateur natif.
 * Uniformise les separateurs WordPress sur le site.
 */

.wp-block-separator {
	width: 82px !important;
	max-width: 82px !important;
	height: 1px;
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-bottom: 2.2rem !important;

	border: 0 !important;
	background: var(--ar-gold) !important;
	opacity: 1;
}