/* ==========================================================================
   Fonts (self-hosted, latin + latin-ext: EN, IT, RO, SR Latin)
   ========================================================================== */

@font-face {
	font-family: "Libre Baskerville";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/libre-baskerville-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: "Libre Baskerville";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/libre-baskerville-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: "Libre Baskerville";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/libre-baskerville-latin-700-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: "Libre Baskerville";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/libre-baskerville-latin-ext-700-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: "Open Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/open-sans-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: "Open Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/open-sans-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: "Open Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/open-sans-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: "Open Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/open-sans-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-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/open-sans-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: "Open Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/open-sans-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-face {
	font-family: "Great Vibes";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/great-vibes-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: "Great Vibes";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/great-vibes-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;
}

/* ==========================================================================
   Design tokens (docs/ui.md)
   ========================================================================== */

:root {
	--color-text: #2b2b2b;
	--color-text-muted: #6b6b6b;
	--color-bg: #ffffff;
	--color-bg-soft: #f5f5f5;
	--color-bg-sand: #f6f3ee; /* warm light background, e.g. Get in Touch */
	--color-dark: #111111;
	--color-accent: #6e6f52; /* overridden per villa */
	--color-button: #111111; /* all buttons; overridden per villa */
	--color-footer: #262626;
	--color-border: rgb(0 0 0 / 0.08);

	--color-day-available: #e6f3f1;
	--color-day-today: #3d3d3d;
	--color-day-booked: #e57373;
	--color-day-past: #eef0f3;

	--font-heading: "Libre Baskerville", Georgia, "Times New Roman", serif;
	--font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-script: "Great Vibes", cursive;

	/* About two thirds of the screen: 1040px on laptops, up to 1560px on wide screens. */
	--container: clamp(1040px, 68vw, 1560px);
	--gutter: 40px;
	--section-space: clamp(90px, 7.5vw, 150px);
	--header-height: 90px;
	--shadow-card: 0 10px 40px rgb(0 0 0 / 0.08);
	--radius: 8px;
}

@media (min-width: 1920px) {
	body {
		font-size: 17px;
	}
}

@media (max-width: 768px) {
	:root {
		--gutter: 16px;
		--section-space: 60px;
		--header-height: 72px;
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 16px);
}

/* Every page is at least as tall as the screen: main grows, the footer stays at the bottom */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* Logged in: the admin bar (32px, 46px on phones) takes part of the screen */
body.admin-bar {
	min-height: calc(100svh - 32px);
}

@media (max-width: 782px) {
	body.admin-bar {
		min-height: calc(100svh - 46px);
	}
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 1.25;
	margin: 0 0 0.5em;
}

p {
	margin: 0 0 1em;
}

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

img {
	display: block;
	max-width: 100%;
	height: auto;
}

.icon {
	width: 1.5em;
	height: 1.5em;
	flex-shrink: 0;
}

.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 1000;
	padding: 8px 16px;
	background: #fff;
}

/* ==========================================================================
   Buttons and headings
   ========================================================================== */

.button {
	display: inline-flex;
	background: var(--color-button);
	color: #fff;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 28px;
	border: 0;
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	/* Background only: opacity is left to the GSAP entrance animations, and buttons stay solid on photos */
	transition: background-color 0.2s ease;
}

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

.section-header--center {
	text-align: center;
	margin-bottom: clamp(40px, 3.5vw, 64px);
}

.section-label {
	margin: 0 0 12px;
	color: var(--color-accent);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

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

.section-title {
	font-size: clamp(28px, 2.4vw, 48px);
}

.section-header--center .section-title {
	max-width: 640px;
	margin-inline: auto;
}

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

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	min-height: var(--header-height);
}

.site-branding {
	display: flex;
	flex-direction: column;
	min-width: 0; /* lets a long location wrap instead of running under the buttons */
	color: var(--color-text);
	text-decoration: none;
	margin-right: auto;
}

.site-branding__logo {
	max-height: 56px;
	width: auto;
}

.site-branding__name {
	font-family: var(--font-heading);
	font-size: 20px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.2;
}

