/* ==========================================================================
   Celia Noire — Selected Work single (case study)
   ========================================================================== */

.cn-work-single {
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */

.cn-work-single__intro {
	max-width: 46rem;
	padding-top: clamp(3rem, 8vw, 6rem);
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.cn-work-single__title {
	margin: 0 0 0.75rem;
	font-family: var(--cn-font-display);
	font-weight: 400;
	font-size: clamp(2rem, 2.2vw + 1.3rem, 3.25rem);
	line-height: 1.1;
	color: var(--cn-fg-strong);
}

.cn-work-single__meta {
	margin: 0 0 1.5rem;
	font-size: var(--cn-text-xs);
	letter-spacing: var(--cn-tracking-wider);
	text-transform: uppercase;
	color: var(--cn-warm-gray);
}

.cn-work-single__lede {
	max-width: 40rem;
	margin: 0 0 1.5rem;
	font-size: var(--cn-text-sm);
	line-height: 1.7;
	color: var(--cn-fg);
}

.cn-work-single__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	margin: 0;
}

.cn-work-single__fact dt {
	margin-bottom: 0.3rem;
	font-size: var(--cn-text-xs);
	letter-spacing: var(--cn-tracking-wide);
	text-transform: uppercase;
	color: var(--cn-warm-gray);
}

.cn-work-single__fact dd {
	margin: 0;
	font-size: var(--cn-text-sm);
	color: var(--cn-fg);
}

.cn-work-single__fact a {
	color: var(--cn-accent);
}

/* --------------------------------------------------------------------------
   Lead media
   -------------------------------------------------------------------------- */

.cn-work-single__lead {
	--cn-focal-d: center center;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: clamp(3rem, 6vw, 5rem);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
}

.cn-work-single__lead-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--cn-focal-d);
}

/* --------------------------------------------------------------------------
   Video — poster first, plays only once the visitor presses Play
   -------------------------------------------------------------------------- */

.cn-work-single__video {
	position: relative;
	width: 100%;
	margin-bottom: clamp(3rem, 6vw, 5rem);
	overflow: hidden;
	background: var(--cn-noir);
}

/* Landscape (default): the frame fills the full-width band edge to edge. */
.cn-work-single__video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.cn-work-single__video-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Portrait: no dark stage — the page's own ivory surface shows straight
   through. Sized as its own editorial column (not stretched to the full
   width the landscape frame uses) with quiet, but not oversized, room
   above and below — a contained, uncropped 9:16 shape rather than a small
   rectangle stranded in a lot of leftover space. */
.cn-work-single__video--portrait {
	display: flex;
	justify-content: center;
	background: none;
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.cn-work-single__video--portrait .cn-work-single__video-frame {
	width: min(90vw, 560px);
	height: auto;
	aspect-ratio: 9 / 16;
}

/* cover, not contain — a genuinely 9:16 upload (and its poster, once
   requested in a matching proportional size above) fills this column
   exactly; cover only ever has to crop the rare upload that isn't quite
   exactly 9:16, instead of letterboxing everything with grey bars. */
.cn-work-single__video--portrait .cn-work-single__video-el {
	object-fit: cover;
}

.cn-work-single__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: rgba(10, 10, 10, 0.2);
	transition: background-color var(--cn-dur-hover) var(--cn-ease);
}

.cn-work-single__play:hover,
.cn-work-single__play:focus-visible {
	background: rgba(10, 10, 10, 0.34);
}

.cn-work-single__play[hidden] {
	display: none;
}

.cn-work-single__play-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding-left: 3px; /* optical centring for the play triangle */
	color: var(--cn-ivory);
	border: 1px solid rgba(250, 246, 241, 0.75);
	border-radius: 50%;
	transition: border-color var(--cn-dur-hover) var(--cn-ease),
	            transform var(--cn-dur-hover) var(--cn-ease);
}

.cn-work-single__play:hover .cn-work-single__play-icon,
.cn-work-single__play:focus-visible .cn-work-single__play-icon {
	border-color: var(--cn-gold);
	transform: scale(1.06);
}

.cn-work-single__controls {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 0.9rem 1.1rem;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0));
}

/* The [hidden] attribute needs the extra specificity here — a bare class
   selector alone ties with the UA stylesheet's [hidden] rule and, on
   cascade order, would otherwise lose to this file's own display:flex. */
.cn-work-single__controls[hidden] {
	display: none;
}

.cn-work-single__control {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--cn-ivory);
	transition: color var(--cn-dur-hover) var(--cn-ease);
}

.cn-work-single__control:hover,
.cn-work-single__control:focus-visible {
	color: var(--cn-gold);
}

