/**
 * WP Eventos - Programação — estilos do front.
 *
 * Todas as cores vêm de variáveis CSS definidas inline pelo renderer,
 * o que permite sobrescrever por instância (shortcode ou widget do Elementor).
 *
 * Os seletores são prefixados com `.wep-programacao` de propósito: temas costumam
 * estilizar `button` globalmente (caixa alta, fundo da cor da marca, sombras) e
 * venceriam regras de classe simples.
 *
 * Duas disposições de grade, escolhidas nas configurações:
 *   .wep-programacao--salas-colunas  salas no topo, horários nas linhas (padrão)
 *   .wep-programacao--salas-linhas   salas na lateral, horários nas colunas
 */

.wep-programacao {
	--wep-primaria: #1d4ed8;
	--wep-primaria-texto: #ffffff;
	--wep-destaque: #f59e0b;
	--wep-fundo: #ffffff;
	--wep-texto: #111827;
	--wep-texto-suave: #6b7280;
	--wep-borda: #e5e7eb;
	--wep-sala-fundo: #7a1030;
	--wep-sala-texto: #ffffff;
	--wep-card-fundo: #ffffff;
	--wep-card-hover: #f4f6fb;
	--wep-cabecalho-fundo: #f1f5f9;
	--wep-cabecalho-texto: #334155;
	--wep-vazio: #fafbfc;
	--wep-faixa-fundo: #fdf4e3;
	--wep-faixa-texto: #7a4a05;
	--wep-faixa-borda: #e9a23b;
	--wep-raio: 14px;
	--wep-coluna: 220px;
	--wep-lateral: 92px;
	--wep-foto: 200px;
	--wep-sala-escrita: horizontal-tb;
	--wep-sala-giro: 0deg;
	--wep-fonte: 15px;

	box-sizing: border-box;
	color: var(--wep-texto);
	font-size: var(--wep-fonte);
	line-height: 1.45;
	background: var(--wep-fundo);
}

.wep-programacao *,
.wep-programacao *::before,
.wep-programacao *::after {
	box-sizing: inherit;
}

/* Neutraliza estilos de botão herdados do tema. */
.wep-programacao button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	font-family: inherit;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	text-decoration: none;
	box-shadow: none;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	filter: none;
}

.wep-programacao ul,
.wep-programacao li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wep-titulo {
	margin: 0 0 1.25rem;
	font-size: 1.7em;
	line-height: 1.2;
	color: var(--wep-texto);
}

.wep-vazio {
	margin: 0;
	padding: 2rem 1rem;
	text-align: center;
	color: var(--wep-texto-suave);
	background: var(--wep-vazio);
	border: 1px dashed var(--wep-borda);
	border-radius: var(--wep-raio);
}

/* ---------------------------------------------------------------- Abas */

.wep-abas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
}

.wep-programacao .wep-aba {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.05rem;
	min-width: 5rem;
	padding: 0.55rem 1rem;
	font-size: 1em;
	line-height: 1.2;
	color: var(--wep-texto);
	background: var(--wep-cabecalho-fundo);
	border: 1px solid var(--wep-borda);
	border-radius: calc(var(--wep-raio) * 0.7);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wep-programacao .wep-aba:hover {
	color: var(--wep-texto);
	background: var(--wep-card-hover);
	border-color: var(--wep-primaria);
}

.wep-programacao .wep-aba:focus-visible {
	outline: 2px solid var(--wep-primaria);
	outline-offset: 2px;
}

.wep-programacao .wep-aba.is-ativa {
	color: var(--wep-primaria-texto);
	background: var(--wep-primaria);
	border-color: var(--wep-primaria);
}

.wep-aba__dia {
	font-size: 0.72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.8;
}

.wep-aba__data {
	font-size: 1.05em;
	font-weight: 700;
}

/* ---------------------------------------------------------------- Dia */

.wep-dia[hidden] {
	display: none;
}

/* Data centralizada com filetes laterais: âncora visual de cada dia. */
.wep-dia__titulo {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.1rem;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wep-texto);
	text-transform: capitalize;
	letter-spacing: 0.01em;
	text-align: center;
}

.wep-dia__titulo::before,
.wep-dia__titulo::after {
	content: "";
	flex: 1 1 auto;
	height: 2px;
	border-radius: 2px;
	background: var(--wep-borda);
}

.wep-dia__titulo-texto {
	flex: 0 1 auto;
	padding: 0 0.25rem;
}

/* ------------------------------------------------------- Grade (comum) */

.wep-grade-wrap {
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	border: 1px solid var(--wep-borda);
	border-radius: var(--wep-raio);
	background: var(--wep-fundo);
	-webkit-overflow-scrolling: touch;
}

.wep-grade-wrap:focus-visible {
	outline: 2px solid var(--wep-primaria);
	outline-offset: 2px;
}

