/**
 * Larawan — Template 1 (Split rail)
 *
 * Colours, font and thumbnail counts arrive as CSS custom properties written
 * inline by the template, so one stylesheet serves every gallery on the site.
 */

.lrwn {
	--lrwn-thumb-gap: 10px;
	--lrwn-rail-w: 200px;
	--lrwn-radius: 4px;
	--lrwn-ease: cubic-bezier(.4, 0, .2, 1);
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Opt-in centred column, for pages that want the gallery to line up with the
   surrounding text rather than run edge to edge. */
.lrwn--contained {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 16px;
}

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

.lrwn--custom-font,
.lrwn--custom-font .lrwn-title,
.lrwn--custom-font .lrwn-num,
.lrwn--custom-font .lrwn-counter {
	font-family: var(--lrwn-font);
}

.lrwn-title {
	text-align: center;
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 500;
	letter-spacing: .2px;
	line-height: 1.15;
	color: var(--lrwn-accent);
	margin: 0 0 34px;
}

.lrwn-grid {
	display: grid;
	grid-template-columns: var(--lrwn-rail-w) minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}

@media (min-width: 901px) {
	/* Centred and left modes size the photo column to the photo, so the rail and
	   image travel together as one block and the gap between them stays exactly
	   the grid gap. Stretch keeps the old behaviour: the photo fills whatever
	   width is left over. */
	.lrwn--align-center .lrwn-grid,
	.lrwn--align-left .lrwn-grid {
		grid-template-columns: var(--lrwn-rail-w) minmax(0, auto);
	}

	.lrwn--align-center .lrwn-grid {
		justify-content: center;
	}

	.lrwn--align-left .lrwn-grid {
		justify-content: start;
	}

	.lrwn--align-stretch .lrwn-frame {
		width: 100%;
	}

	.lrwn--align-stretch .lrwn-main {
		width: 100%;
	}
}

/* ---------- thumbnail rail ---------- */

.lrwn-rail {
	position: relative;
}

.lrwn-rail-window {
	overflow: hidden;
}

/* Fallback clipping height, worked out from the rail width and the 4:3 thumbnail
   ratio. It matters when the gallery is measured while hidden — inside a closed
   Elementor popup, say — where every measurement comes back zero and the script
   cannot size the rail. Without this the thumbnails spill out full-length. The
   script overwrites it inline as soon as it can measure the real image. */
@media (min-width: 901px) {
	.lrwn-rail-window {
		height: calc(
			var(--lrwn-visible) * var(--lrwn-rail-w) * 3 / 4 +
			(var(--lrwn-visible) - 1) * var(--lrwn-thumb-gap)
		);
	}
}

.lrwn-rail-track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lrwn-thumb-gap);
	transition: transform .45s var(--lrwn-ease);
	will-change: transform;
}

.lrwn-thumb {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 4 / 3; /* fallback until the script measures the main image */
	overflow: hidden;
	cursor: pointer;
	background: var(--lrwn-stage-bg);
	border-radius: var(--lrwn-radius);
	margin: 0;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.lrwn-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--lrwn-ease), filter .25s var(--lrwn-ease);
}

.lrwn-thumb:hover img {
	transform: scale(1.05);
}

.lrwn-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 3px solid transparent;
	border-radius: var(--lrwn-radius);
	transition: border-color .2s var(--lrwn-ease);
	pointer-events: none;
}

.lrwn-thumb.is-active::after {
	border-color: var(--lrwn-accent);
}

.lrwn-thumb:not(.is-active) img {
	filter: brightness(.94);
}

.lrwn-thumb:focus-visible {
	outline: 3px solid var(--lrwn-accent-dark);
	outline-offset: 2px;
}

/* Fixed footprint: the badge is sized by the box, not by its digits, so 01 and
   08 and 11 all occupy exactly the same pill. tabular-nums stops proportional
   fonts from making a 1 narrower than a 0; min-width rather than width lets a
   gallery of 100+ still grow gracefully instead of overflowing. */
.lrwn-num {
	position: absolute;
	top: 8px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 30px;
	padding: 0 10px;
	background: #fff;
	color: var(--lrwn-accent);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	border-radius: 15px 0 0 15px;
	letter-spacing: .5px;
}

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

.lrwn-btn {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 50%;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
	background-image: none;
	text-shadow: none;
	-webkit-tap-highlight-color: transparent;
	/* Removes the 300ms double-tap-zoom wait on iOS, which otherwise makes a tap
	   feel dead or get swallowed entirely inside a popup. */
	touch-action: manipulation;
	transition: background-color .2s var(--lrwn-ease), opacity .2s var(--lrwn-ease);
}

.lrwn-btn svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lrwn-btn[disabled] {
	opacity: .35;
	cursor: default;
}

.lrwn-rail-btn {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	width: 34px;
	height: 34px;
}

.lrwn-rail-btn svg {
	width: 20px;
	height: 20px;
}

