/*
Theme Name: BS Ecosystem
Theme URI: https://bsknee.com.br
Author: BS Knee Research
Author URI: https://bsknee.com.br
Description: Block Theme (Full Site Editing) do ecossistema BS. Design System único, preparado para comportar o site institucional, projetos, conteúdo científico e múltiplas landing pages de eventos (BS Fisio é a primeira experiência). Sem page builders, sem campos personalizados, sem CPTs — apenas WordPress Pages normais construídas com Patterns nativos do Gutenberg.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bs-ecosystem
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-menu
*/

/* =========================================================================
   SISTEMA DE CONTAINER
   O tema já resolve isso nativamente via theme.json (settings.layout:
   contentSize "760px", wideSize "1320px") + o mecanismo padrão do FSE —
   NÃO existe (nem foi criada aqui) uma classe ".bs-container" paralela.

   - CONTAINER PADRÃO: qualquer bloco com "align":"wide" dentro de uma
     seção "is-layout-constrained" (é o padrão em todo Pattern de evento)
     recebe automaticamente max-width:1320px centralizado. Título, texto,
     cards, stats, timeline de programação, FAQ etc. usam isso — é assim
     que o eixo horizontal fica igual entre seções, sem precisar copiar
     max-width/margin-inline/padding-inline em cada uma.
   - FULL BLEED: bloco com "align":"full" (ou a própria seção) ignora o
     container e ocupa 100% da viewport — usado pelos backgrounds/imagens
     do Hero, da Programação e pela faixa de Inscrições.
   - HÍBRIDO: a seção é "align":"full" (fundo/imagem full bleed) mas o
     conteúdo de texto dentro dela usa "align":"wide" (respeita o
     container). Ver Hero (.bs-hero-grid) e Programação (.bs-program,
     grid de 2 colunas: imagem full bleed + conteúdo no container).

   Exceções documentadas (com largura própria, fora do container padrão):
   - .bs-registration-inner (Inscrições): 92%/max-width:100rem — faixa de
     CTA deliberadamente mais larga que o conteúdo editorial padrão.
   - .bs-hero-grid, .bs-program: grids próprios para a composição híbrida
     imagem+conteúdo (não são "container errado", são a composição).
   Fora essas exceções, não crie novos max-width por seção — se uma seção
   parecer estreita/larga demais, o problema normalmente é ela ter perdido
   o "align":"wide" no Pattern, não faltar uma classe de container nova.
   ========================================================================= */

/* =========================================================================
   ÍNDICE
   1. Tokens de contexto (cor de destaque por experiência/evento)
   2. Utilitários do Design System (eyebrow, divisores, badge, reveal, ícones)
   3. Cabeçalho (parts/header.html)
   4. Hero de Evento (bs-event-hero)
   5. Título de Seção (patterns/global/bs-section-heading)
   6. O Evento (bs-event-about)
   7. Por Que Participar — cards (bs-event-benefits)
   8. Faixa de métricas (bs-event-stats)
   9. Programação — timeline (bs-event-program)
   10. Palestrantes (bs-event-speakers)
   11. Para Quem É (bs-event-audience)
   12. Local (bs-event-location)
   13. Inscrições (bs-event-registration)
   14. FAQ (bs-event-faq)
   15. Rodapé (parts/footer.html)
   16. Acessibilidade e prefers-reduced-motion
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS DE CONTEXTO
   Todo componente do Design System consome "--bs-accent" em vez de usar a
   cor cyan diretamente. Isso permite que uma futura experiência (ex.: Knee
   Regenerative Medicine Summit) troque a cor de destaque para roxo apenas
   envolvendo suas seções em um Group com a classe ".bs-context-purple",
   sem tocar em nenhum componente do sistema.
   ------------------------------------------------------------------------- */
:root {
	--bs-accent: var(--wp--preset--color--cyan);
	--bs-accent-rgb: 76, 183, 196;
	/* O WordPress não gera a variável CSS deste preset porque o slug
	 * ("2xs") começa com dígito — todo elemento que dependia dele (eyebrow,
	 * rails, nav do header, botões e labels compactos em várias seções)
	 * estava silenciosamente caindo pro tamanho herdado (~17px) em vez do
	 * 0.6875rem definido em theme.json. O mesmo vale para "2xl" e "3xl" —
	 * qualquer slug de fontSize que comece com dígito sofre disso.
	 * Redefinindo os três aqui até renomear os slugs (mudança maior, fora
	 * do escopo das correções pontuais de seção). */
	--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);
}

.bs-context-cyan {
	--bs-accent: var(--wp--preset--color--cyan);
	--bs-accent-rgb: 76, 183, 196;
}

