/*
 * BeBalanced 2026 — global styles
 * Brand, header, footer + design-system primitives that aren't block-scoped.
 */

/* ─── Alignment escape ──────────────────────────────────────
 * WP's built-in alignfull only negates root padding from
 * theme.json — but our post-content sits inside <main> with
 * has-global-padding which adds another layer. Override so
 * any block tagged `alignfull` truly spans viewport edges,
 * regardless of how deeply it's nested.
 *
 * Use this for Hero / Cover / CTA when you want full-bleed.
 * Stick with `alignwide` (defaults to 1680px) for everything
 * that should match the header/footer pill.
 */
.alignfull {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	max-width: 100vw !important;
	width: auto;
}

/* Make sure post-content + main wrappers don't cap our sections.
 * WP's is-layout-constrained on post-content forces contentSize on
 * direct children unless they're tagged alignwide/alignfull, and the
 * parent ancestors must let it spread first. Forcing post-content's
 * own max-width to wideSize lets alignwide children actually reach
 * 1680px regardless of how WP layered the constrained layouts above. */
.wp-block-post-content {
	max-width: 100% !important;
	width: 100%;
}

.wp-block-post-content > * {
	max-width: var(--wp--style--global--content-size, 880px);
	margin-left: auto;
	margin-right: auto;
}

.wp-block-post-content > .alignwide {
	max-width: var(--wp--style--global--wide-size, 1680px);
	width: calc(100% - 32px);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.wp-block-post-content > .alignfull {
	max-width: none;
}

/* When alignfull, our block wrappers should drop their pill radius
 * so the edge-to-edge feels intentional. Override on a per-block
 * basis if a specific block should keep rounded corners.
 */
.bb-hero.alignfull,
.bb-cta-banner.alignfull,
.bb-stats-hero.alignfull,
.alignfull > .wp-block-cover {
	border-radius: 0;
}

/* ─── Brand logo ─────────────────────────────────────────── */
.bb-brand {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.5px;
	text-decoration: none;
	display: inline-block;
	line-height: 1;
}

.bb-brand--light { color: var(--wp--preset--color--dark); }
.bb-brand--light .bb-brand__bal { color: var(--wp--preset--color--purple); }

.bb-brand--dark { color: var(--wp--preset--color--white); }
.bb-brand--dark .bb-brand__bal { color: var(--wp--preset--color--purple-mid); }

.bb-brand:hover .bb-brand__bal { opacity: 0.85; }

.bb-brand--image {
	display: inline-block;
	line-height: 0;
}

.bb-brand--image img {
	height: 48px;
	width: auto;
	display: block;
	transition: opacity 0.2s ease;
}

.bb-brand--image:hover img { opacity: 0.85; }

/* Logo PNG is dark-on-transparent — invert for dark backgrounds */
.bb-brand--dark.bb-brand--image img {
	filter: invert(1) brightness(2.2);
}

/* ─── Top utility bar (above header pill) ────────────────── */
/* Klientka 11. 9.: černý pruh působil „jako administrace, provizorně“ →
 * bílý s tmavým textem. Vpravo místo slevové výzvy „Správa rezervací“
 * (Reservanto managebooking) — objednání je v hlavičce i v hero. */
/* Horní pruh a karta hlavičky lícují obsahem (revize 11. 9.): pruh má
 * odsazení = vnější okraj karty + její vnitřní odsazení, karta je o své
 * odsazení širší než wide-size. Obě hodnoty se mění jen tady. */
:root {
	--bb-hdr-gap: 12px;
	--bb-hdr-pad: 24px;
}

@media (max-width: 1280px) {
	:root { --bb-hdr-pad: 20px; }
}

@media (max-width: 900px) {
	:root { --bb-hdr-gap: 8px; --bb-hdr-pad: 14px; }
}

.bb-topbar {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text-secondary);
	border-bottom: 1px solid rgba(42, 36, 51, 0.08);
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 13px;
	line-height: 1;
}

.bb-topbar__inner {
	box-sizing: content-box;
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin: 0 auto;
	padding: 10px calc(var(--bb-hdr-gap) + var(--bb-hdr-pad));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.bb-topbar__contact {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.bb-topbar__right {
	display: flex;
	align-items: center;
	gap: 14px;
}

.bb-topbar__promo-short { display: none; }

.bb-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bb-topbar__item strong {
	color: var(--wp--preset--color--dark);
}

.bb-topbar__item svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--wp--preset--color--green-deep);
}

.bb-topbar__item--phone:hover,
.bb-topbar__item--addr:hover,
.bb-topbar__item--contact:hover,
.bb-topbar__item--phone:hover strong { color: var(--wp--preset--color--purple); }

/* „Kontakt a mapa“ — náhrada položky Kontakt z hlavního menu */
.bb-topbar__item--contact {
	color: var(--wp--preset--color--dark);
	font-weight: 600;
}

.bb-topbar__promo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid rgba(107, 45, 123, 0.28);
	border-radius: 999px;
	color: var(--wp--preset--color--purple);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.2px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bb-topbar__promo svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.bb-topbar__promo:hover,
.bb-topbar__promo:focus-visible {
	background: var(--wp--preset--color--purple);
	border-color: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--white);
}

/* Přepínač jazyka má výchozí paletu pro tmavé pozadí (lang-switch/style.css). */
.bb-topbar .bb-lang {
	background: rgba(42, 36, 51, 0.05);
}

.bb-topbar .bb-lang__btn {
	color: var(--wp--preset--color--text-secondary);
}

.bb-topbar .bb-lang__btn:hover {
	color: var(--wp--preset--color--purple);
	background: rgba(42, 36, 51, 0.05);
}

.bb-topbar .bb-lang__btn--active,
.bb-topbar .bb-lang__btn--active:hover {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--white);
}

@media (max-width: 1200px) {
	.bb-topbar__item--addr { display: none; }
}

@media (max-width: 900px) {
	.bb-topbar { font-size: 12px; }
	.bb-topbar__inner { padding-block: 8px; gap: 10px; }
	.bb-topbar__promo-full { display: none; }
	.bb-topbar__promo-short { display: inline; }
	.bb-topbar__promo { font-size: 11px; padding: 4px 9px; gap: 6px; }
}

@media (max-width: 520px) {
	.bb-topbar__contact { gap: 12px; }
	.bb-topbar__right { gap: 8px; }
	/* Na nejužších displejích: telefon + Kontakt, zbytek je v mobilním menu */
	.bb-topbar__item--contact { font-size: 0; gap: 0; }
	.bb-topbar__item--contact svg { width: 16px; height: 16px; }
}

/* ─── Header — grid: brand | nav (1fr) | CTA ─────────────── */
.bb-header {
	/* width is calc(100% - 24px) but the element is a plain <div>, so
	 * without border-box the 24px padding is added on top and the page
	 * scrolls horizontally by exactly that much (12px on mobile). */
	box-sizing: border-box;
	background: var(--wp--preset--color--cream);
	padding: 16px var(--bb-hdr-pad);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	border-radius: 18px;
	margin: 12px auto;
	max-width: calc(var(--wp--style--global--wide-size, 1280px) + 2 * var(--bb-hdr-pad));
	width: calc(100% - 2 * var(--bb-hdr-gap));
	gap: 20px;
	position: sticky;       /* sticky so it can scroll-shrink */
	top: 8px;
	z-index: 50;
	transition: padding 0.25s ease, box-shadow 0.25s ease;
}

/* Scrolled state (added by JS once user scrolls past 80px) */
.bb-header.is-scrolled {
	padding-block: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.bb-header.is-scrolled .bb-brand--image img {
	height: 48px;     /* slightly compressed logo when scrolled */
	transition: height 0.25s ease;
}

.bb-header .bb-brand--image img {
	height: 60px;
}

.bb-header__cta {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 18px;
	background: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--white);
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, transform 0.15s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
}

.bb-header__cta svg { width: 16px; height: 16px; }

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

.bb-header__cta-short { display: none; }

@media (max-width: 1280px) {
	.bb-header { gap: 16px; padding-block: 12px; }
	.bb-header .bb-brand--image img { height: 40px; }
}

@media (max-width: 1100px) {
	.bb-header__cta-full { display: none; }
	.bb-header__cta-short { display: inline; }
	.bb-header__cta { padding: 9px 14px; }
}

@media (max-width: 900px) {
	.bb-header {
		grid-template-columns: auto 1fr auto;
		padding-block: 10px;
		gap: 8px;
		margin: 8px auto;
	}
	.bb-header .bb-brand--image img { height: 36px; }
	.bb-header__cta { display: none; }
}

/* ─── Footer ─────────────────────────────────────────────── */
.bb-footer {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--white);
	border-radius: 18px;
	padding: 48px;
	margin: 16px auto;
	max-width: var(--wp--style--global--wide-size, 1680px);
	width: calc(100% - 32px);
}

.bb-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 32px;
}

.bb-footer__brand-block .bb-brand { margin-bottom: 14px; }

.bb-footer__tagline {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.6;
	max-width: 280px;
	margin: 0;
}

.bb-footer__col-title {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
	font-weight: 600;
	margin: 0 0 12px 0;
}

.bb-footer__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.bb-footer__col li {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
	padding: 4px 0;
	line-height: 1.5;
}

.bb-footer__col a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bb-footer__col a:hover { color: var(--wp--preset--color--white); }

.bb-footer__bottom {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
}

@media (max-width: 900px) {
	.bb-footer { padding: 32px 24px; }
	.bb-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
	.bb-footer__brand-block { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
	.bb-footer__grid { grid-template-columns: 1fr; }
}

/* ─── S5: Articles "Úspěšně léčíme..." — 6 cards in 2 aspect tiers ─ */
.bb-articles-medical {
	max-width: var(--wp--style--global--wide-size, 1680px);
	margin: 0 auto;
	padding: 72px 32px;
}
.bb-articles-medical__header {
	text-align: center;
	max-width: 820px;
	margin: 0 auto 48px;
}
.bb-articles-medical__eyebrow {
	display: inline-block;
	background: var(--wp--preset--color--purple-soft);
	color: var(--wp--preset--color--purple);
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	margin: 0 0 18px;
}
.bb-articles-medical__title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(1.75rem, 3.2vw, 2.375rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.18;
	color: var(--wp--preset--color--dark);
	margin: 0;
}
.bb-articles-medical__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 900px) { .bb-articles-medical__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bb-articles-medical__grid { grid-template-columns: 1fr; } }

.bb-article-card {
	background: var(--wp--preset--color--white);
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(42, 36, 51, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}
.bb-article-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(42, 36, 51, 0.08);
}
.bb-article-card__image {
	width: 100%;
	background-size: cover;
	background-position: center;
	border-radius: 14px 14px 0 0;     /* image radius — minimum --radius-lg per brief */
	overflow: hidden;
	transition: transform 0.4s ease;
}
.bb-article-card__image--featured  { aspect-ratio: 16 / 9; }
.bb-article-card__image--small     { aspect-ratio: 4 / 3; }

.bb-article-card:hover .bb-article-card__image { transform: scale(1.04); }

.bb-article-card__body {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.bb-article-card__title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--wp--preset--color--dark);
	line-height: 1.3;
	letter-spacing: -0.005em;
	margin: 0;
	transition: color 0.2s ease, transform 0.2s ease;
}
.bb-article-card:hover .bb-article-card__title {
	color: var(--wp--preset--color--purple);
	transform: translateX(2px);
}
.bb-article-card__excerpt {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

/* ─── S10: Team grid — blob portraits with 3 shape variants + gentle
 * asymmetric rhythm. Real photos with consistent CSS filter, initials
 * fallback for members without portrait. */
.bb-team-section {
	padding: 96px 0;
	background: var(--wp--preset--color--cream);
}

.bb-team__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 64px;
	padding: 0 32px;
}
.bb-team__eyebrow {
	display: inline-block;
	background: var(--wp--preset--color--green-soft);
	color: var(--wp--preset--color--green-deep);
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	margin: 0 0 20px;
}
.bb-team__title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(1.875rem, 3.5vw, 2.625rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--wp--preset--color--dark);
	margin: 0 0 12px;
}
.bb-team__sub {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 15px;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

.bb-team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 48px 32px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}

@media (max-width: 1100px) { .bb-team__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .bb-team__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } }
@media (max-width: 440px)  { .bb-team__grid { grid-template-columns: 1fr; } }

/* Member item — gentle 12px vertical offset alternating every 2 items
 * for "vědomá kompozice" feel (not broken layout) */
.bb-team__member {
	text-align: center;
	transition: transform 0.4s ease;
}
.bb-team__member:nth-child(even) { transform: translateY(12px); }
.bb-team__member:hover { transform: translateY(0) scale(1.02) rotate(-1.5deg); }
.bb-team__member:nth-child(even):hover { transform: translateY(12px) scale(1.02) rotate(-1.5deg); }

/* The blob — 3 shape variants via :nth-child cycle (3 different
 * border-radius signatures, no more than 3 unique blobs) */
.bb-team__blob {
	width: 100%;
	aspect-ratio: 4 / 5;
	background-size: cover;
	background-position: center top;
	background-color: var(--wp--preset--color--cream-warm);
	margin: 0 0 16px;
	overflow: hidden;
	filter: contrast(1.05) saturate(0.92) brightness(1.02);
	transition: filter 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--purple);
}

.bb-team__member:hover .bb-team__blob {
	filter: contrast(1.1) saturate(1) brightness(1);
}

/* 3 blob shape variants — soft oval / soft pyramid / soft droplet */
.bb-team__member:nth-child(3n+1) .bb-team__blob {
	border-radius: 50% 50% 48% 52% / 52% 48% 50% 50%;
}
.bb-team__member:nth-child(3n+2) .bb-team__blob {
	border-radius: 60% 40% 52% 48% / 38% 50% 50% 62%;
}
.bb-team__member:nth-child(3n) .bb-team__blob {
	border-radius: 42% 58% 60% 40% / 55% 35% 65% 45%;
}

/* Featured row (first 4 members) gets slightly larger portrait via aspect tweak */
.bb-team__member--featured .bb-team__blob {
	aspect-ratio: 4 / 5;
}

/* Fallback blob — gradient + initials when no photo */
.bb-team__blob--initials {
	background: linear-gradient(160deg, var(--wp--preset--color--cream-warm), var(--wp--preset--color--purple-soft));
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: 48px;
	font-weight: 500;
	color: var(--wp--preset--color--purple);
	opacity: 1;
}
.bb-team__blob--initials span { opacity: 0.6; }

