/*
 * HERO sekce — styly.
 *
 * Struktura:
 *  .hero (container, max 1200)
 *    .hero__head        — eyebrow + H1 (přes ~70 % šířky)
 *    .hero__grid        — 2 sloupce pod nadpisem
 *      .hero__col--text — popis + buttons container + pomůžeme s
 *      .hero__col--media — figure s obrázkem + gradient overlay + stats overlay
 *
 * Pravidla:
 *  - Žádná snížená opacity na textu (var(--rp-color-text) = #F3F4F6 vždy plně).
 *  - Nadpisy weight 500, line-height 110 %, -3 % tracking.
 *  - Body text weight regular, -2 % tracking.
 *  - Border tone: rgba(243, 244, 246, 0.07) — bílá 7 % opacity.
 */

/* ─── Lokální tokeny pro Hero ─────────────────────── */
:root {
	--rp-hero-border: rgba(243, 244, 246, 0.07);
}

/* ─── Horní blok (eyebrow + H1) ──────────────────── */
.hero__head {
	max-width: 70%;
	margin-bottom: 48px;                         /* mezi H1 a obsahem pod ním */
}
@media (max-width: 1023px) {
	.hero__head { max-width: 100%; margin-bottom: 40px; }
}

.hero__eyebrow {
	display: inline-block;
	font-size: var(--rp-fs-sm);
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;                     /* -2 % */
	color: var(--rp-color-text);
	margin: 0 0 16px;                            /* mezi eyebrow a H1 */
}

.hero__title {
	font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
	font-weight: var(--rp-fw-medium);            /* 500 */
	line-height: var(--rp-lh-tight);             /* 110 % */
	letter-spacing: -0.03em;                     /* -3 % */
	color: var(--rp-color-text);
	margin: 0;
}

/* ─── Dvousloupcový blok pod nadpisem ────────────── */
.hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rp-space-7);
}
@media (min-width: 1024px) {
	.hero__grid {
		grid-template-columns: 6fr 5fr;          /* levá:pravá ≈ 54:46 % */
		gap: var(--rp-space-8);
		align-items: start;
	}
}

/* Pravý sloupec pod text na mobile */
@media (max-width: 1023px) {
	.hero__col--text  { order: 1; }
	.hero__col--media { order: 2; }
}

.hero__col--text > * + * {
	margin-top: var(--rp-space-6);
}

/* ─── Popis ─────────────────────────────────────── */
.hero__desc {
	color: var(--rp-color-text);
	font-size: 16px;                            /* fixní 16 px dle Figmy */
	line-height: var(--rp-lh-normal);           /* 150 % */
	letter-spacing: var(--rp-tracking-normal);
	max-width: 60ch;
}
.hero__desc p { margin: 0 0 var(--rp-space-3); color: inherit; }
.hero__desc p:last-child { margin-bottom: 0; }

/* ─── Tlačítka — kontejner ──────────────────────── */
.hero__actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--rp-space-5);                    /* 24 px mezi tlačítky */
	padding: 16px;                             /* 16 px po obvodu kontejneru */
	border: 1px solid var(--rp-hero-border);   /* 1 px #F3F4F6 7 % opacity */
	border-radius: var(--rp-radius-pill);
}

/*
 * Když není místo na 2 tlačítka vedle sebe, kontejner se „rozpustí"
 * (žádný border, padding, radius) a tlačítka jdou pod sebe — ale každé má
 * přirozenou šířku podle obsahu, ne přes celý container.
 */
@media (max-width: 600px) {
	.hero__actions {
		display: flex;
		flex-direction: column;
		align-items: flex-start;               /* tlačítka mají vlastní šířku, zarovnaná vlevo */
		gap: var(--rp-space-4);                /* 16 px mezi stackem */
		padding: 0;
		border: 0;
		border-radius: 0;
		width: auto;                            /* container není 100%, aby nepřebíjel align */
	}
}

/* ─── Tlačítko (společné) ───────────────────────── */
.hero-btn,
.hero-btn:hover,
.hero-btn:focus,
.hero-btn:visited {
	color: var(--rp-color-bg);                 /* přepsat globální a:hover (zelená) */
	text-decoration: none;
}
.hero-btn {
	position: relative;
	overflow: hidden;                          /* clip shine sweep do pill tvaru */
	display: inline-flex;
	align-items: center;
	gap: 24px;
	padding: 6px 6px 6px 32px;                 /* text vlevo 32 px, ikona vpravo těsně 6 px */
	border-radius: var(--rp-radius-pill);
	font-size: 14px;
	font-weight: var(--rp-fw-semibold);        /* 600 */
	letter-spacing: var(--rp-tracking-normal); /* -2 % */
	line-height: 1;
	transition:
		transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-btn__label { white-space: nowrap; position: relative; z-index: 1; }

/*
 * Shine sweep — diagonální glint, který přejede přes tlačítko na hover.
 * Inspirace: Stripe / Linear / Vercel pricing buttons.
 */
.hero-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
	transform: translateX(-110%);
	transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
	.hero-btn:hover::after { transform: translateX(110%); }
	/* Lift na hover — celé tlačítko se nadzvedne 2 px nahoru */
	.hero-btn:hover { transform: translateY(-2px); }
}

