/* -------------------------------------------------------------------------
   Photo sliders. On the Home page each project row in Recent Work has one,
   in place of the project photo (`.case-media`, end of this file).

   The sliders are managed in WP Admin → Field Slider; the plugin prints one
   wherever the "AUI Field Slider" Elementor widget (or the [aui_field_slider]
   shortcode) is placed. `.photo-track` is a scroll-snap strip, one photo per
   `.photo-slide`: `.photo-frame`, a fixed-height stage with the photo at full
   height. The frame height never follows the photo, so portrait and landscape
   shots sit in the same box. The strip swipes on touch and scrolls with
   JavaScript off; slider.js adds the blurred backdrop behind each photo, the
   side chevrons, the counter and the lightbox.
   ------------------------------------------------------------------------- */
/* The Elementor widget wrapper: full width of its column, and none of
   Elementor's default spacing between widgets (the gallery sets its own). */
.elementor .elementor-widget.elementor-widget-aui-field-slider {
	width: 100%;
	margin-block: 0;
}

/* Shown in the Elementor editor only, while the slider has no photos. */
.photo-gallery-empty {
	padding: 32px;
	border: 1px dashed var(--line);
	font-family: var(--mono);
	font-size: 13px;
	text-align: center;
	margin-bottom: 56px;
}

/* Standing alone under a `.sec-head`, the gallery matches that heading's
   56px bottom margin; in a project row it has none (below). */
.photo-gallery {
	position: relative;
	margin-bottom: 56px;
	--stage-h: clamp(320px, 62vh, 600px);
}

.photo-gallery .photo-track {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}
/* The scrollbar is the only scroll cue without JavaScript; hide it once the
   chevrons exist. */
.gallery-ready .photo-track { scrollbar-width: none; }
.gallery-ready .photo-track::-webkit-scrollbar { display: none; }

.photo-gallery .photo-slide {
	flex: 0 0 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
}

.photo-gallery .photo-frame {
	position: relative;
	height: var(--stage-h);
	overflow: hidden;
	display: flex;
	justify-content: center;
	background: var(--panel);
	border: 1px solid var(--line);
}
/* A small rendition of the same photo, blurred and dimmed, fills the frame
   around the sharp one (slider.js inserts it). */
.photo-frame .photo-bg {
	position: absolute;
	inset: -40px;
	width: calc(100% + 80px);
	height: calc(100% + 80px);
	max-width: none;
	object-fit: cover;
	filter: blur(28px) brightness(.42) saturate(1.1);
	pointer-events: none;
}
.photo-frame .photo-img {
	position: relative;
	display: block;
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.gallery-ready .photo-img { cursor: zoom-in; }
/* The frame's overflow would clip a ring drawn outside, so draw it inside. */
.photo-frame .photo-img:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; box-shadow: none; }

/* "05 / 13", bottom left of the frame (slider.js inserts it). */
.photo-frame .photo-count {
	position: absolute;
	left: 16px;
	bottom: 14px;
	z-index: 2;
	padding: 5px 9px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--muted-on-panel);
	background: rgba(10, 9, 8, .55);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.photo-frame .photo-count b { color: var(--panel-ink); font-weight: 600; }

/* Side chevrons, over the frame only. Hello Elementor's reset paints
   `[type=button]:hover/:focus` solid pink with a border; the selectors here
   outrank it so the gradient stays. */
.photo-gallery .photo-chev,
.photo-gallery .photo-chev:hover,
.photo-gallery .photo-chev:focus {
	position: absolute;
	top: 0;
	z-index: 2;
	width: 112px;
	height: var(--stage-h);
	display: flex;
	align-items: center;
	padding: 0 22px;
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
}
.photo-gallery .photo-chev[hidden] { display: none; }
.photo-gallery .photo-chev-prev,
.photo-gallery .photo-chev-prev:hover,
.photo-gallery .photo-chev-prev:focus {
	left: 0;
	justify-content: flex-start;
	background: linear-gradient(to right, rgba(10, 9, 8, .72), rgba(10, 9, 8, 0));
}
.photo-gallery .photo-chev-next,
.photo-gallery .photo-chev-next:hover,
.photo-gallery .photo-chev-next:focus {
	right: 0;
	justify-content: flex-end;
	background: linear-gradient(to left, rgba(10, 9, 8, .72), rgba(10, 9, 8, 0));
}
.photo-chev svg { width: 34px; height: 34px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); transition: transform .2s; }
.photo-chev-prev:hover svg { transform: translateX(-3px); }
.photo-chev-next:hover svg { transform: translateX(3px); }
.photo-gallery .photo-chev:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