.bs-context-purple {
	--bs-accent: var(--wp--preset--color--purple);
	--bs-accent-rgb: 139, 92, 246;
}

/* -------------------------------------------------------------------------
   2. UTILITÁRIOS DO DESIGN SYSTEM
   ------------------------------------------------------------------------- */

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

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

.bs-eyebrow--muted {
	color: var(--wp--preset--color--gray-500);
}

/* Marcação de palavra em destaque dentro de títulos (usa a cor de contexto). */
mark.bs-accent-text {
	background: none;
	color: var(--bs-accent);
}

/* Badge "BS | [Experiência]" — forma de bandeira/flag desenhada em CSS puro
 * (clip-path), sem depender de nenhuma imagem. Reutilizável no cabeçalho,
 * no Hero e no rodapé em tamanhos diferentes. */
.bs-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	line-height: 1;
}

.bs-badge-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
	background: var(--wp--preset--color--night-elevated);
	box-shadow: inset 0 0 0 1.5px var(--bs-accent);
	color: var(--wp--preset--color--base);
	font-weight: 800;
	padding: 0.4em 1.1em 0.4em 0.65em;
}

.bs-badge-sub {
	font-style: italic;
	font-family: Georgia, "Times New Roman", serif;
	color: var(--bs-accent);
	font-weight: 600;
}

.bs-badge--sm .bs-badge-mark {
	font-size: 0.95rem;
}
.bs-badge--sm .bs-badge-sub {
	font-size: 1.15rem;
}

.bs-badge--lg .bs-badge-mark {
	font-size: 1.75rem;
}
.bs-badge--lg .bs-badge-sub {
	font-size: 2rem;
}

/* Coluna decorativa de palavras verticais (Hero / O Evento / Para Quem É).
 * Puramente decorativa — marcada aria-hidden no HTML e ocultada em telas
 * pequenas para não competir com o conteúdo real. */
.bs-rail {
	display: none;
	flex-direction: column;
	gap: 0.75em;
	font-size: var(--wp--preset--font-size--2xs);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-300);
	white-space: nowrap;
}

.bs-rail-footnote {
	margin-top: 0.6em;
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--wp--preset--color--gray-500);
	white-space: normal;
	max-width: 10em;
}

/* No Hero (e só nele — ".bs-rail" sozinho também aparece em "O Evento" e
 * "Para Quem É", com a paleta padrão acima), as colunas laterais usam o
 * tratamento cyan da referência, e a legenda embaixo de "Ciência/Prática/
 * Conexão/Evolução" ganha uma pequena linha divisória. */
.bs-hero-rail-left,
.bs-hero-rail-right {
	color: var(--bs-accent);
}

.bs-hero-rail-left::after {
	content: "";
	display: block;
	width: 1.75rem;
	height: 2px;
	background: var(--bs-accent);
	margin: 0.2em 0 0.4em;
}

.bs-hero-rail-left .bs-rail-footnote {
	margin-top: 0;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bs-accent);
	max-width: 9em;
}

/* Botão secundário (contorno cyan, fundo transparente) — usado nos CTAs
 * de apoio ("Sobre o Evento", "Ver Programação Completa", "Como Chegar",
 * "Quero ser avisado"). O CTA primário (preenchido) usa o estilo padrão
 * de core/button definido no theme.json, sem precisar de classe extra. */
.bs-btn-outline .wp-block-button__link {
	background: transparent;
	color: var(--bs-accent);
	box-shadow: inset 0 0 0 1.5px var(--bs-accent);
}

.bs-btn-outline .wp-block-button__link:hover {
	background: var(--bs-accent);
	color: var(--wp--preset--color--night);
}

/* Divisor vertical fino (faixa de métricas, CTA de inscrição). */
.bs-divider-v {
	width: 1px;
	align-self: stretch;
	background: var(--wp--preset--color--line);
}

/* Divisor horizontal fino e curto, usado como assinatura visual do BS. */
.bs-divider-h {
	width: 2.5rem;
	height: 2px;
	background: var(--bs-accent);
	border: 0;
	margin: 1.5rem 0 0;
}

/* Ícone linear — moldura circular usada nos cards de benefícios/audiência. */
.bs-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	border: 1px solid var(--bs-accent);
	color: var(--bs-accent);
	flex-shrink: 0;
}

.bs-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Microinteração discreta de revelação ao rolar a página (ver assets/js).
 * Sem JS, ou com prefers-reduced-motion ativo, o conteúdo permanece 100%
 * visível — a classe .bs-reveal nunca esconde conteúdo por padrão. */