/* Name + role */
.bb-team__name {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--dark);
	line-height: 1.25;
	margin: 0 0 4px;
}
.bb-team__role {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 13px;
	font-style: italic;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
	line-height: 1.4;
}

/* "Celý tým →" inline link below grid (no button) */
.bb-team__cta {
	display: flex;
	justify-content: center;
	margin-top: 56px;
}
.bb-team__cta a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--purple);
	text-decoration: none;
	letter-spacing: 0.3px;
	transition: gap 0.2s ease;
}
.bb-team__cta a:hover { gap: 12px; color: var(--wp--preset--color--purple-deep); }

/* ─── S9: Filozofie — light editorial layout, warm wellness feel.
 * Number + keyword + paragraph rows on cream bg; sticky title left. */
.bb-manifesto-section {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--dark);
	padding: 96px 0;
	position: relative;
	overflow: hidden;
}

/* Subtle decorative mandala in the background — brand accent without
 * dominating the section. */
.bb-manifesto-section::before {
	content: '';
	position: absolute;
	right: -160px;
	top: 50%;
	transform: translateY(-50%);
	width: 520px;
	height: 520px;
	background-image: url('../illustrations/mandala-green.svg');
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.08;
	pointer-events: none;
}

.bb-manifesto {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 72px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
	align-items: start;
	position: relative;
	z-index: 1;
}

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

.bb-manifesto__heading {
	position: sticky;
	top: 110px;
}

@media (max-width: 900px) {
	.bb-manifesto__heading { position: static; }
}

.bb-manifesto__eyebrow {
	display: inline-block;
	background: var(--wp--preset--color--purple-soft);
	color: var(--wp--preset--color--purple);
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	margin: 0 0 20px;
}

.bb-manifesto__title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(1.875rem, 3.5vw, 2.625rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--wp--preset--color--dark);
	margin: 0 0 18px;
}

.bb-manifesto__sub {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
	max-width: 340px;
}

.bb-manifesto__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-manifesto__item {
	display: grid;
	grid-template-columns: 48px 1fr;
	column-gap: 24px;
	padding: 24px 0;
	border-bottom: 1px solid rgba(42, 36, 51, 0.08);
}
.bb-manifesto__item:first-child { padding-top: 4px; }
.bb-manifesto__item:last-child { border-bottom: none; padding-bottom: 8px; }

.bb-manifesto__num {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: 28px;
	font-weight: 300;
	color: var(--wp--preset--color--purple-mid);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	letter-spacing: -0.01em;
	grid-row: 1 / span 2;
	align-self: start;
	padding-top: 4px;
}

.bb-manifesto__key {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--wp--preset--color--purple);
	line-height: 1.2;
	margin: 0 0 6px;
}

.bb-manifesto__desc {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

/* ─── S4: Thematic columns — 3 tinted column zones with sticky headers,
 * each column lists 4 issue blocks with icon-left + title + paragraph
 * separated by a thin divider. Replaces card-grid monotony. */
.bb-thematic-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: var(--wp--style--global--wide-size, 1680px);
	margin: 0 auto;
	padding: 0 24px;
}

@media (max-width: 980px) {
	.bb-thematic-columns { grid-template-columns: 1fr; gap: 20px; }
}

.bb-thematic-column {
	border-radius: 24px;
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
}

/* Column tints — each column its own subtle zone */
.bb-thematic-column--spine    { background: var(--wp--preset--color--purple-soft); }
.bb-thematic-column--special  { background: var(--wp--preset--color--cream-warm); }
.bb-thematic-column--sport    { background: var(--wp--preset--color--green-soft); }

.bb-thematic-column__header {
	padding-bottom: 16px;
	margin-bottom: 8px;
}

.bb-thematic-column__eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0 0 6px;
}
.bb-thematic-column--spine .bb-thematic-column__eyebrow   { color: var(--wp--preset--color--purple); }
.bb-thematic-column--special .bb-thematic-column__eyebrow { color: var(--wp--preset--color--dark); }
.bb-thematic-column--sport .bb-thematic-column__eyebrow   { color: var(--wp--preset--color--green-deep); }

.bb-thematic-column__title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--wp--preset--color--dark);
	margin: 0;
}

/* T-shape composition: icon + title on row 1 (vertically centered together),
 * full-width description spans both columns on row 2. */
.bb-thematic-block {
	display: grid;
	grid-template-columns: 40px 1fr;
	grid-template-rows: auto auto;
	column-gap: 16px;
	row-gap: 10px;
	padding: 20px 0;
	border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.bb-thematic-block:last-child { border-bottom: none; }
.bb-thematic-block:first-of-type { padding-top: 8px; }

.bb-thematic-block__icon {
	grid-column: 1;
	grid-row: 1;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	flex-shrink: 0;
}
.bb-thematic-block__icon svg {
	width: 20px;
	height: 20px;
	stroke-width: 2;
	display: block;
}

/* Per-column icon style — clearly different accent */
.bb-thematic-column--spine .bb-thematic-block__icon   { background: var(--wp--preset--color--purple); color: var(--wp--preset--color--white); }
.bb-thematic-column--special .bb-thematic-block__icon { background: var(--wp--preset--color--dark);   color: var(--wp--preset--color--white); }
.bb-thematic-column--sport .bb-thematic-block__icon   { background: var(--wp--preset--color--green);  color: var(--wp--preset--color--white); }

.bb-thematic-block__title {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.25;
	color: var(--wp--preset--color--dark);
	margin: 0;
}

.bb-thematic-block__desc {
	grid-column: 1 / -1;   /* full-width below icon + title — eliminates L-shape */
	grid-row: 2;
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

/* ─── Fyzio landing hero — floating mandala right + slow rotate ───
 * Per brief iter-02 S2: min-height 60vh, mandala absolute right -120px,
 * translate Y -50%, opacity 0.18, width 480px, rotate animation 240s. */
.bb-fyzio-hero {
	position: relative;
	overflow: hidden;
	min-height: 60vh;
	padding: 96px 32px 80px;
	background: linear-gradient(135deg, var(--wp--preset--color--cream) 0%, var(--wp--preset--color--purple-soft) 60%, var(--wp--preset--color--green-soft) 100%);
	display: flex;
	align-items: center;
}

.bb-fyzio-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}

.bb-fyzio-hero__mandala {
	position: absolute;
	right: -120px;
	top: 50%;
	transform: translateY(-50%);
	width: 480px;
	height: 480px;
	opacity: 0.18;
	pointer-events: none;
	animation: bb-mandala-rotate 240s linear infinite;
	z-index: 1;
}

@keyframes bb-mandala-rotate {
	from { transform: translateY(-50%) rotate(0deg); }
	to   { transform: translateY(-50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.bb-fyzio-hero__mandala { animation: none; }
}

.bb-fyzio-hero__title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(1.875rem, 4.2vw, 2.875rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--wp--preset--color--dark);
	margin: 0 0 18px;
}

.bb-fyzio-hero__lead {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 32px;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.bb-fyzio-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: transparent;
	color: var(--wp--preset--color--dark);
	border: 1.5px solid var(--wp--preset--color--dark);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.bb-fyzio-hero__cta:hover {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--white);
	transform: translateY(-1px);
}
.bb-fyzio-hero__cta-arrow {
	font-size: 16px;
	transition: transform 0.2s ease;
}
.bb-fyzio-hero__cta:hover .bb-fyzio-hero__cta-arrow { transform: translateY(2px); }

@media (max-width: 720px) {
	.bb-fyzio-hero { min-height: 50vh; padding: 64px 20px; }
	.bb-fyzio-hero__mandala { width: 320px; height: 320px; right: -80px; opacity: 0.14; }
}

/* ─── Section washes & feature blocks (landing pages) ────────
 * Alternating purple/green/cream tinted sections that span the full
 * viewport width; visual rhythm for long content pages. */
.bb-section--purple-wash,
.bb-section--green-wash,
.bb-section--cream-wash {
	padding: 64px 0;
	position: relative;
	overflow: hidden;
}
.bb-section--purple-wash { background: var(--wp--preset--color--purple-soft); }
.bb-section--green-wash  { background: var(--wp--preset--color--green-soft); }
.bb-section--cream-wash  { background: var(--wp--preset--color--cream); }

/* Watermark — small decorative SVG in section corner, 8% opacity.
 * On purple-wash → green watermark; on green-wash → purple; on cream → dark. */
.bb-section--purple-wash::after,
.bb-section--green-wash::after,
.bb-section--cream-wash::after {
	content: '';
	position: absolute;
	bottom: -40px;
	left: -40px;
	width: 240px;
	height: 240px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.08;
	pointer-events: none;
}

/* Per-section watermark + complementary color (use SVG mask + color background) */
.bb-section--purple-wash[data-watermark="flora"]::after,
.bb-section--purple-wash[data-watermark="spiral"]::after,
.bb-section--purple-wash[data-watermark="leaf"]::after {
	background-color: var(--wp--preset--color--green);
}
.bb-section--green-wash[data-watermark="flora"]::after,
.bb-section--green-wash[data-watermark="spiral"]::after,
.bb-section--green-wash[data-watermark="leaf"]::after {
	background-color: var(--wp--preset--color--purple);
}
.bb-section--cream-wash[data-watermark="flora"]::after,
.bb-section--cream-wash[data-watermark="spiral"]::after,
.bb-section--cream-wash[data-watermark="leaf"]::after {
	background-color: var(--wp--preset--color--dark);
	opacity: 0.05;
}

[data-watermark="flora"]::after  { mask-image:  url('../illustrations/watermark-flora.svg');  -webkit-mask-image:  url('../illustrations/watermark-flora.svg'); }
[data-watermark="spiral"]::after { mask-image:  url('../illustrations/watermark-spiral.svg'); -webkit-mask-image:  url('../illustrations/watermark-spiral.svg'); }
[data-watermark="leaf"]::after   { mask-image:  url('../illustrations/watermark-leaf.svg');   -webkit-mask-image:  url('../illustrations/watermark-leaf.svg'); }
[data-watermark]::after {
	mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
	mask-position: center; -webkit-mask-position: center;
	mask-size: contain; -webkit-mask-size: contain;
}

/* Watermark position variants: top-right for image-right features, bottom-left for image-left features */
.bb-feature--reverse ~ * [data-watermark]::after {}  /* placeholder */
.bb-section--cream-wash[data-watermark="spiral"]::after,
.bb-section--cream-wash[data-watermark="leaf"]::after {
	top: -40px;
	right: -40px;
	bottom: auto;
	left: auto;
}
.bb-section--dark-wash   {
	background: linear-gradient(135deg, var(--wp--preset--color--dark) 0%, #3d3445 50%, var(--wp--preset--color--dark) 100%);
	color: var(--wp--preset--color--white);
}

/* Content container inside a wash section */
.bb-section__inner {
	max-width: var(--wp--style--global--wide-size, 1680px);
	margin: 0 auto;
	padding: 0 32px;
}

/* Section title + eyebrow + lead — large landing typography */
.bb-section-title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--wp--preset--color--dark);
	margin: 0 0 18px;
}

/* ─── Feature section — 2-col image + content ────────────
 * Used for detail sections (Manuální terapie, Ortopedické vložky,
 * Sportovní zranění, Dětská fyzioterapie, ...). Inside a wash section. */
.bb-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: 380px;
	max-width: var(--wp--style--global--wide-size, 1680px);
	margin: 0 auto;
	padding: 32px;
	gap: 48px;
	position: relative;
	z-index: 1;
}

/* Asymmetric proportions: half features give image more space (1.2fr/1fr),
 * the other half give text more space (1fr/1.2fr) — visual dynamism. */
.bb-feature--image-larger { grid-template-columns: 1.2fr 1fr; }
.bb-feature--text-larger  { grid-template-columns: 1fr 1.2fr; }

.bb-feature--reverse { direction: rtl; }
.bb-feature--reverse > * { direction: ltr; }

@media (max-width: 900px) {
	.bb-feature,
	.bb-feature--image-larger,
	.bb-feature--text-larger { grid-template-columns: 1fr; gap: 32px; padding: 16px; }
	.bb-feature--reverse { direction: ltr; }
}

.bb-feature__image {
	min-height: 360px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 18px;     /* per iter-02 brief: images always rounded */
	overflow: hidden;
}

/* Real photos — pulled from prod uploads via rsync, converted WebP @1200w */
.bb-feature__image--reflux       { background-image: url('../images/feature/reflux-belly.webp'); }
.bb-feature__image--insoles      { background-image: url('../images/feature/orthotic-foot.webp'); }
.bb-feature__image--sport-injury { background-image: url('../images/feature/sport-knee.webp'); }
.bb-feature__image--sport-diag   { background-image: url('../images/feature/running-analysis.webp'); }
.bb-feature__image--children     { background-image: url('../images/feature/child-therapy.webp'); }
.bb-feature__image--dns-group    { background-image: url('../images/feature/dns-group-kids.webp'); }

.bb-feature__content {
	padding: 56px 64px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media (max-width: 720px) {
	.bb-feature__content { padding: 40px 24px; }
}

.bb-feature__content > h2,
.bb-feature__content .bb-section-title {
	margin-bottom: 16px;
	font-size: clamp(1.4rem, 2.5vw, 1.875rem);
}

.bb-feature__content p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 12px;
}
.bb-feature__content p:last-of-type { margin-bottom: 0; }

/* Bullet list with green dot inside feature sections */
.bb-feature__list,
ul.bb-feature__list {
	list-style: none !important;
	margin: 18px 0 0;
	padding: 0;
}
.bb-feature__list li {
	padding: 8px 0 8px 28px;
	position: relative;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-primary);
}
.bb-feature__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;
	width: 16px;
	height: 16px;
	background-image: url('../illustrations/bullet-flower.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Arrow CTA link inside feature section */
.bb-feature__link,
a.bb-feature__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--purple);
	text-decoration: none;
	letter-spacing: 0.3px;
	transition: gap 0.2s ease, color 0.2s ease;
}
.bb-feature__link::after { content: '→'; transition: transform 0.2s ease; }
.bb-feature__link:hover { color: var(--wp--preset--color--purple-deep); gap: 12px; }

