.pgs-wrap {
	--pgs-gap: 20px;
	--pgs-radius: 6px;
	--pgs-ink: #4A4F54;
	--pgs-accent: #DEE6EC;
	--pgs-card-h: 330px;
	--pgs-tab-border: #d8d3c8;

	max-width: 100%;
	padding: 24px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	overflow: visible; /* required so the track can bleed past this element */
}

/* ---------- Tabs ---------- */
.pgs-tabs {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 32px;
	padding: 0 24px;
}
.pgs-tab {
	font-size: 16px;
	font-weight: 500;
	font-family: "Nunito";
	color: var(--pgs-ink);
	background: #ffffff;
	border: 2px solid #306F98;
	border-radius: 999px;
	padding: 15px 32px;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	line-height: 1.3;
}
.pgs-tab:hover {

	border-color: #306F98;
	background: var(--pgs-accent);
	color: #4A4F54;
}
.pgs-tab.is-active {
	background: var(--pgs-accent);
	border-color: #306F98;
	color: #4A4F54;
}

/* ---------- Viewport / bleed ----------
   .pgs-viewport's full-bleed width/position is applied by JS
   (applyFullBleed in gallery-slider.js), which measures the element's
   actual on-screen position and sets exact pixel values. A pure-CSS
   `width:100vw; margin-left:calc(50% - 50vw)` trick was tried here first,
   but that formula only produces the right result when the parent is a
   symmetrically centered container — on layouts where it isn't, the
   guess overshoots and can push the whole element off-screen. Measuring
   at runtime is the reliable version of the same idea.
   The "gap on the left at rest" look is a separate thing: a
   .pgs-start-spacer inside the track (see syncStartSpacer), sized to a
   fixed inset. A matching .pgs-end-spacer keeps the same breathing room
   after the last card. */
.pgs-viewport {
	overflow: visible;
	width: 100%;
}

.pgs-track {
	display: flex;
	gap: var(--pgs-gap);
	overflow-x: auto;
	scroll-behavior: smooth;
	width: 100%;
	max-width: none;
	padding-bottom: 4px;
	cursor: grab;
	/* Without this, the browser's scroll-anchoring heuristic can silently
	   nudge scrollLeft forward as lazy-loaded images resolve to their real
	   size after initial paint — which quietly scrolls past the start
	   spacer before the user ever sees it, even though scrollLeft was
	   explicitly set to 0 in JS. This opts the track out of that
	   auto-adjustment entirely. */
	overflow-anchor: none;

	/* Without this, the browser's own native touch-scroll gesture and our
	   pointer-based drag-to-scroll (enableDragScroll in gallery-slider.js)
	   both try to drive scrollLeft at the same time on touch devices. The
	   two fight each other right as a swipe begins — the native scroll
	   starts moving the track, then our JS delta gets applied on top of
	   it — which is what produces the fast/jerky jump at the start of a
	   drag. Setting touch-action: pan-y tells the browser "don't handle
	   horizontal panning yourself, only vertical page scroll", handing
	   the horizontal drag over entirely to our JS. */
	touch-action: pan-y;

	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* old Edge/IE */
}
.pgs-track::-webkit-scrollbar {
	display: none; /* Chrome/Safari — dragging + arrows remain the UX */
}
/* Scroll-snap is intentionally OFF until JS adds this class (see
   initGallery in gallery-slider.js). Some browsers evaluate/enforce
   mandatory snapping during initial layout setup and can pull the resting
   scroll position to the next snap point (the first real card) instead of
   the start spacer, even with scroll-snap-align set on the spacer itself.
   Turning snap on only after everything (spacer, full-bleed measurement)
   has settled avoids that race entirely. */
.pgs-track.pgs-snap-ready {
	scroll-snap-type: x mandatory;
}
.pgs-track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}
.pgs-track.is-dragging .pgs-card,
.pgs-track.is-dragging .pgs-card img {
	pointer-events: none; /* prevents image drag-ghosting / stray link clicks mid-drag */
}

