/*
 * Design "Listing": a different layout, like a premium booking-platform listing page. A compact
 * white header; the villa name and subtitle as a left-aligned page title; a photo mosaic (the hero
 * photo large on the left, the four gallery photos 2x2 on the right); then the content in a left
 * column (About, amenities as an icon grid, prices, reviews, house rules, Get in Touch) between
 * thin grey lines, and the booking form as a white card in a right column that sticks while the
 * page scrolls. Tablets and phones: photos, title, the card, then the content in one column.
 * Inter throughout, 12px corners, white page.
 * Loaded after main.css for villas with "villa.design": "listing". Same sections, order and markup
 * as Classic; only the look and the layout change (the hero and the small gallery dissolve into
 * one grid on main with display: contents). Colours: villa_designs().
 */

/* ==========================================================================
   Fonts (self-hosted, latin + latin-ext + greek)
   ========================================================================== */

@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; }

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	--color-text: #1e2422;
	--color-text-muted: #5b6460;
	--color-bg: #ffffff;
	--color-bg-soft: #f6f7f6;
	--color-bg-sand: #f6f7f6;
	--color-footer: #f6f7f6;
	--color-border: rgb(30 36 34 / 0.12);
	--color-day-available: #e5f0ed;
	--font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--radius: 12px;
	--radius-small: 8px;
	--header-height: 68px;
	--shadow-card: 0 6px 28px rgb(20 28 26 / 0.10), 0 1px 3px rgb(20 28 26 / 0.06);

	/* The listing page: content column, a gap, the booking card */
	--main-w: clamp(760px, 44vw, 880px);
	--col-gap: clamp(40px, 4.5vw, 80px);
	--side-w: clamp(330px, 27vw, 390px);
	--container: calc(var(--main-w) + var(--col-gap) + var(--side-w));
	--mosaic-h: clamp(340px, 30vw, 520px);
	--block-space: 44px;
}

@media (max-width: 768px) {
	:root {
		--header-height: 60px;
		--block-space: 36px;
	}
}

body {
	font-size: 15px;
	line-height: 1.65;
}

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

