/*
 * tdn-page-hero — title + subtitle hero, used on all internal pages
 * Spec: docs/design-system-tdn.md + Figma node 8115:4841
 *
 * Required HTML structure (cf. tdn/data/patterns/non-synced/tdn-page-hero.json):
 *
 *   <section class="tdn-page-hero">
 *     <img class="tdn-page-hero__shape tdn-page-hero__shape--left" …>
 *     <img class="tdn-page-hero__shape tdn-page-hero__shape--right" …>
 *     <div class="tdn-page-hero__inner">
 *       <h1 class="tdn-page-hero__title">
 *         <span class="tdn-page-hero__title-line">Parlons de votre</span>
 *         <span class="tdn-page-hero__title-line tdn-page-hero__title-line--accent">prochain événement.</span>
 *       </h1>
 *       <p class="tdn-page-hero__subtitle">…<strong>highlight</strong>…</p>
 *     </div>
 *   </section>
 */

.tdn-page-hero {
	position: relative;
	padding: 232px 24px 96px;
	background: var(--tdn-color-surface-subtle, #fef6f9);
	text-align: center;
	isolation: isolate;
	/* No overflow:hidden — we want the cool shapes visible at viewport edges.
	 * Page-level overflow-x:clip (template-fullwidth.css) prevents horizontal scroll. */
}

/* --- Decorative cool shapes -------------------------------------- */
/* PNGs are pre-clipped by Figma's parent-clipping export logic:
 *   - cool-shapes-left.png (200×240): half-shapes on its LEFT edge
 *   - cool-shapes-right.png (195×240): half-shapes on its RIGHT edge
 * Position with left:0 / right:0 so the half-shapes hit the viewport
 * edges (the intended Figma "shape cut by edge" effect).
 *
 * Vertical positions are asymmetric in Figma (left at y=195, right
 * at y=314 — measured from frame top in node 8115:4744). */

.tdn-page-hero__shape {
	position: absolute;
	width: auto;
	height: 240px;
	opacity: 0.7;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.tdn-page-hero__shape--left {
	top: 195px;
	left: 0;
}

.tdn-page-hero__shape--right {
	top: 314px;
	right: 0;
}

@media (max-width: 1024px) {
	.tdn-page-hero {
		padding: 160px 16px 72px;
	}

	.tdn-page-hero__shape {
		display: none;
	}
}

/* --- Inner column ------------------------------------------------ */

.tdn-page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 917px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* --- Title (bicolore, 2 lignes) --------------------------------- */

.tdn-page-hero__title {
	margin: 0;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-font-weight-regular, 400);
	font-size: clamp(48px, 6vw, 82px);
	line-height: 1;
	letter-spacing: -0.06em;
	color: var(--tdn-color-midnight, #1a1a2e);
}

.tdn-page-hero__title-line {
	display: block;
}

.tdn-page-hero__title-line--accent {
	color: var(--tdn-color-pink-primary, #C06D80);
}

/* --- Subtitle ---------------------------------------------------- */

.tdn-page-hero__subtitle {
	margin: 0;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-size: clamp(18px, 1.5vw, 24px);
	line-height: 1.45;
	color: var(--tdn-color-midnight, #1a1a2e);
}

.tdn-page-hero__subtitle strong {
	font-weight: var(--tdn-font-weight-bold, 700);
}

/* --- Responsive mobile ------------------------------------------ */
/* Harmonisation avec tdn-page-hero-dark @767 mais HAUTEUR ADAPTÉE :
 * Contact = seule page hero-light, son contenu (titre 3 lignes + subtitle court)
 * tient en ~250px → min-height 80vh créerait 500px de vide en bas. min-height
 * auto + padding généreux (96 top + 64 bottom) = hero compact qui respire mais
 * ne gaspille pas l'écran. padding-top 96 passe sous le nav sticky. */
@media (max-width: 767px) {
	.tdn-page-hero {
		min-height: auto;
		padding: 140px 16px 100px;
	}

	.tdn-page-hero__inner {
		gap: 32px;
	}

	.tdn-page-hero__title {
		font-size: clamp(32px, 8vw, 40px);
		line-height: 1.15;
		letter-spacing: -0.05em;
	}
}