/* ==========================================================================
   The Moon Homestay - components
   Welcome, rooms, place and service cards, gallery, host, contact,
   page content, lightbox and scroll reveal.
   ========================================================================== */

/* ---------- Welcome ---------- */

.welcome {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 1rem + 5vw, 6.5rem);
	align-items: center;
}

@media (max-width: 900px) {
	.welcome {
		grid-template-columns: 1fr;
	}
}

.welcome__text {
	display: grid;
	gap: 1.4rem;
}

.welcome__text h2 {
	max-width: 17ch;
	font-size: var(--t-xl);
}

.welcome__text p:not(.eyebrow) {
	max-width: 60ch;
	color: var(--ink-2);
}

.welcome__text > .entry-content > * + * {
	margin-top: 1.1rem;
}

/* Two photographs, the second overlapping the first. */
.photo-pair {
	position: relative;
	margin: 0;
	padding-bottom: 14%;
}

.photo-pair__main,
.photo-pair__inset {
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--surface-2);
}

.photo-pair__main {
	width: 82%;
	aspect-ratio: 4 / 5;
	box-shadow: var(--shadow-md);
}

.photo-pair__inset {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 48%;
	aspect-ratio: 3 / 4;
	border: 7px solid var(--ground);
	box-shadow: var(--shadow-lg);
}

.section--white .photo-pair__inset {
	border-color: var(--surface);
}

.photo-pair img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Quick facts ---------- */

.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	margin: 1.6rem 0 0;
}

.facts div {
	display: grid;
	gap: .3rem;
	padding: 1rem 1.15rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.facts dt {
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
}

.facts dd {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(1.15rem, .9rem + 1.2vw, 1.5rem);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	overflow-wrap: break-word;
}

/* ---------- Amenity chips ---------- */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	margin: .4rem 0 0;
	padding: 0;
	list-style: none;
}

.chips li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem .5rem .8rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-size: .88rem;
	color: var(--ink-2);
	white-space: nowrap;
}

.chips .icon {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--sea);
}

.chips .chips__extra {
	background: transparent;
	border-style: dashed;
	border-color: var(--line-strong);
	color: var(--muted);
}

.chips .chips__extra .icon {
	color: var(--muted);
}

/* ---------- Rooms ----------
   The number of rooms decides the layout (rooms--count-N): one room gets a
   wide feature, two sit side by side, three or four make a row. */

.rooms {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.4rem, .8rem + 1.6vw, 2.4rem) clamp(1.1rem, .6rem + 1.4vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rooms--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rooms--count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1080px) {
	.rooms,
	.rooms--count-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* On phones the rooms become a swipeable row instead of a long stack. */
@media (max-width: 640px) {
	.rooms:not(.rooms--count-1) {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		padding-bottom: .5rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.rooms::-webkit-scrollbar {
		display: none;
	}

	.room {
		scroll-snap-align: start;
	}
}

.room {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.room__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--r-lg);
	background: var(--surface-2);
	box-shadow: var(--shadow-sm);
}

.rooms--count-2 .room__media {
	aspect-ratio: 4 / 3;
}

.room__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease);
}

.room:hover .room__media img {
	transform: scale(1.05);
}

/* Price tag over the photo. */
.room__tag {
	position: absolute;
	top: .9rem;
	left: .9rem;
	z-index: 1;
	padding: .38rem .8rem;
	background: rgba(255, 255, 255, .94);
	border-radius: var(--r-pill);
	box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35);
	font-family: var(--f-display);
	font-size: 1.02rem;
	line-height: 1.2;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.room__tag small {
	font-family: var(--f-body);
	font-size: .74rem;
	color: var(--muted);
}

.room__body {
	display: grid;
	align-content: start;
	gap: .6rem;
	padding: 1.2rem .2rem 0;
}

.room__title {
	font-size: var(--t-lg);
}

.room__title a {
	text-decoration: none;
}

