/**
 * Coco Photo Scroller
 *
 * Sizing model: the viewport height is locked (--cps-h) and each cell derives
 * its width from its own aspect ratio (--cps-ar, set inline per cell in PHP).
 *
 * The min/max clamps use container query units (cqw) resolved against the
 * viewport, NOT percentages. The track is content-sized and scrolls, so a
 * percentage width on a cell would resolve against the track's own content
 * width and create a circular dependency.
 */

.cps {
	/* Sizing */
	--cps-h: 700px;
	--cps-gap: 12px;

	/* Per-orientation behaviour */
	--cps-ls-fit: contain;
	--cps-pt-fit: contain;
	--cps-ls-pos: center center;
	--cps-pt-pos: center center;
	--cps-ls-max: 100;
	--cps-ls-min: 0;
	--cps-pt-max: 100;
	--cps-pt-min: 0;

	/* Keyboard focus indicator */
	--cps-focus-color: currentColor;
	--cps-focus-width: 2px;

	/* Motion */
	--cps-dur: 600ms;
	--cps-ease: cubic-bezier(.22, .61, .36, 1);
	--cps-dim: .3;

	/* Arrows */
	--cps-arrow-display: flex;
	--cps-arrow-size: 28px;
	--cps-arrow-box: 48px;
	--cps-arrow-color: #FFFFFF;
	--cps-arrow-color-h: #000;
	--cps-arrow-bg: rgba(255, 255, 255, 0);
	--cps-arrow-bg-h: rgba(255, 255, 255, .85);
	--cps-arrow-radius: 50%;
	--cps-l-arrow-hoff: 20px;
	--cps-l-arrow-voff: 0px;
	--cps-r-arrow-hoff: 20px;
	--cps-r-arrow-voff: 0px;

	/* Tool buttons (fullscreen, play/pause, thumbnail toggle) */
	--cps-tool-box: 34px;
	--cps-tool-size: 28px;
	--cps-tool-color: #FFFFFF;
	--cps-tool-color-h: #000;
	--cps-tool-bg: rgba(255, 255, 255, .7);
	--cps-tool-bg-h: rgba(255, 255, 255, .95);
	--cps-tool-radius: 4px;
	--cps-tool-gap: 6px;

	/* Fullscreen backdrop */
	--cps-fs-bg: #FFFFFF;

	/* Thumbnails */
	--cps-thumb-w: 60px;
	--cps-thumb-h: 60px;
	--cps-thumb-gap: 5px;
	--cps-thumb-radius: 0px;
	--cps-thumb-dim: .5;
	--cps-thumb-active-border: #111;

	position: relative;
	display: flex;
	flex-direction: column;
}

/* Thumbnail strip placement */
.cps.cps-thumbs-top    { flex-direction: column-reverse; }
.cps.cps-thumbs-left   { flex-direction: row-reverse; }
.cps.cps-thumbs-right  { flex-direction: row; }

.cps-frame {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

/* --------------------------------------------------------------------- */
/* Viewport + track                                                       */
/* --------------------------------------------------------------------- */

.cps-viewport {
	container-type: inline-size;
	position: relative;
	overflow: hidden;
	height: var(--cps-h);
	box-sizing: border-box;
}

/* The scroll region is focusable so arrow keys can drive it. Suppress the
   browser's focus ring for pointer focus — a visitor clicking a photo should
   not get a box drawn around the gallery — but keep a clear indicator for
   keyboard and assistive-technology users, who need to see where focus is. */
.cps-viewport:focus {
	outline: none;
}

html.cps-kb .cps-viewport:focus-visible {
	outline: var(--cps-focus-width, 2px) solid var(--cps-focus-color, currentColor);
	outline-offset: calc(-1 * var(--cps-focus-width, 2px));
}

.cps-track {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: var(--cps-gap);
	height: 100%;
	width: max-content;
	will-change: transform;
	transition: transform var(--cps-dur) var(--cps-ease);
}

.cps-track.is-dragging {
	transition: none;
	cursor: grabbing;
}

.cps-track.is-dragging .cps-link { cursor: grabbing; }

.cps.cps-draggable .cps-track { cursor: grab; }

/* --------------------------------------------------------------------- */
/* Cells — width derived from aspect ratio at the locked height           */
/* --------------------------------------------------------------------- */

.cps-cell {
	position: relative;
	flex: 0 0 auto;
	height: 100%;
	aspect-ratio: var(--cps-ar, 1);
	margin: 0;
	opacity: var(--cps-dim);
	transition: opacity var(--cps-dur) var(--cps-ease);
	background: transparent;
}

.cps-cell.is-active { opacity: 1; }

/* Ring-mode filler copies: purely visual. Clicks and taps pass through to the
   track (so dragging that begins over a clone still works), and they are hidden
   from assistive tech. */
.cps-cell.cps-clone {
	pointer-events: none;
	user-select: none;
}

.cps-cell .cps-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
}

