/* =========================================================
   KEENE.PRESS — Editorial Image Carousel (front end)
   ========================================================= */

.keene-carousel {
	--keene-carousel-bg: #e9e9e9;
	--keene-carousel-text: #111111;
	--keene-carousel-muted: #666666;
	--keene-carousel-control: #777777;
	--keene-carousel-border: rgba(0, 0, 0, 0.12);

	box-sizing: border-box;
	width: 100%;
	margin: 0 0 clamp(32px, 5vw, 72px);
	background: var(--keene-carousel-bg);
	color: var(--keene-carousel-text);
	font-family: "DM Sans", Arial, sans-serif;
}

.keene-carousel *,
.keene-carousel *::before,
.keene-carousel *::after {
	box-sizing: border-box;
}

.keene-carousel__frame {
	position: relative;
	padding: clamp(18px, 3vw, 42px);
}


/* FULL-BLEED OVERLAY
   A CSS/JS toggle, not the native Fullscreen API — so it behaves the
   same on every browser, including iOS Safari, and can hide the site
   header (a fixed-position element sits outside whatever the
   Fullscreen API would take over anyway).
--------------------------------------------------------- */

.keene-carousel.keene-carousel--overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	width: 100vw;
	height: 100vh;
	margin: 0;
	overflow-y: auto;
}

.keene-carousel.keene-carousel--overlay .keene-carousel__frame {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(24px, 4vw, 56px) clamp(20px, 6vw, 80px);
}

.keene-carousel--overlay .keene-carousel__image {
	max-height: calc(100vh - 220px);
}

/* Applied by carousel.js to whatever matches the filterable
   keene_editorial_carousel_header_selector — the selector itself is
   only known at runtime, so it can't be targeted directly here. */
.keene-carousel-hidden-for-overlay {
	display: none !important;
}

body.keene-carousel-overlay-open {
	overflow: hidden;
}


/* ROW — image + metadata
   The image renders at its own natural width (constrained only by
   max-height) rather than being stretched into a fixed grid
   fraction, so the gap to the metadata column stays visually
   constant whether the image is a narrow portrait or a wide
   landscape — a fixed-fraction grid would instead leave a portrait
   image stranded far from the text. The whole (image + metadata)
   pair is centered as one group, matching the reference, where the
   pair's position shifts slightly per slide but the relationship
   between image and text never does. align-items: flex-end (plus an
   explicit align-self on each child) bottom-anchors both, so the
   credit line stays flush with the photograph's lower edge
   regardless of which one is taller.
--------------------------------------------------------- */

.keene-carousel__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: clamp(20px, 3vw, 40px);
}

.keene-carousel__viewport {
	position: relative;
	overflow: hidden;
	transition: height 400ms cubic-bezier(0.65, 0, 0.35, 1);
}

.keene-carousel__image-wrap {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	align-self: flex-end;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}

.keene-carousel__image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(72vh, 860px);
	object-fit: contain;
}

.keene-carousel--multi .keene-carousel__image-wrap {
	cursor: pointer;
}

.keene-carousel__meta {
	align-self: flex-end;
	flex: 0 0 clamp(200px, 26vw, 340px);
	line-height: 1.4;
}

.keene-carousel__artist {
	margin: 0;
	font-weight: 600;
}

.keene-carousel__title-line {
	margin: 2px 0 0;
}

.keene-carousel__title {
	font-style: italic;
}

.keene-carousel__specs {
	margin: 4px 0 0;
	color: var(--keene-carousel-muted);
}

.keene-carousel__description {
	margin: 12px 0 0;
}

.keene-carousel__credit {
	margin: 8px 0 0;
	color: var(--keene-carousel-muted);
	font-size: 0.82em;
	overflow-wrap: anywhere;
}


/* SLIDES — all sit side by side; the track slides to the active one
   (slides in from the right, moves left, matching the reference)
   rather than the previous instant show/hide swap.
--------------------------------------------------------- */

.keene-carousel__track {
	display: flex;
	align-items: flex-start;
	width: 100%;
	transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1);
}

.keene-carousel__slide {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
}


/* THUMBNAILS
   Only the active thumbnail reveals its image; the rest stay as
   plain neutral swatches until selected — matches the reference
   gallery rather than a dimmed-preview filmstrip.
--------------------------------------------------------- */

.keene-carousel__thumbnails {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

.keene-carousel__thumbnail {
	width: 52px;
	height: 52px;
	padding: 0;
	background: rgba(0, 0, 0, 0.08);
	border: 1px solid transparent;
	cursor: pointer;
	transition: border-color 160ms ease;
}

.keene-carousel__thumbnail-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 160ms ease;
}

.keene-carousel__thumbnail.is-active {
	border-color: var(--keene-carousel-text);
}

.keene-carousel__thumbnail.is-active .keene-carousel__thumbnail-image {
	opacity: 1;
}

.keene-carousel__thumbnail:hover .keene-carousel__thumbnail-image {
	opacity: 0.6;
}

.keene-carousel__thumbnail.is-active:hover .keene-carousel__thumbnail-image {
	opacity: 1;
}

.keene-carousel__thumbnail:focus-visible {
	outline: none;
	border-color: var(--keene-carousel-text);
	box-shadow: 0 0 0 2px var(--keene-carousel-bg), 0 0 0 4px var(--keene-carousel-text);
}


