/**
 * Sections de page.
 *
 * Les fonds alternés, les paddings et les colonnes viennent des blocs. Ne
 * restent ici que les deux ou trois choses qu'un bloc ne sait pas exprimer :
 * l'alignement d'une demi-section sur la colonne du site, et les petits
 * ajustements typographiques propres à la maquette.
 */

.pd-section {
	overflow: clip;
}

/* -------------------------------------------------------------------
 * Enchaînement des sections
 *
 * WordPress insère un `blockGap` entre blocs frères, et entre les blocs de
 * premier niveau du document. C'est ce qu'on veut entre deux paragraphes, mais
 * pas entre deux bandeaux pleine largeur : le fond de l'un doit toucher le fond
 * du suivant, sinon une bande blanche apparaît à chaque changement de couleur.
 *
 * Les sections portent leur propre respiration en padding — le gap n'a rien à
 * ajouter.
 * ------------------------------------------------------------------- */

.wp-site-blocks > * {
	margin-block-start: 0;
}

:where( .is-layout-flow, .is-layout-constrained ) > .alignfull + .alignfull {
	margin-block-start: 0;
}

/*
 * Respiration avant le pied de page.
 *
 * Elle est posée ici, et non dans les gabarits : une marge déclarée en style
 * inline ne se laisse plus contredire, or elle doit justement sauter dans un
 * cas précis — voir juste en dessous.
 */
main.wp-block-group {
	padding-bottom: var( --wp--preset--spacing--60 );
}

/*
 * Sauf quand la page se termine par un aplat.
 *
 * Une bande de couleur ou une photo pleine largeur porte déjà sa propre
 * respiration, en padding interne. Lui ajouter la marge du `<main>` insère un
 * ruban blanc entre elle et le pied de page — le contraire de l'effet
 * recherché, qui est de faire se toucher les aplats.
 *
 * Deux niveaux, parce que la dernière section n'est pas toujours au même
 * endroit : posée directement dans le gabarit (fiche produit), ou enveloppée
 * dans le contenu de la page (accueil, qui finit sur la photo de Saillon).
 */
main.wp-block-group:has( > :last-child:is( .has-background, .wp-block-cover ) ),
main.wp-block-group:has( > :last-child > :last-child:is( .has-background, .wp-block-cover ) ) {
	padding-bottom: 0;
}

/* -------------------------------------------------------------------
 * Sections mi-texte mi-photo
 *
 * La photo va jusqu'au bord de la fenêtre, mais le texte doit rester aligné sur
 * la colonne du site. Un padding fixe ne suffit pas : sur un grand écran il faut
 * rattraper la marge du conteneur centré, d'où le max().
 * ------------------------------------------------------------------- */

.pd-demi-texte {
	padding-inline-start: max(
		var( --wp--style--root--padding-left ),
		calc( ( 100vw - var( --wp--style--global--content-size ) ) / 2 )
	);
	padding-inline-end: var( --wp--preset--spacing--50 );
}

.pd-demi-texte--droite {
	padding-inline-end: max(
		var( --wp--style--root--padding-left ),
		calc( ( 100vw - var( --wp--style--global--content-size ) ) / 2 )
	);
	padding-inline-start: var( --wp--preset--spacing--50 );
}

/* Une fois les colonnes empilées, la photo reprend une hauteur propre. */
@media ( max-width: 781px ) {
	.pd-demi-texte,
	.pd-demi-texte--droite {
		padding-inline: var( --wp--style--root--padding-left );
	}

	.pd-demi-photo .wp-block-cover {
		min-height: 60vw;
	}
}

/* -------------------------------------------------------------------
 * Titres posés sur une photo
 * ------------------------------------------------------------------- */

.pd-hero-titre {
	color: var( --wp--preset--color--blanc );
	text-shadow: 0 2px 24px rgba( 0, 0, 0, 0.3 );
}

/*
 * Le contenu d'un bandeau photo s'aligne sur la colonne du site.
 *
 * Un bloc Couverture pleine largeur imbriqué dans un conteneur qui porte déjà
 * la marge globale voit son padding remis à zéro par WordPress : son texte
 * viendrait alors se coller à 18 px du bord, alors que tout le reste de la page
 * commence bien plus loin. On rétablit la marge, calculée comme pour les
 * demi-sections.
 */
.wp-block-cover.pd-section {
	/* Le padding latéral du bloc s'ajouterait à celui du conteneur interne. */
	padding-inline: 0;
}

.wp-block-cover.pd-section > .wp-block-cover__inner-container {
	padding-inline: max(
		var( --wp--style--root--padding-left ),
		calc( ( 100vw - var( --wp--style--global--content-size ) ) / 2 )
	);
}

/* -------------------------------------------------------------------
 * Détails typographiques
 * ------------------------------------------------------------------- */

/* La maquette ne fait jamais courir une ligne au-delà d'une cinquantaine de signes. */
.pd-colonne-texte {
	max-width: 34em;
}

/* Les trois arguments : bio, local et familial, pratique. */
.pd-argument img {
	height: clamp( 5rem, 8vw, 6.5rem );
	width: auto;
}

.pd-argument p {
	color: var( --wp--preset--color--brun );
	font-weight: 700;
}