/* HHR Cottage Comparison
   Fonts inherit from Blocksy: cottage names/titles use the theme heading font,
   everything else the body font. Override the tokens below if needed. */

.hhr-cc {
	--hhr-teal: #14443e;
	--hhr-ink-head: #123c37;
	--hhr-ink: #2f2c28;
	--hhr-ink-label: #5d564a;
	--hhr-muted: #9a9384;
	--hhr-tab-off: #6f6857;
	--hhr-bg: #f3eee6;
	--hhr-surface: #fbf8f3;
	--hhr-track: #ece4d6;
	--hhr-row-line: #e6dfd2;
	--hhr-col-line: #ece5d8;
	--hhr-cell: #fff;
	--hhr-serif: var(--theme-headings-font-family, var(--theme-font-family, Georgia, serif));

	color: var(--hhr-ink);
	margin-block: 0;
}

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

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

.hhr-cc__panel[hidden] { display: none; }

.hhr-cc__cottage-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.hhr-cc__thumb {
	display: block;
	overflow: hidden;
	background: var(--hhr-track);
}
.hhr-cc__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.hhr-cc__name {
	display: block;
	font-family: 'Libre Bodoni', sans-serif;
	color: var(--hhr-ink-head);
	font-weight: 400;
}

.hhr-cc__book {
	display: block;
	text-align: center;
	background: var(--hhr-teal);
	color: #fff;
	border-radius: 6px;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color .15s ease;
}
.hhr-cc__book:hover,
.hhr-cc__book:focus-visible { background: #0d302c; color: #fff; }

.hhr-cc__table {
	margin: 0;
	border: 0;
	table-layout: fixed;
}
.hhr-cc__table th,
.hhr-cc__table td {
	vertical-align: top;
	text-align: left;
	border: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* =========================================================
   DESKTOP (≥ 1000px, Blocksy desktop) — matches the current page
   ========================================================= */
@media (min-width: 1000px) {
	.hhr-cc__title,
	.hhr-cc__hint,
	.hhr-cc__tab-short,
	.hhr-cc__corner-short { display: none; }

	.hhr-cc__tabs {
		display: flex;
	}
	.hhr-cc__tab {
		flex: 1 1 50%;
		margin: 0;
		padding: 1.1rem 3.5rem;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--hhr-ink);
		font: inherit;
		font-size: clamp(1.4rem, 2.2vw, 1.75rem);
		font-weight: 300;
		letter-spacing: .02em;
		text-align: left;
		cursor: pointer;
		box-shadow: none;
	}
	.hhr-cc__tab[aria-selected="true"] { background: var(--hhr-bg); }
	.hhr-cc__tab:hover { color: var(--hhr-teal); }
	.hhr-cc__tab:focus-visible { outline: 2px solid var(--hhr-teal); outline-offset: -4px; }

	.hhr-cc__panel {
		background: var(--hhr-bg);
		padding: 1.75rem 2rem 2rem;
	}

	.hhr-cc__table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 6px;
		font-size: .875rem;
		line-height: 1.35;
	}
	.hhr-cc__col-label { width: 170px; }

	.hhr-cc__table th,
	.hhr-cc__table td {
		background: var(--hhr-cell);
		padding: .6rem .9rem;
	}

	/* .hhr-cc__table prefix so it outranks the generic "th { vertical-align: top }" rule */
	.hhr-cc__table .hhr-cc__corner {
		background: transparent !important;
		vertical-align: bottom;
		padding: .75rem .25rem .75rem 1.25rem !important;
		font-size: 22px;
		font-weight: 300;
		text-transform: uppercase;
		letter-spacing: .05em;
		overflow-wrap: normal !important; /* never split "PROPERTY" mid-word */
		word-wrap: normal !important;
		line-height: 1.15;
		color: var(--hhr-ink-label);
	}

	.hhr-cc__cottage { padding: 0 !important; }
	/* Fixed height (not aspect ratio) so photos don't change size between tabs with different cottage counts */
	.hhr-cc__thumb { height: 200px; }
	.hhr-cc__name {
		padding: .6rem .9rem .5rem;
		font-size: 1.75rem;
		line-height: 1.15;
	}

	.hhr-cc__label {
		font-weight: 700;
		color: var(--hhr-ink);
		padding-left: 1.25rem !important;
	}
	.hhr-cc__value { font-weight: 400; }

	.hhr-cc__book-row td { padding: 1.1rem clamp(.6rem, 1.2vw, 1.4rem) !important; }
	.hhr-cc__book-row .hhr-cc__label { background: transparent; } /* empty cell sits on the beige */
	.hhr-cc__book {
		display: inline-block;
		/* min() so the minimum can never exceed the cell — min-width otherwise beats max-width */
		min-width: min(9rem, 100%);
		max-width: 100%;
		padding: .7rem clamp(.5rem, 1.2vw, 1.5rem);
		white-space: nowrap;
		font-size: 1rem;
		text-transform: uppercase;
		letter-spacing: .02em;
	}
	.hhr-cc__book-row td { text-align: center; }

	.hhr-cc__cottage-link:hover .hhr-cc__name { color: var(--hhr-teal); text-decoration: underline; }
}