/* --------------------------------------------------------------------------
   Gallery — masonry-style columns, each photo keeps its own ratio
   -------------------------------------------------------------------------- */

.cn-work-single__gallery {
	columns: 1;
	column-gap: clamp(1.5rem, 3vw, 2.5rem);
}

.cn-work-single__gallery-item {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	break-inside: avoid;
}

.cn-work-single__gallery-trigger {
	display: block;
	width: 100%;
	cursor: zoom-in;
}

.cn-work-single__gallery-image {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity var(--cn-dur-hover) var(--cn-ease);
}

.cn-work-single__gallery-trigger:hover .cn-work-single__gallery-image,
.cn-work-single__gallery-trigger:focus-visible .cn-work-single__gallery-image {
	opacity: 0.88;
}

@media (min-width: 768px) {
	.cn-work-single__gallery {
		columns: 2;
	}
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.cn-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Solid, not semi-transparent — against these bright photos even a 3%
	   see-through backdrop let the page underneath show through visibly. */
	background: var(--cn-noir);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--cn-dur-bg) var(--cn-ease),
	            visibility var(--cn-dur-bg) var(--cn-ease);
}

/* visibility (not the hidden attribute) keeps it out of the accessibility
   tree while still allowing the fade — same pattern as the mobile menu. */
.cn-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.cn-lightbox__stage {
	/* Being a flex item of .cn-lightbox blockifies inline-flex to flex
	   regardless, so display alone can't make this hug the image — it was
	   stretching to the full width of the viewport and invisibly covering
	   the prev/next buttons underneath it. width: fit-content is what
	   actually shrink-wraps it. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
	max-height: 100%;
	padding: clamp(1.5rem, 6vw, 4rem);
	transform: scale(0.97);
	transition: transform var(--cn-dur-bg) var(--cn-ease);
}

.cn-lightbox.is-open .cn-lightbox__stage {
	transform: scale(1);
}

.cn-lightbox__image {
	display: block;
	width: auto;
	height: auto;
	/* Percentage max-width against an auto/fit-content-sized parent is
	   unreliable (the two sizes are circularly dependent, so the browser
	   effectively treats the percentage as unconstrained) — viewport units
	   sidestep that instead of relying on the stage's own size. */
	max-width: calc(100vw - 6rem);
	max-height: calc(100vh - 6rem);
	object-fit: contain;
	opacity: 0;
	transition: opacity var(--cn-dur-hover) var(--cn-ease);
}

.cn-lightbox__image.is-visible {
	opacity: 1;
}

.cn-lightbox__close,
.cn-lightbox__nav {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--cn-ivory);
	transition: color var(--cn-dur-hover) var(--cn-ease);
}

.cn-lightbox__close:hover,
.cn-lightbox__close:focus-visible,
.cn-lightbox__nav:hover,
.cn-lightbox__nav:focus-visible {
	color: var(--cn-gold);
}

.cn-lightbox__close {
	top: clamp(0.75rem, 3vw, 1.75rem);
	right: clamp(0.75rem, 3vw, 1.75rem);
}

.cn-lightbox__nav--prev {
	left: clamp(0.5rem, 2vw, 1.5rem);
}

.cn-lightbox__nav--next {
	right: clamp(0.5rem, 2vw, 1.5rem);
}

.cn-lightbox__counter {
	position: absolute;
	left: 50%;
	bottom: clamp(1rem, 3vw, 1.75rem);
	transform: translateX(-50%);
	margin: 0;
	font-size: var(--cn-text-xs);
	letter-spacing: var(--cn-tracking-wide);
	color: rgba(250, 246, 241, 0.7);
}

@media (max-width: 599px) {
	.cn-lightbox__nav {
		width: 40px;
		height: 40px;
	}

	.cn-lightbox__nav--prev {
		left: 0.25rem;
	}

	.cn-lightbox__nav--next {
		right: 0.25rem;
	}
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.cn-work-single__lead {
		aspect-ratio: 4 / 5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-lightbox,
	.cn-lightbox__stage,
	.cn-lightbox__image,
	.cn-work-single__play,
	.cn-work-single__play-icon,
	.cn-work-single__control {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Media protection — casual right-click-save / drag-out deterrent only.
   Scoped to Work photos and video specifically (see initWorkMediaProtection()
   in main.js for the matching contextmenu/dragstart handling) — nothing
   sitewide is touched.
   -------------------------------------------------------------------------- */

.cn-work-single__lead-image,
.cn-work-single__video-el,
.cn-work-single__gallery-image,
.cn-lightbox__image {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-touch-callout: none;
}