/* PhotoSlot — extraído de src/lib/components/PhotoSlot.svelte.
   Scopeado con anidamiento nativo bajo su raíz para evitar colisiones
   de nombres de clase al pasar de CSS scoped de Svelte a CSS global. */

.slot {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: repeating-linear-gradient(
		48deg,
		var(--surface),
		var(--surface) 11px,
		color-mix(in srgb, var(--surface) 84%, var(--fg)) 11px,
		color-mix(in srgb, var(--surface) 84%, var(--fg)) 22px
	);

	.photo {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Duotono: empuja la foto hacia la paleta sin perder su contenido. */
	.tone {
		position: absolute;
		inset: 0;
		background: var(--bg);
		mix-blend-mode: color;
		opacity: 0.5;
		pointer-events: none;
	}

	.ph-label {
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 16px;
		font-family: var(--sans);
		font-size: var(--fs-micro);
		font-weight: 600;
		letter-spacing: 0.04em;
		color: var(--fg-muted);
	}
}