/**
 * ============================================================
 *  SHOP-CATEGORIES.CSS — Widget Zenth Shop · Categorías
 * ============================================================
 *
 *  Dos layouts:
 *    1. mosaic-5 (default) → Grid asimétrico estilo CR para 5 categorías.
 *       Distribución: 1 grande (col 1, span 2 rows) + 2 medianas apiladas
 *       (col 2) + 1 grande (col 3, span 2 rows) + 1 grande (col 4, span 2 rows).
 *    2. grid → Grid uniforme con --zsc-cols columnas.
 *
 *  ESTRUCTURA HTML
 *  ----------------------------------------------------------
 *  <div class="zenth-shop-categories zenth-shop-categories--layout-mosaic-5">
 *    <header class="zenth-shop-categories__header --left|--center">
 *      <p class="zenth-shop-categories__eyebrow">EXPLORA POR CATEGORÍA</p>
 *      <h2 class="zenth-shop-categories__title">
 *        <span class="...__title-line --1">
 *          <span class="...__title-solid">TODO LO QUE BUSCAS,</span>
 *        </span>
 *        <span class="...__title-line --2">
 *          <span class="...__title-outline --red">UN</span>
 *          <span class="...__title-solid">SOLO</span>
 *          <span class="...__title-outline --white">LUGAR</span>
 *        </span>
 *      </h2>
 *    </header>
 *    <div class="zenth-shop-categories__grid">
 *      <a class="...__card ...__card--position-N">
 *        <div class="...__media">
 *          <img class="...__img">
 *          <div class="...__overlay"></div>
 *          <span class="...__view-more">VER MÁS →</span>
 *          <div class="...__caption">
 *            <h3 class="...__name">Intercomunicadores</h3>
 *          </div>
 *        </div>
 *      </a>
 *      ...
 *    </div>
 *  </div>
 *
 *  COLORES
 *  ----------------------------------------------------------
 *  Hereda tokens --cr-* del theme. Si se usa fuera de /tienda/,
 *  los fallbacks toman valores compatibles.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Wrapper        → .zenth-shop-categories (+ max-width estándar + tokens)
 *   §2  Header         → eyebrow + título split (solid / outline --red/--white)
 *   §3  Grid mosaico-5 → layout asimétrico (5 cards, posiciones 0–4)
 *   §4  Grid uniforme  → fallback / opción legacy (--zsc-cols)
 *   §5  Card           → contenedor compartido ambos layouts
 *   §6  Media          → imagen + placeholder + overlay
 *   §7  Caption        → nombre categoría sobre imagen (abajo-izquierda)
 *   §8  View-more      → botón "VER MÁS" (arriba-derecha)
 *   §9  Responsive     → @media de tamaño + capacidad/a11y al final
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS (desktop es la base, sin media query)
 *   Desktop      → base               (> 1024px)
 *   Tablet       → max-width: 1024px   (mosaico → 2 col + 3 filas)
 *   Mobile       → max-width: 767px    (mosaico → 1 col full-width)
 *
 *   Todos los @media de tamaño viven en §9. Hay además medias de CAPACIDAD
 *   (hover/pointer) y ACCESIBILIDAD (prefers-reduced-motion) en una sub-
 *   sección propia al final, que NO se consolidan con los de tamaño.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · WRAPPER + max-width estándar CR
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-shop-categories {
	width: 100%;
	max-width: var(--cr-container-max, 1440px);
	margin: 0 auto;
	padding: 0 var(--cr-container-pad, 32px);
	display: flex;
	flex-direction: column;
	gap: 40px;

	/* Defaults (usados si --zsc-* no se inyectan inline). */
	--zsc-cols: 5;
	--zsc-cols-tablet: 3;
	--zsc-cols-mobile: 2;
	--zsc-aspect: 4/5;

	/* Tokens internos. */
	--zsc-gap: clamp(12px, 1.4vw, 20px);
	--zsc-radius: 14px;
	--zsc-text: var(--cr-color-text, #fff);
	--zsc-text-muted: var(--cr-color-text-muted, rgba(255, 255, 255, 0.7));
	--zsc-primary: var(--cr-color-primary, #c00000);
	--zsc-bg-card: var(--cr-color-darker, #0f0f0f);
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · HEADER — eyebrow + título split
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-shop-categories__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.zenth-shop-categories__header--left {
	align-items: flex-start;
	text-align: left;
}

.zenth-shop-categories__header--center {
	align-items: center;
	text-align: center;
}

.zenth-shop-categories__eyebrow {
	margin: 0;
	font-family: var(--cr-font-body, "Montserrat", sans-serif);
	font-size: clamp(11px, 0.85vw, 13px);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--zsc-primary);
}

.zenth-shop-categories__title {
	margin: 0;
	font-family: var(--cr-font-display, "Super Brigade", sans-serif);
	font-size: clamp(38px, 5.5vw, 84px);
	line-height: 0.95;
	letter-spacing: -0.01em;
	font-style: italic;
	font-weight: 400;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.zenth-shop-categories__title-line {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25em;
	align-items: baseline;
}

.zenth-shop-categories__title-solid {
	color: #fff;
	-webkit-text-fill-color: #fff;
}

.zenth-shop-categories__title-outline {
	color: transparent;
	-webkit-text-fill-color: transparent !important;
	-webkit-text-stroke: var(--cr-outline-width, 1.5px) #fff;
	text-stroke: var(--cr-outline-width, 1.5px) #fff;
}

.zenth-shop-categories__title-outline--red {
	-webkit-text-stroke-color: var(--zsc-primary);
	text-stroke-color: var(--zsc-primary);
}

.zenth-shop-categories__title-outline--white {
	-webkit-text-stroke-color: #fff;
	text-stroke-color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · GRID MOSAICO (5 cards, layout asimétrico estilo CR)
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--zsc-gap);
	/* Altura total controlada por aspect del row × imagen alta */
	min-height: clamp(420px, 50vw, 720px);
}

/* Card 1 (Intercomunicadores) → col 1, span 2 rows → vertical alta */
.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__card--position-0 {
	grid-column: 1;
	grid-row: 1 / span 2;
}

/* Card 2 (Accesorios) → col 2, row 1 → mediana */
.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__card--position-1 {
	grid-column: 2;
	grid-row: 1;
}

/* Card 3 (Escapes) → col 2, row 2 → mediana */
.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__card--position-2 {
	grid-column: 2;
	grid-row: 2;
}

/* Card 4 (Indumentaria) → col 3, span 2 rows → vertical alta */
.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__card--position-3 {
	grid-column: 3;
	grid-row: 1 / span 2;
}

/* Card 5 (Merch CR) → col 4, span 2 rows → vertical alta */
.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__card--position-4 {
	grid-column: 4;
	grid-row: 1 / span 2;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · GRID UNIFORME (fallback / opción legacy)
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-shop-categories--layout-grid .zenth-shop-categories__grid {
	display: grid;
	grid-template-columns: repeat(var(--zsc-cols), 1fr);
	gap: var(--zsc-gap);
}

.zenth-shop-categories--layout-grid .zenth-shop-categories__card {
	aspect-ratio: var(--zsc-aspect);
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · CARD (compartida ambos layouts)
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-shop-categories__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--zsc-radius);
	background: var(--zsc-bg-card);
	text-decoration: none;
	color: inherit;
	isolation: isolate;
	transition: transform 0.35s ease;
	/* Llenar todo el alto del grid cell (clave para mosaico con row span). */
	height: 100%;
	min-height: 0;
}

.zenth-shop-categories__card:hover {
	transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · MEDIA — Imagen + Overlay + Caption sobre imagen
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-shop-categories__media {
	position: relative;
	width: 100%;
	/* Crece para llenar todo el espacio disponible en la card. */
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.zenth-shop-categories .zenth-shop-categories__img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

.zenth-shop-categories__card:hover .zenth-shop-categories__img {
	transform: scale(1.05);
}

.zenth-shop-categories__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--zsc-bg-card);
	color: rgba(255, 255, 255, 0.06);
	font-family: var(--cr-font-display, "Super Brigade", sans-serif);
	font-style: italic;
	font-size: clamp(60px, 10vw, 140px);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -0.02em;
}

.zenth-shop-categories__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0) 40%,
		rgba(0, 0, 0, 0.45) 75%,
		rgba(0, 0, 0, 0.85) 100%
	);
	transition: background 0.35s ease;
	pointer-events: none;
}