.wep-programacao .wep-grade {
	table-layout: fixed;
	width: 100%;
	width: max-content; /* Progressivo: sem suporte, cai para 100%. */
	min-width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent;
}

/**
 * Regra base das células. Fica em 2 classes + 1 elemento (0,2,1), então toda
 * regra por papel abaixo precisa de 3 classes (0,3,0) para vencê-la — daí o
 * `.wep-grade` no meio dos seletores. Sem isso, `padding`, `text-align` e
 * `background` daqui sobrescrevem silenciosamente o estilo de cada papel.
 */
.wep-programacao .wep-grade th,
.wep-programacao .wep-grade td {
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--wep-borda);
	vertical-align: top;
	text-align: left;
	background: var(--wep-fundo);
}

.wep-programacao .wep-grade tbody tr:last-child th,
.wep-programacao .wep-grade tbody tr:last-child td {
	border-bottom: 0;
}

/* Canto superior esquerdo: acompanha sempre o trilho de salas. */
.wep-programacao .wep-grade .wep-grade__canto {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 5;
	width: var(--wep-lateral);
	padding: 0.85rem 0.7rem;
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-align: center;
	vertical-align: middle;
	color: var(--wep-sala-texto);
	background: var(--wep-sala-fundo);
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

/*
 * O `height: 1px` é o gatilho que faz o `height: 100%` do conteúdo resolver.
 * Célula de tabela nunca encolhe abaixo do conteúdo, então na prática ela fica
 * com a altura da linha — mas passa a ser uma altura *definida*, e sem isso o
 * percentual do filho viraria `auto` e cada card teria a altura do seu texto.
 */
.wep-programacao .wep-grade .wep-celula {
	height: 1px;
	padding: 0.6rem;
	background: var(--wep-fundo);
}

/* Distribui os cards na altura da célula: no mesmo horário, mesma altura. */
.wep-celula__conteudo {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
}

.wep-programacao .wep-grade .wep-celula--vazia {
	background: var(--wep-vazio);
}

/* ------------------------------ Faixas em destaque */

.wep-programacao .wep-grade .wep-celula--destaque {
	padding: 0.5rem 0.6rem;
	background: var(--wep-faixa-fundo);
}

.wep-programacao .wep-grade .wep-linha--destaque .wep-hora {
	color: var(--wep-faixa-texto);
	background: var(--wep-faixa-fundo);
}

/* Faixa: bloco centralizado — horário, tema e, embaixo, o local em evidência. */
.wep-atividade--destaque {
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 0.75rem 1rem;
	color: var(--wep-faixa-texto);
	background: transparent;
	border: 0;
	border-left: 4px solid var(--wep-faixa-borda);
	border-radius: 0;
	text-align: center;
}

.wep-atividade--destaque:hover {
	box-shadow: none;
}

.wep-atividade--destaque .wep-atividade__hora {
	font-size: 0.85em;
	letter-spacing: 0.06em;
	color: var(--wep-faixa-texto);
	opacity: 0.8;
}

.wep-atividade--destaque .wep-atividade__tema {
	font-size: 1.12em;
	letter-spacing: 0.01em;
	color: var(--wep-faixa-texto);
}

.wep-atividade--destaque .wep-atividade__subtema {
	color: var(--wep-faixa-texto);
	opacity: 0.8;
}

/*
 * Invertido de propósito: fundo na cor do texto e texto na cor do fundo.
 * Como esse par já foi escolhido para contrastar entre si, a etiqueta continua
 * legível com qualquer cor de faixa que o usuário configurar.
 */
.wep-atividade--destaque .wep-atividade__local {
	align-self: center;
	margin-top: 0.1rem;
	padding: 0.3rem 0.9rem;
	font-size: 0.92em;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--wep-faixa-fundo);
	background: var(--wep-faixa-texto);
	border: 0;
}

/*
 * Na faixa a empresa segue centralizada e um pouco maior, mas mantém a cor
 * primária da base — é o que a separa da etiqueta de local, que aqui usa as
 * cores invertidas da própria faixa.
 */
.wep-atividade--destaque .wep-atividade__empresa {
	align-self: center;
	margin-top: 0.15rem;
	padding: 0.32rem 0.95rem;
	font-size: 0.9em;
}

.wep-atividade--destaque .wep-atividade__apresentadores {
	flex: 1 1 100%;
	color: var(--wep-faixa-texto);
	border-top-color: var(--wep-faixa-borda);
}

/* Informações adicionais: texto corrido logo abaixo do local. */
.wep-atividade__info {
	margin: 0;
	font-size: 0.88em;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wep-texto-suave);
	overflow-wrap: anywhere;
}

.wep-atividade--destaque .wep-atividade__info {
	max-width: 46rem;
	margin-top: 0.15rem;
	color: var(--wep-faixa-texto);
	opacity: 0.9;
}

