/*
Theme Name: TheGem Elementor Child
Description: Multi-Purpose Wordpress Theme
Author: Codex Themes.
Theme URI: http://codex-themes.com/thegem/
Author URI: http://codex-themes.com/thegem/
Template: thegem-elementor
Version: 1.0
Tags: one-column, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, flexible-header, full-width-template, theme-options, translation-ready, dark, light
License: GNU General Public License
License URI: license.txt
*/

/* ---------------------------------------------------------------------------
   Content-grid alignment for Elementor containers

   TheGem sizes a container two different ways (see thegem-elementor/style.css
   lines 6206 and 6239):
     - direct children are widgets    -> --content-width: 1170px
     - direct children are containers -> --content-width: 1212px, because the
       theme assumes those child containers carry the 21px grid gutter
       themselves (the site footer does exactly that).

   One container child is enough to trip the second rule, so a section holding
   a heading widget plus a container also lands on 1212px. That is why copying
   an existing container into a new section changes the section's width.

   The horizontal padding does not change this. Elementor gives the inner
   wrapper `max-width: var(--content-width); margin: 0 auto; padding-inline: 0`
   (elementor/assets/css/frontend.min.css, `.e-con>.e-con-inner`), so the 21px
   case still centres a 1170px box and the 0px case centres a 1212px one. The
   sections are therefore offset by exactly 21px a side, never 42px.

   This site is designed on the 1170px grid, so pin every boxed section that
   trips the 1212px rule back to 1170px. Applied site-wide rather than per
   page: the mismatch had to be corrected on About Us, on Home (the Book Now
   form against the area tiles), and in the footer, and a page-scoped rule
   would need repeating for every new page.

   Only .e-con-boxed is targeted, so sections deliberately set to Full Width
   are left alone. There is no Elementor header template on this site (the only
   thegem_templates post is the footer), so this cannot disturb a header.

   The selector must repeat .thegem-e-con-layout-thegem and be prefixed with
   `body`: TheGem's rule uses :has(), which makes it more specific than the
   width setting Elementor writes from the container's Layout panel, so
   changing the width in the Elementor UI has no effect here.
   --------------------------------------------------------------------------- */
body .e-con.e-con-boxed.thegem-e-con-layout-thegem:has(> .e-con),
body .e-con.e-con-boxed.thegem-e-con-layout-thegem:has(> .e-con-inner > .e-con) {
	--container-max-width: 1170px;
	--content-width: 1170px;
}

h4, .title-h4 {
	margin: 0 0 32px;
}

/* ---------------------------------------------------------------------------
   "Find Stay, Your Way" — area tile strip
   Rendered by the [casastays_areas] shortcode (inc/areas-section.php).
   Column count comes from the shortcode's `columns` attribute via
   --casastays-areas-columns, so it can be changed without touching CSS.
   --------------------------------------------------------------------------- */
.casastays-areas {
	--casastays-areas-columns: 5;
	--casastays-areas-gap: 22px;
	--casastays-areas-radius: 14px;
}