.button {
	min-height: 46px;
	padding: 0 24px;
	border-radius: var(--radius-small);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.button--outline {
	border-color: var(--color-text);
	color: var(--color-text);
}

.button--outline:hover {
	border-color: var(--color-text);
	background: var(--color-text);
}

.section-header--center {
	text-align: left;
	margin-bottom: 24px;
}

.section-header--center .section-title {
	max-width: none;
	margin-inline: 0;
}

.section-label {
	margin-bottom: 6px;
	font-size: 12px;
	letter-spacing: 0.08em;
}

.section-title {
	font-size: clamp(22px, 1.7vw, 26px);
}

.link-arrow {
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Header: a compact white bar, name left, links and buttons right
   ========================================================================== */

.site-header {
	box-shadow: none;
}

.site-header__inner {
	gap: 24px;
}

.site-branding__name {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
}

.site-branding__location {
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
}

.site-nav__menu {
	gap: 4px;
}

.site-nav__menu a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color 0.2s ease;
}

.site-nav__menu a:hover {
	background: var(--color-bg-soft);
	color: var(--color-text);
}

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

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

.language-switcher {
	letter-spacing: 0;
}

.language-switcher summary {
	padding: 0 10px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
}

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

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

@media (max-width: 900px) {
	.site-nav {
		border-radius: 0 0 var(--radius) var(--radius);
	}

	.site-nav__menu {
		gap: 2px;
	}

	.site-nav__menu a {
		display: block;
		padding: 10px 0;
		font-size: 16px;
	}

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

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

	.site-header .header-whatsapp {
		padding: 0;
	}

	.site-branding__name {
		font-size: 16px;
		letter-spacing: -0.01em;
	}

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

/* ==========================================================================
   The home page grid
   The hero and the small gallery dissolve (display: contents) so their parts land in one grid
   on main: the title on top, a photo mosaic under it (the hero photo large, four gallery photos
   2x2), then the content in a left column and the booking card in a right one, sticky.
   ========================================================================== */

.design-listing .site-main:has(> .hero) {
	display: grid;
	align-content: start;
	padding-bottom: 24px;
}

.design-listing .hero,
.design-listing .small-gallery,
.design-listing .small-gallery > .container {
	display: contents;
}

.design-listing .hero::after,
.design-listing .hero__scroll {
	display: none;
}

/* Every block of the content column: full column width, a thin grey line above */
.design-listing .site-main:has(> .hero) > .section,
.design-listing .site-main:has(> .hero) > .get-in-touch {
	grid-column: main-start / main-end;
	min-width: 0;
	padding-block: var(--block-space);
	border-top: 1px solid var(--color-border);
	background: none;
}

.design-listing .site-main:has(> .hero) > .section > .container,
.design-listing .site-main:has(> .hero) > .section > .prices__band > .container,
.design-listing .about__inner,
.design-listing .hero__inner,
.design-listing .availability-form-section > .container {
	width: auto;
	max-width: none;
	margin: 0;
	padding-inline: 0;
}

/* Title ------------------------------------------------------------------ */

.design-listing .hero__inner {
	grid-column: main-start / side-end;
	min-width: 0;
	padding: 32px 0 22px;
}

.design-listing .hero__content {
	text-align: left;
}

.design-listing .hero__title {
	margin: 0 0 8px;
	color: var(--color-text);
	font-size: clamp(28px, 2.3vw, 36px);
	font-weight: 600;
	letter-spacing: -0.025em;
	white-space: normal;
}

.design-listing .hero__text {
	max-width: 820px;
	margin: 0;
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.6;
}

.design-listing .hero__text p {
	margin: 0;
}

/* Photo mosaic ------------------------------------------------------------ */

.design-listing .hero__photo {
	position: static;
	grid-column: main-start / main-end;
	width: 100%;
	height: var(--mosaic-h);
	border-radius: var(--radius) 0 0 var(--radius);
}

.design-listing .small-gallery__grid {
	grid-column: main-end / side-end;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 8px;
	height: var(--mosaic-h);
	margin-left: 8px;
	border-radius: 0 var(--radius) var(--radius) 0;
	overflow: hidden;
}

.design-listing .small-gallery__grid .small-gallery__item:nth-child(n) {
	grid-column: auto;
	grid-row: auto;
	border-radius: 0;
}

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

.design-listing .small-gallery__grid--2 .small-gallery__item:nth-child(n),
.design-listing .small-gallery__grid--1 .small-gallery__item:nth-child(n) {
	grid-row: 1 / 3;
}

.design-listing .small-gallery__grid--1 {
	grid-template-columns: minmax(0, 1fr);
}

.design-listing .small-gallery__item:hover img {
	transform: scale(1.03);
}

.design-listing .small-gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0);
	transition: background-color 0.2s ease;
}

.design-listing .small-gallery__item:hover::after {
	background: rgb(0 0 0 / 0.12);
}

.design-listing .small-gallery__grid .small-gallery__caption {
	display: none; /* the lightbox shows it; "View all photos" sits on the mosaic */
}

.design-listing .small-gallery__caption {
	z-index: 1;
	left: 12px;
	bottom: 10px;
	font-size: 12px;
	font-weight: 500;
}

/* No gallery: the hero photo takes the whole width; no hero photo: the gallery does */
.design-listing .site-main:not(:has(.small-gallery__grid)) .hero__photo {
	grid-column: main-start / side-end;
	border-radius: var(--radius);
}

.design-listing .site-main:has(.hero--no-photo) .small-gallery__grid {
	grid-column: main-start / side-end;
	margin-left: 0;
	border-radius: var(--radius);
}

/* "View all photos": a white pill on the mosaic, bottom right */
.design-listing .small-gallery__more {
	z-index: 2;
	grid-column: main-end / side-end;
	align-self: end;
	justify-self: end;
	margin: 0 16px 16px 0;
}

.design-listing .small-gallery__more .link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 16px;
	border: 1px solid var(--color-text);
	border-radius: var(--radius-small);
	background: #fff;
	color: var(--color-text);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
}

.design-listing .small-gallery__more .link-arrow::after {
	content: "→";
}

.design-listing .small-gallery__more .link-arrow:hover {
	background: var(--color-bg-soft);
}

/* "Gallery": the other photos as a strip in the content column */
.design-listing .small-gallery .section-title {
	grid-column: main-start / main-end;
	margin: 0;
	padding-top: var(--block-space);
	padding-bottom: 18px;
	border-top: 1px solid var(--color-border);
}