/* ─── Pavlíček-style testimonial banner (dark wash) ─────── */
.bb-pavlicek-banner {
	padding: 56px 0;
	position: relative;
	overflow: hidden;
	color: var(--wp--preset--color--white);
	background: linear-gradient(135deg, var(--wp--preset--color--dark) 0%, #3d3445 50%, var(--wp--preset--color--dark) 100%);
	text-align: center;
}
.bb-pavlicek-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 20% 50%, rgba(107, 45, 123, 0.3) 0%, transparent 40%),
		radial-gradient(circle at 80% 50%, rgba(124, 179, 66, 0.15) 0%, transparent 40%);
	pointer-events: none;
}
.bb-pavlicek-banner__inner {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	padding: 0 32px;
}
.bb-pavlicek-banner__eyebrow {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--green);
	margin: 0 0 16px;
}
.bb-pavlicek-banner__title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(1.375rem, 2.6vw, 1.75rem);
	font-weight: 500;
	font-style: normal;        /* no italic — better readability on dark */
	line-height: 1.35;
	color: #ffffff;             /* plnou bílou, ne preset (více kontrast) */
	margin: 0 0 16px;
}
.bb-pavlicek-banner__title strong {
	color: #a8d275;             /* light green — ladí s eyebrow */
	font-weight: 600;
}
.bb-pavlicek-banner__tagline {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 20px;
	font-style: normal;
}
.bb-pavlicek-banner__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--green);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 0.3px;
}
.bb-pavlicek-banner__link::after { content: '→'; transition: transform 0.2s ease; }
.bb-pavlicek-banner__link:hover::after { transform: translateX(4px); }

/* ─── Layout: page-with-sidebar (main + aside) ────────────
 * Two-column grid for single posts / pages with sidebar.
 * - Desktop: main 2fr, sidebar 1fr (sticky)
 * - Tablet (≤980): stacks main → sidebar
 * - Mobile (≤600): same stack, no min-width
 *
 * Usage: wrap a wp:group with className "bb-with-sidebar"; the first
 * child becomes <main>, the second is <aside class="bb-sidebar">.
 */
.bb-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: 64px;
	max-width: var(--wp--style--global--wide-size, 1680px);
	margin: 0 auto;
	padding: 0 24px;
	align-items: start;
}

@media (max-width: 980px) {
	.bb-with-sidebar { grid-template-columns: 1fr; gap: 48px; }
}

.bb-with-sidebar > * { min-width: 0; }   /* allow shrink inside grid */
/* Aside column STRETCHES to row height — gives the inner .bb-sidebar__sticky
 * a tall enough containing block for sticky to engage as user scrolls. */
.bb-with-sidebar > *:nth-child(2) { align-self: stretch; }
.bb-with-sidebar > *:nth-child(2) > .bb-sidebar,
.bb-with-sidebar > .bb-sidebar { height: 100%; }

/* Sidebar layout: image thumbnail at top is STATIC (scrolls with page),
 * the inner .bb-sidebar__sticky wrapper holds menus and sticks when image
 * scrolls past. This means user sees the image only once, then the menu
 * takes over the sticky position. */
.bb-sidebar__sticky {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 4px;
}

.bb-sidebar__sticky::-webkit-scrollbar { width: 6px; }
.bb-sidebar__sticky::-webkit-scrollbar-thumb { background: rgba(42, 36, 51, 0.12); border-radius: 3px; }

@media (max-width: 980px) {
	.bb-sidebar__sticky {
		position: static;
		max-height: none;
		overflow: visible;
		padding-right: 0;
	}
}

/* Sidebar featured image thumbnail — small, rounded, contained. */
.bb-sidebar__thumb {
	margin: 0 !important;
	border-radius: 16px;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 4 / 3;
}
.bb-sidebar__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0 !important;
}
/* When post has no featured image, hide the empty thumb container */
.bb-sidebar__thumb:not(:has(img)) { display: none; }

/* ─── Sidebar widget primitive ────────────────────────────
 * Card-like container for sidebar widgets (TOC, related, booking, …).
 * Each widget is a separate .bb-widget so spacing is consistent. */
.bb-sidebar { display: flex; flex-direction: column; gap: 24px; }

.bb-widget {
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(42, 36, 51, 0.06);
	border-radius: 16px;
	padding: 24px 22px;
	box-shadow: 0 1px 2px rgba(42, 36, 51, 0.03);
}

.bb-widget--tinted-purple { background: var(--wp--preset--color--purple-soft); border-color: rgba(132, 88, 179, 0.10); }
.bb-widget--tinted-green  { background: var(--wp--preset--color--green-soft);  border-color: rgba(124, 179, 66, 0.12); }
.bb-widget--tinted-cream  { background: var(--wp--preset--color--cream-warm);  border-color: rgba(232, 178, 152, 0.30); }

.bb-widget__title {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--purple);
	margin: 0 0 14px;
}

.bb-widget--tinted-green .bb-widget__title { color: var(--wp--preset--color--green-deep); }

/* Stack utility — vertical rhythm inside widgets */
.bb-stack > * + * { margin-top: 12px; }
.bb-stack--sm > * + * { margin-top: 6px; }
.bb-stack--lg > * + * { margin-top: 20px; }

/* Topic list (used in sidebar-news widget) — simple link-only list with hover */
.bb-sidebar .bb-topic-list,
.bb-sidebar .wp-block-list.bb-topic-list {
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.bb-sidebar .bb-topic-list li {
	border-bottom: 1px solid rgba(42, 36, 51, 0.06);
}
.bb-sidebar .bb-topic-list li:last-child { border-bottom: none; }
.bb-sidebar .bb-topic-list a {
	display: block;
	padding: 8px 0;
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 14px;
	color: var(--wp--preset--color--dark);
	text-decoration: none;
	transition: color 0.2s ease, padding-left 0.2s ease;
}
.bb-sidebar .bb-topic-list a:hover {
	color: var(--wp--preset--color--purple);
	padding-left: 6px;
}

/* Sidebar buttons — full width, slightly smaller than main CTA */
.bb-sidebar .wp-block-button .wp-element-button {
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 999px;
	width: 100%;
	text-align: center;
}
.bb-sidebar .wp-block-button.is-style-outline .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--purple);
	border: 1.5px solid var(--wp--preset--color--purple);
}
.bb-sidebar .wp-block-button.is-style-outline .wp-element-button:hover {
	background: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--white);
}
.bb-sidebar .wp-block-buttons { gap: 8px; }

/* Sidebar paragraphs inside widgets */
.bb-sidebar .bb-widget p { margin: 0; }
.bb-sidebar .bb-widget p + p { margin-top: 12px; }

/* ─── Breadcrumb — sits BELOW hero, above main content. Utility nav. */
.bb-breadcrumb {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 12.5px;
	color: var(--wp--preset--color--text-secondary);
	max-width: var(--wp--style--global--wide-size, 1680px);
	margin: -24px auto 24px;
	padding: 0 24px;
	position: relative;
	z-index: 1;
}

.bb-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.bb-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.bb-breadcrumb__item a {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	transition: color 0.2s ease;
}
.bb-breadcrumb__item a:hover { color: var(--wp--preset--color--purple); }

.bb-breadcrumb__item [aria-current="page"] {
	color: var(--wp--preset--color--purple);
	font-weight: 500;
}

.bb-breadcrumb__sep {
	color: var(--wp--preset--color--text-tertiary);
	opacity: 0.55;
	font-size: 11px;
}

/* ─── Archive layouts (services / team) ──────────────────── */
.bb-archive {
	max-width: var(--wp--style--global--wide-size, 1680px);
	margin: 32px auto;
	padding: 0 24px;
}

.bb-archive__header {
	text-align: center;
	margin-bottom: 48px;
}

.bb-archive__title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--wp--preset--color--dark);
	margin: 0 0 16px;
}

.bb-archive__lead {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	max-width: 640px;
	margin: 0 auto;
}

/* Archive post-template grid: explicit 3-col on wide screens to avoid
 * auto-fit weirdness from is-layout-constrained children pushing widths. */
.bb-archive__grid .wp-block-post-template,
.bb-archive__list,
.bb-archive .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 980px) {
	.bb-archive__grid .wp-block-post-template,
	.bb-archive__list,
	.bb-archive .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.bb-archive__grid .wp-block-post-template,
	.bb-archive__list,
	.bb-archive .wp-block-post-template { grid-template-columns: 1fr; }
}

/* Team archive uses smaller tracks so 4 portraits fit per row */
.bb-archive__grid--team .wp-block-post-template,
.bb-archive--team .bb-archive__list,
.bb-archive--team .wp-block-post-template {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) {
	.bb-archive--team .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}

/* Compact-list variant (Novinky) — single column with horizontal layout */
.bb-archive--list .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 880px;
	margin: 0 auto;
}

/* 2-col archive grid — used when sidebar takes 1/3 of width (.bb-with-sidebar context) */
.bb-archive--grid-2 .wp-block-post-template,
.bb-with-sidebar .bb-archive .wp-block-post-template {
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
@media (max-width: 720px) {
	.bb-archive--grid-2 .wp-block-post-template,
	.bb-with-sidebar .bb-archive .wp-block-post-template { grid-template-columns: 1fr; }
}

.bb-archive__pagination {
	margin-top: 48px;
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 14px;
	gap: 16px;
}

.bb-archive__pagination a,
.bb-archive__pagination .page-numbers {
	color: var(--wp--preset--color--purple);
	text-decoration: none;
	padding: 6px 10px;
	border-radius: 8px;
	transition: background 0.2s ease;
}

.bb-archive__pagination a:hover {
	background: var(--wp--preset--color--purple-soft);
}

.bb-archive__pagination .page-numbers.current {
	background: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--white);
}

/* ─── Card (used inside archive grids) ─────────────────────
 * Rounded card per site-wide design conventions (18px). The colored
 * meta-row sits in the middle (after image/mandala), so its left/right
 * edges meet card's straight side edges → no rounding on the strip itself
 * even though the card as a whole is rounded. */
.bb-card {
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(42, 36, 51, 0.06);
	border-radius: 18px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
}

/* ─── Card meta-row (category eyebrow + date inline) ────────
 * Replaces the standalone eyebrow strip. Category on the left,
 * date on the right, both inside a colored bar between image and title. */
.bb-card__meta-row {
	background: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--white);
	padding: 9px 18px !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: nowrap;
}

.bb-card__meta-row .bb-card__eyebrow,
.bb-card__meta-row .wp-block-post-terms {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: inherit !important;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	line-height: 1.2;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.bb-card__meta-row .bb-card__eyebrow a,
.bb-card__meta-row .wp-block-post-terms a {
	color: inherit !important;
	text-decoration: none !important;
}

.bb-card__meta-row .bb-card__date,
.bb-card__meta-row .wp-block-post-date {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: rgba(255, 255, 255, 0.82) !important;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.3px;
	white-space: nowrap;
	flex-shrink: 0;
	text-transform: none;
}

/* Per-category meta-row colors via :has() (same palette as old eyebrow tags) */
.bb-card__meta-row:has(a[href*="/novinky/"])      { background: var(--wp--preset--color--green); }
.bb-card__meta-row:has(a[href*="/clanky/"])       { background: var(--wp--preset--color--purple); }
.bb-card__meta-row:has(a[href*="/deti/"])         { background: var(--wp--preset--color--cream-warm); color: var(--wp--preset--color--dark); }
.bb-card__meta-row:has(a[href*="/deti/"]) a       { color: var(--wp--preset--color--dark) !important; }
.bb-card__meta-row:has(a[href*="/deti/"]) .bb-card__date,
.bb-card__meta-row:has(a[href*="/deti/"]) .wp-block-post-date { color: rgba(42, 36, 51, 0.7) !important; }
.bb-card__meta-row:has(a[href*="/fyzioterapie"])  { background: var(--wp--preset--color--purple-mid); }
.bb-card__meta-row:has(a[href*="/psychoterapie"]) { background: var(--wp--preset--color--purple-deep); }

.bb-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(42, 36, 51, 0.10);
	border-color: rgba(42, 36, 51, 0.12);
}

/* When an archive card lacks a featured image, render a brand mandala placeholder
 * at top (matches image area dimensions) so cards have uniform structure.
 * Excluded from compact-layout cards which intentionally hide images. */
.bb-archive .bb-card:not(.bb-card--compact):not(:has(.bb-card__image))::before,
.bb-archive .bb-card:not(.bb-card--compact):has(.bb-card__image:empty)::before,
.bb-related .bb-card:not(.bb-card--compact):not(:has(.bb-card__image))::before,
.bb-category-list:not(.bb-category-list--compact) .bb-card:not(:has(.bb-card__image))::before {
	content: '';
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	background:
		url('../img/mandala-fallback.png') center center no-repeat,
		linear-gradient(135deg, var(--wp--preset--color--purple-soft) 0%, var(--wp--preset--color--cream-warm) 100%);
	background-size: 200px auto, cover;
	background-color: var(--wp--preset--color--purple-soft);
	flex-shrink: 0;
}

/* Sidebar thumb fallback — also a mandala when no featured image */
.bb-sidebar__thumb:not(:has(img)) {
	display: block;
	background:
		url('../img/mandala-fallback.png') center center no-repeat,
		linear-gradient(135deg, var(--wp--preset--color--purple-soft) 0%, var(--wp--preset--color--cream-warm) 100%);
	background-size: 140px auto, cover;
}

.bb-card__image {
	display: block;
	margin: 0 !important;
	width: 100%;
	aspect-ratio: 16 / 10;          /* uniform card image crop — golden-mean center */
	overflow: hidden;
	background: var(--wp--preset--color--cream);    /* placeholder color */
}

.bb-card__image,
.bb-card__image img {
	border-radius: 0 !important;
}

.bb-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;        /* golden-mean center crop */
	transition: transform 0.4s ease;
}

.bb-card:hover .bb-card__image img {
	transform: scale(1.03);
}

/* Eyebrow inside cards — small purple text above title */
.bb-card__eyebrow {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--purple);
	padding: 16px 20px 0;
	margin: 0 !important;
}
.bb-card__eyebrow a {
	color: inherit;
	text-decoration: none;
}
.bb-card__eyebrow a:hover { color: var(--wp--preset--color--purple-deep); }

/* Eyebrow as a colored TAG BAR — used in archive cards (.bb-archive context).
 * Sits flush against image bottom; auto-colored via category-keyed CSS (below).
 * Per img_23 production reference. */
