/* ── Mega menú del header · [cl_mega_menu] ─────────────────────────────────
   Estructura (29 sep, aprobada por Liberman): Shop Gifts = ocasión · tipo · destinatario · precio
   + tarjeta destacada con foto (patrón "Featured" de brars.com); Events = tipos de evento + tarjeta
   a la cotización. Vive dentro de las plantillas "Mega Menu" del Theme Builder de UiCore.
   Radios: panel 12 (barras y paneles flotantes, como la navegación de H2), tarjetas 4,
   elementos internos 8, chips 4. Tokens: docs/02-spec.md. Prefijo cl-mm. ──────────────── */
.cl-mm {
	--cl-teal: #4F1731; /* vino desde la dirección suave (19 oct); el nombre se mantiene por compatibilidad */
	--cl-wine: #4F1731;
	--cl-cream: #F7F1E8;
	--cl-peach: #FFEFE3;
	--cl-peach-100: #FFFCFA;
	--cl-sand: #EBDCD1;
	--cl-muted: #5A514B;
	--cl-ink: #1C1A1B;
	--cl-accent: #AC326A;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 296px;
	gap: 40px;
	padding: 32px;
	background: var(--cl-peach-100);
	border: 1px solid var(--cl-sand);
	border-radius: 12px;
	box-shadow: 0 24px 48px -24px rgba(28, 26, 27, .28);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: left;
	color: var(--cl-ink);
}
.cl-mm svg { display: block; flex: none; width: 18px; height: 18px; transition: transform .3s ease; }

.cl-mm__main { display: flex; flex-direction: column; min-width: 0; }
.cl-mm__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 32px;
}
.cl-mm .cl-mm__title {
	margin: 0 0 12px;
	font: 600 12px/16px "Inter", system-ui, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cl-muted);
}
.cl-mm .cl-mm__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cl-mm .cl-mm__list li { margin: 0; padding: 0; }

/* Enlaces de las columnas: 36px de alto en desktop, 44px en táctil; subrayado en hover */
.cl-mm a.cl-mm__link {
	display: flex; align-items: center; min-height: 36px; padding: 0;
	font: 500 16px/24px "Inter", system-ui, sans-serif;
	letter-spacing: 0; text-transform: none;
	color: var(--cl-ink); text-decoration: none;
	transition: color .2s ease;
}
.cl-mm a.cl-mm__link:hover { color: var(--cl-accent); text-decoration: underline; text-underline-offset: 4px; }

.cl-mm a.cl-mm__all {
	display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
	margin-top: auto; padding-top: 28px;
	font: 600 15px/24px "Inter", system-ui, sans-serif;
	color: var(--cl-teal); text-decoration: none;
}
.cl-mm a.cl-mm__all:hover { text-decoration: underline; text-underline-offset: 4px; }
.cl-mm a.cl-mm__all:hover svg,
.cl-mm a.cl-mm__feature:hover .cl-mm__cta svg { transform: translateX(4px); }