@media (max-width: 560px) {
	.photo-gallery { --stage-h: clamp(280px, 56vh, 440px); }
	.photo-gallery .photo-chev,
	.photo-gallery .photo-chev:hover,
	.photo-gallery .photo-chev:focus { width: 64px; padding: 0 10px; }
	.photo-chev svg { width: 26px; height: 26px; }
	.photo-frame .photo-count { left: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.photo-chev svg { transition: none; }
}

/* Lightbox. Sits above the sticky nav (z-index 20). */
.lightbox-open { overflow: hidden; }
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	grid-template-columns: 72px 1fr 72px;
	align-items: center;
	background: rgba(20, 18, 16, .94);
	color: #fff;
}
.lightbox[hidden] { display: none; }
.lightbox-stage {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 64px 0 32px;
	min-width: 0;
	/* Horizontal drags are swipes (slider.js); keep vertical pan and pinch. */
	touch-action: pan-y pinch-zoom;
	user-select: none;
}
.lightbox-img {
	max-width: 100%;
	max-height: calc(100vh - 160px);
	max-height: calc(100dvh - 160px);
	width: auto;
	height: auto;
	object-fit: contain;
	-webkit-user-drag: none;
}
.lightbox-caption {
	display: flex;
	gap: 16px;
	align-items: baseline;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--muted-on-panel);
	text-align: center;
}
.lightbox-count { color: #fff; flex: none; }
.lightbox-btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--line-on-panel);
	background: transparent;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	justify-self: center;
	grid-row: 1;
}
.lightbox-btn:focus { background: transparent; border-color: var(--line-on-panel); color: #fff; }
.lightbox-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.lightbox-btn[hidden] { display: none; }
.lightbox-prev { grid-column: 1; }
.lightbox-next { grid-column: 3; }
.lightbox-close { position: absolute; top: 16px; right: 16px; }

@media (max-width: 560px) {
	/* Arrows move below the photo so it can use the full width; swiping is
	   the main way through on a phone. */
	.lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; }
	.lightbox-stage { grid-column: 1 / -1; padding: 64px 12px 8px; }
	.lightbox-img { max-height: calc(100dvh - 190px); }
	.lightbox-prev, .lightbox-next { grid-row: 2; margin-bottom: 24px; }
	.lightbox-prev { grid-column: 1; justify-self: end; margin-right: 12px; }
	.lightbox-next { grid-column: 2; justify-self: start; margin-left: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
	.lightbox:not([hidden]) { animation: lightbox-in .18s ease-out; }
	@keyframes lightbox-in { from { opacity: 0; } }
}

/* In a project row the slider takes the place of `.case-image`, so it keeps
   that box's height (440px, 320px once the row stacks at 980px) and needs no
   gap below. The column is about half the page wide, so the chevron strips
   are narrower than in a full-width slider. */
.case-media .photo-gallery { margin-bottom: 0; --stage-h: 440px; }
.case-media .photo-gallery .photo-chev,
.case-media .photo-gallery .photo-chev:hover,
.case-media .photo-gallery .photo-chev:focus { width: 84px; padding: 0 16px; }
.case-media .photo-gallery-empty { margin-bottom: 0; }
@media (max-width: 980px) {
	.case-media .photo-gallery { --stage-h: 320px; }
}
@media (max-width: 560px) {
	.case-media .photo-gallery .photo-chev,
	.case-media .photo-gallery .photo-chev:hover,
	.case-media .photo-gallery .photo-chev:focus { width: 64px; padding: 0 10px; }
}