.room__title a:hover {
	color: var(--sea);
}

.room__facts {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .86rem;
	color: var(--ink-2);
}

.room__facts li {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.room__facts .icon {
	width: 1.05rem;
	height: 1.05rem;
	color: var(--sea);
}

.room__text {
	font-size: .95rem;
	line-height: 1.6;
	color: var(--ink-2);
}

.room__link {
	margin-top: .2rem;
}

.room__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: .8rem;
}

/* One room: a wide feature with the photo beside the text. */
.rooms--count-1 {
	grid-template-columns: 1fr;
}

.rooms--count-1 .room {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(1.6rem, 1rem + 3vw, 4.5rem);
	align-items: center;
}

.rooms--count-1 .room__media {
	aspect-ratio: 4 / 3;
}

.rooms--count-1 .room__body {
	gap: .9rem;
	padding: 0;
}

.rooms--count-1 .room__title {
	font-size: var(--t-xl);
}

.rooms--count-1 .room__text {
	font-size: var(--t-base);
	max-width: 46ch;
}

@media (max-width: 800px) {
	.rooms--count-1 .room {
		grid-template-columns: 1fr;
	}
}

/* ---------- Place and service cards ----------
   Styles the markup printed by the Moon Homestay plugin's shortcodes. */

.moon-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, .7rem + 1.6vw, 2.2rem);
}

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

/* Two entries fill the row instead of leaving a gap. */
.moon-grid:has(> .moon-card:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1000px) {
	.moon-grid--3,
	.moon-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.moon-grid,
	.moon-grid--2,
	.moon-grid--3,
	.moon-grid--4,
	.moon-grid:has(> .moon-card:nth-child(2):last-child) {
		grid-template-columns: 1fr;
	}
}

.moon-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}

.moon-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--shadow-lg);
}

.moon-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--surface-2);
}

.moon-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease);
}

.moon-card:hover .moon-card__media img {
	transform: scale(1.05);
}

.moon-card__badge {
	position: absolute;
	top: .9rem;
	left: .9rem;
	padding: .36rem .8rem;
	background: rgba(255, 255, 255, .94);
	border-radius: var(--r-pill);
	box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--ink);
}

/* No photo yet: the distance becomes the picture, set large on a tinted
   panel, so a card published before its photo still looks finished. */
.moon-card__media--empty {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	background:
		radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .6), transparent 55%),
		var(--sea-soft);
}

.moon-card__media--empty .moon-card__badge {
	position: static;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--f-display);
	font-size: clamp(2.3rem, 1.7rem + 2vw, 3.2rem);
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--sea);
}

.moon-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .75rem;
	padding: 1.4rem 1.5rem 1.55rem;
}

.moon-card__title {
	font-size: var(--t-md);
	line-height: 1.2;
}

.moon-card__text {
	font-size: .95rem;
	line-height: 1.6;
	color: var(--ink-2);
}

.moon-card__text > * {
	margin: 0;
}

.moon-card__text > * + * {
	margin-top: .6rem;
}

.moon-card__meta {
	margin: .2rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.moon-card__meta li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .6rem 0;
	border-bottom: 1px solid var(--line);
	font-size: .88rem;
	text-align: right;
}

.moon-card__meta li span {
	flex: none;
	color: var(--muted);
	text-align: left;
}

.moon-card__note {
	padding-left: .8rem;
	border-left: 2px solid var(--sand);
	font-size: .86rem;
	color: var(--muted);
}

.moon-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem 1.2rem;
	margin-top: auto;
	padding-top: .4rem;
}

.moon-card__link {
	align-self: flex-start;
	margin-top: auto;
	padding-top: .4rem;
	font-size: .9rem;
	font-weight: 700;
	color: var(--sea);
	text-decoration: none;
}

.moon-card__link:hover {
	text-decoration: underline;
}

.moon-card__actions .moon-card__link {
	margin-top: 0;
	padding-top: 0;
}