/* Tarjeta destacada */
.cl-mm a.cl-mm__feature {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; flex-direction: column;
	background: var(--cl-cream);
	border-radius: 4px;
	color: var(--cl-ink); text-decoration: none;
}
.cl-mm__feature-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.cl-mm__feature-media img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s cubic-bezier(.2, 1, .2, 1);
}
.cl-mm a.cl-mm__feature:hover .cl-mm__feature-media img { transform: scale(1.05); }
.cl-mm__feature-copy { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.cl-mm__eyebrow {
	align-self: flex-start; padding: 2px 8px; border-radius: 4px;
	background: #F4D7E5; color: var(--cl-wine);
	font: 600 12px/18px "Inter", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
}
.cl-mm__feature-title { font: 600 24px/30px "Fraunces", Georgia, serif; }
.cl-mm__feature-text { font: 400 14px/20px "Inter", system-ui, sans-serif; color: var(--cl-muted); }
.cl-mm__cta {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
	font: 600 15px/24px "Inter", system-ui, sans-serif; color: var(--cl-teal);
}

/* Tarjeta de cotización (Events): vino con la forma de marca tono sobre tono */
.cl-mm a.cl-mm__feature--quote { justify-content: flex-end; min-height: 280px; background: var(--cl-wine); color: var(--cl-cream); }
.cl-mm a.cl-mm__feature--quote::before {
	content: ""; position: absolute; z-index: -1; right: -24px; bottom: -24px; width: 200px; height: 200px;
	background: rgba(0, 0, 0, .16);
	-webkit-mask: var(--cl-evt-shape) center / contain no-repeat;
	        mask: var(--cl-evt-shape) center / contain no-repeat;
	transition: transform .5s cubic-bezier(.2, 1, .2, 1);
}
.cl-mm a.cl-mm__feature--quote:hover::before { transform: scale(1.08) rotate(-4deg); }
.cl-mm__feature--quote .cl-mm__eyebrow { background: rgba(247, 241, 232, .16); color: var(--cl-cream); }
.cl-mm__feature--quote .cl-mm__feature-text { color: rgba(247, 241, 232, .8); }
.cl-mm__feature--quote .cl-mm__cta { color: var(--cl-cream); }

/* Tipos de evento: ícono = forma de marca sobre su color */
.cl-mm .cl-mm__list--events { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; }
.cl-mm a.cl-mm__evt {
	display: flex; align-items: center; gap: 14px; padding: 8px; margin: 0 -8px;
	border-radius: 8px; color: var(--cl-ink); text-decoration: none;
	transition: background-color .2s ease;
}
.cl-mm a.cl-mm__evt:hover { background: var(--cl-peach); }
.cl-mm__evt-icon {
	position: relative; flex: none; width: 44px; height: 44px; border-radius: 8px;
	background: var(--cl-evt);
}
.cl-mm__evt-icon::after {
	content: ""; position: absolute; inset: 9px;
	background: var(--cl-cream);
	-webkit-mask: var(--cl-evt-shape) center / contain no-repeat;
	        mask: var(--cl-evt-shape) center / contain no-repeat;
}
.cl-mm__evt.is-light .cl-mm__evt-icon::after { background: var(--cl-wine); }
.cl-mm__evt-copy { display: flex; flex-direction: column; min-width: 0; }
.cl-mm__evt-name { font: 500 16px/22px "Inter", system-ui, sans-serif; }
.cl-mm__evt-badge { font: 400 13px/18px "Inter", system-ui, sans-serif; color: var(--cl-muted); }
.cl-mm a.cl-mm__evt:hover .cl-mm__evt-name { color: var(--cl-accent); }

/* Integración con el header de UiCore (desktop). UiCore abre el panel con :hover;
   cl-mega-menu.js suma .cl-mm-open (foco) y .cl-mm-closed (Esc). */
@media (min-width: 1025px) {
	/* UiCore pone sombra con !important en .uicore-menu ul.sub-menu: la sombra la lleva .cl-mm */
	.uicore-navbar nav.uicore ul.sub-menu.uicore-megamenu { background: none; box-shadow: none !important; border-radius: 0; }
	.uicore-navbar nav .menu-item-has-megamenu.cl-mm-open > .sub-menu { opacity: 1; pointer-events: all; transform: none !important; }
	.uicore-navbar nav .menu-item-has-megamenu.cl-mm-closed > .sub-menu { opacity: 0 !important; pointer-events: none !important; }
}

/* Tablet y móvil: el panel vive dentro del menú lateral de UiCore (submenú deslizable) */
@media (max-width: 1024px) {
	.cl-mm {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px; padding: 8px 10px 24px; /* 10 + 10 del menú = 20, alineado con "Back" */
		background: none; border: 0; border-radius: 0; box-shadow: none;
	}
	.cl-mm__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
	.cl-mm a.cl-mm__link { min-height: 44px; font-size: 15px; line-height: 20px; }
	.cl-mm a.cl-mm__all { padding-top: 16px; }
	.cl-mm .cl-mm__list--events { grid-template-columns: minmax(0, 1fr); }
	.cl-mm a.cl-mm__evt { margin: 0; padding: 6px 0; }
	.cl-mm a.cl-mm__feature { flex-direction: row; align-items: stretch; }
	.cl-mm__feature-media { flex: none; width: 112px; aspect-ratio: auto; }
	.cl-mm__feature-copy { padding: 14px 16px; }
	.cl-mm__feature-title { font-size: 20px; line-height: 26px; }
	.cl-mm a.cl-mm__feature--quote { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.cl-mm svg, .cl-mm a, .cl-mm__feature-media img, .cl-mm a.cl-mm__feature--quote::before { transition: none; }
}