/* ==========================================================================
   SCV villa pages - shared hero carousel, gallery carousel and type reset.

   Hooks are global classes from the kit (scv-villa-*), attached to the hero
   section, the media box, each slide image, the caption band, the title, the
   dots row, the gallery section, its track and its slides, the content sections
   (details / villas / stay block), the intro block, the highlight/amenity text
   panels, the metric row and each metric item, and the two big row images. The
   numbers come from the About Us hero (its frame, band and title) and from the
   live site's own stylesheet and markup (sliderItem 251x437, navButton circles,
   icon 30px + 10px gap, metrics gap 2.5rem down to 1rem on its small
   breakpoint).

   !important is required wherever a rule must beat an Elementor element style;
   among equally specific !important rules the LAST one in the file wins, so base
   values come first and their media-query tiers after them, widest first.
   ========================================================================== */

/* --- HERO: full bleed, sitting under the sticky transparent header ------
   The theme's header is 197px tall at desktop (126px on a phone), sticky and with
   no background, and exposes its height as --scv-header-h. The About Us hero and
   the Maasai hero are pulled up by exactly that, so the photo runs edge to edge
   from the very top of the viewport; without it the hero starts BELOW the header
   and leaves a band of page background along the top edge.

   The section also carries the kit's own `*-hero` class, which caps it at 1440px
   (that is what left a white margin down the right on a wide screen), and a newly
   built hero section carries Elementor's default 20px padding - which insets the
   photo 20px at each side. Both are overridden here; the checklist asserts the
   photo spans the full viewport width. */
.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;
}

/* the caption band + title, exactly as the About Us hero has them:
   130px above 820px, 110px at <=820px, 36px at <=526px; padding 0 and the title
   3rem off the right edge - both !important because the built band keeps a 10px
   default padding and the title a 0 margin otherwise (see the header note). */
.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 About Us hero and the live site's own caption are white on this
   band; the kit's h1 colour is the terracotta #A6533C, so !important is needed */
.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;
}

/* ---- hero tiers: widest first, so each property steps down correctly ---- */
@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; }
}

/* --- HERO: the frames, one at a time, each fading in ------------------- */
.scv-villa-hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	opacity: 0;
	transition: opacity 1s ease;
	will-change: opacity, transform;
}

.scv-villa-hero-slide.is-active { opacity: 1; }

/* with no JS the first frame is still the hero */
.scv-villa-hero-media > .scv-villa-hero-slide:first-child { opacity: 1; }

/* --- HERO: Ken Burns pull-back, 1.15 -> 1 over 5s, always covering ----- */
@media (prefers-reduced-motion: no-preference) {
	@keyframes scvVillaHeroKenBurns {
		from { transform: scale(1.15); }
		to   { transform: scale(1); }
	}
	.scv-villa-hero-slide.is-active { animation: scvVillaHeroKenBurns 5s linear both; }
}

/* --- HERO: the dots, under the image -----------------------------------
   The active dot scales to 1.3, so the row needs a little room under it or
   the bottom of the active dot reads as cut off. */
.scv-villa-hero-dots {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 18px 0 10px !important;
	min-height: 30px !important;
}

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

/* ==========================================================================
   CONTENT COLUMN: the live villa page runs its sections at about 80% of the
   viewport; the kit's own section classes box them at 1440 / 1152px instead.
   Phones keep the full width. (Also needs !important - see the note above.)
   ========================================================================== */
