/**
 * CSS Frontend — Portal Eventos Manager
 * Cards de evento exatamente como no print
 */

/* =============================================================================
   VARIÁVEIS
   ============================================================================= */
:root {
	--pem-green:   #00482B;
	--pem-green-d: #003E21;
	--pem-gold:    #C5A059;
	--pem-gold-d:  #A7803C;
	--pem-bg:      #F7F9F6;
	--pem-white:   #FFFFFF;
	--pem-text:    #2B302A;
	--pem-muted:   #6C757D;
	--pem-border:  #E2E8F0;
	--pem-shadow:  0 8px 30px rgba(0,0,0,0.07);
	--pem-radius:  16px;
}

/* =============================================================================
   WRAPPER GERAL
   ============================================================================= */
.pem-eventos-wrapper {
	width: 100%;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* =============================================================================
   HEADER DA SEÇÃO (TÍTULO + VER TODOS)
   ============================================================================= */
.pem-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 12px;
	border-left: 4px solid var(--pem-gold);
	margin-bottom: 24px;
}

.pem-section-title {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--pem-green-d);
	margin: 0;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.pem-icon-cal { font-size: 1.1rem; }

.pem-ver-todos {
	color: var(--pem-gold);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 4px;
	transition: color 0.2s;
}

.pem-ver-todos:hover { color: var(--pem-gold-d); }
.pem-ver-todos span { font-size: 1.1rem; }

/* =============================================================================
   GRID DE CARDS (LAYOUT PADRÃO)
   ============================================================================= */
