/*
 * 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) ────────────────── */
.bb-topbar {
	background: var(--wp--preset--color--dark);
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 13px;
	line-height: 1;
}

.bb-topbar__inner {
	max-width: var(--wp--style--global--wide-size, 1680px);
	margin: 0 auto;
	padding: 10px 24px;
	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;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

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

.bb-topbar__item--phone:hover { color: var(--wp--preset--color--white); }
.bb-topbar__item--addr:hover { color: var(--wp--preset--color--white); }

.bb-topbar__promo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--green);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.2px;
	transition: color 0.2s ease;
}

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

.bb-topbar__promo:hover {
	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: 8px 16px; gap: 10px; }
	.bb-topbar__item--hours { display: none; }
	.bb-topbar__promo-full { display: none; }
	.bb-topbar__promo-short { display: inline; }
	.bb-topbar__promo { font-size: 11px; padding: 3px 8px; background: var(--wp--preset--color--green); color: var(--wp--preset--color--white); border-radius: 999px; }
}

@media (max-width: 520px) {
	.bb-topbar__contact { gap: 12px; }
	.bb-topbar__right { gap: 8px; }
}

/* ─── Header — grid: brand | nav (1fr) | CTA ─────────────── */
.bb-header {
	background: var(--wp--preset--color--cream);
	padding: 16px 24px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	border-radius: 18px;
	margin: 12px auto;
	max-width: var(--wp--style--global--wide-size, 1680px);
	width: calc(100% - 24px);
	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: 12px 24px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

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

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

.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: 12px 20px; }
	.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: 10px 14px;
		gap: 8px;
		margin: 8px auto;
		width: calc(100% - 16px);
	}
	.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;
}

/* ─── S11: Contact + Maps — info panel + Google Maps embed ────── */
.bb-contact-section {
	background: var(--wp--preset--color--cream);
	padding: 96px 0;
}
.bb-contact {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 32px;
}

.bb-contact__panel {
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(42, 36, 51, 0.06);
	border-radius: 18px;
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.bb-contact__header { margin-bottom: 4px; }
.bb-contact__eyebrow {
	display: inline-block;
	background: var(--wp--preset--color--green-soft);
	color: var(--wp--preset--color--green-deep);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 999px;
	margin: 0 0 12px;
}
.bb-contact__title {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--dark);
	margin: 0;
}
.bb-contact__items {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 32px;
	margin: 0;
	list-style: none;
	padding: 0;
}
@media (max-width: 600px) { .bb-contact__items { grid-template-columns: 1fr; } }
.bb-contact__item {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 14px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid rgba(42, 36, 51, 0.06);
}
.bb-contact__item:last-child { border-bottom: none; padding-bottom: 0; }
.bb-contact__icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--wp--preset--color--purple-soft);
	color: var(--wp--preset--color--purple);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bb-contact__icon svg { width: 18px; height: 18px; stroke-width: 2; }
.bb-contact__label {
	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--text-tertiary);
	margin: 0 0 4px;
}
.bb-contact__value,
.bb-contact__value a {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: var(--wp--preset--color--dark);
	text-decoration: none;
	font-weight: 500;
}
.bb-contact__value a:hover { color: var(--wp--preset--color--purple); }
.bb-contact__value--multi { line-height: 1.55; }

.bb-contact__map {
	border-radius: 14px;
	overflow: hidden;
	min-height: 420px;
	border: 1px solid rgba(42, 36, 51, 0.06);
}
.bb-contact__map iframe {
	width: 100%;
	height: 100%;
	min-height: 420px;
	border: 0;
	display: block;
}

/* ─── 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;
}

.bb-thematic-block {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	align-items: start;
}
.bb-thematic-block:last-child { border-bottom: none; padding-bottom: 4px; }
.bb-thematic-block:first-of-type { padding-top: 8px; }

.bb-thematic-block__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;   /* nudge so icon center aligns with title cap-height */
}
.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 {
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.3;
	color: var(--wp--preset--color--dark);
	margin: 0 0 6px;
}

.bb-thematic-block__desc {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 13px;
	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. Falls back to natural wrap on browsers without
	 * line-clamp (~all modern browsers support it). */
	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; }
.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: 56px 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-top: 20px;
	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: 40px 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 {
	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;
}

.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;
}