/* Lightbox link wrapper must not alter the cell's geometry. */
.cps-cell .cps-link {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
	text-decoration: none;
	border: 0;
	cursor: zoom-in;
}

/* Per-orientation clamps, relative to the visible viewport width. */
.cps-cell.is-landscape {
	max-width: calc(var(--cps-ls-max) * 1cqw);
	min-width: calc(var(--cps-ls-min) * 1cqw);
}

.cps-cell.is-portrait,
.cps-cell.is-square {
	max-width: calc(var(--cps-pt-max) * 1cqw);
	min-width: calc(var(--cps-pt-min) * 1cqw);
}

/* Per-orientation filling mode. */
.cps-cell.is-landscape .cps-img {
	object-fit: var(--cps-ls-fit);
	object-position: var(--cps-ls-pos);
}

.cps-cell.is-portrait .cps-img,
.cps-cell.is-square .cps-img {
	object-fit: var(--cps-pt-fit);
	object-position: var(--cps-pt-pos);
}

/* Fallback for browsers without container query units. JS keeps --cps-vw
   in sync with the viewport width via ResizeObserver. */
@supports not (container-type: inline-size) {
	.cps-cell.is-landscape {
		max-width: calc(var(--cps-ls-max) * var(--cps-vw, 1000px) / 100);
		min-width: calc(var(--cps-ls-min) * var(--cps-vw, 1000px) / 100);
	}
	.cps-cell.is-portrait,
	.cps-cell.is-square {
		max-width: calc(var(--cps-pt-max) * var(--cps-vw, 1000px) / 100);
		min-width: calc(var(--cps-pt-min) * var(--cps-vw, 1000px) / 100);
	}
}

/* --------------------------------------------------------------------- */
/* Captions                                                               */
/* --------------------------------------------------------------------- */

.cps-caption {
	margin: .5em 0 0;
	font-size: .8125rem;
	line-height: 1.4;
}

.cps.cps-caption-overlay .cps-caption {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: 1.5em 1em .75em;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
	opacity: 0;
	transition: opacity var(--cps-dur) var(--cps-ease);
}

.cps.cps-caption-overlay .cps-cell:hover .cps-caption,
.cps.cps-caption-overlay .cps-cell.is-active .cps-caption { opacity: 1; }

/* --------------------------------------------------------------------- */
/* Arrows                                                                 */
/* --------------------------------------------------------------------- */

