/* =========================================================
   LORENE FILMSTRIP FEATURE

   MOBILE-FIRST RESPONSIVE ARCHITECTURE

   Mobile:
   Base styles / 0px–600px
   - Vertical filmstrip
   - Floating teaser beneath active frame

   Tablet:
   601px–900px
   - Vertical filmstrip left
   - Sticky teaser right

   Desktop / laptop:
   901px+
   - Wide horizontal filmstrip marquee
   - Swappable teaser content below

   Component responsibilities:

   - Filmstrip layout
   - Filmstrip artwork
   - Photograph windows
   - Image swap states
   - Teaser panel
   - Responsive feature composition

   Global curtain, spotlight, navigation and detail-page
   styles live in style.css.
========================================================= */


/* =========================================================
   FEATURE SHELL
   MOBILE DEFAULT
========================================================= */

.lorene-feature-shell {
	--lorene-mobile-strip-width: 88vw;

	position: relative;

	display: flex !important;

	flex-direction: column;
	align-items: center;

	width: 100vw !important;
	max-width: none !important;

	margin-left:
		calc(50% - 50vw) !important;

	margin-right:
		calc(50% - 50vw) !important;

	padding: 0 !important;

	box-sizing: border-box;
}


/*
 * These are the two visible children of the feature shell.
 *
 * Gutenberg constrained-layout margins must not position
 * them once this component takes control of its own layout.
 */

.lorene-feature-shell
> .lorene-filmstrip-stage,

.lorene-feature-shell
> .lorene-teaser-panel {
	margin: 0 !important;
}


/* =========================================================
   FILMSTRIP STAGE
   MOBILE DEFAULT
========================================================= */

.lorene-filmstrip-stage {
	position: relative;

	z-index: 2;

	isolation: isolate;

	overflow: hidden;

	width:
		var(--lorene-mobile-strip-width);

	max-width: none;

	flex: none;

	margin: 0 !important;

	aspect-ratio: 478 / 1526;
}


/* =========================================================
   VERTICAL FILMSTRIP ARTWORK
   MOBILE DEFAULT
========================================================= */

.lorene-filmstrip-stage::after {
	content: "";

	position: absolute;

	z-index: 10;

	pointer-events: none;

	left: -57.113%;
	top: 0;

	width: 214.226%;
	height: 100.655%;

	background-image:
		url("../images/film_port.webp");

	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}


/* =========================================================
   IMAGE WINDOWS
   MOBILE DEFAULT
========================================================= */

.lorene-frame {
	position: absolute;

	z-index: 1;

	display: block;

	margin: 0;
	padding: 0;

	border: 0;

	background: #000;

	overflow: hidden;

	cursor: pointer;

	touch-action: manipulation;

	-webkit-appearance: none;
	appearance: none;
}


/* ---------------------------------------------------------
   TOP FRAME
--------------------------------------------------------- */

.lorene-frame--a {
	left: 17.155%;
	top: 9.764%;

	width: 65.690%;
	height: 24.902%;
}


/* ---------------------------------------------------------
   MIDDLE FRAME
--------------------------------------------------------- */

.lorene-frame--b {
	left: 17.364%;
	top: 37.942%;

	width: 65.272%;
	height: 24.509%;
}


/* ---------------------------------------------------------
   BOTTOM FRAME
--------------------------------------------------------- */

.lorene-frame--c {
	left: 17.364%;
	top: 65.858%;

	width: 65.272%;
	height: 24.443%;
}


/* =========================================================
   PHOTOGRAPH LAYERS
========================================================= */

.lorene-frame__image {
	position: absolute;

	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position: 50% 38%;
}


/* Base photograph */

.lorene-frame__base {
	z-index: 1;
}


/* Sepia / dramatic swapped photograph */

.lorene-frame__swap {
	z-index: 2;

	opacity: 0;

	transition:
		opacity 280ms ease-in-out;
}


/* =========================================================
   TOUCH / KEYBOARD ACTIVE STATE
========================================================= */

.lorene-frame.is-active
.lorene-frame__swap {
	opacity: 1;
}


/* =========================================================
   KEYBOARD FOCUS
========================================================= */

.lorene-frame:focus-visible {
	outline:
		3px solid #fff;

	outline-offset:
		-7px;
}


