/**
 * UTRF Slideshow — block styling (editor + front end).
 *
 * File Name:    style.css
 * Version:      1.2.0
 * Last Modified: 2026-09-16
 * Package:      utrf-extensions
 *
 * Ported from UT Ventures' utventures/slideshow (utventures-extensions,
 * v0.6.7) — same layout/behavior, retinted for UTRF and given the BEM
 * namespace `.utrf-slideshow`. The structural CSS (container queries, the
 * tween-zone freeze/overlap logic, the stepped-opacity Firefox workaround)
 * is left exactly as UT Ventures worked it out; only colors and radius
 * changed. The dark-panel-over-image text treatment this mirrors
 * originated FROM a UTRF page in the first place — UTV's build copied it
 * from utrf.tennessee.edu's technology-category hero card (#00000075 over
 * white text) — so the tween-zone overlay below (where the panel genuinely
 * sits on top of a slide's own image) is closer to a return than a port.
 *
 * UTRF-specific changes from the UTV version:
 * - Colors: UTV's `var(--wp--preset--color--*, fallback)` calls assumed a
 *   block-theme theme.json with those presets registered. digital-pro is a
 *   classic Genesis theme with no such presets, so these are now literal
 *   values — Tennessee Orange `#ff8200` for the arrows/link (was UTV's own
 *   orange preset, `#f7941d`).
 * - `.utrf-slideshow__content`'s background is a neutral `#333333` (white
 *   text), not UTV's translucent `#00000075` or UTRF Teal (an intermediate
 *   pass tried the teal, live on stage 2026-09-14 through the 15th — David
 *   preferred the more neutral gray, 2026-09-16). The tween-zone `::before`
 *   overlay (640px-1120px), where the panel genuinely does sit on top of
 *   the slide's own photo, uses the same `#333333` rather than UTV's plain
 *   black, at a flat 0.85 opacity — see that rule's own comment for why the
 *   stepped ramp was dropped.
 * - No border-radius anywhere — per David, 2026-09-16: after a sitewide
 *   look, the only rounded corners found on UTRF were on the homepage's
 *   Genesis Responsive Slider, which is being retired, so a 10px radius
 *   (added in an earlier pass to match it) was never a real convention
 *   worth matching. A broader sitewide style pass (colors, spacing, radius,
 *   typography — a collaborative style guide with Rachel) is deferred, not
 *   committed — logged in digital-pro/ROADMAP.md.
 * - `.utrf-slideshow__more` font-size set to an explicit 12px, matching
 *   digital-pro's sitewide `a.more-link` convention (style.css) exactly,
 *   along with its Poppins/uppercase/0.5px-letter-spacing treatment.
 * - Every other `rem` value converted to its px equivalent (×16) and the
 *   `.utrf-slideshow__arrow` buttons given explicit
 *   padding/border-radius/background overrides — see those rules' own
 *   comments for why both were necessary on this specific port.
 * - Every top-level selector prefixed with `.utrf-slideshow ` (e.g.
 *   `.utrf-slideshow .utrf-slideshow__excerpt`, not just
 *   `.utrf-slideshow__excerpt`) — added 2026-09-16 once this widget was
 *   actually placed in a real widget area (Front Page 1) and collided with
 *   `style-front.css`'s `.front-page-1 p`/`.front-page-1 button` rules,
 *   which this block's original single-class selectors (specificity 0,0,1,0)
 *   couldn't outrank (those are 0,0,1,1 — one class plus one element). Doubling
 *   the class count outranks any single-class-plus-element descendant
 *   selector regardless of which widget area or page context this ends up
 *   embedded in, rather than patching collisions one at a time as they're
 *   found. Properties this block never declared at all (e.g. the arrow's
 *   `margin`) still needed an explicit value regardless of specificity —
 *   see that rule's own comment.
 *
 * BEM naming under a single .utrf-slideshow namespace; no !important;
 * logical properties throughout.
 */

.utrf-slideshow {
	--utrf-slideshow-gap: clamp(20px, 3vw, 40px);
	/* Side padding and the heading/image gap, each halved from --utrf-slideshow-gap. */
	--utrf-slideshow-side-gap: clamp(10px, 1.5vw, 20px);
	--utrf-slideshow-column-gap: clamp(10px, 1.5vw, 20px);

	container-type: inline-size;
}