.bs-reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.js-reveal-ready .bs-reveal {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.js-reveal-ready .bs-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* Placeholder elegante para imagens ainda não substituídas pelo cliente
 * (bloco core/image sem "src" definido). Evita a aparência de "imagem
 * quebrada" enquanto o asset real não é enviado no Editor de Site. */
.bs-media-placeholder img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: linear-gradient(135deg, var(--wp--preset--color--night-elevated) 0%, var(--wp--preset--color--night) 100%);
	min-height: 220px;
}

/* -------------------------------------------------------------------------
   3. CABEÇALHO
   ------------------------------------------------------------------------- */
.bs-header {
	position: sticky;
	top: 0;
	z-index: 40;
}

.bs-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
	padding-block: var(--wp--preset--spacing--20);
}

.bs-header .wp-block-navigation {
	--wp--style--root--padding-top: 0;
}

.bs-header .wp-block-navigation-item > a {
	color: var(--wp--preset--color--gray-300);
	padding-block: 0.4rem;
}

.bs-header .wp-block-navigation-item > a:hover {
	color: var(--bs-accent);
}

.bs-header .wp-block-button .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--night);
	font-size: var(--wp--preset--font-size--2xs);
}

.bs-header .wp-block-button .wp-block-button__link:hover {
	background: var(--bs-accent);
}

/* Header sobreposto ao Hero — escopado à página "BS Fisio" (#7), a única
 * com Hero de evento hoje. O part de header vem duplamente embrulhado em
 * <header> pelo próprio wp:template-part (".wp-block-template-part" por
 * fora, ".bs-header" por dentro), o que quebrava um seletor ":has(+ main
 * .bs-hero)" direto no ".bs-header" — por isso o escopo por page-id em vez
 * de relação de DOM. Se o Hero passar a ser usado em outras páginas/eventos
 * futuros, troque ".page-id-7" pela classe de contexto adequada. */
.page-id-7 .bs-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 30;
	background: transparent;
}

.page-id-7 .bs-header-inner {
	padding-block: var(--wp--preset--spacing--30);
}

.page-id-7 .bs-header .wp-block-navigation-item > a {
	font-size: var(--wp--preset--font-size--2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.page-id-7 .bs-header .wp-block-button .wp-block-button__link {
	background: transparent;
	color: var(--bs-accent);
	box-shadow: inset 0 0 0 1.5px var(--bs-accent);
}

.page-id-7 .bs-header .wp-block-button .wp-block-button__link:hover {
	background: var(--bs-accent);
	color: var(--wp--preset--color--night);
}

/* -------------------------------------------------------------------------
   4. HERO DE EVENTO
   ------------------------------------------------------------------------- */
.bs-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-top: 4.75rem;
	padding-bottom: var(--wp--preset--spacing--30);
	display: flex;
	align-items: flex-start;
}

.bs-hero-media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.bs-hero-media .bs-hero-media-primary {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.bs-hero-media .bs-hero-media-primary img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
	opacity: 0.9;
}

.bs-hero-media .bs-hero-media-secondary {
	position: absolute;
	top: 8%;
	right: 4%;
	width: min(42%, 460px);
	aspect-ratio: 16 / 10;
	opacity: 0.6;
	display: none;
}

.bs-hero-media .bs-hero-media-secondary img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
}

.bs-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 7, 11, 0.35) 0%, rgba(5, 7, 11, 0.15) 30%, var(--wp--preset--color--night) 97%), linear-gradient(90deg, rgba(5, 7, 11, 0.15) 0%, rgba(5, 7, 11, 0.6) 38%, rgba(5, 7, 11, 0.65) 62%, rgba(5, 7, 11, 0.25) 100%);
}

.bs-hero-grid {
	position: relative;
	z-index: 1;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
}

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

.bs-hero-content .bs-badge {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Logo um pouco mais compacto que ".bs-badge--lg" (padrão do rodapé),
 * proporcional à composição mais densa do Hero corrigido. */
.bs-hero-content .bs-badge-mark {
	font-size: 1.4rem;
}

.bs-hero-content .bs-badge-sub {
	font-size: 1.6rem;
}

.bs-hero-kicker {
	font-size: var(--wp--preset--font-size--2xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bs-accent);
	margin: 0 0 var(--wp--preset--spacing--10);
}

.bs-hero-title {
	font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.375rem);
	line-height: 1.05;
	margin: 0;
}

.bs-hero-subtitle {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-300);
	margin: var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--20);
}

/* Composição horizontal (Data / Local / Participação) com divisórias
 * verticais finas entre os três grupos — ícone acima do texto, tudo
 * centralizado dentro de cada grupo. */