/* Active press — vrať se dolů, lehce zmáčkni */
.hero-btn:active {
	transform: translateY(0) scale(0.98);
	transition-duration: 100ms;
}

/* ─── Tlačítko — ikona container ────────────────── */
.hero-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;                               /* 14 px ikona + 11 px padding ring */
	height: 36px;
	padding: 11px;
	border-radius: 50%;
	flex: 0 0 auto;
	transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-btn__icon svg,
.hero-btn__icon img { width: 14px; height: 14px; display: block; }

/* Ikona container — drží se nad shine pseudo-elementem */
.hero-btn__icon { position: relative; z-index: 1; }

/* Hover: žádný posun ani scale na ikoně — celý button má lift + shine sweep. */

/* ─── Primary ─── zelený linear gradient + bílá ikona container */
.hero-btn--primary {
	background: linear-gradient(180deg, var(--rp-color-accent-light) 0%, var(--rp-color-accent) 100%);
	color: var(--rp-color-bg);
	box-shadow: 0 4px 12px -4px rgba(34, 197, 94, 0.25);   /* resting glow */
}
@media (hover: hover) and (pointer: fine) {
	.hero-btn--primary:hover {
		box-shadow:
			0 18px 36px -10px rgba(34, 197, 94, 0.6),
			0 6px 16px -6px rgba(34, 197, 94, 0.35);
	}
}
.hero-btn--primary .hero-btn__icon {
	background: var(--rp-color-text);
	color: var(--rp-color-bg);
}

/* ─── Ghost ─── světlý linear gradient + outlined ikona container */
.hero-btn--ghost {
	background: linear-gradient(180deg, #FFFFFF 0%, #E5E7EB 100%);
	color: var(--rp-color-bg);
	box-shadow: 0 4px 12px -4px rgba(255, 255, 255, 0.08); /* resting */
}
@media (hover: hover) and (pointer: fine) {
	.hero-btn--ghost:hover {
		box-shadow:
			0 18px 36px -10px rgba(255, 255, 255, 0.28),
			0 6px 16px -6px rgba(255, 255, 255, 0.14);
	}
}
.hero-btn--ghost .hero-btn__icon--outlined {
	background: transparent;
	color: var(--rp-color-bg);
	border: 0.5px solid var(--rp-color-bg);
}

/* ─── Dark ─── tmavý pill na světlém pozadí (např. uvnitř zelené CTA karty).
 *  Bílý text, tmavý kruh s bílou ikonou — opačný gradient než Ghost. */
.hero-btn--dark,
.hero-btn--dark:hover,
.hero-btn--dark:focus,
.hero-btn--dark:visited {
	background: var(--rp-color-bg);
	color: var(--rp-color-text);
}
.hero-btn--dark {
	box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25);
}
@media (hover: hover) and (pointer: fine) {
	.hero-btn--dark:hover {
		box-shadow:
			0 18px 36px -10px rgba(0, 0, 0, 0.4),
			0 6px 16px -6px rgba(0, 0, 0, 0.2);
	}
}
.hero-btn--dark .hero-btn__icon {
	background: rgba(255, 255, 255, 0.08);
	color: var(--rp-color-text);
}

/* ─── Bez ikonky ─── symetrický padding, vycentrovaný label.
 *  Defaultní .hero-btn má padding 6px 6px 6px 32px (asymetrický kvůli kulaté ikoně
 *  vpravo). Bez ikony to vypadá divně, takže přepneme na symetrický 17px 32px
 *  (= výška 48 px, stejné jako verze s ikonou). Stejné jako .site-footer__cta. */
.hero-btn--no-icon {
	padding: 17px 32px;
	gap: 0;
	justify-content: center;
}

/* ─── „Pomůžeme s" seznam ──────────────────────── */
.hero__helpwith-label {
	color: var(--rp-color-text);
	font-size: 16px;
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	margin: 0 0 24px;                            /* 24 px mezi label a položkami */
}
.hero__helpwith-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 24px;                                   /* 24 px mezi položkami */
}
.hero__helpwith-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;                                   /* 16 px mezi ikonkou a labelem */
	color: var(--rp-color-text);
}
.hero__helpwith-text {
	display: block;
	flex: 1 1 auto;
	min-width: 0;                                /* dovolí korektní text wrap uvnitř flex itemu */
	font-size: 14px;
	font-weight: var(--rp-fw-semibold);
	letter-spacing: -0.02em;
	line-height: var(--rp-lh-normal);
}
.hero__check {
	flex: 0 0 14px;                              /* fixní 14 px, nikdy neshrinkuje ani neroste */
	width: 14px;
	height: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;                             /* vertikální centrování s první řádkou (14 px font, 1.5 line-height) */
}
.hero__check svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ─── Pravý sloupec: figure s obrázkem ─── */
.hero__figure {
	position: relative;
	margin: 0;
	border: 1px solid var(--rp-hero-border);     /* 1 px #F3F4F6 7 % opacity */
	border-radius: var(--rp-radius-md);          /* 12 px */
	overflow: hidden;
	aspect-ratio: 4 / 3;                        /* výchozí — přebije modifier níže */
}