.casastays-areas__grid {
	display: grid;
	grid-template-columns: repeat(var(--casastays-areas-columns), minmax(0, 1fr));
	gap: var(--casastays-areas-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* TheGem's content styles add bullets and margins to any ul inside page
   content, so both are reset on the item as well as the list. */
.casastays-areas__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.casastays-areas__item::before {
	display: none;
}

.casastays-areas__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.casastays-areas__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: var(--casastays-areas-radius);
	background: #ededed;
}

.casastays-areas__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.casastays-areas__link:hover .casastays-areas__image,
.casastays-areas__link:focus-visible .casastays-areas__image {
	transform: scale(1.06);
}

.casastays-areas__link:focus-visible .casastays-areas__media {
	outline: 2px solid #ea6a33;
	outline-offset: 3px;
}

.casastays-areas__label {
	display: block;
	margin-top: 12px;
	font-size: 24px;
	line-height: 100%;
	color: #000000;
}

.casastays-areas__notice {
	padding: 14px 16px;
	border: 1px dashed #c9c9c9;
	border-radius: 8px;
	color: #6b6b6b;
	font-size: 14px;
}

/* Below the desktop breakpoint the strip becomes a swipeable row rather than
   wrapping. Five wrapped tiles leave a ragged second row of one or two, which
   looks like a mistake; a scroll strip is the familiar mobile pattern for
   browse-by-area.

   Tile widths are plain percentages, not minmax(): five tiles always overflow
   the row, so there is never free space to grow a minmax() track past its
   minimum, and the tiles sat at a fixed 140-160px — four crammed into view with
   one left to scroll to. A width that leaves part of the next tile showing is
   what tells a touch user the row swipes, the same cue the property carousel
   uses. */
@media (max-width: 1024px) {
	.casastays-areas__grid {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 28%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		/* The sliver of the next tile does the scrollbar's job, and the bar
		   itself drew a stray grey rule under the labels. */
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* Room for the focus outline and any shadow, without clipping. */
		padding-bottom: 6px;
	}

	.casastays-areas__grid::-webkit-scrollbar {
		display: none;
	}

	.casastays-areas__item {
		scroll-snap-align: start;
	}
}

@media (max-width: 767px) {
	.casastays-areas {
		--casastays-areas-gap: 16px;
	}

	.casastays-areas__grid {
		grid-auto-columns: 40%;
	}

	/* At 24px most area names wrapped under a 130-odd-pixel tile. */
	.casastays-areas__label {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.casastays-areas__image {
		transition: none;
	}

	.casastays-areas__link:hover .casastays-areas__image,
	.casastays-areas__link:focus-visible .casastays-areas__image {
		transform: none;
	}
}


/* ---------------------------------------------------------------------------
   "More Than Just A Stay" — community photo collage
   Rendered by the [casastays_community] shortcode (inc/community-section.php).

   The panel and the collage are sized independently, and that is the whole
   trick to the layout. The panel sits on the content grid; the collage is
   deliberately wider, so the first and last cards break out over the panel's
   rounded corners onto the page background.

   Both widths are capped against the viewport rather than each other. The
   collage in particular is never allowed to reach the screen edge, because a
   card cut off by the edge loses the deckle border down one side and stops
   reading as a photograph — it just looks broken. Sizing it as a share of the
   panel instead makes the overhang grow with the panel, which is exactly what
   pushed the end cards off-screen at ordinary laptop widths.

   Card widths are a share of the collage, and the five shares are chosen so
   (sum of cards) - (4 x overlap) lands on 100% of the collage. The row then
   fills its box exactly rather than relying on flex overflow.

   Rotations, stacking order and vertical offsets are still read off the design
   screenshot. The frames, their relative sizes, the cream and the shadow are
   exact, taken from the Figma exports.
   --------------------------------------------------------------------------- */
.casastays-community {
	/* Panel: the content grid. It deliberately fills its container rather than
	   insetting itself, so its edges line up with the sections above and below
	   — the area tiles, the amenity cards — instead of floating 48px inside
	   them. The cards break out past it into the page gutter. */
	--casastays-community-panel-max: 1170px;
	--casastays-community-radius: 24px;

	/* Collage: wider than the panel, and always inside the viewport so no card
	   is ever clipped by the screen edge. The inset has to clear the rotation
	   bulge as well as the gap itself; see the tablet block near the end. */
	--casastays-community-collage-max: 1290px;
	--casastays-community-collage-inset: 56px;

	/* Width of a full-size card as a share of the collage, and the overlap
	   between two neighbours. The design keeps the cards nearly adjacent, so
	   the overlap is slight — they touch rather than stack. */
	--casastays-community-card: 23%;
	--casastays-community-overlap: 2%;

	/* Frame border around the photo, as a share of the card's own width. */
	--casastays-community-frame-pad: 4%;

	/* Cream, not white — taken from the frame path's own fill in the Figma
	   export, and the same cream already used for panels elsewhere on the site. */
	--casastays-community-frame: #F8F3E7;

	--casastays-community-fg: #ffffff;

	/* Hard-edged and offset rather than soft and centred: the export's shadow
	   filter is feOffset dx=6 dy=8 at 25% black with no feGaussianBlur, which
	   is what gives the cards their printed-sticker look. A blurred shadow
	   reads as a floating UI card and loses that. Offsets are in px because
	   drop-shadow() takes no percentages, so they are restated per breakpoint. */
	--casastays-community-shadow: 6px 8px 0 rgba(0, 0, 0, 0.25);

	/* Deliberately no overflow-x here.

	   This element is only as wide as the Elementor container holding the
	   shortcode — 1170px on the content grid, not the width of the screen — so
	   clipping on it cuts the cards off at the container edge, which is exactly
	   the overhang the design is built around. It looked like the end cards had
	   lost their deckle border down one side.

	   Horizontal page overflow is handled further up instead: TheGem's
	   `.layout-fullwidth` page wrapper already carries overflow-x: clip, which
	   is viewport-width and so clips in the right place. The collage is kept
	   clear of the screen edge at every width, so in practice that clip only
	   ever catches a pixel or two of the sticker shadow on phones. */
}

.casastays-community__panel {
	max-width: var(--casastays-community-panel-max);
	margin-inline: auto;
	padding: 72px 24px 64px;
	box-sizing: border-box;
	border-radius: var(--casastays-community-radius);
	background: var(--casastays-community-bg, #F47948);
}

.casastays-community__title {
	margin: 0 0 44px;
	text-align: center;
	color: var(--casastays-community-fg);
	font-size: clamp(30px, 4vw, 54px);
	line-height: 1.15;
	/* TheGem uppercases headings site-wide. The design sets this one in title
	   case, and at this size the difference is not subtle. */
	text-transform: none;
}

/* Sized against the viewport, not the panel, and centred independently of it.
   `vw` deliberately: the collage has to be able to exceed its own parent, so
   a percentage — which would resolve against the panel's content box — cannot
   express this. The inset keeps it clear of the screen edge; see the block
   comment above for why that matters. */
.casastays-community__collage {
	display: flex;
	justify-content: center;
	align-items: center;
	width: min(var(--casastays-community-collage-max), 100vw - var(--casastays-community-collage-inset));
	margin: 0;
	padding: 0;
	list-style: none;

	/* Not `margin-inline: auto`. Auto margins resolve to zero once an element
	   is wider than its containing block, so the collage — which is wider than
	   the panel by design — would silently left-align and throw the whole
	   overhang onto the right-hand side. Offsetting by half the parent and
	   pulling back half its own width centres it whatever the two widths are. */
	margin-left: 50%;
	transform: translateX(-50%);
}

/* TheGem's content styles add bullets and margins to any ul inside page
   content, so both are reset on the item as well as the list. */
.casastays-community__item {
	--rot: 0deg;
	--dy: 0px;
	--z: 1;
	--scale: 1;
	--frame: url("assets/community-frame-3.svg");
	/* Square: every exported frame's path bounds are square, as are the source
	   photos. Kept as a variable so a card can be given its own proportions if
	   the design ever varies them. */
	--ratio: 1 / 1;

	flex: 0 0 calc(var(--casastays-community-card) * var(--scale));
	/* Flex items default to min-width:auto, which lets a large photo's
	   intrinsic width override the basis above and push the row wider than
	   intended. The cards are deliberately sized as a share of the panel, so
	   the content-based minimum is not wanted. */
	min-width: 0;
	margin: 0 calc(var(--casastays-community-overlap) / -2);
	padding: 0;
	list-style: none;
	z-index: var(--z);
	transform: translateY(var(--dy)) rotate(var(--rot));

	/* The shadow lives here, not on the card. A mask clips box-shadow on the
	   element it is applied to, so a shadow set on .card would be erased along
	   with everything outside the deckle edge. drop-shadow() on the parent is
	   computed from the child's rendered alpha instead, so it follows the wavy
	   outline rather than a rectangle. */
	filter: drop-shadow(var(--casastays-community-shadow));
}

.casastays-community__item::before {
	display: none;
}

/* --- Per-card arrangement.

   Each position gets its own frame: the five exports are five different
   deckle patterns, so reusing one would make the repetition obvious at the
   ends, where cards 1 and 5 sit side by side with nothing between them.

   --scale carries the design's own per-card sizing. The exported path bounds
   are 307.84 / 334.02 / 301.29 / 286.71 / 334.02, and these are those numbers
   over the largest, so the cards keep their relative sizes without the frames
   having to be normalised. Their sum (4.682) is what --casastays-community-card
   is tuned against, so changing a scale means retuning that share.

   Rotations and vertical offsets remain estimates from the design screenshot.
   --- */
.casastays-community__item:nth-child(1) { --frame: url("assets/community-frame-1.svg"); --scale: 0.9216; --rot: -7deg; --dy: 6px;  --z: 1; }
.casastays-community__item:nth-child(2) { --frame: url("assets/community-frame-2.svg"); --scale: 1;      --rot: 8deg;  --dy: 14px; --z: 3; }
.casastays-community__item:nth-child(3) { --frame: url("assets/community-frame-3.svg"); --scale: 0.9020; --rot: -3deg; --dy: -4px; --z: 2; }
.casastays-community__item:nth-child(4) { --frame: url("assets/community-frame-4.svg"); --scale: 0.8584; --rot: 6deg;  --dy: 10px; --z: 3; }
.casastays-community__item:nth-child(5) { --frame: url("assets/community-frame-5.svg"); --scale: 1;      --rot: -9deg; --dy: 0px;  --z: 1; }

.casastays-community__card {
	display: block;
	margin: 0;
	padding: var(--casastays-community-frame-pad);
	box-sizing: border-box;
	aspect-ratio: var(--ratio);
	background: var(--casastays-community-frame);

	/* The deckle edge. The SVG is a solid silhouette, so the cream card is cut
	   to the wavy outline; the photo inside stays rectangular and is simply
	   covered by the frame's inner padding. mask-size rather than the default
	   lets one asset serve every card whatever its aspect ratio.
	   The -webkit- prefixes are still required by Safari.

	   The url() lives in --frame, set per card above. A url() inside a custom
	   property resolves against the stylesheet that declares it, not the one
	   that uses it — both are this file, so the relative path holds. */
	-webkit-mask-image: var(--frame);
	        mask-image: var(--frame);
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
}

.casastays-community__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #ededed;
}

.casastays-community__cta {
	margin: 44px 0 0;
	text-align: center;
	color: var(--casastays-community-fg);
	font-size: 25px;
    line-height: 1.4;
    font-weight: 500;
}

.casastays-community__link {
	color: inherit;
	font-weight: 500;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    transition: opacity 0.25s ease;
    font-size: 25px;
}

.casastays-community__link:hover {
	opacity: 0.78;
	color: #FFF;
}

/* White rather than the #ea6a33 used elsewhere on the site: this link sits on
   the orange panel, where that colour is all but invisible. */
.casastays-community__link:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 4px;
}

.casastays-community__notice {
	padding: 14px 16px;
	border: 1px dashed #c9c9c9;
	border-radius: 8px;
	color: #6b6b6b;
	font-size: 14px;
}

/* Larger cards, and a deeper overhang to match, so the photos stay legible
   as the panel narrows. The row is never allowed to wrap or scroll — the
   collage reads as one graphic rather than a gallery. Phones get their own
   2 x 2 arrangement further down. */
@media (max-width: 1024px) {
	/* The card share is untouched here. The collage itself is what shrinks with
	   the viewport, so the cards scale with it automatically; only the room
	   reserved around the panel and the collage is restated.

	   The collage inset has to clear more than the collage box itself. A
	   rotated square is wider than its layout width — w x (cos + sin) — so at
	   these angles each end card bulges roughly 6% of its own width past the
	   row, and the gap left for it has to cover that too. */
	.casastays-community {
		--casastays-community-collage-inset: 64px;
		/* Kept roughly proportional to the shrinking card, so the sticker
		   offset stays the same visual weight rather than growing heavier. */
		--casastays-community-shadow: 4px 6px 0 rgba(0, 0, 0, 0.25);
	}

	/* Below this width the Elementor container all but fills the screen — at
	   1024 the gutter either side is about 12px — so a panel that spans its
	   container leaves the cards nowhere to break out to, and the overhang
	   collapses to nothing. Narrowing the panel here buys that room back.

	   This is the one place the panel stops lining up with the sections above.
	   It is the lesser evil: the area strip has already turned into a swipeable
	   row by this width, so there is no longer a shared edge to line up with,
	   whereas losing the breakout would leave the section looking like a plain
	   row of photos in a box. */
	.casastays-community__panel {
		width: calc(100% - 120px);
		padding: 52px 20px 48px;
	}

	.casastays-community__title {
		margin-bottom: 32px;
	}

	.casastays-community__cta {
		margin-top: 32px;
	}
}

/* Phones: a 2 x 2 stack of four stamps instead of the row.

   Five cards across 375px works out at roughly 80px each, too small to make
   out a face, so the mobile design drops the fifth photo and stacks the rest
   two to a row at nearly half the screen each. The right-hand column sits a
   little lower than the left, and the tilts alternate, so the grid still reads
   as a scattered pile of prints rather than a gallery.

   Every size here is in vw, for the same reason the collage width is: it is
   sized against the viewport, not the panel, and the gaps and offsets have to
   scale with the cards or the composition changes shape between phones. */
@media (max-width: 600px) {
	.casastays-community {
		--casastays-community-radius: 16px;
		/* The cards are twice the size of the old mobile row, so the sticker
		   offset goes back up to the tablet weight. */
		--casastays-community-shadow: 4px 6px 0 rgba(0, 0, 0, 0.25);

		/* Columns of 45vw, with the row's overlap restated in vw: the base
		   rule's negative side margins widen each card 1.5vw past its column, so
		   the cards are 48vw and just touch in the middle, as in the design.
		   That leaves the outer cards 3.5vw from the screen edge, which is what
		   the most-tilted one needs to stay on screen — at 10deg a 48vw card
		   bulges about 3.8vw past its box on each side, less the frame's own
		   transparent margin. */
		--casastays-community-mobile-col: 45vw;
		--casastays-community-overlap: 3vw;
		--casastays-community-mobile-drop: 5vw;
		--casastays-community-mobile-gap: 6vw;
	}

	/* Grid rather than the row's flex: the cards no longer vary in size, they
	   sit in two even columns. The base rule's flex align-items carries over to
	   grid, and centring would undo half of the right-hand column's drop below,
	   so it is reset to start. */
	.casastays-community__collage {
		display: grid;
		grid-template-columns: repeat(2, var(--casastays-community-mobile-col));
		align-items: start;
		row-gap: var(--casastays-community-mobile-gap);
		width: calc(var(--casastays-community-mobile-col) * 2);
	}

	/* Drops the per-card sizes and offsets from the desktop row. */
	.casastays-community__item {
		--scale: 1;
		--dy: 0px;
	}

	/* The drop is a margin, not --dy, so it takes up room in the layout. A
	   transform would leave the bottom-right card hanging into the space
	   reserved for the link below. */
	.casastays-community__item:nth-child(even) {
		margin-top: var(--casastays-community-mobile-drop);
	}

	/* Rotations are read off the mobile design. Each right-hand card sits over
	   its neighbour on the top row and under it on the bottom, as drawn. */
	.casastays-community__item:nth-child(1) { --rot: -5deg; --z: 1; }
	.casastays-community__item:nth-child(2) { --rot: 10deg; --z: 2; }
	.casastays-community__item:nth-child(3) { --rot: -9deg; --z: 2; }
	.casastays-community__item:nth-child(4) { --rot: 6deg;  --z: 1; }

	.casastays-community__item:nth-child(n + 5) {
		display: none;
	}

	/* Undo the tablet rule above, which would otherwise carry down and leave a
	   255px panel on a 375px screen. 42px is the 21px gutter the sections
	   above and below already sit in, so the panel lines up with them again,
	   and the cards' tilt still carries them a few pixels past its edge. */
	.casastays-community__panel {
		width: calc(100% - 42px);
		padding: 32px 16px 20px;
	}

	/* TheGem gives every h2 1.8px of tracking. At this size it pushes the last
	   word onto a third line; the design sets the heading in two. */
	.casastays-community__title {
		margin-bottom: 24px;
		letter-spacing: 0;
	}

	.casastays-community__cta {
		font-size: 18px;
	}

	/* The link is sized separately at desktop, larger than its "Explore"
	   intro. The mobile design sets the whole line at one size. */
	.casastays-community__link {
		font-size: inherit;
	}
}

@media (prefers-reduced-motion: reduce) {
	.casastays-community__link {
		transition: none;
	}
}


/* ---------------------------------------------------------------------------
   "Lifestyle Benefits" — hover-expand benefit cards
   Rendered by the [casastays_benefits] shortcode (inc/benefits-section.php).

   Four cards to a row. At rest every card is an even quarter and shows only
   its icon; hovering one takes it to 55% of the row and reveals its title and
   description, while the other three give up the difference at 15% each.
   Those three numbers arrive as custom properties from the shortcode, so the
   split can be retuned from the page without editing CSS. They are restated
   below as well, so the component still has a complete design when the
   shortcode is called with no attributes.

   Nothing here uses display:none. The revealed copy is clipped and faded, not
   removed, so a screen reader reads all eight cards in full no matter which
   one the pointer happens to be over.
   --------------------------------------------------------------------------- */
.casastays-benefits {
	/* The section claims its width rather than trusting its container. See
	   the widget rule below, which is the half of this that does the work. */
	width: 100%;

	--casastays-benefits-resting: 25;
	--casastays-benefits-expanded: 55;
	--casastays-benefits-collapsed: 15;

	--casastays-benefits-gap: 12px;
	--casastays-benefits-radius: 12px;
	--casastays-benefits-height: 304px;

	/* The icon box, at rest and revealed. It is square, with the artwork fitted
	   inside by `contain`, rather than being given the exact box the design
	   draws: these are eight different illustrations with eight different
	   aspect ratios, and a square box with contain scales each to the same
	   visual weight without distorting any of them. */
	--casastays-benefits-icon-size: 86px;
	--casastays-benefits-icon-size-open: 160px;

	/* The revealed text column, fixed rather than fluid. See __body-inner. */
	--casastays-benefits-body-width: 260px;
	--casastays-benefits-body-w: 0px;

	/* Card padding has to animate too, not sit at the revealed value. A
	   collapsed card is 15% of the 1170px grid, about 172px, and the revealed
	   card's 75px sides would leave 22px of that for an 86px icon. */
	--casastays-benefits-pad: 16px;
	--casastays-benefits-pad-open: 75px;

	/* Gap between icon and text. Zero at rest for the same reason: the text
	   column is 0px wide there, so a standing 90px gap would still be laid out
	   and would push the icon well off centre. */
	--casastays-benefits-inner-gap: 0px;
	--casastays-benefits-inner-gap-open: 40px;

	--casastays-benefits-accent: #F47948;
	--casastays-benefits-fg: #ffffff;
	--casastays-benefits-card-bg: #ffffff;

	--casastays-benefits-duration: 0.45s;
	--casastays-benefits-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* The Elementor widget wrapper has to stretch, not just the section.

   The shortcode is dropped into an Elementor container whose desktop
   Direction is Row, so the widget is laid out as a content-sized flex item
   rather than being stretched. These cards have no intrinsic width to offer:
   the items are flex-basis: 0 by design and the copy is clipped to zero at
   rest, so the widget shrink-wraps to the width of the heading and both rows
   end up in a narrow column beside empty space.

   width: 100% on the section alone cannot fix that — it resolves against the
   shrink-wrapped wrapper, so it is 100% of the wrong number. The width has to
   be forced on the flex item itself, which is the .elementor-widget div.

   The bug is invisible to anyone logged in as an editor: the "icons not
   found" notice below is a paragraph of prose, and its max-content width is
   wide enough to push the widget out to the full 1170px. Logged out, the
   notice is not rendered and the section collapses. */
.elementor-widget-shortcode:has(.casastays-benefits) {
	width: 100%;
	flex: 1 1 100%;
	align-self: stretch;
}

.casastays-benefits__title {
	margin: 0 0 32px;
	color: #000000;
	font-size: clamp(28px, 3.6vw, 48px);
	line-height: 1.15;
	/* TheGem uppercases headings site-wide. The design sets this one in title
	   case, and at this size the difference is not subtle. */
	text-transform: none;
}

/* One list per row, not one wrapping grid.

   The reveal shrinks every sibling of the hovered card, and a wrapping flex
   container has no notion of a row: hovering a card in the top row would also
   collapse the bottom four, leaving that row 60% wide with a gap beside it.
   Splitting the rows in the markup scopes the effect to the cards that are
   actually side by side. inc/benefits-section.php does the chunking. */
.casastays-benefits__row {
	display: flex;
	gap: var(--casastays-benefits-gap);
	margin: 0 0 var(--casastays-benefits-gap);
	padding: 0;
	list-style: none;
}

.casastays-benefits__row:last-of-type {
	margin-bottom: 0;
}

/* TheGem's content styles add bullets and margins to any ul inside page
   content, so both are reset on the item as well as the list. */
.casastays-benefits__item {
	flex: var(--casastays-benefits-resting) 1 0%;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: flex-grow var(--casastays-benefits-duration) var(--casastays-benefits-ease);
}

.casastays-benefits__item::before {
	display: none;
}

/* flex-basis is 0 on the items above, so the growth factors divide the row's
   free space directly: 55/15/15/15 really is 55% and 15% of it, whatever the
   gaps add up to. Percentage widths would have to subtract the gaps by hand,
   and would drift every time the gap changed. */
.casastays-benefits__card {
	display: flex;
	align-items: center;
	/* Centred, and it stays centred in both states. At rest the icon is the
	   only content, so centring is what the design asks for; when revealed the
	   contents add up to exactly the padded width, so centring and flex-start
	   resolve to the same place. Holding it at one value keeps the icon from
	   jumping sideways mid-transition, which is what switching between the two
	   would look like. */
	justify-content: center;
	gap: var(--casastays-benefits-inner-gap);
	height: var(--casastays-benefits-height);
	padding-inline: var(--casastays-benefits-pad);
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid var(--casastays-benefits-accent);
	border-radius: var(--casastays-benefits-radius);
	background: var(--casastays-benefits-card-bg);
	color: var(--casastays-benefits-accent);
	transition:
		gap var(--casastays-benefits-duration) var(--casastays-benefits-ease),
		padding var(--casastays-benefits-duration) var(--casastays-benefits-ease),
		background-color var(--casastays-benefits-duration) var(--casastays-benefits-ease),
		color var(--casastays-benefits-duration) var(--casastays-benefits-ease);
}

/* Masked, rather than an img element.

   The same icon is orange on a resting card and white on the hovered one. An
   image cannot be recoloured, and shipping every icon twice would mean two
   files to keep in step. Painting the mask with currentColor lets the card's
   own colour transition carry the icon along with it, from one file. */
.casastays-benefits__icon {
	flex: 0 0 var(--casastays-benefits-icon-size);
	height: var(--casastays-benefits-icon-size);
	background-color: currentColor;
	-webkit-mask: var(--casastays-benefits-icon-src) center / contain no-repeat;
	mask: var(--casastays-benefits-icon-src) center / contain no-repeat;
	transition:
		flex-basis var(--casastays-benefits-duration) var(--casastays-benefits-ease),
		height var(--casastays-benefits-duration) var(--casastays-benefits-ease);
}

.casastays-benefits__body {
	flex: 0 0 var(--casastays-benefits-body-w);
	overflow: hidden;
	opacity: 0;
	transition:
		flex-basis var(--casastays-benefits-duration) var(--casastays-benefits-ease),
		opacity calc(var(--casastays-benefits-duration) * 0.6) var(--casastays-benefits-ease);
}

/* Load-bearing. It holds the copy at its full column width while the wrapper
   around it animates out from zero, so the text is laid out once and then
   revealed. Without it the copy re-wraps on every frame of the transition. */
.casastays-benefits__body-inner {
	width: var(--casastays-benefits-body-width);
}

.casastays-benefits__name {
	margin: 0 0 16px;
	color: inherit;
	font-size: 30px;
    font-weight: 600;
    line-height: 40px;
    text-transform: capitalize;
}

.casastays-benefits__text {
	margin: 0;
	color: inherit;
	font-size: 18px;
    line-height: 1.55;
    font-weight: 300;
}

/* currentColor, drawn inside the card, rather than the accent colour offset
   outside it as on the area tiles. A focused card is very often the revealed
   one, and an orange ring on the orange card, or a white ring on the white
   page, would each be invisible. Inside and currentColor is legible in either
   state. */
.casastays-benefits__card:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -6px;
}

.casastays-benefits__notice {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px dashed #c9c9c9;
	border-radius: 8px;
	color: #6b6b6b;
	font-size: 14px;
}

/* The reveal itself.

   Gated on a hover-capable pointer: on a touch screen :hover latches after a
   tap, so a tapped card would stay open until something else was tapped. And
   on desktop widths: a narrow window with a mouse gets the compact layout
   below, where which card is open is chosen by click, and a hovered tile
   turning orange beside the open card would read as two open cards.

   :has() rather than a plain .casastays-benefits__row:hover, so that hovering
   the 12px gutter between two cards does not collapse all four to 15% and
   leave the row 60% wide with nothing expanded. TheGem already relies on
   :has() — see the content-grid rule at the top of this file — so it is
   already a baseline here; a browser without it drops this block and shows
   eight resting cards, which loses the animation but no content. */
@media (hover: hover) and (min-width: 1025px) {
	.casastays-benefits__row:has(.casastays-benefits__card:is(:hover, :focus-visible)) .casastays-benefits__item {
		flex-grow: var(--casastays-benefits-collapsed);
	}

	/* Identical specificity to the rule above — :has() takes the specificity of
	   its most specific argument, so both are (0,4,0) — which is why this one
	   has to come second in order to win. */
	.casastays-benefits__row .casastays-benefits__item:has(.casastays-benefits__card:is(:hover, :focus-visible)) {
		flex-grow: var(--casastays-benefits-expanded);
	}

	.casastays-benefits__item:has(.casastays-benefits__card:is(:hover, :focus-visible)) .casastays-benefits__card {
		--casastays-benefits-icon-size: var(--casastays-benefits-icon-size-open);
		--casastays-benefits-body-w: var(--casastays-benefits-body-width);
		--casastays-benefits-pad: var(--casastays-benefits-pad-open);
		--casastays-benefits-inner-gap: var(--casastays-benefits-inner-gap-open);

		background: var(--casastays-benefits-accent);
		color: var(--casastays-benefits-fg);
	}

	.casastays-benefits__item:has(.casastays-benefits__card:is(:hover, :focus-visible)) .casastays-benefits__body {
		opacity: 1;
	}
}

/* Resting state of the first row: card one already open.

   The section's whole point is the copy the reveal uncovers, and eight
   unlabelled pictograms give a first-time visitor nothing to read. Opening one
   card on load shows what a card *is*, so the other seven read as "hover me"
   rather than as decoration.

   Only the first row, and only the first card in it. The rows are independent
   by design (see the chunking note above), so hovering the second row leaves
   this one open — the same as hovering nothing.

   :not(:has(...)) is the exact inverse of the hover block's :has(...), so the
   two can never both apply and the cascade order between them is irrelevant.
   The moment any card in this row is hovered or focused, these rules stop
   matching and the hover rules take over — including when the card hovered is
   this one, which is why the open declarations are duplicated rather than
   shared: the hovered-card rules already say the same thing.

   The same media query as the block above, and for the same reason: below it
   the compact layout opens one card per row by its is-active class, and these
   rules would open a second. */
@media (hover: hover) and (min-width: 1025px) {
	.casastays-benefits__row:first-of-type:not(:has(.casastays-benefits__card:is(:hover, :focus-visible))) .casastays-benefits__item {
		flex-grow: var(--casastays-benefits-collapsed);
	}

	/* One :first-child more specific than the rule above, so ordering is not
	   load-bearing here the way it is in the hover block. */
	.casastays-benefits__row:first-of-type:not(:has(.casastays-benefits__card:is(:hover, :focus-visible))) .casastays-benefits__item:first-child {
		flex-grow: var(--casastays-benefits-expanded);
	}

	.casastays-benefits__row:first-of-type:not(:has(.casastays-benefits__card:is(:hover, :focus-visible))) .casastays-benefits__item:first-child .casastays-benefits__card {
		--casastays-benefits-icon-size: var(--casastays-benefits-icon-size-open);
		--casastays-benefits-body-w: var(--casastays-benefits-body-width);
		--casastays-benefits-pad: var(--casastays-benefits-pad-open);
		--casastays-benefits-inner-gap: var(--casastays-benefits-inner-gap-open);

		background: var(--casastays-benefits-accent);
		color: var(--casastays-benefits-fg);
	}

	.casastays-benefits__row:first-of-type:not(:has(.casastays-benefits__card:is(:hover, :focus-visible))) .casastays-benefits__item:first-child .casastays-benefits__body {
		opacity: 1;
	}
}

/* The compact layout: below the desktop breakpoint, and on a touch screen at
   any width. Four icon-only cards across a tablet are 160px each, a phone
   cannot fit them at all, and there is no hover to open them with. So each
   row becomes one open card, two thirds wide and as tall as the column of
   icon-only tiles stacked beside it. Tapping a tile opens it in the wide
   column and sends the open card back to the tiles; js/benefits.js keeps that
   choice as an is-active class, which the server puts on each row's first
   card to begin with.

   The two conditions are one comma-separated media query rather than two
   blocks because they want exactly the same rules, and together they are the
   exact complement of the desktop blocks above, so the layouts never mix.

   Sizes inside a card are in cqi — the card's own width — rather than vw or a
   ladder of breakpoints. The open card is about 270px on a phone and 480px on
   a tablet, and a tile is half of either, so only its own width says how big
   its icon and type should be. */
@media (max-width: 1024px), (hover: none) {
	.casastays-benefits {
		/* Close to square on a phone, as the design draws them, then capped so
		   a tablet's wider tiles do not make each row taller than the screen. */
		--casastays-benefits-tile-height: clamp(120px, 34vw, 100px);
	}

	/* Every tile is pinned to column two, and dense packing fills that column
	   top to bottom in source order whichever card is open — so the tiles keep
	   their order and only shuffle up to let the open card out. */
	.casastays-benefits__row {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		/* A floor rather than a fixed height, so long copy at a narrow width
		   grows the row instead of being clipped by the card. */
		grid-template-rows: repeat(var(--casastays-benefits-tiles, 3), minmax(var(--casastays-benefits-tile-height), auto));
		grid-auto-flow: dense;
	}

	.casastays-benefits__item {
		grid-column: 2;
		container-type: inline-size;
	}

	.casastays-benefits__item.is-active {
		grid-column: 1;
		grid-row: 1 / -1;
	}

	/* Colour transitions only. The open card changes grid cell in one step, so
	   animating its padding and icon up from the tile's sizes would show a
	   small card growing inside a large slot. */
	.casastays-benefits__card {
		flex-direction: column;
		justify-content: center;
		gap: 0;
		height: 100%;
		padding: 12px;
		cursor: pointer;
		transition:
			background-color var(--casastays-benefits-duration) var(--casastays-benefits-ease),
			color var(--casastays-benefits-duration) var(--casastays-benefits-ease);
	}

	.casastays-benefits__icon {
		flex: none;
		width: clamp(48px, 52cqi, 100px);
		height: clamp(48px, 52cqi, 100px);
		transition: none;
	}

	/* Collapsed to nothing on a tile, not removed, so a screen reader still
	   reads every card in full, as it does on desktop. The opacity transition
	   is declared here rather than on the open card's rule so the
	   reduced-motion block below, at the same specificity, can still cancel it. */
	.casastays-benefits__body {
		flex: none;
		width: 100%;
		height: 0;
		opacity: 0;
		transition: opacity var(--casastays-benefits-duration) var(--casastays-benefits-ease);
	}

	.casastays-benefits__body-inner {
		width: auto;
	}

	/* The open card. Icon pinned to the top and copy to the bottom, so the
	   spare height of a tall tablet card opens up between them rather than
	   pooling under the text. */
	.casastays-benefits__item.is-active .casastays-benefits__card {
		align-items: flex-start;
		justify-content: space-between;
		gap: 24px;
		/* A 16px floor rather than 20px: on a 320px phone those 8px are what
		   lets "Housekeeping" sit on one line. See __name below. */
		padding: clamp(16px, 9cqi, 40px);
		cursor: auto;
		background: var(--casastays-benefits-accent);
		color: var(--casastays-benefits-fg);
	}

	/* Left-aligned in its square box, so the artwork's edge lines up with the
	   title's instead of floating centred above left-aligned text. */
	.casastays-benefits__item.is-active .casastays-benefits__icon {
		width: clamp(80px, 48cqi, 160px);
		height: clamp(80px, 48cqi, 160px);
		-webkit-mask-position: left center;
		mask-position: left center;
	}

	.casastays-benefits__item.is-active .casastays-benefits__body {
		height: auto;
		opacity: 1;
	}

	/* Sized so the longest single word, "Housekeeping", fits on a line of its
	   own. It is 7.3em in Poppins SemiBold plus 17px of the theme's 1.4px h3
	   letter-spacing, and on a 320px phone the open card leaves 145px for it,
	   so 9cqi is the largest scale that does not split it. Not hyphenated:
	   hyphens: auto would still break a word that fits, to fill out the line
	   before it ("Daily House-keeping"). overflow-wrap stays as the last resort
	   for a longer title added later. */
	.casastays-benefits__name {
		margin-bottom: clamp(8px, 5cqi, 16px);
		font-size: clamp(15px, 9cqi, 36px);
		line-height: 1.25;
		overflow-wrap: break-word;
	}

	.casastays-benefits__text {
		font-size: clamp(14px, 6.4cqi, 18px);
		line-height: 1.6;
	}
}

@media (prefers-reduced-motion: reduce) {
	.casastays-benefits__item,
	.casastays-benefits__card,
	.casastays-benefits__icon,
	.casastays-benefits__body {
		transition: none;
	}
}


/* ---------------------------------------------------------------------------
   "Explore Our Premium Spaces" — property carousel
   Rendered by the [casastays_properties] shortcode (inc/properties-section.php),
   driven by js/properties-carousel.js.

   The row is a native scroll-snap track, so it swipes on touch and scrolls on
   a trackpad without the script; the script only adds the arrows and the dots.
   That is also why the visible-card count lives in CSS: the script pages by
   the track width it measures and never needs to know the breakpoints.
   --------------------------------------------------------------------------- */
.casastays-properties {
	--casastays-properties-columns: 3;
	--casastays-properties-gap: 40px;
	--casastays-properties-radius: 16px;
	--casastays-properties-accent: #F47948;
	--casastays-properties-muted: #6b6b6b;
	--casastays-properties-nav-size: 34px;
	--casastays-properties-nav-offset: 56px;

	position: relative;
}

.casastays-properties__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.casastays-properties__title {
	margin: 0;
	color: #000000;
	font-size: clamp(26px, 3.2vw, 42px);
	line-height: 1.15;
	/* TheGem uppercases headings site-wide. The design sets this one in title
	   case, and at this size the difference is not subtle. */
	text-transform: none;
	/* The rule under the heading in the design. text-decoration rather than a
	   border, so it tracks the text rather than the full column width when the
	   heading wraps beside the pill. */
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 10px;
}

/* Colour is set on the link itself and again on its states: TheGem styles
   content links globally, and inheriting there would leave the label in the
   site link colour on top of an orange pill. */
.casastays-properties__pill {
	display: inline-flex;
	align-items: center;
	padding: 9px 27px;
	border-radius: 12px;
	background: var(--casastays-properties-accent);
	color: #ffffff;
	font-size: 24px;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.25s ease;
	line-height: 100%;
}

.casastays-properties__pill:hover,
.casastays-properties__pill:focus,
.casastays-properties__pill:focus-visible {
	background: #dd5f2c;
	color: #ffffff;
	text-decoration: none;
}

.casastays-properties__viewport {
	position: relative;
}

/* grid-auto-flow: column rather than flex, so every card takes exactly the
   computed track width regardless of how much text it holds — in a flex row a
   long property name would widen its own card and break the snap rhythm. */
.casastays-properties__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--casastays-properties-columns) - 1) * var(--casastays-properties-gap))
		/ var(--casastays-properties-columns)
	);
	gap: var(--casastays-properties-gap);
	margin: 0;
	/* Vertical only, for the card shadow. clientWidth is what the script pages
	   by, and horizontal padding would add itself to every page step. */
	padding: 8px 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.casastays-properties__track::-webkit-scrollbar {
	display: none;
}

/* TheGem content styles add bullets and margins to any ul inside page
   content, so both are reset on the item as well as on the list. */
.casastays-properties__item {
	margin: 0;
	padding: 0;
	min-width: 0;
	list-style: none;
	scroll-snap-align: start;
}

.casastays-properties__item::before {
	display: none;
}

.casastays-properties__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	border-radius: var(--casastays-properties-radius);
	background: #ffffff;
	border: 1px solid #00000012;
	box-shadow: 1px 1px 8px 0px #00000012;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.casastays-properties__card:hover {
	transform: translateY(-4px);
}

.casastays-properties__media {
	display: block;
	overflow: hidden;
	/* 4:3, which is the ratio the property photography is shot to. Fixed here
	   rather than left to the image, so the titles of three side-by-side cards
	   start on the same line. */
	aspect-ratio: 4 / 3;
	border-radius: calc(var(--casastays-properties-radius) - 6px);
	background: #ededed;
}