/**
 * Carrossel de fotos do local.
 *
 * O trilho é rolagem nativa com scroll-snap: as setas só empurram o scroll.
 * Sem índice de slide para sincronizar, o arrastar no toque vem de graça e
 * qualquer quantidade de fotos funciona.
 */
.wep-galeria {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	max-width: 46rem;
	margin-top: 0.65rem;
}

.wep-galeria__trilho {
	display: flex;
	gap: 0.5rem;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/*
	 * Sem `scroll-behavior: smooth` aqui de propósito: o laço infinito precisa
	 * reposicionar o scroll instantaneamente, e a suavidade das setas é aplicada
	 * pelo JS, que também respeita prefers-reduced-motion.
	 */
}

.wep-galeria__trilho::-webkit-scrollbar {
	display: none;
}

/* Uma foto só não é carrossel: fica centralizada e sem setas. */
.wep-galeria--unica .wep-galeria__trilho {
	justify-content: center;
	overflow-x: visible;
}

.wep-galeria__item {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.wep-programacao .wep-galeria__foto {
	display: block;
	/* Encolhe sozinho no celular sem precisar de media query. */
	width: min( var(--wep-foto, 200px), 62vw );
	padding: 0;
	overflow: hidden;
	line-height: 0;
	background: transparent;
	border: 1px solid var(--wep-faixa-borda);
	border-radius: calc(var(--wep-raio) * 0.5);
	cursor: pointer;
}

.wep-galeria__foto img {
	display: block;
	width: 100%;
	/* O quadrado é presentacional: o arquivo original nunca é recortado. */
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.wep-programacao .wep-galeria__foto:hover img {
	transform: scale(1.05);
}

.wep-programacao .wep-galeria__foto:focus-visible {
	outline: 2px solid var(--wep-faixa-texto);
	outline-offset: 2px;
}

.wep-programacao .wep-galeria__nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wep-faixa-texto);
	background: var(--wep-fundo);
	border: 1px solid var(--wep-faixa-borda);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.18s ease, opacity 0.18s ease;
}

.wep-programacao .wep-galeria__nav:hover {
	background: var(--wep-faixa-borda);
}

.wep-programacao .wep-galeria__nav:focus-visible {
	outline: 2px solid var(--wep-faixa-texto);
	outline-offset: 2px;
}

/* Todas as fotos cabem na largura: não há laço nem função para as setas. */
.wep-galeria.is-sem-rolagem .wep-galeria__nav {
	display: none;
}

/* Botão para a página externa da atividade. */
.wep-programacao .wep-atividade__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	align-self: flex-start;
	margin-top: 0.6rem;
	padding: 0.4rem 1rem;
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	color: var(--wep-primaria-texto);
	background: var(--wep-primaria);
	border: 0;
	border-radius: 999px;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.wep-programacao .wep-atividade__link:hover {
	color: var(--wep-primaria-texto);
	opacity: 0.88;
}

/* Na faixa o botão acompanha a paleta do destaque e fica centralizado. */
.wep-programacao .wep-atividade--destaque .wep-atividade__link {
	align-self: center;
	margin-top: 0.7rem;
	padding: 0.5rem 1.2rem;
	font-size: 0.88em;
	color: var(--wep-faixa-fundo);
	background: var(--wep-faixa-texto);
}

.wep-programacao .wep-atividade--destaque .wep-atividade__link:hover {
	color: var(--wep-faixa-fundo);
}

.wep-programacao .wep-atividade__link:focus-visible {
	outline: 2px solid var(--wep-faixa-texto);
	outline-offset: 2px;
}

.wep-atividade__link-icone {
	transition: transform 0.18s ease;
}

.wep-programacao .wep-atividade__link:hover .wep-atividade__link-icone {
	transform: translateX(3px);
}

.wep-atividade--destaque .wep-atividade__palestrantes {
	flex: 1 1 100%;
	border-top-color: var(--wep-faixa-borda);
}

.wep-programacao .wep-atividade--destaque .wep-palestrante {
	color: var(--wep-faixa-texto);
}

/* Local: etiqueta discreta com o lugar indicativo da atividade. */
.wep-atividade__local {
	display: inline-flex;
	align-self: flex-start;
	max-width: 100%;
	margin: 0;
	padding: 0.2rem 0.6rem;
	font-size: 0.78em;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wep-texto-suave);
	background: var(--wep-vazio);
	border: 1px solid var(--wep-borda);
	border-radius: 999px;
}

/**
 * Empresa promotora: selo preenchido na cor primária.
 *
 * Mais forte que a etiqueta de local de propósito — o local é indicativo, a
 * empresa é crédito de quem promove a atividade e precisa saltar no card.
 */
.wep-atividade__empresa {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.35em;
	max-width: 100%;
	margin: 0;
	padding: 0.25rem 0.7rem;
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: var(--wep-primaria-texto);
	background: var(--wep-primaria);
	border-radius: 999px;
}

