/*
 * core/columns — colonnes séparées par un filet.
 * Le filet disparaît sous le point de bascule, où les colonnes s'empilent :
 * une ligne verticale entre deux blocs empilés n'aurait plus de sens.
 */

@media (min-width: 782px) {

	.wp-block-columns.is-style-gaia-divided > .wp-block-column + .wp-block-column {
		border-left: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--border);
		padding-left: var(--wp--preset--spacing--50);
	}
}

/*
 * core/columns — ordre inversé à partir du point de bascule (style gaia-reverse).
 * Sous 782 px, les colonnes s'empilent dans l'ordre du document : visuel, puis texte.
 */

@media (min-width: 782px) {

	.wp-block-columns.is-style-gaia-reverse {
		flex-direction: row-reverse;
	}
}

/*
 * Accordéon d'images (« image accordion ») : des volets côte à côte, et celui
 * qu'on survole — ou dont on atteint le lien au clavier — s'ouvre en largeur.
 *
 * L'effet ne vit qu'à partir de 1024 px : entre 782 et 1023, quatre volets
 * ouverts à tour de rôle laisseraient des bandes de 120 px où le titre se
 * casse en plein mot. On y pose une grille de deux ; sous 782, les colonnes
 * s'empilent comme toutes les colonnes.
 */
.wp-block-columns.is-style-gaia-expand > .wp-block-column > * {
	margin: 0;
	height: 100%;
}

/* Le lien du titre couvre tout le volet : on clique n'importe où sur l'image. */
.wp-block-columns.is-style-gaia-expand .wp-block-cover :where(h2, h3, h4) a {
	text-decoration: none;
}

.wp-block-columns.is-style-gaia-expand .wp-block-cover :where(h2, h3, h4) a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Empilés, quatre volets à pleine hauteur feraient quatre écrans : on les abaisse. */
@media (max-width: 781px) {

	.wp-block-columns.is-style-gaia-expand .wp-block-cover {
		min-height: 16rem !important;
	}
}

@media (min-width: 782px) and (max-width: 1023px) {

	.wp-block-columns.is-style-gaia-expand {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.is-style-gaia-expand > .wp-block-column {
		flex: 1 1 calc(50% - var(--wp--style--block-gap, 1rem)) !important;
	}
}

@media (min-width: 1024px) {

	.wp-block-columns.is-style-gaia-expand > .wp-block-column {
		flex: 1 1 0 !important;
		min-width: 0;
		transition: flex-grow 0.5s cubic-bezier(0.2, 0, 0.2, 1);
	}

	.wp-block-columns.is-style-gaia-expand > .wp-block-column:hover,
	.wp-block-columns.is-style-gaia-expand > .wp-block-column:focus-within {
		flex-grow: 2.4 !important;
	}
}

/*
 * Volet fermé : seul le titre reste, posé au pied de l'image ; le texte se
 * déplie à l'ouverture. Replié par l'opacité et la hauteur, jamais par display
 * ni visibility : un lecteur d'écran le lit toujours. Sans le repli en hauteur,
 * le texte invisible gardait sa place et les titres des volets fermés
 * flottaient au-dessus du bas (vu à la recette). Pas de survol (tablette en
 * paysage) : tout reste visible, rien ne s'ouvre.
 */
@media (min-width: 1024px) and (hover: hover) {

	.wp-block-columns.is-style-gaia-expand .wp-block-cover__inner-container > :not(:first-child) {
		max-height: 0;
		margin-block-start: 0;
		overflow: hidden;
		opacity: 0;
		transition:
			opacity var(--wp--custom--transition--base),
			max-height 0.5s cubic-bezier(0.2, 0, 0.2, 1);
	}

	.wp-block-columns.is-style-gaia-expand > .wp-block-column:hover .wp-block-cover__inner-container > :not(:first-child),
	.wp-block-columns.is-style-gaia-expand > .wp-block-column:focus-within .wp-block-cover__inner-container > :not(:first-child) {
		max-height: 12rem;
		margin-block-start: var(--wp--preset--spacing--20);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wp-block-columns.is-style-gaia-expand > .wp-block-column {
		transition: none;
	}
}

/*
 * Barre de progression (« progress bar »), faite de deux colonnes : la
 * première, pleine, a la largeur de la valeur ; la seconde est le reste.
 *
 * La barre est muette pour un lecteur d'écran — deux colonnes vides. La valeur
 * doit donc être écrite dans le libellé qui la précède (« Conception — 80 % »).
 */
.wp-block-columns.is-style-gaia-meter {
	flex-wrap: nowrap !important;
	gap: 0 !important;
	height: var(--wp--preset--spacing--20);
	margin-block: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--border);
}

.wp-block-columns.is-style-gaia-meter > .wp-block-column:first-child {
	background-color: var(--wp--preset--color--primary);
	border-radius: inherit;
}

@media (forced-colors: active) {

	.wp-block-columns.is-style-gaia-meter {
		border: 1px solid CanvasText;
	}

	.wp-block-columns.is-style-gaia-meter > .wp-block-column:first-child {
		background-color: CanvasText;
		forced-color-adjust: none;
	}
}