/*
 * EquaFrame: front-end styles.
 *
 * Per-gallery values (columns, gap, colors, radius ...) arrive as custom
 * properties from an inline <style> block; this file only uses them.
 *
 * Accessibility notes
 *  - Focus rings are two-tone (dark + light) so they reach 3:1 against any image (SC 2.4.7, 1.4.11, 2.4.13).
 *  - Every control is at least 44x44 CSS px (SC 2.5.8 asks for 24x24).
 *  - Hover zoom is a one-step scale (no animation) when the user prefers reduced motion (SC 2.3.3).
 *  - Layout reflows to one column at 320px with no horizontal scrolling (SC 1.4.10).
 *  - Sizes use rem/em/% so text resizing and zoom to 200%+ keep working (SC 1.4.4, 1.4.12).
 */

.eqfr-gallery {
	--eqfr-cols: 4;
	--eqfr-gap: 12px;
	--eqfr-max: 100%;
	--eqfr-ratio: 4/3;
	--eqfr-row: 180px;
	--eqfr-radius: 0;
	--eqfr-border: none;
	--eqfr-shadow: none;
	--eqfr-zoom: 1;
	--eqfr-ctl-color: #fff;
	--eqfr-ctl-bg: #111;
	--eqfr-cap-color: #fff;
	--eqfr-cap-bg: rgba(0, 0, 0, .75);
	--eqfr-lb-bg: rgba(0, 0, 0, .88);
	--eqfr-ss-ratio: 16/9;
	--eqfr-ss-fit: contain;
	--eqfr-strip-visible: 5;
	--eqfr-strip-w: clamp(72px, 14vw, 160px);
	--eqfr-ring-dark: #111;
	--eqfr-ring-light: #fff;

	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: var(--eqfr-max);
	margin: 0 auto;
	position: relative;
}

.eqfr-gallery *,
.eqfr-gallery *::before,
.eqfr-gallery *::after {
	box-sizing: border-box;
}

.eqfr-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.eqfr-notice {
	padding: .75em 1em;
	border: 1px solid currentColor;
}

/* ---------------------------------------------------------------- tiles */

.eqfr-gallery .eqfr-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eqfr-gallery .eqfr-list > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eqfr-layout-grid .eqfr-list,
.eqfr-layout-mosaic .eqfr-list {
	display: grid;
	grid-template-columns: repeat(var(--eqfr-cols), minmax(0, 1fr));
	gap: var(--eqfr-gap);
}

.eqfr-layout-mosaic .eqfr-list {
	grid-auto-rows: var(--eqfr-row);
	grid-auto-flow: dense;
}

/* Mosaic rhythm: one large, one wide, one tall tile in every six. */
.eqfr-layout-mosaic .eqfr-item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.eqfr-layout-mosaic .eqfr-item:nth-child(6n + 4) { grid-column: span 2; }
.eqfr-layout-mosaic .eqfr-item:nth-child(6n + 5) { grid-row: span 2; }

/*
 * Masonry uses CSS columns, so the DOM order is also the visual reading order
 * (down the first column, then the next). This keeps keyboard and screen reader
 * order identical to what sighted users see (SC 1.3.2, 2.4.3).
 */
.eqfr-gallery.eqfr-layout-masonry .eqfr-list {
	display: block;
	column-count: var(--eqfr-cols);
	column-gap: var(--eqfr-gap);
	margin-bottom: calc(var(--eqfr-gap) * -1);
}

.eqfr-gallery.eqfr-layout-masonry .eqfr-list > .eqfr-item {
	display: block;
	break-inside: avoid;
	margin-bottom: var(--eqfr-gap);
}

.eqfr-gallery .eqfr-item {
	position: relative;
	overflow: hidden;
	border: var(--eqfr-border);
	border-radius: var(--eqfr-radius);
	box-shadow: var(--eqfr-shadow);
	scroll-margin: 6rem; /* Keeps a focused tile clear of sticky headers (SC 2.4.11). */
}

.eqfr-layout-grid .eqfr-item {
	aspect-ratio: var(--eqfr-ratio);
}

.eqfr-gallery .eqfr-img {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.eqfr-layout-grid .eqfr-img,
.eqfr-layout-mosaic .eqfr-img {
	height: 100%;
	object-fit: cover;
}

.eqfr-layout-masonry .eqfr-img {
	height: auto;
}

.eqfr-gallery .eqfr-link {
	display: block;
	position: relative;
	height: 100%;
	color: inherit;
	text-decoration: none;
	line-height: 0;
	cursor: zoom-in;
	outline: 0;
}

/* ---------------------------------------------------------------- focus */

.eqfr-gallery .eqfr-link:focus-visible::after,
.eqfr-gallery .eqfr-ss-thumb:focus-visible::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 0 0 3px var(--eqfr-ring-dark), inset 0 0 0 6px var(--eqfr-ring-light);
}