/* Link externo de verdade: o tema costuma pintar `a` dentro do conteúdo. */
.wep-programacao .wep-atividade__empresa a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: inherit;
	background: transparent;
	text-decoration: none;
	box-shadow: none;
	border-radius: 999px;
}

.wep-programacao .wep-atividade__empresa a:hover .wep-atividade__empresa-nome {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wep-programacao .wep-atividade__empresa a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.wep-atividade__empresa-icone {
	font-size: 0.9em;
	line-height: 1;
	opacity: 0.85;
}

/* ------------------------------ Layout: salas nas colunas (padrão) */

.wep-programacao--salas-colunas .wep-grade thead th {
	position: sticky;
	top: 0;
	z-index: 3;
}

.wep-programacao--salas-colunas .wep-grade .wep-sala {
	width: var(--wep-coluna);
	padding: 1rem 1.15rem;
	text-align: center;
	vertical-align: middle;
	color: var(--wep-sala-texto);
	background: var(--wep-sala-fundo);
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

.wep-programacao--salas-colunas .wep-grade .wep-sala + .wep-sala {
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.wep-programacao--salas-colunas .wep-sala__nome {
	display: block;
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Coluna lateral de horários */
.wep-programacao--salas-colunas .wep-grade .wep-hora {
	position: sticky;
	left: 0;
	z-index: 2;
	width: var(--wep-lateral);
	padding: 0.9rem 0.7rem;
	text-align: center;
	vertical-align: top;
	color: var(--wep-cabecalho-texto);
	background: var(--wep-cabecalho-fundo);
	border-right: 1px solid var(--wep-borda);
}

.wep-programacao--salas-colunas .wep-hora::after {
	content: "";
	position: absolute;
	top: 0;
	right: -7px;
	width: 7px;
	height: 100%;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
	pointer-events: none;
}

.wep-programacao--salas-colunas .wep-hora__inicio {
	display: block;
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.wep-programacao--salas-colunas .wep-hora__fim {
	display: block;
	font-size: 0.82em;
	font-weight: 400;
	opacity: 0.7;
}

.wep-programacao--salas-colunas .wep-hora__fim::before {
	content: "– ";
}

.wep-programacao--salas-colunas .wep-grade .wep-celula + .wep-celula,
.wep-programacao--salas-colunas .wep-grade .wep-hora + .wep-celula {
	border-left: 1px solid var(--wep-borda);
}

/* ------------------------------ Layout: salas nas linhas */

.wep-programacao--salas-linhas .wep-grade thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	padding: 0.8rem 0.85rem;
	font-size: 0.8em;
	font-weight: 600;
	text-align: center;
	color: var(--wep-cabecalho-texto);
	background: var(--wep-cabecalho-fundo);
	white-space: nowrap;
}

.wep-programacao--salas-linhas .wep-grade .wep-hora {
	width: var(--wep-coluna);
}

.wep-programacao--salas-linhas .wep-grade .wep-hora + .wep-hora {
	border-left: 1px solid var(--wep-borda);
}

.wep-programacao--salas-linhas .wep-hora__inicio {
	display: block;
	font-size: 1.15em;
	font-weight: 700;
}

.wep-programacao--salas-linhas .wep-hora__fim {
	display: block;
	font-size: 0.9em;
	font-weight: 400;
	opacity: 0.65;
}

.wep-programacao--salas-linhas .wep-hora__fim::before {
	content: "– ";
}

/* Cabeçalho desligado nas configurações: some da vista, mas segura as colunas. */
.wep-programacao--salas-linhas .wep-grade--cabecalho-oculto thead th {
	height: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
	border-bottom: 0;
	overflow: hidden;
}

.wep-programacao--salas-linhas .wep-grade--cabecalho-oculto thead th > * {
	display: none;
}

.wep-programacao--salas-linhas .wep-grade .wep-sala {
	position: sticky;
	left: 0;
	z-index: 2;
	width: var(--wep-lateral);
	padding: 1rem 0.6rem;
	text-align: center;
	vertical-align: middle;
	color: var(--wep-sala-texto);
	background: var(--wep-sala-fundo);
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

.wep-programacao--salas-linhas .wep-sala::after {
	content: "";
	position: absolute;
	top: 0;
	right: -7px;
	width: 7px;
	height: 100%;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.12), transparent);
	pointer-events: none;
}

.wep-programacao--salas-linhas .wep-sala__nome {
	display: inline-block;
	max-height: 100%;
	overflow: hidden;
	writing-mode: var(--wep-sala-escrita, horizontal-tb);
	transform: rotate(var(--wep-sala-giro, 0deg));
	font-size: 0.92em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wep-programacao--salas-linhas .wep-grade .wep-celula {
	border-left: 1px solid var(--wep-borda);
}

/* A linha "Geral" agrupa os destaques quando as salas são linhas. */
.wep-programacao--salas-linhas .wep-grade .wep-linha--destaque .wep-sala {
	color: var(--wep-faixa-texto);
	background: var(--wep-faixa-fundo);
	border-bottom-color: var(--wep-faixa-borda);
}

/* ---------------------------------------------------------------- Atividade */

.wep-atividade {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0.3rem;
	padding: 0.7rem 0.75rem;
	background: var(--wep-card-fundo);
	border: 1px solid var(--wep-borda);
	border-left: 3px solid var(--wep-primaria);
	border-radius: calc(var(--wep-raio) * 0.55);
	overflow-wrap: anywhere;
	transition: box-shadow 0.18s ease;
}

.wep-atividade:hover {
	box-shadow: 0 3px 14px rgba(15, 23, 42, 0.09);
}

.wep-atividade__hora {
	margin: 0;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wep-destaque);
}

/**
 * Etiqueta da sala dentro do card.
 *
 * Visível por padrão de propósito: só some no desktop, onde o cabeçalho fixo da
 * coluna já mostra a sala. Assim, se a media query não valer por qualquer motivo,
 * o erro é mostrar a sala a mais — nunca de menos.
 */
.wep-atividade__sala {
	display: inline-flex;
	align-self: flex-start;
	max-width: 100%;
	margin: 0;
	padding: 0.3rem 0.7rem;
	font-size: 0.78em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wep-sala-texto);
	background: var(--wep-sala-fundo);
	border-radius: 999px;
}

/* "Sala:" só faz sentido no empilhado, onde não há cabeçalho de coluna. */
.wep-atividade__sala-rotulo {
	margin-right: 0.35em;
	font-weight: 500;
	opacity: 0.75;
}

@media (min-width: 861px) {
	.wep-atividade__sala-rotulo {
		display: none;
	}
}

@media (min-width: 861px) {
	.wep-programacao--salas-colunas .wep-atividade__sala {
		display: none;
	}
}

/* Aqui a sala está no trilho lateral e, no empilhado, na faixa da linha. */
.wep-programacao--salas-linhas .wep-atividade__sala {
	display: none;
}

/* Fora da grade não existe cabeçalho de sala: a etiqueta sempre aparece. */
.wep-programacao .wep-sem-horario .wep-atividade__sala {
	display: inline-flex;
}

.wep-atividade__tema {
	margin: 0;
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wep-texto);
}

.wep-atividade__subtema {
	margin: 0;
	font-size: 0.85em;
	line-height: 1.35;
	color: var(--wep-texto-suave);
}

/**
 * Descrição da atividade (editor principal).
 *
 * Aceita a formatação do editor, então as margens dos filhos são zeradas nas
 * pontas para o bloco encostar certinho nos vizinhos do card.
 */
.wep-atividade__conteudo {
	margin: 0.35rem 0 0;
	font-size: 0.85em;
	line-height: 1.45;
	color: var(--wep-texto);
	overflow-wrap: anywhere;
}

.wep-atividade__conteudo > :first-child {
	margin-top: 0;
}

.wep-atividade__conteudo > :last-child {
	margin-bottom: 0;
}

.wep-atividade__conteudo p {
	margin: 0 0 0.5em;
}

.wep-atividade__conteudo ul,
.wep-atividade__conteudo ol {
	margin: 0 0 0.5em;
	padding-left: 1.1em;
}

.wep-atividade__conteudo li {
	margin: 0 0 0.15em;
}

.wep-atividade__conteudo a {
	color: var(--wep-primaria);
}

.wep-atividade__conteudo img {
	max-width: 100%;
	height: auto;
}

.wep-atividade--destaque .wep-atividade__conteudo {
	color: var(--wep-faixa-texto);
}

/* Na faixa a cor vem do tema do destaque; o link acompanha em vez de brigar. */
.wep-atividade--destaque .wep-atividade__conteudo a {
	color: inherit;
}

/* ---------------------------------------------------------------- Palestrantes */

/**
 * Apresentadores: texto livre de quem apresenta sem estar no cadastro.
 *
 * Divide o rodapé com a lista de palestrantes — quando os dois existem, só a
 * borda de cima separa o rodapé do miolo do card.
 */
.wep-atividade__apresentadores {
	margin: 0.2rem 0 0;
	padding: 0.45rem 0 0;
	font-size: 0.82em;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wep-texto);
	border-top: 1px solid var(--wep-borda);
	overflow-wrap: anywhere;
}