.site-branding__location {
	color: var(--color-text-muted);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.site-nav__menu {
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__menu a {
	color: var(--color-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.site-nav__menu a:hover {
	color: var(--color-accent);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* WhatsApp buttons in WhatsApp green: the one exception to the single button colour */
.button--whatsapp {
	background: #25d366;
}

.button--whatsapp:hover {
	background: #1ebe5a;
}

.header-whatsapp {
	gap: 8px;
	padding: 0 20px;
}

.header-whatsapp__icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.site-nav__book,
.site-nav__whatsapp,
.site-nav__close,
.site-nav__languages {
	display: none;
}

/* Language switcher: "EN ▾" with the villa's languages */
.language-switcher {
	position: relative;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.language-switcher summary {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 6px;
	list-style: none;
	cursor: pointer;
}

.language-switcher summary::-webkit-details-marker {
	display: none;
}

.language-switcher summary::after {
	content: "";
	width: 6px;
	height: 6px;
	margin: -3px 0 0 4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.language-switcher[open] summary::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.language-switcher ul {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 30;
	min-width: 0;
	margin: 6px 0 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	box-shadow: var(--shadow-card);
}

.language-flag {
	flex-shrink: 0;
	width: 20px;
	height: 14px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
}

.language-switcher__code {
	min-width: 22px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.language-switcher a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	color: var(--color-text);
	font-weight: 400;
	letter-spacing: 0;
	text-decoration: none;
}

.language-switcher a:hover,
.language-switcher a.is-current {
	color: var(--color-accent);
}

.language-switcher a.is-current {
	font-weight: 600;
}

/* Phone menu: the languages in a row */
.language-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.language-list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-size: 13px;
	text-decoration: none;
}

.language-list a.is-current {
	border-color: var(--color-text);
	font-weight: 600;
}

/* ☰ while closed, ✕ while open */
.menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
	display: block;
}

.menu-toggle {
	display: none;
	padding: 8px;
	border: 0;
	background: none;
	color: var(--color-text);
	cursor: pointer;
}

@media (max-width: 900px) {
	.site-header__inner {
		gap: 16px;
	}

	.site-branding__name {
		font-size: 16px;
		letter-spacing: 0.1em;
		white-space: nowrap;
	}

	.site-branding__location {
		font-size: 10px;
		letter-spacing: 0.12em;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: 24px var(--gutter);
		background: #fff;
		border-bottom: 1px solid var(--color-border);
		box-shadow: var(--shadow-card);
	}

	.site-nav.is-open {
		display: block;
	}

	.site-nav__menu {
		flex-direction: column;
		gap: 20px;
	}

	/* BOOK moves from the header bar into the menu */
	.site-header__book {
		display: none;
	}

	.site-nav__book {
		display: flex;
		width: 100%;
		margin-top: 24px;
	}

	.site-header__actions .language-switcher {
		display: none;
	}

	.site-nav__languages {
		display: block;
		margin-top: 24px;
	}

	.site-nav__whatsapp {
		display: flex;
		gap: 10px;
		width: 100%;
		margin-top: 12px;
	}

	.site-nav__close {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		margin-top: 12px;
		padding: 10px;
		border: 1px solid var(--color-border);
		background: none;
		color: var(--color-text);
		font: inherit;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.site-nav__close-icon {
		width: 18px;
		height: 18px;
	}

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

	.site-header__actions {
		gap: 8px;
	}

	/* Tablets and phones: WhatsApp as a square icon button, so the header fits */
	.site-header .header-whatsapp {
		width: 40px;
		padding: 0;
	}

	.header-whatsapp__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	min-height: max(560px, calc(100svh - var(--header-height))); /* fills the screen under the header */
	padding: 96px 0 128px; /* bottom: room for "Scroll to learn more" */
	color: #fff;
	background: #3b3a35;
	overflow: hidden;
}

/* Logged in: the admin bar (32px, 46px on phones) also sits above the hero */
.admin-bar .hero {
	min-height: max(560px, calc(100svh - var(--header-height) - 32px));
}

@media (max-width: 782px) {
	.admin-bar .hero {
		min-height: max(560px, calc(100svh - var(--header-height) - 46px));
	}
}

.hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.28);
}

.hero__inner {
	position: relative;
	z-index: 1;
}

.hero__content {
	text-align: center;
}

.hero__title {
	font-size: clamp(44px, 5vw, 80px);
	white-space: nowrap; /* one line on tablets and desktops; phones wrap (below) */
	margin-bottom: 20px;
}

.hero__text {
	max-width: 660px;
	margin-inline: auto;
	font-size: 17px;
	line-height: 1.8;
}

/* "Scroll to learn more" at the bottom center; the wheel of the mouse icon moves down gently */
.hero__scroll {
	position: absolute;
	bottom: 28px;
	left: 50%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	transform: translateX(-50%);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	opacity: 0.85; /* no opacity transition: GSAP fades this link in */
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
	opacity: 1;
}

.hero__scroll-icon {
	width: 26px;
	height: 26px;
}

.hero__scroll-icon path {
	animation: hero-scroll-wheel 1.8s ease-in-out infinite;
}

@keyframes hero-scroll-wheel {
	0% { transform: translateY(0); opacity: 1; }
	70% { transform: translateY(4px); opacity: 0; }
	100% { transform: translateY(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__scroll-icon path {
		animation: none;
	}
}

/* Phones: the title may wrap */
@media (max-width: 768px) {
	.hero {
		gap: 28px;
		padding: 56px 0 112px;
	}

	.hero__title {
		font-size: 34px;
		white-space: normal;
		margin-bottom: 14px;
	}

	.hero__text {
		font-size: 15px;
		line-height: 1.7;
	}
}

/* ==========================================================================
   Availability form
   ========================================================================== */

.availability-form-section {
	position: relative;
	z-index: 2;
	color: var(--color-text);
}

.availability-form {
	display: grid;
	grid-template-columns: 1fr 1fr 0.7fr auto;
	align-items: end;
	gap: 20px;
	max-width: calc(var(--container) * 0.85);
	margin-inline: auto;
	padding: 28px 32px;
	background: #fff;
	box-shadow: var(--shadow-card);
}

.availability-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.availability-form__field label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.availability-form input,
.availability-form select {
	width: 100%;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #dcdcdc;
	border-radius: 0;
	background: #fff;
	color: var(--color-text);
	font: inherit;
	font-size: 15px;
}

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

@media (max-width: 768px) {
	/* One field per line, everything full width */
	.availability-form {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 20px;
	}

	/* Content buttons full width on phones (the header BOOK button stays compact) */
	.site-main .button {
		width: 100%;
	}

	.video-band__content {
		align-items: stretch;
	}
}

/* Date picker (flatpickr) ------------------------------------------------ */

.availability-form input[readonly] {
	cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat right 14px center;
	padding-right: 42px;
}

.flatpickr-calendar {
	width: 340px;
	background: #fff;
	animation: none;
	margin-top: 8px;
	padding: 16px 16px 14px;
	border: 1px solid var(--color-border);
	border-radius: 0;
	box-shadow: 0 16px 48px rgb(0 0 0 / 0.12);
	font-family: var(--font-body);
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
	display: none;
}

/* Header: "October 2026" with plain arrows */
.flatpickr-months {
	align-items: center;
	margin-bottom: 10px;
}

.flatpickr-months .flatpickr-month {
	height: 36px;
	color: var(--color-text);
}

.flatpickr-current-month {
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: 36px;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}

.flatpickr-current-month span.cur-month {
	margin: 0;
	font-weight: 600;
}

.flatpickr-current-month span.cur-month:hover {
	background: none;
}

.flatpickr-current-month .numInputWrapper {
	width: 6ch;
	pointer-events: none;
}

.flatpickr-current-month .numInputWrapper span {
	display: none;
}

.flatpickr-current-month input.cur-year {
	font-weight: 600;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	top: 16px; /* same as the calendar padding */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--color-text);
	fill: currentColor;
}

.flatpickr-months .flatpickr-prev-month {
	left: 16px;
}

.flatpickr-months .flatpickr-next-month {
	right: 16px;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	background: var(--color-bg-soft);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--color-accent);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
	width: 12px;
	height: 12px;
}

/* No going back before this month */
.flatpickr-months .flatpickr-disabled {
	visibility: hidden;
}

/* Weekdays */
.flatpickr-weekdays {
	height: 28px;
}

span.flatpickr-weekday {
	color: var(--color-text-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Days: even cells, no gaps */
.flatpickr-days,
.dayContainer {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
}

.dayContainer {
	padding: 0;
}

.flatpickr-day {
	max-width: none;
	height: 46px;
	flex-basis: 14.2857%;
	margin: 0;
	border: 0;
	border-radius: 0;
	color: var(--color-text);
	font-size: 14px;
	line-height: 46px;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
	background: var(--color-bg-soft);
}

.flatpickr-day.today {
	color: var(--color-accent);
	font-weight: 600;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
	background: var(--color-bg-soft);
	color: var(--color-accent);
}

/* Unavailable: past days just fade; booked nights are also struck through */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
	background: none;
	color: #c8cbd0;
	cursor: default;
}

.flatpickr-day.is-booked,
.flatpickr-day.is-booked:hover {
	text-decoration: line-through;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	visibility: hidden;
}

/* Night price under the day number, e.g. "80 €" */
.flatpickr-day.has-price {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
}

.flatpickr-day__price {
	color: var(--color-text-muted);
	font-size: 10px;
	font-weight: 400;
}

.flatpickr-day.selected .flatpickr-day__price,
.flatpickr-day.startRange .flatpickr-day__price,
.flatpickr-day.endRange .flatpickr-day__price {
	color: rgb(255 255 255 / 0.8);
}

/* The stay: check-in and check-out filled, nights in between tinted */
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
	background: color-mix(in srgb, var(--color-accent) 12%, #fff);
	box-shadow: none;
	color: var(--color-text);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.flatpickr-disabled.startRange,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange {
	border-radius: 0;
	background: var(--color-accent);
	box-shadow: none;
	color: #fff;
	text-decoration: none;
}

/* Hint under the days, e.g. "Minimum stay: 3 nights" */
.flatpickr-hint {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: 12px;
	text-align: left;
}

/* Guests select (Choices.js) ---------------------------------------------- */

.availability-form .choices {
	margin: 0;
	font-size: 15px;
}

.availability-form .choices__inner {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid #dcdcdc;
	border-radius: 0;
	background: #fff;
}

.availability-form .choices__list--single {
	padding: 0;
}

.availability-form .choices[data-type*="select-one"]::after {
	right: 16px;
	border-color: var(--color-text-muted) transparent transparent;
}

.availability-form .choices[data-type*="select-one"].is-open::after {
	border-color: transparent transparent var(--color-text-muted);
}

.availability-form .choices.is-focused .choices__inner,
.availability-form .choices.is-open .choices__inner {
	border-color: var(--color-accent);
	border-radius: 0;
}

.availability-form .choices__list--dropdown {
	border: 1px solid #dcdcdc;
	border-radius: 0;
	box-shadow: var(--shadow-card);
}

.availability-form .choices__list--dropdown .choices__item {
	padding: 10px 14px;
	font-size: 15px;
}

.availability-form .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background: var(--color-day-available);
}

/* ==========================================================================
   About
   ========================================================================== */

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

.about__content {
	max-width: 640px;
}

.about--no-photo .about__inner {
	grid-template-columns: minmax(0, 1fr);
	max-width: 860px;
}

.about__photo,
.about-page__photo {
	overflow: hidden; /* the photo settles from a slight zoom (animations.js) */
}

.about__photo img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

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

.about__signature {
	margin: 24px 0 28px;
	font-family: var(--font-script);
	font-size: 40px;
	line-height: 1;
	color: var(--color-text);
}

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

	.about__inner {
		gap: 32px;
	}

	/* Portrait, but never taller than most of the screen */
	.about__photo img {
		aspect-ratio: 1 / 1;
		max-height: 70vh;
	}
}

/* ==========================================================================
   Small gallery
   ========================================================================== */

.small-gallery {
	padding-top: 0;
}

.small-gallery .section-title {
	margin-bottom: clamp(24px, 2vw, 40px);
}

.small-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(2, clamp(180px, 20vw, 260px));
	gap: 14px;
}

.small-gallery__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--color-bg-soft);
}

.small-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.small-gallery__item:hover img {
	transform: scale(1.04);
}

/* 1 large left, 2 wide top right, 3 and 4 small bottom right */
.small-gallery__grid--4 .small-gallery__item:nth-child(1),
.small-gallery__grid--3 .small-gallery__item:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

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

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

.small-gallery__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: clamp(260px, 30vw, 420px);
}

