/* ============================================================
 * gyt-selos.css — a régua de selos do card de evento (Destaque / Em alta).
 *
 * POR QUE ESTE ARQUIVO EXISTE: este CSS morava dentro de gyt-ui.css, que a HOME
 * não carrega — ela tem <style> próprio e não passa pelo head-premium. Resultado:
 * na home a régua ficava `position: static`, ocupava espaço no fluxo e empurrava
 * a imagem do card, em vez de ficar sobreposta no canto. Nas outras páginas
 * (busca, evento) funcionava, porque lá o gyt-ui.css é carregado.
 *
 * Separado, o mesmo arquivo entra nos dois lugares e a régua fica idêntica em
 * toda parte — sem CSS duplicado, sem duas verdades.
 *
 * ESTRUTURA: o pai (.gyt-card-img) é position:relative com overflow:hidden, e a
 * régua é position:absolute z-index 5, DENTRO desse pai — acima da imagem e do
 * gradiente (::after, sem z-index), e recortada pelo mesmo border-radius.
 * ============================================================ */

.ev-tags {
	display: inline-flex; flex-wrap: wrap; gap: 8px;
	align-items: center;
}
.ev-tag {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 14px;
	border-radius: 999px;
	font-family: var(--f-display, 'Space Grotesk', sans-serif);
	font-size: 13px; font-weight: 800;
	letter-spacing: .03em; line-height: 1;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(10,10,18,.28);
	text-transform: uppercase;
}
.ev-tag--em_alta {
	background: linear-gradient(135deg, #ff6b3d, #ff3b3b);
	color: #fff;
	animation: ev-tag-pulse 1.8s ease-in-out infinite;
	text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.ev-tag--ultimos {
	background: linear-gradient(135deg, #ffb720, #ff8800);
	color: #1a0e00;
}
@keyframes ev-tag-pulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(255,59,59,.42); transform: scale(1); }
	50% { box-shadow: 0 6px 24px rgba(255,59,59,.72); transform: scale(1.04); }
}
/* RÉGUA DE SELOS DO CARD (itens 159-163).
   Fica no ALTO da imagem, com espaço reservado à direita pro botão de favorito, e
   empilha sozinha quando não cabe — em vez de o selo sair do card ou cair em cima
   da etiqueta de preço (que vive no rodapé da imagem). Estrutural, não por
   resolução: a régua tem largura máxima e os selos quebram linha dentro dela. */
.gyt-card-selos {
	position: absolute;
	top: 12px; left: 12px;
	right: 58px;                 /* espaço do coração de favorito */
	z-index: 5;
	/* UM selo por card (11/09): "Em alta" TOMA O LUGAR de "Destaque". A coluna
	   continua aqui porque a régua também serve páginas com outros selos. */
	display: flex; flex-direction: column; flex-wrap: wrap; gap: 6px;
	align-items: flex-start;
	max-width: calc(100% - 70px);
	pointer-events: none;
}
.gyt-card-selos .ev-tag,
.gyt-card-selos .gyt-selo-destaque {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 11.5px;
	padding: 5px 11px;
}
/* A ETIQUETA VERDE é do DESTAQUE (o produtor liga no evento). Quando o evento
   está "em alta", o laranja com 🔥 (.ev-tag--em_alta) aparece NO LUGAR dela, no
   mesmo ponto. Vive aqui porque home, busca e evento usam a mesma régua. */
.gyt-selo-destaque {
	display: inline-flex; align-items: center;
	background: linear-gradient(135deg, #D2F912, #bfe20d);
	color: #0a0a12;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 12px; font-weight: 800; line-height: 1;
	text-transform: uppercase; letter-spacing: .08em;
	box-shadow: 0 4px 14px rgba(210,249,18,.5);
	white-space: nowrap; max-width: 100%;
	overflow: hidden; text-overflow: ellipsis;
}
/* Variante ancorada à DIREITA — pra card cujo canto superior esquerdo já é usado
   (ex.: a etiqueta de data da busca). Mesma régua, outro canto. */
.gyt-card-selos--dir {
	left: auto; right: 12px;
	align-items: flex-end;      /* a régua empilha: alinhar no eixo transversal */
	max-width: calc(100% - 24px);
}
@media (max-width: 560px) {
	.gyt-card-selos { right: 52px; max-width: calc(100% - 62px); gap: 5px; }
	.gyt-card-selos--dir { right: 10px; max-width: calc(100% - 20px); }
	.gyt-card-selos .ev-tag,
	.gyt-card-selos .gyt-selo-destaque { font-size: 10.5px; padding: 4px 9px; }
}