.wep-atividade__apresentadores + .wep-atividade__palestrantes {
	margin-top: 0;
	padding-top: 0.25rem;
	border-top: 0;
}

.wep-atividade__palestrantes {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin: 0.2rem 0 0;
	padding: 0.45rem 0 0;
	border-top: 1px solid var(--wep-borda);
}

.wep-programacao .wep-palestrante {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.25rem 0.3rem;
	font-size: 1em;
	text-align: left;
	color: var(--wep-texto);
	background: transparent;
	border: 0;
	border-radius: calc(var(--wep-raio) * 0.45);
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.wep-programacao button.wep-palestrante:hover {
	color: var(--wep-primaria);
	background: var(--wep-card-hover);
}

.wep-programacao button.wep-palestrante:hover .wep-palestrante__avatar {
	border-color: var(--wep-primaria);
}

.wep-programacao button.wep-palestrante:hover .wep-palestrante__nome {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wep-programacao button.wep-palestrante:focus-visible {
	outline: 2px solid var(--wep-primaria);
	outline-offset: 1px;
}

/**
 * Rótulo do papel ("Moderador", "Debatedores") abrindo cada grupo.
 *
 * Vive na mesma lista dos nomes para o rodapé continuar sendo um bloco só,
 * com uma borda de cima apenas. Palestrantes não levam rótulo.
 */
.wep-atividade__papel {
	margin: 0.4rem 0 0.05rem;
	padding: 0 0.3rem;
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wep-texto-suave);
}

.wep-atividade__palestrantes > .wep-atividade__papel:first-child {
	margin-top: 0;
}

.wep-atividade--destaque .wep-atividade__papel {
	color: var(--wep-faixa-texto);
	opacity: 0.72;
}

/* Cadastro só com o nome: some o afeto de clique, porque não há popup. */
.wep-programacao .wep-palestrante--simples {
	cursor: default;
}

.wep-palestrante__avatar {
	display: block;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	overflow: hidden;
	border: 1px solid var(--wep-borda);
	border-radius: 50%;
	background: var(--wep-cabecalho-fundo);
	transition: border-color 0.16s ease;
}

.wep-palestrante__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Sem foto: silhueta de pessoa recortada pelo contorno redondo do avatar. */
.wep-palestrante__icone {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--wep-texto-suave);
	fill: currentColor;
	opacity: 0.55;
}