.small-gallery__grid--1 {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: clamp(260px, 40vw, 520px);
}

/* The photos after the mosaic share the whole width, however many there are (1 to 4) */
.small-gallery__row {
	display: flex;
	gap: 14px;
	height: clamp(160px, 14vw, 240px);
	margin-top: 14px;
}

.small-gallery__row > .small-gallery__item {
	flex: 1 1 0;
	min-width: 0;
}

.small-gallery__caption {
	position: absolute;
	left: 16px;
	bottom: 12px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-shadow: 0 1px 6px rgb(0 0 0 / 0.6);
}

@media (max-width: 768px) {
	.small-gallery__grid,
	.small-gallery__grid--2,
	.small-gallery__grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: 42vw;
	}

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

	/* Two per line; a photo left alone at the end takes the whole width */
	.small-gallery__row {
		flex-wrap: wrap;
		height: auto;
	}

	.small-gallery__row > .small-gallery__item {
		flex: 1 1 calc(50% - 7px);
		height: 42vw;
	}

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

/* ==========================================================================
   Video band
   ========================================================================== */

.video-band {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 40vw, 660px);
	margin-bottom: var(--section-space);
	background: #2f4a55;
	color: #fff;
	text-align: center;
	overflow: hidden;
}

.video-band__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 75%; /* keep the beach in view; most villa videos are filmed from above */
}

