/*
 * Andicom Theme — Patrocinadores / Aliados
 * Estilos para el shortcode [patrocinadores_grid]
 *
 * Estructura HTML:
 *   .patrocinadores-section          (sección completa, contiene data-logos JSON)
 *   ├── .patrocinadores-header       (label + titulo + subtitulo opcionales)
 *   │   ├── .patrocinadores-label    (etiqueta pequeña)
 *   │   ├── .patrocinadores-titulo   (h2)
 *   │   └── .patrocinadores-subtitulo
 *   ├── .patrocinadores-filtros      (botones de nivel, layout horizontal)
 *   │   └── .filtro-btn [.activo]    (100×100px, ícono + texto vertical)
 *   │       ├── .filtro-btn__icono   (círculo de color del nivel)
 *   │       └── .filtro-btn__texto   (nombre del nivel)
 *   └── .patrocinadores-carousel-wrapper  (overflow:hidden + mask fade lateral)
 *       ├── .patrocinadores-carousel      (flex row animado, se desliza solo)
 *       │   └── .pat-logo-item [aria-hidden] (tarjeta individual 140×70px)
 *       │       ├── .pat-logo-link  (si tiene URL)
 *       │       └── .pat-logo-inner (si no tiene URL)
 *       │           └── .patrocinador-logo (img)
 *       └── .pat-sin-logos           (mensaje cuando nivel sin logos, hidden por defecto)
 *
 * Animación del carrusel:
 *   @keyframes scroll-logos desplaza translateX(0 → -50%).
 *   Los items están duplicados (N originales + N copias aria-hidden),
 *   por eso -50% equivale exactamente a una vuelta completa.
 *   Al filtrar, el JS reemplaza el innerHTML y reinicia la animación.
 */

/* ═══════════════════════════════════════════════════════════════
   VARIABLES LOCALES
═══════════════════════════════════════════════════════════════ */

:root {
	--pat-card-bg:          #1a1a1a;
	--pat-card-border:      #2a2a2a;
	--pat-card-border-hover: #FFB800;
	--pat-item-width:       140px;
	--pat-item-height:      70px;
	--pat-gap:              16px;
	--pat-carousel-speed:   30s;
	--pat-btn-size:         100px;
	--pat-circle-size:      44px;
}

/* ═══════════════════════════════════════════════════════════════
   SECCIÓN CONTENEDORA
═══════════════════════════════════════════════════════════════ */