.casastays-properties__image {
	display: block;
	width: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

/* Two classes because Elementor's `.elementor img { height: auto }` outranks
   one, and on the home page that left any photo not shot at 4:3 (Olive is
   3:2) short of the frame with the grey background showing beneath it. Only
   the height is raised, so the reduced-motion override below still wins on
   transition. */
.casastays-properties__media .casastays-properties__image {
	height: 100%;
}

.casastays-properties__card:hover .casastays-properties__image {
	transform: scale(1.05);
}

.casastays-properties__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px;
}

.casastays-properties__name {
	margin: 0 0 4px;
	font-size: 28px;
	font-weight: 400;
	text-transform: none;
}

.casastays-properties__name a {
	color: #000000;
	text-decoration: none;
}

.casastays-properties__name a:hover,
.casastays-properties__name a:focus-visible {
	color: var(--casastays-properties-accent);
}

.casastays-properties__area {
	margin: 0;
	color: #000000;
	font-size: 18px;
	line-height: 100%;
    font-weight: 300;
}

/* margin-top: auto pins the row to the bottom of the card, so the buttons of
   three cards line up even when one property has a two-line name. */
.casastays-properties__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 30px;
}

.casastays-properties__book {
	flex: 0 0 auto;
	padding: 9px 27px;
	border: 2px solid var(--casastays-properties-accent);
	border-radius: 12px;
	background: transparent;
	color: var(--casastays-properties-accent);
	font-size: 24px;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
	line-height: 100%;
}

.casastays-properties__book:hover,
.casastays-properties__book:focus,
.casastays-properties__book:focus-visible {
	background: var(--casastays-properties-accent);
	color: #ffffff;
	text-decoration: none;
}

.casastays-properties__price {
	margin: 0;
	text-align: right;
	font-size: 20px;
	line-height: 24px;
	color: #000000;
	/* TheGem capitalises small print site-wide, which turned the label into
	   "Rent Start At". The design sets it as a sentence, so the casing has to
	   come from the shortcode attribute rather than from CSS. */
	text-transform: none;
}

.casastays-properties__price-label,
.casastays-properties__price-value {
	display: block;
}

.casastays-properties__price-value {
	color: #000000;
	font-weight: 600;
}

/* The arrow is the uploaded artwork on bare page background, with no disc and
   no shadow: sitting in the gutter beside the cards, a white circle would read
   as a third button competing with the orange ones inside them.

   Hidden until the script has measured the track: before that the arrows do
   nothing, and with a single page there is nowhere for them to go. */
.casastays-properties__nav {
	display: none;
	position: absolute;
	top: 50%;
	z-index: 2;
	align-items: center;
	justify-content: center;
	width: var(--casastays-properties-nav-size);
	height: var(--casastays-properties-nav-size);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.25s ease;
}

.casastays-properties.is-ready .casastays-properties__nav {
	display: flex;
}

/* max-width/max-height rather than fixed dimensions: the arrows are
   media-library uploads that can be re-exported at any ratio, so the button is
   the box and the file keeps its own proportions inside it. */
.casastays-properties__nav-icon {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

.casastays-properties__nav:hover:not(:disabled),
.casastays-properties__nav:focus-visible:not(:disabled) {
	opacity: 0.55;
}

.casastays-properties__nav:disabled {
	opacity: 0.25;
	cursor: default;
}

/* Fully outside the container, in the page gutter, as drawn — the offset is
   past the section's own edge rather than overlapping the first and last card.
   The homepage container is 1170px inside a wider page, so the overhang has
   somewhere to sit; once that gutter is gone the step below drops the arrows
   rather than pushing them onto the photos, where bare artwork with no disc
   behind it would disappear into a dark image. */
.casastays-properties__nav--prev {
	left: calc(-1 * var(--casastays-properties-nav-offset));
}

.casastays-properties__nav--next {
	right: calc(-1 * var(--casastays-properties-nav-offset));
}

.casastays-properties__dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-top: 26px;
}

.casastays-properties__dot {
	width: 14px;
	height: 14px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #FCB2364D;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.casastays-properties__dot.is-active {
	background:#FCB236;
}

.casastays-properties__notice {
	padding: 16px;
	border: 1px dashed #c9c9c9;
	color: #6b6b6b;
}

/* The column count is written onto the section as an inline custom property by
   the shortcode, and an inline style outranks any rule in here — so these
   steps set grid-auto-columns directly rather than re-declaring the variable,
   which would be ignored. */
@media (max-width: 1200px) {
	/* No gutter left to hang the arrows in, and pulling them inside would put
	   them on top of the photos. The dots below the track are clickable at
	   every width, and the track itself still swipes and scrolls. */
	.casastays-properties.is-ready .casastays-properties__nav {
		display: none;
	}
}

@media (max-width: 1024px) {
	.casastays-properties__track {
		grid-auto-columns: calc((100% - var(--casastays-properties-gap)) / 2);
	}

	/* At two cards to a row there is no room for the button and the price side
	   by side — the price label wrapped to three lines beside the button. The
	   row stacks instead, price above a full-width button, as the mobile design
	   draws it. column-reverse rather than reordered markup, so desktop keeps
	   its button-left, price-right row from the same source. */
	.casastays-properties__footer {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 20px;
		padding-top: 24px;
	}

	.casastays-properties__book {
		padding-top: 14px;
		padding-bottom: 14px;
		text-align: center;
	}

	.casastays-properties__price {
		text-align: left;
	}

	/* Back onto one line — "Rent Start at ₹8,000*". The whitespace between the
	   two spans in the markup supplies the space. */
	.casastays-properties__price-label,
	.casastays-properties__price-value {
		display: inline;
	}
}

@media (max-width: 767px) {
	.casastays-properties__head {
		margin-bottom: 0px;
	}

	/* Deliberately under one full width: with the arrows gone, the sliver of
	   the next card is what tells a phone user the row scrolls. */
	.casastays-properties__track {
		--casastays-properties-gap: 18px;

		grid-auto-columns: 84%;
	}
	.casastays-properties__price{
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.casastays-properties__card,
	.casastays-properties__image,
	.casastays-properties__book,
	.casastays-properties__pill,
	.casastays-properties__nav,
	.casastays-properties__dot {
		transition: none;
	}

	.casastays-properties__card:hover,
	.casastays-properties__card:hover .casastays-properties__image {
		transform: none;
	}
}


/* ---------------------------------------------------------------------------
   Single property page
   Rendered by single-property.php, driven by js/property-single.js.

   Type comes from TheGem Theme Options rather than being hard-coded: the
   families, the accent and the breadcrumb colours are read from the
   --thegem-to-* custom properties the theme generates from its options screen
   (uploads/thegem/css/custom-*.css), with the shipped values as fallbacks. The
   sizes are the design's own scale — the theme's h1-h6 steps are set for
   headline use (h4 is 48px) and would dwarf a card label.

   text-transform is reset in several places on purpose: Theme Options
   capitalise headings and body copy site-wide, which turns "Rent Starts at"
   into "Rent Starts At".
   --------------------------------------------------------------------------- */
.casastays-single {
	--cs-body-font: var(--thegem-to-body-font-family, Poppins), sans-serif;
	--cs-title-font: var(--thegem-to-h1-font-family, Poppins), sans-serif;
	--cs-accent: var(--thegem-to-link-color, #F47948);
	--cs-cream: #F8F3E7;
	--cs-line: #E7E0D4;
	--cs-muted: rgba(0, 0, 0, 0.62);
	--cs-radius: 14px;
	--cs-gap: 48px;

	font-family: var(--cs-body-font);
	color: #000000;
}

/* --- Breadcrumbs.

   Full-bleed cream strip with the crumbs on the content grid inside it, so the
   band spans the window while the text lines up with everything below. */
.casastays-single__crumbs {
	background: var(--cs-cream);
}

.casastays-single__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 13px 0;
	list-style: none;
	font-size: 20px;
    line-height: 1.4;
    font-weight: 300;
}

.casastays-single__crumbs li {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--thegem-to-breadcrumbs-color-active, #3C3950);
}

/* The chevron is drawn between items rather than typed into the markup, so a
   screen reader reads three crumbs and not three crumbs and two symbols. The
   ::before is also where TheGem puts its own list bullet, so this replaces it
   on the later items and switches it off on the first. */
.casastays-single__crumbs li:first-child::before {
	display: none;
}

.casastays-single__crumbs li + li {
	position: relative;
	padding-left: 18px;
}

.casastays-single__crumbs li + li::before {
	content: ">";
	display: block;
	position: absolute;
	left: 4px;
	top: 50%;
	width: auto;
	height: auto;
	margin: 0;
	background: none;
	color: var(--cs-muted);
	transform: translateY(-50%);
}

.casastays-single__crumbs a {
	color: var(--thegem-to-breadcrumbs-color-active, #3C3950);
	text-decoration: none;
}

.casastays-single__crumbs a:hover,
.casastays-single__crumbs a:focus-visible {
	color: var(--cs-accent);
}

/* --- Hero: gallery beside the details. */
.casastays-single__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--cs-gap);
	margin-top: 44px;
}

.casastays-single__stage {
	position: relative;
	overflow: hidden;
	aspect-ratio: 5 / 4;
	border-radius: var(--cs-radius);
	background: #ededed;
}

/* Stacked rather than a scroll track: the thumbnails and arrows both address
   slides by index, and cross-fading in place keeps the stage height fixed
   whatever the photo dimensions are. */
.casastays-single__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.casastays-single__slide.is-active {
	opacity: 1;
}

.casastays-single__slide-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.casastays-single__stage-nav {
	display: flex;
	position: absolute;
	top: 50%;
	z-index: 2;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #333333;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.casastays-single__stage-nav:hover {
	background: var(--cs-accent);
	color: #ffffff;
}

.casastays-single__stage-nav--prev {
	left: 12px;
}

.casastays-single__stage-nav--next {
	right: 12px;
}

/* Flex with an equal share each, rather than fixed columns: a property with
   two usable photos fills the row with two wide thumbs, and one with six fills
   it with six narrow ones. A fixed four-column grid would leave a hole in the
   first case and wrap in the second. */
.casastays-single__thumbs {
	display: flex;
	gap: 16px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.casastays-single__thumbs li {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.casastays-single__thumbs li::before {
	display: none;
}

.casastays-single__thumb {
	display: block;
	width: 100%;
	padding: 0 0 6px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	cursor: pointer;
}

.casastays-single__thumb.is-active {
	border-bottom-color: var(--cs-accent);
}

/* height: auto is what lets aspect-ratio apply: wp_get_attachment_image()
   prints the medium size's height attribute (300px for a portrait upload), and
   with both dimensions definite the ratio is ignored and the thumb keeps the
   photo's own shape. 5 / 4 matches the stage, as in the design. */
.casastays-single__thumb-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 8px;
	opacity: 0.5;
	transition: opacity 0.25s ease;
}

.casastays-single__thumb.is-active .casastays-single__thumb-image,
.casastays-single__thumb:hover .casastays-single__thumb-image {
	opacity: 1;
}

/* --- Hero details. */
.casastays-single__details {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.casastays-single__title {
	margin: 0 0 6px;
	line-height: 1.2;
	color: var(--cs-accent);
	text-transform: none;
}

.casastays-single__tagline {
	margin: 0 0 14px;
	font-size: 18px;
	line-height: 1.5;
	color: #000;
	text-transform: none;
}

.casastays-single__rent {
	margin: 0 0 22px;
    font-size: 24px;
    line-height: 1.4;
    text-transform: none;
    font-weight: 600;
}

.casastays-single__rent strong {
	font-weight: 600;
}

.casastays-single__amenities {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 15px 20px;
	margin: 0;
	padding: 24px 0;
	border-top: 1px solid var(--cs-line);
	border-bottom: 1px solid var(--cs-line);
	list-style: none;
}

/* TheGem content styles add bullets and margins to any ul inside page
   content, so both are reset on the item as well as on the list. */
.casastays-single__amenity {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	min-width: 0;
	list-style: none;
}

.casastays-single__amenity::before {
	display: none;
}

/* Fixed box with contain, so fifteen icons drawn at fifteen different aspect
   ratios still line their labels up. */
.casastays-single__amenity-icon {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.casastays-single__amenity-name {
	font-size: 16px;
    line-height: 1.35;
    color: rgba(0, 0, 0, 1);
    text-transform: none;
}

/* --- About, with the two-line clamp and its toggle. */
.casastays-single__about {
	position: relative;
	margin: 22px 0 0;
}

.casastays-single__about-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.78);
	text-transform: none;
}

.casastays-single__about.is-open .casastays-single__about-text {
	display: block;
	overflow: visible;
}

.casastays-single__about-text p {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: inherit;
	color: #000;
}

.casastays-single__about-text p:last-child {
	margin-bottom: 0;
}

/* Sits at the end of the clamped copy, as drawn, rather than on a line of its
   own. The gradient hides the word the clamp cut in half; the panel behind is
   white, so it can fade to white. */
.casastays-single__about-toggle {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 0 0 42px;
	border: 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 34px);
	color: #000000;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	cursor: pointer;
	text-transform: none;
}

.casastays-single__about.is-open .casastays-single__about-toggle {
	position: static;
	display: block;
	margin-top: 8px;
	padding: 0;
	background: none;
}

.casastays-single__about-toggle:hover {
	color: var(--cs-accent);
}

/* --- Hero buttons.

   They follow the copy rather than being pushed to the foot of the column with
   margin-top: auto. Six amenities make the details column much shorter than
   the gallery beside it, and pinning the buttons down there left a hand's
   width of white space under the paragraph. */
.casastays-single__actions {
	display: flex;
	gap: 20px;
	padding-top: 30px;
}

/* Take A Tour is dropped when the property has no tour URL. One button
   stretched across the whole column reads as a banner rather than a pair. */
.casastays-single__action:only-child {
	max-width: 320px;
}

.casastays-single__action {
	flex: 1 1 0;
	padding: 13px 20px;
	border: 1px solid var(--cs-accent);
	border-radius: 12px;
	font-family: var(--thegem-to-button-font-family, Poppins), sans-serif;
	font-weight: var(--thegem-to-button-font-weight, 500);
	font-size: 22px;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.casastays-single__action--ghost {
	background: transparent;
	color: var(--cs-accent);
}

.casastays-single__action--ghost:hover,
.casastays-single__action--ghost:focus-visible {
	background: var(--cs-accent);
	color: #ffffff;
	text-decoration: none;
}

.casastays-single__action--solid {
	background: var(--cs-accent);
	color: #ffffff;
}

.casastays-single__action--solid:hover,
.casastays-single__action--solid:focus-visible {
	background: #dd5f2c;
	color: #ffffff;
	text-decoration: none;
}

/* --- Room types. */
.casastays-single__rooms {
	margin-top: 72px;
}

/* auto-fill, not auto-fit: auto-fit collapses the empty tracks, so a property
   offering one room type stretched its card across the whole row. The track
   minimum is at least a third of the row, which caps it at three; below
   that the 240px floor steps it down to two, then one. */
.casastays-single__rooms-grid {
	--casastays-rooms-gap: 26px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(240px, (100% - 2 * var(--casastays-rooms-gap)) / 3), 1fr));
	gap: var(--casastays-rooms-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.casastays-single__room {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--cs-line);
	border-radius: 12px;
	list-style: none;
	background: #ffffff;
}

.casastays-single__room::before {
	display: none;
}

.casastays-single__room-media {
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #ededed;
}

.casastays-single__room-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.casastays-single__room-body {
	padding: 14px 18px 16px;
}

/* The colour is not optional here. Theme Options set the site h3 colour to
   white (--thegem-to-h3-color) for headings over photography, so an h3 left to
   inherit is invisible on a white card. */
.casastays-single__room-name {
	margin: 0 0 2px;
	color: #000000;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 400;
	text-transform: none;
}

.casastays-single__room-price {
	margin: 0;
	font-size: 18px;
	line-height: 1.4;
	color: #000000;
	text-transform: none;
}

/* --- Map + enquiry form. */
.casastays-single__enquiry {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	margin-top: 72px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--cs-cream);
}

.casastays-single__enquiry--no-map {
	grid-template-columns: minmax(0, 1fr);
}

/* The map fills its half edge to edge — it is the panel's left wall, so any
   padding around it would read as a misaligned image. */
.casastays-single__map {
	min-height: 100%;
}

.casastays-single__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	border: 0;
}

.casastays-single__form {
	padding: 38px 40px 40px;
}

.wpcf7-form .wpcf7-form-control-wrap {
	margin-bottom: 10px;
}

/* Everything from here to the end of the enquiry block is the *form*, not the
   single property page, and is shared with the header's "Book Now" popup
   (inc/booking-modal.php) — the same CF7 record, drawn the same way in both
   places. `casastays-booking-form` is what says so; only the padding above and
   the panel around it belong to this page.

   The accent is redeclared because the tokens at the top of this section sit
   on `.casastays-single`, and the popup is printed in the footer, nowhere
   inside it. Without this the submit button would resolve `var(--cs-accent)`
   to nothing and come out unpainted. */
.casastays-booking-form {
	--cs-accent: var(--thegem-to-link-color, #F47948);
}

.casastays-booking-form .wpcf7 {
	margin: 0;
}

.casastays-booking-form .wpcf7 p {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.4;
	text-transform: none;
}

.casastays-booking-form .wpcf7 label {
	display: block;
	width: 100%;
	font-size: 18px;
    font-weight: 400;
    line-height: 36px;
    color: #000000;
    text-transform: none;
}

/* "I am a" is a <fieldset> and <legend> in the form rather than a <label>:
   the radio group is two controls, and CF7 flags a label wrapping more than
   one. The browser's fieldset frame (thegem-reset.css gives it a 1px grey
   border and padding) is dropped, and the legend set to read as one more
   label. min-width: 0 undoes the fieldset's default min-content floor, which
   would otherwise let it push past the panel on a narrow screen. */
.casastays-booking-form .wpcf7 fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.casastays-booking-form .wpcf7 legend {
	padding: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 36px;
	color: #000000;
	text-transform: none;
}

/* Prefixed with `body` from here down, and only from here down.

   TheGem writes its form and button colours into
   uploads/thegem/css/custom-*.css, which is enqueued *after* this stylesheet
   and matches CF7 fields at the same specificity as the selectors here
   (.wpcf7-form input[type='submit']:not(...) is 3 classes + 1 element). On a
   tie the later sheet wins, which painted the booking button TheGem's teal
   instead of the site orange. One extra element in the selector settles it
   without resorting to !important. */
body .casastays-booking-form .wpcf7 input[type="text"],
body .casastays-booking-form .wpcf7 input[type="tel"],
body .casastays-booking-form .wpcf7 input[type="email"],
body .casastays-booking-form .wpcf7 select {
	box-sizing: border-box;
    width: 100%;
    border: 1px solid #000000;
    background: #ffffff;
    color: #000000;
    font-family: inherit;
    font-size: 18px;
    line-height: 40px;
    padding: 3px 15px 3px 15px;
    border-radius: 12px 12px 12px 12px;
    background-color: #00000000;
}

/* The native arrow is dropped for the design's chevron, drawn as a background
   image so it needs no extra markup inside CF7's output. --cs-select-arrow is
   the uploaded asset, published to CSS by casastays_booking_arrow_style() in
   inc/booking-form.php. Its source is 24x15, so only the width is pinned. */
body .casastays-booking-form .wpcf7 select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	background-image: var(--cs-select-arrow);
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px auto;
}

body .casastays-booking-form .wpcf7 input:focus,
body .casastays-booking-form .wpcf7 select:focus {
	outline: none;
	border-color: var(--cs-accent);
}

/* Placeholder colour, for the prompt option inc/booking-form.php puts at the
   top of each dropdown and for any placeholder attribute the form grows later.
   :has() reads the live selection rather than the markup, so the colour
   follows the field; where it is unsupported the prompt just renders in the
   input colour, which is legible either way. */
body .casastays-booking-form .wpcf7 ::placeholder {
	color: rgba(0, 0, 0, 0.3);
}

body .casastays-booking-form .wpcf7 select:has(option[value=""]:checked) {
	color: rgba(0, 0, 0, 0.3);
}

/* The open list is a native popup and inherits the closed field's colour in
   Chrome, so the options are put back to the input colour one by one. */
body .casastays-booking-form .wpcf7 select option {
	color: #000000;
}

body .casastays-booking-form .wpcf7 select option[value=""] {
	color: rgba(0, 0, 0, 0.3);
}

.casastays-booking-form .wpcf7 .wpcf7-radio {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 8px;
}

.casastays-booking-form .wpcf7 .wpcf7-list-item {
	margin: 0;
}

body .casastays-booking-form .wpcf7 .wpcf7-list-item label {
	display: inline-flex;
    align-items: center;
    gap: 9px;
    background: transparent;
    cursor: pointer;
}

