/*
 * Hero service (patterns/hero-service-*.php).
 *
 * A (clair) : texte + mosaïque bento de 1 à 3 photos, fond au choix via les styles de
 * bloc « Hero — … » (Groupe > Styles). Les couleurs viennent des variables
 * --hero-* définies par style : on ne colore jamais le texte à la main, pour
 * qu'un changement de fond ne casse pas les contrastes.
 *
 * Contrastes calculés (titre / chapô / surtitre / bouton) :
 *   Beige 14,35 / 7,05 / 5,02 / 5,79      Vert très clair 13,92 / 6,84 / 4,87 / 5,79
 *   Gris-vert 15,20 / 7,47 / 5,32 / 5,79  Blanc 16,55 / 8,13 / 5,79 / 5,79
 *   Vert APAJH 5,79 / 5,79 / 4,87 / 5,79  Bordeaux 9,77 / 9,77 / 8,21 / 9,77
 * B (vert) et C (photo) gardent leurs réglages propres.
 * Couleurs : presets theme.json uniquement.
 */

/* ---------- Hero en tête de page ---------- */

/* Pas de bande blanche entre le header et le bandeau ; le titre flottant du
   thème est masqué (le H1 est dans le hero). */
.wp-site-blocks main:has(> .entry-content > .apajh-hero:first-child) {
	padding-top: 0 !important;
}

.wp-site-blocks main:has(> .entry-content > .apajh-hero:first-child) > .entry-content {
	margin-top: 0 !important;
}

main:has(.entry-content > .apajh-hero:first-child) .wp-block-group:has(> .wp-block-post-title) {
	display: none;
}

/* ---------- A : variables de couleur par style de fond ---------- */

.apajh-hero--clair {
	--hero-bg: var(--wp--preset--color--beige);
	--hero-fg: var(--wp--preset--color--main);
	--hero-muted: var(--wp--preset--color--border-dark);
	--hero-eyebrow: var(--wp--preset--color--primary);
	--hero-btn-bg: var(--wp--preset--color--primary);
	--hero-btn-fg: var(--wp--preset--color--base);
	--hero-outline: var(--wp--preset--color--primary);
	--hero-focus: var(--wp--preset--color--secondary);
	background: var(--hero-bg);
	color: var(--hero-fg);
}

.apajh-hero--clair.is-style-apajh-hero-vert-clair {
	--hero-bg: var(--wp--preset--color--primary-accent);
}

.apajh-hero--clair.is-style-apajh-hero-gris-vert {
	--hero-bg: var(--wp--preset--color--tertiary);
}

.apajh-hero--clair.is-style-apajh-hero-blanc {
	--hero-bg: var(--wp--preset--color--base);
}

.apajh-hero--clair.is-style-apajh-hero-vert,
.apajh-hero--clair.is-style-apajh-hero-bordeaux {
	--hero-fg: var(--wp--preset--color--base);
	--hero-muted: var(--wp--preset--color--base);
	--hero-eyebrow: var(--wp--preset--color--primary-accent);
	--hero-btn-bg: var(--wp--preset--color--base);
	--hero-outline: var(--wp--preset--color--base);
	--hero-focus: var(--wp--preset--color--base);
}

.apajh-hero--clair.is-style-apajh-hero-vert {
	--hero-bg: var(--wp--preset--color--primary);
	--hero-btn-fg: var(--wp--preset--color--primary);
}

.apajh-hero--clair.is-style-apajh-hero-bordeaux {
	--hero-bg: var(--wp--preset--color--secondary);
	--hero-btn-fg: var(--wp--preset--color--secondary);
}

.apajh-hero--clair .apajh-hero__eyebrow {
	color: var(--hero-eyebrow);
}

.apajh-hero--clair .apajh-hero__title {
	color: var(--hero-fg);
}

.apajh-hero--clair .apajh-hero__lede {
	color: var(--hero-muted);
}

.apajh-hero--clair .apajh-hero__btn--primary .wp-block-button__link {
	background: var(--hero-btn-bg);
	color: var(--hero-btn-fg);
	border: 1px solid var(--hero-btn-bg);
}

.apajh-hero--clair .apajh-hero__btn--outline .wp-block-button__link {
	background: transparent;
	color: var(--hero-outline);
	border: 1px solid var(--hero-outline);
}

.apajh-hero--clair .wp-block-button__link {
	border-radius: 999px;
}

.apajh-hero--clair a:focus-visible,
.apajh-hero--clair button:focus-visible {
	outline: 3px solid var(--hero-focus);
	outline-offset: 3px;
}