.bb-archive .bb-card__eyebrow,
.bb-card__eyebrow--tag {
	margin: 0 !important;
	padding: 10px 18px;
	background: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--white);
	letter-spacing: 1.2px;
	font-size: 10.5px;
	font-weight: 700;
	display: block;
}
.bb-archive .bb-card__eyebrow a,
.bb-card__eyebrow--tag a {
	color: var(--wp--preset--color--white) !important;
	text-decoration: none;
}
.bb-archive .bb-card__eyebrow a:hover,
.bb-card__eyebrow--tag a:hover { opacity: 0.85; }

/* Per-category tag colors — keyed by category slug via wp-block-post-terms.
 * WP renders post-terms inside a span/anchor with class taxonomy-category;
 * the actual term link's classes (like category-novinky) are set by core. */
.bb-card__eyebrow:has(a[href*="/novinky/"])     { background: var(--wp--preset--color--green); }
.bb-card__eyebrow:has(a[href*="/clanky/"])      { background: var(--wp--preset--color--purple); }
.bb-card__eyebrow:has(a[href*="/deti/"])        { background: var(--wp--preset--color--cream-warm); color: var(--wp--preset--color--dark); }
.bb-card__eyebrow:has(a[href*="/deti/"]) a      { color: var(--wp--preset--color--dark) !important; }
.bb-card__eyebrow:has(a[href*="/fyzioterapie"]) { background: var(--wp--preset--color--purple-mid); }
.bb-card__eyebrow:has(a[href*="/psychoterapie"]) { background: var(--wp--preset--color--purple-deep); }

.bb-card--therapist .bb-card__image--portrait {
	background: var(--wp--preset--color--cream-warm);
}

.bb-card__title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--dark);
	padding: 16px 20px 8px;
	margin: 0 !important;
}

.bb-card__title a {
	color: inherit;
	text-decoration: none;
}

.bb-card__title a:hover {
	color: var(--wp--preset--color--purple);
}

.bb-card__excerpt {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secondary);
	padding: 0 20px 12px;
	margin: 0 !important;
	flex: 1;
}

/* Clamp to 3 lines so excerpt height is uniform across cards regardless
 * of source content length. Applied on the inner <p> — clamping the outer
 * div with a nested block child clips mid-line instead of at a line box. */
.bb-card__excerpt > p {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Hide the inline "Číst dál" link that WP's post-excerpt block emits at
 * end of text — we render a styled CTA below instead. */
.bb-card__excerpt a.wp-block-post-excerpt__more-link,
.bb-card__excerpt > a:last-child:not([class]) {
	display: none;
}

/* "Read more" CTA — subtle pill-style accent that reads as an action
 * without competing with the title. Auto-rendered via .bb-card-cta class
 * (added by JS-free approach: card link wraps fallback OR explicit child). */
.bb-card__cta,
.bb-card .bb-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--purple);
	text-decoration: none;
	padding: 0 20px 18px;
	margin: 0 !important;
	letter-spacing: 0.2px;
	transition: gap 0.2s ease, color 0.2s ease;
}
.bb-card__cta::after {
	content: '→';
	transition: transform 0.2s ease;
}
.bb-card__cta:hover {
	color: var(--wp--preset--color--purple-deep);
	gap: 10px;
}
.bb-card:hover .bb-card__cta::after { transform: translateX(2px); }

.bb-card__date {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 12px;
	color: var(--wp--preset--color--text-tertiary);
	padding: 0 20px 20px;
	margin: 0 !important;
	font-variant-numeric: tabular-nums;
}

/* ─── Compact list-card variant (Novinky) ───────────────────
 * Horizontal layout — date on left, eyebrow + title + excerpt right.
 * Use on category-novinky.html / via class `bb-card--compact` on the post template item. */
.bb-card--compact {
	flex-direction: row;
	align-items: stretch;
	gap: 0;
}
.bb-card--compact .bb-card__image { display: none; }

/* Karta je řádkový flex a její jediné dítě je tělo — bez flex-grow se smrští
   na šířku textu, takže u krátkého nadpisu zůstane barevný štítek useknutý
   v půlce karty. Tělo proto musí vyplnit celou šířku. */
.bb-card--compact .bb-card__body {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}
.bb-card--compact .bb-card__eyebrow { padding: 18px 20px 0; }
.bb-card--compact .bb-card__title { font-size: 17px; padding-top: 4px; padding-bottom: 4px; }
.bb-card--compact .bb-card__excerpt { padding-bottom: 14px; font-size: 13.5px; }
.bb-card--compact .bb-card__date { padding-bottom: 16px; }

/* ─── Page / single post / archive hero strip — Variant B chosen ───
 * Gradient purple-soft → green-soft, full wide-size width (1680px),
 * shorter height (compact padding) so the strip doesn't dominate
 * above content. No left accent bar.
 */
.bb-page-hero,
.bb-post-hero,
.bb-archive-hero {
	margin: 32px auto 48px !important;
	padding: 36px 32px;
	width: calc(100% - 32px);
	max-width: var(--wp--style--global--wide-size, 1680px) !important;
	text-align: center;
	box-sizing: border-box;
	background: linear-gradient(135deg, var(--wp--preset--color--purple-soft) 0%, var(--wp--preset--color--green-soft) 100%);
	border-radius: 18px;
	position: relative;
	overflow: hidden;
}

/* Subtle organic shape in the top-right corner — same decorative
 * vocabulary as Hero / CTA banner so the page header reads as a
 * member of the same design family. */
.bb-page-hero::after,
.bb-post-hero::after,
.bb-archive-hero::after {
	content: '';
	position: absolute;
	top: -80px;
	right: -60px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(124, 179, 66, 0.15);
	pointer-events: none;
	z-index: 0;
}

/* Hero inner stack — eyebrow + title + meta sit on the same axis.
 * No narrow inner column so the title fills the strip naturally;
 * eyebrow and meta are constrained to keep them visually compact. */
.bb-page-hero > *,
.bb-post-hero > *,
.bb-archive-hero > * {
	position: relative;
	z-index: 1;
}

.bb-page-hero__title,
.bb-post-hero__title,
.bb-archive-hero__title {
	max-width: none;
	margin: 4px auto 0 !important;
}

/* Eyebrow + meta stay narrow so they don't stretch across the full
 * strip width — only the title goes wide. */
.bb-post-hero__eyebrow,
/* Removed earlier 880px cap — meta now uses width:100% from the
 * authoritative rule further below. Kept only the eyebrow narrow
 * via the rule right below. */

/* Kept as opt-in variant if a specific page wants the cream pill look. */
.bb-post-hero--a {
	background: var(--wp--preset--color--cream);
	border-radius: 18px;
}

.bb-demo-variant-c .bb-post-hero::after,
.bb-post-hero--c::after {
	content: '';
	position: absolute;
	top: -80px;
	right: -60px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: rgba(124, 179, 66, 0.18);
	pointer-events: none;
}

.bb-demo-variant-c .bb-post-hero .bb-post-hero__title,
.bb-post-hero--c .bb-post-hero__title { color: var(--wp--preset--color--white); }
.bb-demo-variant-c .bb-post-hero .bb-post-hero__eyebrow,
.bb-post-hero--c .bb-post-hero__eyebrow { color: var(--wp--preset--color--green); }
.bb-demo-variant-c .bb-post-hero .bb-post-hero__meta,
.bb-post-hero--c .bb-post-hero__meta { color: rgba(255, 255, 255, 0.7); }
.bb-demo-variant-c .bb-post-hero .bb-post-hero__eyebrow a,
.bb-post-hero--c .bb-post-hero__eyebrow a { color: inherit; }

.bb-demo-variant-d .bb-post-hero .bb-post-hero__title,
.bb-post-hero--d .bb-post-hero__title {
	max-width: 920px;
	font-size: clamp(2rem, 5vw, 3.25rem) !important;
	font-weight: 600 !important;
	grid-column: 1;
}

.bb-demo-variant-d .bb-post-hero .bb-post-hero__eyebrow,
.bb-post-hero--d .bb-post-hero__eyebrow {
	display: block;
	grid-column: 1;
	font-size: 12px;
}

.bb-demo-variant-d .bb-post-hero .bb-post-hero__meta,
.bb-post-hero--d .bb-post-hero__meta {
	grid-column: 2;
	grid-row: 2;
	align-self: end;
	margin: 0;
	text-align: right;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.bb-demo-variant-d .bb-post-hero .bb-post-hero__meta > *::after,
.bb-post-hero--d .bb-post-hero__meta > *::after { content: none; }
.bb-demo-variant-d .bb-post-hero .bb-post-hero__meta > *,
.bb-post-hero--d .bb-post-hero__meta > * { padding: 0; }

.bb-page-hero__title,
.bb-post-hero__title,
.bb-archive-hero__title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(2rem, 4.2vw, 3rem);
	font-weight: 500;
	letter-spacing: -0.022em;
	line-height: 1.08;
	color: var(--wp--preset--color--dark);
	margin: 0;
	max-width: none;
}

/* Eyebrow / breadcrumb above the title — purple per DS section-tag.
 * Sits in a white pill background that anchors the label visually
 * inside the gradient strip. Inline-block so the pill only wraps
 * the text width, not the whole row.
 */
.bb-post-hero__eyebrow,
.bb-card__eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--purple);
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(6px);
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 auto 24px;
}

.bb-card__eyebrow {
	background: transparent;
	padding: 0;
	backdrop-filter: none;
}

.bb-post-hero__eyebrow a:not(:first-of-type),
.bb-card__eyebrow a:not(:first-of-type),
.bb-post-hero__eyebrow .wp-block-post-terms__separator,
.bb-card__eyebrow .wp-block-post-terms__separator {
	display: none;
}

.bb-post-hero__eyebrow a,
.bb-card__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.bb-post-hero__eyebrow a:hover,
.bb-card__eyebrow a:hover {
	color: var(--wp--preset--color--purple-deep);
}

/* Post meta — centered, sits comfortably below the title.
 * Heavy specificity (.bb-post-hero .bb-post-hero__meta) so it beats any
 * WP block library inline-generated styles plus the earlier max-width
 * rule sitting higher in the cascade. */
.bb-post-hero .bb-post-hero__meta,
.bb-post-hero__meta {
	display: flex !important;
	flex-direction: row !important;
	gap: 16px !important;
	justify-content: center !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	margin: 20px auto 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
	text-align: center !important;
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 13px;
	color: var(--wp--preset--color--text-secondary);
}

.bb-post-hero .bb-post-hero__meta > *,
.bb-post-hero__meta > * {
	flex: 0 0 auto !important;
	margin: 0 !important;
}

.bb-post-hero__meta > * {
	position: relative;
}

.bb-post-hero__meta > *:not(:last-child)::after {
	content: '·';
	position: absolute;
	right: -12px;
	color: var(--wp--preset--color--text-tertiary);
}

.bb-archive-hero__lead {
	margin: 12px auto 0;
	max-width: 640px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--wp--preset--color--text-secondary);
}

@media (max-width: 720px) {
	.bb-page-hero,
	.bb-post-hero,
	.bb-archive-hero {
		padding: 28px 24px;
		margin: 16px auto 32px !important;
	}
}

/* Featured image banner under post hero — bleed wide, rounded.
 * Spacing matches the hero strip below it so they read as one block. */
.bb-post-cover {
	margin: 0 auto 56px !important;
	width: calc(100% - 32px);
	max-width: var(--wp--style--global--wide-size, 1680px) !important;
	border-radius: 18px;
	overflow: hidden;
}

.bb-post-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Post content wrapper — parent is full wide-size so .alignwide children
 * (cards, price tables, CTAs) can span the full layout. Regular flow text
 * is kept narrow & comfortable via the rule below. */
.bb-post-content,
.bb-page-content {
	/* same content-box trap as .bb-header: 100% width + 24px padding */
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1680px) !important;
	margin: 0 auto 80px !important;
	padding: 0 24px;
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 17px;
	line-height: 1.75;
	color: var(--wp--preset--color--text-primary);
}

/* Narrow reading width applies ONLY to direct flow children that are not
 * alignwide/alignfull — paragraphs, headings, lists stay readable. */
.bb-post-content > :where(:not(.alignwide):not(.alignfull):not(.wp-block-group):not(.wp-block-cover):not(.bb-grid)),
.bb-page-content > :where(:not(.alignwide):not(.alignfull):not(.wp-block-group):not(.wp-block-cover):not(.bb-grid)) {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* Content stays centered on all viewport sizes — matches the
 * centered hero title above for visual consistency. */

.bb-post-content > *,
.bb-page-content > * {
	margin-bottom: 1.25em;
}

.bb-post-content h2,
.bb-page-content h2 {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(1.5rem, 2.5vw, 1.875rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--wp--preset--color--dark);
	margin: 48px 0 16px;
}

.bb-post-content h3,
.bb-page-content h3 {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.3;
	color: var(--wp--preset--color--dark);
	margin: 32px 0 12px;
}

.bb-post-content h4,
.bb-page-content h4 {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--wp--preset--color--dark);
	margin: 24px 0 8px;
}

.bb-post-content a,
.bb-page-content a {
	color: var(--wp--preset--color--purple);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.bb-post-content a:hover,
.bb-page-content a:hover {
	color: var(--wp--preset--color--purple-deep);
}

.bb-post-content blockquote,
.bb-page-content blockquote {
	border-left: 3px solid var(--wp--preset--color--green);
	padding: 8px 0 8px 20px;
	margin: 24px 0;
	font-style: italic;
	color: var(--wp--preset--color--text-secondary);
}

.bb-post-content img,
.bb-page-content img {
	border-radius: 12px;
	max-width: 100%;
	height: auto;
}

.bb-post-content ul,
.bb-page-content ul,
.bb-post-content ol,
.bb-page-content ol {
	padding-left: 1.5em;
}

.bb-post-content li,
.bb-page-content li {
	margin-bottom: 0.5em;
}

/* Blog archive card extensions for posts */
.bb-card--post .bb-card__date {
	font-size: 12px;
	color: var(--wp--preset--color--text-tertiary);
	padding: 0 20px 20px;
	margin: 0;
}

.bb-card--post .bb-card__eyebrow {
	padding: 16px 20px 0;
	margin: 0 0 4px;
}

.bb-archive--blog .wp-block-post-template {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

@media (max-width: 720px) {
	.bb-page-hero,
	.bb-post-hero,
	.bb-archive-hero {
		padding: 40px 24px 32px;
		margin: 8px auto 24px !important;
	}
	.bb-post-content,
	.bb-page-content {
		font-size: 16px;
		padding: 0 20px;
	}
}

/* ─── Single post layouts (services / team detail) ──────── */
.bb-single {
	max-width: 1080px;
	margin: 32px auto;
	padding: 0 24px;
}

.bb-single__header {
	margin-bottom: 32px;
}

.bb-single__breadcrumb {
	font-size: 13px;
	margin: 0 0 8px;
}

.bb-single__breadcrumb a {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
}

.bb-single__breadcrumb a:hover {
	color: var(--wp--preset--color--purple);
}

.bb-single__title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--wp--preset--color--dark);
	margin: 0;
}