.zenth-shop-categories__card:hover .zenth-shop-categories__overlay {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.15) 0%,
		rgba(0, 0, 0, 0.25) 40%,
		rgba(0, 0, 0, 0.55) 75%,
		rgba(0, 0, 0, 0.9) 100%
	);
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · CAPTION — Nombre categoría sobre imagen (abajo-izquierda)
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-shop-categories__caption {
	position: absolute;
	left: clamp(16px, 1.8vw, 28px);
	right: clamp(16px, 1.8vw, 28px);
	bottom: clamp(16px, 1.8vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
	pointer-events: none;
}

.zenth-shop-categories__card-eyebrow {
	font-family: var(--cr-font-body, "Montserrat", sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--zsc-primary);
}

.zenth-shop-categories__name {
	margin: 0;
	font-family: var(--cr-font-display, "Super Brigade", sans-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(20px, 2vw, 32px);
	line-height: 1;
	letter-spacing: -0.005em;
	color: #fff;
	text-transform: uppercase;
	/* Permitir wrap para palabras largas (INTERCOMUNICADORES, INDUMENTARIA). */
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: none;
	max-width: 100%;
}

.zenth-shop-categories__count {
	font-family: var(--cr-font-body, "Montserrat", sans-serif);
	font-size: 12px;
	font-weight: 500;
	color: var(--zsc-text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · VIEW-MORE button (arriba-derecha, hover)
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-shop-categories__view-more {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: #fff;
	color: #000;
	font-family: var(--cr-font-body, "Montserrat", sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 999px;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 3;
	pointer-events: none;
	white-space: nowrap;
}

.zenth-shop-categories__view-more svg {
	flex-shrink: 0;
	stroke: currentColor;
}


/* ═══════════════════════════════════════════════════════════════════════
   §9 · RESPONSIVE — todos los @media de tamaño, de más ancho a más angosto
   ───────────────────────────────────────────────────────────────────────
   Tiers:  Tablet (≤1024) → Mobile (≤767). Las reglas base correspondientes
   están ANTES (§1–§8), así el cascade es claro. Al final, las medias de
   CAPACIDAD (hover/pointer) y ACCESIBILIDAD (prefers-reduced-motion), que
   NO son breakpoints de tamaño y no se consolidan con los de arriba.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── TABLET · max-width: 1024px ─────────────────── */
@media (max-width: 1024px) {
	/* §1 · Wrapper: gap más compacto */
	.zenth-shop-categories {
		gap: 28px;
	}

	/* §3 · Mosaico colapsa a 2 columnas + 3 filas */
	.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto;
		min-height: unset;
	}

	/* §3 · Card 1 (Intercomunicadores) → col 1-2 span, row 1 (full width arriba) */
	.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__card--position-0 {
		grid-column: 1 / span 2;
		grid-row: 1;
		aspect-ratio: 16 / 9;
	}

	/* §3 · Cards 2, 3, 4, 5 → grid 2×2 abajo */
	.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__card--position-1 {
		grid-column: 1;
		grid-row: 2;
		aspect-ratio: 4 / 5;
	}
	.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__card--position-2 {
		grid-column: 2;
		grid-row: 2;
		aspect-ratio: 4 / 5;
	}
	.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__card--position-3 {
		grid-column: 1;
		grid-row: 3;
		aspect-ratio: 4 / 5;
	}
	.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__card--position-4 {
		grid-column: 2;
		grid-row: 3;
		aspect-ratio: 4 / 5;
	}

	/* §4 · Grid uniforme: columnas de tablet */
	.zenth-shop-categories--layout-grid .zenth-shop-categories__grid {
		grid-template-columns: repeat(var(--zsc-cols-tablet), 1fr);
	}
}


/* ───────────────────────── MOBILE · max-width: 767px ──────────────────── */
@media (max-width: 767px) {
	/* §1 · Wrapper: padding mobile + gap más compacto */
	.zenth-shop-categories {
		padding: 0 var(--cr-container-pad-mobile, 16px);
		gap: 24px;
	}

	/* §2 · Título más chico */
	.zenth-shop-categories__title {
		font-size: clamp(32px, 11vw, 56px);
	}

	/* §3 · Mosaico colapsa a 1 columna full-width vertical */
	.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 12px;
	}

	.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__card {
		grid-column: 1 !important;
		grid-row: auto !important;
		aspect-ratio: 4 / 5;
	}

	.zenth-shop-categories--layout-mosaic-5 .zenth-shop-categories__card--position-0 {
		aspect-ratio: 16 / 10;
	}

	/* §4 · Grid uniforme: columnas de mobile */
	.zenth-shop-categories--layout-grid .zenth-shop-categories__grid {
		grid-template-columns: repeat(var(--zsc-cols-mobile), 1fr);
	}

	/* §7 · Caption: nombre más chico */
	.zenth-shop-categories__name {
		font-size: clamp(20px, 6vw, 28px);
	}

	/* §8 · View-more más compacto */
	.zenth-shop-categories__view-more {
		top: 12px;
		right: 12px;
		padding: 6px 10px;
		font-size: 10px;
	}
}


/* ═══════════════════════════════════════════════════════════════════════
   §9b · CAPACIDAD + ACCESIBILIDAD — hover/pointer + reduced-motion
   ───────────────────────────────────────────────────────────────────────
   Medias de capacidad del dispositivo y de accesibilidad. NO son
   breakpoints de tamaño: van aparte y sin consolidar con §9. Su contenido
   queda intacto.
   ═══════════════════════════════════════════════════════════════════════ */

/* §8 · View-more: en dispositivos con hover real, aparece al pasar el cursor */
@media (hover: hover) and (pointer: fine) {
	.zenth-shop-categories__card:hover .zenth-shop-categories__view-more {
		opacity: 1;
		transform: translateY(0);
	}
}

/* §8 · En touch: mostrar siempre, pero más sutil */
@media (hover: none) {
	.zenth-shop-categories__view-more {
		opacity: 0.92;
		transform: none;
	}
}

/* §5 · Focus visible de la card (no es media query; va junto a su contexto a11y) */
.zenth-shop-categories__card:focus-visible {
	outline: 2px solid var(--zsc-primary);
	outline-offset: 3px;
}

/* Reduced motion: anula transiciones y transforms de hover */
@media (prefers-reduced-motion: reduce) {
	.zenth-shop-categories__card,
	.zenth-shop-categories__img,
	.zenth-shop-categories__overlay,
	.zenth-shop-categories__view-more {
		transition: none !important;
	}

	.zenth-shop-categories__card:hover {
		transform: none !important;
	}

	.zenth-shop-categories__card:hover .zenth-shop-categories__img {
		transform: none !important;
	}
}