/* S3E Before/After Gallery — scoped to the s3ebg- prefix on purpose so
   nothing here can bleed onto the rest of a Salient site. Only enqueued
   on Portfolio (case) pages, the Portfolio archive, and pages flagged as
   gallery index pages — see s3ebg_should_load_assets() in the main
   plugin file. */

/* ---- Dropdown nav ---- */
/* v1.1.4: dropdown on the left, "Back to Gallery" on the right, one row. */
.s3ebg-dropdown-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75em 1.5em;
	/* v1.1.5: the Before/After carousel module was sitting on top of the
	   open dropdown menu — its own stacking context apparently outranks
	   whatever this row had before. Giving the row itself a position +
	   very high z-index, not just the popup panel inside it, is what
	   actually lets it win regardless of what the carousel does. */
	position: relative;
	z-index: 999999;
}

.s3ebg-dropdown {
	position: relative;
	display: inline-block;
}

/* v1.1.7: colors come from Salient's own Theme Options > General >
   Colors settings instead of a hex value baked into this plugin.
   Salient publishes those as CSS custom properties on every page
   (--nectar-accent-color, --nectar-extra-color-1/2/3) and applies the
   same data-color="..." attribute convention to its own native
   elements — the Gallery Dropdown's "Button Color" setting (vc-map.php)
   picks one of the four, shortcodes.php writes it out as data-color,
   and these rules key off it. The literal hex fallbacks (after the
   comma in each var()) are only ever used if a var is somehow
   undefined — e.g. this stylesheet loaded on a page Salient's own
   dynamic-styles.css hasn't rendered on — and match this element's
   original pre-v1.1.7 colors so that failure mode looks the same as
   it always has. */