.lrwn-up {
	top: -17px;
}

.lrwn-down {
	bottom: -17px;
}

.lrwn-stage-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 46px;
	height: 46px;
}

.lrwn-stage-btn svg {
	width: 26px;
	height: 26px;
}

.lrwn-prev {
	left: 14px;
}

.lrwn-next {
	right: 14px;
}

/* ---------- main stage ---------- */

/* The stage is the full grid column; the frame shrink-wraps the photo. Overlay
   controls live inside the frame so they sit against the image's own edges
   rather than floating in the empty column beside a narrower photo.
   flex-start keeps the photo hard against the rail, so the visible gap is the
   26px grid gap and nothing more — centring would split the leftover column
   width and push the photo away from the thumbnails. */
.lrwn-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 200px;
}

.lrwn-frame {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	background: var(--lrwn-stage-bg);
}

.lrwn-main {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: 78vh;
	object-fit: contain;
	transition: opacity .3s var(--lrwn-ease);
}

.lrwn-main.is-fading {
	opacity: 0;
}

/* fixed frame shape — every slide the same height */
.lrwn-stage.has-ratio {
	aspect-ratio: var(--lrwn-ratio);
	min-height: 0;
}

.lrwn-stage.has-ratio .lrwn-frame {
	width: 100%;
	height: 100%;
}

.lrwn-stage.has-ratio .lrwn-main {
	width: 100%;
	height: 100%;
	max-height: none;
}

.lrwn-stage.is-cover .lrwn-main {
	object-fit: cover;
}

.lrwn-counter {
	position: absolute;
	top: 22px;
	right: 18px;
	z-index: 3;
	background: #fff;
	color: var(--lrwn-accent);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .5px;
	padding: 10px 20px;
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

/* ---------- tablet and below: rail drops underneath ---------- */

@media (max-width: 900px) {
	.lrwn {
		--lrwn-thumb-gap: 8px;
	}

	.lrwn-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.lrwn-stage {
		order: 1;
		/* No rail alongside down here, so the photo centres in the column again. */
		justify-content: center;
	}

	.lrwn-rail {
		order: 2;
		padding: 0 40px;
	}

	/* align-items:flex-start is load-bearing. The default `stretch` ties each
	   thumbnail's height to the row's height, which depends on the thumbnails —
	   circular, so aspect-ratio is ignored and they collapse to a thin strip. */
	.lrwn-rail-track {
		flex-direction: row;
		align-items: flex-start;
	}

	.lrwn-thumb {
		width: calc((100% - (var(--lrwn-visible) - 1) * var(--lrwn-thumb-gap)) / var(--lrwn-visible));
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.lrwn-thumb.is-active::after {
		border-width: 2px;
	}

	/* Same fixed-box treatment, scaled for the smaller thumbnails. */
	.lrwn-num {
		top: 5px;
		min-width: 32px;
		height: 21px;
		padding: 0 7px;
		font-size: 11px;
		font-weight: 600;
		border-radius: 11px 0 0 11px;
	}

	.lrwn-rail-btn {
		left: auto;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		width: 32px;
		height: 32px;
	}

	.lrwn-rail-btn svg {
		width: 18px;
		height: 18px;
		transform: rotate(-90deg);
	}

	.lrwn-up {
		left: 0;
	}

	.lrwn-down {
		right: 0;
	}

	.lrwn-main {
		max-height: 60vh;
	}

	.lrwn-counter {
		top: 12px;
		right: 12px;
		font-size: 14px;
		padding: 8px 14px;
	}

	.lrwn-stage-btn {
		width: 38px;
		height: 38px;
	}

	.lrwn-stage-btn svg {
		width: 21px;
		height: 21px;
	}
}

@media (max-width: 520px) {
	.lrwn-title {
		margin-bottom: 22px;
	}

	.lrwn-rail {
		padding: 0 36px;
	}

	.lrwn-num {
		min-width: 28px;
		height: 19px;
		padding: 0 6px;
		font-size: 10px;
		border-radius: 10px 0 0 10px;
	}
}

/* ---------- phones only: fixed-height main image ----------
   Locks the photo to a set height and crops from the centre, so portrait and
   landscape shots all present the same size on a narrow screen. Scoped to 767px
   so tablets keep the flexible height, and only applied when the gallery opted
   in via the Width/height setting (the modifier class). */
@media (max-width: 767px) {
	.lrwn--mobile-fixed .lrwn-frame {
		width: 100%;
		height: var(--lrwn-mobile-h);
	}

	.lrwn--mobile-fixed .lrwn-main {
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: cover;
		object-position: center center;
	}

	/* A fixed frame shape would otherwise dictate the height and win. */
	.lrwn--mobile-fixed .lrwn-stage.has-ratio {
		aspect-ratio: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lrwn-rail-track,
	.lrwn-main,
	.lrwn-thumb img {
		transition: none !important;
	}
}