/*
 * crazy/text-image — BLOC ÉTALON.
 * Tokens theme.json uniquement, propriétés logiques uniquement (RTL natif).
 */

.crazy-text-image {
	padding-block: var(--wp--preset--spacing--section);
}

.crazy-text-image__inner {
	max-inline-size: 80rem;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	align-items: center;
}

@media (min-width: 782px) {
	.crazy-text-image__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Variante inversée : le média passe en fin de ligne (start/end, jamais gauche/droite). */
	.crazy-text-image--reversed .crazy-text-image__media {
		order: 2;
	}
}

.crazy-text-image__media img {
	inline-size: 100%;
	block-size: auto;
	/* Les portraits très hauts n'étirent pas la section (le texte centré
	 * à côté creuserait de grands vides entre sections). */
	max-block-size: 34rem;
	object-fit: cover;
}

.crazy-text-image__kicker {
	margin-block: 0 var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rouge);
}

.crazy-text-image__title {
	margin-block: 0 var(--wp--preset--spacing--sm);
}

.crazy-text-image__text {
	color: var(--wp--preset--color--creme);
}

/* Sous-titres saisis dans le richtext (h3/h4) : échelle éditoriale,
 * pas l'échelle display des titres de section. */
.crazy-text-image__text :is(h3, h4) {
	margin-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	color: inherit;
}

.crazy-text-image__text > :first-child {
	margin-block-start: 0;
}

.crazy-text-image__text > :last-child {
	margin-block-end: 0;
}

.crazy-text-image__cta {
	margin-block: var(--wp--preset--spacing--md) 0;
}

/* ----- Variante claire éditoriale (référence) -----
 * Fond blanc, filet sous le titre, texte gris en sans, bouton standard,
 * collage photo décalé et panneau rouge jusqu'au bord d'écran. */

.crazy-text-image--clair {
	position: relative;
	overflow: clip;
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--noir);
}

/* ----- Bloc chiffre clé + mention de pied (section artistes, maquette) ----- */

/* Texte d'intro sur 2 colonnes quand le bloc chiffre est présent. */
@media (min-width: 782px) {
	.crazy-text-image--stat .crazy-text-image__text {
		columns: 2;
		column-gap: var(--wp--preset--spacing--lg);
	}

	.crazy-text-image--stat .crazy-text-image__text p {
		break-inside: avoid;
	}
}

.crazy-text-image__stat {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--md);
	margin-block-start: var(--wp--preset--spacing--lg);
}

/* Colonne dense (texte 2 colonnes + chiffre) : la mise en pile mobile
 * s'applique bien plus tôt que pour les autres sections, visuel centré. */
@media (max-width: 1100px) {
	.crazy-text-image--stat .crazy-text-image__inner {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.crazy-text-image--stat .crazy-text-image__content {
		display: contents;
	}

	.crazy-text-image--stat .crazy-text-image__kicker {
		order: 1;
	}

	.crazy-text-image--stat .crazy-text-image__title {
		order: 2;
	}

	.crazy-text-image--stat .crazy-text-image__media {
		order: 3;
		margin-block: var(--wp--preset--spacing--sm);
	}

	.crazy-text-image--stat .crazy-text-image__media img {
		margin-inline: auto;
	}

	.crazy-text-image--stat .crazy-text-image__text {
		order: 4;
	}

	.crazy-text-image--stat .crazy-text-image__stat {
		order: 5;
	}

	.crazy-text-image--stat .crazy-text-image__cta {
		order: 6;
	}

	.crazy-text-image--stat .crazy-text-image__mention {
		order: 7;
	}
}

.crazy-text-image__stat-number {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(5.5rem, 4rem + 6vw, 9rem);
	font-weight: 400;
	line-height: 0.8;
	color: var(--wp--preset--color--rouge);
}

.crazy-text-image__stat-title {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--noir);
}

.crazy-text-image__stat-sub {
	margin-block: 0.35rem var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
}

.crazy-text-image__stat-text {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--wp--preset--color--gris);
}

/* Mention de pied : petite ligne espacée type crédit (maquette). */
.crazy-text-image__mention {
	margin-block: var(--wp--preset--spacing--lg) 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--noir);
}

/* Titre de section en italique (nom de marque « The Dubai Edition » —
 * règle client : toujours en italique). Classe CSS posée sur le bloc. */
.crazy-text-image--titre-italique .crazy-text-image__title {
	font-style: italic;
}

/* Variante ponctuelle : visuel recadré portrait (classe CSS additionnelle
 * « crazy-text-image--portrait » posée sur le bloc). */
.crazy-text-image--portrait .crazy-text-image__media img {
	inline-size: min(100%, 25.5rem);
	aspect-ratio: 3 / 4;
	max-block-size: none;
	object-fit: cover;
}

/* Déclinaison plus grande du portrait (classe additionnelle, cumulée
 * avec --portrait — utilisée sur la section Experiences). */
.crazy-text-image--portrait-grand .crazy-text-image__media img {
	inline-size: min(100%, 30.5rem);
}

/* En pile (mobile), le visuel portrait se centre. */
@media (max-width: 781px) {
	.crazy-text-image--portrait .crazy-text-image__media img {
		margin-inline: auto;
	}
}