.eqfr-gallery .eqfr-ctl:focus-visible {
	outline: 2px solid transparent; /* Shows in Windows High Contrast / forced colors. */
	box-shadow: 0 0 0 2px var(--eqfr-ring-light), 0 0 0 5px var(--eqfr-ring-dark);
}

/* Browsers without :focus-visible still get a visible indicator. */
@supports not selector(:focus-visible) {
	.eqfr-gallery .eqfr-link:focus::after,
	.eqfr-gallery .eqfr-ss-thumb:focus::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		box-shadow: inset 0 0 0 3px var(--eqfr-ring-dark), inset 0 0 0 6px var(--eqfr-ring-light);
	}
	.eqfr-gallery .eqfr-ctl:focus {
		box-shadow: 0 0 0 2px var(--eqfr-ring-light), 0 0 0 5px var(--eqfr-ring-dark);
	}
}

@media (forced-colors: active) {
	.eqfr-gallery .eqfr-link:focus-visible,
	.eqfr-gallery .eqfr-ss-thumb:focus-visible {
		outline: 3px solid CanvasText;
		outline-offset: -3px;
	}
	.eqfr-gallery .eqfr-ctl {
		border: 1px solid ButtonText;
	}
	.eqfr-gallery .eqfr-ss-thumb[aria-current="true"] {
		outline: 3px solid Highlight;
		outline-offset: -3px;
	}
}

/* ---------------------------------------------------------------- hover zoom */

.eqfr-zoom .eqfr-item .eqfr-img,
.eqfr-zoom .eqfr-ss-thumb .eqfr-ss-thumb-img {
	transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
	.eqfr-zoom .eqfr-item .eqfr-img,
	.eqfr-zoom .eqfr-ss-thumb .eqfr-ss-thumb-img {
		transition: transform .35s ease;
	}
}

.eqfr-zoom .eqfr-item:hover .eqfr-img,
.eqfr-zoom .eqfr-link:focus-visible .eqfr-img,
.eqfr-zoom .eqfr-ss-thumb:hover .eqfr-ss-thumb-img,
.eqfr-zoom .eqfr-ss-thumb:focus-visible .eqfr-ss-thumb-img {
	transform: scale(var(--eqfr-zoom));
}

/* ---------------------------------------------------------------- shared controls */

.eqfr-gallery .eqfr-ctl {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--eqfr-ctl-bg);
	color: var(--eqfr-ctl-color);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

.eqfr-gallery .eqfr-ctl:hover {
	background: var(--eqfr-ctl-bg);
	color: var(--eqfr-ctl-color);
	opacity: .88;
}

.eqfr-gallery .eqfr-ctl[aria-disabled="true"] {
	opacity: .45;
	cursor: default;
}

.eqfr-gallery .eqfr-icon {
	display: block;
	width: 24px;
	height: 24px;
	pointer-events: none;
}

[dir="rtl"] .eqfr-gallery .eqfr-icon-prev,
[dir="rtl"] .eqfr-gallery .eqfr-icon-next {
	transform: scaleX(-1);
}

/* ---------------------------------------------------------------- slideshow */

.eqfr-ss {
	display: flex;
	flex-direction: column;
	gap: var(--eqfr-gap);
}

.eqfr-ss .eqfr-ss-main {
	flex: 1 1 auto;
	min-width: 0;
}

.eqfr-ss .eqfr-ss-stage {
	position: relative;
	overflow: hidden;
	border: var(--eqfr-border);
	border-radius: var(--eqfr-radius);
	box-shadow: var(--eqfr-shadow);
}

/* Without JavaScript the slides simply stack and every image stays reachable. */
.eqfr-ss:not(.is-ready) .eqfr-slide + .eqfr-slide {
	margin-top: var(--eqfr-gap);
}

.eqfr-ss:not(.is-ready) .eqfr-ctl,
.eqfr-ss:not(.is-ready) .eqfr-ss-thumbs,
.eqfr-ss:not(.is-ready) .eqfr-ss-dots {
	display: none;
}

.eqfr-ss .eqfr-slide-fig {
	position: relative;
	height: 100%;
	margin: 0;
	aspect-ratio: var(--eqfr-ss-ratio);
}

.eqfr-ss.is-ready .eqfr-ss-stage {
	aspect-ratio: var(--eqfr-ss-ratio);
}

.eqfr-ss.is-ready .eqfr-slide {
	position: absolute;
	inset: 0;
}

.eqfr-ss.is-ready .eqfr-slide-fig {
	aspect-ratio: auto;
}

.eqfr-ss .eqfr-slide[hidden] {
	display: none;
}