/* Boutons : 44 px minimum, tous les héros. */
.apajh-hero .wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.apajh-hero__cols {
	align-items: center;
}

/* Texte et photos toujours centrés verticalement l'un par rapport à l'autre,
   même si la colonne n'a pas la classe « alignée au centre ». */
.apajh-hero__cols > .wp-block-column {
	align-self: center;
}

/* ---------- A : mosaïque bento (1, 2 ou 3 photos distinctes) ----------
   Grille 2 × 2 sans chevauchement : la 1re photo occupe toute la hauteur à
   gauche, les suivantes s'empilent à droite. Décoratif : ordre de lecture = DOM. */

.apajh-hero__mosaic {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 12px;
	aspect-ratio: 5 / 4;
	margin: 0;
}

.apajh-hero__mosaic > .apajh-hero__photo {
	margin: 0;
	min-width: 0;
	min-height: 0;
}

.apajh-hero__mosaic .apajh-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
}

/* 1re photo : pleine hauteur. */
.apajh-hero__mosaic > .apajh-hero__photo:first-child {
	grid-row: 1 / span 2;
}

/* 1 photo : plein cadre. */
.apajh-hero__mosaic > .apajh-hero__photo:only-child {
	grid-column: 1 / -1;
}

/* 2 photos : deux colonnes pleine hauteur. */
.apajh-hero__mosaic > .apajh-hero__photo:nth-child(2):last-child {
	grid-row: 1 / span 2;
}

@media (max-width: 781px) {
	.apajh-hero__mosaic {
		aspect-ratio: 4 / 3.2;
		gap: 10px;
	}
}

/* ---------- B / C ---------- */

.apajh-hero__chips {
	gap: var(--wp--preset--spacing--x-small);
	margin-top: var(--wp--preset--spacing--medium);
}

.apajh-hero__chip {
	margin: 0;
	padding: 0.3rem 0.95rem;
	border-radius: 999px;
}

/* Focus clavier : blanc sur les fonds sombres (B vert, C photo). */
.apajh-hero--vert a:focus-visible,
.apajh-hero--vert button:focus-visible,
.apajh-hero--photo a:focus-visible,
.apajh-hero--photo button:focus-visible {
	outline: 3px solid var(--wp--preset--color--base);
	outline-offset: 3px;
}

/* Bouton plein de B : le contour blanc doit rester visible sur son fond blanc. */
.apajh-hero--vert .wp-block-button__link:not(.has-background):focus-visible,
.apajh-hero--vert .has-base-background-color:focus-visible {
	outline-color: var(--wp--preset--color--base);
	box-shadow: 0 0 0 6px var(--wp--preset--color--primary);
}

/* Fond photo : pas de parallaxe, pas d'animation. */
.apajh-hero--photo.has-parallax {
	background-attachment: scroll;
}

/* ---------- D : hero bento (patterns/hero-service-bento.php) ----------
 * Quatre tuiles : message (vert APAJH), photos, devis (orange), téléphone (texte foncé).
 * Contrastes calculés : blanc / vert #536E28 = 5,79 ; surtitre #E7EEDC / vert = 4,87 ;
 * #4A2E05 / orange #FEAB4C = 6,9 ; blanc / #1E1E26 = 16,5.
 * Une tuile cliquable = un seul lien (zone étendue par ::after) ; ordre DOM = ordre de lecture ;
 * 1 colonne sous 560 px ; focus visible 3 px dans la couleur qui contraste avec la tuile.
 * Couleurs : presets theme.json uniquement. */

.apajh-hero-bento {
	background: var(--wp--preset--color--base);
}

.apajh-bento-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: clamp(300px, 29vw, 380px) 1fr; /* photos : hauteur plafonnée, le reste va aux tuiles devis / téléphone */
	gap: 16px;
}

.apajh-bt {
	position: relative;
	margin: 0 !important;
	min-width: 0;
	border-radius: 24px;
	padding: clamp(1.25rem, 2.6vw, 2.25rem);
	--bt-focus: var(--wp--preset--color--base);
}

.apajh-bt > * {
	margin-block: 0;
}