/* Panneau rouge ancré sur la géométrie du visuel (référence) :
 * il démarre à mi-hauteur de la photo, caché 8% derrière son bord,
 * déborde de 14% sous elle et file jusqu'au bord d'écran (clippé
 * par la section). Suit le côté du média en --reversed. */
.crazy-text-image--clair .crazy-text-image__media::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: 50% -20%;
	inset-inline-end: 8%;
	inline-size: 100vw;
	background: var(--wp--preset--color--rouge);
}

.crazy-text-image--clair.crazy-text-image--reversed .crazy-text-image__media::after {
	inset-inline-end: auto;
	inset-inline-start: 8%;
}

/* Option panneau rose pâle (page histoire, référence). */
.crazy-text-image--panneau-rose .crazy-text-image__media::after {
	background: var(--wp--preset--color--rose-pale);
}

@media (max-width: 781px) {
	.crazy-text-image--clair .crazy-text-image__media::after {
		display: none;
	}
}

/* Mobile : ordre de lecture surtitre → titre → visuel → texte → CTA
 * (le média passe sous le titre ; ordre DOM inchangé, purement visuel). */
@media (max-width: 781px) {
	.crazy-text-image__inner {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	/* Les enfants du contenu deviennent des items directs, réordonnables. */
	.crazy-text-image__content {
		display: contents;
	}

	.crazy-text-image__kicker {
		order: 1;
	}

	.crazy-text-image__title {
		order: 2;
	}

	.crazy-text-image__media {
		order: 3;
		margin-block: var(--wp--preset--spacing--sm);
	}

	.crazy-text-image__text {
		order: 4;
	}

	.crazy-text-image__stat {
		order: 5;
	}

	.crazy-text-image__cta {
		order: 6;
	}

	.crazy-text-image__mention {
		order: 7;
	}
}

.crazy-text-image--clair .crazy-text-image__inner {
	position: relative;
	z-index: 1;
	/* Container standard des sections (80rem, hérité de la base) :
	 * même largeur que les autres blocs, seul le panneau file
	 * jusqu'au bord d'écran. */
}

.crazy-text-image--clair .crazy-text-image__title {
	color: var(--wp--preset--color--noir);
	/* Système de titres unifié des sections claires (référence : FAQ). */
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	text-transform: none;
	letter-spacing: 0;
	margin-block-end: var(--wp--preset--spacing--md);
}

.crazy-text-image--clair .crazy-text-image__title::after {
	content: "";
	display: block;
	inline-size: 6.25rem;
	block-size: 2px;
	background: var(--wp--preset--color--noir);
	margin-block-start: var(--wp--preset--spacing--md);
}

.crazy-text-image--clair .crazy-text-image__text {
	color: var(--wp--preset--color--gris);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	line-height: 1.75;
	max-inline-size: 29rem;
	font-size: 1.0625rem;
	margin-block-start: var(--wp--preset--spacing--lg);
}

.crazy-text-image--clair .crazy-text-image__cta {
	margin-block-start: var(--wp--preset--spacing--lg);
}

/* Même bouton plein rouge que les autres sections claires (cf. règle
 * .page-light de main.css, qui exclut cette variante). */
.crazy-text-image--clair .button {
	background: var(--wp--preset--color--rouge);
	border-color: var(--wp--preset--color--rouge);
	color: var(--wp--preset--color--blanc);
}

.crazy-text-image--clair .button:hover,
.crazy-text-image--clair .button:focus-visible {
	background: var(--wp--preset--color--rouge-fonce);
	border-color: var(--wp--preset--color--rouge-fonce);
	color: var(--wp--preset--color--blanc);
}

/* Collage : écho de la photo décalé derrière (cadrage portrait). */
.crazy-text-image--clair .crazy-text-image__media {
	position: relative;
	max-inline-size: 28rem;
	/* Bord du visuel aligné sur le container, comme les autres sections. */
	justify-self: start;
	margin-block: var(--wp--preset--spacing--md);
}

/* En inversé, le visuel se cale symétriquement sur le bord opposé. */
.crazy-text-image--clair.crazy-text-image--reversed .crazy-text-image__media {
	justify-self: end;
}

/* Portrait garanti quel que soit l'original (référence : ~3/4). */
.crazy-text-image--clair .crazy-text-image__media img:not(.crazy-text-image__picto) {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	inline-size: 100%;
}

/* Picto signature : centré, à cheval sur le bord bas du visuel. */
.crazy-text-image--clair .crazy-text-image__media img.crazy-text-image__picto {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	margin-inline: auto;
	inset-block-end: 0;
	translate: 0 45%;
	inline-size: clamp(3.5rem, 3rem + 1.5vw, 5.5rem);
	block-size: auto;
}

.crazy-text-image--clair .crazy-text-image__media img:not(.crazy-text-image__echo):not(.crazy-text-image__picto) {
	position: relative;
	z-index: 1;
}

.crazy-text-image--clair .crazy-text-image__media img.crazy-text-image__echo {
	position: absolute;
	inset: 0;
	z-index: 0;
	transform: translate(8%, 6%);
	filter: brightness(0.75);
}

[dir="rtl"] .crazy-text-image--clair .crazy-text-image__echo {
	transform: translate(-8%, 6%);
}