/**
 * Public styles for MZ Custom Slider.
 *
 * The goal here is to keep the output close to prior behavior while providing
 * a stable wrapper class for future style adjustments.
 */

/* Wrapper around excerpt + slider output. */
.mzcs-slider-block {
	margin-bottom: 24px;
}

/* Keep excerpt spacing readable above the slider. */
.mzcs-slider-block .excerpt-above-slider {
	display: block;
	margin-bottom: 0;
}

/* Give the Smart Slider viewport the old framed gallery feel. */
.mzcs-slider-block .n2-ss-slider .n2-ss-slide-backgrounds {
	border: 1px solid #fff;
	background: #fff;
}

/* Remove Smart Slider top inset that shows as gray band above image. */
.mzcs-slider-block .n2-ss-slider .n2-padding {
	padding-top: 0 !important;
}

/* Smart Slider sometimes keeps an inner slide-layer top offset; force flush top. */
.mzcs-slider-block .n2-ss-slider .n2-ss-layer-container,
.mzcs-slider-block .n2-ss-slider .n2-ss-layer[data-sstype='slide'] {
	top: 0 !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Ensure main image fills from top edge (no gray band before image starts). */
.mzcs-slider-block .n2-ss-slider .n2-ss-slide-background-image,
.mzcs-slider-block .n2-ss-slider .n2-ss-slide-background-image img {
	top: 0 !important;
	height: 100% !important;
}

/* Keep visual hover response on the large image area. */
.mzcs-slider-block .n2-ss-slider:hover .n2-ss-slide-background-image img {
	filter: brightness(0.94);
}

/* Overlay Smart Slider arrows directly on the large image. */
.mzcs-slider-block .n2-ss-slider .nextend-arrow {
	position: absolute;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 46px;
	height: 56px;
	background: rgba(0, 0, 0, 0.42);
	border-radius: 0;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	z-index: 30;
	transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.mzcs-slider-block .n2-ss-slider .nextend-arrow img {
	width: 34px !important;
	height: 34px !important;
	object-fit: contain;
	filter: brightness(0) invert(1);
	display: none !important;
	margin: 0 auto !important;
}

/* Smart Slider renders normal + hover icons; show one at a time to avoid "double arrow". */
.mzcs-slider-block .n2-ss-slider .nextend-arrow .n2-arrow-normal-img {
	display: block !important;
}

.mzcs-slider-block .n2-ss-slider .nextend-arrow .n2-arrow-hover-img {
	display: none !important;
}

.mzcs-slider-block .n2-ss-slider .nextend-arrow:hover .n2-arrow-normal-img,
.mzcs-slider-block .n2-ss-slider .nextend-arrow:focus .n2-arrow-normal-img {
	display: none !important;
}

.mzcs-slider-block .n2-ss-slider .nextend-arrow:hover .n2-arrow-hover-img,
.mzcs-slider-block .n2-ss-slider .nextend-arrow:focus .n2-arrow-hover-img {
	display: block !important;
}

/* Prevent any additional pseudo-icon from rendering (double arrow look). */
.mzcs-slider-block .n2-ss-slider .nextend-arrow::before,
.mzcs-slider-block .n2-ss-slider .nextend-arrow::after {
	content: none !important;
}

/* Match old slider spacing: arrows flush to image sides. */
.mzcs-slider-block .n2-ss-slider .nextend-arrow-previous {
	left: 0 !important;
}

.mzcs-slider-block .n2-ss-slider .nextend-arrow-next {
	right: 0 !important;
}

.mzcs-slider-block .n2-ss-slider .nextend-arrow:hover,
.mzcs-slider-block .n2-ss-slider .nextend-arrow:focus {
	background: rgba(31, 143, 122, 0.55);
}

/* Refine thumbnail strip to mirror previous style. */
.mzcs-slider-block .nextend-thumbnail {
	margin-top: 10px;
}

/* Remove dark bar above thumbnails from Smart Slider controls wrapper. */
.mzcs-slider-block .n2-ss-slider .n2-ss-slider-controls-below,
.mzcs-slider-block .n2-ss-slider .n2-ss-slider-controls-below .n2-ss-widget {
	background: #fff !important;
}

/* Smart Slider applies thumbnail skin on .nextend-thumbnail-inner (hashed class). */
.mzcs-slider-block .nextend-thumbnail .nextend-thumbnail-inner {
	background: #fff !important;
	opacity: 1 !important;
	box-shadow: none !important;
	border: 0 !important;
}

.mzcs-slider-block .nextend-thumbnail .n2-thumbnail-dot {
	border: 1px solid #ddd;
	background: #fff !important;
	opacity: 0.7;
	transition: opacity 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Keep thumbnail items in a stable horizontal 4-up scroller. */
.mzcs-slider-block .nextend-thumbnail .nextend-thumbnail-scroller {
	display: grid !important;
	grid-auto-flow: column !important;
	grid-auto-columns: 25% !important;
}

/* Use a taller, portrait-like thumbnail crop on larger screens. */
.mzcs-slider-block .nextend-thumbnail .n2-thumbnail-dot img {
	width: 100% !important;
	height: 188px !important;
	object-fit: cover;
}

.mzcs-slider-block .nextend-thumbnail .n2-thumbnail-dot.n2-active {
	opacity: 1;
	border-color: #666;
}

/* Render the original Grow button outside Smart Slider drag surface. */
.mzcs-slider-block .mzcs-slider-shell {
	position: relative;
}

.mzcs-slider-block .mzcs-pin-original-host {
	position: absolute;
	top: 24px;
	left: 10px;
	z-index: 10;
	pointer-events: auto !important;
}

.mzcs-slider-block .mzcs-pin-original-host .dpsp-pin-it-button {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 40px !important;
	padding: 0 12px !important;
	min-width: 40px !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	background-color: var(--dpsp-pin-background, #c92228) !important;
	color: #fff !important;
	z-index: 90 !important;
	transform: none !important;
	border: 0 !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	line-height: 40px !important;
	font-size: 14px !important;
	font-family: Arial, sans-serif !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}

.mzcs-slider-block .mzcs-pin-original-host .dpsp-pin-it-button .dpsp-network-icon {
	display: inline-flex !important;
	width: 20px !important;
	height: 20px !important;
	align-items: center !important;
	justify-content: center !important;
	margin-right: 6px !important;
}

.mzcs-slider-block .mzcs-pin-original-host .dpsp-pin-it-button .dpsp-network-icon svg {
	height: 20px !important;
	fill: currentColor !important;
}

.mzcs-slider-block .mzcs-pin-original-host .dpsp-pin-it-button.dpsp-pin-it-button-has-label::after {
	display: inline-block !important;
	content: attr(title) !important;
}

/* Keep only the outside pin button visible/clickable. */
.mzcs-slider-block .n2-ss-slide-background-image .dpsp-pin-it-button,
.mzcs-slider-block .n2-ss-slide-background-image .dpsp-pin-it-overlay {
	display: none !important;
}

/* Keep strip arrows subtle but visible. */
.mzcs-slider-block .nextend-thumbnail .nextend-thumbnail-button {
	background: rgba(0, 0, 0, 0.35);
	border-radius: 0 !important;
	width: 36px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	visibility: visible !important;
	opacity: 1 !important;
	z-index: 5;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.mzcs-slider-block .nextend-thumbnail .nextend-thumbnail-button:hover {
	background: rgba(31, 143, 122, 0.5);
}

.mzcs-slider-block .nextend-thumbnail .nextend-thumbnail-button img {
	display: none !important;
}

/* Smart Slider may apply radius on inner wrappers; flatten all levels. */
.mzcs-slider-block .nextend-thumbnail .nextend-thumbnail-button *,
.mzcs-slider-block .nextend-thumbnail .nextend-thumbnail-button::before,
.mzcs-slider-block .nextend-thumbnail .nextend-thumbnail-button::after {
	border-radius: 0 !important;
}

/* Replace rounded thumbnail SVG arrows with simple rectangular chevrons. */
.mzcs-slider-block .nextend-thumbnail .nextend-thumbnail-button::before {
	visibility: visible !important;
	opacity: 1 !important;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	display: block !important;
	text-align: center;
}

.mzcs-slider-block .nextend-thumbnail .nextend-thumbnail-previous::before {
	content: '‹';
}

.mzcs-slider-block .nextend-thumbnail .nextend-thumbnail-next::before {
	content: '›';
}

/* Hide thumbnail strip arrows when gallery has 4 or fewer slides. */
.mzcs-slider-block.mzcs-gallery-count-1 .nextend-thumbnail .nextend-thumbnail-button,
.mzcs-slider-block.mzcs-gallery-count-2 .nextend-thumbnail .nextend-thumbnail-button,
.mzcs-slider-block.mzcs-gallery-count-3 .nextend-thumbnail .nextend-thumbnail-button,
.mzcs-slider-block.mzcs-gallery-count-4 .nextend-thumbnail .nextend-thumbnail-button {
	display: none !important;
}

/* Keep the main image in a portrait-like format across all screen sizes. */
.mzcs-slider-block .n2-ss-slider .n2-ss-slide,
.mzcs-slider-block .n2-ss-slider .n2-ss-slide-backgrounds {
	height: min(110vw, 920px) !important;
}

@media (max-width: 767px) {
	/* On mobile keep a taller portrait hero similar to old slider behavior. */
	.mzcs-slider-block .n2-ss-slider .n2-ss-slide,
	.mzcs-slider-block .n2-ss-slider .n2-ss-slide-backgrounds {
		height: min(128vw, 620px) !important;
		min-height: 470px;
	}

	/* Mobile should also show 4 thumbnails in the strip like desktop. */
	.mzcs-slider-block .nextend-thumbnail .nextend-thumbnail-scroller {
		display: flex !important;
		gap: 0 !important;
	}

	.mzcs-slider-block .nextend-thumbnail .n2-thumbnail-dot {
		flex: 0 0 25% !important;
		max-width: 25% !important;
	}

	.mzcs-slider-block .nextend-thumbnail .n2-thumbnail-dot img {
		width: 100% !important;
		height: 160px !important;
		object-fit: cover;
	}
}
@media (max-width: 480px) {
	.mzcs-slider-block .nextend-thumbnail .n2-thumbnail-dot img {
		height: 115px !important;
	}
}