.pem-eventos-grid.pem-layout-cards {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

@media (max-width: 1400px) { .pem-eventos-grid.pem-layout-cards { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 991px)  { .pem-eventos-grid.pem-layout-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .pem-eventos-grid.pem-layout-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .pem-eventos-grid.pem-layout-cards { grid-template-columns: 1fr; } }

/* Layout lista */
.pem-eventos-grid.pem-layout-lista {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* =============================================================================
   CARD DE EVENTO — EXATAMENTE COMO NO PRINT
   ============================================================================= */
.pem-card {
	background: var(--pem-white);
	border-radius: var(--pem-radius);
	overflow: hidden;
	box-shadow: var(--pem-shadow);
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	border: 1.5px solid transparent;
}

.pem-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.pem-card-highlight {
	border-color: var(--pem-gold);
}

/* Imagem */
.pem-card-img-wrap {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4/3;
	background: #1a1a2e;
}

.pem-layout-lista .pem-card-img-wrap {
	width: 200px;
	min-width: 200px;
	aspect-ratio: unset;
}

.pem-card-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	display: block;
}

.pem-card:hover .pem-card-img-wrap img {
	transform: scale(1.06);
}

/* Badge de categoria — pílula flutuante (não é mais cortada pelo card) */
.pem-cat-badge {
	position: absolute;
	bottom: 12px;
	left: 12px;
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	padding: 5px 12px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	border-radius: 50px;
	line-height: 1.2;
	max-width: calc(100% - 24px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.22);
	backdrop-filter: saturate(1.2);
}

/* Estrela de destaque (canto superior esquerdo, longe da faixa de status) */
.pem-destaque-star {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 1.05rem;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}

/* Faixa de status "Em andamento" — pílula flutuante (sem corte no canto) */
.pem-status-ribbon {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 0.64rem;
	font-weight: 700;
	color: #fff;
	padding: 5px 12px;
	border-radius: 50px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	line-height: 1.2;
	box-shadow: 0 4px 12px rgba(0,0,0,0.22);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* Pontinho pulsante antes do texto de status (toque visual) */
.pem-status-ribbon::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.9;
}

/* Corpo do card */
.pem-card-body {
	padding: 14px 16px 10px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pem-card-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--pem-green-d);
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	margin: 0;
	line-height: 1.3;
}

.pem-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

.pem-card-title a:hover { color: var(--pem-gold); }

.pem-card-metas {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.pem-card-meta {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 0.78rem;
	color: var(--pem-muted);
	line-height: 1.4;
}

.pem-meta-icon {
	font-size: 0.8rem;
	flex-shrink: 0;
	margin-top: 1px;
}

.pem-card-excerpt {
	font-size: 0.8rem;
	color: var(--pem-muted);
	margin: 0;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Footer do card — botão SAIBA MAIS */
.pem-card-footer {
	padding: 10px 16px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border-top: 1px solid #F2F4F6;
}

.pem-ingresso {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--pem-muted);
}

.pem-ingresso.pem-free {
	color: #00A376;
}

/* Botão SAIBA MAIS — exatamente como no print */
.pem-btn-saiba-mais {
	display: inline-block;
	border: 2px solid var(--pem-gold);
	color: var(--pem-gold);
	background: transparent;
	padding: 5px 14px;
	border-radius: 50px;
	font-size: 0.72rem;
	font-weight: 800;
	text-decoration: none !important;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.pem-btn-saiba-mais:hover {
	background: var(--pem-gold);
	color: #fff !important;
	transform: translateY(-1px);
}

/* =============================================================================
   CARD LISTA (LAYOUT HORIZONTAL)
   ============================================================================= */
.pem-layout-lista .pem-card {
	flex-direction: row;
}

.pem-layout-lista .pem-card-body {
	flex: 1;
}

.pem-layout-lista .pem-card-footer {
	border-top: none;
	border-left: 1px solid #F2F4F6;
	flex-direction: column;
	justify-content: center;
	min-width: 130px;
	padding: 16px;
}

.pem-layout-lista .pem-btn-saiba-mais {
	width: 100%;
	text-align: center;
}

@media (max-width: 600px) {
	.pem-layout-lista .pem-card {
		flex-direction: column;
	}
	.pem-layout-lista .pem-card-img-wrap {
		width: 100%;
		aspect-ratio: 16/7;
	}
	.pem-layout-lista .pem-card-footer {
		border-left: none;
		border-top: 1px solid #F2F4F6;
		flex-direction: row;
	}
}

/* =============================================================================
   EMPTY STATE
   ============================================================================= */
.pem-no-events {
	text-align: center;
	padding: 48px 24px;
	color: var(--pem-muted);
}

.pem-no-events span {
	font-size: 2.5rem;
	display: block;
	margin-bottom: 12px;
}

.pem-no-events p { font-size: 0.95rem; }

/* =============================================================================
   FILTROS
   ============================================================================= */
.pem-filtros-wrapper {
	background: #fff;
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 20px;
	box-shadow: var(--pem-shadow);
	border: 1px solid var(--pem-border);
}

.pem-filtros-inner {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	flex-wrap: wrap;
}

.pem-filtro-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 180px;
}

.pem-filtro-group label {
	font-size: 0.78rem;
	font-weight: 600;
	color: #555;
}

.pem-select,
.pem-input-busca {
	border: 1.5px solid #ddd;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 0.85rem;
	color: #333;
	background: #fff;
	transition: border-color 0.2s;
}

.pem-select:focus,
.pem-input-busca:focus {
	border-color: var(--pem-green);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0,72,43,0.08);
}

.pem-btn-filtrar {
	background: var(--pem-green);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 9px 20px;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
	white-space: nowrap;
}

.pem-btn-filtrar:hover { background: var(--pem-green-d); }

.pem-btn-limpar {
	background: transparent;
	color: #999;
	border: 1.5px solid #ddd;
	border-radius: 8px;
	padding: 9px 16px;
	font-size: 0.82rem;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
}

.pem-btn-limpar:hover { border-color: #aaa; color: #555; }

/* =============================================================================
   SHORTCODE: [portal_eventos_categorias]
   Grid de cards com ícones por categoria
   ============================================================================= */

.pem-cats-wrapper {
	width: 100%;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Título da seção */
.pem-cats-header {
	padding-left: 12px;
	border-left: 4px solid var(--pem-gold);
	margin-bottom: 24px;
}

.pem-cats-title {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--pem-green-d);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Grid responsivo — colunas definidas via shortcode */
.pem-cats-grid {
	display: grid;
	gap: 16px;
}

.pem-cats-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pem-cats-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pem-cats-cols-4 { grid-template-columns: repeat(4, 1fr); }
.pem-cats-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1200px) {
	.pem-cats-cols-6 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
	.pem-cats-cols-4,
	.pem-cats-cols-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
	.pem-cats-cols-3,
	.pem-cats-cols-4,
	.pem-cats-cols-6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
	.pem-cats-cols-2,
	.pem-cats-cols-3,
	.pem-cats-cols-4,
	.pem-cats-cols-6 { grid-template-columns: 1fr 1fr; }
}

/* Card individual */
.pem-cat-card {
	--cat-color: #00482B;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px 16px 20px;
	background: #fff;
	border: 1.5px solid #e8edf2;
	border-radius: 14px;
	text-decoration: none !important;
	color: #2c3338 !important;
	text-align: center;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
	box-shadow: 0 2px 12px rgba(0,0,0,.05);
	position: relative;
	overflow: hidden;
}

/* Linha decorativa no topo com a cor da categoria */
.pem-cat-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--cat-color);
	transform: scaleX(0);
	transition: transform 0.25s ease;
	transform-origin: left;
}