.video-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.22);
}

.video-band__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.video-band__title {
	margin: 0;
	font-size: clamp(36px, 5vw, 84px);
	letter-spacing: 0.04em;
	line-height: 1.1;
	text-transform: uppercase;
	text-shadow: 0 2px 24px rgb(0 0 0 / 0.25);
}

/* ==========================================================================
   Amenities
   ========================================================================== */

.amenities {
	padding-top: 0;
}

/* Even rows, last row centred: the template sets the columns from the number of amenities */
.amenities__grid {
	--amenity-gap: 16px;
	--amenity-columns-now: var(--amenity-columns, 6);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--amenity-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.amenities__grid > .amenity {
	flex: 0 0 calc((100% - (var(--amenity-columns-now) - 1) * var(--amenity-gap)) / var(--amenity-columns-now));
}

.amenity {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 20px;
	background: #fff;
	box-shadow: 0 4px 24px rgb(0 0 0 / 0.06);
}

.amenity__icon {
	width: 28px;
	height: 28px;
	color: var(--color-accent);
	stroke-width: 1.4;
}

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

@media (max-width: 1100px) {
	.amenities__grid {
		--amenity-columns-now: var(--amenity-columns-tablet, 3);
	}
}

@media (max-width: 600px) {
	.amenities__grid {
		--amenity-columns-now: var(--amenity-columns-phone, 2);
		--amenity-gap: 12px;
	}
}

/* ==========================================================================
   Guest reviews
   ========================================================================== */

/* Right after the prices calendar, whose bottom space is enough */
.reviews {
	padding-top: 0;
}

/* One row of up to three cards of equal height; one or two cards stay centred */
.reviews__list {
	display: flex;
	justify-content: center;
	gap: 22px;
	max-width: 960px;
	margin: 0 auto;
}

.review {
	display: flex;
	flex: 0 1 calc((100% - 44px) / 3);
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	margin: 0;
	padding: 24px 24px 26px;
	background: #fff;
	box-shadow: 0 6px 28px rgb(0 0 0 / 0.07);
}

.review__author {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.review__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-dark);
}

