/**
 * Padamz Premium Widget — Responsive & Layout Hardening
 *
 * An ADDITIVE layer loaded after the main stylesheet. It does not redesign
 * any widget; it only hardens layout, positioning, spacing, image behaviour
 * and mobile responsiveness, and exposes a small set of CSS variables so the
 * spacing/positioning can be tuned without editing the design CSS.
 *
 * Exposed variables (with safe clamp() defaults):
 *   --padamz-slide-padding
 *   --padamz-slide-content-max-width
 *   --padamz-nav-offset
 *   --padamz-pagination-offset
 *
 * Breakpoints follow Elementor defaults: tablet <= 1024px, mobile <= 767px.
 *
 * @since 2.1.0
 */

/* =================================================================
   1. SHARED SLIDER VARIABLE DEFAULTS
   ================================================================= */

.lumi-premium-slider,
.lumi-split-slider,
.padamz-ps-wrap,
.padamz-pc-wrap,
.padamz-psom-wrap,
.lumi-logo-carousel,
.lumi-testimonial-slider {
	--padamz-slide-padding: clamp( 16px, 4vw, 64px );
	--padamz-slide-content-max-width: min( 100%, 640px );
	--padamz-nav-offset: clamp( 8px, 2vw, 24px );
	--padamz-pagination-offset: clamp( 8px, 2vw, 20px );
}

/* =================================================================
   2. IMAGE OVERFLOW / ASPECT GUARDS
   Prevent layout shift, overflow and stretched media everywhere.
   ================================================================= */

.lumi-premium-slider img,
.lumi-split-slider img,
.padamz-ps-wrap img,
.padamz-pc-wrap img,
.padamz-psom-wrap img,
.lumi-logo-carousel img,
.lumi-testimonial-slider img,
.lpp-album-gallery img,
.lpp-gallery-item img,
.lpp-album-stack img {
	max-width: 100%;
	height: auto;
}

/* Slide background / cover images should fill without distortion. */
.lumi-premium-slider .swiper-slide img.is-cover,
.lumi-split-slider .swiper-slide img.is-cover,
.padamz-ps-wrap .swiper-slide img,
.padamz-psom-wrap .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var( --padamz-image-object-position, center center );
}

/* =================================================================
   3. SLIDE CONTENT POSITIONING & PADDING
   Keep text off the edges; cap content width so lines stay readable.
   ================================================================= */

.lumi-premium-slider .swiper-slide,
.lumi-split-slider .swiper-slide,
.padamz-psom-wrap .swiper-slide {
	overflow: hidden;
}

.lumi-premium-slider .lumi-premium-slide-content,
.lumi-split-slider .lumi-split-slide-content,
.padamz-psom-wrap .padamz-psom-slide-content {
	max-width: var( --padamz-slide-content-max-width );
	padding: var( --padamz-slide-padding );
	box-sizing: border-box;
}

/* =================================================================
   4. NAVIGATION / PAGINATION SEPARATION
   Stop arrows covering text and dots colliding with buttons.
   ================================================================= */

.lumi-premium-slider .swiper-button-next,
.lumi-premium-slider .swiper-button-prev,
.lumi-split-slider .swiper-button-next,
.lumi-split-slider .swiper-button-prev,
.padamz-ps-wrap .swiper-button-next,
.padamz-ps-wrap .swiper-button-prev,
.padamz-pc-wrap .swiper-button-next,
.padamz-pc-wrap .swiper-button-prev {
	z-index: 5;
}

.lumi-premium-slider .swiper-pagination,
.lumi-split-slider .swiper-pagination,
.padamz-ps-wrap .swiper-pagination,
.padamz-pc-wrap .swiper-pagination,
.padamz-psom-wrap .swiper-pagination {
	bottom: var( --padamz-pagination-offset );
	z-index: 4;
}

/* Give the content a little breathing room above bottom pagination so the
   dots never sit on top of a CTA button. */
.lumi-premium-slider .swiper-horizontal > .swiper-pagination-bullets,
.lumi-split-slider .swiper-horizontal > .swiper-pagination-bullets {
	padding-bottom: 0;
}

/* =================================================================
   5. GALLERY GRID — GAP, RADIUS, ASPECT, COLUMNS
   Tunable, with sensible responsive defaults.
   ================================================================= */

.lpp-album-gallery {
	--padamz-gallery-grid-gap: clamp( 8px, 1.6vw, 20px );
	--padamz-album-card-padding: clamp( 12px, 2vw, 24px );
	--padamz-album-panel-padding: clamp( 12px, 2vw, 28px );
	--padamz-image-radius: 12px;
	--padamz-image-aspect: 1 / 1;
}

.lpp-album-gallery .lpp-gallery-grid,
.lpp-album-gallery .lpp-gallery-albums {
	gap: var( --padamz-gallery-grid-gap );
}