/* Aspect ratio varianty */
.hero__figure--4-3   { aspect-ratio: 4 / 3; }
.hero__figure--3-4   { aspect-ratio: 3 / 4; }
.hero__figure--1-1   { aspect-ratio: 1 / 1; }
.hero__figure--16-10 { aspect-ratio: 16 / 10; }
.hero__figure--4-5   { aspect-ratio: 4 / 5; }

@media (max-width: 1023px) {
	/* Na tabletu/mobilu vždy landscape bez ohledu na výběr */
	.hero__figure,
	.hero__figure--4-3,
	.hero__figure--3-4,
	.hero__figure--1-1,
	.hero__figure--16-10,
	.hero__figure--4-5 { aspect-ratio: 16 / 10; }
}

.hero__image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Gradient overlay dle Figmy: nahoře #111827 20 % → dole #111827 100 % */
.hero__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(17, 24, 39, 0.20) 0%,
		rgba(17, 24, 39, 1.00) 100%);
	pointer-events: none;
}

/* Stats — samostatný blok pod obrázkem */
.hero__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;                /* všechny statistiky vertikálně zarovnané */
	margin: var(--rp-space-5) 0 0;
	padding: 0;
	list-style: none;
}

.hero__stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 12px;                                  /* mezi číslem a labelem */
	padding: 0 var(--rp-space-4);
	border-left: 1px solid var(--rp-hero-border);
	color: var(--rp-color-text);
}
.hero__stat:first-child { padding-left: 0; border-left: none; }
.hero__stat:last-child  { padding-right: 0; }

.hero__stat-cislo {
	font-size: 32px;
	font-weight: var(--rp-fw-medium);            /* 500 */
	color: var(--rp-color-text);
	letter-spacing: -0.02em;                     /* -2 % */
	line-height: 1;
}
.hero__stat-popisek {
	color: var(--rp-color-text);
	font-size: 12px;
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: var(--rp-lh-normal);
}

/* Stats na úzkém mobilu — 1 sloupec, vertikální dividery */
@media (max-width: 480px) {
	.hero__stats {
		grid-template-columns: 1fr;
		gap: var(--rp-space-6);                  /* 32 px mezi statistikami (z 12 px) */
		margin-top: var(--rp-space-7);           /* 48 px nad blokem (z 24 px) */
	}
	.hero__stat {
		padding: var(--rp-space-5) 0 0;          /* 24 px nad obsahem stat (z 12 px) */
		border-left: none;
		border-top: 1px solid var(--rp-hero-border);
	}
	.hero__stat:first-child {
		border-top: none;
		padding-top: 0;
	}
}

/* ═══════════════════════════════════════════════════════════
 * KOMPAKTNÍ VARIANTA — hero--compact
 * H1 je uvnitř levého sloupce, obrázek vedle, méně výšky.
 * ═══════════════════════════════════════════════════════════ */

/* Inline hero__head (uvnitř text sloupce) — žádný margin-bottom pod nadpisem,
 * spacing zajistí gap v .hero__col--text > * + * */
.hero__head--inline {
	max-width: 100%;    /* plná šířka levého sloupce */
	margin-bottom: 0;   /* spacing přebírá gap níže */
}

/* Desktop: oba sloupce vertikálně zarovnány na střed */
@media (min-width: 1024px) {
	.hero--compact .hero__grid {
		align-items: center;
	}

	/* Obrázek kompaktní varianty — výška podle obsahu levého sloupce.
	 * Aspect ratio modifier třídy (hero__figure--4-3 atd.) jsou stále aktivní,
	 * ale height: 100% + min-height zajistí, že obrázek vyplní celou výšku sloupce. */
	.hero--compact .hero__figure {
		height: 100%;
		min-height: 300px;
	}
}

/* Mobil — kompaktní varianta se chová stejně jako výchozí (stack) */
@media (max-width: 1023px) {
	.hero__head--inline {
		max-width: 100%;
		margin-bottom: 0;
	}

	/* Na mobilu kompaktní varianta — landscape (sdílí pravidlo s výchozím layoutem výše) */
	.hero--compact .hero__figure {
		height: auto;
	}
}