/* The radio is drawn here rather than left to accent-color. accent-color only
   picks the checked fill: the border and the unchecked background stay the
   browser's, and Chrome fills an unchecked radio white — a white disc that
   reads as a mark of its own against the cream panel. appearance: none hands
   both states over.

   Sized with box-sizing so the 1px border sits inside the 20px, keeping the
   two states the same diameter. padding is reset because TheGem pads every
   field in a CF7 form to leave room for its icons —
   `.wpcf7-form input:not(.gem-button-wpcf-custom) { padding-right: 40px }`,
   thegem-new-css.css — which a native radio ignores but a box with
   appearance: none does not, stretching it into a 42px ellipse. */
body .casastays-booking-form .wpcf7 .wpcf7-list-item input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 1px solid #000000;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

/* Checked is a plain orange disc — the border goes transparent rather than to
   0, so the diameter does not change as it fills. */
body .casastays-booking-form .wpcf7 .wpcf7-list-item input[type="radio"]:checked {
	border-color: transparent;
	background: #FCB236;
}

/* The text-field rule above clears `outline` on every input in this form, and
   with appearance: none there is no longer a native control drawing its own
   focus ring — so the keyboard ring is put back for the radios. */
body .casastays-booking-form .wpcf7 .wpcf7-list-item input[type="radio"]:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

body .casastays-booking-form .wpcf7 input[type="submit"] {
	width: 100%;
	height: 50px;
	margin-top: 6px;
	padding: 0 24px;
	border: 0;
	border-radius: 12px;
	background: var(--cs-accent);
	color: #ffffff;
	font-family: var(--thegem-to-button-font-family, Poppins), sans-serif;
	font-weight: var(--thegem-to-button-font-weight, 500);
	font-size: 20px;
	cursor: pointer;
	transition: background-color 0.25s ease;
	margin-top: 40px;
}

body .casastays-booking-form .wpcf7 input[type="submit"]:hover {
	background: #dd5f2c;
}

/* --- Near by properties. */
.casastays-single__nearby {
	margin: 78px 0 90px;
}

.casastays-single__section-title {
	margin: 0 0 30px;
	font-family: var(--cs-title-font);
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: 500;
	line-height: 1.2;
	color: #000000;
	text-transform: none;
}

