/**
 * Zenth Toolkit — Proyectos Grid
 *
 * Grid de cards de proyectos (portafolio de motos). Cada card abre un modal
 * (ver proyectos-modal.css/js). El header de la sección se arma en Elementor;
 * acá solo vive el grid + el botón CTA.
 *
 * Standalone: usa var(--cr-*, fallback) para funcionar sin el theme.
 *
 * Prefijos:
 *   .cr-proyectos        → wrapper de la sección
 *   .cr-proyectos__grid  → grid de cards
 *   .cr-proyectos__card  → cada card (es un <button>)
 *   .cr-proyectos__cta   → botón "Ver portafolio completo"
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Wrapper        → .cr-proyectos (tokens locales + anti-colapso + box)
 *   §2  Grid           → .cr-proyectos__grid
 *   §3  Card           → .cr-proyectos__card (base + focus)
 *   §4  Card · media    → imagen + tag + overlay + textos
 *   §5  CTA            → .cr-proyectos__cta-wrap + botón
 *   §6  Responsive     → @media de tamaño + accesibilidad
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS (mobile-first: la base es 1 columna)
 *   Tablet        → min-width: 768px    (grid a 2 columnas)
 *   Desktop       → min-width: 1025px   (grid a 3 columnas)
 *
 *   OJO: son min-width (mobile-first), así que el cascade va de MENOR a MAYOR
 *   (768 → 1025) para que el breakpoint más ancho pise al más angosto. Es lo
 *   inverso al orden max-width. Además 1 media de accesibilidad
 *   (prefers-reduced-motion), en subsección propia al final de §6.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · WRAPPER — .cr-proyectos (tokens locales + anti-colapso + box)
   ═══════════════════════════════════════════════════════════════════════ */

.cr-proyectos {
	/* Tokens locales (las columnas/gap reales llegan inline desde el widget). */
	--cr-proy-cols-desktop: 3;
	--cr-proy-cols-tablet: 2;
	--cr-proy-cols-mobile: 1;
	--cr-proy-gap: 16px;
	--cr-proy-radius: 10px;
	--cr-proy-ratio: 4 / 3;

	box-sizing: border-box;
	width: 100%;
	max-width: var(--cr-container-max, 1440px);
	margin-inline: auto;
	padding-inline: var(--cr-container-pad, 32px);
}

/* Anti-colapso: el widget de Elementor puede quedar dentro de un contenedor
   flex con align-items:center (p. ej. .cr-section--center). Eso encoge el
   wrapper del widget a su contenido y, como las columnas usan minmax(0,1fr),
   el grid colapsaría a 0 de ancho → cards invisibles. Forzamos el wrapper a
   ocupar todo el ancho para que el grid siempre tenga espacio, lo sueltes
   donde lo sueltes. */
.elementor-widget-zenth_proyectos_grid {
	width: 100% !important;
}

