/*
 * UENP Eventos — sobreposição de estilo do The Events Calendar.
 *
 * Carregado DEPOIS dos CSS do plugin, por dependência explícita
 * (ver uenp_enqueue_tec_styles() em inc/events.php).
 *
 * Estratégia: redefinir os custom properties `--tec-*` que o plugin já usa,
 * em vez de brigar por especificidade. Só há regras de seletor onde o plugin
 * não expõe uma variável.
 *
 * Nada aqui remove elementos do plugin: a barra de filtros, a navegação entre
 * páginas e o seletor de visualização continuam funcionando por AJAX.
 */

/* ===============================================================
 * 1. Tokens do TEC → tokens da UENP
 * =============================================================== */
.tribe-common,
.tribe-events,
#tribe-events-content,
.tribe-events-view {
	/* Cores de marca */
	--tec-color-accent-primary: var(--uenp-blue-700);
	--tec-color-accent-primary-hover: var(--uenp-blue-800);
	--tec-color-accent-primary-active: var(--uenp-blue-900);
	--tec-color-accent-primary-background: var(--uenp-blue-50);
	--tec-color-accent-secondary: var(--uenp-gold-600);

	/* Texto */
	--tec-color-text-primary: var(--uenp-neutral-900);
	--tec-color-text-primary-light: var(--uenp-neutral-700);
	--tec-color-text-secondary: var(--uenp-neutral-600);
	--tec-color-text-disabled: var(--uenp-neutral-500);
	--tec-color-text-events-title: var(--uenp-neutral-900);
	--tec-color-text-event-date: var(--uenp-neutral-600);

	/* Fundos e bordas */
	--tec-color-background: var(--uenp-neutral-0);
	--tec-color-background-secondary: var(--uenp-neutral-50);
	--tec-color-border-default: var(--uenp-color-border);
	--tec-color-border-secondary: var(--uenp-neutral-100);
	--tec-color-border-active: var(--uenp-blue-600);

	/* Tipografia */
	--tec-font-family-sans-serif: var(--uenp-font-body);
	--tec-font-weight-regular: 400;
	--tec-font-weight-medium: 500;
	--tec-font-weight-bold: 600;

	/* Botões */
	--tec-color-button-primary: var(--uenp-blue-700);
	--tec-color-button-primary-hover: var(--uenp-blue-800);
	--tec-color-button-primary-active: var(--uenp-blue-900);
	--tec-color-button-secondary: var(--uenp-neutral-100);
	--tec-color-button-secondary-hover: var(--uenp-neutral-200);

	/* Links */
	--tec-color-link-primary: var(--uenp-color-link);
	--tec-color-link-accent: var(--uenp-blue-700);
	--tec-color-link-accent-hover: var(--uenp-blue-800);

	/* Ícones */
	--tec-color-icon-primary: var(--uenp-neutral-600);
	--tec-color-icon-active: var(--uenp-blue-700);
	--tec-color-icon-focus: var(--uenp-blue-700);
}

/* ===============================================================
 * 2. Contêiner das views
 * =============================================================== */
.tribe-events-view.uenp-agenda {
	max-width: var(--uenp-container-wide);
	margin-inline: auto;
	padding-inline: var(--uenp-gutter);
	padding-block: var(--uenp-section-y-sm);
	background: transparent;
}

/* O plugin usa uma pilha de utilitários de espaçamento; normalizamos o topo. */
.tribe-events .tribe-events-l-container {
	padding-top: 0;
	min-height: 0;
}

/* ===============================================================
 * 3. Barra de filtros (busca + data + seletor de visualização)
 *    O comportamento é do plugin; só a aparência muda.
 * =============================================================== */
.tribe-events-header {
	background: var(--uenp-neutral-0);
	border: 1px solid var(--uenp-color-border);
	border-radius: var(--uenp-radius-lg);
	padding: var(--uenp-space-4);
	box-shadow: var(--uenp-shadow-xs);
	margin-bottom: var(--uenp-space-8);
}

.tribe-events-c-events-bar {
	margin-bottom: 0;
}

