/* Hero block — extracted from design system §14 (.hero-variant-a) */

.bb-hero {
	border-radius: 18px;
	overflow: hidden;
	position: relative;
	min-height: 360px;
}

/* Inner wrapper keeps content within wide-size when Hero is alignfull,
 * while the gradient + organic shape still bleed to viewport edges. */
.bb-hero__inner {
	max-width: var(--wp--style--global--wide-size, 1680px);
	margin: 0 auto;
	padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 64px);
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 32px;
	align-items: center;
	position: relative;
	z-index: 1;
}

.bb-hero--light {
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--cream) 0%,
		var(--wp--preset--color--purple-soft) 50%,
		var(--wp--preset--color--green-soft) 100%
	);
	color: var(--wp--preset--color--text-primary);
}

.bb-hero--dark {
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--dark) 0%,
		var(--wp--preset--color--purple-deep) 100%
	);
	color: var(--wp--preset--color--white);
}

.bb-hero::after {
	content: '';
	position: absolute;
	top: -80px;
	right: -60px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: rgba(124, 179, 66, 0.15);
	pointer-events: none;
	z-index: 0;
}

.bb-hero__content {
	position: relative;
	z-index: 1;
}

.bb-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(8px);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--dark);
	margin-bottom: 16px;
}

.bb-hero--dark .bb-hero__eyebrow {
	background: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--white);
}

.bb-hero__eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
	animation: bb-hero-pulse 2s ease-in-out infinite;
}

@keyframes bb-hero-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.55; transform: scale(0.85); }
}

.bb-hero__title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(2rem, 4.5vw, 2.75rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: inherit;
	margin: 0;
}

.bb-hero--light .bb-hero__title { color: var(--wp--preset--color--dark); }
.bb-hero--dark .bb-hero__title  { color: var(--wp--preset--color--white); }

.bb-hero__lead {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 15px;
	line-height: 1.6;
	margin-top: 16px;
	max-width: 540px;
	color: var(--wp--preset--color--text-secondary);
}

.bb-hero--dark .bb-hero__lead { color: rgba(255, 255, 255, 0.78); }

.bb-hero__cta-row {
	display: flex;
	gap: 12px;
	margin-top: 24px;
	align-items: center;
	flex-wrap: wrap;
}

/* Buttons (.bb-btn-*) */
.bb-btn {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 14px;
	font-weight: 600;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
	text-decoration: none;
	line-height: 1;
}

.bb-btn--primary {
	background: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--white);
	padding: 14px 24px;
	border-radius: 999px;
}

.bb-btn--primary:hover {
	background: var(--wp--preset--color--purple-deep);
	transform: translateY(-1px);
}

.bb-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--purple);
	padding: 14px 18px;
}

.bb-btn--ghost:hover { color: var(--wp--preset--color--purple-deep); }

.bb-hero--dark .bb-btn--ghost {
	color: rgba(255, 255, 255, 0.85);
}

.bb-hero--dark .bb-btn--ghost:hover {
	color: var(--wp--preset--color--white);
}

.bb-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Portrait — real photo INSIDE organic blob frame (brand element). */
.bb-hero--portrait .bb-hero__portrait {
	aspect-ratio: 1 / 1;
	max-width: 620px;
	width: 100%;
	margin-left: auto;
	position: relative;
	background: var(--wp--preset--color--cream-warm);
	/* Pravidelná elipsa, ne vejce — souměrné poloměry, žádné zúžení nahoře. */
	border-radius: 50%;
	padding: 5% 6%;
	box-sizing: border-box;
	z-index: 1;
}

.bb-hero--dark.bb-hero--portrait .bb-hero__portrait {
	background: rgba(245, 232, 240, 0.12);
}