.design-listing .small-gallery__row {
	grid-column: main-start / main-end;
	height: clamp(120px, 11vw, 170px);
	margin: 0 0 var(--block-space);
	gap: 8px;
}

.design-listing .small-gallery__row .small-gallery__item {
	border-radius: var(--radius);
}

/* Booking card ------------------------------------------------------------- */

.design-listing .hero .availability-form-section {
	grid-column: side-start / side-end;
	min-width: 0;
}

.design-listing .hero .availability-form {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 12px;
	max-width: none;
	margin: 0;
	padding: 28px 28px 30px;
	border: 1px solid var(--color-border);
	border-top: 4px solid var(--color-accent); /* the card's clear top */
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow-card);
}

/* Labels as the card's title row: darker, a little larger */
.design-listing .hero .availability-form__field label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

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

.design-listing .hero .availability-form__submit {
	width: 100%;
	min-height: 50px;
	margin-top: 4px;
	font-size: 16px;
}

.availability-form__field label {
	color: var(--color-text);
	font-size: 12px;
	letter-spacing: 0.02em;
}

.availability-form input,
.availability-form select,
.availability-form .choices__inner,
.availability-form .choices.is-focused .choices__inner,
.availability-form .choices.is-open .choices__inner {
	border-color: #c9cfcc;
	border-radius: var(--radius-small);
}

.availability-form .choices__list--dropdown {
	border-radius: var(--radius-small);
}

.availability-form input:focus,
.availability-form select:focus {
	outline-offset: -2px;
}

/* Narrow card: the date fields keep room for "Select date" next to the calendar icon */
.design-listing .hero .availability-form input[readonly] {
	padding-left: 12px;
	padding-right: 34px;
	background-position: right 10px center;
}

.design-listing .hero .availability-form .choices__inner {
	padding-left: 12px;
}

/* Date picker */
.flatpickr-calendar {
	border-radius: var(--radius);
}

.flatpickr-day,
.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: var(--radius-small);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	border-radius: 50%;
}

/* Wide screens: two columns, the card sticks while the content scrolls --------------------- */

@media (min-width: 1100px) {
	.design-listing .site-main:has(> .hero) {
		grid-template-columns:
			[full-start] minmax(var(--gutter), 1fr)
			[main-start] minmax(0, var(--main-w))
			[main-end] var(--col-gap)
			[side-start] var(--side-w)
			[side-end] minmax(var(--gutter), 1fr)
			[full-end];
		/* Fixed rows, so the booking card can span every row of the content column */
		grid-template-rows: repeat(12, auto);
	}

	.design-listing .hero__inner { grid-row: 1; }
	.design-listing .hero__photo,
	.design-listing .small-gallery__grid,
	.design-listing .small-gallery__more { grid-row: 2; }
	.design-listing .about { grid-row: 3; }
	.design-listing .small-gallery .section-title { grid-row: 4; }
	.design-listing .small-gallery__row { grid-row: 5; }
	.design-listing .amenities { grid-row: 6; }
	.design-listing .prices { grid-row: 7; }
	.design-listing .reviews { grid-row: 8; }
	.design-listing .house-rules { grid-row: 9; }
	.design-listing .get-in-touch { grid-row: 10; }
	.design-listing .video-band { grid-row: 11; }

	/* The first block under the mosaic has no line above */
	.design-listing .site-main:has(> .hero) > .about {
		margin-top: 12px;
		border-top: 0;
	}

	/* The card's column runs from under the mosaic to the end of main: it never covers the footer */
	.design-listing .hero .availability-form-section {
		grid-row: 3 / -1;
		padding: 36px 0 var(--block-space);
	}

	.design-listing .hero .availability-form-section > .container {
		position: sticky;
		top: calc(var(--header-height) + 28px);
	}

	.admin-bar.design-listing .hero .availability-form-section > .container {
		top: calc(var(--header-height) + 60px);
	}
}

/* Tablets and phones: one column; photos, title, then the card, then the content -------- */

