/*
 * Design "Curated": in the manner of a curated "tested homes" rental platform. Editorial and
 * confident: a warm off-white page, big serif headlines set like magazine standfirsts, generous
 * rounded photos. The hero is not a full-bleed photo but a large rounded picture inside the page,
 * with the title on a solid accent card that overlaps its lower-left corner and the search as a
 * compact booking card beside it. Every section opens with a small pill label and a left-aligned
 * headline; the gallery a three-column mosaic with its "View all" link beside the title; amenities a
 * grid of rounded tiles with round icons; prices a rounded photo panel beside the calendar card;
 * reviews large pull-quotes on a deep plum band; house rules a two-column checklist; Get in Touch a
 * rounded colour card; a dark footer with rounded top corners.
 * Loaded after main.css for villas with "villa.design": "curated". Same sections, order and markup
 * as Classic; only the look and the layout change. Colours: villa_designs() (the text on buttons and
 * on the accent card follows their lightness).
 */

/* ==========================================================================
   Fonts (self-hosted: Fraunces latin + latin-ext; Inter latin, latin-ext, greek; EB Garamond greek)
   ========================================================================== */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fraunces-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fraunces-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
	--font-heading: "Fraunces", Georgia, "Times New Roman", serif;
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-greek-400-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-greek-500-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-greek-600-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
	--font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/eb-garamond-greek-500-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-greek-400-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

/* EB Garamond above: Greek letters only, for the headings and quotes (Fraunces has none) */

/* ==========================================================================
   Tokens: warm paper, plum ink, rounded corners
   ========================================================================== */