.moon-card__link::after {
	content: " \2197";
}

.moon-card__cta {
	display: inline-flex;
	align-items: center;
	padding: .6rem 1.1rem;
	background: var(--whatsapp);
	border-radius: var(--r-pill);
	font-size: .85rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	transition: background-color .2s var(--ease);
}

.moon-card__cta:hover {
	background: var(--whatsapp-deep);
	color: #fff;
}

/* A single entry: photo beside the text, so it reads as a feature rather
   than one lonely card in an empty row. */
@media (min-width: 761px) {
	.moon-grid:has(> .moon-card:only-child) {
		grid-template-columns: 1fr;
	}

	.moon-card:only-child {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}

	.moon-card:only-child .moon-card__media {
		aspect-ratio: auto;
		min-height: 100%;
	}

	.moon-card:only-child .moon-card__media--empty {
		min-height: 18rem;
	}

	.moon-card:only-child .moon-card__body {
		justify-content: center;
		padding: clamp(1.6rem, 1rem + 2.5vw, 3rem);
	}

	.moon-card:only-child .moon-card__title {
		font-size: var(--t-lg);
	}
}

.moon-more {
	margin: clamp(2.2rem, 1.6rem + 2vw, 3.4rem) 0 0;
}

.moon-more__link {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .85rem 1.5rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-pill);
	font-size: .94rem;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .2s var(--ease), color .2s var(--ease);
}

.moon-more__link::after {
	content: "\2192";
	transition: transform .25s var(--ease);
}

.moon-more__link:hover {
	border-color: var(--sea);
	color: var(--sea);
}

.moon-more__link:hover::after {
	transform: translateX(4px);
}

/* A note that sits under the services list. */
.notice {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-top: clamp(2rem, 1.5rem + 1.6vw, 3rem);
	padding: 1.15rem 1.35rem;
	background: var(--sea-soft);
	border-radius: var(--r-md);
	font-size: .95rem;
	color: var(--ink-2);
}

.notice strong {
	color: var(--ink);
}

/* ---------- Gallery ---------- */

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(150px, 9rem + 6vw, 260px);
	gap: clamp(.6rem, .3rem + .8vw, 1rem);
}

.gallery-grid__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--surface-2);
	cursor: zoom-in;
}

.gallery-grid__item:first-child {
	grid-column: span 2;
	grid-row: span 2;
	border-radius: var(--r-lg);
}

.gallery-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease), filter .4s var(--ease);
}

.gallery-grid__item:hover img {
	transform: scale(1.05);
	filter: brightness(1.05);
}

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

/* Core Gallery block on the Gallery page: a masonry-style column layout that
   keeps each photo's own proportions. */
.entry-content .wp-block-gallery.has-nested-images {
	display: block;
	column-count: 3;
	column-gap: 1rem;
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
	display: block;
	width: 100% !important;
	margin: 0 0 1rem;
	break-inside: avoid;
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: var(--r-md);
	cursor: zoom-in;
}

@media (max-width: 900px) {
	.entry-content .wp-block-gallery.has-nested-images {
		column-count: 2;
	}
}

/* ---------- Host ---------- */

.host {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 1.6rem;
	max-width: 52rem;
	margin-inline: auto;
	text-align: center;
}

/* A large, faint opening quote mark behind the words. */
.host::before {
	content: "\201C";
	position: absolute;
	top: -.35em;
	left: 50%;
	z-index: 0;
	transform: translateX(-50%);
	font-family: var(--f-display);
	font-size: clamp(9rem, 6rem + 10vw, 15rem);
	line-height: 1;
	color: var(--sand);
	opacity: .55;
	pointer-events: none;
}

.host > * {
	position: relative;
}

.host__quote {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--t-lg);
	font-style: italic;
	line-height: 1.35;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.host__name {
	font-size: .95rem;
	font-weight: 700;
}