.bb-single__hero-image {
	margin: 0 0 32px;
	border-radius: 18px;
	overflow: hidden;
}

.bb-single__hero-image img {
	width: 100%;
	display: block;
}

.bb-single__content {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--preset--color--text-primary);
	margin-bottom: 48px;
}

/* Therapist single layout — portrait + meta side-by-side */
.bb-therapist__intro {
	gap: 32px;
	margin-bottom: 32px;
}

.bb-therapist__portrait {
	flex: 0 0 280px;
	border-radius: 18px;
	overflow: hidden;
	background: var(--wp--preset--color--cream-warm);
}

.bb-therapist__portrait img {
	width: 100%;
	display: block;
}

.bb-therapist__meta {
	flex: 1 1 auto;
}

.bb-therapist__name {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--wp--preset--color--dark);
	margin: 0 0 12px;
}

.bb-therapist__role {
	font-size: 15px;
	color: var(--wp--preset--color--text-secondary);
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 720px) {
	.bb-therapist__intro {
		flex-direction: column;
	}

	.bb-therapist__portrait {
		flex-basis: auto;
		max-width: 320px;
	}
}

/* ─── Feature card (used on homepage 3-col overview) ─────── */
.bb-feature-card {
	background: var(--wp--preset--color--cream);
	border-radius: 18px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	height: 100%;
}

.bb-feature-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(42, 36, 51, 0.08);
}

.bb-feature-card--purple { background: var(--wp--preset--color--purple-soft); }
.bb-feature-card--green  { background: var(--wp--preset--color--green-soft); }
.bb-feature-card--cream  { background: var(--wp--preset--color--cream-warm); }

.bb-feature-card .wp-block-image {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4/3;
}

.bb-feature-card .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-feature-card h3,
.bb-feature-card .wp-block-heading {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dark);
	margin: 0;
	text-align: center;
}

.bb-feature-card h3 a {
	color: inherit;
	text-decoration: none;
}

.bb-feature-card h3 a:hover {
	color: var(--wp--preset--color--purple);
}

.bb-feature-card ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bb-feature-card li {
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--text-primary);
	padding-left: 16px;
	position: relative;
}

.bb-feature-card li::before {
	content: '•';
	color: var(--wp--preset--color--purple);
	position: absolute;
	left: 0;
	font-weight: 600;
}

.bb-feature-card--green li::before { color: var(--wp--preset--color--green); }
.bb-feature-card--cream li::before { color: var(--wp--preset--color--dark); }

.bb-feature-card a {
	color: var(--wp--preset--color--purple);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.bb-feature-card a:hover {
	color: var(--wp--preset--color--purple-deep);
	text-decoration: underline;
}

.bb-feature-card--green a { color: var(--wp--preset--color--green-deep); }
.bb-feature-card--cream a { color: var(--wp--preset--color--dark); }

/* ─── Narrative sections (image + text alternating) ──────── */
.bb-narrative {
	margin: 96px auto 64px;
	padding: 0;
	background: transparent;
}

/* Title left-aligned with the photo column start (not centered).
 * Matches the same max-width as the media-text wrapper below so the
 * title visually anchors to the same column boundaries. */
.bb-narrative__title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--wp--preset--color--dark);
	text-align: left;
	max-width: 1280px;
	margin: 0 auto 32px;
	padding: 0 24px;
}

.bb-narrative .wp-block-media-text {
	max-width: 1280px;
	margin: 0 auto;
	align-items: center;
	gap: 48px;
	grid-template-columns: 420px 1fr !important;
}

.bb-narrative .wp-block-media-text.has-media-on-the-right {
	grid-template-columns: 1fr 420px !important;
}

/* Force uniform photo treatment — every narrative image is the same
 * size, ratio, radius. The original media-text inline grid-template
 * uses 33%/auto which let differently-shaped uploads look chaotic. */
.bb-narrative .wp-block-media-text__media {
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	overflow: hidden;
	background: var(--wp--preset--color--cream-warm);
	box-shadow: 0 4px 16px rgba(42, 36, 51, 0.08);
}

.bb-narrative .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.bb-narrative .wp-block-media-text__content {
	padding: 0;
	max-width: none;
	width: 100%;
}

.bb-narrative p {
	font-size: clamp(15px, 1.2vw, 16px);
	line-height: 1.75;
	color: var(--wp--preset--color--text-primary);
	margin: 0 0 14px;
}

.bb-narrative h3 {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 500;
	color: var(--wp--preset--color--dark);
	margin: 0 0 16px;
	letter-spacing: -0.005em;
}

@media (max-width: 900px) {
	.bb-narrative .wp-block-media-text,
	.bb-narrative .wp-block-media-text.has-media-on-the-right {
		grid-template-columns: 1fr !important;
		gap: 24px;
	}
	.bb-narrative .wp-block-media-text__media {
		max-width: 480px;
		margin: 0 auto;
	}
}

/* ─── Stats hero (bg image + white-translucent overlay cols) ── */
.bb-stats-hero {
	margin: 96px auto 64px;
}

.bb-stats-hero .wp-block-cover {
	border-radius: 18px;
	overflow: hidden;
	min-height: 360px;
	/* Core cover dává jen 16px — bílé boxy pak lícují s okrajem fotky. */
	padding: clamp(20px, 4vw, 48px);
}

/* Dva bílé boxy vedle sebe měly mezi sebou 0px (columns bez blockGap),
   na mobilu se pod sebou přímo dotýkaly. gap řeší obě osy. */
.bb-stats-hero .wp-block-columns {
	gap: clamp(16px, 2.5vw, 28px);
	margin: 0;
}

.bb-stats-hero__col {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(8px);
	border-radius: 14px;
	padding: 28px 32px;
	color: var(--wp--preset--color--dark);
}

.bb-stats-hero__col h4,
.bb-stats-hero__col .wp-block-heading {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--dark);
	text-align: center;
	margin: 0 0 8px;
	line-height: 1.4;
}

.bb-stats-hero__col strong {
	color: var(--wp--preset--color--purple);
	font-weight: 700;
}

/* ─── Partners row (logos) ───────────────────────────────── */
.bb-partners {
	margin: 96px auto 64px;
	padding: 0;
	text-align: center;
}

.bb-partners__title {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-tertiary);
	font-weight: 600;
	margin: 0 0 24px;
}

/* ─── Section anatomy ────────────────────────────────────────
 * Every section reads as: optional eyebrow → title → lead → content.
 * Title + lead are always narrow & centered so they feel anchored,
 * even when the content below stretches to the full wide-size.
 */
.bb-section-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--green-deep);
	text-align: center;
	margin: 0 auto 12px;
	max-width: 720px;
}

.bb-section-title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--wp--preset--color--dark);
	text-align: center;
	max-width: 760px;
	margin: 96px auto 16px;
	padding: 0 24px;
}

/* When a title sits right after an eyebrow, kill the big top margin */
.bb-section-eyebrow + .bb-section-title,
.bb-section-eyebrow + .wp-block-heading.bb-section-title {
	margin-top: 8px;
}

.bb-section-lead {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.65;
	color: var(--wp--preset--color--text-secondary);
	max-width: 640px;
	text-align: center;
	margin: 0 auto 48px;
	padding: 0 24px;
}

/* Section eyebrow accent colour variants (use brand palette) */
.bb-section-eyebrow--purple { color: var(--wp--preset--color--purple); }
.bb-section-eyebrow--dark   { color: var(--wp--preset--color--dark); }

.bb-grid,
.bb-grid.alignwide {        /* bump specificity over WP's .is-layout-constrained > .alignwide */
	display: grid;
	gap: 24px;
	width: 100%;
	max-width: 1100px;       /* cap grid width so cards don't stretch on wide screens */
	margin-left: auto;
	margin-right: auto;
	align-items: stretch;
}

/* Override WP's layout-constrained max-width on direct grid children.
 * NOTE: do NOT set width:100% here — grid items naturally fill their cell.
 * Setting width:100% combined with content-box padding on the child causes
 * overflow & adjacent-cell overlap. */
.bb-grid > * {
	box-sizing: border-box;
	max-width: none !important;
	margin-left: 0;
	margin-right: 0;
	align-self: stretch;
	min-width: 0;             /* allow shrink to fit cell */
}

.bb-grid--cards-4 {
	grid-template-columns: repeat(4, 1fr);
}

.bb-grid--cards-3 {
	grid-template-columns: repeat(3, 1fr);
}

.bb-grid--cards-2 {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 980px) {
	.bb-grid--cards-4,
	.bb-grid--cards-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.bb-grid--cards-4,
	.bb-grid--cards-3,
	.bb-grid--cards-2 { grid-template-columns: 1fr; }
}

/* ─── Testimonial (inline, before we have a dedicated block) ── */
.bb-testimonial {
	max-width: 720px;
	margin: 32px auto 64px;
	padding: 0 24px;
	position: relative;
}

.bb-testimonial::before {
	content: '"';
	position: absolute;
	top: -32px;
	left: 8px;
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: 120px;
	line-height: 1;
	color: var(--wp--preset--color--purple);
	opacity: 0.25;
	pointer-events: none;
}

.bb-testimonial__quote {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	line-height: 1.4;
	color: var(--wp--preset--color--dark);
	margin: 0 0 24px;
	padding-left: 32px;
	border-left: none;
}

.bb-testimonial__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-left: 32px;
}

.bb-testimonial__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--purple-soft);
	color: var(--wp--preset--color--purple);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}

.bb-testimonial__name {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--wp--preset--color--dark);
}

.bb-testimonial__role {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 12px;
	color: var(--wp--preset--color--text-secondary);
	margin-top: 2px;
}

/* ── Anchor targets (ceník sections aj.) ─────────────────────────────
 * Offset for the sticky header so in-page anchors don't land hidden
 * underneath it. Applies to any explicitly anchored group/section. */
.wp-block-group[id],
.bb-price[id],
[id].bb-anchor {
	scroll-margin-top: 110px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * FYZIO LANDING v2 — scoped under --v2 / new block names so the original
 * page (4645) keeps rendering unchanged and the two can be compared
 * side by side. Do not fold these into the v1 rules until v2 is approved.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Hero: narrow band with a real photo instead of a 60vh empty gradient.
 * The source banner has an intentionally washed-out left third, so the
 * scrim only needs to carry the first ~60% for the text to stay legible. */
.bb-fyzio-hero.bb-fyzio-hero--v2 {
	min-height: 0;
	padding: clamp(40px, 4.5vw, 68px) 32px clamp(36px, 4vw, 56px);
	background:
		linear-gradient(90deg,
			rgba(251, 247, 244, 0.96) 0%,
			rgba(251, 247, 244, 0.90) 30%,
			rgba(251, 247, 244, 0.42) 50%,
			rgba(251, 247, 244, 0.00) 70%),
		url('../images/hero/fyzio-hero-band.webp') 72% center / cover no-repeat,
		var(--wp--preset--color--cream);
	display: block;
}

.bb-fyzio-hero--v2 .bb-fyzio-hero__inner {
	max-width: 1240px;
	margin: 0 auto;
	text-align: left;
}

.bb-fyzio-hero--v2 .bb-fyzio-hero__eyebrow {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green-deep);
	margin: 0 0 10px;
}