/* --- Responsive steps. */
@media (max-width: 1024px) {
	.casastays-single {
		--cs-gap: 34px;
	}

	.casastays-single__hero {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked, the buttons no longer need to reach the foot of a column. */
	.casastays-single__actions {
		margin-top: 4px;
	}

	.casastays-single__enquiry {
		grid-template-columns: minmax(0, 1fr);
	}

	.casastays-single__map iframe {
		min-height: 300px;
	}

	.casastays-single__rooms,
	.casastays-single__enquiry {
		margin-top: 56px;
	}

	.casastays-single__nearby {
		margin: 60px 0 70px;
	}
}

@media (max-width: 767px) {
	.casastays-single__hero {
		margin-top: 28px;
	}

	.casastays-single__amenities {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 20px 0;
	}

	.casastays-single__thumbs {
		grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
		gap: 12px;
	}

	.casastays-single__form {
		padding: 26px 22px 30px;
	}

	.casastays-single__rooms-grid {
		--casastays-rooms-gap: 18px;
	}
}

@media (max-width: 479px) {
	/* Two buttons side by side leave "Take A Tour" on two lines at this width. */
	.casastays-single__actions {
		flex-direction: column;
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.casastays-single__slide,
	.casastays-single__stage-nav,
	.casastays-single__thumb-image,
	.casastays-single__action,
	body .casastays-booking-form .wpcf7 input[type="submit"] {
		transition: none;
	}
}


/* ---------------------------------------------------------------------------
   "Where Every Evening Has A Plan." — join-the-community call to action
   Rendered by the [casastays_cta_banner] shortcode (inc/cta-banner-section.php).

   Two details drive every rule below.

   The button is inline with the headline, not beside it. The heading is
   therefore display: inline and the button an inline-block that follows it in
   the same text flow, so the gap between "Plan." and the button stays one
   word wide at every width instead of growing with the container the way a
   flex gap would. It also means a longer headline pushes the button along and
   eventually onto its own line, which is the right failure mode.

   The illustration overhangs the card's top edge. It is bottom-pinned and left
   at its natural aspect ratio, so the overhang is whatever the artwork is
   taller than the card — no magic negative offset to keep in sync. That only
   works while the card is shorter than the art, which is why the vertical
   padding is a value (36px) taken off the design rather than a round number:
   at 48px the card grows past the artwork and the overhang silently vanishes.

   The card is deliberately not overflow: hidden. Clipping it would cut the
   overhang off, which is the one thing the section is built around.
   --------------------------------------------------------------------------- */
.casastays-cta {
	/* Card: the 1170px content grid, so its edges line up with the sections
	   above and below rather than floating inside them. */
	--casastays-cta-max: 1170px;
	--casastays-cta-radius: 16px;
	--casastays-cta-pad-y: 41px;
	--casastays-cta-pad-x: 56px;

	/* A floor for the one-line-headline case. Two lines already exceed it. */
	--casastays-cta-min-h: 200px;

	/* Hairline, not a shadow: the design outlines the card in a pale lilac
	   picked out of the illustration's own background blob. */
	--casastays-cta-border: #E9E9F3;

	/* How far the artwork's *box* clears the card's top edge. This is the one
	   number to reach for when the overhang looks wrong — see .casastays-cta__art
	   for why it is set directly instead of falling out of the image's height.

	   The figures clear it by less than this, because the artwork (561x332,
	   attachment 668) carries 29px of transparent padding above the tallest
	   head — 8.7% of whatever height it renders at, so ~25px here. 64 is what
	   puts the visible overhang back at the 38px the earlier, near-trimmed
	   artwork measured: 64 - 0.087 x (226 card + 64) = 38. */
	--casastays-cta-art-rise: 90px;

	/* Room the card's right padding keeps clear for the artwork. A fixed px
	   value, not a percentage: padding percentages resolve against the card's
	   *containing block*, so they would not track the box they are reserving.

	   It has to cover the widest the artwork gets in this range. The artwork is
	   561x332 (attachment 668), so 1.69:1; the card measures 226 tall, and the
	   image is that plus the 64px rise = 290, so 490 wide. 500 covers it, and
	   stays under the asset's native 561 so it is never upscaled.

	   Raising --casastays-cta-pad-y grows the card, and so the image, and so
	   the width this has to cover. Change one, re-check the other — in a
	   browser rather than on paper. The card's height depends on how Poppins
	   actually sets, and the arithmetic alone predicted 480 where the rendered
	   value is 491. */
	--casastays-cta-art-reserve: 500px;
	--casastays-cta-art-inset: 24px;

	/* Clear space between the headline's longest line and the artwork. This is
	   the slack in the row: 1170 - 56 - 500 - 24 - 20 leaves 570px for the
	   headline, which sets to 493px. Widening the artwork much further starts
	   wrapping the headline, and the designed two-line split goes with it. */
	--casastays-cta-gap: 20px;

	--casastays-cta-title-size: clamp(30px, 4.4vw, 52px);
	--casastays-cta-button-size: clamp(15px, 1.55vw, 18px);
}

.casastays-cta__panel {
	position: relative;
	box-sizing: border-box;
	max-width: var(--casastays-cta-max);
	min-height: var(--casastays-cta-min-h);
	margin-inline: auto;
	display: flex;
	align-items: center;
	padding:
		var(--casastays-cta-pad-y)
		calc(var(--casastays-cta-art-reserve) + var(--casastays-cta-art-inset) + var(--casastays-cta-gap))
		var(--casastays-cta-pad-y)
		var(--casastays-cta-pad-x);
	border: 1px solid #79A1FF;
	border-radius: var(--casastays-cta-radius);
	background: var(--casastays-cta-bg, #ffffff);
	box-shadow: 1px 1px 8px 0px #00000012;
}

/* No artwork resolved (or none wanted): give the text the full width back
   instead of leaving a 470px hole on the right. */
.casastays-cta__panel--no-art {
	padding-right: var(--casastays-cta-pad-x);
}

.casastays-cta__body {
	width: 100%;
	/* Set here as well as on the heading: the button is an inline sibling, and
	   an inline-block's line box is sized by its *containing block's*
	   line-height, not by the heading's. */
	line-height: 1.24;
}

.casastays-cta__title {
	display: inline;
	margin: 0;
	line-height: 71px;
	color: #000000;
	/* Theme Options capitalise headings site-wide, which would turn
	   "Has A Plan." into title case a second time and "Every" into "EVERY"
	   wherever the option is set to uppercase. */
	text-transform: capitalize;
}

.casastays-cta__button {
	display: inline-block;
	/* One word's width after "Plan.", in ems of the *headline* so it tracks the
	   headline as that scales, not the button's own smaller type. */
	margin-left: 0.5em;
	margin-top: 15px;
	font-size: var(--casastays-cta-button-size);
	/* The design centres the pill on the headline's last line rather than
	   sitting it on the baseline — on the baseline an 18px button hangs well
	   below a 52px line. `middle` aligns to the headline's own x-height, so it
	   stays centred as the clamps move both sizes. */
	vertical-align: top;
	padding: 9px 27px;
	border-radius: 12px;
	background: var(--casastays-cta-accent, #F47948);
	color: #ffffff;
	font-family: var(--thegem-to-button-font-family, Poppins), sans-serif;
	font-weight: var(--thegem-to-button-font-weight, 500);
	line-height: 1.3;
	text-decoration: none;
	text-transform: none;
	/* The label is two words the design keeps on one line; wrapping it turns
	   the pill into a rounded rectangle and breaks the alignment above. */
	white-space: nowrap;
	transition: background-color 0.25s ease;
}

.casastays-cta__button:hover,
.casastays-cta__button:focus-visible {
	/* Same darkened orange as the enquiry form's submit button. */
	background: #dd5f2c;
	color: #ffffff;
	text-decoration: none;
}

.casastays-cta__button:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 3px;
}

/* The overhang, stated rather than inferred.

   Stretching the box between a negative `top` and `bottom: 0` makes its height
   the card's height *plus the rise*, whatever the card's height turns out to
   be. The image then fills that box by height and takes its width from its own
   aspect ratio. So the blob clears the top edge by exactly --…-art-rise at
   every width, instead of by however much the artwork happened to out-measure
   the card — which is what an ordinary width-driven image gives you, and which
   quietly shrinks to nothing as the headline's clamp lowers the card.

   The trade is that the rendered *width* now varies with the card's height, so
   --…-art-reserve has to cover the widest it gets in each range. The numbers
   are worked out at each breakpoint below. */
.casastays-cta__art {
	position: absolute;
	right: var(--casastays-cta-art-inset);
	top: calc(var(--casastays-cta-art-rise) * -1);
	bottom: 0;
	/* The artwork overhangs the headline's line boxes at narrow desktop widths;
	   without this it would swallow clicks aimed at the button. */
	pointer-events: none;
}

.casastays-cta__art-image {
	display: block;
	height: 100% !important;
	width: 100% !important;

	/* The brake on the feedback loop, and not optional.

	   Height-driven sizing means a taller card makes a *wider* image, and a
	   wider image leaves the headline less room, which wraps it, which makes
	   the card taller again. Left alone that runs away: at ~950px the button
	   wraps to its own line, the card grows a whole line, the artwork gains
	   30px of width and lands on top of the headline.

	   Capping the width at the same value the card's padding reserves means
	   the artwork can never grow into the text, whatever the card does.
	   object-fit keeps it from being squashed when the cap bites — it scales
	   down inside the box instead, anchored to the bottom right, so what gives
	   way is some of the overhang rather than the layout.

	   Note this also replaces TheGem's global img { max-width: 100% }, which
	   would otherwise resolve against the shrink-wrapped box this image is
	   itself sizing and collapse it. */
	max-width: var(--casastays-cta-art-reserve);
	object-fit: contain;
	object-position: right bottom;
}

/* Starts at 1170 rather than the theme's usual 1024 because that is where the
   card stops being 1170px wide and starts tracking the viewport. Below it the
   desktop reserve leaves too little for the headline: at a 1025px viewport the
   card is 985 and the desktop numbers offer the headline 385px for something
   that sets at 493.

   The rise and reserve move together here. The card is 212 tall, so a 47px
   rise renders the artwork 259 tall and 438 wide — 24px of visible overhang
   after the asset's top padding, matching what this range showed before the
   artwork changed — and 440 is the reserve that covers that width. */
@media (max-width: 1170px) {
	.casastays-cta {
		--casastays-cta-pad-x: 32px;
		--casastays-cta-pad-y: 34px;
		--casastays-cta-art-reserve: 440px;
		--casastays-cta-art-rise: 47px;
		--casastays-cta-art-inset: 16px;
		--casastays-cta-gap: 16px;
	}
}

@media (max-width: 999px) {
	/* Below 1000 the headline needs the full width, so the card stacks rather
	   than squeezing the two columns further.

	   1000 is where measurement put the edge, not a round guess. Just under it
	   the second line plus the pill stops fitting the text column, the button
	   drops to a line of its own, and the card gains a whole line of height —
	   which the cap on .casastays-cta__art-image now absorbs, but only by
	   flattening the overhang. Stacking is the better answer at that width.

	   Stacking drops the overhang. Once the artwork sits under the text there
	   is no top edge left to break out of, and a blob rising into the headline
	   from below reads as a bug rather than a flourish. It keeps the bottom
	   bleed: the negative margin cancels the card's padding so the figures
	   still stand on the border exactly as they do on desktop. */
	.casastays-cta {
		--casastays-cta-pad-x: 28px;
		--casastays-cta-pad-y: 32px;
		--casastays-cta-min-h: 0;
	}

	.casastays-cta__panel {
		display: block;
		padding-right: var(--casastays-cta-pad-x);
		text-align: center;
	}

	.casastays-cta__button {
		/* On its own line once the headline is centred: inline after a centred
		   last line leaves the pill hanging off to one side. */
		display: block;
		width: fit-content;
		margin: 22px auto 0;
	}

	/* Sized as a share of the card, not a flat px width. A fixed 340px looked
	   right at phone widths and stranded the figures in the middle of a lake of
	   white at the top of this range, where the card is still ~810px wide.
	   Capped at 420 so the 561px artwork is never upscaled. */
	.casastays-cta__art {
		position: static;
		width: min(420px, 62%);
		margin: 24px auto calc(var(--casastays-cta-pad-y) * -1);
	}

	.casastays-cta__art-image {
		width: 100%;
		height: auto;
		max-width: 100%;
	}
}

@media (max-width: 479px) {
	.casastays-cta {
		--casastays-cta-pad-x: 20px;
		--casastays-cta-radius: 14px;
	}

	/* A larger share than the tablet step, not a smaller one: at 320-479 the
	   card is narrow enough that 62% leaves the figures too small to read as
	   people, and there is no second column competing for the width. */
	.casastays-cta__art {
		width: min(420px, 82%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.casastays-cta__button {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Community page — bubble artwork row

   Five heading widgets in row container #302c385, each carrying one of the
   uploaded bubble SVGs as its Elementor background image. Every bubble was
   drawn around its own word, so all five have a different natural size and
   each keeps its tail on a particular side:

       COMMUNITY      246 x 80   tail bottom-right   #FCB236
       CONNECTIONS    280 x 82   tail bottom-right   #F47948
       LIFE           110 x 82   tail bottom-left    #F8F3E7 + #F47948 stroke
       COLLABORATION  315 x 80   tail bottom-right   #FCB236
       INCLUSIVITY    228 x 82   tail bottom-left    #F47948

   Two things were wrong with the widgets as configured. Each pill was only as
   wide as its text, so `background-size: contain` letterboxed artwork drawn
   for a box half again as wide; and five text-sized pills cannot reach the
   1170px content width, so the row stopped ~140px short on the right.

   Sizing the pills to their text can never fix the second problem, so the
   widths are handed out in proportion to the *artwork* instead. flex-grow is
   each SVG's own drawn width and flex-basis is zero, so the row splits
   246:280:110:315:228 and all five bubbles land at one uniform fraction of the
   size they were drawn at — the row is exactly 100% wide, and the bubbles keep
   their relative sizes, which is what makes the run of them read as one set.

   aspect-ratio then derives every height from that width, and that is what
   makes `background-size: 100% 100%` safe: the box is always the SVG's own
   shape, so filling it stretches nothing. `contain` is the timid choice here
   and it is the wrong one — it re-introduces the letterboxing.

   The measured text/artwork ratio is a near-constant 67% across the four long
   words (COLLABORATION is the tightest at 213.7/315), so at the 1170px grid
   the bubbles sit at 92% of drawn size and the words take ~73% of them. The
   words only threaten the caps once the bubbles drop below ~80% of drawn size,
   which is why the type is capped at its Elementor value of 26px and only
   starts scaling below that point — see the font-size rule.

   Everything is overridden from here rather than from the Elementor panel
   because elementor-post-448.css is enqueued *after* the child stylesheet
   (thegem-elementor/functions.php:497), so matching Elementor's own
   `.elementor-448 .elementor-element.elementor-element-<id>` specificity is
   not enough to win. Naming .e-con-inner — the wrapper Elementor adds inside
   a boxed container, as the content-grid notes at the top of this file
   describe — takes the count to four classes and beats it honestly, without
   !important.
   --------------------------------------------------------------------------- */

/* Each SVG's drawn size, straight off its viewBox. --bubble-w doubles as the
   flex-grow value, which is the whole of the proportional fill. */
.elementor-448 .elementor-element-ac2e5c9 { --bubble-w: 246; --bubble-h: 80; }
.elementor-448 .elementor-element-06c2099 { --bubble-w: 280; --bubble-h: 82; }
.elementor-448 .elementor-element-64a5a11 { --bubble-w: 110; --bubble-h: 82; }
.elementor-448 .elementor-element-d1d878d { --bubble-w: 315; --bubble-h: 80; }
.elementor-448 .elementor-element-dfff64a { --bubble-w: 228; --bubble-h: 82; }

.elementor-448 .elementor-element-302c385 > .e-con-inner {
	/* The row, not the viewport, is what the type has to scale against: it is
	   1170px inside a 1440px window but ~708px inside a 768px one, and the
	   theme's gutters make that relationship awkward to restate in vw. */
	container-type: inline-size;

	/* Nothing else belongs in this rule. Elementor's own
	   `.e-con.e-flex > .e-con-inner` matches at the same three-class weight
	   and elementor-frontend.css is enqueued after the child stylesheet, so
	   align-items and justify-content set here are simply overwritten — both
	   are handled where they can actually win, below. */
}

.elementor-448 .elementor-element-302c385 > .e-con-inner > .elementor-widget-heading {
	flex-grow: var(--bubble-w);
	flex-shrink: 1;
	flex-basis: 0;
	aspect-ratio: var(--bubble-w) / var(--bubble-h);

	/* aspect-ratio only gets to set the height if nothing else already has,
	   and something does: the container ships --container-widget-align-self:
	   stretch, which Elementor applies to every widget child, and align-self
	   on the item beats align-items on the row. Left alone it sized all five
	   boxes to the tallest (75.8px), which quietly stretched COMMUNITY and
	   COLLABORATION vertically — 246x80 artwork rendering at ratio 3.000
	   instead of 3.075. Centred instead, each box takes its own height and
	   the bubble *bodies* line up exactly: the three stroked SVGs carry two
	   extra pixels of canvas for the stroke to bleed into (82 tall, body
	   drawn 0.5 to 80.5), so an 80-tall and an 82-tall canvas at the same
	   scale put their 80px bodies on the same line, tails included. */
	align-self: center;

	/* Elementor writes width:auto from the widget's "auto" width setting,
	   which would hold the box at its text width and leave flex-grow nothing
	   to distribute. */
	width: auto;
	max-width: none;

	/* The 10px top/bottom padding was there to give a text-sized pill some
	   height. The height now comes from aspect-ratio, so padding would only
	   squeeze the word inside a box that is already the right shape. */
	padding: 0;

	/* Centres the word in a box that is now much taller and wider than it. */
	display: flex;
	align-items: center;
	justify-content: center;

	background-size: 100% 100%;
}

.elementor-448 .elementor-element-302c385 > .e-con-inner > .elementor-widget-heading > .elementor-heading-title {
	/* The row is one proportional unit, so the type scales with it rather
	   than sitting at a fixed 26px while the bubbles around it shrink. Held
	   fixed, the words reach 83% of their bubbles by a 1024px row and the caps
	   stop reading as padding; scaled, they stay at a constant 76%, which is
	   what the 1170px grid looks like.

	   1090 is that grid less the four 20px gaps, i.e. the width the artwork
	   actually shares at the size the type was specified for, so 26px comes
	   out exact there and every narrower row gets 26px in proportion.

	   COLLABORATION is the word that sets the limit, being the widest relative
	   to its bubble: 222.8px of a 315px bubble. Measure on the page and not in
	   a scratch file if this is ever retuned — the site's Poppins runs about
	   4% wider than a bare Google Fonts embed of the same family and weight,
	   which is the difference between 76% and 79%.

	   min() is only a guard for the container being switched to Full Width; on
	   the 1170px grid the two arguments are equal by construction. */
	font-size: min(26px, calc((100cqw - 80px) * 26 / 1090));

	/* The fit is guaranteed on one line; a wrap would only ever be the first
	   sign of something else going wrong, and it looks far worse than a word
	   sitting a little close to a cap. */
	white-space: nowrap;
}

@media (max-width: 767px) {
	/* Elementor wraps this row on mobile (--flex-wrap-mobile: wrap). Growing
	   from a zero basis then stretches every bubble to the full row width —
	   one ~340px COMMUNITY per line with its word lost in the middle — so the
	   proportional fill is dropped here. Each bubble takes a fixed share of
	   its drawn size, type included, and the five wrap into two or three lines
	   at their proper shapes. */
	/* Centres the wrapped lines, which otherwise sit hard against the left
	   edge of the screen. Set as Elementor's own custom property rather than
	   as justify-content: their `.e-con.e-flex > .e-con-inner` rule reads
	   var(--justify-content) and would win the cascade against a plain
	   declaration here, so this feeds their mechanism instead of fighting it
	   — the same thing the Elementor panel writes. */
	.elementor-448 .elementor-element-302c385 {
		--justify-content: center;
	}

	.elementor-448 .elementor-element-302c385 > .e-con-inner > .elementor-widget-heading {
		--bubble-scale: 0.7;
		flex: 0 0 auto;
		width: calc(var(--bubble-w) * var(--bubble-scale) * 1px);
	}

	.elementor-448 .elementor-element-302c385 > .e-con-inner > .elementor-widget-heading > .elementor-heading-title {
		font-size: calc(26px * var(--bubble-scale));
	}
}


/* ---------------------------------------------------------------------------
   About Us page — "Numbers we are proud of"

   Five counters, each in its own Elementor container inside f5e225f. Desktop
   lays them out as one row; Elementor's mobile setting stacks them one per
   row, which leaves a long thin column of short numbers. Phones get two to a
   row instead, with the odd fifth one centred under the rest.

   The row's direction and wrapping are set through Elementor's own custom
   properties, not as plain flex-direction and flex-wrap. Elementor's
   `.e-con.e-flex > .e-con-inner` rule reads them from var() at the same
   three-class weight as the selector below, and its stylesheet loads after
   this one, so plain properties lose the cascade. Declaring the variables on
   .e-con-inner itself shadows the mobile "column" Elementor sets on the outer
   container, which the inner would otherwise inherit.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-32 .elementor-element-f5e225f > .e-con-inner {
		/* Kept in its own property rather than read from --column-gap: every
		   Elementor container redeclares that for itself, so the counters
		   would each see their own gap instead of the row's. */
		--casastays-stats-gap: 20px;

		--flex-direction: row;
		--flex-wrap: wrap;
		--justify-content: center;
		--row-gap: 32px;
		--column-gap: var(--casastays-stats-gap);
	}

	.elementor-32 .elementor-element-f5e225f > .e-con-inner > .e-con {
		flex: 0 0 auto;
		width: calc((100% - var(--casastays-stats-gap)) / 2);
	}
}


/* ---------------------------------------------------------------------------
   About Us page — tabs as accordions on phones

   The C-A-S-A tabs (about-casa-tabs) and "The Why / What / How"
   (about-why-tabs) are TheGem Tabs widgets. Below 768px TheGem swaps the tab
   strip for a heading above each panel, but styles those headings as if they
   were still tabs: no sign they open or close, and the CASA ones a bare
   letter each. Here each heading becomes a proper accordion row — thin
   dividers, a round chevron button that flips when the panel opens and, on
   the CASA rows, the letter as a badge with the panel's name beside it. The
   name and the close-on-tap behaviour come from js/about-tabs.js.

   Specificity runs high because the competition does: TheGem's heading rules
   carry six classes, and Elementor's per-widget rules for these headings carry
   nine, with !important on the borders. elementor-post-32.css also loads after
   this file, so ties go to Elementor.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	:is(.about-casa-tabs, .about-why-tabs) {
		--casastays-tta-accent: #F47948;
		--casastays-tta-tint: #FDEDE5;
		--casastays-tta-rule: rgba(244, 121, 72, 0.22);
		--casastays-tta-speed: 0.3s;
	}

	/* Both widgets are sized by their content inside their flex rows, and it
	   is the open panel's photo that makes them full width. Close the last
	   panel and the cards shrank to the width of their headings. */
	.elementor-32 .elementor-element.elementor-widget:is(.about-casa-tabs, .about-why-tabs) {
		width: 100%;
	}

	:is(.about-casa-tabs, .about-why-tabs) .gem-tta-panel + .gem-tta-panel {
		border-top: 1px solid var(--casastays-tta-rule);
	}

	/* Elementor draws the desktop tab underline under the open heading too —
	   a 4px bar across the whole card — and reserves the same space, in
	   transparent, under every closed one. The dividers above replace both.
	   !important only because Elementor's own rule has it. */
	.elementor-32 .elementor-element:is(.about-casa-tabs, .about-why-tabs) .gem-tta.gem-tta-general.gem-tta-tabs.gem-tta-color-thegem .gem-tta-panels .gem-tta-panel .gem-tta-panel-heading {
		border-width: 0 !important;
	}

	/* The whole row is the button, open or not — TheGem gives an open heading
	   the default cursor, since under its own behaviour it does nothing. */
	:is(.about-casa-tabs, .about-why-tabs) .gem-tta.gem-tta-general.gem-tta-tabs.gem-tta-color-thegem .gem-tta-panel-heading .gem-tta-panel-title > a {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 16px 20px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	:is(.about-casa-tabs, .about-why-tabs) .gem-tta.gem-tta-general.gem-tta-tabs.gem-tta-color-thegem .gem-tta-panel-heading .gem-tta-panel-title > a:focus-visible {
		outline: 2px solid var(--casastays-tta-accent);
		outline-offset: -2px;
		border-radius: 8px;
	}

	/* The chevron, in a round button pushed to the end of the row. Two baked
	   colours rather than a mask, since the circle behind it changes colour
	   too and a mask would cut that away. */
	:is(.about-casa-tabs, .about-why-tabs) .gem-tta.gem-tta-general.gem-tta-tabs.gem-tta-color-thegem .gem-tta-panel-heading .gem-tta-panel-title > a::after {
		content: "";
		flex: 0 0 auto;
		width: 32px;
		height: 32px;
		margin-left: auto;
		border-radius: 50%;
		background: var(--casastays-tta-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23F47948' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
		transition: transform var(--casastays-tta-speed) ease, background-color var(--casastays-tta-speed) ease;
	}

	:is(.about-casa-tabs, .about-why-tabs) .gem-tta.gem-tta-general.gem-tta-tabs.gem-tta-color-thegem .gem-tta-panel.gem-tta-active .gem-tta-panel-heading .gem-tta-panel-title > a::after {
		background-color: var(--casastays-tta-accent);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		transform: rotate(180deg);
	}

	/* TheGem times its open and close from the panel body's own
	   transition-duration, so this is what slows the slide down a little. */
	:is(.about-casa-tabs, .about-why-tabs) .gem-tta.gem-tta-general.gem-tta-tabs .gem-tta-panels .gem-tta-panel .gem-tta-panel-body {
		transition-duration: var(--casastays-tta-speed);
	}

	/* --- CASA: the letter as a badge. Its colours stay Elementor's — dark
	   when closed, orange when open — and only the disc behind it changes. */
	.about-casa-tabs .gem-tta.gem-tta-general.gem-tta-tabs .gem-tta-panels .gem-tta-panel .gem-tta-panel-heading a .gem-tta-title-text {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--casastays-tta-tint);
		font-size: 20px;
		font-weight: 700;
		line-height: 1;
		transition: background-color var(--casastays-tta-speed) ease, box-shadow var(--casastays-tta-speed) ease;
	}

	.about-casa-tabs .gem-tta.gem-tta-general.gem-tta-tabs .gem-tta-panels .gem-tta-panel.gem-tta-active .gem-tta-panel-heading a .gem-tta-title-text {
		background: #ffffff;
		box-shadow: inset 0 0 0 1.5px var(--casastays-tta-accent);
	}

	.about-casa-tabs .casastays-tta-label {
		color: #080B0C;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		transition: color var(--casastays-tta-speed) ease;
	}

	.about-casa-tabs .gem-tta-panel.gem-tta-active .casastays-tta-label {
		color: var(--casastays-tta-accent);
	}

	/* Elementor's 40px above the photo was spacing under a tab strip. Under
	   its own heading the panel only needs a little air. */
	.about-casa-tabs .gem-tta.gem-tta-general.gem-tta-tabs .gem-tta-panels .gem-tta-panel .gem-tta-panel-body {
		padding: 4px 20px 32px;
	}

	/* --- The Why: Elementor pads the widget 20px inside its card, which set
	   the dividers and chevrons 20px further in than the CASA card's. The
	   panels' own content is inset 21px already, so it still lines up with
	   the headings once the padding goes. */
	.elementor-32 .elementor-element.elementor-widget.about-why-tabs > .elementor-widget-container {
		padding: 0;
	}

	/* Elementor also sets these panels flush, with no padding at all, which
	   ran each panel's last line straight into the next heading. */
	.about-why-tabs .gem-tta.gem-tta-general.gem-tta-tabs .gem-tta-panels .gem-tta-panel .gem-tta-panel-body {
		padding-bottom: 24px;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	:is(.about-casa-tabs, .about-why-tabs) {
		--casastays-tta-speed: 0s;
	}
}


/* ---------------------------------------------------------------------------
   Guest snapshot wall — the "Casa Place" scrapbook row
   Rendered by the [casastays_places] shortcode (inc/places-section.php).

   Read the header of that file before touching anything here. The short
   version: the frames, the rotations and the tags' drop shadows are all baked
   into the exported artwork. Nothing below rotates, frames or shadows anything
   — it only places things. Adding a rotate() to a card would tilt an
   already-tilted photo and drag its frame off the picture.

   The one fact that makes the rest of this file make sense: **every export's
   canvas is the tight bounding box of an already-rotated photo**, so its four
   corners are transparent triangles and its silhouette touches all four edges.
   Measured off the alpha channel, all four photos are the same picture size —
   539 x 723 — and the canvases differ only because the rotations do:

     card 1   808 x 650   landscape, -10.00deg
     card 2   650 x 808   portrait,  +10.00deg
     card 3   803 x 642   landscape,  -9.34deg
     card 4   594 x 769   portrait,   +5.28deg

   Two consequences, both load-bearing:

   1. Adjacent cards must **overlap their boxes** to look tight. Let the boxes
      merely tile and every joint shows a wedge of white, because what meets
      there is two transparent corners, not two photo edges. The three --gap
      values below are negative for exactly this reason.

   2. Because the silhouette touches all four edges, the row's leftmost and
      rightmost *visible* pixels sit exactly on the collage's own edges. So
      spanning the collage across the content grid lines the photos up with the
      banner below and the sections above — no fudge factor.

   The overlaps are not eyeballed. Walking both cards' alpha silhouettes row by
   row at the design's vertical offsets gives the largest overlap that still
   leaves two photos clear of each other:

     joint 1-2   3.8px      joint 2-3   6.5px      joint 3-4   1.7px

   Those are tiny, because neighbouring cards are rotated in *opposite*
   directions: their facing edges splay apart, so two photos come closest at a
   single point and diverge above and below it. Packed only that tightly, every
   joint still showed a wedge of white — which is not what the design does; it
   laps card 2 over card 1 by about 13px. So each joint carries **12px of
   overlap beyond** the clear-air maximum, and that is what the --gap figures
   below encode. It was picked by rendering 0, 12 and 24 side by side against
   the design: at 24 a frame visibly slices across its neighbour.

   Raising the overlap is therefore the knob for "the photos look too far
   apart", and it is not free — past ~12px it stops reading as a scrapbook pile
   and starts looking like a mistake.

   Card widths keep the design's relative sizes (368 : 295 : 306 : 312) and the
   whole row is then scaled by 0.949 so that widths minus overlaps land on
   exactly 100% of the grid. Change one --w and the row no longer fills it, so
   re-run the solve rather than nudging a single number.
   --------------------------------------------------------------------------- */
.casastays-places {
	/* The content grid, so the row lines up with the banner below it and the
	   sections above. Earlier this section deliberately broke out to 1280px —
	   the design's own width — which put the end photos out in the page gutter
	   past every neighbouring section's edge. Aligning won that argument. */
	--casastays-places-collage-max: 1170px;

	/* Clearance for the tags, which hang off the row top and bottom. Derived,
	   not eyeballed: tag 2 clears the top of the row by 11.7% of card 2's
	   height, which is 3.4% of the collage width, and tag 3 is the lowest thing
	   in the section at 1.4% below the row. Both carry a little slack. Retune if
	   a --w, a --dy or a --label-y changes. */
	--casastays-places-pad-top: 3.6%;
	--casastays-places-pad-bottom: 1.5%;

	/* Space to the sections either side. The wall carries no panel or
	   background of its own, so this is the only thing separating it from the
	   call-to-action banner below it. */
	padding-bottom: 72px;
}

.casastays-places__title {
	margin: 0 0 44px;
	text-align: center;
	font-size: clamp(30px, 4vw, 54px);
	line-height: 1.15;
	/* TheGem uppercases headings site-wide, and the tags in the artwork are
	   already the only shouting this section needs. */
	text-transform: none;
}

/* Plain `width: 100%` inside the Elementor container, which is already the
   content grid. No `100vw` sizing and no margin-left/translateX breakout: both
   existed to make the row *wider* than its parent, and the row is now supposed
   to match it. Following the container instead of the viewport is also what
   keeps the alignment true at every width, including the theme's gutters. */
.casastays-places__collage {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: var(--casastays-places-collage-max);
	margin-inline: auto;
	padding: var(--casastays-places-pad-top) 0 var(--casastays-places-pad-bottom);
	list-style: none;
}

/* TheGem's content styles add bullets and margins to any ul inside page
   content, so both are reset on the item as well as the list. */
.casastays-places__item {
	--w: 25%;
	--gap: 0%;
	--dy: 0%;
	--z: 1;
	--label-w: 74%;
	--label-x: 0%;
	--label-y: 0%;

	/* The containing block for this card's tag. Every --label-* below is a
	   share of this box, so a tag follows its own photo when the card is
	   resized instead of drifting across it. */
	position: relative;

	flex: 0 0 var(--w);
	/* Flex items default to min-width:auto, which lets the photo's intrinsic
	   width override the basis above and push the row wider than the collage.
	   The cards are deliberately sized as a share of it, so the content-based
	   minimum is not wanted. */
	min-width: 0;
	margin: var(--dy) 0 0 var(--gap);
	padding: 0;
	list-style: none;

	/* Ascending across the row, so a tag that reaches back over its left-hand
	   neighbour — 3's and 4's both do — paints on top of it. position:relative
	   plus a z-index makes each card its own stacking context, which is what
	   keeps a tag above the *whole* of the card behind it rather than just
	   above its own photo. */
	z-index: var(--z);
}

.casastays-places__item::before {
	display: none;
}

/* --- Per-card arrangement, keyed to the design position rather than
   :nth-child(), so a dropped photo leaves a gap instead of shifting every
   later card onto the wrong numbers. See casastays_places_cards().

   --gap is the space *before* a card and is negative at every joint: see the
   header for why the boxes have to overlap. The four --w plus the three --gap
   sum to exactly 100%, so the row fills the grid rather than relying on flex to
   distribute anything.

   --dy is each card's top measured down from the topmost card (4), which is why
   4's is zero and the row is laid out from flex-start rather than centred.

   Tag boxes off the design's 1x render, for anyone re-deriving --label-*:

     1   263 x 66  at (8, 373)     2   217 x 67  at (352, 20)
     3   233 x 139 at (640, 344)   4   237 x 104 at (940, 22)

   --label-w is the tag's width over its card's width; --label-x and --label-y
   are its offset from the card's top left over the card's width and height. All
   three are scale-invariant, so they survived the rescale to the content grid
   untouched. Tag 3's box is much taller than the pill you can see in it — that
   export carries ~39px of transparent space above the pill — which is why its
   --label-y looks too small for where the tag actually lands. --- */
.casastays-places__item--1 { --w: 29.85%; --gap: 0%;      --dy: 2.51%; --z: 1; --label-w: 71.5%; --label-x: 2.2%;  --label-y: 94.6%; }
.casastays-places__item--2 { --w: 23.93%; --gap: -1.28%;  --dy: 0.08%; --z: 2; --label-w: 73.6%; --label-x: 1.7%;  --label-y: -11.7%; }
.casastays-places__item--3 { --w: 24.82%; --gap: -1.50%;  --dy: 6.00%; --z: 3; --label-w: 76.1%; --label-x: -5.6%; --label-y: 84.9%; }
.casastays-places__item--4 { --w: 25.30%; --gap: -1.11%;  --dy: 0%;    --z: 4; --label-w: 76.0%; --label-x: -8.7%; --label-y: -9.9%; }

.casastays-places__photo {
	display: block;
	width: 100%;
	height: auto;
}

.casastays-places__label {
	position: absolute;
	top: var(--label-y);
	left: var(--label-x);
	width: var(--label-w);
	height: auto;

	/* TheGem caps content images at max-width:100%, measured against the card,
	   so it clamps nothing at these widths today — but a tag is allowed to be
	   wider than its photo if the design ever asks for it, and the clamp would
	   quietly cap it. */
	max-width: none;

	/* Nothing here is interactive, and the tags overhang their neighbours, so
	   they must not swallow a click or a text selection meant for the photo
	   underneath. */
	pointer-events: none;
}

.casastays-places__notice {
	margin: 0;
	text-align: center;
}

/* Four across holds all the way down to phone width, and the row keeps filling
   its container the whole way, so it stays flush with the sections above and
   below at every size. That alignment is why there is no max-width here: an
   earlier version capped the row at 720px through the tablet range to stop the
   cards growing, and the cost was a section visibly inset from the banner by
   ~80px on either side at 1000px. Following the container is the priority.

   Everything is a share of the collage, so the row simply shrinks: card 2's tag
   renders 206px on the desktop grid and ~135px at a 768px viewport, against
   250px and 206px as drawn. That is the floor worth accepting for artwork — its
   wording is outlines, not type, so it cannot be held at size while the card it
   is pinned to shrinks.

   Below 768 it becomes two by two, which buys the tags back most of their drawn
   size (~240px at 767) at the cost of a taller section. The per-card --gap and
   --dy are dropped rather than retuned there: they place a card against its
   neighbours *in a single row*, and there is no sensible reading of "the space
   before card 3" once card 3 starts a new line. Each --label-* still applies,
   so every tag keeps its designed position on its own card. */
@media (max-width: 1023px) {
	.casastays-places {
		padding-block: 56px;
	}

	.casastays-places__title {
		margin-bottom: 32px;
	}
}

@media (max-width: 767px) {
	.casastays-places {
		/* Both bigger than the desktop pair, because a card is now ~44% of the
		   collage rather than ~25%, and a tag's overhang is a share of its card. */
		--casastays-places-pad-top: 6%;
		--casastays-places-pad-bottom: 3%;
	}

	.casastays-places__collage {
		flex-wrap: wrap;
		/* The row gap clears two overhangs at once, not one: the first line's
		   tags hang below their cards (card 1's reaches 17% of its own height
		   past the bottom edge) and the second line's hang above theirs. */
		row-gap: 13%;
		column-gap: 6%;
	}

	.casastays-places__item {
		--w: 44%;

		margin: 0;
	}
}

@media (max-width: 479px) {
	.casastays-places {
		padding-block: 40px;
	}

	.casastays-places__collage {
		row-gap: 15%;
		column-gap: 4%;
	}

	/* --w deliberately stays at the 44% set above rather than growing to fill the
	   narrower gap. Tags 3 and 4 hang *left* of their own card (--label-x is
	   negative), and card 3 starts the second row, so its tag is the first thing
	   to leave the viewport: at 46% the row left only ~8px of slack either side
	   and the tag clipped by 2px at 390. 44% keeps ~15px there. Widening the
	   cards on phones costs a clipped tag, which is worse than 6px of type. */
}


/* ---------------------------------------------------------------------------
   The property listing — /properties/
   Rendered by archive-property.php via inc/properties-archive-views.php,
   with js/properties-archive.js doing nothing but tidying the submitted URL.

   The whole page is a GET form and a grid: no script is involved in filtering,
   so every state here is reachable with JavaScript off and every filtered view
   is a real URL. The card is a separate component from the carousel card
   (.casastays-properties__card) on purpose — this one carries the amenity icon
   row and bleeds its photo to the card edge.
   --------------------------------------------------------------------------- */
.casastays-listing {
	--casastays-listing-bg: #FAF6ED;
	--casastays-listing-accent: #F47948;
	--casastays-listing-amber: #F5A623;
	--casastays-listing-ink: #1A1A1A;
	--casastays-listing-muted: #6B6B6B;
	--casastays-listing-line: #E3DACB;
	--casastays-listing-card-radius: 14px;
	--casastays-listing-gap: 40px;
	--casastays-listing-columns: 3;

	padding-block: 34px 80px;
}

/* The design's cream ground. Painted on the wrapper as well as <body> because
   TheGem gives .main-content its own white background, which would otherwise
   sit on top of the body colour for the full height of the page. The search
   results and 404 pages share it (inc/search-page.php). */
body.casastays-listing-page,
body.casastays-listing-page .main-content,
body.casastays-listing-page .block-content,
body.casastays-search-page,
body.casastays-search-page .main-content,
body.casastays-search-page .block-content {
	background-color: #F8F3E7;
}


/* Banner ------------------------------------------------------------------ */

/* The artwork is a transparent cut-out, so the panel, its radius and the copy
   are all CSS. overflow stays visible: the figure is taller than the panel and
   the head is meant to break past the top edge, exactly as in the design. */
.casastays-banner {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	/* Deliberately shorter than the figure is tall — see __figure below. */
	min-height: clamp(260px, 25vw, 356px);
	/* Right padding clears the figure so a long heading wraps before it
	   collides, rather than running underneath the beanbag. */
	padding: 44px 45% 44px 46px;
	border-radius: 12px;
	background: var(--casastays-listing-amber);
	/* Clearance for the overhanging head, so it never meets the site header. */
	margin-top: 44px;
}

.casastays-banner__copy {
	position: relative;
	z-index: 1;
}

.casastays-banner__heading {
	font-size: 40px;
	line-height: 54px;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.casastays-banner__text {
	max-width: 90%;
	margin: 0;
	color: rgba(255, 255, 255, 0.94);
	font-size: 20px;
	line-height: 1.5;
	/* Theme Options capitalise body copy site-wide, which turned this into
	   Title Case. The design sets it as a sentence. */
	text-transform: none;
}

/* Sized to be taller than the panel on purpose: anchored at bottom: 0, the
   surplus height is what lifts the head past the top edge the way the design
   has it. At 50% of a 1170px container the cut-out is ~386px against a 356px
   panel, so the overhang is ~30px and scales with the viewport rather than
   being a fixed offset that only lands at one width.

   The cut-out carries transparent margins of its own, which is why bottom: 0
   sets the shoes on the panel edge instead of floating them above it. */
.casastays-banner__figure {
	position: absolute;
	right: -40px;
	width: min(60%, 680px);
	pointer-events: none;
}

.casastays-banner__image {
	display: block;
	width: 100%;
	height: auto;
}


/* Filter bar -------------------------------------------------------------- */

.casastays-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 80px 0 60px;
}

/* display: contents puts the fields and the actions in one wrapping row.
   As a box of its own, the controls group took the full width as soon as one
   field wrapped, and Search + Clear All dropped to a row of their own beneath
   it on tablet. The phone layout turns this back into a grid. */
.casastays-filters__controls {
	display: contents;
}

.casastays-filters__field {
	margin: 0;
}

/* appearance: none so the pill, the border radius and the chevron are ours;
   the control underneath is still a native <select>, which is what keeps the
   keyboard behaviour and the phone's native picker intact. */
.casastays-filters__select {
	box-sizing: border-box;
    min-width: 185px;
    height: 50px;
    padding: 0 42px 0 16px;
    border: 1px solid #f8f4e7;
    border-radius: 12px;
    background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
    background-position: right 16px center;
    color: #491715;
    font-size: 18px;
    font-weight: 300;
    line-height: 42px;
    text-transform: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.casastays-filters__select:focus-visible {
	outline: 2px solid var(--casastays-listing-accent);
	outline-offset: 1px;
}

/* A chosen facet reads as chosen even before the page reloads — the class is
   set on render and kept in step by the change handler. */
.casastays-filters__field.is-active .casastays-filters__select {
	border-color: var(--casastays-listing-accent);
	font-weight: 500;
}

/* margin-left: auto keeps the actions pinned right, as space-between on the
   form used to, on whichever row they end up on. */
.casastays-filters__actions {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: auto;
}

.casastays-filters__submit {
	height: 50px;
    padding: 0 34px;
    border: 0;
    border-radius: 12px;
    background: var(--casastays-listing-accent);
    color: #ffffff;
    font-size: 22px;
    line-height: 44px;
    font-weight: 500;
    text-transform: none;
    cursor: pointer;
	transition: background-color 0.25s ease;
}

.casastays-filters__submit:hover,
.casastays-filters__submit:focus-visible {
	background: #e0663a;
}

.casastays-filters__clear {
	color: #491715;
    font-size: 20px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.casastays-filters__clear:hover,
.casastays-filters__clear:focus-visible {
	color: var(--casastays-listing-accent);
}

@media (max-width: 767px) { 
	.casastays-banner__heading{
		font-size: 26px;
    	line-height: 40px;
	}
}

/* Result summary and chips ------------------------------------------------ */

.casastays-listing__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 22px;
}

.casastays-listing__count {
	margin: 0;
	color: var(--casastays-listing-muted);
	font-size: 14px;
	text-transform: none;
}

.casastays-listing__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.casastays-listing__chips li::before {
	display: none;
}

.casastays-listing__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid var(--casastays-listing-accent);
	border-radius: 999px;
	background: #ffffff;
	color: var(--casastays-listing-accent);
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
	text-transform: none;
}

.casastays-listing__chip:hover,
.casastays-listing__chip:focus-visible {
	background: var(--casastays-listing-accent);
	color: #ffffff;
	text-decoration: none;
}

.casastays-listing__chip-x {
	font-size: 16px;
	line-height: 1;
}


/* Grid -------------------------------------------------------------------- */

.casastays-listing__grid {
	display: grid;
	grid-template-columns: repeat(var(--casastays-listing-columns), minmax(0, 1fr));
	gap: var(--casastays-listing-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* TheGem draws its own bullet on every list item through ::before. */
.casastays-listing__item::before {
	display: none;
}

.casastays-listing__item {
	display: flex;
	margin: 0;
	padding: 0;
}


/* Card -------------------------------------------------------------------- */

.casastays-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border-radius: var(--casastays-listing-card-radius);
	background: #ffffff;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
	transition: background-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}

/* focus-within as well as hover, so tabbing to the card's own links produces
   the same state a mouse does rather than leaving the keyboard user on a card
   that never lights up. */
.casastays-card:hover,
.casastays-card:focus-within {
	background: var(--casastays-listing-accent);
	box-shadow: 0 12px 30px rgba(244, 121, 72, 0.28);
	transform: translateY(-4px);
	border: 1px solid var(--casastays-listing-accent);
}

.casastays-card__media {
	display: block;
	overflow: hidden;
	/* 4:3, the ratio the property photography is shot to. Fixed here rather
	   than left to the image, so the names of three side-by-side cards start
	   on the same line. */
	aspect-ratio: 4 / 3;
	background: #ededed;
}

.casastays-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.casastays-card:hover .casastays-card__image {
	transform: scale(1.04);
}

.casastays-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 18px;
	padding: 16px 18px 18px;
}

.casastays-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.casastays-card__name {
	margin: 0;
	font-size: 28px;
    line-height: 1.3;
    font-weight: 400;
	/* The site h2 colour is cream (--thegem-to-h2-color) and would be invisible
	   on the white card, so the colour is set here rather than inherited. */
	text-transform: none;
}

.casastays-card__name a {
	color: var(--casastays-listing-ink);
	text-decoration: none;
}

.casastays-card__area {
	margin-top: 10px;
    color: #000;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 300;
	text-transform: none;
}

.casastays-card__amenities {
	display: flex;
	flex: 0 0 auto;
	gap: 9px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.casastays-card__amenities li::before {
	display: none;
}

.casastays-card__amenity {
	margin: 0;
	padding: 0;
}

/* The icon SVGs are solid black fills, so weight is set with opacity here and
   flipped to white on the hovered card with brightness(0) invert(1) — which
   works whatever colour a future icon is drawn in. */
.casastays-card__amenity img {
	display: block;
	width: 18px;
	height: 18px;
	object-fit: contain;
	opacity: 0.42;
	transition: opacity 0.28s ease, filter 0.28s ease;
}

/* margin-top: auto pins the row to the bottom, so the buttons of three cards
   line up even when one property has a two-line name. */
.casastays-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.casastays-card__book {
	flex: 0 0 auto;
	padding: 9px 22px;
	border: 1px solid var(--casastays-listing-accent);
	border-radius: 8px;
	background: transparent;
	color: var(--casastays-listing-accent);
	font-size: 24px;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
	text-transform: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.casastays-card__price {
	margin: 0;
    color: #000;
    font-size: 20px;
    line-height: 1.35;
    text-align: right;
	/* Theme Options capitalise small print, which rendered this "Rent Start At". */
	text-transform: none;
}

.casastays-card__price-label,
.casastays-card__price-value {
	display: block;
}

.casastays-card__price-value {
	color: #000;
	font-size: 20px;
	font-weight: 600;
}

/* The hovered card, per the design: the photo keeps its own colours and
   everything below it inverts onto the accent. */
.casastays-card:hover .casastays-card__name a,
.casastays-card:focus-within .casastays-card__name a,
.casastays-card:hover .casastays-card__price-value,
.casastays-card:focus-within .casastays-card__price-value {
	color: #ffffff;
}

.casastays-card:hover .casastays-card__area,
.casastays-card:focus-within .casastays-card__area,
.casastays-card:hover .casastays-card__price,
.casastays-card:focus-within .casastays-card__price {
	color: rgba(255, 255, 255, 0.88);
}

.casastays-card:hover .casastays-card__amenity img,
.casastays-card:focus-within .casastays-card__amenity img {
	opacity: 0.95;
	filter: brightness(0) invert(1);
}

/* Reversed out on the accent card. Holding the same colours on the button's
   own :hover is deliberate — the card is already the hovered surface, and a
   second colour change under the cursor reads as a glitch. */
.casastays-card:hover .casastays-card__book,
.casastays-card:focus-within .casastays-card__book,
.casastays-card:hover .casastays-card__book:hover,
.casastays-card:hover .casastays-card__book:focus-visible {
	border-color: #ffffff;
	background: #ffffff;
	color: var(--casastays-listing-accent);
	text-decoration: none;
}

/* On a card that is not hovered — a keyboard user arriving on the button — the
   button still fills the way the carousel's does. */
.casastays-card__book:hover,
.casastays-card__book:focus-visible {
	background: var(--casastays-listing-accent);
	color: #ffffff;
	text-decoration: none;
}


/* Empty state ------------------------------------------------------------- */

.casastays-listing__empty {
	padding: 64px 24px;
	border-radius: var(--casastays-listing-card-radius);
	background: #ffffff;
	text-align: center;
}

.casastays-listing__empty-title {
	margin: 0 0 6px;
	color: var(--casastays-listing-ink);
	font-size: 18px;
	text-transform: none;
}

.casastays-listing__empty-note {
	margin: 0;
	color: var(--casastays-listing-muted);
	font-size: 14px;
	text-transform: none;
}

.casastays-listing__empty-clear {
	display: inline-block;
	margin-top: 16px;
	padding: 11px 30px;
	border-radius: 8px;
	background: var(--casastays-listing-accent);
	color: #ffffff;
	font-size: 14px;
	text-decoration: none;
	text-transform: none;
}

.casastays-listing__empty-clear:hover,
.casastays-listing__empty-clear:focus-visible {
	background: #e0663a;
	color: #ffffff;
	text-decoration: none;
}


/* Pagination -------------------------------------------------------------- */

.casastays-listing__pagination {
	margin-top: 44px;
}

.casastays-listing__pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.casastays-listing__pagination li::before {
	display: none;
}

.casastays-listing__pagination li {
	margin: 0;
	padding: 0;
}

.casastays-listing__pagination .page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--casastays-listing-line);
	border-radius: 8px;
	background: #ffffff;
	color: var(--casastays-listing-ink);
	font-size: 14px;
	text-decoration: none;
}

.casastays-listing__pagination .page-numbers li a.page-numbers:hover,
.casastays-listing__pagination .page-numbers li a.page-numbers:focus-visible {
	border-color: var(--casastays-listing-accent);
	color: var(--casastays-listing-accent);
}

.casastays-listing__pagination .page-numbers li .page-numbers.current {
	border-color: var(--casastays-listing-accent);
	background: var(--casastays-listing-accent);
	color: #ffffff;
}


/* Responsive -------------------------------------------------------------- */

@media (max-width: 1100px) {
	.casastays-banner {
		padding-right: 48%;
	}
}

@media (max-width: 900px) {
	.casastays-listing {
		--casastays-listing-columns: 2;
		--casastays-listing-gap: 20px;
	}

	/* The figure stops being an overlay and becomes the second row: below this
	   width there is no column of panel left for it to sit beside without the
	   heading wrapping to five lines. */
	.casastays-banner {
		flex-direction: column;
		min-height: 0;
		padding: 36px 32px 0;
		margin-top: 0;
	}

	.casastays-banner__figure {
		position: static;
		width: min(100%, 420px);
		margin: 12px auto 0;
	}
}

@media (max-width: 767px) {
	.casastays-listing {
		--casastays-listing-columns: 1;
		padding-block: 24px 56px;
	}

	.casastays-filters {
		display: block;
	}

	.casastays-filters__controls {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.casastays-filters__select {
		width: 100%;
		min-width: 0;
	}

	.casastays-filters__actions {
		justify-content: space-between;
		margin-top: 14px;
	}

	.casastays-filters__submit {
		flex: 1 1 auto;
	}

	/* The same footer as the home page carousel on phones: the price on one
	   line, then a full-width button under it. column-reverse rather than
	   reordered markup, so desktop keeps its button-left, price-right row from
	   the same source. */
	.casastays-card__footer {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 20px;
	}

	.casastays-card__book {
		padding-top: 14px;
		padding-bottom: 14px;
		text-align: center;
	}

	.casastays-card__price {
		text-align: left;
	}

	/* "Rent Start at ₹8,000*" on one line. The whitespace between the two
	   spans in the markup supplies the space. */
	.casastays-card__price-label,
	.casastays-card__price-value {
		display: inline;
	}
}

@media (max-width: 479px) {
	.casastays-banner {
		padding: 28px 22px 0;
	}

	.casastays-filters__controls {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.casastays-card,
	.casastays-card__image,
	.casastays-card__amenity img {
		transition: none;
	}

	.casastays-card:hover,
	.casastays-card:focus-within {
		transform: none;
	}

	.casastays-card:hover .casastays-card__image {
		transform: none;
	}
}


/* ---------------------------------------------------------------------------
   Search results and the 404 page
   Rendered by search.php and 404.php via inc/search-page.php.

   Built on the listing rather than beside it. Both templates wrap their
   content in .casastays-listing, so the listing's tokens, grid columns, card
   and pagination rules above apply unchanged, and the 404 banner is the
   listing banner. What follows is only what the listing has no equivalent
   for: the results header, the search field, the area suggestion, the card
   for pages and the dead-end panel.
   --------------------------------------------------------------------------- */
.casastays-search {
	/* The location icons come from the menu panel, whose hover colours read
	   these. They are declared on the panel's overlay, which is not an
	   ancestor here, so without them the hover would lose its accent. */
	--casastays-locator-accent: var(--casastays-listing-accent);
	--casastays-locator-ink: var(--casastays-listing-ink);
}


/* Results header ---------------------------------------------------------- */

.casastays-search__header {
	margin: 40px 0 28px;
}

.casastays-search__eyebrow {
	margin: 0 0 8px;
	color: var(--casastays-listing-accent);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* The query is shown as typed. Theme Options capitalise h1 and space its
   letters, which would restyle what the visitor typed. overflow-wrap keeps a
   long unbroken query from pushing the page wider than a phone. */
.casastays-search__title {
	margin: 0;
	color: #000000;
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: anywhere;
}

.casastays-search__count {
	margin: 10px 0 0;
	color: var(--casastays-listing-muted);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.4;
	text-transform: none;
}


/* Search field ------------------------------------------------------------ */

/* The filter bar's language: a white field and the accent button beside it,
   both 12px-rounded, on the cream ground. */
.casastays-search-form {
	display: flex;
	gap: 12px;
	margin: 0 0 56px;
}

.casastays-search-form__field {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.casastays-search-form__icon {
	position: absolute;
	top: 50%;
	left: 20px;
	color: #491715;
	opacity: 0.55;
	transform: translateY(-50%);
	pointer-events: none;
}

/* Two classes for the same reason as the menu panel's field: TheGem's
   generated CSS loads after this file and paints every search input grey at
   0,0,1,1, which a single class would tie and lose. */
.casastays-search-form .casastays-search-form__input {
	display: block;
	width: 100%;
	height: 56px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 20px 0 54px;
	border: 1px solid #F3B49A;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: none;
	color: var(--casastays-listing-ink);
	font-size: 18px;
	font-weight: 300;
	line-height: normal;
	text-transform: none;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.casastays-search-form .casastays-search-form__input::placeholder {
	color: #9a9a9a;
	opacity: 1;
	text-transform: none;
}

.casastays-search-form .casastays-search-form__input:focus {
	border-color: var(--casastays-listing-accent);
	box-shadow: 0 0 0 3px rgba(244, 121, 72, 0.18);
	outline: none;
}

.casastays-search-form .casastays-search-form__submit {
	flex: 0 0 auto;
	height: 56px;
	margin: 0;
	padding: 0 40px;
	border: 0;
	border-radius: 12px;
	background: var(--casastays-listing-accent);
	color: #ffffff;
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.casastays-search-form .casastays-search-form__submit:hover,
.casastays-search-form .casastays-search-form__submit:focus-visible {
	background: #e0663a;
}

.casastays-search-form .casastays-search-form__submit:focus-visible {
	outline: 2px solid var(--casastays-listing-ink);
	outline-offset: 2px;
}


/* Area suggestion --------------------------------------------------------- */

.casastays-search__place {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	margin: -24px 0 56px;
	padding: 18px 18px 18px 26px;
	border: 1px solid #F3B49A;
	border-left: 4px solid var(--casastays-listing-accent);
	border-radius: 12px;
	background: #ffffff;
}

.casastays-search__place-text {
	color: var(--casastays-listing-ink);
	font-size: 20px;
	font-weight: 300;
	line-height: 1.4;
	text-transform: none;
}

.casastays-search__place-text strong {
	font-weight: 600;
}

.casastays-search__place-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 26px;
	border-radius: 12px;
	background: var(--casastays-listing-accent);
	color: #ffffff;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	text-transform: none;
	transition: background-color 0.25s ease;
}

.casastays-search__place-link:hover,
.casastays-search__place-link:focus-visible {
	background: #e0663a;
	color: #ffffff;
	text-decoration: none;
}


/* Result groups ----------------------------------------------------------- */

.casastays-search__group + .casastays-search__group {
	margin-top: 64px;
}

.casastays-search__group-title {
	margin: 0 0 28px;
	color: #000000;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.2;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}


/* Page result card -------------------------------------------------------- */

/* The listing card's frame — radius, shadow, lift — without its accent
   inversion. The property cards beside it are the ones meant to draw the eye;
   a page lights its border and title instead. */
.casastays-result {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: var(--casastays-listing-card-radius);
	background: #ffffff;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
	transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}

.casastays-result:hover,
.casastays-result:focus-within {
	border-color: var(--casastays-listing-accent);
	box-shadow: 0 12px 30px rgba(244, 121, 72, 0.18);
	transform: translateY(-4px);
}

.casastays-result__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #ededed;
}

.casastays-result__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.casastays-result__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 24px 24px 22px;
}

.casastays-result__type {
	margin: 0;
	color: var(--casastays-listing-accent);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* The site h3 colour is white (--thegem-to-h3-color), so it is set here. */
.casastays-result__title {
	margin: 0;
	font-size: 26px;
	line-height: 1.3;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.casastays-result__title a {
	color: var(--casastays-listing-ink);
	text-decoration: none;
	transition: color 0.25s ease;
}

/* The stretched link: the title's ::after covers the card, so the whole card
   is one link and one tab stop. */
.casastays-result__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.casastays-result__title a:focus-visible {
	outline: none;
}

/* Inset, because the card clips anything drawn outside it. */
.casastays-result__title a:focus-visible::after {
	outline: 2px solid var(--casastays-listing-accent);
	outline-offset: -2px;
}

.casastays-result:hover .casastays-result__title a,
.casastays-result:focus-within .casastays-result__title a {
	color: var(--casastays-listing-accent);
}

.casastays-result__summary {
	margin: 0;
	color: #4A4A4A;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 300;
	text-transform: none;
}

/* margin-top: auto pins it to the foot, so a row of cards lines up whatever
   each summary's length. */
.casastays-result__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
	color: var(--casastays-listing-accent);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: none;
}

.casastays-result__arrow {
	transition: transform 0.25s ease;
}

.casastays-result:hover .casastays-result__arrow,
.casastays-result:focus-within .casastays-result__arrow {
	transform: translateX(4px);
}


/* 404 banner -------------------------------------------------------------- */

/* The listing banner's own rules do the layout. These only cover what an h1
   brings with it — Theme Options give h1 its own colour and letter spacing —
   and the eyebrow the listing has no use for. */
.casastays-search__banner .casastays-banner__heading {
	color: #ffffff;
	letter-spacing: 0;
}

.casastays-search__banner-eyebrow {
	margin: 0 0 10px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* No artwork resolved: give the copy the width the figure would have had. */
.casastays-search__banner--plain {
	padding-right: 46px;
}

.casastays-search--404 .casastays-search-form {
	margin: 56px 0 48px;
}


/* Dead-end panel ---------------------------------------------------------- */

.casastays-search__suggest {
	padding: 52px 42px 48px;
	border-radius: var(--casastays-listing-card-radius);
	background: #ffffff;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
	text-align: center;
}

.casastays-search__suggest-title {
	margin: 0 0 12px;
	color: #000000;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.25;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.casastays-search__suggest-text {
	max-width: 600px;
	margin: 0 auto 40px;
	color: var(--casastays-listing-muted);
	font-size: 18px;
	line-height: 1.6;
	font-weight: 300;
	text-transform: none;
}

.casastays-search__suggest .casastays-locator__grid {
	max-width: 760px;
	margin: 0 auto;
}

.casastays-search__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 48px 0 0;
}

.casastays-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	box-sizing: border-box;
	padding: 0 32px;
	border: 1px solid var(--casastays-listing-accent);
	border-radius: 12px;
	background: var(--casastays-listing-accent);
	color: #ffffff;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.casastays-search__button:hover,
.casastays-search__button:focus-visible {
	border-color: #e0663a;
	background: #e0663a;
	color: #ffffff;
	text-decoration: none;
}

.casastays-search__button--ghost {
	background: transparent;
	color: var(--casastays-listing-accent);
}

.casastays-search__button--ghost:hover,
.casastays-search__button--ghost:focus-visible {
	border-color: var(--casastays-listing-accent);
	background: var(--casastays-listing-accent);
}


/* Responsive -------------------------------------------------------------- */

@media (max-width: 767px) {
	.casastays-search__header {
		margin: 16px 0 22px;
	}

	.casastays-search__count {
		font-size: 16px;
	}

	.casastays-search-form {
		margin-bottom: 40px;
	}

	.casastays-search-form .casastays-search-form__input,
	.casastays-search-form .casastays-search-form__submit {
		height: 52px;
	}

	.casastays-search-form .casastays-search-form__input {
		padding-left: 48px;
		font-size: 16px;
	}

	.casastays-search-form__icon {
		left: 17px;
	}

	.casastays-search-form .casastays-search-form__submit {
		padding: 0 24px;
		font-size: 20px;
	}

	.casastays-search--404 .casastays-search-form {
		margin: 32px 0 32px;
	}

	.casastays-search__place {
		margin: -16px 0 40px;
		padding: 18px;
	}

	.casastays-search__place-text {
		font-size: 18px;
	}

	.casastays-search__group + .casastays-search__group {
		margin-top: 48px;
	}

	.casastays-search__group-title {
		margin-bottom: 20px;
	}

	.casastays-result__body {
		padding: 20px 20px 18px;
	}

	.casastays-result__title {
		font-size: 24px;
	}

	.casastays-search__suggest {
		padding: 36px 20px 32px;
	}

	.casastays-search__suggest-text {
		margin-bottom: 32px;
		font-size: 16px;
	}

	.casastays-search__actions {
		margin-top: 36px;
	}

	.casastays-search__banner--plain {
		padding-bottom: 36px;
	}
}

/* Phones: the button drops under the field rather than squeezing it, and
   every call to action goes full width so it is a thumb-sized target. */
@media (max-width: 479px) {
	.casastays-search-form {
		flex-direction: column;
		gap: 10px;
	}

	.casastays-search-form .casastays-search-form__submit {
		width: 100%;
	}

	.casastays-search__place {
		flex-direction: column;
		align-items: stretch;
	}

	.casastays-search__place-link,
	.casastays-search__button {
		justify-content: center;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.casastays-result,
	.casastays-result__arrow,
	.casastays-search-form .casastays-search-form__input {
		transition: none;
	}

	.casastays-result:hover,
	.casastays-result:focus-within,
	.casastays-result:hover .casastays-result__arrow,
	.casastays-result:focus-within .casastays-result__arrow {
		transform: none;
	}
}


/* ---------------------------------------------------------------------------
   The header menu, on the content grid

   The design reads as three things, not five: "About Us" and "Properties" as a
   pair against the left edge of the 1170px content grid, "Community" and the
   "Book Now" button as a pair against the right edge, and the logo in the
   middle. TheGem's `logo-position-menu_center` produces none of it.

   Left alone the menu is one shrink-to-fit `inline-block` list that
   thegem-menu_init.js then *slides sideways* — it measures the logo item and
   writes `position: relative; left: <n>px` onto `#primary-menu` as an inline
   style until the logo lands on the page's centre line
   (thegem-elementor/js/thegem-menu_init.js:153-170). Centring the logo is all
   it is trying to do; where the first and last items end up is whatever falls
   out of that, which is why they sat well inside the grid.

   So the list becomes a flex row the width of its container. Every item keeps
   its drawn width, which is what holds each pair together, and the logo takes
   `margin: auto` on both sides: one auto margin either side of a single item
   splits all the leftover room evenly between them, which pushes the two pairs
   out to the grid edges and leaves the logo midway between them.

   Midway between the pairs is not the same as the middle of the grid — the
   right pair is the wider of the two, so the logo sits a little left of the
   page's centre line. That is what the design does as well, and it is the
   honest consequence of grouping: the alternative is to space the four items
   evenly, which centres the logo exactly but puts a corridor of white between
   "About Us" and "Properties" that the design does not have.

   Two `!important`s, each aimed at something a plain declaration cannot beat:
   the inline `left` the script writes, and TheGem's own `!important` on the
   logo item's gutters. The `#site-header` prefixes are aimed at
   uploads/thegem/css/custom-*.css, which is generated from Theme Options,
   enqueued *after* this stylesheet, and carries a hand-written
   `.header-style-3 #primary-menu.no-responsive > li { padding: 33px 20px }`.

   1213px is TheGem's own boundary for this layout, not a number picked to
   taste: it is the first width at which the in-menu logo is not
   `display: none` — uploads/thegem/css/custom-*.css hides it all the way up
   to and including 1212 — and it is the width TheGem's own preload rule uses.
   Narrower than that there is no logo in the row at all, and TheGem centres
   the four items that remain; that is a different layout, and it is left
   alone. `#primary-menu.no-responsive` guards the rest: the script strips that
   class when it rebuilds the same markup as the mobile drawer
   (thegem-menu_init.js:711), so none of this can reach the drawer either.
   --------------------------------------------------------------------------- */
@media (min-width: 1213px) {
	#site-header .header-main.logo-position-menu_center:not(.header-layout-fullwidth_hamburger) #primary-navigation {
		width: 100%;
	}

	#site-header .header-main.logo-position-menu_center #primary-menu.no-responsive {
		display: flex;
		align-items: center;
		width: 100%;
		/* TheGem's -20px bleed compensated a 20px link padding this header
		   style does not use; with the row measured to the container it would
		   just hang the ends off the grid. */
		margin: 0;
		position: static !important;
		left: auto !important;
	}

	#site-header .header-main.logo-position-menu_center #primary-menu.no-responsive > li {
		flex: 0 0 auto;
	}

	/* The whole of the leftover width, split evenly either side. */
	#site-header .header-main.logo-position-menu_center #primary-menu.no-responsive > li.menu-item-logo {
		margin-left: auto;
		margin-right: auto;
		padding: 0 !important;
	}

	/* Every rule from here down is written twice, once plain and once behind
	   `#site-header.fixed.shrink`.

	   TheGem's sticky header is not a state, it is a second set of rules: on
	   scroll `.fixed.shrink` is added and thegem-header.css restates the
	   menu's padding through it — `> li > a { padding: 0 15px }` and
	   `> li.menu-item-current { padding-left: 1px }` among others, all of them
	   two classes more specific than the same rule without the state. A single
	   selector here holds while the page is at the top and is quietly dropped
	   the moment it scrolls, which is the worst of both: the row re-spaces
	   itself and the button loses the padding that makes it a button. Matching
	   the state explicitly is the only thing that beats it, short of
	   !important on a dozen declarations.

	   20px a side, so neighbours in a pair sit 40px apart — the design's gap.
	   All of the gutter on the item and none on the link, for two reasons: the
	   current item's orange rule is a border on the *link*, and the design draws
	   it the width of the word; and thegem-header.css narrows the current item
	   to `padding: 33px 1px` to make room for a border this site replaced, which
	   would otherwise shuffle the whole row sideways by 38px on whichever page
	   you happened to be on. One gutter for every item, current or not — which
	   is why the shrink twin names the current item rather than the bare `li`:
	   that is the selector it has to outrank. */
	#site-header .header-style-3 #primary-menu.no-responsive > li,
	#site-header.fixed.shrink .header-style-3 #primary-menu.no-responsive > li.menu-item-current,
	#site-header.fixed.shrink .header-style-3 #primary-menu.no-responsive > li.menu-item-active {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* The Book Now button is exempt: its padding is what makes it a button,
	   and it is drawn outside this media query. */
	#site-header .header-style-3 #primary-menu.no-responsive > li:not(.casastays-book-item) > a,
	#site-header.fixed.shrink .header-style-3 #primary-menu.no-responsive > li:not(.casastays-book-item) > a {
		padding-left: 0;
		padding-right: 0;
	}

	/* Flush with the grid: the outer items drop the gutter on their outward
	   side, so the first label's ink starts on the column edge and the last
	   item's finishes on it. Last of the three, because the shrink twin above
	   is exactly as specific and would otherwise put the gutter back. */
	#site-header .header-style-3 #primary-menu.no-responsive > li:first-child,
	#site-header.fixed.shrink .header-style-3 #primary-menu.no-responsive > li:first-child {
		padding-left: 0;
	}

	#site-header .header-style-3 #primary-menu.no-responsive > li:last-child,
	#site-header.fixed.shrink .header-style-3 #primary-menu.no-responsive > li:last-child {
		padding-right: 0;
	}
}


/* ---------------------------------------------------------------------------
   "Book Now" as a button

   The last menu item is the page's call to action, so it is drawn as one. The
   item is found by its label rather than by an ID or a class typed into the
   admin — see casastays_is_booking_menu_item() in inc/booking-modal.php.

   Scoped to `#primary-menu.no-responsive`, which is TheGem's own marker for
   the horizontal desktop menu — the script strips the class when it rebuilds
   the same markup as the mobile drawer (thegem-menu_init.js:711). The drawer
   is a stack of full-width rows where a pill would read as a stray widget, so
   it keeps TheGem's row treatment. Not a media query, because the horizontal
   menu starts at 980px while the layout block above starts at 1213px, and the
   button belongs to the menu, not to that arrangement.

   Two IDs so the rule clears `#primary-menu.no-responsive > li > a`, which is
   what paints every menu link accent-orange in
   uploads/thegem/css/custom-*.css — a class-only rule never reaches it. The
   `.fixed.shrink` twin is there for the reason set out in the layout block
   above: on scroll TheGem restates the link's padding through the sticky
   state, and without a twin the label would spill out of its own pill. */
#site-header #primary-menu.no-responsive > li.casastays-book-item > a,
#site-header.fixed.shrink .header-style-3 #primary-menu.no-responsive > li.casastays-book-item > a {
	padding: 9px 27px;
	border-radius: 12px;
	background: #F47948;
	color: #ffffff;
	transition: background-color 0.25s ease;
}

#site-header #primary-menu.no-responsive > li.casastays-book-item > a:hover,
#site-header #primary-menu.no-responsive > li.casastays-book-item > a:focus {
	background: #dd5f2c;
	color: #ffffff;
}

/* The button's own 12px of padding stands in for that much of the item's, so
   adding it does not make the header taller than the other four items do. Two
   heights because there are two: TheGem gives every item 33px of vertical
   padding at rest and 18px once the header has shrunk, so the button gives
   back 12 of each. */
#site-header .header-style-3 #primary-menu.no-responsive > li.casastays-book-item {
	padding-top: 21px;
	padding-bottom: 21px;
}

#site-header.fixed.shrink .header-style-3 #primary-menu.no-responsive > li.casastays-book-item {
	padding-top: 6px;
	padding-bottom: 6px;
}

@media (prefers-reduced-motion: reduce) {
	#site-header #primary-menu.no-responsive > li.casastays-book-item > a {
		transition: none;
	}
}


