/* ==========================================================================
   Swahili Coast Villas - Accommodation (post 39)

   The hero (1378b10f) and the intro (6e79ff40) are built from the About Us
   page's own pattern, so the numbers here mirror snippet 847 exactly:

   0. Page canvas: the sections' own Mineral White, so the strip between them
      is not the theme's white.
   1. Layout for the live site's <=526px phone scale. Elementor's smallest
      breakpoint on this site is 767px, so the phone layout has to live here.
   2. The live site's 768-820px band, where its own tablet type scale has
      already kicked in but Elementor is still on the desktop tier.
   3. The intro paragraph sits alone on its row, so it reads better contained
      than run across the whole page: 60% of its column, centred like the text
      itself. From tablet up only; the phone keeps the 380px measure set in 1.
   4. The hero photo is MIRRORED (scale: -1 1): the site's white mobile
      hamburger sits over the top-left corner and the photo's sunlit half was
      there, so the shaded half is moved under it. Declared OUTSIDE the motion
      query so it also holds when animations are off or reduced. The separate
      `scale` property composes with the animation's own `transform`.
   5. Ken Burns pull-back: 1.15 -> 1 over 8s, linear, forwards. The scale never
      drops below 1, so the photo always covers the frame (the media
      container's overflow:hidden crops the oversize). A scale below 1 shows
      Mineral White round the edges - do not go back there.
   6. Type: the site's global defaults, the same block the About page carries.
      Elementor publishes its own responsive scale in
      uploads/elementor/css/default-<device>.css:
        desktop          h1 75 / h2 48 / h3 38 / h4 30 / h5 25 / h6 20, p 18
        <=1024 (tablet)  h1 45 / h2 40 / h3 35 / h4 25 / h5 22 / h6 20
        <=767  (mobile)  h1 40 / h2 35 / h3 30 / h4 20 / h5 16 / h6 16, p 16
      The reset pins the DESKTOP numbers at every width, with ONE small-screen
      step put back - the h1 at 40px on a phone, the value the global scale
      itself uses there. Same rule as the About page, so both pages lead the
      same. Elements also carry their own class pins with responsive copies, so
      every declaration here needs !important.
   7. The five villa rows are LEGACY V3 widgets, which never receive an
      e-default-* class, so they are put on the same defaults by tag. Their own
      pins already say Optima 400 48px and 'Neue Einstellung' 18px, but their
      leading is 1.0 instead of the default 1.16 / 1.44, which is what this
      fixes.

   Selectors are the page's own element ids, scoped to .elementor-39, and carry
   !important because Elementor emits its rules at equal specificity. The ids
   change if the hero or the intro is rebuilt in the editor - re-point them.
   ========================================================================== */

/* --- 0. page canvas ---------------------------------------------------- */
body.page-id-39,
body.page-id-39 .elementor-39 { background-color: #FBFBF9; }

/* --- 1. phone layout (mirrors the live site's <=526px block) ------------ */
@media (max-width: 526px) {
	.elementor-39 [data-id="1378b10f"] { padding: 0 !important; margin-bottom: 2rem !important; }
	.elementor-39 [data-id="e09bc52"] { height: auto !important; aspect-ratio: 370 / 251 !important; max-height: none !important; }
	.elementor-39 [data-id="61a16f1c"] { height: 36px !important; }
	.elementor-39 [data-id="2bd12f00"] { margin-right: 1rem !important; }

	.elementor-39 [data-id="6e79ff40"] { padding: 0 10px !important; margin: 0 0 2rem !important; }
	.elementor-39 [data-id="25bcd8b6"] { max-width: 380px !important; margin-left: auto !important; margin-right: auto !important; }
}

/* --- 2. the live site's 768-820px band: layout only --------------------- */
@media (min-width: 768px) and (max-width: 820px) {
	.elementor-39 [data-id="61a16f1c"] { height: 110px !important; }
}

/* --- 3. the intro paragraph: contained measure -------------------------- */
@media (min-width: 768px) {
	.elementor-39 [data-id="25bcd8b6"] { max-width: 60% !important; margin-left: auto !important; margin-right: auto !important; }
}

/* --- 4. mirrored hero photo (works with or without motion) ------------- */
.elementor-39 [data-id="62253662"] { scale: -1 1 !important; }

/* --- 5. Ken Burns pull-back: 1.15 -> 1 over 8s, always covering -------- */
@media (prefers-reduced-motion: no-preference) {
	@keyframes scvAccommodationHeroZoom {
		from { transform: scale(1.15); }
		to   { transform: scale(1); }
	}
	.elementor-39 [data-id="62253662"] {
		animation: scvAccommodationHeroZoom 8s linear both !important;
		transform-origin: center center;
	}
}

/* --- 6. type: back to the site's global defaults (as on the About page) -- */
.elementor-39 .e-default-h1,
.elementor-39 .e-default-h1 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 75px !important; line-height: 1.16 !important; }
.elementor-39 .e-default-h2,
.elementor-39 .e-default-h2 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 48px !important; line-height: 1.16 !important; }
.elementor-39 .e-default-h3,
.elementor-39 .e-default-h3 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 38px !important; line-height: 1.16 !important; }
.elementor-39 .e-default-h4,
.elementor-39 .e-default-h4 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 30px !important; line-height: 1.16 !important; }
.elementor-39 .e-default-h5,
.elementor-39 .e-default-h5 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 25px !important; line-height: 1.16 !important; }
.elementor-39 .e-default-h6,
.elementor-39 .e-default-h6 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 20px !important; line-height: 1.16 !important; }

.elementor-39 .e-default-p,
.elementor-39 .e-default-p span { font-family: "Neue Einstellung", Optima, serif !important; font-weight: 400 !important; font-size: 18px !important; line-height: 1.44 !important; }

/* the one small-screen step that is put back: the hero title is the page's
   only h1, and the global scale runs an h1 at 40px on a phone */
@media (max-width: 767px) {
	.elementor-39 .e-default-h1,
	.elementor-39 .e-default-h1 span { font-size: 40px !important; }
}

/* --- 7. the legacy villa rows: same defaults, by tag -------------------- */
.elementor-39 .elementor-widget-heading h1,
.elementor-39 .elementor-widget-heading h2,
.elementor-39 .elementor-widget-heading h3,
.elementor-39 .elementor-widget-heading h4,
.elementor-39 .elementor-widget-heading h5,
.elementor-39 .elementor-widget-heading h6 { font-family: Optima, serif !important; font-weight: 400 !important; line-height: 1.16 !important; }

.elementor-39 .elementor-widget-heading h2 { font-size: 48px !important; }

.elementor-39 .elementor-widget-text-editor p,
.elementor-39 .elementor-widget-text-editor p span { font-family: "Neue Einstellung", Optima, serif !important; font-weight: 400 !important; font-size: 18px !important; line-height: 1.44 !important; }