.apajh-bt-main {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.apajh-bt-main .apajh-hero__eyebrow {
	color: var(--wp--preset--color--primary-accent);
	margin-bottom: clamp(1rem, 2.5vw, 2rem);
}

.apajh-bt-main .apajh-hero__title {
	margin-top: auto;
	color: var(--wp--preset--color--base);
	font-size: clamp(1.9rem, 3vw, 2.6rem);
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 1.25rem;
}

.apajh-bt-main .apajh-hero__lede {
	color: var(--wp--preset--color--base);
	font-size: clamp(0.95rem, 1.1vw, 1.05rem);
	line-height: 1.55;
}

.apajh-bt-main .wp-block-buttons {
	margin-top: auto !important;
	padding-top: 1.75rem;
}

.apajh-bt-main .apajh-bt-btn .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--base);
	border-radius: 999px;
	font-weight: 700;
}

.apajh-bt-main .apajh-bt-btn .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-accent);
	border-color: var(--wp--preset--color--primary-accent);
}

/* Photos : 1re photo pleine hauteur, deux autres empilées. Photos porteuses d'un texte alternatif. */
.apajh-bt-photos {
	grid-column: 2 / span 2;
	grid-row: 1;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	padding: 0;
	min-height: 320px;
	overflow: hidden;
	background: var(--wp--preset--color--beige);
}

.apajh-bt-photos > .wp-block-image {
	margin: 0 !important;
	min-width: 0;
	min-height: 0;
	height: 100%;
}

.apajh-bt-photos > .wp-block-image:first-child {
	grid-row: 1 / span 2;
}

.apajh-bt-photos .wp-block-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0;
}

/* Tuiles-liens (devis, téléphone) : un seul lien, zone cliquable = toute la tuile. */
.apajh-bt-devis,
.apajh-bt-tel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	min-height: 150px;
}

.apajh-bt-devis {
	grid-column: 2;
	grid-row: 2;
	background: var(--wp--preset--color--primary-alt);
	color: var(--wp--preset--color--primary-alt-accent);
	--bt-focus: var(--wp--preset--color--primary-alt-accent);
}

.apajh-bt-tel {
	grid-column: 3;
	grid-row: 2;
	background: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
}

.apajh-bt-titre,
.apajh-bt-tel-num {
	font-weight: 700;
	line-height: 1.2;
	font-size: clamp(1.2rem, 1.9vw, 1.6rem);
}

.apajh-bt-tel-num {
	font-variant-numeric: tabular-nums;
}

.apajh-bt-devis .apajh-bt-sous,
.apajh-bt-tel .apajh-bt-etiquette {
	font-size: 0.95rem;
	line-height: 1.4;
}

.apajh-bt-titre a,
.apajh-bt-tel-num a {
	color: inherit;
	text-decoration: none;
}

.apajh-bt-titre a:hover,
.apajh-bt-tel-num a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.apajh-bt-titre a::after,
.apajh-bt-tel-num a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.apajh-bt a:focus-visible {
	outline: none;
}

.apajh-bt-titre a:focus-visible::after,
.apajh-bt-tel-num a:focus-visible::after {
	outline: 3px solid var(--bt-focus);
	outline-offset: -8px;
}

.apajh-bt-main a:focus-visible {
	outline: 3px solid var(--wp--preset--color--base);
	outline-offset: 3px;
}

/* Flèche décorative (texte alternatif vide : non lue par les lecteurs d'écran). */
.apajh-bt-devis::before,
.apajh-bt-fleche::before {
	content: "→";
	content: "→" / "";
	position: absolute;
	right: clamp(1.25rem, 2.6vw, 2.25rem);
	bottom: clamp(1rem, 2.2vw, 1.75rem);
	font-size: 1.75rem;
	line-height: 1;
}

/* Lien d'ancre dans la page : flèche vers le bas. */
.apajh-bt-ancre::before {
	content: "↓";
	content: "↓" / "";
}

@media (prefers-reduced-motion: no-preference) {
	.apajh-bt-devis,
	.apajh-bt-tel {
		transition: transform 0.15s ease;
	}

	.apajh-bt-devis:hover,
	.apajh-bt-tel:hover {
		transform: translateY(-2px);
	}
}

@media (max-width: 960px) {
	.apajh-bento-hero {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}

	.apajh-bt-main,
	.apajh-bt-photos {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.apajh-bt-devis {
		grid-column: 1;
		grid-row: auto;
	}

	.apajh-bt-tel {
		grid-column: 2;
		grid-row: auto;
	}

	.apajh-bt-photos {
		min-height: 0;
		height: clamp(280px, 56vw, 420px);
	}
}

@media (max-width: 560px) {
	.apajh-bento-hero {
		grid-template-columns: 1fr;
	}

	.apajh-bt-devis,
	.apajh-bt-tel {
		grid-column: 1 / -1;
		min-height: 120px;
	}

	.apajh-bt-photos {
		height: clamp(240px, 70vw, 320px);
	}
}