/* ---------------------------------------------------------------------------
   The "Properties" menu panel
   Printed in the footer by inc/properties-locator.php and driven by
   js/properties-locator.js. The trigger is the header's Properties menu item,
   which keeps working as a plain link to /properties/ when the script is
   absent — so nothing below may be required for the menu to function.
   --------------------------------------------------------------------------- */
/* The uploaded artwork, drawn as a background rather than inlined, so the two
   states are one declaration apart. Both files are the same 24x15 chevron and
   differ only in stroke colour, so `contain` in a box of the drawn ratio
   (18 : 11.25) scales either one without distorting it.

   --cs-menu-arrow / --cs-menu-arrow-active are published by
   casastays_locator_chevron_style() (inc/properties-locator.php) — read the
   note there before writing a path into this file. */
.casastays-locator-chevron {
	display: inline-block;
	width: 18px;
	height: 12px;
	margin-left: 9px;
	vertical-align: middle;
	background-image: var(--cs-menu-arrow);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.25s ease;
}

.casastays-locator-trigger[aria-expanded="true"] .casastays-locator-chevron {
	transform: rotate(180deg);
}

/* Black while the item is the current one — on the listing, on a single
   property and on the filtered taxonomy archives, all of which
   casastays_is_listing_view() marks with `menu-item-active` — and black again
   while the panel is open, where the label goes black to match (see the
   `casastays-locator-open` rules below). Both states are the same idea: the
   arrow belongs to the label and follows it. */