/* =========================================================
   TEASER PANEL
   MOBILE DEFAULT

   Hidden until a frame becomes active.

   Panel floats over the filmstrip immediately beneath
   the active photograph.
========================================================= */

.lorene-feature-shell
> .lorene-teaser-panel {
	position: absolute;

	left: 50%;
	top: 0;

	z-index: 20;

	box-sizing: border-box;

	width:
		var(--lorene-mobile-strip-width)
		!important;

	max-width:
		none !important;

	margin:
		0 !important;

	padding:
		1rem 1.15rem
		!important;

	transform:
		translateX(-50%);

	background:
		rgba(0, 0, 0, 0.44);

	-webkit-backdrop-filter:
		blur(20px)
		brightness(0.44);

	backdrop-filter:
		blur(20px)
		brightness(0.44);

	border:
		0;

	border-radius:
		0;

	box-shadow:
		none;

	color:
		#fff;

	opacity:
		0;

	visibility:
		hidden;

	pointer-events:
		none;

	transition:
		opacity 180ms ease;
}


/* ---------------------------------------------------------
   ACTIVE TEASER STATE
--------------------------------------------------------- */

.lorene-feature-shell:has(
	.lorene-frame.is-active
)
> .lorene-teaser-panel {
	opacity:
		1;

	visibility:
		visible;

	pointer-events:
		auto;
}


/* ---------------------------------------------------------
   TOP FRAME ACTIVE

   Frame bottom:
   9.764% + 24.902% = 34.666%
--------------------------------------------------------- */

.lorene-feature-shell:has(
	.lorene-frame--a.is-active
)
> .lorene-teaser-panel {
	top:
		34.666%;
}


/* ---------------------------------------------------------
   MIDDLE FRAME ACTIVE

   Frame bottom:
   37.942% + 24.509% = 62.451%
--------------------------------------------------------- */

.lorene-feature-shell:has(
	.lorene-frame--b.is-active
)
> .lorene-teaser-panel {
	top:
		62.451%;
}


/* ---------------------------------------------------------
   BOTTOM FRAME ACTIVE

   Frame bottom:
   65.858% + 24.443% = 90.301%
--------------------------------------------------------- */

.lorene-feature-shell:has(
	.lorene-frame--c.is-active
)
> .lorene-teaser-panel {
	top:
		90.301%;
}


/* =========================================================
   TEASER TYPOGRAPHY
   MOBILE DEFAULT
========================================================= */

.lorene-teaser-panel p {
	margin-top:
		0;

	margin-bottom:
		0.75rem;

	font-size:
		0.95rem;

	line-height:
		1.45;
}


.lorene-teaser-panel p:last-child {
	margin-bottom:
		0;
}


.lorene-teaser-panel h2,
.lorene-teaser-panel h3 {
	margin-top:
		0;

	line-height:
		1.1;
}


.lorene-teaser-panel a {
	color:
		inherit;

	text-underline-offset:
		0.2em;
}


/* =========================================================
   TEASER CONTENT ARCHITECTURE

   .lorene-teaser-display
   = one visible teaser area

   .lorene-teaser-content--actor
   .lorene-teaser-content--vocalist
   .lorene-teaser-content--producer
   = hidden CMS source content

   JavaScript copies the appropriate CMS source content
   into .lorene-teaser-display.

   Source groups remain visible in Gutenberg.
========================================================= */

.lorene-teaser-display {
	margin:
		0 !important;
}


.lorene-teaser-content {
	display:
		none;

	margin:
		0 !important;
}


/* Gutenberg editor */

.editor-styles-wrapper
.lorene-teaser-content {
	display:
		block !important;
}


/* =========================================================
   ON-IMAGE ROLE LABEL

   Text comes from each frame's data-lorene-label
   attribute.
========================================================= */

.lorene-frame::after {
	content:
		attr(data-lorene-label);

	position:
		absolute;

	left:
		50%;

	bottom:
		7%;

	z-index:
		4;

	transform:
		translate(-50%, 0.5rem);

	padding:
		0.35rem 0.7rem;

	background:
		rgba(0, 0, 0, 0.58);

	-webkit-backdrop-filter:
		blur(6px);

	backdrop-filter:
		blur(6px);

	color:
		#f2e5c8;

	font-size:
		clamp(0.8rem, 1.3vw, 1.05rem);

	font-weight:
		600;

	letter-spacing:
		0.08em;

	text-transform:
		uppercase;

	line-height:
		1;

	white-space:
		nowrap;

	text-shadow:
		0 1px 3px
		rgba(0, 0, 0, 0.75);

	opacity:
		0;

	pointer-events:
		none;

	transition:
		opacity 180ms ease,
		transform 180ms ease;
}


