/* ==========================================================================
   DJ Slem Photo Gallery — one slide of up to 3 photos at a time,
   Next/Previous move between slides (see slider.js). Each slide's own
   grid layout adapts to how many photos it actually has:
     data-count="3" → one big tile + two stacked tiles (Concept v2's
                      own #fotos section, DJ Slem Homepage Concept
                      v2.dc.html)
     data-count="2" → two tiles side by side, equal width and height
     data-count="1" → that one tile fills the whole slide
   Every layout shares the same overall box (fixed aspect-ratio below)
   so Next/Previous never changes the section's height.
   Colors fall back to plain hex values if the active theme's own
   --acid-* custom properties aren't defined, so this doesn't
   hard-depend on a specific theme staying active.
   ========================================================================== */

.djslem-photo-slider {
	position: relative;
}

.djslem-photo-slider-viewport {
	position: relative;
	overflow: hidden;
	/* Moved here from .djslem-photo-group below — that element is now
	   absolutely positioned (stacked, one per slide, slid via transform
	   in slider.js instead of shown/hidden in place) so it no longer
	   sizes the viewport itself; this needs to, or the whole gallery
	   would collapse to 0 height. */
	aspect-ratio: 12 / 5;
}

.djslem-photo-group {
	display: grid;
	gap: 1px;
	background: rgba(8, 8, 10, 0.16);
	border: 1px solid rgba(8, 8, 10, 0.16);
	/* Stacked directly on top of each other (not one-after-another in
	   normal flow) so slider.js can slide the incoming/outgoing slide
	   past each other — see the doc comment on show() there for why a
	   plain [hidden] swap couldn't show that motion at all. */
	position: absolute;
	inset: 0;
	transition: transform 0.45s ease;
}

.djslem-photo-group[data-count='3'] {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-rows: 1fr 1fr;
}

.djslem-photo-group[data-count='3'] .djslem-photo-tile:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.djslem-photo-group[data-count='3'] .djslem-photo-tile:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}

.djslem-photo-group[data-count='3'] .djslem-photo-tile:nth-child(3) {
	grid-column: 2;
	grid-row: 2;
}

.djslem-photo-group[data-count='2'] {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
}

