/*
 * Full-bleed hero slider gallery, preview alternative to the mosaic grid
 * in frontend.css (.alana-gallery-*). Reference: agavevillas.com/property/
 * villa-veva -- one photo at a time, full viewport width, prev/next arrows,
 * a "view all" trigger into the same Fancybox lightbox the mosaic grid
 * already uses.
 *
 * Sized in vh/%, not fixed px, on purpose -- a fixed-pixel breakout is what
 * caused the mosaic gallery to overflow its box on some viewports (see the
 * removed rule in frontend.css around .alana-gallery-grid); this scales
 * with the viewport instead of needing its own breakpoint-by-breakpoint
 * pixel tuning.
 */

.avs-hero-gallery {
	position: relative;
	width: 100%;
	height: 85vh;
	min-height: 460px;
	max-height: 880px;
	overflow: hidden;
	background: var(--avs-cream, #ece9e3);
}

.avs-hero-gallery-track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.avs-hero-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
}
/* wp_get_attachment_image()'s real <img> with srcset/sizes, not a flat
   background-image url() at a size-capped ('large', 1024px max side)
   fixed image -- that was the actual cause of "images look blurry" on a
   full-bleed slide wider than 1024px; the browser now picks a real
   resolution that matches how wide the slide is actually rendering. */
.avs-hero-slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Fancybox itself only needs to be told a slide is a valid trigger, not
   necessarily its own click target for slide-to-slide navigation -- but
   since only the active slide is visible/tabbable (see the a[aria-hidden]
   rule below), clicking the visible photo opens the full lightbox at the
   current image, which matches the reference site's behavior. */
.avs-hero-slide[aria-hidden="true"] {
	visibility: hidden;
}

.avs-hero-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.85);
	color: var(--avs-charcoal, #202c2e);
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: background 0.2s;
	z-index: 5;
}
.avs-hero-gallery-nav:hover { background: #fff; }
.avs-hero-gallery-prev { left: 24px; }
.avs-hero-gallery-next { right: 24px; }

.avs-hero-gallery-counter {
	position: absolute;
	bottom: 22px;
	left: 24px;
	background: rgba(32, 44, 46, 0.55);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 20px;
	z-index: 5;
}

.avs-hero-gallery-viewall {
	position: absolute;
	bottom: 22px;
	right: 24px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--avs-charcoal, #202c2e);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 700;
	border: none;
	padding: 10px 18px;
	border-radius: 24px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: background 0.2s;
	z-index: 5;
}
.avs-hero-gallery-viewall:hover { background: var(--avs-cream-light, #faf8f5); }

@media (max-width: 768px) {
	.avs-hero-gallery { height: 60vh; min-height: 340px; }
	.avs-hero-gallery-nav { width: 36px; height: 36px; font-size: 14px; }
	.avs-hero-gallery-prev { left: 12px; }
	.avs-hero-gallery-next { right: 12px; }
	.avs-hero-gallery-counter { left: 12px; bottom: 12px; }
	.avs-hero-gallery-viewall { right: 12px; bottom: 12px; padding: 8px 14px; }
	.avs-hero-gallery-viewall span { display: none; }
}

/* ── Transparent-over-gallery header, solid once scrolled ──────
   Scoped to .avs-villa-hero-header (added on the body only for the one
   villa currently previewing this template -- see AVS_Elementor_Template::
   maybe_add_preview_body_class()) so it doesn't touch every other page's
   header. header.elementor-location-header is the real header element
   (confirmed from the rendered page -- the #site-header id sticky-header.js
   was written against never actually existed in this theme's markup, a
   pre-existing bug fixed alongside this). */
.avs-villa-hero-header header.elementor-location-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	background: transparent !important;
	box-shadow: none !important;
	transition: background 0.25s ease, box-shadow 0.25s ease;
}
.avs-villa-hero-header header.elementor-location-header.is-scrolled {
	position: fixed;
	background: var(--e-global-color-secondary, #4b5b58) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}
/* No layout-shift compensation needed switching absolute -> fixed on
   scroll: both take the header out of normal document flow equally (it's
   already overlaying the gallery, not pushing it down, even before any
   scrolling happens), so the page content never has to make room for it
   in the first place. */

/* A transparent header sitting directly on a photo needs help staying
   legible regardless of what's in that particular photo -- a soft
   top-down shade behind the logo/nav, gone once the header goes solid. */
.avs-villa-hero-header header.elementor-location-header:not(.is-scrolled)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 160px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
	pointer-events: none;
	z-index: -1;
}