.bb-hero--portrait .bb-hero__portrait-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--bb-hero-photo-position, 50% 50%);
	border-radius: 50%;
	box-shadow: 0 10px 26px rgba(42, 36, 51, 0.14);
	/* Fotka se na okrajích rozplyne do krémového blobu místo tvrdé hrany —
	   architektura tím splyne s pozadím a nepůsobí jako nalepená výseč. */
	-webkit-mask-image: radial-gradient(112% 104% at 50% 46%, #000 46%, rgba(0, 0, 0, 0.62) 72%, rgba(0, 0, 0, 0.18) 90%, transparent 100%);
	mask-image: radial-gradient(112% 104% at 50% 46%, #000 46%, rgba(0, 0, 0, 0.62) 72%, rgba(0, 0, 0, 0.18) 90%, transparent 100%);
}

/* Vstupní fotka je na šířku; výřez se drží loga a květin, ne dlažby. */
.bb-hero--portrait .bb-hero__portrait--entry .bb-hero__portrait-img,
.bb-hero--portrait.bb-hero--entry .bb-hero__portrait-img {
	--bb-hero-photo-position: 6% 50%;
}

/* Landscape — wide rounded-rectangle photo, no organic blob.
 * Photo column right-side, smaller than text (text-dominant 1.3fr / 1fr)
 * with 16:10 aspect for cinematic shots that don't overwhelm the copy. */
.bb-hero--landscape .bb-hero__inner {
	grid-template-columns: 1.3fr 1fr;
	gap: 48px;
}

.bb-hero--landscape .bb-hero__portrait {
	aspect-ratio: 16 / 10;
	max-width: 520px;
	width: 100%;
	margin: 0 0 0 auto;
	position: relative;
	z-index: 1;
	border-radius: 22px;
	overflow: hidden;
	background: var(--wp--preset--color--cream-warm);
	box-shadow: 0 16px 48px rgba(42, 36, 51, 0.18);
}

.bb-hero--landscape .bb-hero__portrait-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

@media (max-width: 900px) {
	.bb-hero--landscape .bb-hero__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.bb-hero--landscape .bb-hero__portrait {
		max-width: 720px;
		margin: 0 auto;
	}
}

@media (max-width: 900px) {
	.bb-hero__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.bb-hero__portrait {
		max-width: 360px;
		margin: 0 auto;
	}
}

/* Vedlejší odkaz pod tlačítky (dárkové poukazy). Tichý: menší písmo,
   tlumená barva, podtržení jen při najetí — nemá soupeřit s „Objednat“. */
.bb-hero__note {
	margin: 18px 0 0;
	/* Ikonka lícuje s ikonkou tlačítka nad sebou (= jeho levý padding):
	   na počítači „Objednat“ (24px), na mobilu, kde se řada zalomí, „Zavolat“ (18px). */
	padding-left: 24px;
	font-size: 14px;
	line-height: 1.4;
}

.bb-hero__note a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--text-secondary, #555555);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.bb-hero__note a:hover,
.bb-hero__note a:focus-visible {
	color: var(--wp--preset--color--purple);
	border-bottom-color: currentColor;
}

.bb-hero__note-icon {
	flex: none;
	color: var(--wp--preset--color--purple);
}

@media (max-width: 600px) {
	.bb-hero__note {
		padding-left: 18px;
	}
}

/* ── Varianty z revize 11. 9. 2026 (vybírá klientka) ─────────────────────
   size=compact  nižší hero pro podstránky
   accent        barva oboru: rám kolem fotky, skvrna v rohu, přechod
   media         místo fotky mandala nebo linková ilustrace */

.bb-hero--size-compact { min-height: 0; }

.bb-hero--size-compact .bb-hero__inner {
	padding-block: clamp(24px, 3vw, 40px);
	grid-template-columns: 1.5fr 1fr;
}

.bb-hero--size-compact .bb-hero__title { font-size: clamp(30px, 3.4vw, 44px); }

.bb-hero--size-compact .bb-hero__portrait,
.bb-hero--size-compact .bb-hero__art { max-width: 340px; }

.bb-hero--light.bb-hero--accent-psycho {
	background: linear-gradient(135deg, var(--wp--preset--color--cream) 0%, var(--wp--preset--color--purple-soft) 70%, #efe3f2 100%);
}
.bb-hero--accent-psycho::after { background: rgba(107, 45, 123, 0.10); }
.bb-hero--portrait.bb-hero--accent-psycho .bb-hero__portrait { background: #ecdcf0; }

.bb-hero--light.bb-hero--accent-fyzio {
	background: linear-gradient(135deg, var(--wp--preset--color--cream) 0%, var(--wp--preset--color--green-soft) 100%);
}
.bb-hero--accent-fyzio::after { background: rgba(124, 179, 66, 0.20); }
.bb-hero--portrait.bb-hero--accent-fyzio .bb-hero__portrait { background: #e3efd5; }

.bb-hero__art {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 460px;
	aspect-ratio: 1 / 1;
	margin-left: auto;
}

.bb-hero__art--mandala img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Linkové kresby mají stroke=currentColor; jako obrázek by byly černé,
   proto maska + barva pozadí v barvě oboru. */
.bb-hero__art--lines { --bb-line: var(--wp--preset--color--green); }
.bb-hero--accent-psycho .bb-hero__art--lines { --bb-line: var(--wp--preset--color--purple); }

.bb-hero__line {
	position: absolute;
	display: block;
	background-color: var(--bb-line);
	-webkit-mask: var(--bb-mask) center / contain no-repeat;
	mask: var(--bb-mask) center / contain no-repeat;
	opacity: 0.55;
}

.bb-hero__line--spiral {
	--bb-mask: url(../../../assets/illustrations/watermark-spiral.svg);
	inset: 2% 4% 30% 22%;
}

.bb-hero__line--leaf {
	--bb-mask: url(../../../assets/illustrations/watermark-leaf.svg);
	width: 48%;
	aspect-ratio: 1 / 1;
	left: 0;
	bottom: 0;
	opacity: 0.7;
}

.bb-hero__line--flora {
	--bb-mask: url(../../../assets/illustrations/watermark-flora.svg);
	width: 40%;
	aspect-ratio: 1 / 1;
	right: 2%;
	bottom: 8%;
	opacity: 0.45;
}

@media (max-width: 900px) {
	.bb-hero--size-compact .bb-hero__inner { grid-template-columns: 1fr; }
	.bb-hero--size-compact .bb-hero__portrait { max-width: 260px; }
	/* Ilustrace je na mobilu navíc — text zůstane čistý, bez obrázku. */
	.bb-hero__art--lines { display: none; }
	.bb-hero__art--mandala { max-width: 220px; margin: 0 auto; }
}

/* V šabloně page-landing leží hero uvnitř .bb-page-content, jehož pravidla
   pro odkazy (0,1,1) přebarvovala text tlačítek (fialová na fialové) a
   podtrhávala je. a.bb-btn uvnitř .bb-hero má (0,2,1). */
.bb-hero a.bb-btn { text-decoration: none; }
.bb-hero a.bb-btn--primary,
.bb-hero a.bb-btn--primary:hover { color: var(--wp--preset--color--white); }
.bb-hero--light a.bb-btn--ghost { color: var(--wp--preset--color--purple); }

/* Bez osamocené „6“ na druhém řádku. */
.bb-hero__title { text-wrap: balance; }

/* ── Tvary fotky, vlastní pozadí a hero jen s textem (8. 10. 2026) ───────
   photoLayout  arch | blob | rounded | tall — fotka v tvaru, za ní posunutý
                stín stejného tvaru v barvě oboru
   media=none   jen text, bez obrázku vedle
   has-bg       vlastní obrázek na pozadí pod závojem v barvě podkladu */

/* Tvar vyplní sloupec fotky; sloupec je širší než u kruhu (1.1fr : 1fr),
   aby fotka zasahovala víc do šířky. */
.bb-hero--arch .bb-hero__inner,
.bb-hero--blob .bb-hero__inner,
.bb-hero--rounded .bb-hero__inner,
.bb-hero--tall .bb-hero__inner {
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
}

.bb-hero--arch .bb-hero__portrait,
.bb-hero--blob .bb-hero__portrait,
.bb-hero--rounded .bb-hero__portrait,
.bb-hero--tall .bb-hero__portrait {
	--bb-hero-shape: 32px;
	--bb-hero-shape-bg: var(--wp--preset--color--cream-warm);
	position: relative;
	z-index: 1;
	width: calc(100% - 16px);
	max-width: 580px;
	aspect-ratio: 1 / 1;
	margin: 0 16px 16px auto;
}

/* Horní půlkruh: vodorovný poloměr půl šířky, svislý 5/12 výšky (5 : 6). */
.bb-hero--arch .bb-hero__portrait {
	--bb-hero-shape: 50% 50% 28px 28px / 41.67% 41.67% 28px 28px;
	aspect-ratio: 5 / 6;
	max-width: 520px;
}

.bb-hero--blob .bb-hero__portrait {
	--bb-hero-shape: 42% 58% 70% 30% / 45% 45% 55% 55%;
	aspect-ratio: 6 / 5;
	max-width: 640px;
}

.bb-hero--tall .bb-hero__portrait {
	--bb-hero-shape: 28px;
	aspect-ratio: 4 / 5;
	max-width: 480px;
}

.bb-hero--accent-psycho .bb-hero__portrait { --bb-hero-shape-bg: #ecdcf0; }
.bb-hero--accent-fyzio .bb-hero__portrait { --bb-hero-shape-bg: #e3efd5; }
.bb-hero--dark .bb-hero__portrait { --bb-hero-shape-bg: rgba(245, 232, 240, 0.14); }

.bb-hero--arch .bb-hero__portrait::before,
.bb-hero--blob .bb-hero__portrait::before,
.bb-hero--rounded .bb-hero__portrait::before,
.bb-hero--tall .bb-hero__portrait::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--bb-hero-shape);
	background: var(--bb-hero-shape-bg);
	transform: translate(16px, 16px);
}

.bb-hero--blob .bb-hero__portrait::before {
	transform: rotate(-9deg) scale(1.05);
}

.bb-hero--arch .bb-hero__portrait-img,
.bb-hero--blob .bb-hero__portrait-img,
.bb-hero--rounded .bb-hero__portrait-img,
.bb-hero--tall .bb-hero__portrait-img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--bb-hero-photo-position, 50% 50%);
	border-radius: var(--bb-hero-shape);
	box-shadow: 0 14px 34px rgba(42, 36, 51, 0.16);
}

/* Nižší hero (podstránky): tvar menší, ať pruh nevyroste. */
.bb-hero--size-compact.bb-hero--arch .bb-hero__inner,
.bb-hero--size-compact.bb-hero--blob .bb-hero__inner,
.bb-hero--size-compact.bb-hero--rounded .bb-hero__inner,
.bb-hero--size-compact.bb-hero--tall .bb-hero__inner {
	grid-template-columns: 1.2fr 1fr;
}

.bb-hero--size-compact.bb-hero--rounded .bb-hero__portrait { max-width: 420px; }
.bb-hero--size-compact.bb-hero--blob .bb-hero__portrait { max-width: 500px; }
.bb-hero--size-compact.bb-hero--arch .bb-hero__portrait { max-width: 380px; }
.bb-hero--size-compact.bb-hero--tall .bb-hero__portrait { max-width: 360px; }

@media (max-width: 900px) {
	.bb-hero--arch .bb-hero__inner,
	.bb-hero--blob .bb-hero__inner,
	.bb-hero--rounded .bb-hero__inner,
	.bb-hero--tall .bb-hero__inner,
	.bb-hero--size-compact.bb-hero--arch .bb-hero__inner,
	.bb-hero--size-compact.bb-hero--blob .bb-hero__inner,
	.bb-hero--size-compact.bb-hero--rounded .bb-hero__inner,
	.bb-hero--size-compact.bb-hero--tall .bb-hero__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.bb-hero--arch .bb-hero__portrait,
	.bb-hero--blob .bb-hero__portrait,
	.bb-hero--rounded .bb-hero__portrait,
	.bb-hero--tall .bb-hero__portrait,
	.bb-hero--size-compact.bb-hero--arch .bb-hero__portrait,
	.bb-hero--size-compact.bb-hero--blob .bb-hero__portrait,
	.bb-hero--size-compact.bb-hero--rounded .bb-hero__portrait,
	.bb-hero--size-compact.bb-hero--tall .bb-hero__portrait {
		max-width: 420px;
		margin: 0 auto 16px;
	}
}

/* Jen text: obsah na celou šířku, řádky textu ale ne delší než u fotky. */
.bb-hero.bb-hero--media-none .bb-hero__inner {
	grid-template-columns: minmax(0, 1fr);
}

.bb-hero--media-none .bb-hero__content {
	max-width: 760px;
}

/* Vlastní obrázek na pozadí. Závoj je silnější na straně textu a k fotce
   slábne; na mobilu, kde text jde přes celou šířku, je rovnoměrný. */
.bb-hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* (0,2,0): .bb-page-content img (0,1,1) by obrázku vrátilo výšku auto. */
.bb-hero .bb-hero__bg {
	display: block;
	max-width: none;
	border-radius: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bb-hero__veil {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--cream);
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgba(0, 0, 0, 0.55) 100%);
	mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgba(0, 0, 0, 0.55) 100%);
}