:root {
	--paper: #f7f2eb; /* the page */
	--paper-deep: #efe7dc; /* soft panels */
	--card: #fffdf9; /* cards and tiles */
	--ink: #1f1a24; /* text, the footer */
	--line: rgb(31 26 36 / 0.1);
	/* The accent darkened, for text and icons on light grounds (a light accent stays readable) */
	--accent-ink: color-mix(in srgb, var(--color-accent) 72%, #000);
	/* The accent as a pale wash: Get in Touch, icon circles */
	--tint: color-mix(in srgb, var(--color-accent) 13%, #fbf6ef);
	/* The wash as a background layer (a gradient of one colour over the paper) */
	--tint-fill: linear-gradient(var(--tint), var(--tint)) var(--paper);
	/* The reviews band: the accent, deepened */
	--plum-deep: color-mix(in srgb, var(--color-accent) 48%, #120a12);
	/* Text on the button and accent colours: dark on light colours, white on dark ones (below) */
	--on-button: #fff;
	--on-accent: #fff;
	--radius-large: clamp(18px, 1.8vw, 26px);
	--radius-medium: 18px;
	--radius-small: 12px;
	--hero-overlap: clamp(110px, 11vw, 180px); /* how far the title card climbs onto the hero photo */
	--edge: max(var(--gutter), calc((100% - var(--container)) / 2)); /* side space that lines up with .container */

	--color-text: var(--ink);
	--color-text-muted: #5f5764;
	--color-bg: var(--paper);
	--color-bg-soft: var(--paper-deep);
	--color-bg-sand: #f1e9e4;
	--color-dark: var(--ink);
	--color-footer: var(--ink);
	--color-border: var(--line);
	--color-day-available: #e3eee5;
	--color-day-today: var(--ink);
	--color-day-booked: #b0475a;
	--color-day-past: #ede7df;

	--font-heading: "Fraunces", "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--container: clamp(1040px, 72vw, 1440px);
	--section-space: clamp(84px, 7vw, 132px);
	--header-height: 84px;
	--shadow-card: 0 18px 50px rgb(31 26 36 / 0.09), 0 2px 6px rgb(31 26 36 / 0.04);
	--radius: var(--radius-medium);
}

/* Each villa sets its own button and accent colour: pick the text colour from its lightness */
@supports (color: rgb(from red r g b)) {
	:root {
		/* Grey from 21 to 255: dark when the colour is light (perceived brightness above 150), else white */
		--on-button: rgb(from var(--color-button) clamp(21, calc((150 - (0.299 * r + 0.587 * g + 0.114 * b)) * 1000), 255) clamp(21, calc((150 - (0.299 * r + 0.587 * g + 0.114 * b)) * 1000), 255) clamp(21, calc((150 - (0.299 * r + 0.587 * g + 0.114 * b)) * 1000), 255));
		--on-accent: rgb(from var(--color-accent) clamp(21, calc((150 - (0.299 * r + 0.587 * g + 0.114 * b)) * 1000), 255) clamp(21, calc((150 - (0.299 * r + 0.587 * g + 0.114 * b)) * 1000), 255) clamp(21, calc((150 - (0.299 * r + 0.587 * g + 0.114 * b)) * 1000), 255));
	}
}

@media (max-width: 768px) {
	:root {
		--gutter: 16px;
		--section-space: 68px;
		--header-height: 68px;
		--radius-large: 20px;
		--radius-medium: 16px;
	}
}

/* ==========================================================================
   Base type: serif headlines, set tight and large
   ========================================================================== */

body {
	background: var(--paper);
	font-size: 16px;
	line-height: 1.7;
}

h1,
h2,
h3,
h4 {
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

a {
	color: var(--accent-ink);
}

.section-title {
	max-width: 19ch;
	font-size: clamp(36px, 3.7vw, 62px);
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

/* The pill that opens each section */
.section-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	padding: 6px 14px 6px 12px;
	border-radius: 999px;
	background: var(--tint-fill);
	color: var(--accent-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	line-height: 1.3;
}

.section-label::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.section-label--light {
	background: rgb(255 255 255 / 0.16);
	color: #fff;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.section-title--light {
	color: #fff;
}

/* Section headings on the left, like a magazine page, not centred */
.section-header--center {
	margin-bottom: clamp(36px, 3.4vw, 60px);
	text-align: left;
}

.section-header--center .section-title {
	max-width: 19ch;
	margin: 0;
}

.section {
	padding-block: var(--section-space);
}

/* ==========================================================================
   Buttons: rounded pills, sentence case
   ========================================================================== */

.button {
	min-height: 50px;
	padding: 0 28px;
	border-radius: 999px;
	color: var(--on-button);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.button:hover {
	background: color-mix(in srgb, var(--color-button) 84%, #fff);
}

/* Buttons in their own colours (WhatsApp, the booking platforms, the light pills): their "color" */
.button--whatsapp,
.button--whatsapp:hover {
	color: #fff;
}

.button--outline {
	border: 1.5px solid var(--color-button);
	background: transparent;
	color: var(--ink);
}

.button--outline:hover {
	color: var(--on-button);
}

.skip-link:focus {
	border-radius: 999px;
	background: var(--card);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 2px;
	border-bottom: 1.5px solid currentColor;
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.link-arrow:hover {
	color: var(--accent-ink);
}

/* ==========================================================================
   Header: on the paper, the name in the serif, a calm menu, the pill button
   ========================================================================== */

.site-header {
	background: rgb(247 242 235 / 0.92);
	border-bottom: 0;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.site-branding__name {
	font-family: var(--font-heading);
	font-size: 25px;
	font-weight: 500;
	letter-spacing: -0.02em;
	text-transform: none;
	line-height: 1.1;
}

.site-branding__location {
	margin-top: 2px;
	font-size: 12px;
	letter-spacing: 0.01em;
	text-transform: none;
}

.site-nav__menu {
	gap: 30px;
}

.site-nav__menu a {
	padding-block: 4px;
	border-bottom: 1.5px solid transparent;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.site-nav__menu a:hover,
.site-nav__menu .current-menu-item > a {
	border-bottom-color: currentColor;
	color: var(--accent-ink);
}

.site-header .button {
	min-height: 44px;
	padding: 0 24px;
}

.language-switcher {
	font-size: 14px;
	letter-spacing: 0.02em;
}

.language-switcher ul {
	overflow: hidden;
	border-radius: var(--radius-small);
	background: var(--card);
}

.language-list a {
	border-radius: 999px;
}

.language-list a.is-current {
	border-color: var(--ink);
}

@media (max-width: 900px) {
	.site-branding__name {
		font-size: 21px;
		letter-spacing: -0.015em;
	}

	.site-branding__location {
		font-size: 11px;
		letter-spacing: 0.01em;
	}

	/* The phone menu: a rounded card under the bar */
	.site-nav {
		left: var(--gutter);
		right: var(--gutter);
		padding: 24px;
		border: 0;
		border-radius: var(--radius-large);
		background: var(--card);
	}

	.site-nav__menu {
		gap: 4px;
	}

	.site-nav__menu a {
		display: block;
		padding: 10px 0;
		border-bottom: 1px solid var(--line);
		font-family: var(--font-heading);
		font-size: 24px;
		letter-spacing: -0.01em;
	}

	.site-nav__menu a:hover,
	.site-nav__menu .current-menu-item > a {
		border-bottom-color: var(--line);
	}

	.site-nav__close {
		border-radius: 999px;
		font-size: 14px;
		letter-spacing: 0;
		text-transform: none;
	}

	.site-header .button {
		min-height: 40px;
		padding: 0 18px;
	}

	.site-header .header-whatsapp {
		width: 40px;
		padding: 0;
	}
}

/* ==========================================================================
   Hero: a large rounded photo inside the page, the title on a solid accent card over its
   lower-left corner, the search as a booking card beside the title
   ========================================================================== */

.hero {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto auto;
	column-gap: clamp(20px, 2vw, 32px);
	row-gap: 0;
	min-height: 0;
	padding: 8px var(--edge) clamp(24px, 3vw, 48px);
	background: var(--paper);
	color: var(--ink);
	overflow: visible;
}

.admin-bar .hero {
	min-height: 0;
}

.hero::after {
	display: none;
}

.hero__photo {
	position: relative;
	inset: auto;
	grid-column: 1 / -1;
	grid-row: 1;
	width: 100%;
	height: clamp(440px, calc(100svh - var(--header-height) - 150px), 760px);
	border-radius: var(--radius-large);
	object-fit: cover;
}

.hero__inner {
	position: relative;
	z-index: 1;
	grid-column: 1 / 8;
	grid-row: 2;
	align-self: start;
	max-width: none;
	margin: calc(-1 * var(--hero-overlap)) 0 0;
	padding: 0 0 0 clamp(20px, 2.4vw, 40px);
}

.hero__content {
	padding: clamp(30px, 3.2vw, 52px) clamp(28px, 3.4vw, 56px) clamp(32px, 3.4vw, 54px);
	border-radius: var(--radius-large);
	background: var(--color-accent);
	color: var(--on-accent);
	text-align: left;
	box-shadow: 0 24px 60px rgb(31 26 36 / 0.18);
}

.hero__title {
	max-width: 13em;
	margin: 0;
	font-size: clamp(40px, 4.3vw, 74px);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.hero__text {
	max-width: 44ch;
	margin: clamp(16px, 1.6vw, 24px) 0 0;
	font-size: 17px;
	line-height: 1.6;
	opacity: 0.92;
}

.hero__text p {
	margin: 0;
}

.hero__text p + p {
	margin-top: 10px;
}

/* The booking card: beside the title card, under the photo */
.hero .availability-form-section {
	grid-column: 8 / -1;
	grid-row: 2;
	align-self: start;
	margin-top: clamp(20px, 2vw, 32px);
}

.hero .availability-form-section > .container {
	max-width: none;
	padding: 0;
}

.hero .availability-form {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: none;
}

.hero .availability-form__submit {
	align-self: end;
}

.hero__scroll {
	display: none;
}

/* No photo: the title card across the top, the search bar under it */
.hero--no-photo {
	padding-top: clamp(24px, 3vw, 48px);
}

.hero--no-photo .hero__inner {
	grid-column: 1 / -1;
	grid-row: 1;
	margin: 0;
	padding: 0;
}

.hero--no-photo .hero__content {
	padding: clamp(40px, 5vw, 88px) clamp(28px, 5vw, 88px);
	box-shadow: none;
}

.hero--no-photo .hero__title {
	font-size: clamp(44px, 5.4vw, 92px);
}

.hero--no-photo .availability-form-section {
	grid-column: 2 / -2;
	grid-row: 2;
	margin-top: -40px;
}

.hero--no-photo .availability-form {
	grid-template-columns: 1fr 1fr 0.7fr auto;
}

@media (max-width: 1100px) {
	.hero__inner {
		grid-column: 1 / 11;
	}

	.hero .availability-form-section {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.hero .availability-form {
		grid-template-columns: 1fr 1fr 0.7fr auto;
	}

	.hero--no-photo .availability-form-section {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 20px;
	}
}

@media (max-width: 768px) {
	.hero {
		grid-template-columns: minmax(0, 1fr);
		padding: 4px var(--gutter) 20px;
	}

	.hero__photo {
		grid-column: 1;
		height: min(112vw, 62svh);
		min-height: 320px;
	}

	.hero__inner,
	.hero--no-photo .hero__inner {
		grid-column: 1;
		margin-top: -72px;
		padding: 0 12px;
	}

	.hero--no-photo .hero__inner {
		margin-top: 0;
		padding: 0;
	}

	.hero__content {
		padding: 26px 24px 28px;
	}

	.hero__title,
	.hero--no-photo .hero__title {
		font-size: clamp(34px, 9.6vw, 44px);
		line-height: 1.04;
	}

	.hero__text {
		font-size: 15px;
	}

	.hero .availability-form-section,
	.hero--no-photo .availability-form-section {
		grid-column: 1;
		margin-top: 16px;
	}

	.hero .availability-form,
	.hero--no-photo .availability-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 12px;
	}

	.hero .availability-form__field:has(select),
	.hero .availability-form__field:has([data-guests]),
	.hero .availability-form__submit {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   Availability form: a soft white card, rounded fields
   ========================================================================== */

.availability-form {
	gap: 16px;
	padding: clamp(20px, 2vw, 28px);
	border-radius: var(--radius-large);
	background: var(--card);
	box-shadow: var(--shadow-card);
}

.availability-form__field label {
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.availability-form__field label span {
	color: var(--accent-ink);
}

.availability-form input,
.availability-form select {
	height: 50px;
	padding: 0 16px;
	border: 1px solid rgb(31 26 36 / 0.16);
	border-radius: var(--radius-small);
	background-color: #fff;
}

.availability-form input:focus,
.availability-form select:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 0;
}

.availability-form .choices__inner,
.availability-form .choices.is-open .choices__inner {
	min-height: 50px;
	border-color: rgb(31 26 36 / 0.16);
	border-radius: var(--radius-small);
}

.availability-form .choices__list--dropdown,
.availability-form .choices.is-open .choices__list--dropdown {
	overflow: hidden;
	border-radius: var(--radius-small);
}

.availability-form__submit {
	min-height: 50px;
}

.flatpickr-calendar {
	overflow: hidden;
	border-radius: var(--radius-medium);
}

.flatpickr-day {
	border-radius: 8px;
}

.flatpickr-day.inRange {
	border-radius: 0;
}

@media (max-width: 768px) {
	.availability-form {
		padding: 18px;
	}
}

/* ==========================================================================
   About: the story on the left with a standfirst, the rounded photo on the right
   ========================================================================== */

.about__inner {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(40px, 6vw, 112px);
}

.about__photo {
	order: 2;
	border-radius: var(--radius-large);
}

.about__photo img {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-large);
}

.about__content {
	max-width: 660px;
}

.about .section-title {
	margin-bottom: clamp(24px, 2.2vw, 36px);
}

.about__text {
	color: var(--color-text-muted);
}

/* The first paragraph as a standfirst */
.about__text > p:first-child {
	color: var(--ink);
	font-family: var(--font-heading);
	font-size: clamp(19px, 1.4vw, 22px);
	line-height: 1.5;
	letter-spacing: -0.01em;
}

.about__signature {
	margin: 28px 0 32px;
	color: var(--accent-ink);
	font-family: var(--font-heading);
	font-size: 22px;
	font-style: italic;
}

.about__signature::before {
	content: "— ";
}

.about--no-photo .about__inner {
	max-width: calc(var(--container) + 2 * var(--gutter)); /* in line with the other sections; the text keeps its own measure */
	margin-inline: auto;
}

@media (max-width: 768px) {
	.about__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.about__photo {
		order: 0;
	}

	.about__photo img {
		aspect-ratio: 4 / 5;
		max-height: 72vh;
	}

	.about__text > p:first-child {
		font-size: 19px;
	}
}

/* ==========================================================================
   Small gallery: title and "View all" on one line, a three-column mosaic
   ========================================================================== */

.small-gallery .container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	column-gap: 24px;
}

.small-gallery .section-title {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: clamp(28px, 2.6vw, 44px);
}

.small-gallery__more {
	grid-column: 2;
	grid-row: 1;
	margin: 0 0 clamp(36px, 3vw, 52px);
}

.small-gallery__grid,
.small-gallery__row {
	grid-column: 1 / -1;
}

.small-gallery__grid {
	grid-template-rows: repeat(2, clamp(190px, 17vw, 300px));
	gap: 16px;
}

.small-gallery__item {
	border-radius: var(--radius-large);
}

/* Four: a tall photo, a second tall one, two small stacked at the right */
.small-gallery__grid--4 {
	grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
}

.small-gallery__grid--4 .small-gallery__item:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / 3;
}

.small-gallery__grid--4 .small-gallery__item:nth-child(2) {
	grid-column: 2;
	grid-row: 1 / 3;
}

.small-gallery__grid--4 .small-gallery__item:nth-child(3) {
	grid-column: 3;
	grid-row: 1;
}

.small-gallery__grid--4 .small-gallery__item:nth-child(4) {
	grid-column: 3;
	grid-row: 2;
}

.small-gallery__grid--3 {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.small-gallery__grid--3 .small-gallery__item:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / 3;
}

.small-gallery__grid--3 .small-gallery__item:nth-child(2),
.small-gallery__grid--3 .small-gallery__item:nth-child(3) {
	grid-column: 2;
}

.small-gallery__row {
	gap: 16px;
	height: clamp(150px, 12vw, 220px);
	margin-top: 16px;
}

.small-gallery__caption {
	left: 12px;
	bottom: 12px;
	max-width: calc(100% - 24px);
	padding: 5px 12px;
	border-radius: 999px;
	background: rgb(255 253 249 / 0.92);
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
	text-shadow: none;
}

@media (max-width: 768px) {
	.small-gallery .container {
		grid-template-columns: minmax(0, 1fr);
	}

	.small-gallery .section-title {
		margin-bottom: 24px;
	}

	.small-gallery__more {
		grid-column: 1;
		grid-row: 4;
		margin: 24px 0 0;
	}

	.small-gallery__grid,
	.small-gallery__grid--2,
	.small-gallery__grid--3,
	.small-gallery__grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: 42vw;
		gap: 10px;
	}

	.small-gallery__grid .small-gallery__item:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}

	/* The first photo across, and the last one too when it would be left alone */
	.small-gallery__grid .small-gallery__item:first-child,
	.small-gallery__grid .small-gallery__item:last-child:nth-child(even) {
		grid-column: 1 / -1;
	}

	.small-gallery__grid .small-gallery__item:first-child {
		grid-row: span 2;
	}

	.small-gallery__row {
		gap: 10px;
		height: auto;
		margin-top: 10px;
	}

	.small-gallery__row > .small-gallery__item {
		flex: 1 1 calc(50% - 5px);
	}
}

/* ==========================================================================
   Amenities: a tidy grid of rounded tiles, each icon in a soft circle
   ========================================================================== */

.amenities__grid {
	--amenity-gap: 14px;
	justify-content: flex-start;
}

.amenity {
	gap: 16px;
	padding: 22px 20px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius-medium);
	background: var(--card);
	box-shadow: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.amenity:hover {
	border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}

.amenity__icon {
	box-sizing: content-box;
	width: 22px;
	height: 22px;
	padding: 12px;
	border-radius: 50%;
	background: var(--tint-fill);
	color: var(--accent-ink);
	stroke-width: 1.6;
}

.amenity__label {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

@media (max-width: 600px) {
	.amenities__grid {
		--amenity-gap: 10px;
	}

	/* Phones: compact tiles, the icon beside the name */
	.amenity {
		flex-direction: row;
		align-items: center;
		gap: 10px;
		padding: 10px 12px 10px 10px;
		border-radius: var(--radius-small);
	}

	.amenity__icon {
		width: 18px;
		height: 18px;
		padding: 8px;
	}

	.amenity__label {
		min-width: 0;
		font-size: 14px;
		line-height: 1.3;
		overflow-wrap: anywhere;
	}
}

/* ==========================================================================
   Prices: a rounded photo panel with the heading on the left, the calendar card on the right
   ========================================================================== */

.prices {
	--prices-card-overlap: 0px;
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 20px;
	padding-top: 0;
	padding-inline: var(--edge);
}

.prices__band {
	align-items: flex-end;
	min-height: 520px;
	padding: clamp(28px, 2.6vw, 44px);
	border-radius: var(--radius-large);
	background: var(--plum-deep);
	text-align: left;
}

.prices__band::after {
	background: linear-gradient(180deg, rgb(20 12 20 / 0) 25%, rgb(20 12 20 / 0.72) 100%);
}

.prices__band--no-photo::after {
	display: none;
}

.prices__heading {
	max-width: none;
	margin: 0;
	padding: 0;
}

.prices__heading .section-title {
	margin-bottom: 24px;
	font-size: clamp(30px, 2.6vw, 44px);
}

/* A light pill on the photo */
.prices__heading .button {
	background: var(--paper);
	color: var(--ink);
}

.prices__heading .button:hover {
	background: #fff;
}

.prices > .container {
	max-width: none;
	padding: 0;
}

.prices__card {
	height: 100%;
	margin: 0;
	padding: clamp(24px, 2.6vw, 40px);
	border-radius: var(--radius-large);
	background: var(--card);
	box-shadow: none;
	border: 1px solid var(--line);
}

.calendar-month__title {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 500;
}

.calendar-day {
	border-radius: 8px;
}

.calendar__swatch {
	border-radius: 4px;
}

@media (max-width: 1100px) {
	.prices {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.prices__band {
		min-height: 340px;
	}
}

@media (max-width: 768px) {
	.prices__band {
		min-height: 300px;
		padding: 24px;
	}

	.prices__card {
		padding: 20px 14px;
	}
}

/* ==========================================================================
   Guest reviews: large pull-quotes on a deep plum band
   ========================================================================== */

.reviews {
	padding-block: var(--section-space);
	background: var(--plum-deep);
	color: #fff;
}

.reviews .section-label {
	background: rgb(255 255 255 / 0.14);
	color: #fff;
}

.reviews .section-title {
	color: #fff;
}

.reviews__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(36px, 3.4vw, 56px) clamp(32px, 4vw, 72px);
	max-width: none;
}

.review {
	gap: 18px;
	padding: 32px 0 0;
	border-top: 1px solid rgb(255 255 255 / 0.22);
	background: none;
	box-shadow: none;
}

/* The first review across the band, the largest quote */
.review:first-child {
	grid-column: 1 / -1;
	padding-top: 0;
	border-top: 0;
}

.review__text {
	order: 1;
	color: #fff;
	font-family: var(--font-heading);
	font-size: clamp(19px, 1.5vw, 23px);
	line-height: 1.45;
	letter-spacing: -0.005em;
}

.review:first-child .review__text {
	max-width: 30em;
	font-size: clamp(24px, 2.3vw, 36px);
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.review__text::before {
	content: "\201C";
	display: block;
	height: 0.5em;
	margin-bottom: 0.15em;
	color: color-mix(in srgb, var(--color-accent) 35%, #fff);
	font-size: 2.6em;
	line-height: 1;
}

.review__stars {
	order: 2;
	margin: 0;
	color: #f2c56b;
}

.review__stars-off {
	color: rgb(255 255 255 / 0.28);
}

.review__author {
	order: 3;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}

.review__name {
	color: #fff;
	font-size: 15px;
}

.review__country {
	color: rgb(255 255 255 / 0.76);
	font-size: 14px;
}

.reviews__action {
	margin-top: clamp(40px, 3.6vw, 60px);
	text-align: left;
}

/* A light pill on the dark band */
.reviews .button {
	background: var(--paper);
	color: var(--ink);
}

.reviews .button:hover {
	background: #fff;
}

/* After the band: the house rules need their own top space */
.reviews + .house-rules {
	padding-top: var(--section-space);
}

@media (max-width: 760px) {
	.reviews__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		max-width: none;
	}

	.review {
		padding: 28px 0 0;
	}

	.review:first-child .review__text {
		font-size: 24px;
	}
}

/* ==========================================================================
   House rules: a two-column checklist
   ========================================================================== */

.house-rules__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(32px, 4vw, 72px);
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* Each rule: its icon in a soft circle at the left, the name, the rule under it */
.house-rule,
.house-rule:last-child {
	position: relative;
	display: block;
	min-height: 84px;
	padding: 22px 0 22px 60px;
	border-top: 1px solid var(--line);
	border-bottom: 0;
}

.house-rule__name {
	display: block;
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.house-rule__icon {
	box-sizing: content-box;
	position: absolute;
	top: 20px;
	left: 0;
	width: 20px;
	height: 20px;
	padding: 10px;
	border-radius: 50%;
	background: var(--tint-fill);
	color: var(--accent-ink);
	stroke-width: 1.6;
}

.house-rule__value {
	font-size: 15px;
}

.house-rules--small .house-rules__list {
	column-gap: 40px;
}

@media (max-width: 900px) {
	.house-rules--small .house-rules__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.house-rules__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.house-rule,
	.house-rule:last-child {
		min-height: 0;
		padding: 18px 0 18px 54px;
	}

	.house-rule__icon {
		top: 16px;
	}

	.house-rule__value {
		padding-left: 0;
	}
}

/* ==========================================================================
   Get in touch: a rounded colour card, contacts as white tiles
   ========================================================================== */

.get-in-touch {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	width: calc(100% - 2 * var(--gutter));
	max-width: var(--container);
	margin: 0 auto var(--section-space);
	overflow: hidden;
	border-radius: calc(var(--radius-large) + 6px);
	background: var(--tint-fill);
}

.get-in-touch--no-photo {
	grid-template-columns: minmax(0, 1fr);
}

.get-in-touch__content,
.get-in-touch--no-photo .get-in-touch__content {
	max-width: none;
	margin: 0;
	padding: clamp(36px, 5vw, 80px);
}

.get-in-touch .section-title {
	margin-bottom: 20px;
}

.get-in-touch__text {
	max-width: 52ch;
	color: var(--color-text-muted);
}

.get-in-touch__photo {
	padding: 14px 14px 14px 0;
}

.get-in-touch__photo img {
	min-height: 440px;
	max-height: 680px;
	border-radius: var(--radius-large);
}

.contact-items,
.contact-items:where(:has(> :nth-child(4))) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 32px;
	text-align: left;
}

.contact-items:not(:has(> :nth-child(2))) {
	grid-template-columns: minmax(0, 1fr);
}

/* Three: the last one across */
.contact-item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* A tile: the icon in a circle on top, the title, the value */
.contact-item {
	align-items: flex-start;
	gap: 2px;
	padding: 18px 20px 20px;
	border-radius: var(--radius-medium);
	background: var(--card);
}

.contact-item__icon {
	box-sizing: content-box;
	margin-bottom: 12px;
	width: 20px;
	height: 20px;
	padding: 11px;
	border-radius: 50%;
	background: var(--tint-fill);
	color: var(--accent-ink);
}

.contact-item__title {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-muted);
}

.contact-item__value {
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
}

a.contact-item__value {
	color: var(--accent-ink);
	text-decoration: none;
}

a.contact-item__value:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	.get-in-touch {
		grid-template-columns: minmax(0, 1fr);
	}

	.get-in-touch__photo {
		order: -1;
		padding: 10px 10px 0;
	}

	.get-in-touch__photo img {
		min-height: 0;
		height: auto;
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 768px) {
	.get-in-touch__content,
	.get-in-touch--no-photo .get-in-touch__content {
		padding: 28px 20px 24px;
	}

	.contact-items,
	.contact-items:where(:has(> :nth-child(4))) {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.contact-item:last-child:nth-child(odd) {
		grid-column: auto;
	}

	/* Phones: a row each, the icon at the left */
	.contact-item {
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr);
		align-items: center;
		gap: 0 14px;
		padding: 14px 16px;
	}

	.contact-item__icon {
		grid-row: 1 / 3;
		margin: 0;
	}

	.contact-item__title,
	.contact-item__value {
		grid-column: 2;
	}
}

/* ==========================================================================
   Rooms (villas with room types): rounded cards
   ========================================================================== */

.rooms__grid {
	gap: 20px;
}

.room-card {
	border: 1px solid var(--line);
	border-radius: var(--radius-large);
	background: var(--card);
	box-shadow: none;
}

.room-card__photo {
	padding: 10px 10px 0;
}

.room-card__photo img {
	border-radius: calc(var(--radius-large) - 6px);
}

.room-card__name {
	font-size: 28px;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.room-card__price {
	color: var(--accent-ink);
}

/* ==========================================================================
   Footer: dark plum ink, rounded top corners
   ========================================================================== */

.site-footer {
	padding-block: clamp(56px, 5vw, 80px) 40px;
	border-radius: calc(var(--radius-large) + 10px) calc(var(--radius-large) + 10px) 0 0;
	color: #cfc6d2;
}

.site-footer__menu a {
	color: #f3edf4;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
}

.site-footer__menu a:hover {
	color: #fff;
	text-decoration: underline;
}

.site-footer__legal a {
	color: #f3edf4;
}

.platform-link {
	color: #e3dbe5;
}

/* ==========================================================================
   Theme pages: a rounded photo band inside the page, a rounded card over it
   ========================================================================== */

.theme-page {
	--theme-page-card-overlap: clamp(90px, 8vw, 140px);
	background: var(--paper);
}

.theme-page__band {
	height: calc(var(--theme-page-card-overlap) + clamp(110px, 13vw, 240px));
	margin: 8px var(--edge) 0;
	border-radius: var(--radius-large);
	background: var(--plum-deep);
}

.theme-page__band::after {
	background: rgb(20 12 20 / 0.12);
}

.theme-page__card {
	border-radius: var(--radius-large);
	background: var(--card);
	box-shadow: var(--shadow-card);
}

.theme-page__title {
	font-size: clamp(36px, 3.8vw, 62px);
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-align: left;
}

.theme-page__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-top: 20px;
	border-radius: 2px;
	background: var(--color-accent);
}

@media (max-width: 768px) {
	.theme-page {
		--theme-page-card-overlap: 48px;
		padding-bottom: var(--section-space);
	}

	.theme-page__band {
		margin-top: 4px;
	}

	.theme-page > .container {
		padding-inline: calc(var(--gutter) + 8px);
	}

	.theme-page__card {
		padding-inline: 20px;
	}
}

/* Gallery page */
.gallery-filter__button {
	padding: 9px 18px;
	background: var(--card);
	font-weight: 500;
}

.gallery-filter__button[aria-pressed="true"] {
	color: var(--on-button);
}

.gallery-grid {
	gap: 14px;
}

.gallery-grid__item {
	border-radius: var(--radius-medium);
}

.gallery-grid__caption {
	left: 10px;
	right: auto;
	bottom: 10px;
	max-width: calc(100% - 20px);
	padding: 4px 12px;
	border-radius: 999px;
	background: rgb(255 253 249 / 0.92);
	color: var(--ink);
	text-shadow: none;
}

@media (max-width: 768px) {
	.gallery-grid {
		gap: 8px;
	}

	.gallery-grid__item {
		border-radius: var(--radius-small);
	}
}

/* Availability page */
.availability-form-section--plain .availability-form {
	border-radius: 0;
	background: none;
}

.availability-result__notice {
	border-left: 0;
	border-radius: var(--radius-small);
	background: var(--tint-fill);
}

.availability-result__price strong {
	font-weight: 500;
}

.photo-slider,
.availability-room,
.availability-room__photo img {
	border-radius: var(--radius-medium);
}

.photo-slider {
	overflow: hidden;
}

.booking-request__form input {
	border-radius: var(--radius-small);
}

/* About page */
.about-page__photo,
.about-page__photo img {
	border-radius: var(--radius-large);
}

.about-page__title,
.about-page__subtitle {
	font-weight: 500;
	letter-spacing: -0.02em;
}

.about-page__subtitle {
	text-align: left;
}

.about-page__location {
	text-align: left;
}

.about-page__address,
.about-page__nearby {
	justify-content: flex-start;
	margin-left: 0;
}

.about-page__map,
.about-page__map-load,
.about-page__map iframe {
	overflow: hidden;
	border-radius: var(--radius-medium);
}

.about-page__map-load {
	border-color: rgb(31 26 36 / 0.18);
}

.about-page__map-button {
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
}

.owner-card {
	padding: clamp(22px, 2.6vw, 36px);
	border-radius: var(--radius-large);
	background: var(--tint-fill);
}

.owner-card__label {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--card);
	color: var(--accent-ink);
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
}

.owner-card__avatar {
	color: var(--on-accent);
}

.theme-page__book {
	text-align: left;
}

/* Lightbox */
.lightbox__image {
	border-radius: var(--radius-small);
}