/* =========================================================
   MOBILE + TABLET (< 1000px) — Option A: sticky-column scroll table
   ========================================================= */
@media (max-width: 999.98px) {
	.hhr-cc { background: var(--hhr-bg); }

	.hhr-cc__head {
		background: var(--hhr-surface);
		border-bottom: 1px solid var(--hhr-row-line);
		padding: 0 18px;
	}

	.hhr-cc__tab-long,
	.hhr-cc__corner-long { display: none; }

	.hhr-cc__title {
		margin: 0;
		padding: 1.25rem 0 .25rem;
		font-family: var(--hhr-serif);
		font-weight: 700;
		font-size: 23px;
		line-height: 1.2;
		color: var(--hhr-ink-head);
		text-align: center;
	}

	.hhr-cc__tabs {
		display: flex;
		gap: 6px;
		padding: 4px;
		margin: 8px 0 14px;
		background: var(--hhr-track);
		border-radius: 999px;
	}

	.hhr-cc__tab {
		flex: 1;
		margin: 0;
		padding: 9px;
		border: 0;
		border-radius: 999px;
		background: transparent;
		color: var(--hhr-tab-off);
		font: inherit;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.3;
		text-align: center;
		cursor: pointer;
		box-shadow: none;
	}
	.hhr-cc__tab[aria-selected="true"] {
		background: var(--hhr-teal);
		color: var(--hhr-surface);
		font-weight: 700;
	}
	.hhr-cc__tab:focus-visible { outline: 2px solid var(--hhr-teal); outline-offset: 2px; }

	.hhr-cc__hint {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 18px 10px;
	}
	.hhr-cc__count {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--hhr-muted);
	}
	.hhr-cc__swipe {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		margin: -8px -10px -8px 0; /* bigger tap target without shifting the layout */
		padding: 8px 10px;
		border: 0;
		border-radius: 999px;
		background: transparent;
		box-shadow: none;
		font: inherit;
		font-size: 12px;
		font-weight: 700;
		line-height: 1.2;
		color: var(--hhr-teal);
		white-space: nowrap;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.hhr-cc__swipe:active { background: var(--hhr-track); }
	.hhr-cc__swipe:focus-visible { outline: 2px solid var(--hhr-teal); outline-offset: 0; }
	.hhr-cc__swipe-arrow { display: inline-block; transition: transform .2s ease; }
	/* At the last cottage the arrow points back */
	.hhr-cc__swipe.is-back .hhr-cc__swipe-arrow { transform: scaleX(-1); }
	@media (hover: hover) and (pointer: fine) {
		.hhr-cc__swipe:hover { color: var(--hhr-teal); background: var(--hhr-track); }
		.hhr-cc__swipe:hover .hhr-cc__swipe-arrow { transform: translateX(2px); }
		.hhr-cc__swipe.is-back:hover .hhr-cc__swipe-arrow { transform: scaleX(-1) translateX(2px); }
	}
	/* Nothing to scroll (e.g. tablet showing all cottages) */
	.hhr-cc__panel.no-overflow .hhr-cc__swipe { visibility: hidden; }

	.hhr-cc__frame { position: relative; }
	.hhr-cc__frame::after {
		content: "";
		position: absolute;
		top: 0; right: 0; bottom: 0;
		width: 38px;
		background: linear-gradient(90deg, rgba(243, 238, 230, 0), var(--hhr-bg));
		pointer-events: none;
		transition: opacity .2s ease;
	}
	.hhr-cc__frame.is-end::after { opacity: 0; }

	.hhr-cc__scroll {
		position: relative; /* keep absolutely-positioned screen-reader text inside the scroll area */
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scroll-padding-left: 124px;
		overscroll-behavior-x: contain;
	}
	.hhr-cc__scroll:focus-visible { outline: 2px solid var(--hhr-teal); outline-offset: -2px; }

	.hhr-cc__table {
		/* 149px per cottage minimum; stretch to fill wider tablet screens */
		width: max(100%, calc(124px + var(--hhr-cc-n, 4) * 149px));
		max-width: none;
		border-collapse: separate;
		border-spacing: 0;
		background: var(--hhr-bg);
	}
	.hhr-cc__col-label { width: 124px; }
	/* no fixed width: cottage columns share what's left equally (≥149px via table width) */

	.hhr-cc__table th,
	.hhr-cc__table td { background: var(--hhr-bg); }

	/* sticky first column */
	.hhr-cc__table tr > :first-child {
		position: sticky;
		left: 0;
		z-index: 2;
		background: var(--hhr-bg);
		box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .14);
	}
	.hhr-cc__table thead tr > :first-child { z-index: 3; }

	/* header row */
	.hhr-cc__table .hhr-cc__corner {
		vertical-align: bottom;
		padding: 10px 14px;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--hhr-muted);
	}
	.hhr-cc__cottage {
		padding: 10px 12px;
		border-left: 1px solid var(--hhr-col-line);
		scroll-snap-align: start;
	}
	.hhr-cc__thumb {
		height: 110px;
		border-radius: 5px;
	}
	.hhr-cc__name {
		margin-top: 7px;
		font-weight: 700;
		font-size: 17px;
		line-height: 1.05;
	}

	/* feature rows */
	.hhr-cc__table tbody th,
	.hhr-cc__table tbody td { border-top: 1px solid var(--hhr-row-line); }

	.hhr-cc__label {
		padding: 12px 14px 12px 18px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .01em;
		line-height: 1.3;
		color: var(--hhr-ink-label);
	}
	.hhr-cc__value {
		padding: 12px;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.34;
		color: var(--hhr-ink);
		border-left: 1px solid var(--hhr-col-line);
	}

	.hhr-cc__book-row td { padding-bottom: 18px; }
	.hhr-cc__book {
		padding: 10px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
	}
}