.bb-hero--dark .bb-hero__veil {
	background: linear-gradient(135deg, var(--wp--preset--color--dark) 0%, var(--wp--preset--color--purple-deep) 100%);
}

.bb-hero--has-bg::after { display: none; }

@media (max-width: 900px) {
	.bb-hero__veil {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* Tvar obrázku na pozadí: na počítači je obrázek jen vpravo v tvaru a text
   leží na barevném přechodu (závoj není potřeba). Na mobilu, kde je text přes
   celou šířku, jde obrázek zase přes celý pruh pod závoj. */
@media (min-width: 901px) {
	.bb-hero--bg-shaped .bb-hero__backdrop {
		inset: auto;
		overflow: hidden;
	}

	.bb-hero--bg-shaped .bb-hero__veil { display: none; }

	/* Levý okraj jako půlelipsa, obrázek do pravého kraje pruhu. */
	.bb-hero--bg-arch .bb-hero__backdrop {
		top: 0;
		right: 0;
		bottom: 0;
		width: 50%;
		border-radius: 50% 0 0 50% / 50% 0 0 50%;
	}

	.bb-hero--bg-blob .bb-hero__backdrop {
		top: 6%;
		right: 3%;
		bottom: 6%;
		width: 46%;
		border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	}

	/* Kruh větší než pruh — horní a dolní okraj ořízne hero, zbude velký oblouk. */
	.bb-hero--bg-circle .bb-hero__backdrop {
		top: 50%;
		right: -6%;
		width: 56%;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		transform: translateY(-50%);
	}

	.bb-hero--bg-rounded .bb-hero__backdrop {
		top: 24px;
		right: 24px;
		bottom: 24px;
		width: 46%;
		border-radius: 28px;
	}

	/* Jen text + tvar: text nesmí vjet do obrázku. */
	.bb-hero--bg-shaped.bb-hero--media-none .bb-hero__content {
		max-width: min(760px, 46%);
	}
}