/* ==================================================================================================================
   TOPMEDICA HERO P0

   Single-state responsive HERO. Layout řídí pouze CSS; P0 nemá
   slider, navigaci, autoplay ani vlastní JavaScript.
   ================================================================================================================== */


/* ------------------------------------------------------------------------------------------------------------------
   01 / DESIGN PARAMETRY

   Obsahové hodnoty přicházejí ze shortcodu. Veškeré laditelné
   hodnoty vzhledu, geometrie a přechodů jsou soustředěné zde.
   ------------------------------------------------------------------------------------------------------------------ */

.topmedica-hero {
	/* Společné barvy a rozměry. */
	--tm-hero-canvas: #d7e2f5;
	--tm-hero-color-primary: #322882;
	--tm-hero-color-cta-on: #FF7800;
	--tm-hero-color-white: #FFFFFF;
	--tm-hero-font-family: "Plus Jakarta Sans", sans-serif;
	--tm-hero-content-outer: 1240px;
	--tm-hero-content-inner: 1200px;
	--tm-hero-gutter-x: 20px;

	/* Základní CTA kontrakt. */
	--tm-hero-cta-right: 20px;
	--tm-hero-cta-bottom: 20px;
	--tm-hero-cta-min-w: 140px;
	--tm-hero-cta-min-h: 34px;
	--tm-hero-cta-label-left-ratio: 7.142857%;
	--tm-hero-cta-label-right-ratio: 23.571429%;
	--tm-hero-cta-arrow-off-w-ratio: 14.285714%;
	--tm-hero-cta-arrow-off-h-ratio: 52.941176%;
	--tm-hero-cta-arrow-on-w-ratio: 15.732286%;
	--tm-hero-cta-arrow-on-h-ratio: 58.823529%;
	--tm-hero-cta-arrow-center-x: 88.214286%;
	--tm-hero-cta-arrow-center-y: 40%;
	--tm-hero-cta-arrow-size-factor: 0.70;
	--tm-hero-cta-interaction-scale: 1.10;
	--tm-hero-cta-transition: 180ms ease;
	--tm-hero-cta-focus-width: 3px;
	--tm-hero-cta-focus-offset: 3px;
	--tm-hero-body-link-interaction-scale: 1.10;
	--tm-hero-body-link-transition: 180ms ease;

	/* PORTRAIT 320–479: plynulá řada 320×260 → 479×390. */
	--tm-hero-scene-height: clamp(260px, calc(81.761006vw - 1.63522px), 390px);
	--tm-hero-visual-max-w: 479px;
	--tm-hero-visual-max-h: 390px;
	--tm-hero-h1-top: clamp(13.2593px, calc(4.169591vw - 0.083392px), 19.88895px);
	--tm-hero-h1-size: clamp(42px, calc(13.207547vw - 0.264151px), 63px);
	--tm-hero-ul-top: clamp(76.3021px, calc(23.994371vw - 0.479887px), 114.45315px);
	--tm-hero-ul-w: clamp(110px, calc(34.591195vw - 0.691824px), 165px);
	--tm-hero-li-size: clamp(13px, calc(4.08805vw - 0.081761px), 19.5px);
	--tm-hero-li-lh: clamp(18px, calc(5.660377vw - 0.113208px), 27px);
	--tm-hero-li-gap: clamp(8px, calc(2.515723vw - 0.050314px), 12px);
	--tm-hero-cta-w: clamp(var(--tm-hero-cta-min-w), calc(44.025157vw - 0.880503px), 210px);
	--tm-hero-cta-h: clamp(var(--tm-hero-cta-min-h), calc(10.691824vw - 0.213836px), 51px);
	--tm-hero-cta-label-size: clamp(12px, calc(3.773585vw - 0.075472px), 18px);
}

@media (min-width: 480px) {

	.topmedica-hero {
		/* COMPACT 480–779: baseline 2:1. */
		--tm-hero-scene-height: clamp(240px, 50vw, 389.5px);
		--tm-hero-visual-max-w: 779px;
		--tm-hero-visual-max-h: 390px;
		--tm-hero-h1-top: clamp(18.934px, 3.944583vw, 30.728304px);
		--tm-hero-h1-size: clamp(48px, 10vw, 77.9px);
		--tm-hero-ul-top: clamp(92.907px, 19.355625vw, 150.780319px);
		--tm-hero-ul-w: clamp(200px, 41.666667vw, 324.583333px);
		--tm-hero-li-size: clamp(15px, calc(3.125017vw - 0.00008px), 24.3438px);
		--tm-hero-li-lh: clamp(24px, calc(4.682274vw + 1.525084px), 38px);
		--tm-hero-li-gap: 4px;
		--tm-hero-cta-w: clamp(var(--tm-hero-cta-min-w), 29.166667vw, 227.208333px);
		--tm-hero-cta-h: clamp(var(--tm-hero-cta-min-h), 7.083333vw, 55.179167px);
		--tm-hero-cta-label-size: clamp(12px, 2.5vw, 19.475px);
	}

}

