/*
 * BS EPO Regen — Knee Regenerative Medicine Summit
 *
 * CSS exclusivo da landing page BS EPO Regen. Carregado só nesta página
 * (e dentro do editor Gutenberg) via enqueue_block_assets — ver
 * bs_epo_regen_assets() em functions.php.
 *
 * Isolamento: tudo é escopado por ".bs-epo" (conteúdo da página),
 * ".bs-epo-header" e ".bs-epo-footer" (parts exclusivos). Nenhuma classe do
 * BS Fisio (.bs-hero, .bs-card etc.) é reutilizada; só os tokens do
 * theme.json (cores, espaçamentos, tamanhos de fonte) via var(--wp--preset--*).
 *
 * Princípio: cor, espaçamento e tipografia de cada bloco vêm dos atributos
 * nativos (editáveis no editor). Este arquivo só cobre o que o editor não
 * cobre: borda/hover dos cards, caixa-alta dos títulos, detalhes de hero.
 */

.bs-epo,
.bs-epo-header,
.bs-epo-footer {
	--epo-accent: var(--wp--preset--color--purple, #8b5cf6);
	--epo-accent-rgb: 139, 92, 246;
	/* Roxo mais escuro para texto pequeno sobre fundo claro (contraste AA). */
	--epo-accent-deep: #6d28d9;
	--epo-line: var(--wp--preset--color--line, #1d2830);
	--epo-line-light: #e2e0ea;
	--epo-tint: #f6f4fb;
	/* Slugs de fontSize que começam com dígito não geram variável CSS no
	 * WordPress (ver style.css). Redefinidos aqui para valer também dentro
	 * do editor Gutenberg, onde o style.css do tema não é carregado. */
	--wp--preset--font-size--2xs: 0.6875rem;
	--wp--preset--font-size--2xl: clamp(2rem, 1.6rem + 2vw, 2.75rem);
	--wp--preset--font-size--3xl: clamp(2.75rem, 2rem + 3.5vw, 4.25rem);
}

/* ---------- Tipografia ---------- */

.bs-epo h1,
.bs-epo h2,
.bs-epo h3 {
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.bs-epo-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 0.9em;
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--epo-accent);
}

.bs-epo-eyebrow::before {
	content: "";
	display: block;
	width: 1.6em;
	height: 1px;
	background: currentColor;
}

.has-text-align-center.bs-epo-eyebrow {
	display: flex;
	justify-content: center;
}

/* Eyebrow dentro de seção clara: roxo escuro (contraste). */
.bs-epo .has-ink-color.bs-epo-eyebrow,
.bs-epo .has-base-background-color .bs-epo-eyebrow {
	color: var(--epo-accent-deep);
}

.bs-epo .bs-epo-eyebrow.is-muted {
	color: var(--wp--preset--color--gray-500, #6d7883);
}

.bs-epo-title {
	margin-top: 0;
	margin-bottom: 0.4em;
}

.bs-epo-intro {
	max-width: 46rem;
}

/* ---------- Seções ---------- */

/* Sem faixas entre seções: o blockGap do layout constrained da raiz
 * inseria margin-top entre uma seção e a seguinte. */
.bs-epo > * {
	margin-block: 0;
}

.bs-epo-section > * {
	margin-block-start: 0;
}

.bs-epo-section.is-tinted {
	background-color: var(--epo-tint) !important;
}

.bs-epo-section > .alignwide + .alignwide {
	margin-block-start: var(--wp--preset--spacing--50, 2.75rem);
}

/* ---------- Hero ---------- */

.bs-epo-hero {
	/* Sem foto: fundo escuro com brilho roxo discreto. Ao definir uma imagem
	 * de fundo no bloco Capa, o overlay do próprio bloco escurece a foto. */
	background-image: radial-gradient(60% 80% at 85% 40%, rgba(var(--epo-accent-rgb), 0.28), transparent 70%);
	background-color: var(--wp--preset--color--night, #05070b);
}

.bs-epo-hero.wp-block-cover {
	padding-block: var(--wp--preset--spacing--70, 6rem);
	/* Alinha o texto do Hero ao mesmo container (1320px) das demais seções. */
	padding-inline: max(var(--wp--preset--spacing--40, 2rem), calc((100% - 1320px) / 2));
}

.bs-epo-hero .wp-block-cover__image-background {
	object-position: right center;
}

.bs-epo-hero-content {
	max-width: 46rem;
}

.bs-epo-hero-title {
	margin: 0 0 0.35em;
	line-height: 1;
	/* O preset "display" usa !important e estourava a largura no celular
	 * com palavras longas em caixa alta (REGENERATIVE). */
	font-size: clamp(1.9rem, 0.8rem + 5.6vw, 5.25rem) !important;
	overflow-wrap: break-word;
}

.bs-epo-hero-sub {
	max-width: 36rem;
	margin-top: 0;
}

.bs-epo-logos {
	align-items: center;
	gap: 0.9rem;
	margin-bottom: var(--wp--preset--spacing--40, 2rem);
}

.bs-epo-wordmark {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bs-epo-footer .bs-epo-wordmark {
	white-space: normal;
}

.bs-epo-wordmark-sep {
	margin: 0;
	font-size: var(--wp--preset--font-size--md, 1.125rem);
}

.bs-epo-facts {
	gap: 1.5rem 2.5rem;
	margin: var(--wp--preset--spacing--40, 2rem) 0;
	padding-top: var(--wp--preset--spacing--30, 1.25rem);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.bs-epo-fact > * {
	margin: 0;
}

.bs-epo-fact-value {
	font-weight: 700;
}

.bs-epo-fact-label {
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---------- Grid e cards ---------- */

.bs-epo-grid {
	gap: var(--wp--preset--spacing--30, 1.25rem);
}

/* Número fixo de colunas (o auto-fill nativo deixava colunas vazias à
 * direita e deixava cards órfãos). Colapsa em telas menores. */
.bs-epo-grid.is-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bs-epo-grid.is-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
	.bs-epo-grid.is-cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.bs-epo-grid.is-cols-2,
	.bs-epo-grid.is-cols-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.bs-epo-about-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50, 2.75rem);
	align-items: start;
}

@media (max-width: 781px) {
	.bs-epo-about-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.bs-epo-card {
	position: relative;
	height: 100%;
	border: 1px solid var(--epo-line);
	border-radius: 14px;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.bs-epo-card.is-light {
	border-color: var(--epo-line-light);
}

.bs-epo-card:hover {
	border-color: rgba(var(--epo-accent-rgb), 0.7);
	transform: translateY(-2px);
}

.bs-epo-card.is-featured {
	border-color: var(--epo-accent);
	box-shadow: 0 0 0 1px var(--epo-accent), 0 18px 48px rgba(var(--epo-accent-rgb), 0.22);
}

/* Todos os filhos do card: sem margem automática de is-layout-flow no 1º
 * item e espaçamento uniforme entre eles. */
.bs-epo-card > * {
	margin-block: 0;
}

.bs-epo-card > * + * {
	margin-block-start: 0.8rem;
}

.bs-epo-card h3 {
	margin-bottom: 0;
}

.bs-epo-num {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg, 1.375rem);
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--epo-accent-deep);
}

.bs-epo-price {
	font-size: var(--wp--preset--font-size--lg, 1.375rem);
	font-weight: 800;
}

.bs-epo-venue-media {
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 1rem;
	background: linear-gradient(135deg, #111827, #1f1536);
}

/* ---------- Propósito ---------- */

.bs-epo-purpose {
	background-image: radial-gradient(50% 70% at 50% 0%, rgba(var(--epo-accent-rgb), 0.22), transparent 70%);
}

.bs-epo-purpose-title {
	margin-block: 0 0.5em;
}

/* ---------- Botões (apenas detalhes; cor vem dos atributos do bloco) ---------- */

.bs-epo .wp-block-button__link {
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bs-epo .wp-block-button__link:hover {
	transform: translateY(-1px);
}

.bs-epo .is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--epo-accent);
	color: inherit;
}

.bs-epo .is-style-outline > .wp-block-button__link:hover {
	background: var(--epo-accent);
	color: #fff;
}

/* ---------- CTA final ---------- */

.bs-epo-cta .wp-block-heading {
	margin-top: 0;
}

/* ---------- Header exclusivo (no fluxo, sem sobrepor o Hero) ---------- */

.bs-epo-header {
	position: relative;
	border-bottom: 1px solid var(--epo-line);
}

.bs-epo-header-inner {
	align-items: center;
	gap: 1rem 2rem;
}

.bs-epo-header .bs-epo-logos {
	margin: 0;
	flex-wrap: nowrap;
}

.bs-epo-header .wp-block-button__link,
.bs-epo-footer .wp-block-button__link {
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bs-epo-nav {
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bs-epo-nav a {
	color: var(--wp--preset--color--gray-300, #aab4bf);
}

.bs-epo-nav a:hover,
.bs-epo-nav a:focus-visible {
	color: var(--wp--preset--color--base, #fff);
}

.bs-epo-header .wp-block-group,
.bs-epo-footer .wp-block-group {
	margin-block: 0;
}

/* ---------- Footer exclusivo ---------- */

.bs-epo-footer {
	border-top: 1px solid var(--epo-line);
}

.bs-epo-footer-top {
	align-items: flex-start;
	gap: 1.5rem 3rem;
	padding-bottom: var(--wp--preset--spacing--40, 2rem);
	border-bottom: 1px solid var(--epo-line);
}

.bs-epo-footer-top p,
.bs-epo-footer-bottom p {
	margin: 0;
}

.bs-epo-footer-bottom {
	padding-top: var(--wp--preset--spacing--30, 1.25rem);
	gap: 0.5rem 2rem;
}

/* ---------- Responsividade e acessibilidade ---------- */

@media (max-width: 600px) {
	.bs-epo-hero.wp-block-cover {
		padding-block: var(--wp--preset--spacing--60, 4rem);
	}

	.bs-epo-section {
		padding-block: var(--wp--preset--spacing--60, 4rem) !important;
	}

	.bs-epo-facts {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.bs-epo-header .bs-epo-wordmark {
		font-size: var(--wp--preset--font-size--xs, 0.8125rem);
		letter-spacing: 0.08em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bs-epo-card,
	.bs-epo .wp-block-button__link {
		transition: none;
	}

	.bs-epo-card:hover,
	.bs-epo .wp-block-button__link:hover {
		transform: none;
	}
}