.pem-cat-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 32px rgba(0,0,0,.1);
	border-color: var(--cat-color);
}

.pem-cat-card:hover::before {
	transform: scaleX(1);
}

/* Container do ícone SVG */
.pem-cat-card-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--cat-color) 12%, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cat-color);
	transition: background 0.22s ease, transform 0.22s ease;
}

/* Fallback para navegadores sem color-mix */
@supports not (background: color-mix(in srgb, red 10%, white)) {
	.pem-cat-card-icon { background: #f0f5f0; }
}

.pem-cat-card:hover .pem-cat-card-icon {
	background: var(--cat-color);
	color: #fff;
	transform: scale(1.08);
}

.pem-cat-card-icon svg {
	width: 28px;
	height: 28px;
	display: block;
}

/* Nome da categoria */
.pem-cat-card-name {
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #2c3338;
	line-height: 1.3;
	text-align: center;
	transition: color 0.22s;
}

.pem-cat-card:hover .pem-cat-card-name {
	color: var(--cat-color);
}

/* Contador de eventos */
.pem-cat-card-count {
	font-size: 0.68rem;
	color: #aaa;
	font-weight: 500;
}

/* =============================================================================
   POLIMENTO VISUAL DO CARD + FONTE MONTSERRAT (reforço sobre o tema)
   ============================================================================= */

/* Garante Montserrat em todos os textos do plugin, mesmo que o tema
   defina font-family nos elementos internos (h3, a, span, p). */
.pem-eventos-wrapper,
.pem-eventos-wrapper *:not(svg):not(path),
.pem-cats-wrapper,
.pem-cats-wrapper *:not(svg):not(path) {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Camadas: gradiente abaixo, selos acima */
.pem-card-img-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0) 48%);
	z-index: 1;
	pointer-events: none;
}
.pem-cat-badge,
.pem-status-ribbon,
.pem-destaque-star { z-index: 2; }

/* Card um pouco mais respirado e com transição suave */
.pem-card { will-change: transform; }
.pem-card-body { padding: 16px 18px 12px; gap: 9px; }
.pem-card-title { font-size: 1rem; font-weight: 800; letter-spacing: -0.1px; }

/* Limita o título a 2 linhas para alinhar as alturas dos cards */
.pem-card-title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Metadados com ícone alinhado e cor de destaque sutil */
.pem-card-meta { font-size: 0.8rem; }
.pem-meta-icon { color: var(--pem-gold-d); }

/* Footer com melhor alinhamento e separador mais leve */
.pem-card-footer {
	padding: 12px 18px 16px;
	border-top: 1px solid #EEF1F3;
	margin-top: auto;
}
.pem-ingresso { line-height: 1.25; }
.pem-ingresso.pem-free { display: inline-flex; align-items: center; gap: 5px; }
.pem-ingresso.pem-free::before {
	content: '';
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #00A376;
}

/* Botão "Saiba mais" com leve preenchimento no hover e melhor toque */
.pem-btn-saiba-mais {
	padding: 7px 16px;
	font-size: 0.7rem;
	box-shadow: 0 2px 8px rgba(197,160,89,0.15);
}
.pem-btn-saiba-mais:hover { box-shadow: 0 6px 16px rgba(197,160,89,0.35); }

/* Acessibilidade: foco visível no botão e no card */
.pem-btn-saiba-mais:focus-visible,
.pem-card-title a:focus-visible {
	outline: 3px solid var(--pem-gold);
	outline-offset: 2px;
	border-radius: 4px;
}