@media (max-width: 1099px) {
	.design-listing .site-main:has(> .hero) {
		grid-template-columns:
			[full-start] minmax(var(--gutter), 1fr)
			[main-start side-start] minmax(0, 760px)
			[main-end side-end] minmax(var(--gutter), 1fr)
			[full-end];
	}

	.design-listing .hero__photo,
	.design-listing .small-gallery__grid,
	.design-listing .small-gallery__more,
	.design-listing .hero__inner,
	.design-listing .hero .availability-form-section {
		grid-column: main-start / main-end;
	}

	.design-listing .hero__photo { order: 1; margin-top: 20px; }
	.design-listing .small-gallery__grid { order: 2; }
	.design-listing .small-gallery__more { order: 3; }
	.design-listing .hero__inner { order: 4; }
	.design-listing .hero .availability-form-section { order: 5; }
	.design-listing .about { order: 6; }
	.design-listing .small-gallery .section-title { order: 7; }
	.design-listing .small-gallery__row { order: 8; }
	.design-listing .amenities { order: 9; }
	.design-listing .prices { order: 10; }
	.design-listing .reviews { order: 11; }
	.design-listing .house-rules { order: 12; }
	.design-listing .get-in-touch { order: 13; }

	.design-listing .hero__photo {
		height: auto;
		aspect-ratio: 3 / 2;
		max-height: 60vh;
		border-radius: var(--radius);
	}

	/* The four gallery photos: a row of thumbnails under the big photo */
	.design-listing .small-gallery__grid,
	.design-listing .site-main:has(.hero--no-photo) .small-gallery__grid {
		grid-template-columns: repeat(var(--thumbs, 4), minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: auto;
		height: auto;
		margin: 8px 0 0;
		gap: 8px;
		border-radius: 0;
		overflow: visible;
	}

	.design-listing .small-gallery__grid--3 { --thumbs: 3; }
	.design-listing .small-gallery__grid--2 { --thumbs: 2; }
	.design-listing .small-gallery__grid--1 { --thumbs: 1; }

	.design-listing .small-gallery__grid .small-gallery__item:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 1;
		height: auto;
		border-radius: var(--radius-small);
	}

	.design-listing .small-gallery__grid--1 .small-gallery__item:nth-child(n) {
		aspect-ratio: 16 / 9;
	}

	.design-listing .small-gallery__grid .small-gallery__caption {
		display: none;
	}

	.design-listing .small-gallery__more {
		justify-self: start;
		margin: 12px 0 0;
	}

	.design-listing .small-gallery__more .link-arrow {
		box-shadow: none;
	}

	.design-listing .hero__inner {
		padding: 24px 0 20px;
	}

	.design-listing .hero .availability-form-section {
		padding-bottom: 8px;
	}

	.design-listing .site-main:has(> .hero) > .about {
		margin-top: var(--block-space);
	}

	.design-listing .hero .availability-form {
		grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.8fr);
	}

	.design-listing .hero .availability-form__field:has([data-guests]) {
		grid-column: auto;
	}
}

@media (max-width: 768px) {
	.design-listing .hero__photo {
		margin-top: 12px;
		aspect-ratio: 4 / 3;
	}

	.design-listing .hero__title {
		font-size: 26px;
	}

	.design-listing .hero .availability-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 22px 20px 24px;
	}

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

	.design-listing .small-gallery__row {
		height: auto;
	}

	.design-listing .small-gallery__row > .small-gallery__item {
		height: 34vw;
	}
}

/* ==========================================================================
   About: the story with a portrait photo beside it
   ========================================================================== */

/* The photo runs the full height of the text, top to bottom */
.design-listing .about__inner {
	grid-template-columns: minmax(0, 1fr) clamp(220px, 21vw, 300px);
	align-items: stretch;
	gap: 36px;
}

.design-listing .about__photo {
	order: 2;
	min-height: 320px;
	border-radius: var(--radius);
}

.design-listing .about__photo img {
	height: 100%;
	aspect-ratio: auto;
	border-radius: var(--radius);
}

.design-listing .about__content {
	max-width: none;
}

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

.about__text p {
	color: #3a4240;
}

/* The host's name as a small signed line */
.about__signature {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 24px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.about__signature::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--color-accent);
}

@media (max-width: 600px) {
	.design-listing .about__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.design-listing .about__photo {
		order: 0;
		min-height: 0;
	}

	.design-listing .about__photo img {
		height: auto;
		aspect-ratio: 4 / 3;
		max-height: none;
	}
}

