/**
 * "Find your knife" picker photo.
 *
 * The photo frame (.cur-picker-photo, sized in Oxygen) holds two stacked photo
 * layers that crossfade on chip hover (tag-picker.js). The warm frame + faded
 * Curel logo sit behind them, so tags without an image fade to that placeholder,
 * like the slider cards. The layers are absolute, so the swapped image covers a
 * fixed box without ever changing the frame's height.
 */

.cur-picker-photo {
	position: relative;
	overflow: hidden;
	background-color: #F4F2EE;
	min-height: 320px; /* floor so the absolute photos always have a box */
}

/* Faded Curel logo behind the photos (revealed when they fade out). */
.cur-picker-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url("../img/curel-logo.svg") center / 28% no-repeat;
	opacity: 0.12;
	filter: grayscale(1);
	pointer-events: none;
}

/* The crossfading photo layers cover the frame at a fixed size and fade on
   opacity. Positioned absolute so a swapped image never changes the height. */
.cur-picker-photo .cur-picker-image,
.cur-picker-photo .cur-picker-layer,
.cur-picker-photo [data-curel-picker-image] {
	position: absolute !important;
	inset: 0;
	z-index: 1;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
	transition: opacity 0.55s ease;
}

/* Keep the caption above both photo layers, so a hovered tag's image never
   covers it. The label is positioned over the photo in Oxygen; z-index alone
   lifts it once it is positioned (no position override, to not disturb Oxygen). */
.cur-picker-photo .cur-picker-label,
.cur-picker-photo [data-curel-picker-label] {
	z-index: 2;
}

/* Chips: solid dark fill on hover (like staging). Shipped here so it does not
   depend on Winden compiling the hover:bg-fg utility. */
.cur-picker-chip:hover {
	background-color: var(--color-fg, #0a0a0a);
	border-color: var(--color-fg, #0a0a0a);
	color: #ffffff;
}