.menu-item-active > .casastays-locator-trigger .casastays-locator-chevron,
.current-menu-item > .casastays-locator-trigger .casastays-locator-chevron,
body.casastays-locator-open .casastays-locator-item .casastays-locator-chevron {
	background-image: var(--cs-menu-arrow-active);
}


/* Overlay ----------------------------------------------------------------- */

.casastays-locator {
	--casastays-locator-top: 140px;
	--casastays-locator-accent: #F47948;
	--casastays-locator-ink: #1A1A1A;

	position: fixed;
	inset: 0;
	/* Above TheGem's sticky header (z-index 9999 on #site-header-wrapper), so
	   the panel is not sliced by it while the page is scrolled. */
	z-index: 10050;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--casastays-locator-top) 20px 20px;
	/* The panel can outgrow a short viewport — a laptop at 768px tall with the
	   header showing leaves little room — so the overlay scrolls rather than
	   putting the last row of icons out of reach. */
	overflow-y: auto;
	overscroll-behavior: contain;
}

.casastays-locator[hidden] {
	display: none;
}

/* A wash rather than a dim: the design keeps the page readable behind the
   panel, with the header greyed back but still legible. */
.casastays-locator__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.82);
}

/* The design washes the whole header back except the item that opened the
   panel, which stays black and reads as the active one.

   A z-index on the menu item alone cannot do that. TheGem's `.header-main` is
   `position: relative; z-index: 11`, which makes it a stacking context, and a
   descendant can never paint above its own ancestor's context however high its
   z-index goes. (`#site-header-wrapper`'s z-index: 1000 is inert — it is
   `position: static`, and z-index only applies to positioned boxes.) So the
   whole header is raised over the backdrop and its other items are faded to
   match the wash by hand.

   The `#site-header` in the selector is not decoration: TheGem sets the 11 as
   `#site-header .header-main` (thegem-header.css), and an ID outscores any
   number of classes, so a rule without one is ignored no matter how specific
   it looks.

   0.2 over the header's white ground lands on the same value as the 0.82 white
   backdrop does over the page. If TheGem ever renames `.header-main` this
   simply stops applying and the header washes out uniformly — the panel still
   works, it just loses the active-item highlight. */
body.casastays-locator-open #site-header .header-main {
	z-index: 10060;
}

body.casastays-locator-open #primary-menu > li:not(.casastays-locator-item) {
	opacity: 0.2;
}

/* Matches the shape of TheGem's own `#primary-menu.no-responsive > li > a`
   (custom-*.css), which is what paints the menu accent-orange — one ID and two
   elements, so a class-only rule never reaches it.

   The colour is literal rather than `var(--casastays-locator-ink)`: that
   custom property is declared on `.casastays-locator`, and the menu item is in
   the header, nowhere inside it. The var would resolve to nothing and the link
   would keep TheGem's orange. */
body.casastays-locator-open #primary-menu > li.casastays-locator-item > a {
	color: #1A1A1A;
}

/* The page behind must not scroll under the panel. */
body.casastays-locator-open {
	overflow: hidden;
}


/* Panel ------------------------------------------------------------------- */

.casastays-locator__panel {
	--casastays-locator-columns: 4;
	--casastays-locator-columns-narrow: 2;

	position: relative;
	box-sizing: border-box;
	width: min(100%, 940px);
	padding: 34px 42px 40px;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.13);
}

body .casastays-locator__close {
	position: absolute;
	top: 18px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--casastays-locator-ink);
	cursor: pointer;
	transition: color 0.2s ease;
}

.casastays-locator__close:hover,
.casastays-locator__close:focus-visible {
	color: var(--casastays-locator-accent);
}


/* Search row -------------------------------------------------------------- */

.casastays-locator__search {
	display: flex;
	gap: 14px;
	/* Clears the close button, which is absolutely positioned over this row. */
	margin: 12px 30px 26px 0;
}

/* Two classes, not `body .class`. TheGem's generated Theme Options CSS
   (uploads/thegem/css/custom-*.css) is enqueued *after* this stylesheet and
   paints every text-ish input grey via a long `input[type="text"], …,
   input[type="search"], …` list. That selector scores 0,0,1,1 — the same as
   `body .casastays-locator__input` — so an equal-specificity rule loses the
   tie on source order and the field renders in TheGem's grey with a grey
   border. 0,0,2,0 wins outright. */
.casastays-locator__panel .casastays-locator__input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	height: 52px;
	padding: 0 20px;
	border: 1px solid #F3B49A;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: none;
	color: var(--casastays-locator-ink);
	font-size: 16px;
	text-transform: none;
}

.casastays-locator__panel .casastays-locator__input::placeholder {
	color: #9a9a9a;
	/* Theme Options capitalise inputs site-wide; the design sets the
	   placeholder in title case of its own, so the casing comes from the
	   string, not from CSS. */
	text-transform: none;
	opacity: 1;
}

.casastays-locator__panel .casastays-locator__input:focus {
	border-color: var(--casastays-locator-accent);
	outline: none;
}

