/* ==========================================================================
   SCV Gallery page (post 38)

   0. CANVAS    - the whole page on the off-white the Gallery section already used
                  (#F4F2ED), set on the page-content wrapper.
   1. HERO      - the About Us hero's shape: full-bleed photo pulled up under the
                  sticky transparent header, page title white in a dark caption
                  band on the lower right, plus the same slow pull-back zoom the
                  About hero runs (scale 1.15 -> 1 over 8s, linear, played once,
                  clipped by the media box).
   2. MASONRY   - the Elementor Gallery widget with gallery_layout: masonry. No CSS
                  of ours is needed for the layout or for the hover zoom (the
                  widget's own "Grow" animation does that); the section is left at
                  the width the page already had.
   3. CAROUSEL  - phone only: the masonry is hidden below 768px and this one-row
                  carousel replaces it, with the dots and arrows the villa pages
                  use.
   4. TYPE      - the site's global defaults, the same reset the About, Accommodation
                  and villa pages carry, applied to the page content only (never the
                  theme-builder header or footer).

   !important is needed wherever a rule must beat an Elementor element style;
   among equally specific !important rules the LAST one wins, so base values come
   first and their breakpoint tiers after, widest first. This bit twice on this
   page: the carousel wrapper kept Elementor's display:flex until the base
   display:none carried !important, and a carousel slide kept its natural image
   height (304x541) until the width/height did too.
   ========================================================================== */

/* --- 0. CANVAS -----------------------------------------------------------
   The Gallery section carries rgb(244,242,237) = #F4F2ED and the rest of the page
   was transparent over a white body, so the intro block sat on white. Setting it
   on the page-content wrapper paints every transparent section at once, on every
   width, and leaves the theme header and footer alone. The About page uses a
   lighter #FBFBF9 - this page follows the Gallery section's own off-white. */
[data-elementor-type="wp-page"] { background-color: #F4F2ED; }

/* --- 1. HERO -------------------------------------------------------------
   --scv-header-h is the theme header's own height (197px desktop, 126px phone);
   pulling the hero up by it puts the photo under the transparent header instead of
   below it. The media box is the frame: 809px tall at desktop, then the About's
   own tiers, and it is what clips the zoom. */
.scv-villa-hero {
	position: relative;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin-top: calc(-1 * var(--scv-header-h, 197px)) !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 5rem !important;
}

.scv-villa-hero-media {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: none !important;
	padding: 0 !important;
	height: 809px;
}

.scv-villa-hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* THE ABOUT US HERO'S ZOOM, same settings: pull back from 1.15 to 1 over 8s,
   linear, played ONCE (both = it holds its finished state), origin centred. Only
   the name differs, so the two pages can be tuned apart later. Never start below
   1 or the photo stops covering the frame and the page colour shows through. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes scvGalleryHeroZoom {
		0%   { transform: scale(1.15); }
		100% { transform: scale(1); }
	}

	.scv-villa-hero-slide {
		animation: 8s linear 0s 1 normal both running scvGalleryHeroZoom;
		transform-origin: center center;
	}
}

.scv-villa-hero-band {
	width: 100% !important;
	height: 130px !important;
	position: absolute;
	inset-block-end: 4px;
	inset-inline-start: 0;
	padding: 0 !important;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	z-index: 3;
}

/* white: the kit's own h1 colour is the terracotta #A6533C, so !important is
   required or the title comes out terracotta instead of white */
.scv-villa-hero-title {
	font-family: Optima, serif;
	font-weight: 400 !important;
	font-size: 75px;
	line-height: 1.16;
	color: #FFFFFF !important;
	text-align: center;
	margin: 0 3rem 0 0 !important;
}

@media (max-width: 1024px) {
	.scv-villa-hero-media { height: auto; max-height: 575px; aspect-ratio: 1400 / 809; }
}

@media (max-width: 820px) {
	.scv-villa-hero-band { height: 110px !important; }
}

@media (max-width: 767px) {
	.scv-villa-hero-media { height: auto; aspect-ratio: 738 / 496; max-height: none; }
	.scv-villa-hero { margin-bottom: 2rem !important; }
	.scv-villa-hero-title { font-size: 40px !important; margin-right: 1rem !important; }
}

@media (max-width: 526px) {
	.scv-villa-hero-media { aspect-ratio: 370 / 251; }
	.scv-villa-hero-band { height: 36px !important; }
}