.s3ebg-dropdown__btn {
	background-color: var(--nectar-accent-color, #504644);
	color: #fff;
	padding: 10px;
	font-size: 18px;
	border: none;
	cursor: pointer;
	min-width: 13em;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
}

.s3ebg-dropdown__btn[data-color="extra-color-1"] {
	background-color: var(--nectar-extra-color-1, #504644);
}

.s3ebg-dropdown__btn[data-color="extra-color-2"] {
	background-color: var(--nectar-extra-color-2, #504644);
}

.s3ebg-dropdown__btn[data-color="extra-color-3"] {
	background-color: var(--nectar-extra-color-3, #504644);
}

.s3ebg-dropdown:hover .s3ebg-dropdown__btn {
	background-color: #e7e1d9;
	color: var(--nectar-accent-color, #000);
}

.s3ebg-dropdown:hover .s3ebg-dropdown__btn[data-color="extra-color-1"] {
	color: var(--nectar-extra-color-1, #000);
}

.s3ebg-dropdown:hover .s3ebg-dropdown__btn[data-color="extra-color-2"] {
	color: var(--nectar-extra-color-2, #000);
}

.s3ebg-dropdown:hover .s3ebg-dropdown__btn[data-color="extra-color-3"] {
	color: var(--nectar-extra-color-3, #000);
}

.s3ebg-dropdown__arrow {
	font-size: 1.2em;
	transition: transform 0.2s;
}

.s3ebg-dropdown:hover .s3ebg-dropdown__arrow {
	transform: scaleY(-1);
}

.s3ebg-dropdown__content {
	display: none;
	position: absolute;
	font-size: 14px;
	line-height: 20px;
	background-color: #fff;
	min-width: 220px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	z-index: 1000;
}

.s3ebg-dropdown:hover .s3ebg-dropdown__content {
	display: block;
	z-index: 10000;
}

.s3ebg-dropdown__link {
	color: #000;
	padding: 12px 14px;
	text-decoration: none;
	display: block;
	border-top: 1px solid #f2f2f2;
}

.s3ebg-dropdown__link:hover {
	background-color: #e8e5db;
}

.s3ebg-back-link {
	/* Sits in .s3ebg-dropdown-row now, so its own spacing is only needed
	   for the narrow-screen case where the row wraps to two lines. */
	margin: 0;
}

/* ---- Before/after pair (one carousel slide) ---- */
.s3ebg-pair {
	display: flex;
	gap: 4px;
	width: 100%;
}

.s3ebg-pair__col {
	flex: 1 1 50%;
	min-width: 0;
}

/* Safety net: keeps a before/after photo filling its frame even if a
   future WP core or Salient update changes how img:not([srcset]) rules
   cascade. Our images always go through wp_get_attachment_image(), so
   they always carry srcset — this is just cheap insurance. */
.s3ebg-pair__col img {
	width: 100% !important;
	height: auto !important;
	display: block;
}

/* ---- Thumbnail rail ---- */
.s3ebg-thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* v1.1.5: the thumbnail rail and the Before/After carousel sit in
	   separate WPBakery columns next to each other, and the rail was
	   starting higher than the carousel. If the parent column is a flex
	   container (WPBakery's row-flex layout, common on this site),
	   align-self: flex-start pins this element to the top of it instead
	   of whatever default cross-axis alignment (often stretch/center)
	   the column was using — margin-top: 0 clears any inherited spacing
	   on top of that. If the two still don't line up after this, the
	   remaining cause is outside this stylesheet's reach: a WPBakery Row
	   "Content Alignment" / Column "Content Position" setting, or a
	   caption bar the Carousel Item's own title is rendering above the
	   before/after photos — worth checking in the page builder itself. */
	align-self: flex-start;
	margin-top: 0;
}

.s3ebg-thumbs__item {
	/* v1.1.4: no border on any thumbnail, selected or not. */
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	line-height: 0;
	display: block;
}

.s3ebg-thumbs__img {
	/* v1.1.4: ~35% smaller than before (was 100% of the stretched button's
	   width) — centered within it now that it's narrower than its parent. */
	width: 65% !important;
	height: auto !important;
	margin: 0 auto;
}

/* ---- Related / view-other-patients slider ---- */
/* v1.1.8: was a static CSS grid (wrapped whenever it ran out of
   columns); redesigned as a slider — one row of cases that slides
   sideways, with Prev/Next arrow buttons underneath (s3ebg.js drives
   the actual sliding; --s3ebg-related-columns now sets how many cases
   are visible at once instead of a grid column count). */
.s3ebg-related-wrap {
	position: relative;
}

.s3ebg-related {
	overflow: hidden;
}

.s3ebg-related__track {
	display: flex;
	gap: 15px;
	transition: transform 0.3s ease;
}

.s3ebg-related__item {
	flex: 0 0 calc((100% - (var(--s3ebg-related-columns, 4) - 1) * 15px) / var(--s3ebg-related-columns, 4));
	min-width: 0;
	display: block;
}

.s3ebg-related__img {
	width: 100% !important;
	height: auto !important;
	display: block;
}

/* Hidden until s3ebg.js confirms there are more cases than fit on one
   screen — nothing to add here otherwise. */
.s3ebg-related__nav {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 1.25em;
	margin-top: 24px;
}

.s3ebg-related-wrap.s3ebg-related--scrollable .s3ebg-related__nav {
	display: flex;
}

/* v1.1.9: solid, circular, drop-shadowed buttons (was flat text-colored
   arrows with no fill — easy to miss against a busy photo grid). Reuses
   Salient's own --nectar-accent-color custom property (the same one the
   Gallery Dropdown's button already keys off — see .s3ebg-dropdown__btn
   above) so this stays a colored, on-brand button rather than a plain
   gray circle, and stays in sync with this site's theme colors
   automatically. filter: brightness() on hover/active darkens or lightens
   whatever that color actually is, instead of hardcoding a fixed hover
   color that could clash with it. */
.s3ebg-related__prev,
.s3ebg-related__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: var(--nectar-accent-color, #504644);
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
	transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.s3ebg-related__prev:not([disabled]):hover,
.s3ebg-related__next:not([disabled]):hover {
	filter: brightness(0.88);
	transform: scale(1.08);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.s3ebg-related__prev:not([disabled]):active,
.s3ebg-related__next:not([disabled]):active {
	transform: scale(0.96);
}

.s3ebg-related__prev[disabled],
.s3ebg-related__next[disabled] {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}

/* Hide Salient's default portfolio meta text under grid thumbnails so
   index pages stay uniform (the plugin relies on featured images doing
   the talking, per the existing image-naming/watermark convention). */
.work-meta {
	display: none !important;
}

/* ---- Responsive ---- */
@media only screen and (max-width: 999px) {
	.s3ebg-dropdown__btn {
		min-width: 10em;
	}

	.s3ebg-thumbs {
		flex-direction: row;
		/* v1.1.4: nowrap (was wrap) — was pushing a 3rd+ thumbnail onto its
		   own row on mobile. All thumbnails now stay on one row; overflow-x
		   is a safety net for a case with more angles than comfortably fit
		   at this width, rather than falling back to wrapping. */
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.s3ebg-thumbs__item {
		flex: 0 0 auto;
	}

	.s3ebg-thumbs__img {
		/* v1.1.4: ~35% smaller than before (was 70px) — also what keeps
		   all thumbnails fitting on one row instead of wrapping. */
		width: 45px !important;
	}

	/* v1.1.8: the slider always shows 2 cases at once on mobile,
	   regardless of the "Cases Visible at Once" setting — matches the
	   fixed 2-column behavior this had back when it was a CSS grid. */
	.s3ebg-related__item {
		flex: 0 0 calc((100% - 15px) / 2);
	}
}

/* v1.1.4: before/after pair used to stack vertically below 690px — Alex
   wants them side by side at every width instead, so this override is
   removed. .s3ebg-pair's own `display: flex` (default flex-direction:
   row) and .s3ebg-pair__col's `flex: 1 1 50%` already give two even
   50%-wide columns on their own; nothing mobile-specific is needed. */