.utrf-slideshow .utrf-slideshow__track {
	display: grid;
	padding-block: var(--utrf-slideshow-gap);
	padding-inline: var(--utrf-slideshow-side-gap);
	position: relative;
	touch-action: pan-y;
}

.utrf-slideshow .utrf-slideshow__slide {
	align-items: center;
	display: flex;
	gap: var(--utrf-slideshow-column-gap);
	grid-area: 1 / 1;
	/* See tween-zone comment further down for why this must stay 0. */
	min-inline-size: 0;
	opacity: 0;
	/* Clears the arrow glyphs (44px click target + controls' own small inset). */
	padding-inline: 52px;
	pointer-events: none;
}

/*
 * Deliberately not nested as `&--active` inside .utrf-slideshow__slide above:
 * native CSS nesting silently drops a nested selector starting with `&--`
 * (ambiguous with custom-property syntax) — confirmed against Chrome during
 * the original UT Ventures build. Every BEM `--modifier` in this file stays
 * flat.
 */
.utrf-slideshow .utrf-slideshow__slide--active {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.utrf-slideshow .utrf-slideshow__slide {
		transition: opacity 0.8s ease;
	}

	.utrf-slideshow .utrf-slideshow__content::before {
		transition: opacity 0.5s ease;
	}
}

