/*
 * blocks/hero-cover.css — hero secondaire, fond image (background-size:cover)
 * + contenu centré, avec slot optionnel (section incrustée) sous le texte.
 * Complète guest.css, ne redéfinit aucune primitive existante.
 */

.hero-cover {
	position: relative;
	min-height: clamp(380px, 60vh, 620px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hero-cover--with-slot {
	min-height: clamp(600px, 78vh, 860px);
}
/* Variante réduite (moitié) : pages avec un formulaire sous le hero, pour
   que le formulaire reste visible sans défiler. */
.hero-cover--compact {
	min-height: clamp(190px, 30vh, 310px);
}
.hero-cover--compact.hero-cover--with-slot {
	min-height: clamp(300px, 39vh, 430px);
}
.hero-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16,23,19,.55) 0%, rgba(16,23,19,.42) 55%, rgba(16,23,19,.62) 100%);
	z-index: 1;
}
.hero-cover__content {
	position: relative;
	z-index: 2;
	max-width: 620px;
	text-align: center;
	padding: var(--s10) var(--s6);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: var(--s10);
}
.hero-cover__content--with-slot { margin-bottom: 0; }
.hero-cover__content .eyebrow { background: rgba(216,255,84,.16); color: var(--signal); }
.hero-cover__content h2 { color: #fff; margin-top: var(--s4); font-size: clamp(2rem, 4vw, 2.8rem); }
.hero-cover__content p { color: rgba(255,255,255,.85); margin-top: var(--s4); }
.hero-cover__content .btn { margin-top: var(--s8); }

.hero-cover__slot {
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: var(--s10);
	margin-bottom: var(--s10);
}
.hero-cover__slot .section { padding-block: 0; }
.hero-cover__slot .container { max-width: 900px; }

/* iPad (portrait surtout) : le vh est trop généreux ici (proche de celui du
   desktop alors que le contenu est plus étroit) — on bascule sur des
   valeurs en vw/fixes pour éviter un hero disproportionné en hauteur. */
@media (min-width: 701px) and (max-width: 1100px) {
	.hero-cover { min-height: clamp(360px, 50vw, 480px); }
	.hero-cover--with-slot { min-height: clamp(520px, 66vw, 620px); }
	.hero-cover--compact { min-height: clamp(180px, 25vw, 240px); }
	.hero-cover--compact.hero-cover--with-slot { min-height: clamp(260px, 33vw, 310px); }
	.hero-cover__content { padding: var(--s8) var(--s6); margin-bottom: var(--s8); }
	.hero-cover__slot { margin-top: var(--s8); margin-bottom: var(--s8); }
}

@media (max-width: 700px) {
	.hero-cover { min-height: clamp(320px, 42vh, 460px); }
	.hero-cover--with-slot { min-height: clamp(480px, 90vh, 680px); }
	.hero-cover--compact { min-height: clamp(200px, 24vh, 260px); }
	.hero-cover--compact.hero-cover--with-slot { min-height: clamp(280px, 45vh, 360px); }
	.hero-cover__content { padding: var(--s8) var(--s5); }

	.hero-cover__slot [class*="grid-"] {
		display: flex;
		flex-wrap: nowrap;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-ms-overflow-style: none;
		scrollbar-width: none;
		padding-inline: var(--s5);
	}
	.hero-cover__slot [class*="grid-"]::-webkit-scrollbar { display: none; }
	.hero-cover__slot [class*="grid-"] > * { flex: 0 0 85%; scroll-snap-align: start; }
}