.review__country {
	color: var(--color-text-muted);
	font-size: 12px;
}

.review__text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 13px;
	line-height: 1.65;
}

.review__text p {
	margin: 0;
}

.review__text p + p {
	margin-top: 8px;
}

.review__stars {
	margin: auto 0 0; /* stars on one line at the bottom of every card */
	color: #f2b01e;
	font-size: 14px;
	letter-spacing: 3px;
	line-height: 1;
}

.review__stars-off {
	color: #e3e3e3;
}

.reviews__action {
	margin: 36px 0 0;
	text-align: center;
}

/* Phone: the cards one under the other */
@media (max-width: 760px) {
	.reviews__list {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		max-width: 520px;
	}

	.review {
		flex-basis: auto;
		padding: 20px 18px;
	}
}

/* ==========================================================================
   House rules
   ========================================================================== */

/* Right after the prices calendar, whose bottom space is enough */
.house-rules:not(.house-rules--small) {
	padding-top: 0;
}

/* Rows: icon and name on the left, the rule on the right */
.house-rules__list {
	max-width: 960px;
	margin: 0 auto;
	padding: 8px clamp(20px, 3vw, 40px);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: #fff;
}

.house-rule {
	display: grid;
	grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
	gap: 8px 32px;
	padding: 22px 0;
	border-bottom: 1px solid var(--color-border);
}

.house-rule:last-child {
	border-bottom: 0;
}

.house-rule__name {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-weight: 600;
}

.house-rule__icon {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--color-accent);
	stroke-width: 1.5;
}

.house-rule__value {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 15px;
}

.house-rule__value p {
	margin: 0;
}

.house-rule__value p + p {
	margin-top: 6px;
}

/* Inside a page card (Availability result) */
.house-rules--small {
	margin-top: var(--page-gap);
	padding-top: var(--page-gap);
	border-top: 1px solid var(--color-border);
}

.house-rules__title {
	margin-bottom: var(--page-gap-small);
	font-size: clamp(22px, 1.8vw, 28px);
}

.house-rules--small .house-rules__list {
	max-width: none;
}

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

	.house-rule__value {
		padding-left: 34px;
	}
}

/* ==========================================================================
   Prices and availability calendar
   ========================================================================== */

.prices {
	padding-top: 0;
	--prices-card-overlap: 180px; /* how far the calendar card climbs onto the photo */
}

/* The calendar card starts 40px under the heading: band bottom padding = overlap + 40px */
.prices__band {
	position: relative;
	display: flex;
	align-items: center;
	padding: 96px 0 calc(var(--prices-card-overlap) + 40px);
	background: #3b3a35;
	text-align: center;
	overflow: hidden;
}

.prices__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.prices__band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.3);
}

.prices__heading {
	position: relative;
	z-index: 1;
}

@media (max-width: 768px) {
	.prices {
		--prices-card-overlap: 120px;
	}

	.prices__band {
		padding-top: 64px;
	}
}

.prices__card {
	position: relative;
	z-index: 2;
	margin: calc(-1 * var(--prices-card-overlap)) auto 0;
	padding: 40px clamp(20px, 4vw, 56px) 32px;
	background: #fff;
	box-shadow: var(--shadow-card);
}

.calendar {
	position: relative;
}

.calendar__nav {
	position: absolute;
	top: -6px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}

.calendar__button {
	display: inline-flex;
	padding: 6px;
	border: 0;
	background: none;
	color: var(--color-text);
	cursor: pointer;
	pointer-events: auto;
}

.calendar__button:disabled {
	opacity: 0.25;
	cursor: default;
}

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

.calendar-month[hidden] {
	display: none;
}

.calendar-month__title {
	margin-bottom: 18px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}

.calendar-month__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 3px;
}

.calendar-month__weekday {
	padding-bottom: 8px;
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

.calendar-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	font-size: 14px;
}

.calendar-day__price {
	color: var(--color-text-muted);
	font-size: 11px;
}

.calendar-day--available {
	background: var(--color-day-available);
}

.calendar-day--today {
	background: var(--color-day-today);
	color: #fff;
}

.calendar-day--today .calendar-day__price {
	color: rgb(255 255 255 / 0.75);
}

.calendar-day--booked {
	background: var(--color-day-booked);
	color: #fff;
}

.calendar-day--past {
	background: var(--color-day-past);
	color: #b4b8bf;
}

.calendar__legend {
	display: flex;
	flex-wrap: wrap;
	row-gap: 8px;
	gap: 24px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	color: var(--color-text-muted);
	font-size: 13px;
}