.tribe-events-c-search__input,
.tribe-events-c-top-bar__datepicker-button,
.tribe-common .tribe-common-form-control-text__input {
	min-height: 44px;
	border: 1px solid var(--uenp-color-border-input);
	border-radius: var(--uenp-radius-md);
	font-family: var(--uenp-font-body);
	font-size: var(--uenp-text-sm);
	background-color: var(--uenp-neutral-0);
	color: var(--uenp-color-text);
}
/*
 * Estado de foco do campo de busca do plugin.
 *
 * A versão anterior fazia `outline: none` e trocava o anel por um halo
 * #dee7fa sobre painel branco — 1,24:1, praticamente invisível. Agora o
 * realce decorativo fica no `border`, e o anel de foco de teclado é um
 * outline real, com contraste suficiente (WCAG 2.4.11).
 */
.tribe-common .tribe-common-form-control-text__input:focus {
	border-color: var(--uenp-blue-600);
	box-shadow: 0 0 0 3px var(--uenp-blue-100);
}
.tribe-common .tribe-common-form-control-text__input:focus-visible {
	outline: 3px solid var(--uenp-color-focus);
	outline-offset: 1px;
}

/* Botões do plugin herdam a forma dos botões do tema */
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn,
.tribe-events-c-search__button {
	min-height: 44px;
	padding: var(--uenp-space-3) var(--uenp-space-6);
	background-color: var(--uenp-blue-700);
	border: 1px solid var(--uenp-blue-700);
	border-radius: var(--uenp-radius-md);
	font-family: var(--uenp-font-body);
	font-size: var(--uenp-text-sm);
	font-weight: var(--uenp-weight-semibold);
	color: var(--uenp-neutral-0);
	transition:
		background-color var(--uenp-duration) var(--uenp-ease),
		border-color var(--uenp-duration) var(--uenp-ease);
}
.tribe-common .tribe-common-c-btn:hover,
.tribe-common a.tribe-common-c-btn:hover,
.tribe-events-c-search__button:hover {
	background-color: var(--uenp-blue-800);
	border-color: var(--uenp-blue-800);
	color: var(--uenp-neutral-0);
}

/* Botão-borda do seletor de visualização */
.tribe-events-c-view-selector__button {
	min-height: 44px;
	border: 1px solid var(--uenp-color-border-strong);
	border-radius: var(--uenp-radius-md);
	background: var(--uenp-neutral-0);
	color: var(--uenp-neutral-700);
	font-weight: var(--uenp-weight-semibold);
}
.tribe-events-c-view-selector__button:hover {
	border-color: var(--uenp-blue-300);
	color: var(--uenp-blue-800);
	background: var(--uenp-blue-50);
}
.tribe-events-c-view-selector__list-item-link--active,
.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
	color: var(--uenp-blue-700);
	font-weight: var(--uenp-weight-semibold);
}

/* Foco visível em toda a UI do plugin */
.tribe-common a:focus-visible,
.tribe-common button:focus-visible,
.tribe-common input:focus-visible,
.tribe-common select:focus-visible,
#tribe-events-content a:focus-visible,
#tribe-events-content button:focus-visible {
	outline: 3px solid var(--uenp-color-focus);
	outline-offset: 2px;
	border-radius: var(--uenp-radius-xs);
}

/* ===============================================================
 * 4. Listagem
 *    O item da lista é substituído pelo card do tema
 *    (tribe/events/v2/list/event.php); aqui só limpamos a moldura
 *    que o plugin desenharia em volta.
 * =============================================================== */
.tribe-events-calendar-list__event-row.uenp-agenda__row {
	display: block;
	margin: 0 0 var(--uenp-space-5);
	padding: 0;
	border: 0;
}
.tribe-events-calendar-list__event-row.uenp-agenda__row::before,
.tribe-events-calendar-list__event-row.uenp-agenda__row::after {
	content: none;
}

.tribe-events-calendar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: var(--uenp-space-5);
}
.tribe-events-calendar-list .uenp-agenda__row { margin-bottom: 0; }

/* Cabeçalho de separação por mês/dia */
.tribe-events-calendar-list__month-separator {
	grid-column: 1 / -1;
	margin: var(--uenp-space-6) 0 var(--uenp-space-2);
	padding-bottom: var(--uenp-space-3);
	border-bottom: 1px solid var(--uenp-color-border);
}
.tribe-events-calendar-list__month-separator-text {
	font-family: var(--uenp-font-body);
	font-size: var(--uenp-text-label);
	font-weight: var(--uenp-weight-semibold);
	letter-spacing: var(--uenp-tracking-wide);
	text-transform: uppercase;
	color: var(--uenp-blue-700);
	background: transparent;
	padding: 0;
}
.tribe-events-calendar-list__month-separator::after { content: none; }