.eqfr-ss .eqfr-slide-img {
	width: 100%;
	height: 100%;
	object-fit: var(--eqfr-ss-fit);
}

.eqfr-ss .eqfr-ss-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: .75rem 1rem .75rem;
	background: var(--eqfr-cap-bg);
	color: var(--eqfr-cap-color);
	font-size: 1rem;
	line-height: 1.4;
	text-align: left;
	/* Leave room for the arrows so the text is never covered (SC 1.4.12, 2.4.11). */
	padding-inline: 4.25rem;
}

.eqfr-ss .eqfr-ss-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.eqfr-ss .eqfr-ss-prev { inset-inline-start: 8px; }
.eqfr-ss .eqfr-ss-next { inset-inline-end: 8px; }

.eqfr-ss .eqfr-ss-dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	padding-top: calc(var(--eqfr-gap) / 2);
}

/* Visible dot is 12px, but the button is 44px (>= 24px target size, SC 2.5.8). */
.eqfr-ss .eqfr-ss-dot {
	background: transparent;
	color: var(--eqfr-ctl-bg);
	border-radius: 0;
}

.eqfr-ss .eqfr-ss-dot::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid currentColor;
	background: transparent;
}

/* The current dot is filled and larger, so it is not identified by color alone (SC 1.4.1). */
.eqfr-ss .eqfr-ss-dot[aria-current="true"]::before {
	width: 18px;
	height: 18px;
	background: currentColor;
}

.eqfr-ss .eqfr-ss-dot:hover {
	background: transparent;
	color: var(--eqfr-ctl-bg);
}

/* Film strip */

.eqfr-gallery .eqfr-ss-thumbs {
	position: relative;
	min-width: 0;
}

.eqfr-gallery .eqfr-ss-thumblist {
	display: flex;
	gap: var(--eqfr-gap);
	list-style: none;
	margin: 0;
	padding: 4px; /* Room for the focus ring inside the scroll area. */
	overflow-x: auto;
	scrollbar-width: thin;
}

.eqfr-gallery .eqfr-ss-thumblist > li {
	flex: 0 0 calc((100% - (var(--eqfr-strip-visible) - 1) * var(--eqfr-gap)) / var(--eqfr-strip-visible));
	margin: 0;
	padding: 0;
	list-style: none;
}

.eqfr-gallery .eqfr-ss-thumb {
	appearance: none;
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: var(--eqfr-border);
	border-radius: var(--eqfr-radius);
	box-shadow: var(--eqfr-shadow);
	background: transparent;
	line-height: 0;
	cursor: pointer;
	aspect-ratio: 4 / 3;
	opacity: .72;
}

.eqfr-gallery .eqfr-ss-thumb .eqfr-ss-thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eqfr-gallery .eqfr-ss-thumb:hover { opacity: 1; }

/* The current thumbnail is fully opaque and ringed, not just recolored (SC 1.4.1). */
.eqfr-gallery .eqfr-ss-thumb[aria-current="true"] {
	opacity: 1;
	outline: 3px solid var(--eqfr-ring-dark);
	outline-offset: -3px;
}

.eqfr-gallery .eqfr-ss-thumb[aria-current="true"]::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: inset 0 0 0 5px var(--eqfr-ring-light);
	z-index: 1;
}

/* Left and right strips become a vertical, scrollable column. */
@media (min-width: 641px) {
	.eqfr-ss-pos-left,
	.eqfr-ss-pos-right {
		flex-direction: row;
		align-items: flex-start;
	}

	.eqfr-ss-pos-left .eqfr-ss-thumbs,
	.eqfr-ss-pos-right .eqfr-ss-thumbs {
		flex: 0 0 var(--eqfr-strip-w);
		width: var(--eqfr-strip-w);
		height: var(--eqfr-stage-h, auto);
		max-height: var(--eqfr-stage-h, none);
		overflow: hidden;
	}

	.eqfr-ss-pos-left .eqfr-ss-thumblist,
	.eqfr-ss-pos-right .eqfr-ss-thumblist {
		flex-direction: column;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		}

	.eqfr-ss-pos-left .eqfr-ss-thumblist > li,
	.eqfr-ss-pos-right .eqfr-ss-thumblist > li {
		flex: 0 0 auto;
		height: calc((var(--eqfr-stage-h) - 8px - (var(--eqfr-strip-visible) - 1) * var(--eqfr-gap)) / var(--eqfr-strip-visible));
	}

	.eqfr-ss-pos-left .eqfr-ss-thumb,
	.eqfr-ss-pos-right .eqfr-ss-thumb {
		height: 100%;
		aspect-ratio: auto;
	}
}

/*
 * On small screens a side strip drops below/above the image: left joins "top"
 * and right joins "bottom", which matches their DOM order so tab order still
 * follows what is on screen.
 */