.calendar__legend li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.calendar__note {
	margin: 12px 0 0;
	color: var(--color-text-muted);
	font-size: 13px;
}

.calendar__swatch {
	width: 14px;
	height: 14px;
}

.calendar__swatch--available {
	background: var(--color-day-available);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06); /* the pale colour needs an edge on white */
}

.calendar__swatch--past {
	background: var(--color-day-past);
}

.calendar__swatch--today {
	background: var(--color-day-today);
}

.calendar__swatch--booked {
	background: var(--color-day-booked);
}

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

	.calendar-day {
		min-height: 46px;
	}
}

/* ==========================================================================
   Get in touch
   ========================================================================== */

.get-in-touch {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: var(--color-bg-sand);
}

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

.get-in-touch__content {
	align-self: center;
	width: 100%;
	max-width: calc(var(--container) / 2);
	margin-left: auto;
	padding: var(--section-space) clamp(24px, 5vw, 80px) var(--section-space) var(--gutter);
}

.get-in-touch--no-photo .get-in-touch__content {
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.get-in-touch__text {
	color: var(--color-text-muted);
}

.get-in-touch__photo img {
	width: 100%;
	height: 100%;
	min-height: 420px;
	max-height: 640px;
	object-fit: cover;
}

.contact-items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.contact-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.contact-item__icon {
	width: 22px;
	height: 22px;
	color: var(--color-text);
}

.contact-item__title {
	font-family: var(--font-heading);
	font-size: 17px;
}

.contact-item__value {
	color: var(--color-text-muted);
	font-size: 14px;
}

a.contact-item__value {
	color: var(--color-accent);
}

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

	.get-in-touch__content {
		max-width: none;
		padding-inline: var(--gutter);
	}

	.contact-items {
		grid-template-columns: minmax(0, 1fr);
		text-align: left;
	}

	.contact-item {
		align-items: flex-start;
	}

	.get-in-touch__photo img {
		min-height: 280px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	padding-block: 56px 40px;
	background: var(--color-footer);
	color: #bdbdbd;
	text-align: center;
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}

.site-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__menu a {
	color: #e0e0e0;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.site-footer__platforms {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__platforms:empty {
	display: none;
}

.platform-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgb(255 255 255 / 0.22);
	border-radius: 50%;
	color: #bdbdbd;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

/* The brand SVGs have no colour of their own; all of them follow the link colour */
.platform-link__icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Square logos look heavier than the Airbnb outline; a little smaller balances them */
.platform-link__icon--brand-bookingdotcom,
.platform-link__icon--brand-vrbo {
	width: 16px;
	height: 16px;
}

.platform-link:hover,
.platform-link:focus-visible {
	color: #fff;
	border-color: rgb(255 255 255 / 0.6);
	background-color: rgb(255 255 255 / 0.06);
}

.site-footer__copyright {
	margin: 0;
	font-size: 13px;
}

/* Privacy Policy link and the registration number (ΑΜΑ) */
.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 20px;
	margin: -16px 0 0;
	font-size: 12px;
}

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

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
	max-width: 92vw;
	max-height: 92vh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.lightbox::backdrop {
	background: rgb(0 0 0 / 0.88);
}

.lightbox__figure {
	margin: 0;
}

.lightbox__image {
	max-width: 92vw;
	max-height: 84vh;
	object-fit: contain;
}

.lightbox__caption {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 10px;
	color: #e0e0e0;
	font-size: 13px;
}

.lightbox__counter {
	margin-left: auto;
	color: #a0a0a0;
	font-variant-numeric: tabular-nums;
}

.lightbox__close {
	position: absolute;
	top: -44px;
	right: 0;
	padding: 6px;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}

/* Previous / next: at the screen edges, over the backdrop */
.lightbox__nav {
	position: fixed;
	top: 50%;
	display: inline-flex;
	padding: 10px;
	border: 0;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.45);
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s ease;
}

.lightbox__nav:hover {
	background: rgb(0 0 0 / 0.75);
}

.lightbox__nav[hidden] {
	display: none;
}

.lightbox__nav--prev {
	left: 16px;
}

.lightbox__nav--next {
	right: 16px;
}

/* ==========================================================================
   Theme pages: Gallery and Availability
   ========================================================================== */

/* A still photo band, and a white card with the title over its lower part */
.site-main {
	flex: 1 0 auto;
}

/* On the theme pages the grey background reaches the footer */
.site-main:has(> .theme-page) {
	display: flex;
	flex-direction: column;
}

.theme-page {
	/* Common spacing of the theme pages; smaller on phones (below) */
	--theme-page-card-overlap: clamp(110px, 10vw, 170px);
	--page-pad-x: clamp(20px, 5vw, 80px); /* card sides */
	--page-pad-y: clamp(32px, 4vw, 64px); /* card top and bottom */
	--page-gap: clamp(32px, 4vw, 56px); /* between blocks */
	--page-gap-small: 24px; /* inside a block */
	flex: 1 0 auto;
	padding-bottom: var(--section-space);
	background: var(--color-bg-soft);
}