.wep-atividade--destaque .wep-palestrante__icone {
	color: var(--wep-faixa-texto);
	opacity: 0.5;
}

.wep-palestrante__nome {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.82em;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.wep-programacao--sem-fotos .wep-palestrante__nome {
	font-weight: 500;
}

/* ------------------------------------------------------------- Subatividades */

/**
 * Mesa redonda com apresentações dentro: as filhas não ganham coluna própria
 * na grade (o horário delas está contido no da mãe e fatiaria a tabela toda),
 * então viram uma lista dentro do card, cada uma com sua marca de tempo.
 */
.wep-subatividades {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0.5rem 0 0;
	padding: 0.5rem;
	background: var(--wep-card-hover);
	border-radius: calc(var(--wep-raio) * 0.5);
}

.wep-subatividade {
	display: flex;
	flex-wrap: wrap;
	gap: 0.1rem 0.5rem;
	padding-left: 0.5rem;
	border-left: 2px solid var(--wep-primaria);
}

/* A hora fica ao lado quando cabe e sobe para a própria linha quando não cabe. */
.wep-subatividade__hora {
	flex: 0 0 auto;
	margin: 0;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1.5;
	color: var(--wep-primaria);
	white-space: nowrap;
}

.wep-subatividade__corpo {
	flex: 1 1 8rem;
	min-width: 0;
}

.wep-subatividade__tema {
	margin: 0;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wep-texto);
	overflow-wrap: anywhere;
}

.wep-subatividade__subtema {
	margin: 0.1rem 0 0;
	font-size: 0.78em;
	line-height: 1.35;
	color: var(--wep-texto-suave);
}

.wep-subatividade__conteudo {
	margin: 0.2rem 0 0;
	font-size: 0.78em;
	line-height: 1.45;
	color: var(--wep-texto);
	overflow-wrap: anywhere;
}

.wep-subatividade__conteudo > :first-child {
	margin-top: 0;
}

.wep-subatividade__conteudo > :last-child {
	margin-bottom: 0;
}

.wep-subatividade__conteudo p {
	margin: 0 0 0.5em;
}

.wep-subatividade__conteudo ul,
.wep-subatividade__conteudo ol {
	margin: 0 0 0.5em;
	padding-left: 1.1em;
}

.wep-subatividade__conteudo a {
	color: var(--wep-primaria);
}

/* Dentro da subatividade o rodapé de participantes dispensa a borda de cima:
   quem separa os blocos ali é a barra lateral, não uma linha. */
.wep-subatividade .wep-atividade__palestrantes {
	margin-top: 0.15rem;
	padding-top: 0.2rem;
	border-top: 0;
}

.wep-subatividade .wep-atividade__papel {
	margin-top: 0.25rem;
}

.wep-atividade--destaque .wep-subatividades {
	background: transparent;
	border: 1px solid var(--wep-faixa-borda);
}