.djslem-photo-group[data-count='1'] {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.djslem-photo-tile {
	position: relative;
	overflow: hidden;
	background: var(--acid-blackout, #08080A);
}

.djslem-photo-lightbox-link {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.djslem-photo-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.djslem-photo-placeholder {
	position: absolute;
	inset: 0;
	background-color: var(--acid-blackout, #08080A);
	background-image: repeating-linear-gradient(
		42deg,
		rgba(242, 242, 237, 0.14) 0,
		rgba(242, 242, 237, 0.14) 16px,
		transparent 16px,
		transparent 44px
	);
	display: flex;
	align-items: flex-end;
	padding: 16px;
}

.djslem-photo-placeholder span {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: rgba(242, 242, 237, 0.45);
	text-transform: lowercase;
}

/* Next/Previous — one centered row below the photo grid, not overlaid
   on top of it (moved 2026-09-08 per direct request: overlaid on the
   top-right photo tile, the 48x48 buttons were small and low-contrast
   against a busy photo, easy to miss entirely). The slide-position bars
   that used to sit between them are gone again too — the widget's own
   native "Toon dia-indicator" switch (Elementor Style/Content tab,
   show_indicator) is now off on this instance, per direct request;
   nothing to do here in CSS for that part.

   Color is dark-on-light (blackout, not the Showreel player's bone)
   because this gallery's own section sits on the Bone/light background
   (Foto's), not Blackout — bone-colored controls computed to the exact
   same value as the section's own background, invisible (confirmed
   directly). Checked first whether the ambient/inherited text color
   could just be trusted instead of a hardcoded value — it resolves to
   that same light color on this section despite the section's own
   light background (this container's native Font Color setting doesn't
   actually match its own background here, a pre-existing mismatch on
   this section, not something this widget can fix from its own CSS) —
   so inheriting would only repeat the same invisible-on-light bug.

   Not a real `border` + clip-path: this project already found (Hero
   slideshow arrows, Photo Gallery's own two-layer button-outline
   elsewhere) that combining the two clips the border unevenly and
   leaves the diagonal corner with no stroke at all — confirmed here
   too directly, the bottom-right corner rendered open. Same fix as the
   Hero slideshow arrows (identical 48x48/12/14 cut, so the same ring
   path applies verbatim): a ::before clipped to a RING via `path()`,
   two lines (1,1)→(47,1)→(47,35.54)→(33.63,47)→(1,47) inset exactly
   1px perpendicular to the diagonal edge (not just 1px vertically),
   which is what keeps that side's stroke the same thickness as the
   other three instead of visibly thinner. On hover the ring becomes a
   solid fill (plain polygon, not the ring) to match the invert. */
.djslem-photo-slider-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
}

.djslem-photo-slider-nav {
	position: relative;
	isolation: isolate;
	width: 48px;
	height: 48px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--acid-blackout, #08080A);
	cursor: pointer;
	padding: 0;
	transition: color 0.2s ease;
}

.djslem-photo-slider-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--acid-blackout, #08080A);
	-webkit-clip-path: path(evenodd, "M0 0 L48 0 L48 36 L34 48 L0 48 Z M1 1 L47 1 L47 35.54 L33.63 47 L1 47 Z");
	clip-path: path(evenodd, "M0 0 L48 0 L48 36 L34 48 L0 48 Z M1 1 L47 1 L47 35.54 L33.63 47 L1 47 Z");
	transition: clip-path 0.2s ease;
}

.djslem-photo-slider-nav:hover:not(:disabled),
.djslem-photo-slider-nav:focus-visible:not(:disabled) {
	color: var(--acid-bone, #F2F2ED);
}

.djslem-photo-slider-nav:hover:not(:disabled)::before,
.djslem-photo-slider-nav:focus-visible:not(:disabled)::before {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%);
}

.djslem-photo-slider-nav:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Mirrored per direct request: both buttons shared the exact same
   bottom-right cut, which read as identical shapes sitting side by
   side rather than a matched pair. Prev's cut corner is flipped to the
   bottom-left instead — same math as the shared shape above, just every
   x-coordinate reflected (x' = 48 - x, or 100% - x for the percentage
   values), so it's a true mirror image rather than a different cut. */
.djslem-photo-slider-prev::before {
	-webkit-clip-path: path(evenodd, "M48 0 L0 0 L0 36 L14 48 L48 48 Z M47 1 L1 1 L1 35.54 L14.37 47 L47 47 Z");
	clip-path: path(evenodd, "M48 0 L0 0 L0 36 L14 48 L48 48 Z M47 1 L1 1 L1 35.54 L14.37 47 L47 47 Z");
}

.djslem-photo-slider-prev:hover:not(:disabled)::before,
.djslem-photo-slider-prev:focus-visible:not(:disabled)::before {
	-webkit-clip-path: polygon(100% 0, 0 0, 0 calc(100% - 12px), 14px 100%, 100% 100%);
	clip-path: polygon(100% 0, 0 0, 0 calc(100% - 12px), 14px 100%, 100% 100%);
}

.djslem-photo-slider-indicator-bar {
	width: 34px;
	height: 6px;
	background: rgba(8, 8, 10, 0.22);
}

.djslem-photo-slider-indicator-bar.is-active {
	background: var(--acid-accent-1, #C8FF00);
}

@media (max-width: 767px) {
	.djslem-photo-slider-viewport {
		aspect-ratio: 4 / 3;
	}

	.djslem-photo-slider-nav {
		width: 40px;
		height: 40px;
	}

	.djslem-photo-slider-controls {
		gap: 10px;
	}
}