@media (min-width: 780px) {

	.topmedica-hero {
		/* LANDSCAPE 780–1560: baseline 13:4, poté pevný visual cap. */
		--tm-hero-scene-height: clamp(240px, 30.769231vw, 480px);
		--tm-hero-visual-max-w: 1560px;
		--tm-hero-visual-max-h: 480px;
		--tm-hero-h1-top: clamp(18.1117px, 2.322013vw, 36.2234px);
		--tm-hero-h1-size: clamp(66px, 8.461538vw, 132px);
		--tm-hero-ul-top: clamp(110.1002px, 14.11541vw, 220.2004px);
		--tm-hero-ul-w: clamp(260px, 33.333333vw, 520px);
		--tm-hero-li-size: clamp(16px, 2.051282vw, 32px);
		--tm-hero-li-lh: clamp(29px, 3.717949vw, 58px);
		--tm-hero-li-gap: 0px;
		--tm-hero-cta-w: clamp(var(--tm-hero-cta-min-w), 17.948718vw, 280px);
		--tm-hero-cta-h: clamp(var(--tm-hero-cta-min-h), 4.358974vw, 68px);
		--tm-hero-cta-label-size: clamp(12px, 1.538462vw, 24px);
	}

}


/* ------------------------------------------------------------------------------------------------------------------
   02 / ČTYŘVRSTVÁ SCÉNA
   ------------------------------------------------------------------------------------------------------------------ */

.topmedica-hero {
	position: relative;
	left: 50%;
	isolation: isolate;
	width: 100vw;
	max-width: none;
	height: var(--tm-hero-scene-height);
	margin: 0 0 0 -50vw;
	padding: 0;
	overflow: hidden;
	overflow: clip;
	color: var(--tm-hero-color-primary);
	box-sizing: border-box;
}

.topmedica-hero *,
.topmedica-hero *::before,
.topmedica-hero *::after {
	box-sizing: inherit;
}

.topmedica-hero__canvas,
.topmedica-hero__artwork,
.topmedica-hero__textsafe,
.topmedica-hero__content {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
}

.topmedica-hero__canvas {
	z-index: 1;
	width: 100%;
	height: 100%;
	background: var(--tm-hero-canvas);
}

.topmedica-hero__artwork,
.topmedica-hero__textsafe {
	display: flex;
	align-items: flex-start;
	overflow: hidden;
}

.topmedica-hero__artwork {
	z-index: 2;
	justify-content: flex-end;
}

.topmedica-hero__textsafe {
	z-index: 3;
	justify-content: center;
}

.topmedica-hero__visual {
	flex: 0 0 auto;
	width: auto;
	max-width: min(100%, var(--tm-hero-visual-max-w));
	height: auto;
	max-height: min(100%, var(--tm-hero-visual-max-h));
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: contain;
}

.topmedica-hero__visual--compact,
.topmedica-hero__visual--landscape {
	display: none;
}

@media (min-width: 480px) {

	.topmedica-hero__visual--portrait {
		display: none;
	}

	.topmedica-hero__visual--compact {
		display: block;
	}

}

@media (min-width: 780px) {

	.topmedica-hero__visual--compact {
		display: none;
	}

	.topmedica-hero__visual--landscape {
		display: block;
	}

}


/* ------------------------------------------------------------------------------------------------------------------
   03 / ŽIVÝ CONTENT
   ------------------------------------------------------------------------------------------------------------------ */

.topmedica-hero__content {
	z-index: 4;
	left: 50%;
	right: auto;
	width: min(100%, var(--tm-hero-content-outer));
	max-width: var(--tm-hero-content-outer);
	transform: translateX(-50%);
}

.topmedica-hero .topmedica-hero__headline,
.topmedica-hero .topmedica-hero__body {
	position: absolute;
	left: max(var(--tm-hero-gutter-x), calc((100% - var(--tm-hero-content-inner)) / 2));
	width: var(--tm-hero-ul-w);
	max-width: calc(100% - (2 * var(--tm-hero-gutter-x)));
	margin: 0;
	padding: 0;
	color: var(--tm-hero-color-primary);
	font-family: var(--tm-hero-font-family);
	font-weight: 400;
}

.topmedica-hero .topmedica-hero__headline {
	top: var(--tm-hero-h1-top);
	width: auto;
	font-size: var(--tm-hero-h1-size);
	line-height: 1;
}

.topmedica-hero .topmedica-hero__body {
	top: var(--tm-hero-ul-top);
	list-style: none;
	font-size: var(--tm-hero-li-size);
	line-height: var(--tm-hero-li-lh);
}

.topmedica-hero .topmedica-hero__body > li {
	margin: 0 0 var(--tm-hero-li-gap);
	padding: 0;
}

.topmedica-hero .topmedica-hero__body > li:last-child {
	margin-bottom: 0;
}

.topmedica-hero .topmedica-hero__body > li > .topmedica-hero__body-link,
.topmedica-hero .topmedica-hero__body > li > .topmedica-hero__body-link:visited {
	display: inline-block;
	max-width: 100%;
	color: inherit;
	font: inherit;
	font-weight: 400;
	text-decoration: none;
	transform: scale(1);
	transform-origin: center center;
	transition: transform var(--tm-hero-body-link-transition);
}

