/*
 * Design "Index": a different layout, like a catalogue. On wide screens each section has its title
 * in a left column that stays in view while you scroll, and its content on the right; section
 * labels are numbered (01, 02…). Gallery, amenities, reviews and house rules use it.
 * Loaded after main.css for villas with "villa.design": "index". Same sections, order and markup as
 * Classic; only the look and the layout change. Colours: villa_designs().
 */

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

@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-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: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-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: "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; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/eb-garamond-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: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/eb-garamond-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: "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: italic; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-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: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-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: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-greek-400-italic.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: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-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: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-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: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-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: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/manrope-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: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/manrope-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: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/manrope-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: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/manrope-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: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/manrope-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: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/manrope-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; }

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

:root {
	--color-text: #1e252d;
	--color-text-muted: #5f6872;
	--color-bg-soft: #f4f4f2;
	--color-bg-sand: #f1f1ee;
	--color-footer: #1b2631;
	--color-border: rgb(30 37 45 / 0.12);
	--color-day-available: #e4ebf2;
	--font-heading: "EB Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--radius: 0;
	--shadow-card: 0 1px 0 var(--color-border);
}

body {
	counter-reset: section;
}

h1,
h2,
h3,
h4 {
	font-weight: 500;
}

.section-title {
	font-size: clamp(30px, 2.6vw, 50px);
}

.section-label::before {
	counter-increment: section;
	content: counter(section, decimal-leading-zero) " / ";
}

.button {
	font-weight: 600;
	letter-spacing: 0.14em;
}

.site-branding__name {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.1em;
}

.site-nav__menu a {
	font-weight: 600;
}

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

.hero::after {
	background: rgb(16 22 28 / 0.32);
}

.hero__title {
	font-size: clamp(48px, 5.4vw, 86px);
	font-weight: 500;
}

.availability-form {
	box-shadow: none;
	border-bottom: 2px solid var(--color-accent);
}

@media (max-width: 768px) {
	.hero__title {
		font-size: 38px;
	}
}

.about__signature {
	font-family: var(--font-heading);
	font-size: 30px;
	font-style: italic;
	color: var(--color-accent);
}

/* ==========================================================================
   The index: title on the left (stays in view), content on the right
   ========================================================================== */

@media (min-width: 1024px) {
	.small-gallery > .container,
	.amenities > .container,
	.reviews > .container,
	.house-rules > .container {
		display: grid;
		grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr);
		align-items: start;
		column-gap: clamp(40px, 5vw, 96px);
	}

	.small-gallery .section-title,
	.amenities .section-header,
	.reviews .section-header,
	.house-rules .section-header {
		position: sticky;
		top: calc(var(--header-height) + 32px);
		grid-column: 1;
		grid-row: 1 / span 4;
		margin: 0;
		text-align: left;
	}

	.small-gallery > .container > :not(.section-title),
	.amenities > .container > :not(.section-header),
	.reviews > .container > :not(.section-header),
	.house-rules > .container > :not(.section-header) {
		grid-column: 2;
	}

	.amenities__grid {
		--amenity-columns-now: 3 !important; /* the right column is narrower than the page */
		--amenity-gap: 32px;
		row-gap: 0;
		justify-content: flex-start;
	}

	.reviews__list {
		flex-direction: column;
		max-width: none;
		margin: 0;
	}

	.reviews__action {
		text-align: left;
	}

	.house-rules__list {
		max-width: none;
		margin: 0;
	}

	.small-gallery__grid {
		grid-template-rows: repeat(2, clamp(150px, 15vw, 230px));
	}
}

/* ==========================================================================
   Amenities: a plain list, icon beside the name
   ========================================================================== */

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

.amenity__icon {
	width: 22px;
	height: 22px;
	color: var(--color-accent);
}

.amenity__label {
	font-weight: 500;
}

/* ==========================================================================
   Video band, reviews
   ========================================================================== */

.video-band {
	min-height: clamp(340px, 30vw, 480px);
}

.video-band__title {
	font-weight: 400;
	letter-spacing: 0.08em;
}

.review {
	padding: 24px 0;
	border-top: 1px solid var(--color-border);
	background: none;
	box-shadow: none;
}

.review__text {
	font-family: var(--font-heading);
	font-size: 19px;
	font-style: italic;
}

.review__name {
	font-weight: 600;
}

.review__stars {
	color: var(--color-accent);
}

.house-rules__list {
	border-width: 1px 0;
	border-radius: 0;
	background: none;
}

/* ==========================================================================
   Get in touch and footer
   ========================================================================== */

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

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

.site-footer {
	color: #aeb8c2;
}

.platform-link {
	border-color: rgb(255 255 255 / 0.25);
}

.theme-page__band {
	background: var(--color-footer);
}