/* ── Eventos · tarjetas en carrusel (referencia brars.com, sección de recetas) ───────
   Radios (27 sep): tarjeta 4px; foto, badge y botón 8px; chip 4px.
   Tarjeta de color (acento elegido por la clienta), forma del manual de marca tono sobre tono, foto 3:2 con badge,
   etiqueta con check, título y botón a la cotización. La tarjeta central crece 1.1.
   Loop sin librería: el JS fija --o por tarjeta (misma técnica que H2, D22).
   Texto ink sobre ámbar/coral (≥7.1:1) y crema sobre el resto (≥5.04:1). Prefijo cl-evt. ── */
.cl-evt {
	--cl-teal: #1A545C;
	--cl-cream: #F7F1E8;
	--cl-ink: #1C1A1B;
	--cl-ease: cubic-bezier(.2, 1, .2, 1);
	--cl-evt-w: 24%;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.cl-evt .cl-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cl-evt svg { display: block; flex: none; }

.cl-evt__viewport { overflow: hidden; touch-action: pan-y; }
.cl-evt__track { display: grid; margin: 0; padding: 32px 0; list-style: none; }
.cl-evt__slide {
	grid-area: 1 / 1; justify-self: center; box-sizing: border-box;
	width: var(--cl-evt-w); padding: 0 16px;
	transform: translateX(calc(var(--o, 0) * 100%));
	transition: transform .6s var(--cl-ease);
}
.cl-evt__slide.is-far { visibility: hidden; }
.cl-evt__slide.is-selected { z-index: 1; }

.cl-evt__card {
	position: relative; box-sizing: border-box; height: 100%; overflow: hidden;
	display: flex; flex-direction: column; padding: 20px; border-radius: 4px;
	background: var(--cl-card, var(--cl-teal)); color: var(--cl-cream);
	transition: transform .3s ease-in-out;
}
.cl-evt__card.is-light { color: var(--cl-ink); }
.cl-evt__slide.is-selected .cl-evt__card { transform: scale(1.1); }
/* Forma del manual de marca (27 sep): una por tipo de evento, elegida en el admin (--cl-evt-shape).
   Tono sobre tono: más oscura que la tarjeta si el texto es claro, más clara si el texto es oscuro,
   así solo SUBE el contraste del texto que pase por encima (peor caso: magenta 5.04 → 6.51).
   Quieta; en hover se endereza y crece un poco. */
.cl-evt__card {
	--cl-shape-tint: rgba(0, 0, 0, .16);
	--cl-evt-shape: url("/wp-content/themes/outgrid-child/assets/brand-shapes/sparkle.svg"); /* por defecto; el shortcode fija la del tipo */
}
.cl-evt__card.is-light { --cl-shape-tint: rgba(255, 255, 255, .28); }
.cl-evt__card::before {
	content: ""; position: absolute; right: -16%; bottom: -12%; width: 80%; aspect-ratio: 1; pointer-events: none;
	background: var(--cl-shape-tint);
	-webkit-mask: var(--cl-evt-shape) center / contain no-repeat;
	        mask: var(--cl-evt-shape) center / contain no-repeat;
	transform: rotate(-10deg); transition: transform .6s var(--cl-ease);
}
.cl-evt__card:hover::before { transform: rotate(-3deg) scale(1.06); }

.cl-evt__media { position: relative; z-index: 1; overflow: hidden; border-radius: 8px; aspect-ratio: 3 / 2; }
.cl-evt__media img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	transform: scale(1); transition: transform .5s cubic-bezier(.33, 0, 0, 1);
}
.cl-evt__card:hover .cl-evt__media img { transform: scale(1.1); transition: transform .5s var(--cl-ease); }
.cl-evt__badge {
	position: absolute; top: 10px; right: 10px; margin: 0; padding: 8px; border-radius: 8px;
	background: var(--cl-cream); color: var(--cl-ink); font: 700 14px/1 "Inter", system-ui, sans-serif;
}
.cl-evt__copy { position: relative; z-index: 2; display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.cl-evt__tag { display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 0; font: 600 14px/1 "Inter", system-ui, sans-serif; }
.cl-evt__tag svg { width: 16px; height: 16px; }
.cl-evt__title {
	margin: 12px 0 24px; color: inherit;
	font: 600 28px/32px "Fraunces", Georgia, serif; letter-spacing: -.01em;
}
.cl-evt__cta {
	display: inline-flex; align-items: center; gap: 8px; margin-top: auto; height: 48px; box-sizing: border-box; padding: 0 20px;
	border-radius: 8px; background: var(--cl-cream); color: var(--cl-teal); font: 700 16px/1 "Inter", system-ui, sans-serif; text-decoration: none;
	transition: background-color .2s ease;
}
.cl-evt__cta::after {
	content: ""; width: 18px; height: 18px; border-radius: 4px; flex: none;
	background: var(--cl-teal) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%23F7F1E8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%222.5%22 d=%22M9 5L15 12L9 19%22/%3E%3C/svg%3E") center / 10px no-repeat;
}
.cl-evt__cta:hover { background: #fff; color: var(--cl-teal); }

/* Barra inferior (misma que H2, sin "View All": el CTA está arriba) */
.cl-evt__nav { display: flex; align-items: center; width: max-content; margin: 24px auto 0; padding: 10px; border-radius: 12px; background: var(--cl-teal); }
.cl-evt__controls { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; }
.cl-evt__arrow {
	width: 35px; height: 35px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px;
	background: var(--cl-cream); color: var(--cl-teal); cursor: pointer; transition: background-color .2s ease;
}
.cl-evt__arrow:hover { background: #fff; }
.cl-evt__arrow svg { width: 18px; height: 18px; }
.cl-evt__arrow svg path { stroke-width: 2.25; }
.cl-evt__arrow[data-dir="1"] { margin-left: 12px; }
.cl-evt__arrow[data-dir="-1"] { margin-right: 12px; }
.cl-evt__dots { display: flex; align-items: center; gap: 8px; }
.cl-evt__dots i { flex: none; width: 8px; height: 8px; border-radius: 8px; background: var(--cl-cream); opacity: .35; transition: width .3s var(--cl-ease), opacity .3s var(--cl-ease); }
.cl-evt__dots i.is-active { width: 20px; opacity: 1; }

@media (max-width: 1399px) { .cl-evt { --cl-evt-w: 30%; } }
@media (max-width: 1024px) { .cl-evt { --cl-evt-w: 44%; } } /* tablet: ~2 tarjetas */
@media (max-width: 600px) {
	.cl-evt { --cl-evt-w: 84%; }
	.cl-evt__slide { padding: 0 8px; }
	.cl-evt__slide.is-selected .cl-evt__card { transform: none; }
	.cl-evt__title { font-size: 24px; line-height: 28px; }
	.cl-evt__nav { background: none; padding: 0; }
	.cl-evt__arrow { width: 44px; height: 44px; background: var(--cl-teal); color: var(--cl-cream); }
	.cl-evt__arrow:hover { background: #164950; }
	.cl-evt__dots i { background: var(--cl-teal); }
}
@supports not (aspect-ratio: 1 / 1) {
	.cl-evt__media { height: 0; padding-top: 66.667%; }
	.cl-evt__media img { position: absolute; top: 0; left: 0; }
	.cl-evt__card::before { height: 0; padding-top: 80%; }
}
@media (prefers-reduced-motion: reduce) {
	.cl-evt *, .cl-evt *::before, .cl-evt *::after { transition: none !important; animation: none !important; }
}