.host__name span {
	display: block;
	margin-top: .2rem;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ---------- Contact ---------- */

.contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 1rem + 5vw, 6rem);
	align-items: start;
}

@media (max-width: 860px) {
	.contact {
		grid-template-columns: 1fr;
	}
}

.contact__intro {
	display: grid;
	gap: 1.2rem;
}

.contact__intro h2 {
	font-size: var(--t-xl);
}

.contact__intro p:not(.eyebrow) {
	max-width: 48ch;
	font-size: var(--t-md);
	line-height: 1.5;
	color: var(--ink-2);
}

.contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: .6rem;
}

.contact__details {
	margin: 0;
	padding: .4rem 1.6rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}

.contact__details div {
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr);
	gap: .3rem 1.5rem;
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--line);
}

.contact__details div:last-child {
	border-bottom: 0;
}

@media (max-width: 480px) {
	.contact__details div {
		grid-template-columns: 1fr;
	}
}

.contact__details dt {
	padding-top: .25rem;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
}

.contact__details dd {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.55;
}

.contact__details a {
	text-decoration: none;
}

.contact__details a:hover {
	color: var(--sea);
}

.contact__phone {
	display: block;
	font-family: var(--f-display);
	font-size: 1.5rem;
	line-height: 1.3;
}

/* ---------- Page content ----------
   Element rules are wrapped in :where() so they carry no extra weight: the
   booking plugin prints lists, headings and tables inside page content, and
   its own class-based styles must win over these defaults. */

.entry-content {
	font-size: var(--t-base);
	line-height: 1.75;
}

.entry-content > * {
	margin-block: 0;
}

.entry-content > * + * {
	margin-top: 1.25rem;
}

:where(.entry-content) :where(h2) {
	margin-top: 3rem;
	font-size: var(--t-lg);
}

:where(.entry-content) :where(h3) {
	margin-top: 2.2rem;
	font-size: var(--t-md);
}

:where(.entry-content) :where(a:not([class])) {
	color: var(--sea);
}

:where(.entry-content) :where(ul, ol) {
	padding-left: 1.25rem;
}

:where(.entry-content) :where(li + li) {
	margin-top: .4rem;
}

:where(.entry-content) :where(blockquote) {
	margin-inline: 0;
	padding-left: 1.4rem;
	border-left: 2px solid var(--sand);
	font-family: var(--f-display);
	font-size: var(--t-md);
	font-style: italic;
}

:where(.entry-content) :where(img) {
	border-radius: var(--r-md);
}

:where(.entry-content) :where(figcaption) {
	margin-top: .6rem;
	font-size: .85rem;
	color: var(--muted);
}

.entry-content .alignwide {
	width: min(var(--max), 100vw - var(--gutter) * 2);
	max-width: none;
	margin-inline: calc(50% - min(var(--max), 100vw - var(--gutter) * 2) / 2);
}

.entry-content .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.entry-content .alignfull img {
	border-radius: 0;
}

:where(.entry-content) :where(table) {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

:where(.entry-content) :where(th, td) {
	padding: .7rem .8rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

/* Contact Form 7 */
.wpcf7-form > p + p {
	margin-top: 1.1rem;
}

.wpcf7-not-valid-tip {
	margin-top: .35rem;
	font-size: .85rem;
	color: var(--danger);
}

.wpcf7 form .wpcf7-response-output {
	margin: 1.4rem 0 0;
	padding: .9rem 1.1rem;
	border-radius: var(--r-sm);
	font-size: .95rem;
}

/* ---------- Lightbox ---------- */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(12, 16, 15, .95);
	animation: moon-fade .25s var(--ease);
}

.lightbox img {
	max-width: 100%;
	max-height: 86vh;
	border-radius: var(--r-sm);
	object-fit: contain;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	background: rgba(255, 255, 255, .12);
	border: 0;
	border-radius: 50%;
	font-size: 1.4rem;
	line-height: 1;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s var(--ease);
}

.lightbox__btn:hover {
	background: rgba(255, 255, 255, .24);
}

.lightbox__close { top: 1.2rem; right: 1.2rem; }
.lightbox__prev  { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 1.2rem; top: 50%; transform: translateY(-50%); }

.lightbox__count {
	position: absolute;
	bottom: 1.3rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: .85rem;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .7);
}

