/**
 * PS Image Gallery — front-end CSS
 *
 * Notes:
 *  - --psig-image-height is set inline per-gallery (from the shortcode
 *    image_height attribute) with a fallback default here, so admins
 *    can override height per-instance without a stylesheet edit.
 *  - Row is a single flex row with overflow-x: auto and no wrapping —
 *    intentionally never a grid, never flex-wrap.
 */

:root {
	--psig-image-height: 180px;
	--psig-title-size: 22px;
	--psig-description-size: 14px;
}

.psig-gallery {
	margin: 2em 0;
}

.psig-heading {
	margin: 0 0 0.5em;
	font-size: var( --psig-title-size, 22px );
}

.psig-description {
	margin: 0 0 1em;
	color: #444;
	font-size: var( --psig-description-size, 14px );
}

/* ---- Row + pinned button wrapper ---------------------------------- */

.psig-row-wrap {
	position: relative;
	display: flex;
	align-items: stretch;
}

.psig-row {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 8px;
	margin: 0;
	padding: 0 8px 0 0;
	/* !important here is a deliberate, targeted fix: something else
	   active on the site (likely Elementor's global list-marker reset)
	   was winning the cascade on this single property while every other
	   declaration in this same rule applied normally. Only this property
	   gets the override — not the whole rule — to keep the blast radius
	   as small as possible. */
	list-style: none !important;
	scroll-behavior: smooth;
	/* Reserve room on the right so the pinned button never overlaps the
	   last image, regardless of how many images are in the row. */
	padding-right: calc(var(--psig-open-button-width, 48px) + 8px);
}

.psig-row-item {
	position: relative;
	flex: 0 0 auto;
	height: var(--psig-image-height);
	/* Belt-and-suspenders: the visible bullet was traced to this <li>'s
	   own marker, not just the parent <ul>'s list-style. Both get the
	   override so removing the marker doesn't depend on inheritance
	   surviving whatever else is resetting it. */
	list-style: none !important;
}

.psig-row-image {
	display: block;
	/* Same situation as list-style above: something else on the site was
	   winning on exactly these two properties (image rendered at its raw
	   intrinsic size instead of being capped to the row), while display
	   and object-fit from this same rule applied fine. */
	height: 100% !important;
	width: auto;
	object-fit: cover;
	border-radius: 4px !important;
}

/* Skeleton loader: shown until the row image's `load` event fires (JS
   removes this element at that point). Absolutely positioned over the
   image's own footprint so layout doesn't shift. */
.psig-skeleton {
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, #e9e9e9 25%, #f5f5f5 50%, #e9e9e9 75% );
	background-size: 200% 100%;
	animation: psig-skeleton-shimmer 1.4s ease-in-out infinite;
	border-radius: 4px;
}

@keyframes psig-skeleton-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.psig-skeleton {
		animation: none;
	}
}

/* ---- Pinned "Open Gallery" button ---------------------------------- */
/* Fixed to the far right of the row wrapper (not the row itself, so it
   never scrolls with the images), taller than wide, vertical text. */

.psig-open-button {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 48px;
	--psig-open-button-width: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1d2327;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	padding: 12px 0;
}

.psig-open-button span {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.psig-open-button:hover,
.psig-open-button:focus-visible {
	background: #2c3338;
}

.psig-open-button:focus-visible {
	outline: 2px solid #4d90fe;
	outline-offset: 2px;
}

/* ---- Shared lightbox ------------------------------------------------ */

.psig-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba( 0, 0, 0, 0.92 );
	display: flex;
	flex-direction: column;
}

.psig-lightbox[hidden] {
	display: none;
}

body.psig-lightbox-open {
	overflow: hidden;
}

.psig-lightbox-topbar {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: start;
	gap: 16px;
	padding: 16px 20px;
	color: #fff;
}

.psig-lightbox-heading-col,
.psig-lightbox-description-col {
	min-width: 0;
}

.psig-lightbox-title {
	margin: 0;
	font-size: 18px;
}

.psig-lightbox-description {
	margin: 0;
	font-size: 14px;
	color: #ccc;
}

.psig-lightbox-description[hidden] {
	display: none;
}

.psig-lightbox-close {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
}

.psig-lightbox-close:focus-visible,
.psig-lightbox-arrow:focus-visible,
.psig-filmstrip-button:focus-visible {
	outline: 2px solid #4d90fe;
	outline-offset: 2px;
}

.psig-lightbox-stage {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 0 60px;
}

/* No captions/text overlay on the image itself — the stage holds only
   the <img> and the two arrow buttons, nothing else. */
.psig-lightbox-image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.psig-lightbox-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	background: rgba( 255, 255, 255, 0.1 );
	border: none;
	color: #fff;
	font-size: 28px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.psig-lightbox-arrow:hover {
	background: rgba( 255, 255, 255, 0.2 );
}

.psig-lightbox-prev {
	left: 10px;
}

.psig-lightbox-next {
	right: 10px;
}

.psig-lightbox-filmstrip-wrap {
	padding: 12px 20px;
	overflow-x: auto;
}

.psig-lightbox-filmstrip {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.psig-filmstrip-item {
	flex: 0 0 auto;
}

.psig-filmstrip-button {
	display: block;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 3px;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.psig-filmstrip-button img {
	display: block;
	height: 56px;
	width: 56px;
	object-fit: cover;
	border-radius: 2px;
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

.psig-filmstrip-item.is-active .psig-filmstrip-button {
	border-color: #4d90fe;
}

.psig-filmstrip-item.is-active .psig-filmstrip-button img {
	opacity: 1;
}

/* ---- Small screens --------------------------------------------------- */

@media ( max-width: 600px ) {
	.psig-lightbox-topbar {
		grid-template-columns: 1fr auto;
	}

	.psig-lightbox-description-col {
		display: none;
	}

	.psig-lightbox-stage {
		padding: 0 44px;
	}
}