.scv-villa-details,
.scv-villa-villas,
.scv-villa-gallery {
	width: 100% !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (min-width: 768px) {
	.scv-villa-details,
	.scv-villa-villas,
	.scv-villa-gallery { width: 80% !important; }
}

/* the intro block's own 52px top padding stacked on top of the hero's margin */
.scv-villa-intro { padding-top: 0 !important; }

/* the break under the gallery's dots, and the stay block's own 44px top padding
   stacking on top of it (owner-tuned: the pair ran 134px) */
.scv-villa-gallery { margin-bottom: 3.5rem !important; }
.scv-villa-stay { padding-top: 0 !important; }

/* the text panel beside each photo keeps the live site's 3rem side padding at
   desktop; it eats too much of the panel on small screens, where the metrics
   then have nowhere to sit on one row */
@media (max-width: 1366px) {
	.scv-villa-panel { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

@media (max-width: 767px) {
	.scv-villa-panel { padding-left: 1rem !important; padding-right: 1rem !important; }
	/* 27px of side padding inside the details section left the metric row only
	   ~270px on a 360px phone; trim it so the three still fit on one line */
	.scv-villa-details { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}

/* ==========================================================================
   METRIC ROW: the live site puts a bronze icon (its own artwork) 10px to the
   left of each metric value, all three items on ONE row. Two things make that
   work at every width:
     - the row is `nowrap`, so an item NEVER jumps to a second line. When the
       panel is too narrow for the three labels side by side (the Swahili page's
       "1 Queen, 2 Single beds, 1 Daybed" is long), the long label wraps inside
       its own item - which is exactly what the live site's row does.
     - the sizes step down as the panel narrows (the live does the same: 20px
       icon, 12px label, 1rem gap at its small breakpoint). The panel is only
       ~638px at 1920 but ~446px at 1440 and ~310px at 1100.
   Labels need the three-class selector because the page-wide type reset sits
   later in the file at the same specificity. Icons are
   uploads/2026/10/scv-metric-{guests,size,bed}.svg.
   ========================================================================== */
.scv-villa-metrics {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 2.5rem !important;
	width: 100% !important;
}

.scv-villa-metric {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: auto !important;
	min-width: 0;
}

.scv-villa-metric img {
	width: 30px !important;
	height: 30px !important;
	object-fit: cover;
	flex: 0 0 auto;
}

.scv-villa-metrics .scv-villa-metric .e-default-p { color: #88755A !important; }

@media (max-width: 1699px) {
	.scv-villa-metrics { gap: 1.25rem !important; }
	.scv-villa-metric { gap: 8px !important; }
	.scv-villa-metric img { width: 22px !important; height: 22px !important; }
	.scv-villa-metrics .scv-villa-metric .e-default-p { font-size: 16px !important; }
}

@media (max-width: 1440px) {
	.scv-villa-metrics { gap: 1rem !important; }
	.scv-villa-metric img { width: 20px !important; height: 20px !important; }
	.scv-villa-metrics .scv-villa-metric .e-default-p { font-size: 14px !important; }
}

/* half-and-half layout and the narrowest text panel: tighten hard */
@media (max-width: 1366px) and (min-width: 1025px) {
	.scv-villa-metrics { gap: 0.5rem !important; }
	.scv-villa-metric { gap: 5px !important; }
	.scv-villa-metric img { width: 16px !important; height: 16px !important; }
	.scv-villa-metrics .scv-villa-metric .e-default-p { font-size: 11px !important; }
}

/* phones: the panel is only ~230-340px wide, so the row goes as tight as it can
   and still reads */
@media (max-width: 767px) {
	.scv-villa-metrics { gap: 0.25rem !important; }
	.scv-villa-metric { gap: 4px !important; }
	.scv-villa-metric img { width: 12px !important; height: 12px !important; }
	.scv-villa-metrics .scv-villa-metric .e-default-p { font-size: 11px !important; }
}

/* small phones: shave the panel padding and the icons once more */
@media (max-width: 400px) {
	.scv-villa-panel { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
	.scv-villa-metrics { gap: 0.25rem !important; }
	.scv-villa-metric { gap: 3px !important; }
	.scv-villa-metric img { width: 10px !important; height: 10px !important; }
	.scv-villa-metrics .scv-villa-metric .e-default-p { font-size: 10px !important; }
}

/* ==========================================================================
   ROW IMAGES: the highlights and amenities photos were pinned at 356px while
   the text box beside them grew past that below 1920px. Stretched instead, so
   the photo is exactly as tall as the text at every width.
   ========================================================================== */
.scv-villa-row-image {
	height: auto !important;
	align-self: stretch !important;
	object-fit: cover !important;
}

/* ==========================================================================
   GALLERY: one row of every villa photo, autorun, dots + arrows
   ========================================================================== */
.scv-villa-gallery-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 16px;
	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;
	width: 437px;
	max-width: 437px;
	height: 251px;
	object-fit: cover;
	object-position: center;
	display: block;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.scv-villa-gallery-slide { width: 400px; max-width: 400px; height: 225px; }
}

@media (max-width: 767px) {
	.scv-villa-gallery-slide { width: 392px; max-width: 392px; height: 200px; }
}

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

@media (hover: hover) and (pointer: fine) {
	.scv-villa-gallery-track { cursor: grab; }
	.scv-villa-gallery-track.is-dragging { cursor: grabbing; }
}

.scv-villa-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	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: 18px; height: 18px; }

.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-gallery-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 16px 0 10px;
}

@media (max-width: 767px) {
	.scv-villa-gallery-arrow { width: 38px; height: 38px; }
}

/* ==========================================================================
   TYPE: the site's global defaults, the same reset the About Us and the
   Accommodation pages carry. Scoped to the PAGE CONTENT (Elementor renders it
   as data-elementor-type="wp-page") so the theme-builder header and footer keep
   their own type. Elementor publishes its own responsive scale in
   uploads/elementor/css/default-<device>.css: 75/48/38/30/25/20 and body 18 at
   desktop, smaller below - the reset pins the desktop numbers everywhere with
   one small-screen step put back, the h1 at 40px on a phone.

   NOTE: this block sits last on purpose (it is the page-wide reset) - page
   specific overrides that must win over it use a 3-class selector instead of
   relying on source order.
   ========================================================================== */
[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"] .e-default-h4,
[data-elementor-type="wp-page"] .e-default-h4 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 30px !important; line-height: 1.16 !important; }
[data-elementor-type="wp-page"] .e-default-h5,
[data-elementor-type="wp-page"] .e-default-h5 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 25px !important; line-height: 1.16 !important; }
[data-elementor-type="wp-page"] .e-default-h6,
[data-elementor-type="wp-page"] .e-default-h6 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 20px !important; line-height: 1.16 !important; }

[data-elementor-type="wp-page"] .e-default-p,
[data-elementor-type="wp-page"] .e-default-p span { 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 { font-size: 40px !important; }
}