@keyframes moon-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---------- Scroll reveal ----------
   Only hides content once main.js has confirmed it is running (it adds
   .reveal-ready), and never for visitors who prefer reduced motion. */

@media (prefers-reduced-motion: no-preference) {
	.reveal-ready [data-reveal] {
		transition: opacity .9s var(--ease), transform .9s var(--ease);
	}

	.reveal-ready [data-reveal]:not(.is-revealed) {
		opacity: 0;
		transform: translateY(28px);
	}
}

/* ---------- 404 and empty states ---------- */

.empty-state {
	display: grid;
	justify-items: start;
	gap: 1.2rem;
	max-width: 44rem;
}

.empty-state h1 {
	font-size: var(--t-2xl);
}

.empty-state p:not(.eyebrow) {
	font-size: var(--t-md);
	color: var(--ink-2);
}

/* ---------- Variants used by the templates ---------- */

/* Welcome without photos: one readable column, still aligned to the same
   left edge as every other section. */
.welcome--solo {
	grid-template-columns: minmax(0, 52rem);
}

/* The admin-only notices shown in place of an empty section. */
.wrap > .notice:only-child {
	margin-top: 0;
}

/* Fewer than five gallery photos: an even grid instead of the mosaic. */
.gallery-grid--simple {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gallery-grid--simple .gallery-grid__item:first-child {
	grid-column: auto;
	grid-row: auto;
	border-radius: var(--r-md);
}

/* Page content starts straight after the page header. */
.section--flush-top {
	padding-top: 0;
}

/* Running text keeps a readable measure, while grids, galleries and wide
   blocks placed in the same content still use the full width. */
.entry-content > :where(p, h2, h3, h4, h5, h6, ul, ol, blockquote, .wp-block-buttons, .wpcf7) {
	max-width: 72ch;
}

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

.nav-links,
.page-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.page-numbers,
.page-links a,
.page-links > span {
	display: inline-grid;
	place-items: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding-inline: .8rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-pill);
	font-weight: 700;
	text-decoration: none;
}

.page-numbers.current {
	background: var(--sea);
	border-color: var(--sea);
	color: #fff;
}

a.page-numbers:hover,
.page-links a:hover {
	border-color: var(--sea);
	color: var(--sea);
}

/* ---------- Classic [gallery] markup ----------
   The booking plugin's photo slider reuses these class names (gallery-item,
   gallery-icon), so it is excluded here and styled in booking.css. Without
   that, its photos were squared off and its thumbnails blown up. */

.gallery:not(.mphb-flexslider-gallery-wrapper) {
	--gallery-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--gallery-cols), minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
}

.gallery-columns-1 { --gallery-cols: 1; }
.gallery-columns-2 { --gallery-cols: 2; }
.gallery-columns-4 { --gallery-cols: 4; }
.gallery-columns-5 { --gallery-cols: 5; }
.gallery-columns-6 { --gallery-cols: 6; }

@media (max-width: 640px) {
	.gallery:not(.mphb-flexslider-gallery-wrapper) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gallery:not(.mphb-flexslider-gallery-wrapper) .gallery-item {
	margin: 0;
}

.gallery:not(.mphb-flexslider-gallery-wrapper) .gallery-icon img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--r-md);
	cursor: zoom-in;
}

.gallery-caption {
	margin-top: .4rem;
	font-size: .85rem;
	color: var(--muted);
}

/* "More rooms" under a room page shows up to three. Phones keep the swipe row. */
@media (min-width: 1081px) {
	.rooms--others:not(.rooms--count-1):not(.rooms--count-2) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}