.topmedica-hero .topmedica-hero__body > li > .topmedica-hero__body-link:hover,
.topmedica-hero .topmedica-hero__body > li > .topmedica-hero__body-link:focus-visible {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	transform: scale(var(--tm-hero-body-link-interaction-scale));
}


/* ------------------------------------------------------------------------------------------------------------------
   04 / CTA – ORGANICKÁ PILULE
   ------------------------------------------------------------------------------------------------------------------ */

.topmedica-hero .topmedica-hero__cta {
	position: absolute;
	right: max(var(--tm-hero-cta-right), calc((100% - var(--tm-hero-content-inner)) / 2));
	bottom: var(--tm-hero-cta-bottom);
	display: block;
	width: var(--tm-hero-cta-w);
	height: var(--tm-hero-cta-h);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--tm-hero-color-primary);
	font-family: var(--tm-hero-font-family);
	font-size: var(--tm-hero-cta-label-size);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.03em;
	text-decoration: none;
	isolation: isolate;
	transform: scale(1);
	transform-origin: center center;
	transition: transform var(--tm-hero-cta-transition);
}

.topmedica-hero .topmedica-hero__content > .topmedica-hero__cta::before,
.topmedica-hero .topmedica-hero__content > .topmedica-hero__cta::after {
	all: initial;
	position: absolute;
	z-index: 1;
	inset: 0;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
	opacity: 1;
	pointer-events: none;
	transform: none;
	transform-origin: center center;
}

.topmedica-hero .topmedica-hero__content > .topmedica-hero__cta::before {
	background-image: url("../img/cta/topmedica-hero-cta-organic-pill-off-bg.svg");
}

.topmedica-hero .topmedica-hero__content > .topmedica-hero__cta::after {
	background-image: url("../img/cta/topmedica-hero-cta-organic-pill-on-bg.svg");
	opacity: 0;
	transition: opacity var(--tm-hero-cta-transition);
}

.topmedica-hero .topmedica-hero__cta-arrow {
	position: absolute;
	display: block;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: contain;
	vertical-align: top;
	pointer-events: none;
	transition: opacity var(--tm-hero-cta-transition);
}

.topmedica-hero .topmedica-hero__cta-arrow--off {
	opacity: 1;
}

.topmedica-hero .topmedica-hero__cta-arrow--on {
	opacity: 0;
}

.topmedica-hero__cta-label {
	position: absolute;
	z-index: 2;
	top: 0;
	right: var(--tm-hero-cta-label-right-ratio);
	bottom: 0;
	left: var(--tm-hero-cta-label-left-ratio);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tm-hero-color-primary);
	white-space: nowrap;
	transition: color var(--tm-hero-cta-transition);
}

.topmedica-hero .topmedica-hero__cta-arrow {
	z-index: 3;
	top: var(--tm-hero-cta-arrow-center-y);
	left: var(--tm-hero-cta-arrow-center-x);
	right: auto;
	scale: var(--tm-hero-cta-arrow-size-factor);
	transform: translate(-50%, -50%);
	transform-origin: center center;
}

.topmedica-hero .topmedica-hero__cta-arrow--off {
	width: var(--tm-hero-cta-arrow-off-w-ratio);
	height: var(--tm-hero-cta-arrow-off-h-ratio);
}

.topmedica-hero .topmedica-hero__cta-arrow--on {
	width: var(--tm-hero-cta-arrow-on-w-ratio);
	height: var(--tm-hero-cta-arrow-on-h-ratio);
}

.topmedica-hero .topmedica-hero__cta:hover,
.topmedica-hero .topmedica-hero__cta:focus-visible {
	background: transparent;
	color: var(--tm-hero-color-white);
	text-decoration: none;
	transform: scale(var(--tm-hero-cta-interaction-scale));
}

.topmedica-hero__cta:hover .topmedica-hero__cta-arrow--off,
.topmedica-hero__cta:focus-visible .topmedica-hero__cta-arrow--off {
	opacity: 0;
}

.topmedica-hero__cta:hover .topmedica-hero__cta-arrow--on,
.topmedica-hero__cta:focus-visible .topmedica-hero__cta-arrow--on {
	opacity: 1;
}

.topmedica-hero .topmedica-hero__cta:hover::after,
.topmedica-hero .topmedica-hero__cta:focus-visible::after {
	opacity: 1;
}

.topmedica-hero__cta:hover .topmedica-hero__cta-label,
.topmedica-hero__cta:focus-visible .topmedica-hero__cta-label {
	color: var(--tm-hero-color-white);
}

.topmedica-hero .topmedica-hero__cta:focus-visible {
	outline: var(--tm-hero-cta-focus-width) solid var(--tm-hero-color-white);
	outline-offset: var(--tm-hero-cta-focus-offset);
}

@media (prefers-reduced-motion: reduce) {

	.topmedica-hero {
		--tm-hero-cta-transition: 0.01ms linear;
		--tm-hero-body-link-transition: 0.01ms linear;
	}

}