/* Touch / keyboard active state */

.lorene-frame.is-active::after,
.lorene-frame:focus-visible::after {
	opacity:
		1;

	transform:
		translate(-50%, 0);
}


/* =========================================================
   TABLET
   601px–900px

   Vertical filmstrip | teaser
========================================================= */

@media (min-width: 601px) and (max-width: 900px) {

	/* -----------------------------------------------------
	   FEATURE COMPOSITION
	----------------------------------------------------- */

	.lorene-feature-shell {
		position:
			relative;

		display:
			grid !important;

		grid-template-columns:
			min(45vw, 24rem)
			minmax(12rem, 16rem);

		column-gap:
			clamp(1rem, 3vw, 2rem);

		justify-content:
			start;

		align-items:
			start;

		width:
			100% !important;

		max-width:
			none !important;

		margin-left:
			auto !important;

		margin-right:
			auto !important;
	}


	/* -----------------------------------------------------
	   TABLET VERTICAL FILMSTRIP
	----------------------------------------------------- */

	.lorene-feature-shell
	> .lorene-filmstrip-stage {
		width:
			min(45vw, 24rem);

		max-width:
			none;

		align-self:
			start;

		margin:
			0 !important;
	}


	/* -----------------------------------------------------
	   TABLET TEASER
	----------------------------------------------------- */

	.lorene-feature-shell
	> .lorene-teaser-panel {
		position:
			sticky;

		left:
			auto;

		top:
			6.5rem;

		width:
			100% !important;

		max-width:
			none !important;

		align-self:
			start;

		margin:
			0 !important;

		padding:
			clamp(1rem, 2.5vw, 1.5rem)
			clamp(1rem, 2.75vw, 1.5rem)
			!important;

		transform:
			none;

		background:
			rgba(0, 0, 0, 0.40);

		-webkit-backdrop-filter:
			blur(20px)
			brightness(0.46);

		backdrop-filter:
			blur(20px)
			brightness(0.46);

		border-radius:
			0.5rem;

		opacity:
			1;

		visibility:
			visible;

		pointer-events:
			auto;
	}


	/*
	 * Mobile active-frame positioning has higher selector
	 * specificity, so explicitly return all tablet teaser
	 * states to the tablet sticky position.
	 */

	.lorene-feature-shell:has(
		.lorene-frame--a.is-active
	)
	> .lorene-teaser-panel,

	.lorene-feature-shell:has(
		.lorene-frame--b.is-active
	)
	> .lorene-teaser-panel,

	.lorene-feature-shell:has(
		.lorene-frame--c.is-active
	)
	> .lorene-teaser-panel {
		top:
			6.5rem;
	}


	/* -----------------------------------------------------
	   TABLET TYPOGRAPHY
	----------------------------------------------------- */

	.lorene-teaser-panel p {
		max-width:
			34ch;

		margin-bottom:
			0.85rem;

		font-size:
			clamp(0.9rem, 1.8vw, 1rem);

		line-height:
			1.5;
	}


	.lorene-teaser-panel h2,
	.lorene-teaser-panel h3 {
		margin-bottom:
			0.65rem;
	}

}


/* =========================================================
   DESKTOP / LAPTOP
   901px+

   Wide horizontal filmstrip marquee
   with swappable teaser content underneath.
========================================================= */