@media (max-width: 768px) {
	.theme-page {
		--theme-page-card-overlap: 56px;
		--page-pad-x: var(--gutter);
		--page-pad-y: 28px;
		--page-gap: 28px;
		--page-gap-small: 16px;
		padding-bottom: 0;
	}

	/* The card spans the screen: the page gutter is its own padding */
	.theme-page > .container {
		padding-inline: 0;
	}
}

.theme-page__band {
	position: relative;
	height: calc(var(--theme-page-card-overlap) + clamp(120px, 16vw, 280px));
	background: #3b3a35;
	overflow: hidden;
}

.theme-page__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.theme-page__band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.2);
}

.theme-page__card {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: calc(-1 * var(--theme-page-card-overlap)) auto 0;
	padding: var(--page-pad-y) var(--page-pad-x);
	background: #fff;
}

.theme-page__title {
	margin-bottom: var(--page-gap);
	font-size: clamp(28px, 3vw, 46px);
	text-align: center;
}

.theme-page__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	color: var(--color-text-muted);
	text-align: center;
}

/* Gallery page: same-shape photos in 3 columns (2 on phones) */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.gallery-grid__item {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-bg-soft);
}

.gallery-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.gallery-grid__item:hover img {
	transform: scale(1.04);
}

.gallery-grid__caption {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 12px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-shadow: 0 1px 6px rgb(0 0 0 / 0.6);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.gallery-grid__item:hover .gallery-grid__caption,
.gallery-grid__item:focus-visible .gallery-grid__caption {
	opacity: 1;
}

@media (max-width: 768px) {
	.gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}
}

/* Availability page: the search form sits in the card, without a card of its own */
.availability-form-section--plain .availability-form {
	max-width: none;
	padding: 0;
	box-shadow: none;
}

.availability-result,
.availability-message {
	margin-top: var(--page-gap);
	padding-top: var(--page-gap);
	border-top: 1px solid var(--color-border);
}

.availability-result__summary {
	margin: 0 0 var(--page-gap-small);
	color: var(--color-text-muted);
}

/* No iCal: the dates are a request until the villa confirms them */
.availability-result__notice {
	margin: calc(var(--page-gap-small) * -0.5) 0 var(--page-gap-small);
	padding: 12px 16px;
	border-left: 3px solid var(--color-accent);
	background: var(--color-bg-sand);
	font-size: 15px;
}

.availability-result__villa {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
	gap: var(--page-gap);
	align-items: start;
}

.availability-result__villa--no-photo {
	grid-template-columns: minmax(0, 1fr);
}

.availability-result__name {
	margin-bottom: 16px;
	font-size: clamp(26px, 2.2vw, 34px);
}

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

/* Key facts: Location, Guests, Size, Beds */
.villa-facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 24px;
	margin: 24px 0;
	font-size: 14px;
}

.villa-facts dt {
	color: var(--color-text-muted);
}

.villa-facts dd {
	margin: 0;
}

.availability-result__price {
	margin: 0;
}

.availability-result__price strong {
	font-family: var(--font-heading);
	font-size: 30px;
	font-weight: 400;
}

.availability-result__price span {
	color: var(--color-text-muted);
}

.availability-result__price--ask {
	color: var(--color-text-muted);
}

.availability-result__breakdown {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	color: var(--color-text-muted);
	font-size: 13px;
}

.availability-result__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var(--page-gap-small);
}

.availability-result__actions .button {
	gap: 10px;
}

.button__icon {
	width: 18px;
	height: 18px;
}

.button--whatsapp .button__icon {
	fill: currentColor;
}

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

/* Photo slider: one photo at a time, fading */
.photo-slider {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-bg-soft);
}

.photo-slider__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.photo-slider__slide.is-active {
	opacity: 1;
}

.photo-slider__button {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: inline-flex;
	padding: 8px;
	border: 0;
	background: #fff;
	color: var(--color-text);
	cursor: pointer;
	transform: translateY(-50%);
}

.photo-slider__button--prev {
	left: 14px;
}

.photo-slider__button--next {
	right: 14px;
}

/* Why there is no result: wrong dates, too short, too many guests, booked */
.availability-message {
	text-align: center;
}

.availability-message__text {
	margin: 0 0 12px;
	font-family: var(--font-heading);
	font-size: clamp(20px, 1.8vw, 26px);
}

.availability-message__dates {
	margin: 0 0 16px;
	color: var(--color-text-muted);
	font-size: 14px;
}

.availability-message__link {
	color: var(--color-accent);
	font-weight: 600;
}

/* About page: photo next to the story, then amenities and Book now */
.about-page {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--page-gap);
	align-items: start;
}

.about-page--no-photo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
	margin-inline: auto;
}

.about-page__photo img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.about-page__title {
	margin-bottom: var(--page-gap-small);
	font-size: clamp(26px, 2.2vw, 34px);
}

