/**
 * Salient Gallery — front-end styles.
 *
 * On the page only the featured image is shown. The remaining album images are
 * attached to the lightbox via visually-hidden links. Hover effects and
 * entrance animations are driven by the Salient theme's own markup hooks
 * (.hover-wrap[data-hover-animation], img.img-with-animation[data-animation])
 * which this element reuses, so the featured image matches the look of the
 * theme's standard Image element.
 */

.salient-gallery.sg-featured-mode {
	--sg-radius: 0;
	width: 100%;
	margin: 0 0 20px;
	text-align: center;
}

/* Featured image wrapper. */
.salient-gallery .sg-featured {
	position: relative;
	display: block;
	max-width: var( --sg-max-width, 100% );
	margin: 0 auto;
}

.salient-gallery .sg-featured .inner,
.salient-gallery .sg-featured .sg-media,
.salient-gallery .sg-featured .hover-wrap,
.salient-gallery .sg-featured .hover-wrap-inner {
	position: relative;
	height: 100%;
}

/* Media box is the positioning context for the overlays so the hover zoom
   (which scales the image only) never affects the title or count. */
.salient-gallery .sg-featured .sg-media {
	display: block;
}

/* Gentler, slower zoom-in than the theme default (scale 1.13 / 0.65s),
   scoped to this element so other images on the page are unaffected. */
.salient-gallery .sg-featured .hover-wrap .hover-wrap-inner {
	transition: transform 1.2s cubic-bezier( 0.05, 0.2, 0.1, 1 );
}
.salient-gallery .sg-featured .hover-wrap[data-hover-animation="zoom"]:hover .hover-wrap-inner {
	transform: scale( 1.06 );
}

/* The clickable image. Auto-scales to fill the container width. */
.salient-gallery .sg-featured a.salient-gallery-item {
	display: block;
	position: relative;
	line-height: 0;
	overflow: hidden;
	cursor: pointer;
	border-radius: var( --sg-radius );
}

.salient-gallery .sg-featured img.sg-img {
	display: block;
	width: 100%;
	height: auto;
	/* Overhang the bottom by 1px (clipped by the container's overflow:hidden)
	   so sub-pixel rounding can't reveal the scrim's dark edge beneath it. */
	margin-bottom: -1px;
	border-radius: var( --sg-radius );
}

/* Placeholder shown for a video that has no poster image. */
.salient-gallery .sg-media-placeholder {
	min-height: 220px;
	background: #1a1a1a;
}

/* Play overlay for video / YouTube items. */
.salient-gallery .sg-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 74px;
	height: 74px;
	z-index: 3;
	pointer-events: none;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.salient-gallery .sg-play svg {
	width: 100%;
	height: 100%;
	display: block;
	filter: drop-shadow( 0 2px 10px rgba( 0, 0, 0, 0.35 ) );
}
.salient-gallery .sg-featured:hover .sg-play {
	transform: translate( -50%, -50% ) scale( 1.08 );
}

/* Self-hosted video inside the lightbox. */
.sg-video-holder {
	max-width: 90vw;
}
.mfp-content .sg-video-holder,
.mfp-content video.sg-video {
	margin: 0 auto;
}
video.sg-video {
	display: block;
	width: auto;
	max-width: 90vw;
	max-height: 88vh;
	background: #000;
}

/* Fixed aspect ratio: scale the image to cover the box. */
.salient-gallery.sg-has-ratio .sg-featured a.salient-gallery-item {
	aspect-ratio: var( --sg-ar );
	width: 100%;
}
.salient-gallery.sg-has-ratio .sg-featured img.sg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var( --sg-pos, center center );
}

/* Keep rounded corners on the hover layers too. */
.salient-gallery .sg-featured .hover-wrap,
.salient-gallery .sg-featured .color-overlay {
	border-radius: var( --sg-radius );
	overflow: hidden;
}

/* Hover colour-overlay sits behind the title and count, and fades in more
   slowly than the theme default (0.65s) to match the gentler zoom. */
.salient-gallery .sg-featured .color-overlay {
	z-index: 1;
	transition: opacity 1.2s cubic-bezier( 0.2, 1, 0.2, 1 );
}