.bs-hero-info {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
}

.bs-hero-info li {
	font-size: var(--wp--preset--font-size--2xs);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}

.bs-hero-info li > .wp-block-group {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.3em;
}

.bs-hero-info li strong {
	display: block;
	font-weight: 700;
}

.bs-hero-info li span {
	display: block;
	font-weight: 400;
	color: var(--wp--preset--color--gray-300);
	text-transform: none;
	letter-spacing: 0.01em;
}

.bs-hero-info .bs-icon {
	width: 1.375rem;
	height: 1.375rem;
	border: none;
	background: none;
	margin-top: 0;
}

.bs-hero-info .bs-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Botão de inscrição do Hero — compacto, diferente do CTA grande padrão
 * usado no resto da página (ver core/button em theme.json). */
.bs-hero-content .wp-block-button__link {
	padding-block: 0.7rem;
	padding-inline: 1.1rem;
	font-size: var(--wp--preset--font-size--2xs);
}

/* As colunas decorativas eram posicionadas com position:absolute e um
 * deslocamento fixo — em telas por volta de 1024-1200px isso colidia
 * fisicamente com o título do Hero (que cresce bastante nesse intervalo
 * via clamp()). A partir do breakpoint de 1024px elas passam a ser
 * colunas reais do grid (ver media query abaixo), garantindo que o
 * conteúdo central nunca possa ocupar o espaço reservado a elas. */
.bs-hero-rail-right {
	text-align: right;
	align-items: flex-end;
}

.bs-hero-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: var(--wp--preset--spacing--20);
	transform: translateX(-50%);
	color: var(--bs-accent);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
}

.bs-hero-scroll-cue svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

@media (prefers-reduced-motion: no-preference) {
	.bs-hero-scroll-cue {
		animation: bs-bounce 2.2s ease-in-out infinite;
	}
}

@keyframes bs-bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 6px); }
}

@media (min-width: 640px) {
	.bs-hero-media .bs-hero-media-secondary {
		display: block;
	}
}

/* Faixa "quebrada": nesta largura o menu do header ainda não colapsou
 * para hambúrguer (isso é decidido em runtime pelo próprio bloco de
 * navegação, não por breakpoint CSS) mas também não cabe mais em uma
 * linha só, então ele ocupa 2 linhas. Dá mais respiro no topo do Hero
 * pra o conteúdo não ficar embaixo do header nessa faixa específica. */
@media (min-width: 600px) and (max-width: 1023px) {
	.page-id-7 .bs-hero {
		padding-top: 20rem;
	}
}

@media (min-width: 768px) {
	.bs-hero-info {
		flex-direction: row;
		justify-content: center;
		gap: 0;
	}
	.bs-hero-info li {
		padding-inline: var(--wp--preset--spacing--30);
	}
	.bs-hero-info li:first-child {
		padding-inline-start: 0;
	}
	.bs-hero-info li:last-child {
		padding-inline-end: 0;
	}
	.bs-hero-info li:not(:last-child) {
		border-right: 1px solid rgba(var(--bs-accent-rgb), 0.3);
	}
}

@media (min-width: 1024px) {
	.bs-hero {
		padding-top: 5.25rem;
		min-height: 450px;
	}
	.bs-hero-grid {
		/* Grid de 3 colunas reais: trilho esquerdo / conteúdo / trilho
		 * direito. A coluna central tem um teto de largura (30rem) e as
		 * laterais crescem para preencher o resto — como são colunas de
		 * verdade (não posicionamento absoluto sobreposto), o título do
		 * Hero fisicamente não consegue invadir o espaço dos trilhos,
		 * em nenhuma largura de tela a partir daqui. */
		grid-template-columns: minmax(7rem, 1fr) minmax(0, 30rem) minmax(7rem, 1fr);
		align-items: start;
		column-gap: var(--wp--preset--spacing--40);
		padding-inline: var(--wp--preset--spacing--60);
	}
	.bs-hero-rail-left {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}
	.bs-hero-rail-right {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
	.bs-hero-content {
		grid-column: 2;
		grid-row: 1;
		max-width: none;
	}
	.bs-hero-media .bs-hero-media-primary {
		width: 58%;
	}
	.bs-hero-media .bs-hero-media-primary img {
		object-position: center 20%;
	}
	.bs-rail {
		display: flex;
	}
}

@media (min-width: 1280px) {
	.bs-hero {
		min-height: 460px;
	}
	.bs-hero-grid {
		grid-template-columns: minmax(9rem, 1fr) minmax(0, 30rem) minmax(9rem, 1fr);
		padding-inline: var(--wp--preset--spacing--80);
	}
}

/* -------------------------------------------------------------------------
   5. TÍTULO DE SEÇÃO (patterns/global/bs-section-heading)
   ------------------------------------------------------------------------- */
.bs-section-heading {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--50);
}

