/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	background: var(--bg-hero);
}


.hero__inner {
	position: relative;
	z-index: 1;
	padding-top: clamp(1.5rem, 3vw, 2.75rem);
	padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

.hero__top {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 5vw, 4rem);
	/* The centre sheet is taller than the copy, so top-aligning left the text
	   hanging in the upper half of the section. Centre it against the sheet. */
	align-items: center;
}

.hero__title {
	font-size: clamp(2.5rem, 4.9vw, 3.85rem);
	line-height: 1.06;
	margin-bottom: 1.5rem;
}

.hero__text {
	font-size: 1.18rem;
	line-height: 1.7;
	max-width: 52ch;
	margin-bottom: 2.25rem;
}

.hero__cta { margin-bottom: 0; }

/* Media */
.hero__media { position: relative; }
.hero__img {
	width: 100%;
	aspect-ratio: 4 / 3.4;
	object-fit: cover;
	border-radius: var(--radius-lg);
}
.hero__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #dce9ff, #eef0f8);
	color: var(--primary);
}
.hero__img--placeholder svg { width: 5rem; height: 5rem; opacity: 0.55; }

@media (max-width: 900px) {
	.hero__top { grid-template-columns: 1fr; }
	.hero__media { order: -1; }
	.hero__img { aspect-ratio: 16 / 10; }
	/* Homepage: the "Kde nás najdete" sheet sat ABOVE the headline on phones and
	   repeats the Naše centra section a scroll below — drop it there. */
	.hero:not(.hero--centrum) .hero__media:has(> .hero__sheet) { display: none; }
}