/* Legibility scrim — placed behind the title and count. */
.salient-gallery .sg-scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: var( --sg-radius );
}
.salient-gallery .sg-scrim-top {
	background: linear-gradient( to bottom, rgba( 0, 0, 0, 0.6 ) 0%, rgba( 0, 0, 0, 0 ) 45% );
}
.salient-gallery .sg-scrim-bottom {
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.6 ) 0%, rgba( 0, 0, 0, 0 ) 45% );
}
.salient-gallery .sg-scrim-middle {
	background: linear-gradient( to bottom, rgba( 0, 0, 0, 0.1 ) 0%, rgba( 0, 0, 0, 0.45 ) 50%, rgba( 0, 0, 0, 0.1 ) 100% );
}

/* Image-count badge — base shape. Style + shape supplied by modifier classes. */
.salient-gallery .sg-count {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 34px;
	height: 34px;
	padding: 0 6px;
	font-size: 14px;
	line-height: 1;
	font-weight: 700;
	pointer-events: none;
}

/* Badge shapes. */
.salient-gallery .sg-count--circle {
	border-radius: 50%;
}
.salient-gallery .sg-count--square {
	border-radius: 0;
}
.salient-gallery .sg-count--rounded {
	border-radius: 10px;
}

/* Square badge flush in the top-right corner, with more padding. */
.salient-gallery .sg-count--corner {
	top: 0;
	right: 0;
	min-width: 48px;
	height: 48px;
	padding: 0 16px;
	border-radius: 0;
}

/* Accent circle (default). */
.salient-gallery .sg-count--accent {
	color: #fff;
	background: var( --nectar-accent-color, #2a2a2a );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.25 );
}

/* Light frosted glass — matched to the TNM Mobile Footer plugin styling. */
.salient-gallery .sg-count--light-glass {
	color: #1a1a1a;
	background: rgba( 255, 255, 255, 0.18 );
	-webkit-backdrop-filter: blur( 14px ) saturate( 150% );
	backdrop-filter: blur( 14px ) saturate( 150% );
	box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.20 );
}

/* Dark frosted glass. */
.salient-gallery .sg-count--dark-glass {
	color: #fff;
	background: rgba( 20, 20, 20, 0.4 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.3 );
}

/* Album title overlay. */
.salient-gallery .sg-title {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 3;
	box-sizing: border-box;
	padding: 22px 24px;
	text-align: center;
	pointer-events: none;
}
.salient-gallery .sg-title .sg-title-text {
	margin: 0;
	color: inherit;
	line-height: 1.2;
	word-wrap: break-word;
}
/* The heading colour is set inline; keep it overridable but default visible. */
.salient-gallery .sg-title-text {
	color: #fff;
}
.salient-gallery .sg-title-text.sg-title-shadow {
	text-shadow: 0 2px 14px rgba( 0, 0, 0, 0.3 ), 0 1px 4px rgba( 0, 0, 0, 0.25 );
	transition: text-shadow 0.5s ease;
}

/* When the Color Overlay hover animation is active (on hover), drop the title
   shadow so it doesn't clash with the overlay tint. */
.salient-gallery .sg-featured:hover .hover-wrap[data-hover-animation="color-overlay"] ~ .sg-title .sg-title-text.sg-title-shadow {
	text-shadow: none;
}

/* Title background panel: the heading hugs its text so the panel sits behind it. */
.salient-gallery .sg-title-text.sg-title-has-bg {
	display: inline-block;
	padding: 6px 14px;
}
.salient-gallery .sg-title-text.sg-title-bg-light-glass {
	background: rgba( 255, 255, 255, 0.18 );
	-webkit-backdrop-filter: blur( 14px ) saturate( 150% );
	backdrop-filter: blur( 14px ) saturate( 150% );
	box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.20 );
}
.salient-gallery .sg-title-text.sg-title-bg-dark-glass {
	background: rgba( 20, 20, 20, 0.4 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.3 );
}

/* Title positions. */
.salient-gallery.sg-title-top .sg-title {
	top: 0;
}
.salient-gallery.sg-title-bottom .sg-title {
	bottom: 0;
}
.salient-gallery.sg-title-middle .sg-title {
	top: 50%;
	transform: translateY( -50% );
}

/* Caption beneath the featured image. */
.salient-gallery .sg-caption {
	margin: 8px 0 0;
	font-size: 0.85em;
	line-height: 1.4;
	opacity: 0.85;
}