/* ==========================================================================
   Amenities: an icon grid, icon and name side by side
   ========================================================================== */

.amenities__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 10px;
}

.amenities__grid > .amenity {
	flex: none;
}

.amenity {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: none;
}

.amenity__icon {
	width: 24px;
	height: 24px;
	color: var(--color-text);
	stroke-width: 1.5;
}

.amenity__label {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}

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

	.amenity {
		gap: 10px;
		padding: 12px;
	}

	.amenity__label {
		font-size: 14px;
	}
}

/* ==========================================================================
   Prices and availability: no photo band, the calendar right under its heading
   ========================================================================== */

.design-listing .prices__band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 0;
	background: none;
	text-align: left;
	overflow: visible;
}

.design-listing .prices__photo,
.design-listing .prices__band::after {
	display: none;
}

.design-listing .prices__heading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	column-gap: 24px;
	grid-column: 1 / -1;
}

.design-listing .prices__heading .section-label,
.design-listing .prices__heading .section-title {
	grid-column: 1;
	color: var(--color-text);
}

.design-listing .prices__heading .section-label {
	color: var(--color-accent);
}

.design-listing .prices__heading .section-title {
	margin: 0;
}

.design-listing .prices__heading .button {
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: end;
	min-height: 40px;
	border: 1px solid var(--color-text);
	background: #fff;
	color: var(--color-text);
	font-size: 14px;
}

.design-listing .prices__heading .button:hover {
	background: var(--color-bg-soft);
}

.design-listing .prices > .container {
	padding-inline: 0;
}

.design-listing .prices__card {
	margin: 24px 0 0;
	padding: 0;
	background: none;
	box-shadow: none;
}

.calendar__months {
	gap: clamp(24px, 3vw, 44px);
}

.calendar-month__title {
	font-size: 15px;
}

.calendar-month__grid {
	gap: 4px;
}

.calendar-day {
	min-height: 50px;
	border-radius: var(--radius-small);
}

.calendar__swatch {
	border-radius: 4px;
}

.calendar__button {
	border: 1px solid var(--color-border);
	border-radius: 50%;
}

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

	.design-listing .prices__heading .button {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		width: auto;
		margin-top: 16px;
	}

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

/* ==========================================================================
   Reviews: a star in the title, plain bordered cards, the stars first
   ========================================================================== */

.reviews .section-title::before {
	content: "★";
	margin-right: 10px;
	color: var(--color-text);
}

.reviews__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
	max-width: none;
}

.review {
	gap: 10px;
	padding: 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: none;
}

.review__stars {
	order: -1;
	margin: 0 0 4px;
	color: var(--color-text);
	font-size: 13px;
	letter-spacing: 2px;
}

.review__stars-off {
	color: #d4d8d6;
}

.review__name {
	color: var(--color-text);
}

.review__text {
	color: #3a4240;
	font-size: 14px;
	line-height: 1.6;
}

.reviews__action {
	margin-top: 24px;
	text-align: left;
}

.reviews__action .button {
	border: 1px solid var(--color-text);
	background: #fff;
	color: var(--color-text);
}

.reviews__action .button:hover {
	background: var(--color-bg-soft);
}

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

	.review {
		padding: 18px;
	}
}

/* ==========================================================================
   House rules: plain rows between thin lines
   ========================================================================== */