.bs-section-heading h2 {
	font-size: var(--wp--preset--font-size--2xl);
	margin: 0;
}

.bs-section-heading__aside {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-500);
}

@media (min-width: 900px) {
	.bs-section-heading {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
	.bs-section-heading__aside {
		text-align: right;
		max-width: 20rem;
	}
}

/* -------------------------------------------------------------------------
   6. O EVENTO
   ------------------------------------------------------------------------- */
.bs-about {
	position: relative;
}

.bs-about-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.bs-about-media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 4px;
}

.bs-about-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
}

.bs-about-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, var(--wp--preset--color--night) 100%);
}

.bs-about-text p {
	color: var(--wp--preset--color--gray-300);
	max-width: 34em;
}

@media (min-width: 1024px) {
	/* Assimétrico (texto maior que a imagem) em vez de 50/50 — o texto
	 * editorial é o conteúdo principal da seção, a foto é só apoio
	 * visual; 50/50 fazia a coluna de texto parecer estreita demais
	 * dentro do container padrão de 1320px. */
	.bs-about-grid {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: var(--wp--preset--spacing--70);
	}
	.bs-about-media {
		aspect-ratio: auto;
		align-self: stretch;
	}
}

/* -------------------------------------------------------------------------
   7. POR QUE PARTICIPAR — CARDS
   Namespace ".bs-benefits" usado só pra sobrescrever o cabeçalho de seção
   compartilhado (.bs-section-heading) sem afetar as outras seções que
   também o usam (Programação, Palestrantes, Local, Métricas, FAQ...).
   ------------------------------------------------------------------------- */
.bs-benefits .bs-section-heading {
	margin-bottom: var(--wp--preset--spacing--20);
}

.bs-benefits .bs-section-heading h2 {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bs-accent);
}

.bs-benefits .bs-section-heading__aside {
	font-size: var(--wp--preset--font-size--2xs);
	font-weight: 400;
	letter-spacing: 0.14em;
	color: var(--bs-accent);
}

@media (min-width: 900px) {
	.bs-benefits .bs-section-heading {
		align-items: center;
	}
}

.bs-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
}

/* O grid já cuida do espaçamento via "gap" — sem isto, o margin-top que o
 * WordPress aplica automaticamente a blocos "is-layout-flow" (menos no
 * primeiro filho) soma-se ao gap e desalinha o 1º card em relação aos
 * outros 3. */
.bs-cards > .bs-card {
	margin-top: 0;
}

/* ".bs-card" também é reaproveitado fora desta grade (ver
 * patterns/events/bs-event-knew.php) — por isso as regras específicas do
 * cartão "Por que participar" ficam sob ".bs-cards .bs-card" e não afetam
 * esse outro uso. */
.bs-card {
	border: 1px solid var(--bs-accent);
	background: rgba(255, 255, 255, 0.02);
	padding: var(--wp--preset--spacing--40);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.bs-card:hover {
	transform: translateY(-4px);
	background: rgba(var(--bs-accent-rgb), 0.06);
}

.bs-cards .bs-card {
	border: 1px solid rgba(var(--bs-accent-rgb), 0.35);
	background: rgba(var(--bs-accent-rgb), 0.035);
	padding: 1.25rem;
}

.bs-cards .bs-card:hover {
	background: rgba(var(--bs-accent-rgb), 0.07);
}

.bs-cards .bs-card .bs-icon {
	width: 1.875rem;
	height: 1.875rem;
	border: none;
	border-radius: 0;
	background: none;
	margin-bottom: 0;
}

.bs-cards .bs-card .bs-icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.bs-cards .bs-card h3 {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--bs-accent);
	margin: 0 0 0.5em;
}

.bs-cards .bs-card h3::before {
	content: "";
	display: block;
	width: 1.5rem;
	height: 2px;
	background: var(--bs-accent);
	margin: 0.75em 0 0.6em;
}

.bs-cards .bs-card p {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--wp--preset--color--gray-300);
	margin: 0;
}

@media (min-width: 640px) {
	.bs-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.bs-cards {
		grid-template-columns: repeat(4, 1fr);
	}
	.bs-cards .bs-card {
		padding: 1.125rem;
	}
}

