/**
 * The Wicked — Work Accordion (horizontal film-panel accordion).
 * Recreates the #work "HORIZONTAL ACCORDION" block from the design reference.
 * Control-driven layout values arrive as CSS custom properties on the wrapper
 * so the mobile-reflow media query can override the property directly.
 */

/* NOTE: gap & height are set as REAL CSS properties by their controls (this
   Elementor build's editor drops control-set custom properties). `--tw-wa-rail`
   (collapsed size — panel WIDTH on desktop, panel HEIGHT on mobile) and the
   text-shadow stay var-driven: a dual-axis responsive value and a 4-part
   composite can't be a single direct property, so those two controls preview
   only their defaults in the editor (they still apply on the published page). */
.tw-work-accordion {
	--tw-wa-rail: 76px; /* collapsed panel size (width desktop / height mobile) */
	--tw-wa-ease: cubic-bezier(.6, 0, .2, 1);
	/* Cover-mode fixed image size — a FIXED length (not panel-relative), so the
	   image renders at one constant scale and a resizing panel only slides the
	   crop window over it (never zooms). Must be >= the widest an open panel can
	   get: on desktop that is at most the strip width (1400px default); on mobile
	   at most the open-panel height (68vh, see .is-active below). */
	--tw-wa-cover-w: 1400px; /* desktop: image width */
	--tw-wa-cover-h: 80vh;   /* mobile: image height */
}

.tw-wa {
	display: flex;
	gap: 8px;
	height: min(72vh, 640px);
	width: 100%;
	max-width: var(--tw-maxw); /* default 1400px; the "Max width" control overrides this */
	margin: 0 auto;
}

/* ---- Panel ---- */
.tw-wa__panel {
	position: relative;
	flex: 0 1 var(--tw-wa-rail);
	min-width: var(--tw-wa-rail);
	height: 100%;
	cursor: pointer;
	background: var(--tw-panel-bg);
	transition: flex-grow .7s var(--tw-wa-ease);
	outline: none;
}

/* Clips ONLY the image (which is sized larger than the rail and cropped like a
   moving window). Deliberately separate from the panel so the panel itself does
   NOT clip — otherwise the vertical title's text-shadow gets sheared off at the
   rail edge when it's offset toward that edge. */
.tw-wa__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.tw-wa__panel.is-active {
	flex-grow: 1;
	cursor: default;
}

.tw-wa__panel:focus-visible {
	box-shadow: inset 0 0 0 2px var(--tw-tan);
}

/* Image is sized by HEIGHT only (constant axis on desktop), so the panel crops
   it like a moving window instead of rescaling as it resizes. The HORIZONTAL
   placement (left/transform/object-position) and how WIDE the image renders
   (min-width) are owned by the Image-fill / Reveal-anchor mode classes below —
   both keep the render size independent of the panel width, so a resizing panel
   only slides the crop window; it never zooms the pixels.
   Scoped under .tw-work-accordion to outrank Elementor's `.elementor img`
   reset (height:auto; max-width:100%), which would otherwise force width-fit. */
.tw-work-accordion .tw-wa__img {
	position: absolute;
	top: 0;
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
	display: block;
}

/* ---- Image fill (desktop: panel changes WIDTH) ----
   Both modes hold the image at a FIXED render width, so resizing a panel only
   moves the crop window — it never rescales the image (was the old zoom bug:
   `min-width:100%` tied the width to the panel, then object-fit re-covered). */
.tw-wa--fill-cover .tw-work-accordion .tw-wa__img {
	/* Fixed length >= the widest an open panel can get -> always covers (no gaps)
	   and, being fixed, never zooms. */
	min-width: var(--tw-wa-cover-w, 1400px);
}
.tw-wa--fill-fit .tw-work-accordion .tw-wa__img {
	/* Natural (height-driven) width; a panel wider than the image may show thin
	   empty edges rather than zoom. */
	min-width: 0;
}

/* ---- Reveal anchor (desktop) ---- */
.tw-wa--anchor-center .tw-work-accordion .tw-wa__img {
	left: 50%;
	transform: translateX(-50%);
	object-position: center center;
}
.tw-wa--anchor-left .tw-work-accordion .tw-wa__img {
	left: 0;
	transform: none;
	object-position: left center;
}

.tw-wa__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(8, 8, 10, .94) 0%, rgba(8, 8, 10, .15) 52%, rgba(8, 8, 10, .5) 100%);
}

/* ---- Collapsed state (index + cue + vertical title) ---- */
.tw-wa__cue {
	position: absolute;
	top: 22px;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	pointer-events: none;
	opacity: 1;
	transition: opacity .35s;
}

.tw-wa__index {
	font-family: var(--tw-font-body);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--tw-muted);
	font-variant-numeric: tabular-nums;
}