/* Lightbox-only images: present in the DOM, hidden from view. */
.salient-gallery .sg-lightbox-extra {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Box-shadow presets (mirror the depth options of the Image element).
   Applied only if the theme has not already styled the shadow data hook. */
.salient-gallery.sg-shadow-small-depth .sg-featured a.salient-gallery-item {
	box-shadow: 0 3px 8px rgba( 0, 0, 0, 0.08 );
}
.salient-gallery.sg-shadow-medium-depth .sg-featured a.salient-gallery-item {
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.12 );
}
.salient-gallery.sg-shadow-large-depth .sg-featured a.salient-gallery-item {
	box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.16 );
}
.salient-gallery.sg-shadow-x-large-depth .sg-featured a.salient-gallery-item {
	box-shadow: 0 22px 48px rgba( 0, 0, 0, 0.22 );
}

/* Editor placeholder. */
.salient-gallery-placeholder {
	padding: 20px;
	border: 1px dashed #ccc;
	text-align: center;
	color: #777;
	border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * Albums carousel (self-contained slider).
 * ------------------------------------------------------------------------- */

.salient-gallery-carousel {
	--sgc-cols-d: 3;
	--sgc-cols-t: 2;
	--sgc-cols-m: 1;
	--sgc-gap: 20px;
	position: relative;
	width: 100%;
	margin: 0 0 20px;
}

.salient-gallery-carousel .sg-carousel-track {
	display: flex;
}
.salient-gallery-carousel .sg-carousel-cell .salient-gallery {
	margin: 0;
}
.salient-gallery-carousel .sg-carousel-viewport {
	position: relative;
	width: 100%;
}

/* Fallback before/without JS: cells sized via CSS + horizontal scroll. */
.salient-gallery-carousel:not( .sg-ready ) .sg-carousel-viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.salient-gallery-carousel:not( .sg-ready ) .sg-carousel-cell {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: calc( ( 100% - ( var( --sgc-cols-d ) - 1 ) * var( --sgc-gap ) ) / var( --sgc-cols-d ) );
	margin-right: var( --sgc-gap );
}

/* Active slider: the viewport clips the slides; the root stacks the viewport
   and the dots so the dots never overlap the albums. */
.salient-gallery-carousel.sg-ready {
	display: flex;
	flex-direction: column;
}
.salient-gallery-carousel.sg-ready .sg-carousel-viewport {
	overflow: hidden;
}
.salient-gallery-carousel.sg-ready .sg-carousel-track {
	flex-wrap: nowrap;
	will-change: transform;
}

/* Prev / next arrows. */
.salient-gallery-carousel .sg-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --nectar-accent-color, #2a2a2a );
	color: #fff;
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}
.salient-gallery-carousel .sg-carousel-arrow:hover {
	opacity: 0.85;
}
.salient-gallery-carousel .sg-carousel-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}
.salient-gallery-carousel .sg-carousel-arrow svg {
	width: 18px;
	height: 18px;
}
.salient-gallery-carousel .sg-carousel-prev {
	left: 10px;
}
.salient-gallery-carousel .sg-carousel-next {
	right: 10px;
}

/* Pagination dots — placed outside the slides (above or below), never overlapping. */
.salient-gallery-carousel .sg-carousel-dots {
	display: flex;
	gap: 10px;
	margin: 0;
}
/* Vertical placement (order within the flex-column root). */
.salient-gallery-carousel.sg-dots-top .sg-carousel-dots {
	order: -1;
	margin: 0 0 14px;
}
.salient-gallery-carousel.sg-dots-bottom .sg-carousel-dots {
	order: 1;
	margin: 14px 0 0;
}
/* Horizontal placement (cross-axis alignment of the dots row). */
.salient-gallery-carousel.sg-dots-left .sg-carousel-dots {
	align-self: flex-start;
}
.salient-gallery-carousel.sg-dots-center .sg-carousel-dots {
	align-self: center;
}
.salient-gallery-carousel.sg-dots-right .sg-carousel-dots {
	align-self: flex-end;
}
.salient-gallery-carousel .sg-carousel-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.25;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.salient-gallery-carousel .sg-carousel-dot.is-active {
	opacity: 1;
	background: var( --nectar-accent-color, currentColor );
}