/* -------------------------------------------------------------------------
   8. FAIXA DE MÉTRICAS
   Namespace ".bs-metrics" usado só pra sobrescrever o cabeçalho de seção
   compartilhado (.bs-section-heading) sem afetar as outras seções que
   também o usam (Programação, Palestrantes, Local, FAQ...).
   ------------------------------------------------------------------------- */
.bs-metrics .bs-section-heading {
	margin-bottom: var(--wp--preset--spacing--10);
}

/* O layout "constrained" do WordPress aplica margin-top automático no
 * segundo filho da seção (".bs-stats") por padrão — isso colidia com o
 * margin-bottom acima (as margens colapsam pro maior valor dos dois) e
 * mantinha um vão maior do que o pretendido entre título e números. */
.bs-metrics .bs-stats {
	margin-top: 0;
}

.bs-metrics .bs-section-heading h2 {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bs-accent);
}

.bs-metrics .bs-section-heading__aside {
	font-size: var(--wp--preset--font-size--2xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--bs-accent);
}

@media (min-width: 900px) {
	.bs-metrics .bs-section-heading {
		align-items: center;
	}
}

.bs-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
}

.bs-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.2em;
}

.bs-stat strong {
	font-size: clamp(2.375rem, 2.05rem + 1vw, 2.75rem);
	font-weight: 800;
	color: var(--bs-accent);
	line-height: 1;
}

.bs-stat span {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-300);
}

@media (min-width: 900px) {
	.bs-stats {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--wp--preset--spacing--20);
		align-items: center;
	}
	.bs-stats .bs-stat {
		position: relative;
		padding-inline: var(--wp--preset--spacing--20);
	}
	.bs-stats .bs-stat:first-child {
		padding-left: 0;
	}
	.bs-stats .bs-stat:last-child {
		padding-right: 0;
	}
	.bs-stats .bs-stat:not(:first-child)::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 3.75rem;
		background: rgba(var(--bs-accent-rgb), 0.35);
	}
}

/* -------------------------------------------------------------------------
   9. PROGRAMAÇÃO — TIMELINE
   Grid geral: [imagem] [cabeçalho/CTA + timeline]. A imagem ocupa a faixa
   esquerda em sangria total (a seção tem padding-left:0 — ver pattern);
   o resto do conteúdo mantém o gutter próprio via padding-left.
   ------------------------------------------------------------------------- */
.bs-program {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(130px, 18%) 1fr;
	grid-template-rows: auto auto;
	grid-template-areas: "media heading" "media timeline";
	align-items: stretch;
}

/* A altura da linha do grid é definida pelo conteúdo de texto (coluna 2);
 * a imagem não deve participar desse cálculo, por isso fica com
 * position:absolute preenchendo a área "media" já dimensionada. */
.bs-program-media {
	grid-area: media;
	position: relative;
	width: 100%;
	max-width: none;
}

.bs-program-media figure {
	position: absolute;
	inset: 0;
	margin: 0;
}

.bs-program-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	opacity: 0.6;
}

.bs-program-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(5, 7, 11, 0.1) 0%, var(--wp--preset--color--night) 94%), linear-gradient(180deg, rgba(5, 7, 11, 0.45), rgba(5, 7, 11, 0.45));
}

.bs-program > .bs-section-heading {
	grid-area: heading;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	padding-left: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--10);
}

.bs-program > .bs-section-heading h2 {
	font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.375rem);
	line-height: 1.2;
}

/* Botão desta seção — compacto, diferente do CTA padrão usado no resto da
 * página (ver core/button em theme.json). */
.bs-program .bs-section-heading__aside .wp-block-button__link {
	font-size: 0.625rem;
	letter-spacing: 0.04em;
	padding-block: 0.6rem;
	padding-inline: 0.85rem;
}

.bs-timeline {
	grid-area: timeline;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--wp--preset--spacing--30);
}

.bs-timeline-item {
	position: relative;
}

/* Altura reservada para o "cabeçalho" de cada bloco (nº + categoria +
 * título) igual em todos os itens — é o que garante que o marcador e a
 * linha contínua fiquem numa altura consistente, mesmo blocos com título
 * de 1 ou 2 linhas (ou, no bloco 5, sem título nenhum). Precisa ser uma
 * altura FIXA (não min-height): com min-height, os blocos com título de
 * 2 linhas (via <br>) cresciam além do valor mínimo e empurravam o
 * marcador ~8px abaixo dos blocos de 1 linha, desalinhando os pontos
 * entre si e em relação à linha da timeline. 4.5rem é a altura do
 * conteúdo mais alto (bloco com categoria + título de 2 linhas). */
.bs-timeline-head {
	height: 4.5rem;
}