@media (max-width: 640px) {
	.eqfr-ss-pos-left .eqfr-ss-thumblist > li,
	.eqfr-ss-pos-right .eqfr-ss-thumblist > li,
	.eqfr-ss-pos-top .eqfr-ss-thumblist > li,
	.eqfr-ss-pos-bottom .eqfr-ss-thumblist > li {
		flex-basis: calc((100% - (var(--eqfr-strip-visible) - 1) * var(--eqfr-gap)) / var(--eqfr-strip-visible));
	}
}

/* ---------------------------------------------------------------- lightbox */

html.eqfr-lb-open {
	overflow: hidden;
}

.eqfr-gallery .eqfr-lightbox {
	--eqfr-lb-side: 8px;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: var(--eqfr-lb-bg);
	color: var(--eqfr-cap-color);
	line-height: 1.4;
}

.eqfr-gallery .eqfr-lightbox:not([open]) {
	display: none;
}

.eqfr-gallery .eqfr-lightbox::backdrop {
	background: transparent;
}

.eqfr-gallery .eqfr-lb-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px var(--eqfr-lb-side);
}

@media (min-width: 641px) {
	.eqfr-gallery .eqfr-lightbox {
		--eqfr-lb-side: 72px;
	}
}

.eqfr-gallery .eqfr-lb-figure {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.eqfr-gallery .eqfr-lb-img {
	display: block;
	width: auto;
	height: auto;
	max-width: calc(100vw - 2 * var(--eqfr-lb-side));
	max-height: calc(100vh - 120px - var(--eqfr-cap-h, 0px));
	max-height: calc(100dvh - 120px - var(--eqfr-cap-h, 0px));
	object-fit: contain;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* "width:0; min-width:100%" stops long captions from stretching the figure past the image. */
.eqfr-gallery .eqfr-lb-caption {
	width: 0;
	min-width: 100%;
	max-height: 30vh;
	overflow: auto;
	margin: 0;
	padding: .75rem 1rem;
	background: var(--eqfr-cap-bg);
	color: var(--eqfr-cap-color);
	font-size: 1rem;
	text-align: left;
}

.eqfr-gallery .eqfr-lb-caption[hidden] {
	display: none;
}

.eqfr-gallery .eqfr-lb--cap-overlay .eqfr-lb-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

.eqfr-gallery .eqfr-lb-title {
	display: block;
	font-weight: 700;
}

.eqfr-gallery .eqfr-lb-close {
	position: absolute;
	z-index: 3;
	background: var(--eqfr-close-bg);
	color: var(--eqfr-close-color);
	border: var(--eqfr-close-border);
}

.eqfr-gallery .eqfr-lb-close:hover {
	background: var(--eqfr-close-bg);
	color: var(--eqfr-close-color);
}

.eqfr-gallery .eqfr-lb-close .eqfr-icon {
	width: 22px;
	height: 22px;
}

.eqfr-gallery .eqfr-lb--close-top-right .eqfr-lb-close { top: 8px; right: 8px; }
.eqfr-gallery .eqfr-lb--close-top-left .eqfr-lb-close { top: 8px; left: 8px; }
.eqfr-gallery .eqfr-lb--close-bottom-right .eqfr-lb-close { bottom: 8px; right: 8px; }
.eqfr-gallery .eqfr-lb--close-bottom-left .eqfr-lb-close { bottom: 8px; left: 8px; }

.eqfr-gallery .eqfr-lb--close-square .eqfr-lb-close { border-radius: 6px; }

.eqfr-gallery .eqfr-lb--close-plain .eqfr-lb-close,
.eqfr-gallery .eqfr-lb--close-plain .eqfr-lb-close:hover {
	background: transparent;
	border-radius: 6px;
	color: var(--eqfr-close-color);
}

.eqfr-gallery .eqfr-lb-close-text {
	padding: 0 1rem;
	font-size: 1rem;
	font-weight: 600;
}

.eqfr-gallery .eqfr-lb-close:has(.eqfr-lb-close-text) {
	border-radius: 6px;
}

.eqfr-gallery .eqfr-lb-counter {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	min-height: 44px;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	border-radius: 22px;
	background: var(--eqfr-ctl-bg);
	color: var(--eqfr-ctl-color);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.eqfr-gallery .eqfr-lb-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.eqfr-gallery .eqfr-lb-prev { inset-inline-start: 8px; }
.eqfr-gallery .eqfr-lb-next { inset-inline-end: 8px; }

.eqfr-gallery .eqfr-lb-nav[hidden] {
	display: none;
}

@media (max-width: 640px) {
	/* Counter would collide with a top-corner close button on very narrow screens. */
	.eqfr-gallery .eqfr-lb-counter {
		min-height: 36px;
		padding: 0 .75rem;
		top: 12px;
	}
}