/* =========================================================
   HOVER CROSSHAIR — cottage column + feature row
   Only on devices with a real pointer (no sticky taps on phones).
   ========================================================= */
.hhr-cc {
	--hhr-hl: #edf3f1;       /* row / column tint (desktop: pale teal, so it reads against the beige gutters) */
	--hhr-hl-cross: #d9e6e2; /* where they cross */
}
@media (max-width: 999.98px) {
	.hhr-cc {
		--hhr-hl: #ebe4d7;       /* on the beige mobile cells */
		--hhr-hl-cross: #e0d6c4;
	}
}

@media (hover: hover) and (pointer: fine) {
	.hhr-cc__table th,
	.hhr-cc__table td { transition: background-color .12s ease; }

	.hhr-cc__table tr.is-row > *,
	.hhr-cc__table .is-col { background-color: var(--hhr-hl); }

	.hhr-cc__table tr.is-row > .is-col { background-color: var(--hhr-hl-cross); }

	.hhr-cc__table tr.is-row > .hhr-cc__label,
	.hhr-cc__cottage.is-col .hhr-cc__name { color: var(--hhr-teal); }

	.hhr-cc__cottage.is-col .hhr-cc__thumb img { transform: scale(1.04); }
	.hhr-cc__thumb img { transition: transform .3s ease; }
}

/* =========================================================
   FULL-WIDTH BACKGROUND
   Beige runs edge to edge; content stays in the theme container.
   ========================================================= */
@media (min-width: 1000px) {
	/* Paint the beige out to both screen edges without changing layout. */
	.hhr-cc__panel {
		box-shadow: 0 0 0 100vmax var(--hhr-bg);
		clip-path: inset(0 -100vmax);
	}
	/* The head (tabs) stays within the container — only the panel runs full width. */
}

@media (max-width: 999.98px) {
	/* Break out of the theme's side padding so bars and table reach the screen edges. */
	.hhr-cc {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}