.bs-timeline-marker {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--bs-accent);
	margin: 0.5em 0;
}

.bs-timeline-item:not(:first-child) .bs-timeline-marker {
	background: var(--wp--preset--color--night);
	border: 1.5px solid var(--bs-accent);
}

.bs-timeline-block {
	font-size: var(--wp--preset--font-size--2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bs-accent);
	margin: 0 0 0.25em;
}

.bs-timeline-category {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	margin: 0 0 0.3em;
}

.bs-timeline-title {
	font-size: var(--wp--preset--font-size--2xs);
	line-height: 1.3;
	color: var(--wp--preset--color--gray-300);
	margin: 0;
}

.bs-timeline-desc {
	font-size: 0.625rem;
	line-height: 1.35;
	color: var(--wp--preset--color--gray-300);
	margin: 0.6em 0 0;
}

@media (min-width: 1100px) {
	.bs-timeline {
		flex-direction: row;
		align-items: flex-start;
		gap: 0;
		position: relative;
		padding-top: 0;
	}
	/* A linha atravessa a timeline inteira na altura em que o marcador
	 * fica (final do ".bs-timeline-head" + sua própria margem vertical),
	 * calculada a partir dos mesmos valores usados no marcador — não é um
	 * número arbitrário. */
	.bs-timeline::before {
		content: "";
		position: absolute;
		top: calc(4.5rem + 0.5em + 3.5px);
		left: 0;
		right: 0;
		height: 1px;
		background: rgba(var(--bs-accent-rgb), 0.4);
	}
	.bs-timeline-item {
		flex: 1;
		padding-right: var(--wp--preset--spacing--20);
	}
	.bs-timeline-item:last-child {
		padding-right: 0;
	}
	.bs-timeline-marker {
		position: relative;
		z-index: 1;
	}
}

/* -------------------------------------------------------------------------
   10. PALESTRANTES
   ------------------------------------------------------------------------- */
.bs-speakers-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--30);
}

.bs-speaker-slot {
	aspect-ratio: 3 / 4;
	border: 1px dashed var(--wp--preset--color--line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--gray-500);
}

.bs-speaker-slot svg {
	width: 2.25rem;
	height: 2.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
}

@media (min-width: 640px) {
	.bs-speakers-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* -------------------------------------------------------------------------
   11. PARA QUEM É
   ------------------------------------------------------------------------- */
.bs-audience-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

.bs-audience-item h3 {
	font-size: var(--wp--preset--font-size--md);
	margin: var(--wp--preset--spacing--30) 0 0.5em;
}

.bs-audience-item p {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-300);
	margin: 0;
}

@media (min-width: 900px) {
	.bs-audience-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bs-audience {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bs-audience-media {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.28;
	display: none;
}

.bs-audience-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	filter: grayscale(1);
}

.bs-audience-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--night) 45%, transparent 100%);
}

@media (min-width: 1024px) {
	.bs-audience-media {
		display: block;
	}
}

/* -------------------------------------------------------------------------
   12. LOCAL
   ------------------------------------------------------------------------- */
.bs-location {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 26rem;
	display: flex;
	align-items: flex-end;
}

.bs-location-media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.bs-location-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
}

.bs-location-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, var(--wp--preset--color--night) 10%, rgba(5, 7, 11, 0.35) 60%, rgba(5, 7, 11, 0.7) 100%);
}

.bs-location .bs-location-content {
	position: relative;
	padding: var(--wp--preset--spacing--50) 0;
	max-width: 42rem;
	/* ".alignwide" centraliza com "margin-inline:auto !important" (regra
	 * nativa do FSE) — precisa do !important pra ancorar à esquerda, sobre
	 * a foto de fundo, no mesmo eixo principal das demais seções, em vez
	 * de centralizado. Conflito real com uma regra nativa !important, não
	 * dá pra resolver só com especificidade. */
	margin-inline: 0 !important;
}

.bs-location-content p {
	color: var(--wp--preset--color--gray-300);
}

/* -------------------------------------------------------------------------
   13. INSCRIÇÕES
   ------------------------------------------------------------------------- */
.bs-registration {
	background: var(--wp--preset--color--night-elevated);
	border-top: 1px solid rgba(var(--bs-accent-rgb), 0.35);
}

.bs-registration-inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

/* Esta faixa é intencionalmente mais larga que o "wide" padrão (1320px)
 * do resto do site — em telas grandes ela deve ocupar quase toda a
 * viewport, não só o miolo central de conteúdo. */
.bs-registration .bs-registration-inner {
	width: 92%;
	max-width: 100rem;
}