@media (min-width: 901px) {

	/* -----------------------------------------------------
	   FEATURE COMPOSITION
	----------------------------------------------------- */

	.lorene-feature-shell {
		position:
			relative;

		display:
			grid !important;

		grid-template-columns:
			minmax(0, 1fr);

		row-gap:
			clamp(1.5rem, 2.5vw, 2.5rem);

		align-items:
			start;

		justify-items:
			stretch;

		width:
			100% !important;

		max-width:
			var(
				--wp--style--global--wide-size,
				90rem
			)
			!important;

	margin-top:
		-5.5rem !important;

	margin-left:
		auto !important;

	margin-right:
		auto !important;
	}


	/* -----------------------------------------------------
	   DESKTOP HORIZONTAL FILMSTRIP MARQUEE
	----------------------------------------------------- */

	.lorene-feature-shell
	> .lorene-filmstrip-stage {
		width:
			100%;

		max-width:
			100%;

		align-self:
			start;

		justify-self:
			stretch;

		margin:
			0 !important;

		aspect-ratio:
			1514 / 714;
	}


	/* -----------------------------------------------------
	   HORIZONTAL FILMSTRIP ARTWORK
	----------------------------------------------------- */

	.lorene-filmstrip-stage::after {
		left:
			-0.727%;

		top:
			-18.487%;

		width:
			101.453%;

		height:
			143.417%;

		background-image:
			url("../images/film_land.webp");
	}


	/* -----------------------------------------------------
	   LEFT FRAME
	----------------------------------------------------- */

	.lorene-frame--a {
		left:
			8.058%;

		top:
			8.964%;

		width:
			26.684%;

		height:
			81.653%;
	}


	/* -----------------------------------------------------
	   CENTRE FRAME
	----------------------------------------------------- */

	.lorene-frame--b {
		left:
			36.790%;

		top:
			8.964%;

		width:
			26.486%;

		height:
			81.653%;
	}


	/* -----------------------------------------------------
	   RIGHT FRAME
	----------------------------------------------------- */

	.lorene-frame--c {
		left:
			65.258%;

		top:
			8.964%;

		width:
			26.684%;

		height:
			81.653%;
	}


	/* Desktop portrait crop */

	.lorene-frame__image {
		object-position:
			50% 43%;
	}


	/* -----------------------------------------------------
	   DESKTOP TEASER
	   Below filmstrip marquee.
	----------------------------------------------------- */

	.lorene-feature-shell
	> .lorene-teaser-panel {
		position:
			relative;

		left:
			auto;

		top:
			auto;

		width:
			min(100%, 60rem)
			!important;

		max-width:
			60rem !important;

		justify-self:
			center;

		align-self:
			start;

		margin:
			0 !important;

		padding:
			clamp(1.25rem, 2vw, 2rem)
			clamp(1.25rem, 2.25vw, 2.25rem)
			!important;

		transform:
			none;

		background:
			rgba(0, 0, 0, 0.36);

		-webkit-backdrop-filter:
			blur(20px)
			brightness(0.48);

		backdrop-filter:
			blur(20px)
			brightness(0.48);

		border-radius:
			0.5rem;

		opacity:
			1;

		visibility:
			visible;

		pointer-events:
			auto;
	}


	/*
	 * Neutralize the mobile active-frame top positions.
	 */

	.lorene-feature-shell:has(
		.lorene-frame--a.is-active
	)
	> .lorene-teaser-panel,

	.lorene-feature-shell:has(
		.lorene-frame--b.is-active
	)
	> .lorene-teaser-panel,

	.lorene-feature-shell:has(
		.lorene-frame--c.is-active
	)
	> .lorene-teaser-panel {
		top:
			auto;
	}


	/* -----------------------------------------------------
	   DESKTOP TYPOGRAPHY
	----------------------------------------------------- */

	.lorene-teaser-panel p {
		max-width:
			60ch;

		margin-bottom:
			1rem;

		font-size:
			clamp(1rem, 1.15vw, 1.125rem);

		line-height:
			1.55;
	}


	.lorene-teaser-panel h2,
	.lorene-teaser-panel h3 {
		margin-bottom:
			0.75rem;
	}

}


/* =========================================================
   DESKTOP HOVER
   FINE POINTER DEVICES ONLY
========================================================= */

@media
	(min-width: 901px)
	and (hover: hover)
	and (pointer: fine) {

	.lorene-frame:hover
	.lorene-frame__swap {
		opacity:
			1;
	}


	.lorene-frame:hover::after {
		opacity:
			1;

		transform:
			translate(-50%, 0);
	}

}


/* =========================================================
   COMPONENT REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.lorene-frame__swap,
	.lorene-frame::after,
	.lorene-feature-shell
	> .lorene-teaser-panel {
		transition:
			none;
	}

}