/**
 * 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);
}

.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;
	}
}

/* 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;
	}
}