/*
 * « Ouverture de page illustrée » — the opening of a main section: title, light
 * line and chapô at left, an illustration with a hard shadow at right. Loaded only
 * when a group carries .is-style-gb-ouverture-illustree.
 *
 * Same rhythm as the homepage opening (ouverture.css): the rive is a flow group
 * whose vertical rhythm is set here, not by the theme block gap. The two columns
 * are a grid, like « Le constat » (texte.css): the core Columns block would stack
 * at 782 px and ignore the ratio; the grid stacks at 1000 px, image under text.
 * Colours: currentColor only — the couple of the section does the rest.
 */

/* ───────────────────────────────────────────── the two columns ── */
.is-style-gb-ouverture-illustree .wp-block-columns.gb-ouverture__colonnes { display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.is-style-gb-ouverture-illustree .gb-ouverture__colonnes > .wp-block-column { margin: 0; min-inline-size: 0; flex-basis: auto !important; }

/* ────────────────────────────────────────────────── the rive ── */
/* Beside an illustration, the title has half the width of the homepage hero: one
   step below the display size, and never broken inside a word (« CERTIFICATI-ON »). */
.is-style-gb-ouverture-illustree .gb-ouverture__rive > h1 { font-size: var(--wp--preset--font-size--xx-large);
	overflow-wrap: normal; hyphens: manual; }
.is-style-gb-ouverture-illustree .gb-ouverture__rive > * { margin-block-start: clamp(1.6rem, 3.2vw, 2.8rem); margin-block-end: 0; }
.is-style-gb-ouverture-illustree .gb-ouverture__rive > :first-child { margin-block-start: 0; }
/* The light second line hugs the h1 — .34em of its own size, as on the homepage. */
.is-style-gb-ouverture-illustree .gb-ouverture__rive > .is-style-gb-lyrique { margin-block-start: 0.34em; }
.is-style-gb-ouverture-illustree .gb-ouverture__rive > .is-style-gb-chapo { max-inline-size: 46ch; }
.is-style-gb-ouverture-illustree .gb-ouverture__rive .wp-block-buttons { gap: 1rem; }
/* Outline hover: core puts the label directly in the <a> (see ouverture.css). */
.is-style-gb-ouverture-illustree .wp-block-button.is-style-outline .wp-block-button__link:hover { -webkit-text-fill-color: var(--gb-fond); }

/* ───────────────────────────────────────────── the illustration ── */
/* A 14 px relief, one step above the socle's 10 px: the relief of an illustration. */
.is-style-gb-ouverture-illustree .gb-ouverture__illu .wp-block-image { margin: 0; }
.is-style-gb-ouverture-illustree .gb-ouverture__illu img { display: block; inline-size: 100%; block-size: auto;
	box-shadow: 14px 14px 0 color-mix(in oklab, currentColor 22%, transparent);
	animation: gb-accoster 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes gb-accoster { from { opacity: 0; translate: 2rem 0; } }

/* ─────────────────────────────────────────────── adaptations ── */
@media (max-width: 1000px) {
	.is-style-gb-ouverture-illustree .wp-block-columns.gb-ouverture__colonnes { grid-template-columns: 1fr; }
	/* Under the text, the illustration stays a vignette, not a second hero. */
	.is-style-gb-ouverture-illustree .gb-ouverture__illu { max-inline-size: 28rem; }
}
@media (max-width: 760px) {
	.is-style-gb-ouverture-illustree .gb-ouverture__rive .wp-block-buttons,
	.is-style-gb-ouverture-illustree .gb-ouverture__rive .wp-block-button { inline-size: 100%; }
	.is-style-gb-ouverture-illustree .gb-ouverture__rive .wp-block-button__link { inline-size: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.is-style-gb-ouverture-illustree .gb-ouverture__illu img { animation: none; }
}