/* PREVIOUS / NEXT
   Fixed horizontally to the browser window's edges — not the image,
   not the content column — so left/right holds at any window width.
   Vertically, `top` is set by carousel.js to track the image's own
   current on-screen position as the page scrolls (see
   updateArrowPosition), rather than staying dead-center on the
   viewport regardless of scroll — the two are different things once
   the page is taller than the window. Opacity is likewise driven by
   an IntersectionObserver on the image itself, so the arrows fade
   out once the image scrolls out of view instead of floating over
   whatever content happens to be on screen at that point. A
   background keeps them legible over the image when they do overlap
   it, since nothing else guarantees contrast there.
--------------------------------------------------------- */

.keene-carousel__button--previous,
.keene-carousel__button--next {
	position: fixed;
	transform: translateY(-50%);
	z-index: 100001;
	background: rgba(233, 233, 233, 0.85);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.keene-carousel--arrows-visible .keene-carousel__button--previous,
.keene-carousel--arrows-visible .keene-carousel__button--next {
	opacity: 1;
	pointer-events: auto;
}

.keene-carousel:not(.keene-carousel--ready) .keene-carousel__button--previous,
.keene-carousel:not(.keene-carousel--ready) .keene-carousel__button--next {
	display: none;
}

.keene-carousel__button--previous {
	left: clamp(8px, 3vw, 56px);
}

.keene-carousel__button--next {
	right: clamp(8px, 3vw, 56px);
}

.keene-carousel__button {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--keene-carousel-border);
	background: transparent;
	color: var(--keene-carousel-control);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: color 160ms ease, border-color 160ms ease;
}

.keene-carousel__button:hover {
	color: var(--keene-carousel-text);
	border-color: var(--keene-carousel-text);
}

.keene-carousel__button:focus-visible {
	outline: none;
	color: var(--keene-carousel-text);
	box-shadow: 0 0 0 2px var(--keene-carousel-bg), 0 0 0 4px var(--keene-carousel-text);
}


/* BOTTOM ROW — thumbnails + fullscreen
   Shared relatively-positioned row so the fullscreen button sits on
   the same baseline as the thumbnails (right-aligned) rather than
   floating separately below them. Thumbnails stay centered on their
   own; the button is independent of that centering, same as the
   reference. Close mirrors it top-right of the frame, shown only in
   the overlay state.
--------------------------------------------------------- */

.keene-carousel__bottom-row {
	position: relative;
	min-height: 52px;
	margin-top: clamp(20px, 3vw, 32px);
}

.keene-carousel__button--open {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

.keene-carousel__button--close {
	display: none;
	position: absolute;
	top: clamp(16px, 3vw, 28px);
	right: clamp(16px, 3vw, 28px);
}

.keene-carousel--overlay .keene-carousel__button--open {
	display: none;
}

.keene-carousel--overlay .keene-carousel__button--close {
	display: inline-grid;
}

.keene-carousel .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* TABLET PORTRAIT & PHONE
   700px would leave iPad portrait (768-834px across current models)
   on the side-by-side desktop layout — fine for a portrait image, but
   a landscape one would get squeezed into a narrow leftover column
   next to a fixed-width text block. 900px comfortably covers every
   iPad in portrait while leaving iPad landscape (1024px+) and real
   desktop untouched.
--------------------------------------------------------- */

@media (max-width: 900px) {
	.keene-carousel__row {
		flex-direction: column;
		align-items: center;
	}

	.keene-carousel__image-wrap {
		align-self: center;
	}

	.keene-carousel__meta {
		flex-basis: auto;
		width: 100%;
		align-self: stretch;
		margin-top: 16px;
	}

	.keene-carousel__image {
		max-height: none;
	}

	.keene-carousel--overlay .keene-carousel__image {
		max-height: none;
	}

	.keene-carousel__bottom-row {
		text-align: center;
	}

	.keene-carousel__button--open,
	.keene-carousel__button--close {
		position: static;
		margin-top: clamp(16px, 3vw, 24px);
	}

	.keene-carousel--overlay .keene-carousel__button--close {
		position: absolute;
		top: 12px;
		right: 12px;
	}
}

/* No floating arrows on touch devices or narrow screens — tapping the
   image (click-to-advance, see carousel.js), swiping, or using the
   thumbnails takes over as the way to navigate. Matches (max-width)
   OR (pointer: coarse) so this applies to a narrow desktop window as
   well as a touch tablet in landscape, not just a phone specifically.
   Scoped under the .keene-carousel ancestor (not just the button
   classes alone) so this reliably outranks the base .keene-carousel__button
   display rule regardless of source order. */
@media (max-width: 900px), (pointer: coarse) {
	.keene-carousel .keene-carousel__button--previous,
	.keene-carousel .keene-carousel__button--next {
		display: none;
	}
}

/* Touch targets: sized by input type, not viewport width, since a
   coarse pointer (touch) applies on a wide tablet in landscape just
   as much as a narrow phone — 42px falls under both Apple's and
   Google's minimum recommended touch target. */
@media (pointer: coarse) {
	.keene-carousel__button {
		width: 48px;
		height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.keene-carousel__button,
	.keene-carousel__button--previous,
	.keene-carousel__button--next,
	.keene-carousel__thumbnail,
	.keene-carousel__thumbnail-image,
	.keene-carousel__track,
	.keene-carousel__viewport {
		transition: none;
	}
}