/* "Your host" card */
.owner-card {
	display: flex;
	gap: clamp(20px, 3vw, 36px);
	align-items: flex-start;
	margin-top: var(--page-gap);
	padding: var(--page-gap-small);
	background: var(--color-bg-sand);
}

.owner-card__avatar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(80px, 8vw, 112px);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	background: var(--color-accent);
	color: #fff;
	font-family: var(--font-heading);
	font-size: clamp(32px, 3vw, 44px);
}

.owner-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.owner-card__label {
	margin: 0 0 4px;
	color: var(--color-accent);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.owner-card__name {
	margin-bottom: 12px;
	font-size: clamp(24px, 2vw, 30px);
}

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

.owner-card__languages {
	margin: 0 0 var(--page-gap-small);
	font-size: 14px;
}

.owner-card__button {
	gap: 10px;
}

@media (max-width: 600px) {
	.owner-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

.about-page__subtitle {
	margin-bottom: var(--page-gap-small);
	font-size: clamp(22px, 1.8vw, 28px);
	text-align: center;
}

.about-page__location {
	margin-top: var(--page-gap);
	padding-top: var(--page-gap);
	border-top: 1px solid var(--color-border);
	text-align: center;
}

.about-page__address {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: -8px 0 var(--page-gap-small);
	color: var(--color-text-muted);
}

.about-page__address-icon {
	width: 18px;
	height: 18px;
	color: var(--color-accent);
}

.about-page__nearby {
	max-width: 720px;
	margin: 0 auto var(--page-gap-small);
	color: var(--color-text-muted);
}

.about-page__map {
	margin-bottom: 16px;
	aspect-ratio: 16 / 7;
	background: var(--color-bg-soft);
}

.about-page__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Before the map is loaded: a quiet panel with the button */
.about-page__map-load {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	padding: 24px;
	border: 1px dashed rgb(0 0 0 / 0.15);
	background: var(--color-bg-soft);
	color: var(--color-text);
	font: inherit;
	cursor: pointer;
}

.about-page__map-load:hover .about-page__map-button {
	text-decoration: underline;
}

.about-page__map-icon {
	width: 28px;
	height: 28px;
	color: var(--color-accent);
}

.about-page__map-button {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.about-page__map-note {
	color: var(--color-text-muted);
	font-size: 12px;
}

@media (max-width: 768px) {
	.about-page__map {
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   Text pages (Privacy Policy)
   ========================================================================== */

.text-page {
	max-width: 720px;
	margin: 0 auto;
	color: var(--color-text-muted);
	font-size: 15px;
}

.text-page h2 {
	margin: var(--page-gap-small) 0 8px;
	color: var(--color-text);
	font-size: 20px;
}

.text-page p {
	margin: 0 0 12px;
}

.text-page a {
	color: var(--color-accent);
}

.text-page__updated {
	margin-top: var(--page-gap-small);
	font-size: 13px;
}

/* Book now at the end of the About and Gallery pages */
.theme-page__book {
	margin: var(--page-gap) 0 0;
	text-align: center;
}

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

	.about-page__photo img {
		aspect-ratio: 1 / 1;
		max-height: 70vh;
	}
}

/* 404: a large soft code, a short text, the way back */
.not-found {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--page-gap-small);
	text-align: center;
}

.not-found__code {
	margin: calc(-1 * var(--page-gap-small)) 0 0;
	color: var(--color-bg-sand);
	font-family: var(--font-heading);
	font-size: clamp(88px, 14vw, 180px);
	line-height: 1;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.not-found__text {
	max-width: 440px;
	margin: 0;
	color: var(--color-text-muted);
}

.not-found__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.not-found__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	margin: var(--page-gap-small) 0 0;
	padding: 0;
	list-style: none;
}

/* Secondary button: the button colour as an outline */
.button--outline {
	border: 1px solid var(--color-button);
	background: transparent;
	color: var(--color-button);
}

.button--outline:hover {
	background: var(--color-button);
	color: #fff;
}

/* "View all photos" under the home gallery */
.small-gallery__more {
	margin: 24px 0 0;
	text-align: right;
}

.link-arrow {
	color: var(--color-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.link-arrow::after {
	content: " →";
}

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

/* ==========================================================================
   Other pages (blog, pages, 404)
   ========================================================================== */

.entry {
	max-width: 820px;
	padding-block: 64px;
}

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

.page-header {
	padding-block: 40px 0;
}

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 32px;
	padding-block: 40px;
}

.card {
	background: #fff;
	box-shadow: 0 4px 24px rgb(0 0 0 / 0.06);
}

.card__body {
	padding: 20px;
}

.card__title {
	font-size: 20px;
}

.card__title a {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   Animations (js/animations.js)
   ========================================================================== */

/* Hidden only until GSAP takes over; the class is removed after 3s if it never does. */
.villa-animate .hero__title,
.villa-animate .hero__text,
.villa-animate .availability-form,
.villa-animate .hero__scroll {
	visibility: hidden;
}