/* ===============================================================
 * 5. Calendário (visão de mês)
 * =============================================================== */
.tribe-events-calendar-month__header-column-title {
	font-family: var(--uenp-font-body);
	font-size: var(--uenp-text-label);
	font-weight: var(--uenp-weight-semibold);
	letter-spacing: var(--uenp-tracking-wide);
	text-transform: uppercase;
	color: var(--uenp-neutral-600);
}
.tribe-events-calendar-month__day {
	border-color: var(--uenp-color-border);
}
.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum {
	background-color: var(--uenp-blue-700);
	color: var(--uenp-neutral-0);
	border-radius: var(--uenp-radius-sm);
}
.tribe-events-calendar-month__calendar-event-title-link {
	font-family: var(--uenp-font-body);
	font-weight: var(--uenp-weight-semibold);
	color: var(--uenp-neutral-800);
}
.tribe-events-calendar-month__calendar-event-title-link:hover {
	color: var(--uenp-blue-700);
}
.tribe-events-calendar-month__multiday-event-bar-inner {
	background-color: var(--uenp-blue-100);
	border-color: var(--uenp-blue-300);
}

/* ===============================================================
 * 6. Navegação entre páginas da view
 * =============================================================== */
.tribe-events-c-nav__list-item-link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: var(--uenp-space-2);
	padding: var(--uenp-space-2) var(--uenp-space-4);
	border: 1px solid var(--uenp-color-border);
	border-radius: var(--uenp-radius-md);
	color: var(--uenp-neutral-700);
	font-weight: var(--uenp-weight-semibold);
	background: var(--uenp-neutral-0);
}
.tribe-events-c-nav__list-item-link:hover {
	border-color: var(--uenp-blue-300);
	background: var(--uenp-blue-50);
	color: var(--uenp-blue-800);
}

/* ===============================================================
 * 7. Página do evento
 * =============================================================== */
#tribe-events-content.uenp-event {
	max-width: var(--uenp-container-wide);
	margin-inline: auto;
	padding-inline: var(--uenp-gutter);
	padding-block: var(--uenp-section-y-sm);
}

.uenp-event__back {
	margin: 0 0 var(--uenp-space-6);
	font-size: var(--uenp-text-sm);
}
.uenp-event__back a {
	display: inline-flex;
	align-items: center;
	gap: var(--uenp-space-2);
	color: var(--uenp-neutral-600);
	text-decoration: none;
	font-weight: var(--uenp-weight-semibold);
	transition: color var(--uenp-duration) var(--uenp-ease), gap var(--uenp-duration) var(--uenp-ease);
}
.uenp-event__back a:hover { color: var(--uenp-blue-700); gap: var(--uenp-space-3); }

/* --- Capa --- */
.uenp-event__hero {
	position: relative;
	border-radius: var(--uenp-radius-xl);
	overflow: hidden;
	margin-bottom: var(--uenp-space-10);
	background: linear-gradient(160deg, var(--uenp-blue-800) 0%, var(--uenp-blue-950) 100%);
	color: var(--uenp-neutral-0);
	isolation: isolate;
}
.uenp-event__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 80% 90% at 85% 8%, #000 0%, transparent 68%);
	-webkit-mask-image: radial-gradient(ellipse 80% 90% at 85% 8%, #000 0%, transparent 68%);
	pointer-events: none;
}
.uenp-event__hero-body {
	position: relative;
	z-index: 1;
	padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
}
.uenp-event__hero-media { position: relative; z-index: 1; }
.uenp-event__hero-media img { width: 100%; height: auto; object-fit: cover; max-height: 420px; }

