/*
 * blocks/showcase-viewport.css — section plein écran dark-grad, showcase 50/50
 * inversable + visuel photo-frame. Complète guest.css, ne redéfinit aucune primitive.
 */

.section--viewport {
	min-height: 100vh;
	display: flex;
	align-items: center;
}
.section--viewport .container { width: 100%; }

@media (min-width: 1021px) {
	.showcase--even .showcase__grid,
	.showcase--even .showcase__grid--reverse {
		grid-template-columns: 1fr 1fr;
	}
}

/* Tablette/iPad (768-1020px) : garder le côte-à-côte du desktop plutôt que
   l'empilement image/texte hérité du palier partagé de guest.css — sur fond
   sombre plein écran, l'image empilée en pleine largeur lit comme un grand
   bloc vide. */
@media (min-width: 768px) and (max-width: 1020px) {
	.showcase--even .showcase__grid,
	.showcase--even .showcase__grid--reverse {
		grid-template-columns: 1fr 1fr;
		gap: var(--s12);
	}
	.showcase--even .showcase__grid--reverse .showcase__visual { order: 2; }
	/* Sans le min-height:100vh du desktop, le padding du section--viewport
	   (64px) qui s'ajoute à celui de .showcase (déjà réduit à 40px sur cette
	   plage) double l'espace vertical et se lit comme une grande marge
	   vide — on ne garde que le padding de la carte .showcase. */
	.section--viewport { padding-block: 0; min-height: 0; }
}
.showcase__grid > *, .showcase__grid--reverse > * { min-width: 0; }

.showcase--top .showcase__text { align-self: start; }

@media (max-width: 900px) {
	.section--viewport { min-height: 0; }
}

.section--dark-grad {
	background: radial-gradient(900px 460px at 50% -15%, rgba(216,255,84,.16), transparent 60%), var(--ink);
	color: #fff;
}
.section--dark-grad .eyebrow { background: rgba(216,255,84,.14); color: var(--signal); }
.section--dark-grad h2,
.section--dark-grad h3 { color: #fff; }
.section--dark-grad p,
.section--dark-grad .showcase p { color: rgba(255,255,255,.78); }
.section--dark-grad .feature-list li span { color: rgba(255,255,255,.88); }
.section--dark-grad .feature-list svg { color: var(--signal); }

/* Photo pleine case + badge flottant (visuel showcase) */
.photo-frame { position: relative; height: 100%; min-height: 380px; overflow: hidden; }
.photo-frame img {
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: cover;
	border-radius: var(--radius-lg);
	display: block;
}
.photo-frame .badge.hero__visual-badge { right: var(--s5); left: auto; bottom: var(--s5); max-width: calc(100% - var(--s5) * 2); }

@media (max-width: 480px) {
	.photo-frame .badge.hero__visual-badge { white-space: normal; text-align: left; }
}