/* Same guarantee as the tool buttons: the hit box always encloses the icon. */
.cps .cps-arrow {
	position: absolute;
	z-index: 3;
	display: var(--cps-arrow-display);
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: max(var(--cps-arrow-box), var(--cps-arrow-size));
	height: max(var(--cps-arrow-box), var(--cps-arrow-size));
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	line-height: 0;
	border-radius: var(--cps-arrow-radius);
	color: var(--cps-arrow-color);
	background: var(--cps-arrow-bg);
	cursor: pointer;
	transition: opacity .25s ease, color .25s ease, background-color .25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cps .cps-arrow > svg,
.cps .cps-arrow > i,
.cps .cps-arrow > img { flex: 0 0 auto; }

.cps-arrow:hover {
	color: var(--cps-arrow-color-h);
	background: var(--cps-arrow-bg-h);
}

/* Arrow Background toggled off: bare icons, no plate in any state.
   Sizing is preserved so the hit area stays comfortably large. */
.cps.cps-no-arrow-bg .cps-arrow,
.cps.cps-no-arrow-bg .cps-arrow:hover,
.cps.cps-no-arrow-bg .cps-arrow:focus {
	background: none;
	border-radius: 0;
}

/* Focus rings: nothing on pointer focus, a clear ring on keyboard focus.
   Themes commonly ship `button:focus { outline: thin dotted }`, which would
   otherwise leave a dotted box sitting around the button after every click —
   very visible on a transparent button over a photo. !important is used
   deliberately here so a theme cannot reintroduce it. */
.cps .cps-arrow:focus,
.cps .cps-btn:focus,
.cps .cps-thumb:focus,
.cps .cps-link:focus {
	outline: none !important;
}

/* The ring appears only during genuine keyboard navigation, meaning the
   visitor pressed Tab. Arrow keys drive the gallery itself, so a browser would
   otherwise promote whatever button was last clicked to :focus-visible and
   draw a ring around a control the visitor never navigated to — and leave it
   there, since that button keeps focus. The `cps-kb` class on <html> is set on
   Tab and cleared on pointer input or gallery arrow-key use. */
html.cps-kb .cps .cps-arrow:focus-visible,
html.cps-kb .cps .cps-btn:focus-visible,
html.cps-kb .cps .cps-thumb:focus-visible,
html.cps-kb .cps .cps-link:focus-visible {
	outline: var(--cps-focus-width, 2px) solid var(--cps-focus-color, currentColor) !important;
	outline-offset: 2px;
}

.cps .cps-arrow svg,
.cps .cps-arrow i {
	display: block;
	width: var(--cps-arrow-size);
	height: var(--cps-arrow-size);
	font-size: var(--cps-arrow-size);
}

/* ---------------------------------------------------------------------- */
/* Icon recolouring                                                        */
/*                                                                         */
/* An SVG exported from a design tool carries hardcoded fill/stroke values, */
/* so it would ignore the colour controls entirely. These rules redirect    */
/* any real paint value to currentColor, which the colour controls drive.   */
/*                                                                         */
/* Deliberate "none" values are left alone — overriding those would flood   */
/* an outline-style icon into a solid blob. The last rule catches marks     */
/* with no paint attribute at all, which would otherwise default to black,  */
/* but only when the SVG root has not itself set a fill to inherit.         */
/* ---------------------------------------------------------------------- */

.cps-arrow svg[fill]:not([fill="none"]):not([fill="transparent"]),
.cps-arrow svg [fill]:not([fill="none"]):not([fill="transparent"]),
.cps-btn svg[fill]:not([fill="none"]):not([fill="transparent"]),
.cps-btn svg [fill]:not([fill="none"]):not([fill="transparent"]) {
	fill: currentColor;
}

.cps-arrow svg[stroke]:not([stroke="none"]):not([stroke="transparent"]),
.cps-arrow svg [stroke]:not([stroke="none"]):not([stroke="transparent"]),
.cps-btn svg[stroke]:not([stroke="none"]):not([stroke="transparent"]),
.cps-btn svg [stroke]:not([stroke="none"]):not([stroke="transparent"]) {
	stroke: currentColor;
}

.cps-arrow svg:not([fill]) *:not([fill]):not([stroke]),
.cps-btn svg:not([fill]) *:not([fill]):not([stroke]) {
	fill: currentColor;
}

.cps-arrow img { width: var(--cps-arrow-size); height: auto; }

.cps-arrow.is-disabled {
	opacity: .25;
	pointer-events: none;
}

/* Vertical placement */
.cps.cps-larrow-v-top    .cps-prev { top: var(--cps-l-arrow-voff); }
.cps.cps-larrow-v-bottom .cps-prev { bottom: var(--cps-l-arrow-voff); }
.cps.cps-larrow-v-center .cps-prev { top: 50%; transform: translateY(-50%) translateY(var(--cps-l-arrow-voff)); }

.cps.cps-rarrow-v-top    .cps-next { top: var(--cps-r-arrow-voff); }
.cps.cps-rarrow-v-bottom .cps-next { bottom: var(--cps-r-arrow-voff); }
.cps.cps-rarrow-v-center .cps-next { top: 50%; transform: translateY(-50%) translateY(var(--cps-r-arrow-voff)); }

/* Horizontal placement */
.cps.cps-larrow-h-left   .cps-prev { left: var(--cps-l-arrow-hoff); }
.cps.cps-larrow-h-right  .cps-prev { right: var(--cps-l-arrow-hoff); }
.cps.cps-larrow-h-center .cps-prev { left: 50%; margin-left: calc(-1 * var(--cps-arrow-box) / 2 + var(--cps-l-arrow-hoff)); }

.cps.cps-rarrow-h-left   .cps-next { left: var(--cps-r-arrow-hoff); }
.cps.cps-rarrow-h-right  .cps-next { right: var(--cps-r-arrow-hoff); }
.cps.cps-rarrow-h-center .cps-next { left: 50%; margin-left: calc(-1 * var(--cps-arrow-box) / 2 + var(--cps-r-arrow-hoff)); }

/* --------------------------------------------------------------------- */
/* Tool buttons                                                           */
/* --------------------------------------------------------------------- */

.cps-tools {
	position: absolute;
	z-index: 3;
	right: 12px;
	bottom: 12px;
	display: flex;
	gap: var(--cps-tool-gap);
}

/* The button always encloses its icon: sizing to max() of the two means an
   icon set larger than the button can never overflow past the clickable area.
   That overflow is what makes a transparent button feel "dead" — the glyph is
   visible outside the hit box, so clicks aimed at it land on nothing.
   box-sizing and the padding/border/line-height resets are declared at higher
   specificity than a bare `button` rule so a theme cannot shift the icon
   off-centre. */
.cps .cps-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: max(var(--cps-tool-box), var(--cps-tool-size));
	height: max(var(--cps-tool-box), var(--cps-tool-size));
	min-width: 0;
	min-height: 0;
	padding: var(--cps-tool-pad, 0);
	margin: 0;
	border: 0;
	line-height: 0;
	border-radius: var(--cps-tool-radius);
	color: var(--cps-tool-color);
	background: var(--cps-tool-bg);
	cursor: pointer;
	transition: color .25s ease, background-color .25s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Nudge the glyph inside its button without moving the hit box.
   Covers the bare icon and the wrapper spans the fullscreen toggle uses to
   hold its expand/collapse pair. */
.cps .cps-btn > svg,
.cps .cps-btn > i,
.cps .cps-btn > img,
.cps .cps-btn > span {
	flex: 0 0 auto;
	transform: translate(var(--cps-tool-dx, 0px), var(--cps-tool-dy, 0px));
}

.cps .cps-btn > span {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.cps-btn:hover {
	color: var(--cps-tool-color-h);
	background: var(--cps-tool-bg-h);
}

/* Tool Background toggled off: bare icons, no plate in any state. */
.cps.cps-no-tool-bg .cps-btn,
.cps.cps-no-tool-bg .cps-btn:hover,
.cps.cps-no-tool-bg .cps-btn:focus {
	background: none;
	border-radius: 0;
}

.cps .cps-btn svg {
	display: block;
	width: var(--cps-tool-size);
	height: var(--cps-tool-size);
}

.cps-play .cps-ico-play { display: none; }
.cps-play.is-paused .cps-ico-play { display: block; }
.cps-play.is-paused .cps-ico-pause { display: none; }

/* Fullscreen toggle shows an "expand" icon normally and a distinct "collapse"
   icon while fullscreen, so the exit affordance does not look identical to the
   one that got you there. */
.cps .cps-fs .cps-ico-collapse { display: none; }
.cps.is-fullscreen .cps-fs .cps-ico-expand { display: none; }
.cps.is-fullscreen .cps-fs .cps-ico-collapse { display: block; }

/* --------------------------------------------------------------------- */
/* Thumbnails                                                             */
/* --------------------------------------------------------------------- */

.cps-thumbs {
	display: flex;
	gap: var(--cps-thumb-gap);
	overflow: auto;
	scrollbar-width: none;
}

.cps-thumbs::-webkit-scrollbar { display: none; }

.cps.cps-thumbs-left .cps-thumbs,
.cps.cps-thumbs-right .cps-thumbs {
	flex-direction: column;
	flex: 0 0 auto;
}

.cps-thumbs.is-hidden { display: none; }

.cps-thumb {
	flex: 0 0 auto;
	width: var(--cps-thumb-w);
	height: var(--cps-thumb-h);
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--cps-thumb-radius);
	background: none;
	opacity: var(--cps-thumb-dim);
	cursor: pointer;
	overflow: hidden;
	transition: opacity .25s ease, border-color .25s ease;
}

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

.cps-thumb.is-active {
	opacity: 1;
	border-color: var(--cps-thumb-active-border);
}

.cps-thumb:hover { opacity: 1; }

/* --------------------------------------------------------------------- */
/* Fullscreen                                                             */
/* --------------------------------------------------------------------- */

.cps:fullscreen {
	background: var(--cps-fs-bg);
	justify-content: center;
}

/* Vendor-prefixed variants must be separate rules — grouping them would make
   the whole selector list invalid in browsers that only understand one. */
.cps:-webkit-full-screen {
	background: var(--cps-fs-bg);
	justify-content: center;
}

.cps:fullscreen .cps-viewport { height: 100vh; }

.cps:fullscreen.cps-has-thumbs .cps-viewport {
	height: calc(100vh - var(--cps-thumb-h) - 24px);
}

/* --------------------------------------------------------------------- */
/* Reduced motion                                                         */
/* --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cps-track,
	.cps-cell,
	.cps-caption {
		transition: none !important;
	}
}