.lpp-album-gallery .lpp-album-card {
	padding: var( --padamz-album-card-padding );
}

.lpp-album-gallery .lpp-album-panel {
	padding: var( --padamz-album-panel-padding );
}

.lpp-album-gallery .lpp-gallery-item img {
	border-radius: var( --padamz-image-radius );
	aspect-ratio: var( --padamz-image-aspect );
	object-fit: cover;
	width: 100%;
}

/* Hidden album panels must not affect layout at all. */
.lpp-album-gallery .lpp-album-panel[hidden],
.lpp-album-gallery [data-lpp-album-panel][hidden] {
	display: none !important;
}

/* Clean empty state. */
.lpp-album-gallery .lpp-empty-state,
.lpp-empty-state {
	text-align: center;
	opacity: 0.7;
	padding: clamp( 16px, 4vw, 48px );
}

/* =================================================================
   6. FILTER TABS — GRACEFUL WRAPPING
   ================================================================= */

.lpp-filter-nav,
.lpp-album-gallery .lpp-filter-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lpp-filter-nav .lpp-filter-btn {
	flex: 0 0 auto;
}

/* =================================================================
   7. MODALS / OFFCANVAS — CENTRING & SAFE HEIGHT
   ================================================================= */

.lumi-modal.lumi-open,
.lpp-video-popup-modal.is-open {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lumi-modal .lumi-modal-box,
.lpp-video-popup-modal .lpp-video-popup-inner {
	max-height: min( 92vh, 92dvh );
	max-width: min( 96vw, 960px );
	margin: auto;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

/* Body class set by PadamzModalManager — belt & suspenders so nothing
   scrolls behind an open overlay even if a theme overrides overflow. */
body.padamz-scroll-locked {
	overflow: hidden;
}

/* =================================================================
   7b. PREMIUM SLIDER — MOBILE BREATHING ROOM
   The Premium Slider applies its padding to .lumi-premium-slide-shell
   (NOT .lumi-premium-slide-content), so the generic slide-padding rule
   above does not reach it. On small screens its base top padding is only
   ~20px, which leaves the headline jammed against a sticky header. We bump
   ONLY the top padding; horizontal padding and the bottom padding that
   clears the nav / pagination / status chrome are left to the base CSS.
   ================================================================= */

.lumi-premium-slider {
	--padamz-slide-top-mobile: clamp( 40px, 11vw, 64px );
	--padamz-slide-top-tablet: clamp( 36px, 6vw, 64px );
}

@media ( max-width: 1024px ) {
	.lumi-premium-slide-shell {
		padding-top: var( --padamz-slide-top-tablet, 40px );
	}
}

@media ( max-width: 767px ) {
	.lumi-premium-slide-shell {
		padding-top: var( --padamz-slide-top-mobile, 44px );
	}
}

/* =================================================================
   7c. PREMIUM SLIDER — ALIGNMENT FOLLOW, TEXT SPREAD, FULL COVERAGE
   ================================================================= */

/* Buttons and highlight chips follow the content alignment automatically,
   so text and buttons stay together (no more scattered look). The explicit
   per-device "Buttons → Alignment" control still overrides this. */
.lumi-premium-align-left   { --pm-justify: flex-start; }
.lumi-premium-align-center { --pm-justify: center; }
.lumi-premium-align-right  { --pm-justify: flex-end; }

.lumi-premium-slide-content .lumi-premium-slide-buttons,
.lumi-premium-slide-content .lumi-premium-slide-highlights {
	justify-content: var( --pm-justify, flex-start );
}

/* Two buttons stay side-by-side when there is room and only wrap (still
   aligned, not left-stranded) when the screen is genuinely too narrow. */
.lumi-premium-slide-buttons {
	flex-wrap: wrap;
}

/* Let the description use the full content width instead of being choked to
   ~56 characters, so the text can spread when a wider Content Max Width is set. */
.lumi-premium-slide-content .lumi-premium-slide-desc {
	max-width: 100%;
}

/* Full-bleed coverage: use the live (dynamic) viewport height so the slide
   image reaches the true bottom of the screen on mobile, where a 100vh hero
   otherwise leaves a gap under the collapsing browser toolbar. A per-widget
   custom Min Height control still overrides this. */
.lumi-premium-slider {
	min-height: 100vh; /* fallback */
	min-height: 100dvh;
	/* DEFINITE height so the Swiper height chain resolves. The swiper,
	   swiper-wrapper and swiper-slide are all height:100%; with only a
	   min-height on the slider those percentages collapsed, and on slides
	   that Swiper positions absolutely (creative / fade / cube effects) the
	   slide shrank to its content height — exposing the dark slider
	   background below the image (the reported "dark space"). A custom Min
	   Height larger than the viewport still wins via min-height. */
	height: 100vh; /* fallback */
	height: 100dvh;
}

/* Remove any hairline gap at the slide edges. */
.lumi-premium-slide-media {
	inset: -1px;
}

/* =================================================================
   8. TABLET ( <= 1024px )
   ================================================================= */

@media ( max-width: 1024px ) {
	.lumi-premium-slider,
	.lumi-split-slider,
	.padamz-ps-wrap,
	.padamz-pc-wrap,
	.padamz-psom-wrap {
		--padamz-slide-padding: clamp( 14px, 4vw, 40px );
	}

	.lpp-album-gallery {
		--padamz-gallery-grid-gap: clamp( 8px, 1.6vw, 16px );
	}
}

/* =================================================================
   9. MOBILE ( <= 767px )
   Trim oversized padding, cap slider height, keep arrows on-screen.
   ================================================================= */

@media ( max-width: 767px ) {
	.lumi-premium-slider,
	.lumi-split-slider,
	.padamz-ps-wrap,
	.padamz-pc-wrap,
	.padamz-psom-wrap,
	.lumi-logo-carousel,
	.lumi-testimonial-slider {
		--padamz-slide-padding: clamp( 12px, 5vw, 22px );
		--padamz-nav-offset: 6px;
		--padamz-pagination-offset: 8px;
	}

	/* Avoid sliders that eat the whole tall mobile viewport. */
	.lumi-premium-slider .swiper-slide,
	.lumi-split-slider .swiper-slide,
	.padamz-psom-wrap .swiper-slide {
		max-height: 80dvh;
	}

	/* Keep nav arrows inside the frame on small screens. */
	.lumi-premium-slider .swiper-button-next,
	.lumi-split-slider .swiper-button-next,
	.padamz-ps-wrap .swiper-button-next {
		right: var( --padamz-nav-offset );
	}

	.lumi-premium-slider .swiper-button-prev,
	.lumi-split-slider .swiper-button-prev,
	.padamz-ps-wrap .swiper-button-prev {
		left: var( --padamz-nav-offset );
	}

	/* Gallery: never wider than the viewport, comfortable single/dual column. */
	.lpp-album-gallery .lpp-gallery-grid,
	.lpp-album-gallery .lpp-gallery-albums {
		grid-template-columns: repeat( auto-fill, minmax( min( 100%, 150px ), 1fr ) );
	}

	/* Modal should use the full small screen comfortably. */
	.lumi-modal .lumi-modal-box,
	.lpp-video-popup-modal .lpp-video-popup-inner {
		max-height: min( 90vh, 90dvh );
		max-width: 94vw;
	}

	/* Prevent stretched, too-tall cards. */
	.lpp-album-gallery .lpp-gallery-item img {
		aspect-ratio: var( --padamz-image-aspect, 4 / 3 );
	}
}

/* =================================================================
   11. HEADING WIDGETS — OVERFLOW & WRAP HARDENING
   Section Title, Dual-Font Hero Title (+ stacked), Hero Title with
   Highlights, CTA Hero. Typography stays Elementor-controlled; these are
   purely defensive so long words / large mobile type never overflow the
   screen or force horizontal scroll. No visual redesign.
   ================================================================= */

.lumi-section-title,
.lumi-dfht-headings,
.lumi-htri-headings,
.lumi-cta-hero-content {
	max-width: 100%;
}

.lumi-st-title,
.lumi-st-description,
.lumi-dfht-headings,
.lumi-dfht-row-1,
.lumi-dfht-top,
.lumi-dfht-highlight,
.lumi-dfht-bottom,
.lumi-dfht-desc,
.lumi-htri-headings,
.lumi-htri-title-1,
.lumi-htri-title-2,
.lumi-htri-title-3,
.lumi-cta-hero-title {
	max-width: 100%;
	min-width: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Balanced wrapping for the large display titles (nicer line breaks, no
   single orphan word) where the browser supports it. */
.lumi-st-title,
.lumi-dfht-row-1,
.lumi-dfht-bottom,
.lumi-htri-title-1,
.lumi-htri-title-2,
.lumi-htri-title-3,
.lumi-cta-hero-title {
	text-wrap: balance;
}

/* Heading widgets should never introduce a horizontal scrollbar on mobile. */
@media ( max-width: 767px ) {
	.lumi-section-title,
	.lumi-dfht-headings,
	.lumi-htri-headings {
		overflow-x: clip;
	}
}

/* =================================================================
   10. REDUCED MOTION
   ================================================================= */

@media ( prefers-reduced-motion: reduce ) {
	.lumi-premium-slider .swiper-wrapper,
	.lumi-split-slider .swiper-wrapper,
	.padamz-psom-prog-bar {
		transition-duration: 0.001ms !important;
	}
}