/**
 * Hero slider styling — full-bleed cover slides + nav / pagination polish.
 * Pairs with assets/js/hero-slider.js and the enqueued swiper-bundle.
 */

/* Desktop / tablet: true full-bleed. The block already has `alignfull`, but the
   negative-margin break-out is declared here too so a more specific selector
   never re-constrains it to the theme content width. `width:auto` (not 100vw)
   avoids the scrollbar-gutter overflow. */
.custom-hero-slider.swiper {
	position: relative;
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
}

/* Swiper needs the wrapper as flex row; fade mode stacks slides itself. */
.custom-hero-slider .swiper-wrapper {
	align-items: stretch;
}

/* Desktop: full-bleed, height follows the photo's own proportion (source
   images are 1400x700 -> exactly 2:1, so at the full-bleed width the frame
   matches the photo's own shape with no crop needed at all).
   `max-height` was originally capped at 90vh here to guard against an
   unrealistically tall hero — but this tier only ever applies at ≥1025px
   viewport width (narrower gets the tablet/phone crop mode below), and a
   2:1 box is never taller than ~half its width, so nothing at that width
   tier is actually "too tall" to begin with. The cap being *tighter* than
   that in practice (most laptop viewports, after browser chrome, land
   under 90% of screen height well before the 2:1 height is reached) was
   what caused visible top/bottom cropping on ordinary desktop/laptop
   screens — dropped so the full photo always shows uncropped here. */
.custom-hero-slider .swiper-slide {
	position: relative;
	height: auto;
	aspect-ratio: 2 / 1;
	min-height: 0;
	overflow: hidden;
}

/* The slide is a core/cover — keep its image filling the frame. */
.custom-hero-slider .swiper-slide.wp-block-cover {
	display: flex;
	margin: 0;
}

.custom-hero-slider .swiper-slide .wp-block-cover__image-background {
	width: 100%;
	height: 100%;
	object-fit: cover;         /* <2% crop at 2:1 -> original proportion kept */
	object-position: center center;
}

.custom-hero-slider .swiper-slide .wp-block-cover__inner-container {
	width: 100%;
}

/* Fade effect: only the active slide should be interactive. */
.custom-hero-slider.swiper-fade .swiper-slide {
	pointer-events: none;
	transition-property: opacity;
}

.custom-hero-slider.swiper-fade .swiper-slide-active {
	pointer-events: auto;
}

/* ---- Navigation arrows ---- */
.custom-hero-slider .swiper-button-prev,
.custom-hero-slider .swiper-button-next {
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border-radius: 50%;
	color: #fff;
	background: rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(2px);
	transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.custom-hero-slider .swiper-button-prev:hover,
.custom-hero-slider .swiper-button-next:hover {
	background: rgba(0, 0, 0, 0.55);
	transform: scale(1.08);
}

.custom-hero-slider .swiper-button-prev:active,
.custom-hero-slider .swiper-button-next:active {
	transform: scale(0.96);
}

/* ---- Disabled arrow keeps its hit area ----
   Same fix as product-carousel.css's matching rule: Swiper's own base CSS
   gives `.swiper-button-disabled` `pointer-events:none`, letting a click
   right where the (dimmed) arrow still sits fall straight through to
   whatever's underneath — here, the cover slide itself (and any link a
   future slide's content might add inside it). Restoring pointer-events
   keeps the arrow a dead click target in its own right instead; Swiper's
   slideNext()/slidePrev() are already safe no-ops at a genuine boundary,
   so a disabled arrow still never actually navigates. */
.custom-hero-slider .swiper-button-prev.swiper-button-disabled,
.custom-hero-slider .swiper-button-next.swiper-button-disabled {
	pointer-events: auto;
}

.custom-hero-slider .swiper-button-prev::after,
.custom-hero-slider .swiper-button-next::after {
	font-size: 18px;
	font-weight: 700;
}

.custom-hero-slider .swiper-button-prev { left: 24px; }
.custom-hero-slider .swiper-button-next { right: 24px; }

/* ---- Pagination bullets ---- */
.custom-hero-slider .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: #fff;
	opacity: 0.5;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.custom-hero-slider .swiper-pagination-bullet-active {
	opacity: 1;
	transform: scale(1.25);
}

/* ---- Tablet LANDSCAPE: keep the wide 2:1 framing, just capped shorter ---- */
@media (min-width: 783px) and (max-width: 1024px) and (orientation: landscape) {
	.custom-hero-slider .swiper-slide {
		max-height: 520px;
	}
}

/* ---- CROP mode: phones (any orientation) + tablets held portrait.
       Full-bleed: spans the whole viewport width; the box takes the crop's own
       aspect ratio (--mobile-crop-ratio = cropW/cropH, default 1) so the height
       follows, and the source image is zoomed (--mobile-crop-scale, set by
       hero-slider.js) so exactly the centre cropW x cropH source pixels fill it.
       The *container* carries the ratio so it beats Swiper's inline slide width. */
@media (max-width: 782px),
       (min-width: 783px) and (max-width: 1024px) and (orientation: portrait) {
	.custom-hero-slider.swiper {
		width: auto !important;
		max-width: none !important;
		aspect-ratio: var(--mobile-crop-ratio, 1);
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		overflow: hidden;
	}

	.custom-hero-slider .swiper-wrapper {
		height: 100%;
	}

	.custom-hero-slider .swiper-slide {
		width: 100% !important;
		height: 100% !important;
		aspect-ratio: auto;
		min-height: 0;
		max-height: none;
	}

	.custom-hero-slider .swiper-slide .wp-block-cover__image-background {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
		/* hero-slider.js sets --mobile-crop-scale from the `mobile-crop-<px>`
		   token: object-fit:cover already isolates the centre native-square,
		   this tightens it to the requested px crop. Defaults to 1 = no zoom. */
		transform: scale(var(--mobile-crop-scale, 1));
		transform-origin: center center;
	}

	.custom-hero-slider .swiper-button-prev,
	.custom-hero-slider .swiper-button-next {
		width: 36px;
		height: 36px;
		margin-top: -18px;
	}

	.custom-hero-slider .swiper-button-prev { left: 8px; }
	.custom-hero-slider .swiper-button-next { right: 8px; }

	.custom-hero-slider .swiper-button-prev::after,
	.custom-hero-slider .swiper-button-next::after {
		font-size: 14px;
	}
}

/* ---- Pre-init state (before Swiper adds `.swiper-initialized`) ----
       Without this the un-initialised slides stack vertically ("messy images")
       and the empty arrow / pagination divs show with default styling until
       the footer scripts run. Show only the first slide, in the same box the
       initialised slider uses (so nothing shifts on init), and hide the
       controls. Swiper's own `-lock` still hides them for a single slide. */
.custom-hero-slider:not(.swiper-initialized) .hero-slider-wrapper > .swiper-slide:nth-child(n+2) {
	display: none;
}

.custom-hero-slider:not(.swiper-initialized) .swiper-button-prev,
.custom-hero-slider:not(.swiper-initialized) .swiper-button-next,
.custom-hero-slider:not(.swiper-initialized) .swiper-pagination {
	visibility: hidden;
}

/* Respect reduced-motion: Swiper autoplay is also disabled from JS side if needed. */
@media (prefers-reduced-motion: reduce) {
	.custom-hero-slider .swiper-slide,
	.custom-hero-slider .swiper-button-prev,
	.custom-hero-slider .swiper-button-next,
	.custom-hero-slider .swiper-pagination-bullet {
		transition: none !important;
	}
}