.patrocinadores-section {
	width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER: LABEL + TÍTULO + SUBTÍTULO
═══════════════════════════════════════════════════════════════ */

.patrocinadores-header {
	margin-bottom: 36px;
	text-align: center;
}

/* Etiqueta pequeña sobre el título (atributo "label") */
.patrocinadores-label {
	display: inline-block;
	margin: 0 0 12px;
	padding: 4px 14px;
	background: rgba(255, 184, 0, 0.1);
	border: 1px solid rgba(255, 184, 0, 0.3);
	border-radius: 20px;
	color: var(--color-accent-yellow, #FFB800);
	font-family: 'Bai Jamjuree', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.patrocinadores-titulo {
	margin: 0 0 12px;
	color: #ffffff;
	font-family: 'Bai Jamjuree', sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

.patrocinadores-subtitulo {
	margin: 0;
	color: #999999;
	font-family: 'Bai Jamjuree', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════
   FILA DE FILTROS
   Botones de ~100×100px con ícono circular arriba y texto abajo.
═══════════════════════════════════════════════════════════════ */

.patrocinadores-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	margin-bottom: 32px;
}

/* ── Botón base ── */
.filtro-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: var(--pat-btn-size);
	min-height: var(--pat-btn-size);
	padding: 16px 8px;
	background: #1a1a1a;
	border: 1px solid #333333;
	border-radius: 10px;
	cursor: pointer;
	transition:
		border-color 0.2s ease,
		background   0.2s ease;
}

.filtro-btn:hover:not(.activo) {
	border-color: #555555;
	background: #202020;
}

.filtro-btn:focus-visible {
	outline: 2px solid var(--color-accent-yellow, #FFB800);
	outline-offset: 2px;
}

/* ── Botón activo ── */
.filtro-btn.activo {
	border: 2px solid #FFB800;
	background: #222222;
}

/* ── Círculo de color del nivel ── */
.filtro-btn__icono {
	display: block;
	width: var(--pat-circle-size);
	height: var(--pat-circle-size);
	border-radius: 50%;
	flex-shrink: 0;
	/* El background se inyecta como inline style desde PHP */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ── Texto del nivel ── */
.filtro-btn__texto {
	color: #cccccc;
	font-family: 'Bai Jamjuree', sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	word-break: break-word;
	transition: color 0.2s ease;
}

.filtro-btn.activo .filtro-btn__texto {
	color: #FFB800;
}

/* ═══════════════════════════════════════════════════════════════
   WRAPPER DEL CARRUSEL
   overflow:hidden + mask-image para fade suave en los bordes.
═══════════════════════════════════════════════════════════════ */

.patrocinadores-carousel-wrapper {
	overflow: hidden;
	position: relative;
	/* Fade en los bordes izquierdo y derecho */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent,
		black 80px,
		black calc(100% - 80px),
		transparent
	);
	mask-image: linear-gradient(
		to right,
		transparent,
		black 80px,
		black calc(100% - 80px),
		transparent
	);
}

/* ── Mensaje "Sin patrocinadores" ── */
.pat-sin-logos {
	margin: 0;
	padding: 32px 0;
	color: #666666;
	font-family: 'Bai Jamjuree', sans-serif;
	font-size: 14px;
	text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   CARRUSEL — ANIMACIÓN INFINITA
   Keyframe scroll-logos: translateX(0 → -50%)
   Los items están duplicados (N originales + N copias con aria-hidden),
   así que -50% = exactamente una vuelta completa → loop seamless.
═══════════════════════════════════════════════════════════════ */

@keyframes scroll-logos {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.patrocinadores-carousel {
	display: flex;
	align-items: center;
	gap: var(--pat-gap);
	width: max-content;        /* se expande al contenido */
	/* Transición de opacity para el filtrado (JS la activa) */
	transition: opacity 0.28s ease;
	/* Animación de desplazamiento continua */
	animation: scroll-logos var(--pat-carousel-speed) linear infinite;
}

/* Pausa al hacer hover sobre el wrapper o el carrusel */
.patrocinadores-carousel-wrapper:hover .patrocinadores-carousel {
	animation-play-state: paused;
}

/* ═══════════════════════════════════════════════════════════════
   ITEM DEL CARRUSEL
═══════════════════════════════════════════════════════════════ */

.pat-logo-item {
	flex-shrink: 0;
	width: var(--pat-item-width);
	height: var(--pat-item-height);
	background: var(--pat-card-bg);
	border: 1px solid var(--pat-card-border);
	border-radius: 8px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s ease;
}

.pat-logo-item:hover {
	border-color: var(--pat-card-border-hover);
}

/* ── Enlace (patrocinador con URL) ── */
.pat-logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	outline-offset: 3px;
}

.pat-logo-link:focus-visible {
	outline: 2px solid #FFB800;
	border-radius: 4px;
}

/* ── Contenedor sin enlace ── */
.pat-logo-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* ── Imagen del logo ── */
.patrocinador-logo {
	display: block;
	max-width: 100%;
	max-height: calc(var(--pat-item-height) - 24px); /* item height - padding×2 */
	width: auto;
	height: auto;
	object-fit: contain;
}

.pat-logo-link:hover .patrocinador-logo {
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 768px)
═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

	.patrocinadores-titulo {
		font-size: 22px;
	}

	.patrocinadores-filtros {
		gap: 8px;
		margin-bottom: 24px;
	}

	:root {
		--pat-btn-size:    80px;
		--pat-circle-size: 36px;
	}

	.filtro-btn {
		gap: 8px;
		padding: 12px 6px;
	}

	.filtro-btn__texto {
		font-size: 11px;
	}

	:root {
		--pat-item-width:  110px;
		--pat-item-height: 60px;
		--pat-gap:         12px;
		--pat-carousel-speed: 22s; /* un poco más rápido en mobile */
	}

	.patrocinadores-carousel-wrapper {
		-webkit-mask-image: linear-gradient(
			to right,
			transparent,
			black 40px,
			black calc(100% - 40px),
			transparent
		);
		mask-image: linear-gradient(
			to right,
			transparent,
			black 40px,
			black calc(100% - 40px),
			transparent
		);
	}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 480px)
═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

	:root {
		--pat-btn-size:    72px;
		--pat-circle-size: 32px;
		--pat-item-width:  90px;
		--pat-item-height: 54px;
		--pat-gap:         10px;
	}

	.patrocinadores-header {
		margin-bottom: 24px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   ACCESIBILIDAD — reducción de movimiento
═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.patrocinadores-carousel {
		animation: none;
	}
}