body .casastays-locator__submit {
	font-weight: 500;
    padding: 9px 27px;
    border: 0;
    border-radius: 12px;
	background: var(--casastays-locator-accent);
	color: #ffffff;
	font-size: 22px;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

body .casastays-locator__submit:hover,
body .casastays-locator__submit:focus-visible {
	background: #e0663a;
}


/* Locations --------------------------------------------------------------- */

.casastays-locator__heading {
	margin: 0 0 22px;
	color: #000;
	font-size: 20px;
	font-weight: 500;
	text-transform: none;
}

.casastays-locator__grid {
	display: grid;
	grid-template-columns: repeat(var(--casastays-locator-columns), minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* TheGem draws its own bullet on every list item through ::before. */
.casastays-locator__grid li::before {
	display: none;
}

.casastays-locator__item {
	margin: 0;
	padding: 0;
}

.casastays-locator__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.casastays-locator__icon {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 92px;
}

/* The design's icons are flat line art, so they are recoloured to the accent
   on hover the same way the amenity icons are. A hue-rotate would depend on
   what colour they were drawn in; going through black first does not. */
.casastays-locator__image {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 92px;
	object-fit: contain;
	transition: filter 0.25s ease;
}

.casastays-locator__link:hover .casastays-locator__image,
.casastays-locator__link:focus-visible .casastays-locator__image {
	/* #F47948 as a filter chain from black. */
	filter: brightness(0) saturate(100%) invert(58%) sepia(48%) saturate(1652%) hue-rotate(328deg) brightness(99%) contrast(92%);
}

/* The photo fallback, used until the line icons are uploaded to the landmark
   terms. Recolouring a photograph would make a mess of it, so it is cropped to
   a circle and left alone. */
.casastays-locator__link.is-photo .casastays-locator__image {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	object-fit: cover;
}

.casastays-locator__link.is-photo:hover .casastays-locator__image,
.casastays-locator__link.is-photo:focus-visible .casastays-locator__image {
	filter: none;
}

.casastays-locator__label {
	color: #000000;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	/* The underline is the hover state, drawn as a border so it can sit clear
	   of the descenders the way the design has it. */
	padding-bottom: 5px;
	border-bottom: 2px solid transparent;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.casastays-locator__link:hover .casastays-locator__label,
.casastays-locator__link:focus-visible .casastays-locator__label {
	color: var(--casastays-locator-accent);
	border-bottom-color: var(--casastays-locator-accent);
}


/* Responsive -------------------------------------------------------------- */

@media (max-width: 767px) {
	.casastays-locator {
		padding-inline: 14px;
	}

	.casastays-locator__panel {
		padding: 30px 22px 32px;
	}

	/* Restated on the grid rather than by redefining the column variable: the
	   counts arrive as an inline style on the grid from
	   casastays_render_locator_grid(), which would win over a rule here. */
	.casastays-locator__grid {
		grid-template-columns: repeat(var(--casastays-locator-columns-narrow), minmax(0, 1fr));
	}

	.casastays-locator__search {
		flex-direction: column;
		gap: 10px;
		margin-right: 34px;
	}

	.casastays-locator__submit {
		width: 100%;
		padding-inline: 0;
	}

	.casastays-locator__icon {
		height: 74px;
	}

	.casastays-locator__image {
		max-height: 74px;
	}

	.casastays-locator__link.is-photo .casastays-locator__image {
		width: 74px;
		height: 74px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.casastays-locator-chevron,
	.casastays-locator__image,
	.casastays-locator__label {
		transition: none;
	}
}


/* ---------------------------------------------------------------------------
   The "Book Now" popup
   Printed in the footer by inc/booking-modal.php and driven by
   js/booking-modal.js. The trigger is the header's Book Now button, which
   keeps working as a plain link when the script is absent — so nothing below
   may be required for the menu to function.

   The fields themselves are not styled here. They are the shared
   `casastays-booking-form` block further up, the same one the single property
   page uses, so an enquiry looks identical wherever it is made.
   --------------------------------------------------------------------------- */
.casastays-book {
	--casastays-book-cream: #F8F3E7;

	position: fixed;
	inset: 0;
	/* Above TheGem's sticky header (z-index 9999 on #site-header-wrapper), and
	   above the locator panel's 10050, so nothing can slice this one. */
	z-index: 10100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	/* The form is tall, and a laptop at 768px does not have room for it plus a
	   comfortable margin — so the overlay scrolls rather than putting the submit
	   button out of reach. */
	overflow-y: auto;
	overscroll-behavior: contain;
}

.casastays-book[hidden] {
	display: none;
}

.casastays-book__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

/* The page behind must not scroll under the dialog. */
body.casastays-book-open {
	overflow: hidden;
}

/* 5fr / 7fr is the same split the single property page gives its map and form
   (.casastays-single__enquiry), which is where the proportion comes from.

   The single row is `minmax(0, 1fr)` rather than `auto` so it can be shorter
   than its contents: on a laptop the form is taller than the panel is allowed
   to be, and an auto row would simply overflow. With the row able to shrink,
   the *form* takes the overflow and scrolls (below), which leaves the artwork
   full height and — the point of doing it this way round — leaves the close
   button where it was put instead of scrolling off the top. */
.casastays-book__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-rows: minmax(0, 1fr);
	box-sizing: border-box;
	width: min(100%, 1180px);
	max-height: calc(100vh - 48px);
	overflow: hidden;
	border-radius: 16px;
	background: var(--casastays-book-cream);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

/* The picture is the panel's left wall, so it fills its column edge to edge —
   any padding around it would read as a misaligned image. `height: 100%` on a
   grid item plus `object-fit: cover` crops it to whatever the form's height
   turns out to be, rather than letting the image decide the panel's height. */
.casastays-book__media {
	position: relative;
	overflow: hidden;
}

.casastays-book__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* min-height: 0 because a grid item's automatic minimum is its content, which
   would keep it from ever being shorter than the form and so from scrolling. */
.casastays-book__form {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 38px 44px 42px;
}

/* Over the artwork, not over the form: the form's top-right corner is a label,
   and a close button sitting on it would be the one thing you cannot read. */
body .casastays-book__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #000000;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

body .casastays-book__close:hover,
body .casastays-book__close:focus {
	background: #ffffff;
	color: #000000;
}

/* One column below the width at which the two would each be too narrow to be
   worth having: the form is the point of the dialog, so it is the artwork that
   gives way, kept as a banner rather than dropped. */
@media (max-width: 860px) {
	/* Stacked, so the two rows size themselves and the whole panel scrolls —
	   scrolling the form alone would leave the banner taking a fixed bite out of
	   an already short screen. */
	.casastays-book__panel {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		overflow: auto;
		overscroll-behavior: contain;
	}

	.casastays-book__media img {
		height: 200px;
	}

	.casastays-book__form {
		overflow: visible;
		padding: 28px 24px 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .casastays-book__close {
		transition: none;
	}
}


/* ---------------------------------------------------------------------------
   The "Book Now" form on the homepage
   TheGem's `thegem-contact-form7` Elementor widget, holding the same CF7 form
   the single property page embeds (inc/booking-form.php).

   Everything the widget exposes as a control — borders, radius, spacing, the
   submit button — is already set on the widget itself and written out to
   uploads/elementor/css/post-324.css. Only the three things it has no control
   for are here, and each is fighting a specific rule in
   uploads/thegem/css/custom-*.css, which TheGem regenerates from Theme Options
   and enqueues *after* this stylesheet:

     - inputs were #3c3950, from `input[type="text"], … select, textarea`
       (0,1,1);
     - dropdown text was #99a9b5, from `.combobox-wrapper .combobox-text`
       (0,2,0) — the grey the selects were showing;
     - the arrow was the accent-coloured thegem-icons glyph \e635, from
       `body .wpcf7-form .combobox-button:before` (0,2,1).

   `body` plus the widget class clears all three without !important, the same
   tactic the single property page uses. Scoping to the widget class is what
   keeps this off every other CF7 form and every WooCommerce select on the site.

   The selects are rendered native and then rebuilt as TheGem comboboxes by
   thegem-cf7.js → combobox.js: the <select> stays in the DOM inside
   .combobox-wrapper at opacity 0, with a .combobox-text span mirroring its
   label and a .combobox-button drawing the arrow. Both renderings are styled
   below, since the native one is what shows until that script runs. The one
   thing not carried over is the arrow on the native select: giving it
   appearance:none means also beating the widget's own 7-class padding rule to
   make room, so it keeps the browser's arrow for those few frames.
   --------------------------------------------------------------------------- */
/* :not(.wpcf7-submit) is load-bearing — the submit button is a
   .wpcf7-form-control too, and its white label comes from a (0,1,1) rule that
   this would otherwise outrank and paint black. */
body .elementor-widget-thegem-contact-form7 .wpcf7-form-control:not(.wpcf7-submit),
body .elementor-widget-thegem-contact-form7 .combobox-wrapper .combobox-text {
	color: #000000;
}

body .elementor-widget-thegem-contact-form7 ::placeholder {
	color: rgba(0, 0, 0, 0.3);
}

/* The prompt option that inc/booking-form.php puts at the top of each
   dropdown, in both renderings. The combobox keeps the real <select>, so one
   :has() test on the checked option covers the native field and the span that
   later stands in for it. */
body .elementor-widget-thegem-contact-form7 select:has(option[value=""]:checked),
body .elementor-widget-thegem-contact-form7 .combobox-wrapper:has(option[value=""]:checked) .combobox-text {
	color: rgba(0, 0, 0, 0.3);
}

/* The open list is a native popup and inherits the closed field's colour in
   Chrome, so the options are put back to the input colour one by one. */
body .elementor-widget-thegem-contact-form7 select option {
	color: #000000;
}

body .elementor-widget-thegem-contact-form7 select option[value=""] {
	color: rgba(0, 0, 0, 0.3);
}

/* The "I am a" fieldset, as on the single property page. The widget's label
   controls only reach <label>, so the legend is given by hand the 18px
   regular black they write out for the labels in post-324.css. */
body .elementor-widget-thegem-contact-form7 fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

body .elementor-widget-thegem-contact-form7 legend {
	padding: 0;
	font-size: 18px;
	font-weight: 400;
	color: #000000;
}

/* The design's chevron, replacing the thegem-icons glyph (\e635) that
   thegem-elementor/style.css:2557 puts on the combobox button.

   Drawn as `content` rather than as a background image on purpose. Elementor's
   container lazy-loading prints this inline in the head:

     .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) *
       { background-image: none !important }

   and this form sits in the page's fifth container, so a background arrow is
   blanked until the visitor scrolls the panel into view — the same rule is why
   the photo beside it appears late. Outranking an !important at five classes
   would take a selector padded with :not()s that describe nothing. `content`
   is not background-image, so the rule never reaches it.

   A `content` image is a replaced element and lays itself out at the file's
   intrinsic 24x15 whatever width and height say, so it is scaled rather than
   sized: 0.583 is 14/24, the width the single property page draws it at, so
   the two copies of the form agree. The margins centre the 24x15 box the theme
   positions at left/top 50%, and scaling about that centre keeps it there.

   The native <select> underneath is deliberately left alone. It shows only
   until thegem-cf7.js swaps in the combobox, and giving it appearance:none
   would take the browser's arrow away in exactly the window where lazy-loading
   is still suppressing the replacement — an arrowless dropdown is worse than
   a stock one. */
body .elementor-widget-thegem-contact-form7 .combobox-wrapper .combobox-button::before {
	content: var(--cs-select-arrow);
	display: block;
	line-height: 0;
	margin-left: -12px;
	margin-top: -7.5px;
	transform: scale(0.583);
	transform-origin: center center;
}

/* ---------------------------------------------------------------------------
   The Home page banner video

   An Elementor core Video widget (Self Hosted) in a Full Width container
   carrying the class `casastays-hero-video`, placed as the first section of
   the Home page. TheGem is no help here: thegem-elements-elementor registers
   60 widgets and none of them is a video widget, and the two places TheGem
   does play video — the page-title background (inc/content.php:682) and the
   portfolio hover — both hardcode `autoplay loop muted`, so neither can do
   the poster-first, click-to-play, with-controls behaviour this banner needs.

   Almost nothing is needed here, and that is deliberate. Elementor's
   widget-video.min.css already gives the video `height:100%; width:100%;
   object-fit:cover`, already gives the overlay `background-size:cover;
   background-position:50%; inset:0; position:absolute`, and already centres
   the play icon. Re-declaring any of that would be noise that later drifts
   out of sync with the plugin. The only thing the widget cannot express is
   the frame's proportions, so that is the only thing set below.

   Why the container must stay Full Width and not Boxed: the site-wide pin at
   the top of this file forces boxed containers onto the 1170px grid. It
   targets .e-con-boxed only, so a Full Width container is left alone and the
   banner reaches the viewport edges with no override needed.

   Why the selector is this long. Elementor writes the aspect ratio from the
   widget's Style > Aspect Ratio control as
     .elementor-123 .elementor-element.elementor-element-abc .elementor-wrapper
   which is four classes. `body` plus three classes would be four classes to
   their four plus an element — a loss. Adding .e-con (the container the class
   sits on is always one) makes it four classes plus an element, which wins.
   Same reason the header rules further up repeat their class.

   The ratio is the Figma frame, 1440x633, as the decimal Elementor's own
   control writes (its presets stop at 21:9 = 2.33333, which is 16px too short
   at 1440). It steps to 16:9 on tablet and 4:3 on phones: 2.275 at a 390px
   viewport is a 171px-tall letterbox, and the subject of this footage is
   people's faces.

   Nothing sets position:relative on .elementor-wrapper — the overlay's
   inset:0 resolves against .elementor-widget-container, which Elementor gives
   transform:translateZ(0), and a transform is a containing block for absolute
   descendants. That same transform opens a stacking context, so if the header
   menu or the Properties panel ever renders behind the banner, give this
   container a z-index rather than reaching into the widget.
   --------------------------------------------------------------------------- */
body .casastays-hero-video.e-con .elementor-widget-video .elementor-wrapper {
	--video-aspect-ratio: 2.27488; /* 1440 / 633 */
}

@media (max-width: 1024px) {
	body .casastays-hero-video.e-con .elementor-widget-video .elementor-wrapper {
		--video-aspect-ratio: 1.77777; /* 16 / 9 */
	}
}

@media (max-width: 767px) {
	body .casastays-hero-video.e-con .elementor-widget-video .elementor-wrapper {
		--video-aspect-ratio: 1.33333; /* 4 / 3 */
	}
}

/* ---------------------------------------------------------------------------
   "Why Residents Choose Us" — the Instagram strip.

   Four portrait cards, each carrying the Instagram action rail down its right
   edge, over a plain page background. Markup: inc/instagram-section.php.

   Everything the design tunes lives in the custom properties below, for the
   same reason as the collage above: the card ratio, the gutter and the rail
   placement are all measured off the Figma frame and will be re-measured, and
   that should never mean editing PHP.
   --------------------------------------------------------------------------- */
.casastays-instagram {
	/* The design lays the strip out on a 1280px content width — a 1440 frame
	   with 80px margins. The theme grid is 1170, so the strip fills whatever
	   container it is dropped into and only caps here at wider breakpoints. */
	--casastays-instagram-max: 1280px;

	/* Measured 9px between 313px cards. The cards nearly touch: this reads as
	   one continuous filmstrip rather than four separate tiles, and widening
	   the gutter is the fastest way to lose that. */
	--casastays-instagram-gap: 9px;

	/* 313 x 504 in the frame. Taller than an Instagram 4:5 portrait and
	   shorter than a 9:16 reel, so it is written as the measured pair rather
	   than a named ratio that would be a lie either way. */
	--casastays-instagram-ratio: 313 / 504;

	--casastays-instagram-radius: 14px;

	--casastays-instagram-heading: #1A1A1A;
	--casastays-instagram-fg: #ffffff;
	--casastays-instagram-accent: #F47948;
	--casastays-instagram-accent-hover: #dd5f2c;

	/* Rail. Anchored to the bottom-right corner in percentages so it holds its
	   position against the photo as the card resizes; the glyphs themselves
	   stay a fixed px size, because an icon that scales with the viewport stops
	   reading as a UI control and starts reading as artwork. */
	--casastays-instagram-icon: 22px;
	--casastays-instagram-badge: 18px;
	--casastays-instagram-count: 12px;
	--casastays-instagram-rail-right: 7%;
	--casastays-instagram-rail-bottom: 14%;
	--casastays-instagram-rail-gap: 11px;

	/* The rail is white over uncontrolled photography — a pale bedroom wall in
	   card 1, a bright window in card 3. A tight, mostly-opaque shadow keeps it
	   legible on both without the dark scrim that would flatten the photos. */
	--casastays-instagram-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);

	padding-bottom: 72px;
}

/* Left-aligned to the card grid, not centred like the other section headings.
   That is what the frame does: the heading and the first card share an edge,
   and centring it breaks the alignment the strip is built on. */
.casastays-instagram__title {
	max-width: var(--casastays-instagram-max);
	margin: 0 auto 22px;
	text-align: left;
	/* 32px, not larger: the frame sets this line at 466px wide and the clamp
	   ceiling is what holds it there on a 1280 grid. */
	font-size: clamp(18px, 2.5vw, 32px);
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--casastays-instagram-heading);
	text-transform: uppercase;
}

/* TheGem content styles add bullets and margins to any ul inside page content,
   so both are reset on the item as well as the list. */
.casastays-instagram__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--casastays-instagram-gap);
	width: 100%;
	max-width: var(--casastays-instagram-max);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.casastays-instagram__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.casastays-instagram__item::before {
	content: none;
}

.casastays-instagram__card {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--casastays-instagram-ratio);
	border-radius: var(--casastays-instagram-radius);
	/* Instagram thumbnails arrive at whatever size Instagram feels like, and a
	   card with no photo behind it should still be a card rather than a hole. */
	background: #ededed;
	color: var(--casastays-instagram-fg);
	text-decoration: none;
}

.casastays-instagram__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.casastays-instagram__card:hover .casastays-instagram__image,
.casastays-instagram__card:focus-visible .casastays-instagram__image {
	transform: scale(1.04);
}

.casastays-instagram__card:focus-visible {
	outline: 2px solid var(--casastays-instagram-accent);
	outline-offset: 3px;
}

/* --- The action rail ------------------------------------------------------

   Decorative, and aria-hidden in the markup. See the header of
   inc/instagram-section.php for why the counts are static.

   pointer-events: none so the rail never intercepts a click meant for the card
   underneath it — the whole card is the link to the post. */
.casastays-instagram__rail {
	position: absolute;
	right: var(--casastays-instagram-rail-right);
	bottom: var(--casastays-instagram-rail-bottom);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--casastays-instagram-rail-gap);
	pointer-events: none;
	color: var(--casastays-instagram-fg);
	filter: drop-shadow(var(--casastays-instagram-shadow));
}

.casastays-instagram__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

.casastays-instagram__icon {
	display: block;
	width: var(--casastays-instagram-icon);
	height: var(--casastays-instagram-icon);
}

.casastays-instagram__count {
	font-size: var(--casastays-instagram-count);
	font-weight: 600;
	line-height: 1;
	color: var(--casastays-instagram-fg);
}

/* The overflow dots keep the square icon box even though the glyph only fills
   its middle third. Halving the height instead letterboxes the 24x24 viewBox,
   which scales the dots down to fit the shorter side and leaves them almost
   invisible over a photo. */
.casastays-instagram__icon--more {
	width: var(--casastays-instagram-icon);
	height: var(--casastays-instagram-icon);
	margin-block: -6px;
}

/* The corner badge, bottom-right, independent of the rail above it. */
.casastays-instagram__badge {
	position: absolute;
	right: 5%;
	bottom: 3.5%;
	z-index: 2;
	display: block;
	pointer-events: none;
	color: var(--casastays-instagram-fg);
	filter: drop-shadow(var(--casastays-instagram-shadow));
}

.casastays-instagram__badge .casastays-instagram__icon {
	width: var(--casastays-instagram-badge);
	height: var(--casastays-instagram-badge);
}

/* --- The call to action --------------------------------------------------- */
.casastays-instagram__cta {
	margin: 30px 0 0;
	text-align: center;
}

.casastays-instagram__link {
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 700;
	color: var(--casastays-instagram-accent);
	text-decoration: none;
}

.casastays-instagram__link:hover,
.casastays-instagram__link:focus {
	color: var(--casastays-instagram-accent-hover);
	text-decoration: underline;
}

.casastays-instagram__link:focus-visible {
	outline: 2px solid var(--casastays-instagram-accent);
	outline-offset: 3px;
}

/* Editors only — see the shortcode. Never rendered for visitors. */
.casastays-instagram__notice {
	margin: 0;
	padding: 16px 20px;
	border-left: 4px solid var(--casastays-instagram-accent, #F47948);
	background: #F8F3E7;
	color: #6b6b6b;
	font-size: 14px;
}

/* Four cards survive down to the tablet breakpoint — at 313px each they are
   already narrow, and the rail is what would break first, not the photo. Below
   it the strip goes 2x2 and the rail is scaled back rather than dropped, since
   without it the cards stop reading as Instagram at all. */
@media (max-width: 1024px) {
	.casastays-instagram {
		--casastays-instagram-icon: 19px;
		--casastays-instagram-badge: 16px;
		--casastays-instagram-count: 11px;
		--casastays-instagram-rail-gap: 9px;
	}
}

@media (max-width: 600px) {
	.casastays-instagram {
		--casastays-instagram-gap: 8px;
		--casastays-instagram-icon: 20px;
		--casastays-instagram-badge: 16px;
		--casastays-instagram-count: 11px;
		--casastays-instagram-rail-gap: 10px;

		padding-bottom: 48px;
	}

	.casastays-instagram__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.casastays-instagram__title {
		margin-bottom: 18px;
		text-align: center;
	}

	.casastays-instagram__cta {
		margin-top: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.casastays-instagram__image {
		transition: none;
	}

	.casastays-instagram__card:hover .casastays-instagram__image,
	.casastays-instagram__card:focus-visible .casastays-instagram__image {
		transform: none;
	}
}

@media (max-width: 1024px) {
.casastays-properties__name{
	font-size: 24px;

}
.casastays-cta__title{
	    line-height: 38px;
}
}