.wep-atividade--destaque .wep-subatividade {
	border-left-color: var(--wep-faixa-borda);
}

.wep-atividade--destaque .wep-subatividade__hora,
.wep-atividade--destaque .wep-subatividade__tema,
.wep-atividade--destaque .wep-subatividade__conteudo {
	color: var(--wep-faixa-texto);
}

.wep-atividade--destaque .wep-subatividade__subtema {
	color: var(--wep-faixa-texto);
	opacity: 0.78;
}

/* ---------------------------------------------------------------- Sem horário */

.wep-sem-horario {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding: 0.85rem;
	background: var(--wep-vazio);
	border: 1px dashed var(--wep-borda);
	border-radius: var(--wep-raio);
}

.wep-sem-horario__rotulo {
	flex: 0 0 auto;
	padding-top: 0.4rem;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wep-texto-suave);
}

.wep-sem-horario__itens {
	display: grid;
	flex: 1 1 18rem;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}


/* ---------------------------------------------------------------- Modal */

.wep-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	font-size: var(--wep-fonte);
	line-height: 1.45;
}

.wep-modal[hidden] {
	display: none;
}

.wep-modal *,
.wep-modal *::before,
.wep-modal *::after {
	box-sizing: border-box;
}

.wep-modal__fundo {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.62);
	backdrop-filter: blur(2px);
	animation: wep-fade 0.18s ease;
}

.wep-modal__caixa {
	position: relative;
	z-index: 1;
	width: min(46rem, 100%);
	max-height: min(88vh, 46rem);
	overflow-y: auto;
	padding: 1.75rem;
	color: var(--wep-texto);
	background: var(--wep-fundo);
	border-radius: var(--wep-raio);
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
	animation: wep-sobe 0.22s ease;
}

.wep-modal .wep-modal__fechar {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	text-shadow: none;
	color: var(--wep-texto-suave);
	background: transparent;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wep-modal .wep-modal__fechar:hover {
	color: var(--wep-texto);
	background: var(--wep-cabecalho-fundo);
}

.wep-modal .wep-modal__fechar:focus-visible {
	outline: 2px solid var(--wep-primaria);
	outline-offset: 2px;
}

.wep-modal__conteudo {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;
}

/**
 * Só a largura é padronizada: a altura acompanha a proporção original da foto.
 * Sem `aspect-ratio` e sem `object-fit: cover`, nada é cortado — as fotos dos
 * palestrantes chegam em enquadramentos variados.
 */
.wep-modal__foto {
	flex: 0 0 11rem;
	width: 11rem;
	overflow: hidden;
	border-radius: calc(var(--wep-raio) * 0.8);
	background: var(--wep-cabecalho-fundo);
}

.wep-modal__foto img {
	display: block;
	width: 100%;
	height: auto;
}

.wep-modal__foto.is-vazia {
	display: none;
}

/* Modo amplo: foto de local, panorâmica, ocupa a largura acima do texto. */
.wep-modal__caixa.is-amplo .wep-modal__conteudo {
	flex-direction: column;
	gap: 1.1rem;
}

.wep-modal__caixa.is-amplo .wep-modal__foto {
	flex: 0 0 auto;
	width: 100%;
}

.wep-modal__caixa.is-amplo .wep-modal__foto img {
	height: auto;
	max-height: 60vh;
	object-fit: contain;
}

.wep-modal__texto {
	flex: 1 1 16rem;
	min-width: 0;
}

.wep-modal__nome {
	margin: 0 0 0.2rem;
	padding-right: 2rem;
	font-size: 1.4em;
	line-height: 1.25;
	color: var(--wep-texto);
}

.wep-modal__cargo {
	margin: 0 0 1rem;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--wep-primaria);
}

.wep-modal__cargo:empty {
	display: none;
}

.wep-modal__curriculo {
	font-size: 0.95em;
	line-height: 1.6;
	color: var(--wep-texto);
}

.wep-modal__curriculo p:first-child {
	margin-top: 0;
}

.wep-modal__curriculo p:last-child {
	margin-bottom: 0;
}

.wep-modal__curriculo img {
	max-width: 100%;
	height: auto;
}