.uenp-event__eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uenp-space-2);
	margin-bottom: var(--uenp-space-4);
}
/* Os selos no fundo escuro precisam de contraste próprio */
.uenp-event__hero .uenp-status--upcoming { background: rgba(255,255,255,.15); color: #dbe7fb; }
.uenp-event__hero .uenp-status--ongoing  { background: rgba(255,255,255,.15); color: #b6ebcd; }
.uenp-event__hero .uenp-status--soon     { background: rgba(255,255,255,.15); color: #f5dcae; }
.uenp-event__hero .uenp-status--past     { background: rgba(255,255,255,.12); color: #d3dae6; }
.uenp-event__hero .uenp-badge--outline   { border-color: rgba(255,255,255,.4); color: #dbe7fb; }

h1.tribe-events-single-event-title {
	font-family: var(--uenp-font-display);
	font-size: var(--uenp-text-h1);
	font-weight: var(--uenp-weight-bold);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--uenp-neutral-0);
	margin: 0 0 var(--uenp-space-6);
	max-width: 22ch;
}

.uenp-event__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: var(--uenp-space-5);
	margin: 0 0 var(--uenp-space-8);
	padding: var(--uenp-space-5) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	list-style: none;
}
.uenp-event__fact-label {
	display: block;
	margin-bottom: var(--uenp-space-1);
	font-size: var(--uenp-text-label);
	font-weight: var(--uenp-weight-semibold);
	letter-spacing: var(--uenp-tracking-wide);
	text-transform: uppercase;
	color: var(--uenp-blue-200);
}
.uenp-event__fact-value {
	display: block;
	font-size: var(--uenp-text-body);
	font-weight: var(--uenp-weight-medium);
	color: var(--uenp-neutral-0);
	line-height: var(--uenp-leading-snug);
}

.uenp-event__actions { display: flex; flex-wrap: wrap; gap: var(--uenp-space-3); }
.uenp-event__hero .uenp-btn--primary {
	background: var(--uenp-neutral-0);
	border-color: var(--uenp-neutral-0);
	color: var(--uenp-blue-800);
}
.uenp-event__hero .uenp-btn--primary:hover { background: var(--uenp-blue-50); color: var(--uenp-blue-900); }
.uenp-event__hero .uenp-btn--secondary {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--uenp-neutral-0);
}
.uenp-event__hero .uenp-btn--secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--uenp-neutral-0); }
.uenp-event__hero :focus-visible { outline-color: var(--uenp-color-focus-inverse); }

/* --- Corpo --- */
.uenp-event__layout { display: grid; gap: var(--uenp-space-10); align-items: start; }
@media (min-width: 1000px) {
	.uenp-event__layout { grid-template-columns: minmax(0, 1fr) 320px; }
	.uenp-event__aside { position: sticky; top: calc(var(--uenp-header-h-compact) + var(--uenp-space-6)); }
}
.uenp-event__main { min-width: 0; }

.uenp-event__venue-name { font-weight: var(--uenp-weight-semibold); margin: 0 0 var(--uenp-space-2); }
.uenp-event__venue-address {
	font-style: normal;
	color: var(--uenp-color-text-secondary);
	font-size: var(--uenp-text-sm);
	line-height: var(--uenp-leading-relaxed);
	margin-bottom: var(--uenp-space-4);
}
.uenp-event__venue-phone { margin-bottom: var(--uenp-space-4); font-size: var(--uenp-text-sm); }
.uenp-event__aside .uenp-btn--block + .uenp-btn--block { margin-top: var(--uenp-space-2); }

/* Bloco de meta nativo do plugin — mantido para compatibilidade */
.uenp-event__meta { margin-top: var(--uenp-space-10); }
.tribe-events-single-section {
	background: var(--uenp-neutral-50);
	border: 1px solid var(--uenp-color-border);
	border-radius: var(--uenp-radius-lg);
	padding: var(--uenp-space-6);
}
.tribe-events-meta-group .tribe-events-single-section-title {
	font-family: var(--uenp-font-body);
	font-size: var(--uenp-text-label);
	font-weight: var(--uenp-weight-semibold);
	letter-spacing: var(--uenp-tracking-wide);
	text-transform: uppercase;
	color: var(--uenp-blue-700);
}

/* --- Navegação e relacionados --- */
.uenp-event__nav {
	margin-top: var(--uenp-space-12);
	padding-top: var(--uenp-space-6);
	border-top: 1px solid var(--uenp-color-border);
}
.uenp-event__nav .tribe-events-sub-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--uenp-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.uenp-event__nav a {
	color: var(--uenp-neutral-700);
	text-decoration: none;
	font-weight: var(--uenp-weight-semibold);
	font-size: var(--uenp-text-sm);
}
.uenp-event__nav a:hover { color: var(--uenp-blue-700); }
.uenp-event__nav .tribe-events-nav-next { margin-left: auto; text-align: right; }

.uenp-event__related { margin-top: var(--uenp-section-y); }