.cr-proyectos *,
.cr-proyectos *::before,
.cr-proyectos *::after {
	box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · GRID — .cr-proyectos__grid
   ═══════════════════════════════════════════════════════════════════════ */

.cr-proyectos__grid {
	display: grid;
	grid-template-columns: repeat(var(--cr-proy-cols-mobile), minmax(0, 1fr));
	gap: var(--cr-proy-gap);
}


/* ═══════════════════════════════════════════════════════════════════════
   §2b · CARRUSEL — .cr-proyectos--carousel (stage + viewport + track + dots
   + flechas). Los dots usan el MISMO estilo que las reseñas. Las flechas son
   SOLO desktop (display:none base → inline-flex en §6 ≥1025). El JS
   (proyectos-carousel.js) maneja transform / drag / dots / flechas.
   ═══════════════════════════════════════════════════════════════════════ */

.cr-proyectos__stage {
	position: relative;
}

.cr-proyectos__viewport {
	overflow: hidden;
	width: 100%;
}

.cr-proyectos__track {
	display: flex;
	gap: var(--cr-proy-gap);
	will-change: transform;
	cursor: grab;
	touch-action: pan-y;   /* drag horizontal = carrusel; vertical = scroll de la página */
	transition: transform var(--cr-transition-slow, 400ms cubic-bezier(0.4, 0, 0.2, 1));
}

.cr-proyectos__track.is-dragging {
	cursor: grabbing;
	transition: none;
	-webkit-user-select: none;
	        user-select: none;
}

/* Card en carrusel: ancho = N columnas (base = mobile; tablet/desktop en §6). */
.cr-proyectos--carousel .cr-proyectos__card {
	flex: 0 0 calc((100% - (var(--cr-proy-cols-mobile) - 1) * var(--cr-proy-gap)) / var(--cr-proy-cols-mobile));
	min-width: 0;
}

/* ── Flechas (solo desktop, ver §6) ── */
.cr-proyectos__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	background: var(--cr-color-darker, #0f0f0f);
	color: var(--cr-color-white, #fff);
	cursor: pointer;
	z-index: 3;
	transition: background var(--cr-transition-fast, 150ms ease),
				border-color var(--cr-transition-fast, 150ms ease),
				opacity var(--cr-transition-fast, 150ms ease);
}

.cr-proyectos__arrow:hover {
	background: var(--cr-color-primary, #c00000);
	border-color: var(--cr-color-primary, #c00000);
}

.cr-proyectos__arrow--prev { left: -20px; }
.cr-proyectos__arrow--next { right: -20px; }

.cr-proyectos__arrow[disabled] {
	opacity: 0.35;
	pointer-events: none;
}

.cr-proyectos__arrow svg {
	width: 22px;
	height: 22px;
	pointer-events: none;
}

button.cr-proyectos__arrow:focus { outline: none; }
.cr-proyectos__arrow:focus-visible {
	outline: 2px solid var(--cr-color-primary, #c00000);
	outline-offset: 2px;
}

/* ── Dots (idéntico estilo a las reseñas) ── */
.cr-proyectos__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: clamp(20px, 2.5vw, 32px);
}

.cr-proyectos__dot {
	-webkit-appearance: none;
	appearance: none;
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #474747;
	cursor: pointer;
	transition: width var(--cr-transition-base, 250ms ease),
				background var(--cr-transition-base, 250ms ease);
}

.cr-proyectos__dot.is-active {
	width: 26px;
	background: var(--cr-color-primary, #c00000);
}

.cr-proyectos__dot:focus-visible {
	outline: 2px solid var(--cr-color-white, #fff);
	outline-offset: 2px;
}

/* Reset del fondo "rosado" del tema padre en :focus/:hover (son <button>). */
button.cr-proyectos__dot:focus,
button.cr-proyectos__dot:hover { background-color: #474747; }
button.cr-proyectos__dot.is-active:focus,
button.cr-proyectos__dot.is-active:hover { background-color: var(--cr-color-primary, #c00000); }


/* ═══════════════════════════════════════════════════════════════════════
   §3 · CARD — .cr-proyectos__card (base + focus)
   ═══════════════════════════════════════════════════════════════════════ */

/* La card es un <button>: reseteamos estilos nativos + Elementor. */
.cr-proyectos__card {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--cr-proy-radius);
	overflow: hidden;
	background: var(--cr-color-gray-900, #1a1a1a);
	aspect-ratio: var(--cr-proy-ratio);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
	isolation: isolate;
}

.cr-proyectos__card:focus-visible {
	outline: 3px solid var(--cr-color-primary, #c00000);
	outline-offset: 3px;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · CARD · MEDIA — imagen + tag + overlay + textos
   ═══════════════════════════════════════════════════════════════════════ */

/* Media (imagen) */
.cr-proyectos__media {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 0;
}

/* La imagen DEBE llenar la card (4/3). Elementor inyecta `.elementor img{
   height:auto}` (especificidad 0,1,1) que le gana a `.cr-proyectos__img` (0,1,0)
   y deja la imagen a su alto natural → letterbox (lo que se ve: 398×224 dentro de
   una card 398×298.5). Por eso forzamos absolute + inset:0 + 100%/100% +
   object-fit:cover TODO con !important: gana sí o sí, sin importar la
   especificidad de Elementor/tema. El alto lo fija el inset (top+bottom:0),
   inmune a cualquier `height:auto`. */
.cr-proyectos__img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
	transition: transform var(--cr-transition-slow, 400ms cubic-bezier(0.4, 0, 0.2, 1));
	will-change: transform;
}

.cr-proyectos__card:hover .cr-proyectos__img,
.cr-proyectos__card:focus-visible .cr-proyectos__img {
	transform: scale(1.06);
}

/* Tag (tipo) — arriba a la izquierda */
.cr-proyectos__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-block;
	padding: 6px 12px;
	background: var(--cr-color-primary, #c00000);
	color: var(--cr-color-white, #fff);
	font-family: var(--cr-font-body, system-ui, sans-serif);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 4px;
}

/* Overlay (gradiente + textos) — siempre visible */
.cr-proyectos__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	padding: 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.35) 38%, transparent 62%);
	transition: background var(--cr-transition-base, 250ms ease);
}

.cr-proyectos__card:hover .cr-proyectos__overlay,
.cr-proyectos__card:focus-visible .cr-proyectos__overlay {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.08) 75%);
}

.cr-proyectos__title {
	display: block;
	margin: 0;
	font-family: var(--cr-font-display, 'Super Brigade', Impact, sans-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
	line-height: 1.05;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--cr-color-white, #fff);
}

.cr-proyectos__attr {
	display: block;
	margin: 0;
	font-family: var(--cr-font-body, system-ui, sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cr-color-text-muted, #81817f);
}

/* Ocultar el JSON embebido (por si algún reset lo muestra). */
.cr-proyectos__data {
	display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · CTA — .cr-proyectos__cta-wrap + botón
   ═══════════════════════════════════════════════════════════════════════ */

.cr-proyectos__cta-wrap {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.cr-proyectos__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 36px;
	background: var(--cr-color-primary, #c00000);
	color: var(--cr-color-white, #fff);
	font-family: var(--cr-font-body, system-ui, sans-serif);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 999px;
	transition: background var(--cr-transition-base, 250ms ease), transform var(--cr-transition-base, 250ms ease);
}

.cr-proyectos__cta:hover,
.cr-proyectos__cta:focus-visible {
	background: var(--cr-color-primary-hover, #e60000);
	color: var(--cr-color-white, #fff);
	transform: translateY(-2px);
}

.cr-proyectos__cta:focus-visible {
	outline: 3px solid var(--cr-color-white, #fff);
	outline-offset: 3px;
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · RESPONSIVE — @media de tamaño + accesibilidad
   ───────────────────────────────────────────────────────────────────────
   Mobile-first: la base (§2) es 1 columna; al subir de breakpoint el grid
   gana columnas. Como son min-width, el cascade va de MENOR a MAYOR
   (768 → 1025) para que el más ancho pise al más angosto. Al final, la
   accesibilidad (prefers-reduced-motion), que NO es breakpoint de tamaño y
   no se consolida con los de arriba.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── TABLET · min-width: 768px ──────────────────── */
@media (min-width: 768px) {

	/* §2 · Grid: 2 columnas en tablet */
	.cr-proyectos__grid {
		grid-template-columns: repeat(var(--cr-proy-cols-tablet), minmax(0, 1fr));
	}

	/* §2b · Carrusel: card al ancho de columnas de tablet */
	.cr-proyectos--carousel .cr-proyectos__card {
		flex-basis: calc((100% - (var(--cr-proy-cols-tablet) - 1) * var(--cr-proy-gap)) / var(--cr-proy-cols-tablet));
	}
}


/* ──────────────────────── DESKTOP · min-width: 1025px ─────────────────── */
@media (min-width: 1025px) {

	/* §2 · Grid: 3 columnas en desktop */
	.cr-proyectos__grid {
		grid-template-columns: repeat(var(--cr-proy-cols-desktop), minmax(0, 1fr));
	}

	/* §2b · Carrusel: card al ancho de columnas de desktop + FLECHAS (solo desktop) */
	.cr-proyectos--carousel .cr-proyectos__card {
		flex-basis: calc((100% - (var(--cr-proy-cols-desktop) - 1) * var(--cr-proy-gap)) / var(--cr-proy-cols-desktop));
	}
	.cr-proyectos--carousel .cr-proyectos__arrow {
		display: inline-flex;
	}
}


/* ─────────────────── ACCESIBILIDAD · prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
	.cr-proyectos__img,
	.cr-proyectos__overlay,
	.cr-proyectos__cta {
		transition: none;
	}

	.cr-proyectos__card:hover .cr-proyectos__img,
	.cr-proyectos__card:focus-visible .cr-proyectos__img {
		transform: none;
	}

	.cr-proyectos__cta:hover,
	.cr-proyectos__cta:focus-visible {
		transform: none;
	}
}