@keyframes wep-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes wep-sobe {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

body.wep-modal-aberto {
	overflow: hidden;
}

/* ---------------------------------------------------------------- Responsivo */

/* Sub-abas de sala: existem só no empilhado do mobile. */
.wep-abas--salas {
	display: none;
}

@media (max-width: 860px) {
	.wep-abas--salas {
		display: flex;
		margin-bottom: 0.9rem;
	}

	.wep-programacao .wep-abas--salas .wep-aba {
		padding: 0.4rem 0.7rem;
		font-size: 0.85em;
	}

	/*
	 * Repete os papéis para vencer o `display: block` que o bloco abaixo aplica
	 * em `.wep-grade .wep-celula` (0,3,0) e em `.wep-grade tr` (0,2,1).
	 */
	.wep-programacao .wep-grade .wep-celula.wep-fora-da-sala,
	.wep-programacao .wep-grade tr.wep-fora-da-sala {
		display: none;
	}

	/* A tabela vira blocos empilhados. */
	.wep-grade-wrap {
		overflow-x: visible;
		border: 0;
		border-radius: 0;
	}

	/*
	 * As três últimas linhas repetem os papéis em 3 classes: sem elas, as
	 * larguras fixas de `.wep-grade .wep-sala/.wep-hora/.wep-celula` (0,3,0)
	 * venceriam este `width: auto` (0,2,1) e a tabela não empilharia direito.
	 */
	.wep-programacao .wep-grade,
	.wep-programacao .wep-grade thead,
	.wep-programacao .wep-grade tbody,
	.wep-programacao .wep-grade tr,
	.wep-programacao .wep-grade th,
	.wep-programacao .wep-grade td,
	.wep-programacao .wep-grade .wep-sala,
	.wep-programacao .wep-grade .wep-hora,
	.wep-programacao .wep-grade .wep-celula {
		display: block;
		width: auto;
		min-width: 0;
		max-width: none;
	}

	.wep-programacao .wep-grade thead {
		display: none;
	}

	.wep-programacao .wep-grade tr.wep-linha {
		margin-bottom: 1rem;
		border: 1px solid var(--wep-borda);
		border-radius: var(--wep-raio);
		overflow: hidden;
	}

	.wep-programacao .wep-grade tr.wep-linha:last-child {
		margin-bottom: 0;
	}

	/*
	 * Sem `height: auto` aqui a célula viraria um bloco de 1px de verdade — e a
	 * linha tem `overflow: hidden`, o que cortaria os cards no empilhado.
	 */
	.wep-programacao .wep-grade .wep-celula {
		height: auto;
		padding: 0.6rem;
		border-left: 0;
		border-bottom: 0;
	}

	.wep-celula__conteudo {
		height: auto;
	}

	.wep-programacao .wep-grade .wep-celula + .wep-celula {
		padding-top: 0;
	}

	.wep-programacao .wep-grade .wep-celula--vazia {
		display: none;
	}

	.wep-atividade {
		height: auto;
	}

	/* Salas nas colunas: cada bloco é uma faixa de horário, em ordem crescente. */
	.wep-programacao--salas-colunas .wep-grade .wep-hora {
		position: static;
		display: flex;
		align-items: baseline;
		gap: 0.4rem;
		padding: 0.75rem 0.9rem;
		text-align: left;
		border-right: 0;
		border-bottom: 0;
	}

	.wep-programacao--salas-colunas .wep-hora::after {
		display: none;
	}

	.wep-programacao--salas-colunas .wep-hora__inicio,
	.wep-programacao--salas-colunas .wep-hora__fim {
		display: inline;
		font-size: 1.05em;
	}

	/* Faixa em destaque: o bloco inteiro assume a cor, sem competir com os cards. */
	.wep-programacao .wep-grade tr.wep-linha--destaque {
		border-color: var(--wep-faixa-borda);
		background: var(--wep-faixa-fundo);
	}

	.wep-programacao .wep-grade .wep-celula--destaque {
		background: transparent;
	}

	.wep-atividade--destaque {
		padding: 0.5rem 0.6rem 0.5rem 0.9rem;
	}

	.wep-atividade--destaque .wep-atividade__tema {
		font-size: 1.05em;
	}

	.wep-dia__titulo {
		font-size: 1.1em;
		gap: 0.7rem;
	}

	/* Salas nas linhas: cada bloco é uma sala. */
	.wep-programacao--salas-linhas .wep-grade .wep-sala {
		position: static;
		padding: 0.75rem 0.9rem;
		text-align: left;
		border-bottom: 0;
	}

	.wep-programacao--salas-linhas .wep-sala::after {
		display: none;
	}

	.wep-programacao--salas-linhas .wep-sala__nome {
		writing-mode: horizontal-tb;
		transform: none;
		max-height: none;
		font-size: 1em;
		letter-spacing: 0.05em;
	}

	.wep-modal__caixa {
		padding: 1.25rem;
	}

	.wep-modal__foto {
		flex: 0 0 8rem;
		width: 8rem;
	}
}

@media (max-width: 520px) {
	.wep-abas {
		gap: 0.4rem;
	}

	.wep-programacao .wep-aba {
		flex: 1 1 auto;
		min-width: 4.5rem;
		padding: 0.5rem 0.6rem;
	}

	.wep-modal {
		padding: 0.75rem;
	}

	.wep-modal__conteudo {
		gap: 1rem;
	}

	.wep-modal__foto {
		flex: 0 0 6.5rem;
		width: 6.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wep-programacao *,
	.wep-modal * {
		animation: none !important;
		transition: none !important;
	}
}