/* --- 3. PHONE CAROUSEL ---------------------------------------------------
   Hidden above 768px (the masonry is what shows there) and hidden is also what
   hides the dots and arrows, because the script appends them inside this
   wrapper. Slide size follows the villa carousel's phone tiers. */
.scv-villa-gallery { display: none !important; }

@media (max-width: 767px) {
	.photos-gallery-section-style .elementor-widget-gallery { display: none !important; }

	.scv-villa-gallery {
		display: block !important;
		position: relative;
	}

	.scv-villa-gallery-track {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 4px;
	}

	.scv-villa-gallery-track::-webkit-scrollbar { display: none; width: 0; height: 0; }

	.scv-villa-gallery-track.is-dragging {
		scroll-snap-type: none;
		scroll-behavior: auto;
		user-select: none;
	}

	.scv-villa-gallery-slide {
		flex: 0 0 auto !important;
		width: 392px !important;
		max-width: 392px !important;
		height: 200px !important;
		object-fit: cover;
		object-position: center;
		display: block;
		scroll-snap-align: start;
	}

	.scv-villa-gallery-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		padding: 16px 0 10px;
	}

	.scv-villa-gallery-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.8);
		color: #A6533C;
		cursor: pointer;
		transition: background-color .3s ease, color .3s ease, opacity .3s ease;
	}

	.scv-villa-gallery-arrow svg { display: block; width: 16px; height: 16px; }

	.scv-villa-gallery-arrow:hover,
	.scv-villa-gallery-arrow:focus-visible { background-color: #A6533C; color: #FFFFFF; }

	.scv-villa-gallery-arrow.is-off { opacity: .35; pointer-events: none; }

	.scv-villa-gallery-arrow--prev { left: 8px; }
	.scv-villa-gallery-arrow--next { right: 8px; }
}

.scv-villa-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background-color: rgba(166, 83, 60, 0.28);
	cursor: pointer;
	transition: background-color .3s ease, transform .3s ease;
}

.scv-villa-dot:hover { background-color: rgba(166, 83, 60, 0.55); }
.scv-villa-dot.is-active { background-color: #A6533C; transform: scale(1.3); }

@media (max-width: 526px) {
	.scv-villa-gallery-slide { width: 78vw !important; max-width: 78vw !important; height: 190px !important; }
}

/* ==========================================================================
   4. TYPE: the site's global defaults, scoped to the page content
   (data-elementor-type="wp-page") so the theme-builder header and footer keep
   their own type. Elementor's own scale is 75/48/38/30/25/20 with body 18 at
   desktop, smaller below; this pins the desktop numbers with one small-screen
   step at the h1 (40px on a phone), exactly as the other rebuilt pages do.

   Two of this page's headings are V4 (e-heading -> e-default-hN) and one is a
   classic Heading widget (h2.elementor-heading-title), so both families are
   covered here. Colours are deliberately left to inherit: the approved pages'
   section H2s are the kit's terracotta #A6533C at 48px, and this page matches.
   ========================================================================== */
[data-elementor-type="wp-page"] .e-default-h1,
[data-elementor-type="wp-page"] .e-default-h1 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 75px !important; line-height: 1.16 !important; }
[data-elementor-type="wp-page"] .e-default-h2,
[data-elementor-type="wp-page"] .e-default-h2 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 48px !important; line-height: 1.16 !important; }
[data-elementor-type="wp-page"] .e-default-h3,
[data-elementor-type="wp-page"] .e-default-h3 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 38px !important; line-height: 1.16 !important; }

[data-elementor-type="wp-page"] .elementor-heading-title { font-family: Optima, serif !important; font-weight: 400 !important; line-height: 1.16 !important; }
[data-elementor-type="wp-page"] h1.elementor-heading-title { font-size: 75px !important; }
[data-elementor-type="wp-page"] h2.elementor-heading-title { font-size: 48px !important; }
[data-elementor-type="wp-page"] h3.elementor-heading-title { font-size: 38px !important; }

[data-elementor-type="wp-page"] .e-default-p,
[data-elementor-type="wp-page"] .e-default-p span,
[data-elementor-type="wp-page"] .elementor-widget-text-editor p { font-family: "Neue Einstellung", Optima, serif !important; font-weight: 400 !important; font-size: 18px !important; line-height: 1.44 !important; }

@media (max-width: 767px) {
	[data-elementor-type="wp-page"] .e-default-h1,
	[data-elementor-type="wp-page"] .e-default-h1 span,
	[data-elementor-type="wp-page"] h1.elementor-heading-title { font-size: 40px !important; }
}