.house-rules__list {
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.house-rule {
	padding: 16px 0;
}

@media (min-width: 601px) {
	.house-rule {
		grid-template-columns: minmax(170px, 0.4fr) minmax(0, 1fr);
	}
}

.house-rule:first-child {
	padding-top: 0;
}

.house-rule__icon {
	color: var(--color-text);
}

.house-rule__value {
	color: #3a4240;
}

.house-rules--small .house-rules__list {
	padding: 0;
}

/* ==========================================================================
   Get in touch: the text, three contact tiles, then a wide photo
   ========================================================================== */

.design-listing .get-in-touch {
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	background: none;
}

.design-listing .get-in-touch__content {
	max-width: none;
	margin: 0;
	padding: 0;
}

.get-in-touch__text {
	color: #3a4240;
}

.contact-items {
	gap: 10px;
	margin-top: 24px;
	text-align: left;
}

.contact-item {
	align-items: flex-start;
	gap: 4px;
	padding: 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.contact-item__icon {
	margin-bottom: 6px;
	color: var(--color-text);
}

.contact-item__title {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
}

.contact-item__value {
	overflow-wrap: anywhere;
}

.design-listing .get-in-touch__photo img {
	min-height: 0;
	max-height: none;
	height: auto;
	aspect-ratio: 16 / 7;
	border-radius: var(--radius);
}

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

	.design-listing .get-in-touch__content {
		padding: 0;
	}

	.design-listing .get-in-touch__photo img {
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   Footer: light grey, dark text
   ========================================================================== */

.site-footer {
	margin-top: 32px;
	padding-block: 44px 36px;
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
}

.site-footer__menu a {
	color: var(--color-text);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

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

.platform-link {
	border-color: var(--color-border);
	background: #fff;
	color: var(--color-text);
}

.platform-link:hover,
.platform-link:focus-visible {
	border-color: var(--color-text);
	background: #fff;
	color: var(--color-text);
}

.site-footer__legal a {
	color: var(--color-text);
}

/* ==========================================================================
   Theme pages (About, Gallery, Availability, Privacy): the listing look too
   A rounded photo banner at the page width, the title left under it, no floating card.
   ========================================================================== */

.theme-page {
	--theme-page-card-overlap: 0px;
	padding-bottom: 24px;
	background: #fff;
}

.theme-page__band {
	width: calc(100% - 2 * var(--gutter));
	max-width: var(--container);
	height: clamp(170px, 20vw, 300px);
	margin: 24px auto 0;
	border-radius: var(--radius);
}

.theme-page__band::after {
	background: rgb(0 0 0 / 0.04);
}

.theme-page__card {
	max-width: var(--container);
	margin: 0 auto;
	padding: 32px 0 0;
	background: none;
}

.theme-page__title {
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--color-border);
	font-size: clamp(28px, 2.4vw, 38px);
	letter-spacing: -0.025em;
	text-align: left;
}

@media (max-width: 768px) {
	.theme-page__band {
		margin-top: 12px;
	}

	.theme-page__card {
		padding: 24px var(--gutter) 0;
	}

	.theme-page__title {
		font-size: 28px;
	}
}

/* Gallery page: a mosaic, the first photo large */
.gallery-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(150px, 15vw, 240px);
	grid-auto-flow: dense;
	gap: 8px;
}

.gallery-grid__item {
	aspect-ratio: auto;
	border-radius: var(--radius);
}

.gallery-grid__item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

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

/* About page */
/* Two columns on wider screens only: on the phone the photo stays above the story (main.css) */
@media (min-width: 769px) {
	.about-page {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	}
}

.about-page__photo,
.about-page__photo img,
.about-page__map,
.about-page__map-load {
	border-radius: var(--radius);
}

.about-page__title {
	font-size: clamp(22px, 1.8vw, 28px);
}

.owner-card {
	padding: clamp(20px, 2.4vw, 32px);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow-card);
}

.owner-card__avatar {
	font-family: var(--font-body);
	font-weight: 600;
}

.owner-card__name {
	font-size: clamp(20px, 1.6vw, 24px);
}

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

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

.about-page__address {
	justify-content: flex-start;
	margin-top: -4px;
}

.about-page__nearby {
	max-width: none;
	margin-inline: 0;
}

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

/* Availability page: the search in a bordered box, the result as a listing */
.availability-form-section--plain .availability-form {
	padding: 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.availability-result__notice {
	border-radius: 0 var(--radius-small) var(--radius-small) 0;
}

.availability-result .photo-slider {
	border-radius: var(--radius);
}

.photo-slider__button {
	border-radius: 50%;
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}

.availability-result__price strong {
	font-family: var(--font-body);
	font-size: 28px;
	font-weight: 600;
}

.availability-message__text {
	font-family: var(--font-body);
	font-weight: 600;
}

.booking-request__field input {
	border-color: #c9cfcc;
	border-radius: var(--radius-small);
}

.text-page {
	max-width: 760px;
	margin: 0;
	color: #3a4240;
}

.not-found__code {
	font-weight: 600;
}