.bb-fyzio-hero--v2 .bb-fyzio-hero__title {
	max-width: 620px;
	font-size: clamp(1.7rem, 3.2vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 12px;
}

.bb-fyzio-hero--v2 .bb-fyzio-hero__lead {
	max-width: 560px;
	margin: 0 0 22px;
}

.bb-fyzio-hero--v2 .bb-fyzio-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.bb-fyzio-hero--v2 .bb-fyzio-hero__cta--primary {
	background: var(--wp--preset--color--purple);
	border-color: var(--wp--preset--color--purple);
	color: #ffffff;
}

/* Below 900px a 5.3:1 photo behind the text is unreadable at any scrim
 * strength, so the band moves below the copy and gets shown in full. */
@media (max-width: 900px) {
	.bb-fyzio-hero.bb-fyzio-hero--v2 {
		padding: 32px 20px 0;
		background: var(--wp--preset--color--cream);
	}

	.bb-fyzio-hero--v2::after {
		content: "";
		display: block;
		height: 150px;
		margin: 24px -20px 0;
		background: url('../images/hero/fyzio-hero-band.webp') 72% center / cover no-repeat;
	}

	.bb-fyzio-hero--v2 .bb-fyzio-hero__actions .bb-fyzio-hero__cta {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* ── Mandala section — the brand identity moment the client asked to get
 * back. 4 tiles / mandala / 4 tiles on desktop; on mobile the mandala
 * moves to the top (order:-1) at a size that still reads as a mandala. */
.bb-mandala-section {
	background: linear-gradient(180deg, transparent 0%, var(--wp--preset--color--cream) 28%);
	padding: 72px 0 84px;
}

.bb-mandala-section__header {
	max-width: 720px;
	margin: 0 auto 40px;
	padding: 0 32px;
	text-align: center;
}

.bb-mandala-section__title {
	font-family: var(--wp--preset--font-family--display), serif;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 500;
	color: var(--wp--preset--color--dark);
	margin: 0 0 8px;
}

.bb-mandala-section__sub {
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

.bb-mandala-wrap {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 48px;
	align-items: center;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
}

.bb-mandala-col {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.bb-mandala-svg {
	width: clamp(220px, 24vw, 340px);
	height: auto;
	display: block;
}

/* The section renders inside .bb-page-content, whose `a` rule (0,2,0)
 * forces purple + underline — so these need to out-specify it. */
.bb-mandala-section a.bb-mandala-tile,
.bb-mandala-section a.bb-mandala-tile:hover,
.bb-mandala-section a.bb-mandala-tile:focus-visible {
	text-decoration: none;
	color: inherit;
}

.bb-mandala-section a.bb-mandala-tile {
	position: relative;
	display: block;
	padding: 12px 0;
	text-align: right;
	transition: transform 0.25s ease;
}

.bb-mandala-section .bb-mandala-col--right a.bb-mandala-tile {
	text-align: left;
}

.bb-mandala-section a.bb-mandala-tile:hover,
.bb-mandala-section a.bb-mandala-tile:focus-visible {
	transform: translateX(-4px);
}

.bb-mandala-section .bb-mandala-col--right a.bb-mandala-tile:hover,
.bb-mandala-section .bb-mandala-col--right a.bb-mandala-tile:focus-visible {
	transform: translateX(4px);
}

.bb-mandala-section .bb-mandala-tile__title {
	font-family: var(--wp--preset--font-family--display), serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.25;
	color: var(--wp--preset--color--green-deep);
	margin: 0 0 6px;
	transition: color 0.25s ease;
}

.bb-mandala-section a.bb-mandala-tile:hover .bb-mandala-tile__title,
.bb-mandala-section a.bb-mandala-tile:focus-visible .bb-mandala-tile__title {
	color: var(--wp--preset--color--purple);
}

.bb-mandala-section .bb-mandala-tile__desc {
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

.bb-mandala-section .bb-mandala-tile__line {
	position: absolute;
	top: 50%;
	width: 28px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--green));
	right: -38px;
}

.bb-mandala-section .bb-mandala-col--right .bb-mandala-tile__line {
	right: auto;
	left: -38px;
	background: linear-gradient(90deg, var(--wp--preset--color--green), transparent);
}

@media (max-width: 1100px) {
	.bb-mandala-wrap {
		grid-template-columns: 1fr 1fr;
		gap: 28px 32px;
	}
	.bb-mandala-svg {
		grid-column: 1 / -1;
		order: -1;
		width: 200px;
		margin: 0 auto 8px;
	}
	.bb-mandala-section a.bb-mandala-tile,
	.bb-mandala-section .bb-mandala-col--right a.bb-mandala-tile {
		text-align: left;
	}
	.bb-mandala-section .bb-mandala-tile__line {
		display: none;
	}
}

@media (max-width: 600px) {
	.bb-mandala-wrap {
		grid-template-columns: 1fr;
		padding: 0 20px;
	}
	.bb-mandala-col {
		gap: 20px;
	}
}

/* ── Feature sections: same layout, less vertical weight. */
.bb-feature--compact .bb-feature__image {
	min-height: 260px;
}

.bb-feature--text-only {
	display: block;
	max-width: 820px;
	margin-inline: auto;
}

/* ── Team strip — replaces the 12-portrait grid (~1900px desktop /
 * ~5800px mobile) with one scannable row plus a link to the full team. */
.bb-team-strip {
	padding: 64px 0 72px;
}

.bb-team-strip__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 32px;
	padding: 0 20px;
}

.bb-team-strip__eyebrow {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--green-deep);
	margin: 0 0 6px;
}

.bb-team-strip__title {
	font-family: var(--wp--preset--font-family--display), serif;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 500;
	margin: 0 0 8px;
}

.bb-team-strip__sub {
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

.bb-team-strip__list {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	align-items: start;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0 20px;
	max-width: 1160px;
	margin-inline: auto;
}

.bb-team-strip__item {
	min-width: 0;
	display: flex;
}

.bb-team-strip .bb-team-strip__item a,
.bb-team-strip .bb-team-strip__item a:hover {
	text-decoration: none;
	color: inherit;
}

.bb-team-strip__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

/* Out-specify the global `img { height: auto }` so the portraits stay
 * square and crop consistently instead of keeping their own ratios. */
.bb-team-strip .bb-team-strip__item .bb-team-strip__photo {
	width: 96px;
	height: 96px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 20%;
	filter: contrast(1.05) saturate(0.92) brightness(1.02);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bb-team-strip__item a:hover .bb-team-strip__photo,
.bb-team-strip__item a:focus-visible .bb-team-strip__photo {
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(42, 36, 51, 0.14);
}

.bb-team-strip__name {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--dark);
}

.bb-team-strip__role {
	font-size: 11px;
	line-height: 1.3;
	color: var(--wp--preset--color--text-secondary);
}

.bb-team-strip__more {
	text-align: center;
	margin: 28px 0 0;
}

@media (max-width: 1000px) {
	.bb-team-strip__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 20px 12px;
	}
}

@media (max-width: 600px) {
	.bb-team-strip__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.bb-team-strip .bb-team-strip__item .bb-team-strip__photo {
		width: 76px;
		height: 76px;
	}
}

/* ── Articles section: link that replaces the second row of cards. */
.bb-articles-medical__more {
	grid-column: 1 / -1;
	text-align: center;
	margin-top: 8px;
}

/* ── Ceník — intro + kotvová navigace ──────────────────────────────────
 * The section links are core buttons, so without this they read as a
 * generic button row rather than in-page navigation. Deliberately
 * lighter and smaller than a call to action — this is a table of
 * contents, not a CTA. */

.bb-cenik-intro {
	max-width: 720px;
	margin: 0 auto 28px;
	color: var(--wp--preset--color--text-secondary);
	font-size: 15px;
	line-height: 1.65;
}

.bb-cenik-nav {
	max-width: 900px;
	margin: 0 auto 56px;
	gap: 10px;
}

.bb-cenik-nav .wp-block-button__link {
	padding: 8px 18px;
	border: 1px solid var(--wp--preset--color--cream-warm);
	border-radius: 999px;
	background: #ffffff;
	color: var(--wp--preset--color--dark);
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.bb-cenik-nav .wp-block-button__link:hover,
.bb-cenik-nav .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--green);
	background: var(--wp--preset--color--green-soft);
	color: var(--wp--preset--color--green-deep);
}

@media (max-width: 600px) {
	.bb-cenik-nav {
		margin-bottom: 40px;
		gap: 8px;
	}

	.bb-cenik-nav .wp-block-button__link {
		padding: 7px 14px;
		font-size: 13px;
	}
}

/* ═══ Sekční patterny pro migraci legacy stránek ═══════════════════════
 * Built on core/columns so the client edits them in the standard editor.
 * Column structure is locked in the block markup; these rules only give
 * it the theme's rhythm and washes. */

.bb-sec {
	padding-block: clamp(40px, 5vw, 64px);
}

/* Wash sections are full-bleed bands; the colour runs edge to edge and the
 * content stays on the layout grid inside. They keep generous vertical
 * padding — zeroing it clipped headings against the section's overflow. */
.bb-sec.bb-section--cream-wash,
.bb-sec.bb-section--purple-wash,
.bb-sec.bb-section--green-wash {
	padding-block: clamp(48px, 5vw, 72px);
}

.bb-sec > .bb-section-title:first-child {
	margin-top: 0;
}

.bb-sec__cols {
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

/* Columns must not be forced to 100% or they stack on desktop; and they
 * need min-width:0 so long words and wide media can shrink. */
.bb-sec__cols > .wp-block-column {
	box-sizing: border-box;
	min-width: 0;
}

.bb-sec__img img {
	width: 100%;
	height: auto;
	border-radius: 18px;
	display: block;
}

/* Inside a split section the paired photos come from the legacy pages at
 * wildly different ratios (portrait next to panorama), which left big
 * gaps beside short copy. A shared ratio keeps the columns balanced. */
.bb-sec__cols .bb-sec__img img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	max-height: 420px;
}

.bb-sec__aside {
	background: var(--wp--preset--color--cream);
	border: 1px solid rgba(42, 36, 51, 0.06);
	border-radius: 18px;
	padding: 24px 26px;
}

.bb-sec__aside > :first-child { margin-top: 0; }
.bb-sec__aside > :last-child  { margin-bottom: 0; }

.bb-sec__cols--trio {
	gap: clamp(20px, 2.5vw, 32px);
}

.bb-sec__tile {
	background: var(--wp--preset--color--cream);
	border: 1px solid rgba(42, 36, 51, 0.06);
	border-radius: 18px;
	padding: 24px 26px;
}

.bb-sec__tile > :first-child { margin-top: 0; }
.bb-sec__tile > :last-child  { margin-bottom: 0; }

.bb-sec__gallery img {
	border-radius: 14px;
}

@media (max-width: 780px) {
	.bb-sec__cols {
		gap: 28px;
	}
	.bb-sec__aside,
	.bb-sec__tile {
		padding: 20px 22px;
	}
}

/* Section titles on content sub-pages read left, not centred.
 * The global .bb-section-title (global.css ~2587) is tuned for landing
 * sections: centred, max-width 760px, 96px top margin. Inside .bb-sec
 * that fights the body copy under it and, per the client's own rule,
 * makes a sub-page look like a second homepage. */
.bb-sec .bb-section-title,
.bb-sec .wp-block-heading.bb-section-title {
	text-align: left;
	/* keep the constrained layout's content width — `max-width: none`
	 * pulls the heading out of the grid and it no longer lines up with
	 * the columns or gallery under it */
	max-width: var(--wp--style--global--content-size, 1140px);
	margin: 0 auto 18px;
	padding: 0;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
}

.bb-sec h3 {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-weight: 600;
	font-size: 1.15rem;
	margin: 0 0 12px;
}

.bb-sec .bb-section-title + h3 {
	margin-top: 4px;
}

/* Definition-style lists (label: text) carried over from the legacy pages. */
.bb-sec__deflist {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding-left: 20px;
}

.bb-sec__deflist li::marker {
	color: var(--wp--preset--color--green);
}

/* Four-up tiles with a photo — the 1/4 layouts from the legacy pages. */
.bb-sec__cols--quad {
	gap: clamp(16px, 2vw, 26px);
	flex-wrap: wrap;
}

.bb-sec__card-img img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}

.bb-sec__card-label {
	margin: 10px 0 0;
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--dark);
}

@media (max-width: 900px) {
	.bb-sec__cols--quad > .wp-block-column {
		flex-basis: calc(50% - 13px) !important;
		flex-grow: 0;
	}
}

@media (max-width: 480px) {
	.bb-sec__cols--quad > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Booking / purchase CTAs recovered from legacy [vc_btn]. The migration
 * kept their text and href but as body copy; these are the page's main
 * commercial action, so they get room to breathe. */
.bb-cta-buttons {
	margin-block: clamp(20px, 3vw, 32px);
}

/* Some legacy labels are a full clause ("Objednejte se na FYZIOTERAPII
 * A PSYCHOTERAPII v rámci KOMPLEXNÍ PÉČE") — let them wrap instead of
 * stretching into a single very wide pill. */
.bb-cta-buttons .wp-block-button {
	max-width: 420px;
}

.bb-cta-buttons .wp-block-button__link {
	padding: 14px 30px;
	font-size: 15px;
	font-weight: 600;
	/* theme.json styles.elements.link paints every <a> purple, which on a
	 * purple button meant purple text on a purple pill — invisible. */
	background-color: var(--wp--preset--color--purple);
	color: #ffffff;
	border: 1px solid var(--wp--preset--color--purple);
	text-decoration: none;
}

.bb-cta-buttons .wp-block-button__link:hover,
.bb-cta-buttons .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--purple-deep);
	border-color: var(--wp--preset--color--purple-deep);
	color: #ffffff;
}

/* ── Team grid ────────────────────────────────────────────────────────────
   Per-page listing of team members (block bebalanced/team-grid). Cards are
   quiet on purpose: round photo, name, role — the point is to recognise a
   face, not to compete with the section heading above. */
.bb-team-grid {
	margin-block: 48px;
}

.bb-team-grid__title {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 600;
	margin: 0 0 8px;
	text-wrap: balance;
}

.bb-team-grid__intro {
	color: var(--wp--preset--color--text-secondary);
	max-width: 62ch;
	margin: 0 0 28px;
}

.bb-team-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 28px 20px;
}

.bb-team-grid__item {
	margin: 0;
	min-width: 0;
	text-align: center;
}

/* .bb-page-content a underlines every link in page content; these cards carry
   their own affordance (photo + hover colour), so the name stays clean. */
.bb-page-content .bb-team-grid__link,
.bb-team-grid__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	color: inherit;
}

.bb-page-content .bb-team-grid__link:hover {
	text-decoration: none;
}

.bb-team-grid__photo {
	display: block;
	width: 130px;
	max-width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--sand, #f4eee9);
	margin-bottom: 10px;
}

.bb-team-grid__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.bb-team-grid__link:hover .bb-team-grid__photo img {
	transform: scale(1.04);
}

.bb-team-grid__name {
	display: block;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.bb-team-grid__link:hover .bb-team-grid__name {
	color: var(--wp--preset--color--purple);
}

.bb-team-grid__role {
	display: block;
	font-size: 12.5px;
	color: var(--wp--preset--color--text-tertiary, #8d8496);
	line-height: 1.4;
}

@media (max-width: 640px) {
	.bb-team-grid__list {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 22px 14px;
	}
	.bb-team-grid__photo { width: 104px; }
}

/* ── Vstupní pruh na titulce ──────────────────────────────────────────────
   Původní slider ze staré titulky přepracovaný na jeden nízký široký pruh
   s textem přes něj (dohodnuto na schůzce 29. 5.). Fotka má vlevo prázdné
   krémové místo, takže text sedí tam a nemusí se podkládat tmavou vrstvou. */
.bb-entry-band {
	margin-block: 0;
}

.bb-entry-band .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--content-size, 1140px);
	margin-inline: auto;
	width: 100%;
	padding-inline: var(--wp--custom--spacing--gutter, 24px);
	text-align: left;
}

/* Cover blok si vynucuje bílý text pro čitelnost na tmavém podkladu; tady je
   podklad naopak světlá krémová fotka, takže barvy přebíjíme adresně. */
.bb-entry-band .wp-block-cover__inner-container .bb-entry-band__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green-deep, #4a6e21);
	margin: 0 0 6px;
}

