/* ==========================================================================
   Celia Noire — Lookbook
   Horizontal editorial strip, strict 4:5 portrait cards, generous negative
   space — a magazine spread you scroll through, not a carousel widget.
   ========================================================================== */

.cn-lookbook {
	--cn-focal-d: center center;
}

.cn-lookbook__head-shell {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Prev/Next — thin lines, not carousel buttons; sit beside the heading so
   they never sit over a photo.
   -------------------------------------------------------------------------- */

.cn-lookbook__nav {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
	padding-bottom: 0.4rem;
}

.cn-lookbook__nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--cn-fg);
	border: 1px solid var(--cn-rule);
	border-radius: 50%;
	transition: color var(--cn-dur-hover) var(--cn-ease),
	            border-color var(--cn-dur-hover) var(--cn-ease);
}

.cn-lookbook__nav-btn:hover,
.cn-lookbook__nav-btn:focus-visible {
	color: var(--cn-accent);
	border-color: var(--cn-accent);
}

.cn-lookbook__nav-btn:disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Strip
   -------------------------------------------------------------------------- */

.cn-lookbook__strip {
	display: flex;
	align-items: flex-start;
	gap: clamp(2rem, 4vw, 3.5rem);
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-inline: var(--cn-gutter);
	padding-bottom: 0.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;

	/* The sitewide champagne scrollbar (see base.css) is replaced here by
	   the progress line below the strip instead — a slim indicator reads
	   more like an editorial detail than a scrollbar sitting under a row
	   of photographs. */
	scrollbar-width: none;

	/* A soft fade at both edges hints there is more to scroll to, without a
	   visible arrow or button cluttering the strip. */
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--cn-gutter),
		#000 calc(100% - var(--cn-gutter)),
		transparent 100%
	);
}

.cn-lookbook__strip::-webkit-scrollbar {
	display: none;
}

/* Drag-to-scroll (see initLookbookDrag() in main.js) — mouse-only; touch and
   trackpad already scroll the strip natively and never see this cursor.
   A custom two-chevron mark reads as "this pans sideways" without resorting
   to a generic carousel hand icon; a plain rgba(...) outline behind the gold
   line keeps it legible over both dark and light frames. ew-resize is the
   fallback if the browser can't load a custom cursor image at all. */
@media (hover: hover) and (pointer: fine) {
	.cn-lookbook__strip {
		cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><polyline points='13,10 7,16 13,22' fill='none' stroke='rgba(10,10,10,0.55)' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/><polyline points='19,10 25,16 19,22' fill='none' stroke='rgba(10,10,10,0.55)' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/><polyline points='13,10 7,16 13,22' fill='none' stroke='%23C6A664' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/><polyline points='19,10 25,16 19,22' fill='none' stroke='%23C6A664' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") 16 16, ew-resize;
	}

	.cn-lookbook__strip.is-dragging {
		cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><polyline points='11,9 4,16 11,23' fill='none' stroke='rgba(10,10,10,0.6)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><polyline points='21,9 28,16 21,23' fill='none' stroke='rgba(10,10,10,0.6)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><polyline points='11,9 4,16 11,23' fill='none' stroke='%23C6A664' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><polyline points='21,9 28,16 21,23' fill='none' stroke='%23C6A664' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") 16 16, ew-resize;
	}
}

.cn-lookbook__strip.is-dragging,
.cn-lookbook__strip.is-dragging * {
	user-select: none;
}

/* --------------------------------------------------------------------------
   Card — strict 4:5, equal width and height, caption sits below the frame
   -------------------------------------------------------------------------- */

.cn-lookbook__card {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 0.85rem;
	scroll-snap-align: start;
}

.cn-lookbook__frame {
	position: relative;
	display: block;
	flex-shrink: 0;
	height: clamp(520px, 70vh, 780px);
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.cn-lookbook__image,
.cn-lookbook__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--cn-focal-d);
	transition: transform var(--cn-dur-zoom) var(--cn-ease),
	            filter var(--cn-dur-hover) var(--cn-ease);
}

/* Very subtle — a soft lift, not a dramatic zoom. */
.cn-lookbook__frame:hover .cn-lookbook__image,
.cn-lookbook__frame:focus-within .cn-lookbook__image {
	transform: scale(1.025);
	filter: brightness(1.03);
}

.cn-lookbook__caption {
	margin: 0;
	max-width: 32ch;
	font-family: var(--cn-font-display);
	font-style: italic;
	font-size: var(--cn-text-sm);
	line-height: 1.5;
	color: var(--cn-fg);
}

/* --------------------------------------------------------------------------
   Progress line — replaces the scrollbar with a slim, editorial indicator
   -------------------------------------------------------------------------- */

.cn-lookbook__progress-track {
	position: relative;
	height: 1px;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--cn-rule);
}

.cn-lookbook__progress-thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--cn-accent);
	transform-origin: left center;
	will-change: transform, width;
}

/* --------------------------------------------------------------------------
   Tablet — roughly 1.5–2 cards in view
   -------------------------------------------------------------------------- */

@media (min-width: 700px) and (max-width: 999px) {
	.cn-lookbook__frame {
		height: auto;
		width: 46vw;
	}
}

/* --------------------------------------------------------------------------
   Mobile — one card, a hint of the next
   -------------------------------------------------------------------------- */

@media (max-width: 699px) {
	.cn-lookbook__head-shell {
		align-items: center;
	}

	.cn-lookbook__strip {
		gap: 1.25rem;
		mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 1.25rem,
			#000 calc(100% - 1.25rem),
			transparent 100%
		);
	}

	.cn-lookbook__frame {
		height: auto;
		width: 82vw;
	}

	.cn-lookbook__nav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-lookbook__image,
	.cn-lookbook__progress-thumb {
		transition: none;
	}
}