.bs-registration-title .wp-block-heading {
	font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);
	line-height: 1.15;
	margin: 0;
	max-width: 21rem;
}

.bs-registration-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--wp--preset--spacing--30);
	row-gap: var(--wp--preset--spacing--10);
	list-style: none;
	margin: var(--wp--preset--spacing--10) 0 0;
	padding: 0;
}

.bs-registration-info li {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-size: var(--wp--preset--font-size--2xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--wp--preset--color--base);
}

.bs-registration-info li span {
	display: block;
	color: var(--bs-accent);
}

.bs-registration-info li p {
	line-height: 1.3;
}

.bs-registration-info .bs-icon {
	width: 1.625rem;
	height: 1.625rem;
	border: none;
	background: none;
}
.bs-registration-info .bs-icon svg {
	width: 1.4rem;
	height: 1.4rem;
}

/* Botão de inscrição desta faixa — compacto, diferente do CTA padrão
 * usado no resto da página (ver core/button em theme.json). */
.bs-registration-inner .wp-block-button__link {
	font-size: var(--wp--preset--font-size--2xs);
	padding-block: 0.85rem;
	padding-inline: 1.3rem;
}

/* Divisor vertical cyan discreto entre as informações e o CTA — some no
 * mobile/tablet (a composição empilha) e reaparece a partir de onde o
 * ".bs-registration-inner" volta a ser uma linha (ver media query). */
@media (min-width: 1024px) {
	/* Três zonas reais (título / informações / divisor+CTA) em vez de
	 * duas — título e informações eram empilhados dentro do mesmo bloco
	 * antes, o que deixava a composição toda espremida à esquerda com um
	 * vazio enorme à direita, já que só havia 2 itens flex disputando o
	 * "space-between". */
	.bs-registration-inner {
		display: grid;
		grid-template-columns: minmax(0, 30%) minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--wp--preset--spacing--30);
	}
	.bs-registration-info {
		margin-top: 0;
	}
	.bs-registration-inner .wp-block-buttons {
		align-items: center;
		justify-content: flex-end;
		gap: var(--wp--preset--spacing--40);
	}
	.bs-registration-inner .wp-block-buttons::before {
		content: "";
		width: 1px;
		height: 3.75rem;
		background: rgba(var(--bs-accent-rgb), 0.35);
	}
}

/* -------------------------------------------------------------------------
   14. FAQ
   ------------------------------------------------------------------------- */
.bs-faq .wp-block-details {
	border-color: var(--wp--preset--color--line);
	border-width: 0 0 1px 0;
	padding: var(--wp--preset--spacing--30) 0;
}

.bs-faq .wp-block-details summary {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
}

.bs-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.bs-faq .wp-block-details summary::after {
	content: "+";
	color: var(--bs-accent);
	font-size: 1.5em;
	line-height: 1;
	flex-shrink: 0;
}

.bs-faq .wp-block-details[open] summary::after {
	content: "–";
}

.bs-faq .wp-block-details p {
	color: var(--wp--preset--color--gray-300);
	margin-top: var(--wp--preset--spacing--20);
	max-width: 40em;
}

/* -------------------------------------------------------------------------
   15. RODAPÉ
   ------------------------------------------------------------------------- */
.bs-footer {
	border-top: 1px solid var(--wp--preset--color--line);
}

.bs-footer-top {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--50);
}

.bs-footer-tagline {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-300);
	margin-top: 0.6em;
}

.bs-footer .wp-block-navigation-item > a {
	color: var(--wp--preset--color--gray-300);
	font-weight: 600;
}

.bs-footer .wp-block-navigation-item > a:hover {
	color: var(--bs-accent);
}

.bs-footer-social .wp-block-social-link {
	background: transparent !important;
}

.bs-footer-social .wp-block-social-link .wp-social-link-anchor,
.bs-footer-social .wp-block-social-link svg {
	color: var(--wp--preset--color--gray-300);
	fill: var(--wp--preset--color--gray-300);
}

.bs-footer-social .wp-block-social-link:hover .wp-social-link-anchor,
.bs-footer-social .wp-block-social-link:hover svg {
	color: var(--bs-accent);
	fill: var(--bs-accent);
}

.bs-footer-bottom {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--2xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-500);
}

@media (min-width: 900px) {
	.bs-footer-top {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}
	.bs-footer-bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* -------------------------------------------------------------------------
   16. ACESSIBILIDADE
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.bs-icon:focus-visible {
	outline: 2px solid var(--bs-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.bs-hero-scroll-cue,
	.bs-card,
	*[style*="animation"] {
		animation: none !important;
		transition: none !important;
	}
}