.tw-wa__plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--tw-line2);
	color: var(--tw-cream);
	font-size: 15px;
	line-height: 1;
}

.tw-wa__vtitle {
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	pointer-events: none;
	opacity: 1;
	transition: opacity .35s;
}

.tw-wa__vtitle span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--tw-font-display);
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: .02em;
	color: var(--tw-cream);
	white-space: nowrap;
}

.tw-wa__panel.is-active .tw-wa__cue,
.tw-wa__panel.is-active .tw-wa__vtitle {
	opacity: 0;
}

/* ---- Expanded state ---- */
.tw-wa__expanded {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(28px, 3vw, 48px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s .15s;
}

.tw-wa__panel.is-active .tw-wa__expanded {
	opacity: 1;
	pointer-events: auto;
}

.tw-wa__corner {
	position: absolute;
	top: 26px;
	left: 26px;
	width: 20px;
	height: 20px;
	border-top: 1px solid var(--tw-tan);
	border-left: 1px solid var(--tw-tan);
}

.tw-wa__tc {
	position: absolute;
	top: 30px;
	right: 28px;
	font-family: var(--tw-font-body);
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--tw-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tw-wa__tag {
	align-self: flex-start;
	font-family: var(--tw-font-body);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tw-tan);
	border: 1px solid rgba(177, 128, 81, .4);
	padding: 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

.tw-wa__title {
	font-family: var(--tw-font-display);
	font-weight: 600;
	font-size: clamp(2.4rem, 4.6vw, 3.75rem);
	line-height: 1;
	letter-spacing: -.015em;
	color: var(--tw-ink);
	margin: 18px 0 0;
	white-space: nowrap;
}

.tw-wa__desc {
	max-width: 440px;
	font-family: var(--tw-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--tw-body);
	margin: 14px 0 0;
}

.tw-wa__client {
	color: var(--tw-muted);
}

/* ---- Play trailer button ---- */
.tw-wa__play {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: opacity .25s;
}

.tw-wa__play:hover {
	opacity: .85;
}

.tw-wa__play-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--tw-tan);
}

.tw-wa__play-icon::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 13px solid var(--tw-bg);
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	margin-left: 3px;
}

.tw-wa__play-label {
	font-family: var(--tw-font-body);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tw-cream);
	transition: color .25s;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.tw-wa__panel,
	.tw-wa__cue,
	.tw-wa__vtitle,
	.tw-wa__expanded {
		transition-duration: .001ms;
	}
}

/* ---- Mobile reflow: stack vertically ---- */
@media (max-width: 767px) {
	.tw-wa {
		flex-direction: column;
		height: auto;
	}

	.tw-wa__panel {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
		min-height: var(--tw-wa-rail);
		transition: min-height .7s var(--tw-wa-ease);
	}

	.tw-wa__panel.is-active {
		min-height: 68vh;
	}

	/* Vertical stack: WIDTH is now the constant axis (panel changes HEIGHT), so
	   the mode classes flip to sizing by height. Same crop-not-zoom principle;
	   these override the desktop mode rules above at equal specificity (0,3,0)
	   by appearing later. */
	.tw-work-accordion .tw-wa__img {
		top: auto;
		left: 0;
		width: 100%;
		height: auto;
		max-width: 100%;
		min-width: 0;
	}

	/* Image fill (mobile: fixed HEIGHT so a taller open panel only crops) */
	.tw-wa--fill-cover .tw-work-accordion .tw-wa__img {
		min-width: 0;
		min-height: var(--tw-wa-cover-h, 80vh);
	}
	.tw-wa--fill-fit .tw-work-accordion .tw-wa__img {
		min-width: 0;
		min-height: 0;
	}

	/* Reveal anchor (mobile: vertical) */
	.tw-wa--anchor-center .tw-work-accordion .tw-wa__img {
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		object-position: center center;
	}
	.tw-wa--anchor-left .tw-work-accordion .tw-wa__img {
		top: 0;
		left: 0;
		transform: none;
		object-position: center top;
	}

	.tw-wa__vtitle span {
		writing-mode: horizontal-tb;
		transform: none;
	}

	/* Upright again here (no rotate), so the shadow must use the same on-screen
	   formula as other upright text — not the negate-both rule the control emits
	   for the rotated desktop title. Extra class raises specificity above the
	   control's `{{WRAPPER}} .tw-wa__vtitle span` (0,2,1) so this wins. */
	.tw-work-accordion .tw-wa__panel .tw-wa__vtitle span {
		text-shadow: var(--tw-wa-sh-h, 0px) var(--tw-wa-sh-v, 2px) var(--tw-wa-sh-blur, 16px) var(--tw-wa-sh-color, rgba(0, 0, 0, .55));
	}
}