/* Clémentine Mailhac heroes: the home hero, the page heroes (Professionnels), the project heroes and the image openings.
   A photo full frame under the transparent header, the copy at the bottom left, an aside on the right, a foot line.
   Motion: transform and opacity only, once on load, nothing under reduced motion, never in the editor. Tokens only. */

:root { --cm-header-h: var(--wp--custom--layout--header-height-mobile); }
@media (min-width: 1024px) { :root { --cm-header-h: var(--wp--custom--layout--header-height); } }

/* ---------- frame ---------- */
.wp-block-cover.cm-hero { min-height: max(var(--wp--custom--layout--hero-min), 100svh); align-items: flex-end; padding-bottom: var(--wp--preset--spacing--40) !important; }
.wp-block-cover.cm-project-hero { min-height: max(var(--wp--custom--layout--hero-min), 86svh); }
.wp-block-cover.cm-intro-cover { min-height: max(calc(var(--wp--custom--layout--hero-min) * 0.85), 72svh); }
.wp-block-cover.cm-hero .wp-block-cover__inner-container { width: 100% !important; max-width: var(--wp--custom--layout--wide); margin-inline: auto; } /* core sets width: auto on positioned covers */
/* a thin red line under every hero photo (owner 2026-11-04) */
.wp-block-cover.cm-hero { border-bottom: var(--wp--custom--border--strong) solid var(--wp--preset--color--signature); }
.cm-hero--under-header.cm-hero--under-header { margin-top: calc(-1 * var(--cm-header-h)) !important; padding-top: calc(var(--cm-header-h) + var(--wp--preset--spacing--60)) !important; }

/* ---------- copy, aside, foot ---------- */
.cm-hero__in { display: grid !important; gap: var(--wp--preset--spacing--50); }
.cm-hero__copy { max-width: 46rem; }
.cm-hero__copy > * { margin: 0; }
.cm-hero__h1 { font-family: var(--wp--preset--font-family--label); font-size: var(--wp--preset--font-size--x-small); font-weight: var(--wp--custom--font-weight--medium); letter-spacing: var(--wp--custom--letter-spacing--eyebrow); line-height: var(--wp--custom--line-height--snug); }
.cm-hero .is-style-eyebrow { color: inherit; opacity: 0.9; }
.cm-hero .is-style-hero-title { max-width: 12ch; }
.cm-hero--page .is-style-hero-title { max-width: 18ch; font-size: clamp(2.25rem, 1.4637rem + 3.2258vw, 4.125rem); } /* the heroes keep their size when the other titles shrink (owner 2026-11-04) */
.cm-hero__lead { font-size: var(--wp--preset--font-size--large); line-height: var(--wp--custom--line-height--snug); max-width: 40ch; }
.cm-hero__small { font-family: var(--wp--preset--font-family--label); font-size: var(--wp--preset--font-size--x-small); letter-spacing: var(--wp--custom--letter-spacing--eyebrow); text-transform: uppercase; max-width: 60ch; }
.cm-hero__aside { font-size: var(--wp--preset--font-size--small); }
.cm-hero__aside .wp-block-buttons { margin-top: var(--wp--preset--spacing--20); }
.cm-hero__aside > * { margin: 0; }
.cm-hero__foot { padding-top: var(--wp--preset--spacing--30); border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--on-accent) 35%, transparent); font-family: var(--wp--preset--font-family--label); font-size: var(--wp--preset--font-size--x-small); letter-spacing: var(--wp--custom--letter-spacing--eyebrow); text-transform: uppercase; }
.cm-hero__foot > * { margin: 0; }
.cm-hero__foot .cm-scroll a { color: inherit; text-decoration: none; display: inline-flex; min-height: var(--wp--custom--control--min); align-items: center; }
.cm-hero__foot .cm-scroll a::after { content: " ↓"; white-space: pre; }
@media (min-width: 782px) {
	/* title on the left, the text on the right edge in a readable measure, not a narrow column (owner 2026-11-04) */
	.cm-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); column-gap: var(--wp--preset--spacing--70); }
	.cm-hero--page .cm-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
	.cm-hero__copy { grid-column: 1; align-self: end; }
	.cm-hero__aside { grid-column: 2; align-self: end; justify-self: end; width: 100%; }
	.cm-hero__foot { grid-column: 1 / -1; }
}

/* ---------- entrance (cm-anim--rise on the hero) ---------- */
@keyframes cm-rise { from { opacity: 0; translate: 0 var(--wp--custom--motion--rise); } }
@media (prefers-reduced-motion: no-preference) {
	:where(body:not(.editor-styles-wrapper)) .cm-anim--rise .cm-hero__copy > * { animation: cm-rise var(--wp--custom--transition--reveal) backwards; }
	:where(body:not(.editor-styles-wrapper)) .cm-anim--rise .cm-hero__copy > :nth-child(2) { animation-delay: var(--wp--custom--transition--reveal-step); }
	:where(body:not(.editor-styles-wrapper)) .cm-anim--rise .cm-hero__copy > :nth-child(n + 3) { animation-delay: calc(var(--wp--custom--transition--reveal-step) * 2); }
	:where(body:not(.editor-styles-wrapper)) .cm-anim--rise .cm-hero__aside > * { animation: cm-rise var(--wp--custom--transition--reveal) calc(var(--wp--custom--transition--reveal-step) * 3) backwards; }
}

/* ERP hero (owner 2026-11-04): the H1 as the display title with its subtitle, the question in DM Serif italic on the right */
.cm-hero__h1.cm-hero__h1--display { font-family: var(--wp--preset--font-family--heading); font-weight: var(--wp--custom--font-weight--bold); font-size: var(--wp--custom--font-size--hero-display); line-height: var(--wp--custom--line-height--display); letter-spacing: normal; text-transform: uppercase; }
.cm-hero__h1--display .cm-hero__sub { display: block; margin-top: var(--wp--preset--spacing--20); font-size: clamp(1.25rem, 0.95rem + 1.2vw, 2rem); line-height: var(--wp--custom--line-height--snug); }
.cm-hero__note { font-family: var(--wp--preset--font-family--label); font-size: var(--wp--preset--font-size--small); max-width: 62ch; }
.cm-hero__accent { font-family: var(--wp--preset--font-family--accent); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); line-height: var(--wp--custom--line-height--snug); letter-spacing: var(--wp--custom--letter-spacing--accent); }
/* the button and the call link side by side, the texts above on their own lines */
.cm-hero__aside { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: var(--wp--preset--spacing--40); row-gap: var(--wp--preset--spacing--30); }
.cm-hero__aside > :not(.wp-block-buttons):not(.cm-tlink) { flex-basis: 100%; }
.cm-hero__aside > .wp-block-buttons { margin-top: 0; }
/* hero foot (caption, Défiler): the text centred between the white line and the red line under the photo */
.wp-block-cover.cm-hero:has(.cm-hero__foot) { padding-bottom: 0 !important; }
.cm-hero__foot { padding-block: var(--wp--preset--spacing--40); }