.bb-entry-band .wp-block-cover__inner-container .bb-entry-band__title {
	font-size: clamp(1.4rem, 3vw, 2.1rem);
	font-weight: 600;
	color: var(--wp--preset--color--purple, #6B2D7B);
	margin: 0 0 6px;
	max-width: 15ch;
	text-wrap: balance;
}

.bb-entry-band .wp-block-cover__inner-container .bb-entry-band__lead {
	color: var(--wp--preset--color--text, #2a2433);
	font-size: 15px;
	margin: 0;
	max-width: 34ch;
}

@media (max-width: 900px) {
	/* Na úzkém displeji se budova ořízne pryč a zbyde jen prázdná plocha,
	   proto se pruh zvýší a fotka se posune na střed. */
	.bb-entry-band { min-height: 240px !important; }
	.bb-entry-band .wp-block-cover__image-background {
		object-position: 70% 50% !important;
	}
	.bb-entry-band .wp-block-cover__inner-container .bb-entry-band__title { max-width: none; }
}

/* ── Contact Form 7 ───────────────────────────────────────────────────────
   CF7 vypisuje holé <p><label>text<br><span><input>. Nic z toho nemá vlastní
   třídy, na které by šlo cílit, proto stylujeme přímo prvky uvnitř .wpcf7-form.
   Platí pro všechny formuláře na webu, nejen pro kontaktní. */
.wpcf7-form {
	max-width: 620px;
}

.wpcf7-form p {
	margin: 0 0 18px;
}

.wpcf7-form label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary);
	line-height: 1.5;
}

/* <br> mezi popiskem a polem dělá zbytečnou mezeru navíc */
.wpcf7-form label br {
	display: none;
}

.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--text-primary, #1a1a1a);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line, rgba(42, 36, 51, 0.16));
	border-radius: 10px;
	padding: 11px 14px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.wpcf7-form textarea {
	min-height: 150px;
	resize: vertical;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--purple);
	box-shadow: 0 0 0 3px rgba(107, 45, 123, 0.12);
}

.wpcf7-form input[type="submit"] {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--purple);
	border: 0;
	border-radius: 999px;
	padding: 13px 30px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.wpcf7-form input[type="submit"]:hover {
	background: var(--wp--preset--color--purple-deep, #52215e);
	transform: translateY(-1px);
}

.wpcf7-form input[type="submit"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--purple);
	outline-offset: 3px;
}

/* Hlášky o odeslání a chybách */
.wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 10px;
	border-width: 1px;
	font-size: 14px;
}

.wpcf7-not-valid-tip {
	font-size: 12.5px;
	color: var(--wp--preset--color--p0, #a8342b);
	margin-top: 4px;
}

.wpcf7-form .wpcf7-spinner {
	margin: 0 0 0 12px;
}

/* ── Kontakt ──────────────────────────────────────────────────────────────
   Doprava ve třech kartách, fakturační údaje ve dvou, dokumenty jako seznam
   se šipkou. Bez obrázků log — ta se na staré stránce ořezávala a nic
   nesdělovala. */
.bb-contact-photo img {
	width: 100%;
	border-radius: 18px;
	display: block;
}

.bb-travel.wp-block-columns {
	gap: 22px;
	margin-block: 28px 32px;
}

.bb-travel .wp-block-column {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line, rgba(42, 36, 51, 0.10));
	border-radius: 16px;
	padding: 22px 24px;
	box-shadow: 0 1px 2px rgba(42, 36, 51, 0.04), 0 8px 22px rgba(42, 36, 51, 0.04);
}

.bb-travel__title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--purple);
	margin: 0 0 10px;
}

.bb-travel .wp-block-column p {
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0 0 10px;
}

.bb-subheading {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 28px 0 10px;
}

.bb-billing.wp-block-columns {
	gap: 20px;
	margin-block: 20px 8px;
}

.bb-billing .wp-block-column {
	background: var(--wp--preset--color--sand, #f4eee9);
	border-radius: 14px;
	padding: 18px 22px;
}

.bb-billing__name {
	font-weight: 700;
	margin: 0 0 6px;
}

.bb-doclist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bb-doclist li::before {
	content: '↓';
	margin-right: 8px;
	color: var(--wp--preset--color--green-deep, #4a6e21);
	font-weight: 700;
}

.bb-note {
	font-size: 13.5px;
	color: var(--wp--preset--color--text-secondary);
	margin-top: 10px;
}

@media (max-width: 781px) {
	.bb-travel.wp-block-columns,
	.bb-billing.wp-block-columns { gap: 14px; }
}

/* Formulářový pruh přes celou šířku — obsah uvnitř zůstává v mřížce stránky. */
.bb-form-band {
	padding-block: 56px;
	margin-block: 8px 0;
}

.bb-form-band .wpcf7-form {
	max-width: 760px;
}

/* Platební brána — logo vedle textu, na mobilu pod sebou. */
.bb-comgate {
	display: flex;
	gap: 22px;
	align-items: flex-start;
	margin-top: 12px;
}

.bb-comgate__logo {
	flex: 0 0 auto;
	margin: 0;
}

.bb-comgate__logo img {
	width: 88px;
	height: auto;
	display: block;
}

.bb-doclist--links li::before {
	content: '→';
}

@media (max-width: 640px) {
	.bb-comgate { flex-direction: column; gap: 14px; }
}

/* CTA pruh na landing stránkách služeb — obdoba pruhu na fyzioterapii. */
.bb-psy-cta-strip {
	background: var(--wp--preset--color--purple-soft, #f5e8f0);
	border-radius: 18px;
	padding: 26px 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 28px;
	margin-block: 8px 40px;
}

.bb-psy-cta-strip__text {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	max-width: 46ch;
}

.bb-psy-cta-strip .wp-block-buttons {
	margin: 0;
	flex-wrap: nowrap;
}

@media (max-width: 781px) {
	.bb-psy-cta-strip { padding: 22px; }
	.bb-psy-cta-strip .wp-block-buttons { flex-wrap: wrap; }
}

/* ── Výpis služeb a kurzů (blok bebalanced/services-list) ─────────────────
   Karta = obrázek, název, krátký perex, odkaz. Stejný jazyk jako karty
   článků, jen bez rubriky a data. */
.bb-services {
	margin-block: 40px;
}

.bb-services__title {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 600;
	margin: 0 0 8px;
	text-wrap: balance;
}

.bb-services__intro {
	color: var(--wp--preset--color--text-secondary);
	max-width: 62ch;
	margin: 0 0 26px;
}

.bb-services__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 26px 24px;
	grid-template-columns: repeat(var(--bb-services-cols, 3), minmax(0, 1fr));
}

.bb-services--cols-2 .bb-services__list { --bb-services-cols: 2; }
.bb-services--cols-3 .bb-services__list { --bb-services-cols: 3; }
.bb-services--cols-4 .bb-services__list { --bb-services-cols: 4; }

.bb-services__item { margin: 0; min-width: 0; }

.bb-service-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line, rgba(42, 36, 51, 0.10));
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(42, 36, 51, 0.04), 0 8px 22px rgba(42, 36, 51, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bb-service-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(42, 36, 51, 0.06), 0 14px 30px rgba(42, 36, 51, 0.08);
}

.bb-service-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--wp--preset--color--sand, #f4eee9);
}

.bb-service-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-service-card__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.bb-service-card__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
	overflow-wrap: anywhere;
}

.bb-page-content .bb-service-card__title a,
.bb-service-card__title a {
	color: inherit;
	text-decoration: none;
}

.bb-service-card:hover .bb-service-card__title a { color: var(--wp--preset--color--purple); }

.bb-service-card__excerpt {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

.bb-service-card__cta {
	margin-top: auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--purple);
}

@media (max-width: 1024px) {
	.bb-services--cols-4 .bb-services__list { --bb-services-cols: 3; }
}

@media (max-width: 781px) {
	.bb-services__list { --bb-services-cols: 2 !important; gap: 18px 14px; }
}

@media (max-width: 520px) {
	.bb-services__list { --bb-services-cols: 1 !important; }
}

/* ── Rozvrh lekcí ─────────────────────────────────────────────────────────
   Dřív to byl obrázek tabulky — nešel přečíst na mobilu, nenašel ho Google
   a čtečka z něj nedostala nic. Teď je to skutečná tabulka; na úzkém
   displeji se vodorovně posouvá, protože sloupce jsou dny v týdnu. */
.bb-schedule {
	margin-block: 8px 4px;
}

.bb-schedule__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 14px;
	border: 1px solid var(--wp--preset--color--line, rgba(42, 36, 51, 0.12));
	background: var(--wp--preset--color--white);
}

.bb-schedule__table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: 13.5px;
}