.pgs-start-spacer,
.pgs-end-spacer {
	flex: 0 0 auto;
	align-self: stretch;
	scroll-snap-align: start;
}

.pgs-card {
	position: relative;
	flex: 0 0 auto;
	width: 300px;
	height: var(--pgs-card-h);
	border-radius: var(--pgs-radius);
	overflow: hidden;
	scroll-snap-align: start;
	background: #eee;
	cursor: pointer;
}
.pgs-card:focus-visible {
	outline: 3px solid #306F98;
	outline-offset: 2px;
}
.pgs-card--big {
	height: calc(var(--pgs-card-h) * 2 + var(--pgs-gap));       /* 330*2+20 = 680 */
    width: calc((var(--pgs-card-h) * 2 + var(--pgs-gap)) * 0.84); /* 680*0.84 = 571 */
}

/* Column of 2 stacked non-featured images = one slide unit, sitting next
   to the hero card. This is what produces the 2-column grid look. */
.pgs-col {
	display: flex;
	flex-direction: column;
	gap: var(--pgs-gap);
	flex: 0 0 auto;
}
.pgs-card--grid {
	width: var(--pgs-card-h);   /* 330 */
  	height: var(--pgs-card-h);  /* 330 */
}
.pgs-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Arrow nav ---------- */
.pgs-nav {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 24px;
}
.pgs-arrow {
	width: 54px;
	height: 54px;
	border-radius: 6px;
	border: none;
	background: #306F98;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .15s ease;
}
.pgs-arrow:hover,
.pgs-arrow:focus-within {
	opacity: .85;
	background: #306F98;
}

/* ==================== Lightbox ==================== */
body.pgs-lightbox-open {
	overflow: hidden; /* lock background scroll while the lightbox is open */
}

.pgs-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(20, 20, 22, 0.86);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.pgs-lightbox.is-open {
	display: flex;
}

.pgs-lightbox-inner {
	position: relative;
	width: 100%;
	max-width: 1200px;
	background: #fff;
	border-radius: 10px;
	padding: 16px 16px 22px;
	box-sizing: border-box;
}

.pgs-lightbox-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: #306F98!important;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.pgs-lightbox-close:hover {
	background: #306F98!important;
}

.pgs-lightbox-stage {
	width: 100%;
	max-height: 74vh;
	border-radius: 6px;
	overflow: hidden;
	background: #eee;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pgs-lightbox-stage img {
	width: 100%;
	max-height: 74vh;
	object-fit: contain;
	display: block;
}

.pgs-lightbox-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
}
.pgs-lightbox-arrow {
	width: 48px;
	height: 48px;
	border-radius: 6px;
	border: none;
	background: #306F98;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .15s ease;
}
.pgs-lightbox-arrow:hover {
	opacity: .85;
}

.pgs-lightbox-dots {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pgs-lightbox-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 2px solid #306F98;
	background: transparent;
	padding: 0;
	cursor: pointer;
}
.pgs-lightbox-dot.is-active {
	background: #306F98;
}

.pgs-lightbox-hint {
	text-align: center;
	margin-top: 14px;
	font-size: 13px;
	color: #8a8f96;
}

@media (max-width: 640px) {
	.pgs-lightbox-close {
		top: 8px;
		right: 8px;
	}
	.pgs-lightbox-inner {
		padding: 12px 12px 18px;
	}
	.pgs-lightbox-hint {
		font-size: 12px;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	/* On mobile every image is its own full-size slide — no stacked 2-up
	   grid columns. .pgs-col holds no visual box of its own here, so its
	   two child cards fall directly into .pgs-track's flex row, each
	   sized the same as a regular slide instead of being stacked at half
	   height. */
	.pgs-col {
		display: contents;
	}

	.pgs-card,
	.pgs-card--big,
	.pgs-card--grid {
		width: 350px;
		height: 369px;
	}

	.pgs-tabs {
		gap: 8px;
	}
	.pgs-tab {
		padding: 8px 18px;
		font-size: 13px;
	}
}