/*
 * PLUGIN/casa-lopez/assets/css/dims.css — Estilos de la tarjeta de medidas.
 *
 * Sólo se carga en la ficha de producto (is_product()). Se encola desde
 * modules/dims-schematic.php via wp_enqueue_style.
 *
 * ESTRUCTURA (es todo lo que hay — el módulo no emite nada más):
 *   .clh-dims-card   — contenedor.
 *   .clh-dims-card h3 — el título "Medidas", en versalitas.
 *   .clh-dims-list   — las filas: etiqueta a la izquierda, valor a la derecha.
 *   .clh-fade-in     — la entrada al cambiar de variación.
 *
 * El archivo tenía 222 líneas y describía arriba media docena de clases que ya
 * no emite nadie (.clh-dims-row, .clh-dims-val, .clh-dims-lbl, .clh-dims-img,
 * .clh-dims-svg-wrap, .clh-dims-media, .clh-dims-grid, .clh-dims-hint y todo el
 * bloque de puntos cardinales). Eran los restos de los dos esquemas anteriores
 * —el isométrico y el cardinal—, verificados uno por uno contra el PHP y el JS
 * antes de borrarlos. Si volvés a necesitar alguno, está en el historial.
 *
 * VARIABLES PROPIAS (definidas en .clh-dims-card):
 *   --clh-ink, --clh-muted, --clh-line, --clh-brd, --clh-bg, --clh-radius, --clh-shadow
 *
 * // INCONSISTENCIA: este archivo NO usa los tokens del tema (main.css). Los
 * // colores están definidos acá. Si cambia la paleta, hay que tocar los dos.
 *
 * CÓMO MODIFICAR:
 *   - Fondo de la tarjeta: --clh-bg (default: transparent).
 *   - Filete entre filas: --clh-line.
 *   - Ancho de la lista: max-width en .clh-dims-list.
 */

.clh-dims-card {
	--clh-ink:    #1c1c1c;
	--clh-muted:  #9a9086;
	/* El filete de las filas tiene su PROPIA variable, y no es un capricho: antes
	   salía de `var(--clh-brd, #e0d8d2)`, y como --clh-brd está definida acá abajo
	   como `transparent`, la variable ganaba y el fallback no se usaba nunca. O
	   sea que los filetes existían en el CSS y eran invisibles en pantalla: las
	   filas se veían como palabras sueltas flotando. Separadas, el borde de la
	   tarjeta puede seguir siendo transparente sin arrastrarse los filetes. */
	--clh-line:   #e7e1da;
	--clh-brd:    transparent;
	--clh-bg:     transparent;
	--clh-radius: 0px;
	--clh-shadow: none;

	margin-top: 20px;
	padding: 16px 18px;
	background: var(--clh-bg);
	border: 1px solid var(--clh-brd);
	border-radius: var(--clh-radius);
	box-shadow: var(--clh-shadow);
	display: grid;
	gap: 12px;
}

/* Piel blanca (CLH_DIMS_SKIN === 'white') */
.clh-dims-card.clh-skin-white {
	--clh-brd:    #e0d8d2;
	--clh-bg:     #fff;
	--clh-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.clh-dims-card h3 {
	margin: 0;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--clh-muted);
}

/* ── Las filas ───────────────────────────────────────────────────────
   El ancho se acota a 26rem. Sin eso, la columna del resumen mide ~700px en
   escritorio y `space-between` mandaba la etiqueta y el valor a extremos
   opuestos, con 500px de aire en el medio: dejaba de leerse como una fila. */
.clh-dims-list {
	display: flex;
	flex-direction: column;
	max-width: 26rem;
}

.clh-dims-list p {
	margin: 0;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .5rem 0;
	font-size: .875rem;
	color: var(--clh-ink);
	border-bottom: 1px solid var(--clh-line);
}

.clh-dims-list p:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}

.clh-dims-list p b {
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--clh-muted);
	white-space: nowrap;
}

/* El valor manda: es lo único que el cliente vino a buscar. */
.clh-dims-list p span {
	text-align: right;
}

/* Entrada al cambiar de variación */
.clh-fade-in {
	animation: clhFade .3s ease-out 1;
}

@keyframes clhFade {
	from { opacity: 0; transform: translateY(3px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.clh-fade-in { animation: none; }
}