.bb-schedule__caption {
	caption-side: top;
	text-align: left;
	padding: 14px 16px 10px;
	font-weight: 700;
	color: var(--wp--preset--color--text-secondary);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bb-schedule__table th,
.bb-schedule__table td {
	border: 1px solid var(--wp--preset--color--line, rgba(42, 36, 51, 0.10));
	padding: 9px 12px;
	vertical-align: middle;
	text-align: left;
}

.bb-schedule__table thead th {
	background: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--white);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bb-schedule__table tbody th[scope="row"] {
	white-space: nowrap;
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary);
	background: var(--wp--preset--color--sand, #f4eee9);
	font-size: 12.5px;
}

.bb-schedule__part {
	text-align: left !important;
	background: var(--wp--preset--color--cream-warm, #f7efe6) !important;
	color: var(--wp--preset--color--purple) !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 11.5px !important;
}

.bb-schedule__table td span {
	display: block;
	font-size: 12px;
	color: var(--wp--preset--color--text-secondary);
}

/* Barvy převzaté z původního obrázku rozvrhu, jen tlumenější. */
.bb-schedule__table td.is-lekce  { background: #e8f3df; font-weight: 600; }
.bb-schedule__table td.is-deti   { background: #fbe4ef; font-weight: 600; }
.bb-schedule__table td.is-fyzio3 { background: #dcf0fa; font-weight: 600; }

.bb-schedule__legend {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 14px 0 0;
	padding: 0;
	font-size: 13px;
	color: var(--wp--preset--color--text-secondary);
}

.bb-schedule__legend li { display: flex; align-items: center; gap: 8px; }

.bb-schedule__legend span {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	display: inline-block;
	border: 1px solid rgba(42, 36, 51, 0.10);
}

.bb-schedule__legend .is-lekce  { background: #e8f3df; }
.bb-schedule__legend .is-deti   { background: #fbe4ef; }
.bb-schedule__legend .is-fyzio3 { background: #dcf0fa; }

/* Fotky ve dvousloupci se dotýkaly — mřížka potřebuje mezeru. */
.bb-sec__cols.wp-block-columns { gap: 28px; }
.bb-sec__gallery.wp-block-gallery { gap: 20px; }

.bb-schedule__note {
	font-size: 13.5px;
	color: var(--wp--preset--color--text-secondary);
	margin: 14px 0 0;
}

/* ── Obsah přenesený z WPBakery do klasických článků ──────────────────────
   Články migrované z WPBakery zůstávají „classic" (ne blokový) obsah, takže
   se u nich nenačítá core block CSS. Obrázky a tlačítka, které jsme zpět
   vytáhli ze [vc_single_image] / [vc_btn] / [trx_button], proto musí být
   nastylované samostatně — jinak by spadly na holé <img> a <a>. */
.bb-legacy-figure {
	margin: clamp(24px, 4vw, 36px) auto;
	max-width: 100%;
}

.bb-legacy-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.bb-legacy-figure figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary, #555555);
	text-align: center;
}

/* Kontejner tlačítek — flex sem patří explicitně, ne z core .wp-block-buttons. */
.bb-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.bb-cta-buttons .wp-block-button__link {
	display: inline-block;
	border-radius: 999px;
	text-align: center;
	line-height: 1.35;
}

/* ── Rozpis jednotlivých kurzů ────────────────────────────────────────────
   Stránky s jedním či dvěma termíny nepotřebují týdenní mřížku (.bb-schedule),
   která je kvůli sedmi dnům široká 720 px — tady stačí „co / kdy / v kolik“. */
.bb-course-list {
	display: grid;
	gap: 12px;
	margin-block: 20px;
	padding: 0;
	list-style: none;
}

.bb-course-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	padding: 16px 20px;
	border: 1px solid var(--wp--preset--color--line, rgba(42, 36, 51, 0.12));
	border-radius: 14px;
	background: var(--wp--preset--color--white, #fff);
}

.bb-course-list__name {
	flex: 1 1 260px;
	font-weight: 600;
}

.bb-course-list__when {
	color: var(--wp--preset--color--text-secondary, #555555);
	font-size: 14.5px;
}

.bb-course-list__time {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Galerie vytažené zpět z [vc_gallery] — opět bez závislosti na core block CSS. */
.bb-legacy-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-block: clamp(24px, 4vw, 36px);
}

.bb-legacy-gallery figure {
	margin: 0;
}

.bb-legacy-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
}

/* ── Předpatičkový CTA pruh ───────────────────────────────────────────────
   Starý web měl na konci každé stránky výzvu „Potřebujete pomoci s tímto
   problémem? Objednejte se k nám“ — po migraci zmizela. Je to hlavní
   konverzní prvek, takže patří zpět, a jako součást parts/footer.html
   se objeví na všech stránkách naráz. Světlý pruh záměrně: tmavá patička
   hned pod ním by jinak splynula v jeden černý blok. */
.bb-prefooter {
	max-width: var(--wp--style--global--wide-size, 1680px);
	width: calc(100% - 32px);
	margin: 48px auto 16px;
	padding: clamp(32px, 5vw, 56px) 32px;
	border-radius: 18px;
	background: var(--wp--preset--color--cream, #fbf7f4);
	text-align: center;
}

.bb-prefooter__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.bb-prefooter__lead {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #555555);
}

.bb-prefooter__title {
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	line-height: 1.2;
	text-wrap: balance;
}

.bb-prefooter__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.bb-prefooter__btn {
	display: inline-block;
	padding: 13px 26px;
	border: 1px solid var(--wp--preset--color--purple);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	/* theme.json barví každý <a> fialově — na fialové pilulce by text zmizel. */
	color: var(--wp--preset--color--purple);
	text-decoration: none;
}

.bb-prefooter__btn--primary {
	background: var(--wp--preset--color--purple);
	color: #ffffff;
}

.bb-prefooter__btn:hover,
.bb-prefooter__btn:focus-visible {
	background: var(--wp--preset--color--purple-deep);
	border-color: var(--wp--preset--color--purple-deep);
	color: #ffffff;
}

@media (max-width: 600px) {
	.bb-prefooter__btn {
		flex: 1 1 100%;
	}
}

/* ── Reference: náhledy screenshotů hodnocení z rezervačního systému ────
 * Dřív se ořezávaly (levý kraj s popisky chyběl). Teď celé, menší,
 * s proklikem na plnou velikost. */
/* Trojitá třída: trx_addons (__styles.css) na devu nuluje gap všem
   sloupcům přes .wp-block-columns.wp-block-columns (0,2,0). */
.wp-block-columns.wp-block-columns.bb-ref-ratings {
	gap: clamp(16px, 2.5vw, 28px);
	margin-top: 32px;
}

.bb-ref-ratings .wp-block-image {
	margin: 0;
}

.bb-ref-ratings .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid rgba(42, 36, 51, 0.08);
	box-shadow: 0 6px 20px rgba(42, 36, 51, 0.06);
}

.bb-ref-ratings .wp-block-image figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--wp--preset--color--text-secondary, #555555);
	text-align: center;
}

/* Reference: nadpis „Děkujeme…“ hned pod pruhem s čísly potřebuje odstup
   (proof-bar sám spodní okraj nemá — na titulce navazuje sekce s vlastním). */
/* .bb-sec h3 nuluje margin (0,1,1) — proto dvojitá třída. */
.bb-sec .bb-ref-thanks {
	margin-top: clamp(36px, 4vw, 52px);
}

/* ── Barevné sekce (wash) — boční okraj ─────────────────────────────────
 * .bb-sec.bb-section--* nastavuje padding: 48px 0 a --wp--style--root--
 * padding-left je prázdná, takže has-global-padding nic nepřidá: na mobilu
 * text začínal přímo u kraje obrazovky. Na desktopu to kryl constrained
 * layout (obsah je vystředěný), proto si toho nikdo nevšiml. Stejná
 * specifičnost jako původní pravidlo, ale později → vyhrává. */
.bb-sec.bb-section--purple-wash,
.bb-sec.bb-section--green-wash,
.bb-sec.bb-section--cream-wash,
.bb-section--purple-wash.alignfull,
.bb-section--green-wash.alignfull,
.bb-section--cream-wash.alignfull {
	padding-left: clamp(16px, 5vw, 32px);
	padding-right: clamp(16px, 5vw, 32px);
}

/* Text reCAPTCHA pod formulářem (odznak je skrytý, viz inc/recaptcha.php). */
.bb-recaptcha-note {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--wp--preset--color--text-tertiary, #888);
}
.bb-recaptcha-note a { color: inherit; text-decoration: underline; }

/* ── Patička: platební loga (ComGate, Visa, Mastercard, Google/Apple Pay) ─
 * Požadavek z revize 11. 9. (Jiří): musí být jako na starém webu. Sedí
 * vlevo pod textem u loga — vlastní řádek přes celou šířku patičku zbytečně
 * prodlužoval. Pruh z www je barevný pro světlý podklad, proto bílá plocha
 * (VISA a obrysy Google/Apple Pay by na tmavé patičce zanikly). */
.bb-footer__payments {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-top: 20px;
}

.bb-footer__payments-label {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
}

.bb-footer__payments-logos {
	display: block;
	width: 280px;
	max-width: 100%;
	height: auto;
	padding: 6px 10px;
	box-sizing: border-box;
	background: #ffffff;
	border-radius: 8px;
}

/* ── Kompaktnější rytmus stránek (revize 11. 9.) ─────────────────────────
 * Klientka: web je oproti starému „roztahaný, všude to zabírá hodně místa“,
 * na mobilu velké mezery. Rozestupy mezi sekcemi sjednocené a menší; bloky,
 * které si nesou vlastní margin 96/64 px (i ze stylů bloků), přebíjí
 * dvojitá specifičnost. Na mobilu se škálují dolů přes clamp(). */
:root {
	--bb-space-section: clamp(36px, 5vw, 64px);
	--bb-space-section-end: clamp(24px, 3.5vw, 40px);
}

body .bb-narrative,
body .bb-stats-hero,
body .bb-partners,
body .bb-testimonials,
body .bb-contact-info,
body .wp-block-bebalanced-contact-info,
body .bb-team-grid {
	margin-top: var(--bb-space-section);
	margin-bottom: var(--bb-space-section-end);
}

body .bb-section-title {
	margin-top: var(--bb-space-section);
}

body .bb-sec {
	padding-block: clamp(28px, 3.5vw, 48px);
}

body .bb-sec.bb-section--cream-wash,
body .bb-sec.bb-section--purple-wash,
body .bb-sec.bb-section--green-wash {
	padding-block: clamp(36px, 4.5vw, 56px);
}

body .bb-team-section,
body .bb-manifesto-section {
	padding-block: clamp(44px, 5.5vw, 72px);
}

body .bb-fyzio-hero {
	padding-top: clamp(48px, 6vw, 80px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

/* Na mobilu hero drželo min-height 50vh — pod krátkým obsahem zůstávala
 * prázdná plocha („velká mezera pod obrázkem“ na fyzioterapii). */
@media (max-width: 720px) {
	body .bb-fyzio-hero { min-height: 0; padding: 40px 20px 36px; }
}

body .bb-prefooter {
	margin-top: var(--bb-space-section);
}

/* ── Karty v mřížkách nesmí „odskakovat“ (revize 11. 9.) ─────────────────
 * .bb-grid bývá skupina s constrained layoutem: WordPress dává každému
 * dítěti kromě prvního margin-top 24px (blockGap), takže první karta
 * „Naše hlavní služby“ stála o 24 px výš. Mezery v mřížce řeší gap. */
body .bb-grid > *,
body .bb-grid.is-layout-constrained > *,
body .bb-grid.is-layout-flow > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Karty novinek/článků v mřížce: titulek, výtah a datum vždy na stejném
 * místě — i když příspěvek nemá výtah nebo má kratší titulek. */
body .bb-category-list--grid .bb-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	min-height: calc(1.3em * 2);
}

body .bb-category-list--grid .bb-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	min-height: calc(1.55em * 3);
}

body .bb-category-list--grid .bb-card__date {
	margin-top: auto;
}

/* Tři sloupce služeb na fyzio landingu: řádky se srovnají napříč sloupci
 * (subgrid), takže ikonky a nadpisy bloků stojí v jedné rovině, i když
 * je nadpis sloupce na dva řádky. Na mobilu (1 sloupec) beze změny. */
@media (min-width: 901px) {
	body .bb-thematic-columns {
		grid-template-rows: repeat(8, auto);
		row-gap: 0;
	}
	body .bb-thematic-column {
		display: grid;
		grid-row: span 8;
		grid-template-rows: subgrid;
		align-content: start;
	}
}

/* Landing stránky: barevné sekce a velké bloky kompaktněji (dřív 64–96 px). */
body .bb-section--purple-wash,
body .bb-section--green-wash,
body .bb-section--cream-wash {
	padding-top: clamp(36px, 4.5vw, 56px);
	padding-bottom: clamp(36px, 4.5vw, 56px);
}

body .bb-articles-medical { padding-top: clamp(40px, 5vw, 60px); padding-bottom: clamp(40px, 5vw, 60px); }
body .bb-mandala-section  { padding-top: clamp(40px, 5vw, 60px); padding-bottom: clamp(48px, 5.5vw, 68px); }
body .bb-team-strip       { padding-top: clamp(36px, 4.5vw, 52px); padding-bottom: clamp(40px, 5vw, 56px); }
body .bb-pavlicek-banner  { padding-top: clamp(36px, 4.5vw, 48px); padding-bottom: clamp(36px, 4.5vw, 48px); }

/* Tlačítka v hero fyzioterapie jsou tlačítka, ne odkazy v textu. */
body .bb-fyzio-hero a,
body .bb-fyzio-hero a:hover {
	text-decoration: none;
}

/* Ikonky bloků ve sloupcích služeb zarovnané nahoru — při dvouřádkovém
 * nadpisu je svislé centrování posouvalo o pár px oproti sousedním sloupcům. */
body .bb-thematic-block__icon {
	align-self: start;
}

/* Nadpisy ve sloupcích služeb: .bb-page-content h2/h3 (0,1,1) přebíjelo
 * vlastní velikost bloku (0,1,0) → 30/24 px místo zamýšlených 22/17 px,
 * prostřední nadpis sloupce se lámal na tři řádky. Poppins je opticky
 * větší než původní Catamaran, proto 21/16 px. */
.bb-thematic-columns .bb-thematic-column__title {
	font-size: 21px;
	line-height: 1.25;
}

.bb-thematic-columns .bb-thematic-block__title {
	font-size: 16px;
	line-height: 1.3;
}

/* Blok ve srovnaném řádku se roztáhne na výšku řádku; jeho vnitřní mřížka
 * by se roztáhla s ním a nadpis by „spadl“ pod ikonku. Řádky nahoru,
 * přebytek místa pod popis (oddělovací čáry zůstanou srovnané). */
.bb-thematic-columns .bb-thematic-block {
	align-content: start;
}

/* Řady tří a více textových sloupců (např. metody fyzioterapie) začínají
 * nahoře — svislé centrování je posouvalo podle délky textu. Dvousloupcové
 * řady s fotkou zůstávají centrované. */
.bb-sec__cols:has(> .wp-block-column:nth-child(3)) > .wp-block-column {
	align-self: flex-start;
}

/* Nadpis v záhlaví stránky se nesmí lámat na osamělé slovo („… Praha / 6“). */
.bb-page-hero h1,
.bb-page-hero .wp-block-post-title {
	text-wrap: balance;
}

/* .bb-page-content h2/h3 dává nadpisům margin 32px 0 12px a přebíjí
 * margin: 0 bloku — nadpis bloku pak stál pod ikonkou místo vedle ní. */
.bb-thematic-columns .bb-thematic-block__title,
.bb-thematic-columns .bb-thematic-column__title {
	margin: 0;
}

/* ── Rozvrh generovaný z lekcí (inc/rozvrh.php, blok bebalanced/rozvrh) ──
   Barva se bere ze skupiny rozvrhu (--bb-rozvrh-c z term meta), buňka nese
   odkaz na detail lekce. Na mobilu se místo tabulky ukáže seznam po dnech. */
.bb-schedule--auto .bb-schedule__table td.has-lesson { padding: 6px; }

.bb-schedule--auto .bb-schedule__lesson {
	display: block;
	padding: 7px 10px;
	border-radius: 8px;
	background: var(--bb-rozvrh-c, #eeeae4);
	color: var(--wp--preset--color--text, #2a2433);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}

.bb-schedule--auto .bb-schedule__lesson + .bb-schedule__lesson { margin-top: 4px; }

.bb-schedule--auto .bb-schedule__lesson:hover,
.bb-schedule--auto .bb-schedule__lesson:focus-visible {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--purple);
	outline: none;
}

.bb-schedule--auto .bb-schedule__legend span { background: var(--bb-rozvrh-c, #eeeae4); }

.bb-schedule--auto .bb-schedule__days { display: none; }

@media (max-width: 640px) {
	.bb-schedule--auto .bb-schedule__scroll { display: none; }

	.bb-schedule--auto .bb-schedule__days {
		display: grid;
		gap: 12px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.bb-schedule--auto .bb-schedule__day {
		border: 1px solid var(--wp--preset--color--line, rgba(42, 36, 51, 0.12));
		border-radius: 14px;
		background: var(--wp--preset--color--white);
		padding: 12px 14px 14px;
	}

	/* (0,2,0) — .bb-page-content h3 by jinak vnutil 32px okraj a velký font. */
	.bb-schedule--auto .bb-schedule__day-name {
		margin: 0 0 8px;
		font-size: 12.5px;
		line-height: 1.3;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--wp--preset--color--purple);
	}

	.bb-schedule--auto .bb-schedule__day ul {
		display: grid;
		gap: 6px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.bb-schedule--auto .bb-schedule__day li {
		display: grid;
		grid-template-columns: 96px 1fr;
		align-items: center;
		gap: 10px;
		font-size: 14px;
	}

	.bb-schedule--auto .bb-schedule__time {
		font-variant-numeric: tabular-nums;
		font-weight: 600;
		color: var(--wp--preset--color--text-secondary);
		font-size: 13px;
	}
}

/* ── Detail lekce: box „Kdy cvičíme“ (bebalanced/lekce-terminy) ──────────
   Čas je v postranním panelu z dat rozvrhu, ne ve větě v textu. */
.bb-lesson-times__list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	gap: 8px;
}

.bb-lesson-times__list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--bb-rozvrh-c, #eeeae4);
	font-weight: 600;
	font-size: 15px;
}

.bb-lesson-times__time {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bb-lesson-times__meta {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.5;
}

.bb-lesson-times__meta span {
	display: block;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

.bb-lesson-times__group {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--wp--preset--color--text-secondary);
}

.bb-lesson-times__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bb-rozvrh-c, #eeeae4);
	box-shadow: inset 0 0 0 1px rgba(42, 36, 51, 0.15);
}

.bb-lesson-times__all {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--purple);
	text-decoration: none;
}

.bb-lesson-times__all:hover { text-decoration: underline; }

/* Box „Kdy cvičíme“: na počítači v postranním panelu, pod 980 px (panel se
   řadí až pod text) nad textem lekce — čas má být vidět hned. */
.bb-lesson-times--inline { display: none; }

@media (max-width: 980px) {
	.bb-lesson-times--inline { display: block; margin: 0 0 28px; }
	.bb-lesson-times--sidebar { display: none; }
}

/* ── Přehled článků: odkazy na Novinky a Příběhy z ordinace pod výpisem ── */
.bb-blog-more {
	margin-top: clamp(40px, 5vw, 56px);
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--line, rgba(42, 36, 51, 0.12));
}

.bb-blog-more__title {
	margin: 0 0 14px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

.bb-blog-more__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.bb-blog-more__link {
	display: grid;
	align-content: start; /* text začíná nahoře i ve vyšší sousední kartě */
	gap: 6px;
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line, rgba(42, 36, 51, 0.12));
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bb-blog-more__link strong {
	font-size: 17px;
	color: var(--wp--preset--color--purple);
}

.bb-blog-more__link:hover,
.bb-blog-more__link:focus-visible {
	border-color: var(--wp--preset--color--purple);
	box-shadow: 0 6px 18px rgba(42, 36, 51, 0.08);
	outline: none;
}