/* ==========================================================================
   Vértice Commerce 2.1 — core/img-treatments.css
   Tratamientos de imagen OPT-IN del motor: utilidades de mecánica pura que
   la piel o los parciales aplican POR CLASE. Ninguna se activa sola y
   ninguna de estas clases existe en el DOM v2.0 ⇒ encolada globalmente no
   puede alterar el render de un proyecto existente (§2.7): sin la clase no
   hay selector que matchee; con la clase pero sin tokens definidos, los
   fallbacks dejan el efecto en neutro o directamente invisible.

   QUÉ COMPONE (selectores que expone para que la piel aplique/vista):
   - .vc-img--frame        marco: borde + aire interno alrededor de la foto.
                           Va en la <img> directa o en su contenedor
                           (figure / div / a).
   - .vc-img--overlay      velo de color sobre la foto (tinte suave/scrim).
                           SOLO en un CONTENEDOR de la imagen: usa ::after y
                           los pseudo-elementos no existen en elementos
                           reemplazados como <img>.
   - .vc-img--duotone      monocromo al matiz del tinte (luminancia de la
                           foto + color de --img-tint). SOLO en un
                           CONTENEDOR (mismo motivo que overlay).
   - .vc-img--mask-arch    máscara de arco (remate superior semicircular).
                           En la <img> o el contenedor.
   - .vc-img--mask-circle  máscara circular (círculo inscripto centrado; con
                           foto cuadrada es un círculo perfecto). Ídem.

   TOKENS NUEVOS OPCIONALES QUE CONSUME (siempre con fallback, §2.7; la piel
   los define SOLO si su dirección los usa — ver el bloque comentado
   "Tokens opcionales v2.1" en design/tokens.css; definirlos CON unidad,
   se usan dentro de calc()):
   - --img-frame-w   ancho del borde del marco (fallback: 1px)
   - --img-radius    radio de esquinas de los tratamientos (fallback: 0px)
   - --img-tint      color del velo / duotono (fallback: transparent ⇒
                     overlay y duotone SIN efecto visible)
   Tokens v2.0 garantizados que consume sin fallback: --line, --sp-2.

   FOCO (a11y): no apliques las máscaras (clip-path) al elemento ENFOCABLE
   (un <a> contenedor): el clip recorta también el pintado del outline y se
   come el anillo de foco. Aplicalas a la <img> o a un wrapper interno no
   interactivo; el link exterior conserva su anillo completo.

   Sin motion propio: estas utilidades no declaran transiciones ni
   animaciones (nada que gestionar bajo prefers-reduced-motion).
   ========================================================================== */

/* ------------------------------ Marco ----------------------------------- */
/* Borde + aire interno. display:block evita el descuadre de baseline si la
   clase va en la <img> inline. */
.vc-img--frame {
	display: block;
	padding: var(--sp-2);
	border: var(--img-frame-w, 1px) solid var(--line);
	border-radius: var(--img-radius, 0px);
}
/* Aplicado a un contenedor: la foto interior ocupa el ancho y acompaña el
   radio exterior menos el aire interno (clampeado a 0 — sin --img-radius
   definido queda recta, igual que en v2.0). */
.vc-img--frame > img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: max(calc(var(--img-radius, 0px) - var(--sp-2)), 0px);
}

/* ------------------------------ Velo ------------------------------------ */
/* Capa de tinte a intensidad fija (35%) sobre la foto: la piel gradúa la
   fuerza moviendo el alpha del propio --img-tint si necesita otra. Guard de
   @supports: sin color-mix no se emite el velo (mejora progresiva — el
   fallback ingenuo, tinte a opacidad plena, taparía la foto). */
.vc-img--overlay { position: relative; }

@supports (background: color-mix(in srgb, red 50%, transparent)) {
	.vc-img--overlay::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		border-radius: var(--img-radius, 0px);
		/* Sin --img-tint definido ⇒ transparent ⇒ velo invisible. */
		background: color-mix(in srgb, var(--img-tint, transparent) 35%, transparent);
	}
}

/* ------------------------------ Duotono --------------------------------- */
/* DECISIÓN DOCUMENTADA: el grayscale NO va como `filter` fijo en la <img>.
   El contrato exige "sin --img-tint definido ⇒ SIN efecto visible", y un
   filter incondicional grisaría las fotos aun sin tinte. La capa
   mix-blend-mode: color hace ambos pasos en uno — aplana la saturación de
   la foto Y la lleva al matiz de --img-tint (luminancia de la foto + color
   del tinte = duotono real) — y con tinte transparent es un no-op exacto.
   Guard de @supports imprescindible: sin soporte de mix-blend-mode, el
   background pintaría un bloque sólido sobre la foto. */
.vc-img--duotone { position: relative; }

@supports (mix-blend-mode: color) {
	.vc-img--duotone::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		border-radius: var(--img-radius, 0px);
		mix-blend-mode: color;
		background: var(--img-tint, transparent);
	}
	/* isolation: mix-blend-mode compone contra TODO el backdrop del stacking
	   context (se "comería" el fondo de la página donde la foto no cubre).
	   Aislar el contenedor limita el blend a la imagen. */
	.vc-img--duotone { isolation: isolate; }
}

/* ------------------------------ Máscaras -------------------------------- */
/* Recorte por clip-path (geometría de la máscara, no radio de UI). Sin
   soporte, la declaración se descarta sola y la foto queda rectangular:
   degradación correcta sin @supports.
   Arco: esquinas superiores con radio enorme ⇒ el navegador las reescala
   proporcionalmente hasta el semicírculo máximo que entra en el ancho. */
.vc-img--mask-arch { clip-path: inset(0 round 999px 999px 0 0); }

/* Círculo inscripto centrado: closest-side ⇒ nunca desborda el recorte en
   fotos rectangulares (con aspect-ratio 1 es un círculo perfecto). */
.vc-img--mask-circle { clip-path: circle(closest-side at 50% 50%); }