/* Hero — full-bleed photo with a dark gradient, header sits on top. */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-bottom: 80px;
	overflow: hidden;
}

.hero__media {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hero__media img,
.hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The video sits over the photo and fades in once it is actually playing, so a
 * blocked or slow load simply leaves the photo showing.
 */
.hero__video {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
}

.hero__video.is-playing { opacity: 1; }

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(26, 41, 74, 0.35), rgba(26, 41, 74, 0.8));
}

.hero__container {
	position: relative;
	width: 100%;
	max-width: calc(var(--container) + var(--gutter-mobile) * 2);
	margin: 0 auto;
	padding: 140px var(--gutter-mobile) 0;
}

/* Rating */

.hero__rating {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: 80px;
}

.hero__rating-icon {
	display: flex;
	align-items: flex-start;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	padding: 12px;
	border-radius: var(--radius-md);
	background: var(--color-neutral-7);
	backdrop-filter: blur(13.35px);
}

.hero__rating-icon img { width: 18.48px; height: 18.48px; }

.hero__rating-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-2);
	width: 217px;
}

.hero__stars {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.hero__stars img { width: 101.382px; height: 15.346px; }

.hero__score {
	color: var(--color-neutral-7);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.16px;
}

.hero__rating-text {
	color: var(--color-neutral-7);
	font-size: var(--body-small-size);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--body-small-ls);
}

/* Bottom row */

.hero__bottom {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	gap: 40px;
}

.hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	max-width: 506px;
}

.hero__subtitle {
	/* An h1 for SEO (the visual headline below is a p), so pin the type. */
	margin: 0;
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-neutral-7);
	font-family: var(--font-heading);
	font-size: var(--h5-size);
	line-height: var(--h5-lh);
}

.hero__subtitle img { width: 14px; height: 21px; flex: 0 0 14px; }

.hero__headline {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.hero__title {
	margin: 0;
	color: var(--color-neutral-7);
	font-family: var(--font-heading);
	font-size: 40px;
	font-weight: var(--h1-weight);
	line-height: var(--h1-lh);
}

.hero__subheadline {
	color: var(--color-hero-muted);
	font-size: var(--body-main-size);
	font-weight: var(--body-main-weight);
	line-height: var(--body-main-lh);
}

.hero__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

/* Notice card */

.hero__card {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	/* Full width on phones; the Figma 301px card is a desktop column. */
	max-width: none;
	padding: var(--space-6);
	border: 1px solid var(--color-neutral-4);
	border-radius: var(--radius-lg);
	background: var(--color-neutral-7);
}

.hero__card-inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-7);
	width: 100%;
	max-width: none;
}

.hero__card-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.hero__card-title {
	color: var(--color-accent);
	font-size: var(--h6-size);
	font-weight: var(--h6-weight);
	line-height: var(--h6-lh);
	letter-spacing: var(--h6-ls);
}

.hero__card-desc {
	color: var(--color-neutral-1);
	font-size: var(--body-secondary-size);
	line-height: var(--body-lh);
	letter-spacing: var(--body-secondary-ls);
}

.hero__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.hero__list-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3);
	border: 1px solid var(--color-neutral-4);
	border-radius: var(--radius-sm);
	color: var(--color-primary);
	font-size: var(--body-secondary-size);
	line-height: var(--body-lh);
	letter-spacing: var(--body-secondary-ls);
}

.hero__list-item img {
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
}

@media (min-width: 768px) {
	.hero__title { font-size: 52px; }
}

@media (min-width: 1024px) {
	.hero__container { padding: 162px var(--gutter) 0; }
	.hero__rating { margin-bottom: 185px; }
	.hero__bottom {
		flex-direction: row;
		align-items: flex-end;
		gap: var(--space-8);
	}
	.hero__title { font-size: var(--h1-size); }
	.hero__card {
		/*
		 * min-height, not height: 351px is the Figma's Czech card, and longer
		 * copy overflowed the white box on the English site ("We are accepting
		 * new patients" wraps to two lines where "Přijímáme nové pacienty" does
		 * not). The card grows instead of spilling.
		 *
		 * flex: 0 1, not 0 0 — a fixed basis cannot shrink and overflows the
		 * 1340px container on narrower desktops. Same rule as everywhere else.
		 */
		min-height: 351px;
		flex: 0 1 301px;
	}
}