.utrf-slideshow .utrf-slideshow__content {
	/*
	 * color/background-color/opacity all driven by custom properties set
	 * inline by Slideshow::render() (from the block's contentBackgroundColor/
	 * contentOpacity/textColor attributes, or the classic widget's matching
	 * form fields) — the fallbacks here are only what shows if that inline
	 * style is somehow absent.
	 *
	 * Background color and opacity are TWO separate custom properties, not
	 * one precomputed rgba() — get_block_wrapper_attributes() runs the style
	 * string through core's safecss_filter_attr(), which silently drops any
	 * rgba()/rgb() function value entirely (confirmed via `wp eval`,
	 * 2026-09-16 — it drops rgba() even for a plain `background-color`, not
	 * just a custom property); a bare hex color and a bare decimal both
	 * survive that filter. Applying opacity as its own CSS property directly
	 * on `.content` would also fade its (fully opaque) text, so it's applied
	 * on the `::before` background layer below instead — same reasoning as
	 * the tween-zone `::before` this now shares its properties with.
	 */
	/*
	 * isolation: isolate is load-bearing, not decorative — without it, the
	 * ::before's z-index:-1 isn't contained to a stacking context scoped to
	 * THIS element; it escapes to whatever the nearest ancestor stacking
	 * context is (here, effectively the page background), rendering the
	 * whole panel invisible — confirmed live on stage, 2026-09-16 (title,
	 * excerpt, and the panel background all vanished; only "Read More",
	 * which sets its own explicit color rather than inheriting, stayed
	 * visible). position:relative alone does not create a stacking context
	 * by itself; isolation:isolate does, with no z-index number to pick.
	 */
	color: var(--utrf-slideshow-text-color, #fff);
	flex: 0 0 clamp(224px, 30%, 320px);
	isolation: isolate;
	padding: clamp(12px, 2vw, 20px) clamp(16px, 2.5vw, 24px);
	position: relative;

	&::before {
		background-color: var(--utrf-slideshow-content-bg-color, #333333);
		content: "";
		inset: 0;
		opacity: var(--utrf-slideshow-content-opacity, 1);
		position: absolute;
		z-index: -1;
	}
}

.utrf-slideshow .utrf-slideshow__title {
	/*
	 * color: inherit stated here too, not just on the nested `a` below —
	 * digital-pro/utrf-extensions has a sitewide
	 * `h1,h2,h3,h4,h5,h6,body,p,input,.widget-title { color: #333333 }`
	 * rule (theme-overrides.css, deliberately enqueued at priority 20 to
	 * win the cascade) that targets this h2 element directly. Since this
	 * block never gave the h2 itself a color before, that sitewide rule won
	 * outright and the nested link's `color: inherit` inherited #333333
	 * from ITS parent (this h2), not white from .utrf-slideshow__content
	 * further up — rendering the title invisible (#333 text on a #333
	 * panel). Confirmed live on stage, 2026-09-16.
	 */
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: inherit;
	display: -webkit-box;
	font-size: clamp(17.6px, 1.5vw + 8px, 28px);
	font-weight: 600;
	line-height: 1.2;
	margin-block-end: 0.5em;
	overflow: hidden;

	a {
		/*
		 * border-bottom: none at rest, not just on hover — digital-pro's
		 * sitewide `a { border-bottom: 1px solid #232525; color: #232525; }`
		 * (style.css) applies to every plain anchor by default, and this
		 * rule never had anything of its own competing for border-bottom
		 * specifically outside :hover, so that sitewide underline-like
		 * border was winning by default at rest — David flagged this as an
		 * unwanted "underline" on the title, 2026-09-16.
		 */
		border-bottom: none;
		color: inherit;
		font-weight: 600;
		text-decoration: none;

		/*
		 * Locks white on hover/focus too — digital-pro/utrf-extensions has a
		 * sitewide `a:hover { color: #007a89; border-bottom: ...; }` rule
		 * (theme-overrides.css, priority 20) that would otherwise turn this
		 * title teal (and add a stray border-bottom) on hover, the same
		 * mechanism that made Featured Technologies' card title/excerpt turn
		 * teal on hover — see that plugin's own CHANGELOG.md, 2026-09-16.
		 */
		&:hover,
		&:focus {
			border-bottom: none;
			color: inherit;
		}

		&:focus-visible {
			outline: 2px solid #007a89;
			outline-offset: 2px;
		}
	}
}

.utrf-slideshow .utrf-slideshow__excerpt {
	/* Same sitewide `p { color: #333333 }` collision as the title above — see its comment. */
	color: inherit;
	font-size: clamp(13.6px, 0.3vw + 12px, 16px);
	line-height: 1.5;
	margin: 0 0 0.75em;
}

.utrf-slideshow .utrf-slideshow__more {
	/*
	 * font-size is an explicit 12px, not a straight px-conversion of UTV's
	 * 0.85rem — this deliberately matches digital-pro's sitewide
	 * `a.more-link` (style.css) exactly, same as the family/uppercase/
	 * letter-spacing below, rather than reproducing UTV's own value.
	 */
	/* border-bottom: none at rest, not just on hover — same reasoning as the title link's own comment above. */
	border-bottom: none;
	color: #ff8200;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-decoration: none;
	text-transform: uppercase;

	/*
	 * color and border-bottom restated explicitly on hover/focus — same
	 * sitewide `a:hover` collision as the title link above. Without this,
	 * the sitewide rule's (0,0,1,1) specificity ties this rule's own base
	 * (0,0,1,0) declaration and can win on source order alone, flipping
	 * "Read More" to teal instead of staying orange.
	 */
	&:hover,
	&:focus {
		border-bottom: none;
		color: #ff8200;
		text-decoration: underline;
	}

	&:focus-visible {
		outline: 2px solid #007a89;
		outline-offset: 2px;
	}
}

.utrf-slideshow .utrf-slideshow__media {
	/*
	 * Same border/shadow treatment as the Featured Technologies card
	 * (utrf-techpress) — per David, 2026-09-16. Two things deliberately NOT
	 * matched, per David's live review:
	 * - No hover lift (translateY) — "comes off as a glitch."
	 * - No hover border change at all, not even a color-only override —
	 * a color-only pass still left border-bottom-WIDTH to whichever of two
	 * competing sitewide `a:hover { border-bottom: ... }` rules won (1px vs
	 * 2px, theme-overrides.css), so the image could still shift by a
	 * pixel on hover ("it still moves"). border-bottom is now restated in
	 * full (width/style/color) at hover, IDENTICAL to the base rule below —
	 * nothing about the border changes on hover, only the box-shadow does.
	 */
	aspect-ratio: 950 / 440;
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: block;
	flex: 1 1 0%;
	overflow: clip;
	transition: box-shadow 0.15s ease;

	&:hover,
	&:focus-visible {
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	}
}

.utrf-slideshow .utrf-slideshow__image {
	aspect-ratio: 950 / 440;
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.utrf-slideshow .utrf-slideshow__image--placeholder {
	background: #2c2c2c;
}

.utrf-slideshow .utrf-slideshow__controls {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: space-between;
	/* Fixed, not vw-scaled — see .utrf-slideshow__slide's padding-inline comment. */
	padding-inline: 8px;
	pointer-events: none;
	position: absolute;
}

.utrf-slideshow .utrf-slideshow__arrow {
	/*
	 * Bare glyph, no button chrome. Click/tap target stays comfortable
	 * (44px) even with nothing visible outside the chevron itself.
	 *
	 * padding/border-radius/background-color/font-size/margin are all
	 * stated explicitly here (not left to inherit) — digital-pro's sitewide
	 * `button` rule (style.css) sets a 20px/30px padding and 50px pill
	 * radius; its `button:hover` rule sets a dark #232525 background; and,
	 * found later once this widget was actually placed in a real widget
	 * area, `.front-page-1 button { margin-top: 60px; }` (style-front.css)
	 * was pushing the arrows out of their vertical centering — plain
	 * specificity boosts don't help for a property this rule never declared
	 * at all, since there's nothing of ours to outrank theirs; `margin: 0`
	 * added explicitly rather than just relying on the new `.utrf-slideshow`
	 * prefix below. UT Ventures' Twenty Twenty-Five block theme has no such
	 * global button styling, so none of this collision exists on this port's
	 * origin — confirmed live on stage, 2026-09-16.
	 */
	align-items: center;
	background-color: transparent;
	block-size: 44px;
	border: none;
	border-radius: 0;
	color: #ff8200;
	cursor: pointer;
	display: inline-flex;
	font-size: 28px;
	inline-size: 44px;
	justify-content: center;
	line-height: 1;
	margin: 0;
	padding: 0;
	pointer-events: auto;

	&:hover,
	&:focus {
		background-color: transparent;
		color: #fff;
	}

	&:focus-visible {
		outline: 2px solid #ff8200;
		outline-offset: 2px;
	}
}

/*
 * Tween zone: 640px-1120px container width (UTV's original 40rem-70rem,
 * converted to px — see file header). Rather than let the image keep
 * shrinking as the row narrows below the point where it's roughly the same
 * height as the text panel, freeze both boxes at those dimensions and
 * instead slide the image left, under the content panel, as the container
 * keeps narrowing toward the mobile breakpoint. min-width excludes the
 * mobile stack range below so the two zones' rules never fight over the
 * same container width. See UT Ventures' original build notes
 * (utventures-extensions CHANGELOG, 2026-09-12) for the full derivation —
 * the logic is unchanged here, only re-expressed in px so it lands at the
 * same real screen widths on a theme with a different root font-size.
 *
 * Content's own panel (the base rule's ::before, defined once above — no
 * zone-specific override needed here) uses the exact same
 * --utrf-slideshow-content-bg-color/--utrf-slideshow-content-opacity custom
 * properties everywhere — one background/opacity setting for the panel,
 * wherever it appears. UT Ventures' original ramped a plain black overlay
 * from 46% up to 94% across six @container steps as the image narrowed
 * behind it (see git history for that version); David asked to drop the
 * gradual ramp in favor of one constant value, easing in via the transition
 * above rather than stepping.
 */
@container (min-width: 640.02px) and (max-width: 1120px) {
	.utrf-slideshow .utrf-slideshow__track {
		padding-inline: 68px;
	}

	.utrf-slideshow .utrf-slideshow__slide {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		padding-inline: 0;
		overflow: clip;
	}

	.utrf-slideshow .utrf-slideshow__content {
		/*
		 * No background/::before override here — the base rule's ::before
		 * (color + opacity custom properties) already applies at every
		 * container width, this zone included; it needs no zone-specific
		 * treatment now that David asked to drop the old stepped-opacity
		 * ramp in favor of one constant value shared with the base state.
		 */
		block-size: 304px;
		grid-area: 1 / 1;
		inline-size: 352px;
		justify-self: start;
		overflow: hidden;
		position: relative;
		z-index: 2;
	}

	.utrf-slideshow .utrf-slideshow__media {
		block-size: 298px;
		grid-area: 1 / 1;
		inline-size: auto;
		justify-self: end;
		position: relative;
		z-index: 1;
	}
}

@container (max-width: 640px) {
	.utrf-slideshow .utrf-slideshow__slide {
		align-items: stretch;
		flex-direction: column;
		padding-inline: 0;
	}

	.utrf-slideshow .utrf-slideshow__content {
		flex-basis: auto;
		order: 2;
	}

	.utrf-slideshow .utrf-slideshow__media {
		flex: 0 0 auto;
		order: 1;
	}

	/* Replaced by swipe/touch gestures (view.js) at this width. */
	.utrf-slideshow .utrf-slideshow__controls {
		display: none;
	}
}