/**
 * Getaway — hosts, destinations & rooms (handle `stepfox-hb-hosts`, dep `stepfox-hb`).
 *
 * Owns everything the loops / field blocks of includes/{loops,fields-host,
 * fields-destination,fields-room}.php print:
 *
 *   1. host avatar            .sfhb-hostav            (stepfox_hb_host_avatar_html — on stay cards too)
 *   2. host fields            .sfhb-f-host-*          name, photo, tagline, rating, phone, email,
 *                                                     bio, stats, socials, contact buttons
 *   3. destination tile       .sfhb-dest--tile|wide|card|chip   (stepfox_hb_destination_tile_html)
 *   4. destination fields     .sfhb-f-destination-*   name, image, count, from-price, link, tagline
 *   5. room fields + tile     .sfhb-f-room-*, .sfhb-price, .sfhb-rfacts, .sfhb-roomtile
 *   6. loop kinds             .sfhb-loop--hosts | --rooms | --destinations (grid minimums, item anchor)
 *
 * Palette tokens only: every colour is var(--wp--preset--color--<slug>) so the
 * dark scheme flips them; photos carry white text over the `scrim` gradient (the
 * one place a fixed colour is right). Logical properties for RTL, reduced-motion
 * safe, 44 px tap targets. The card stylesheet pulls this file in as a
 * dependency, so avatars / tiles / room tiles are styled wherever cards are.
 */

/* ======================================================================
   0. Tokens + shared atoms
   ==================================================================== */

:where(
	[class*="sfhb-f-host-"],
	[class*="sfhb-f-destination-"],
	[class*="sfhb-f-room-"],
	.sfhb-host-tile,
	.sfhb-destination-tile,
	.sfhb-card--room,
	.sfhb-hostav,
	.sfhb-hostmini,
	.sfhb-dest,
	.sfhb-roomtile,
	.sfhb-price,
	.sfhb-rfacts,
	.sfhb-hrate,
	.sfhb-superhost
) {
	--hx-ink: var(--wp--preset--color--ink);
	--hx-muted: var(--wp--preset--color--muted);
	--hx-line: var(--wp--preset--color--line);
	--hx-edge: var(--wp--preset--color--edge);
	--hx-base: var(--wp--preset--color--base);
	--hx-panel: var(--wp--preset--color--panel);
	--hx-panel-2: var(--wp--preset--color--panel-2);
	--hx-accent: var(--wp--preset--color--accent);
	--hx-sea: var(--wp--preset--color--accent-2);
	--hx-sage: var(--wp--preset--color--neon);
	--hx-dusk: var(--wp--preset--color--violet);
	--hx-mist: var(--wp--preset--color--turf);
	--hx-gold: var(--wp--preset--color--gold);
	--hx-glass: var(--wp--preset--color--glass);
	--hx-f-ui: var(--wp--preset--font-family--ui);
	--hx-f-display: var(--wp--preset--font-family--display);
	--hx-f-num: var(--wp--preset--font-family--num, var(--wp--preset--font-family--ui));
	--hx-r-card: var(--sfhb-radius-card, 16px);
	--hx-r-btn: var(--sfhb-radius-btn, 12px);
	--hx-on-photo: var(--sfhb-on-photo, white);
	--hx-scrim: var(--wp--preset--gradient--scrim);
	--hx-ease: var(--sfhb-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
	box-sizing: border-box;
}

/* Visually hidden text (the stretched links, the superhost seal, status labels). */
:where(.sfhb-superhost, .sfhb-f-destination-link, .sfhb-f-room-link, .sfhb-roomtile) .sfhb-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* An empty field leaves no hole (the editor canvas re-shows it, editor.css). */
:where([class*="sfhb-f-host-"], [class*="sfhb-f-destination-"], [class*="sfhb-f-room-"]).is-empty {
	display: none;
}

:where(.sfhb-hostav, .sfhb-hostmini, .sfhb-dest, .sfhb-roomtile, .sfhb-f-host-photo, .sfhb-f-room-link, .sfhb-f-destination-link) .sfhb-ico {
	display: inline-flex;
	flex: none;
	line-height: 0;
}

:where(.sfhb-f-host-contact-buttons, .sfhb-f-host-socials, .sfhb-f-room-link, .sfhb-dest, .sfhb-roomtile, .sfhb-hostmini) a:focus-visible {
	outline: 2px solid var(--hx-sea);
	outline-offset: 2px;
}

/* ======================================================================
   1. Host avatar (round photo or tinted initials, optional Superhost seal)
   ==================================================================== */

.sfhb-hostav {
	--_s: var(--sfhb-av, 48px);
	position: relative;
	display: inline-grid;
	flex: none;
	inline-size: var(--_s);
	block-size: var(--_s);
	border-radius: 50%;
	vertical-align: middle;
}

.sfhb-hostav__img,
.sfhb-hostav__ini {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 50%;
	background: var(--hx-panel-2);
	box-shadow: 0 0 0 2px var(--hx-panel);
}

.sfhb-hostav__img {
	object-fit: cover;
}

.sfhb-hostav__ini,
.sfhb-f-host-photo__ini {
	display: grid;
	place-items: center;
	font-family: var(--hx-f-ui);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--hx-accent);
	background: var(--hx-panel-2);
	user-select: none;
}

.sfhb-hostav__ini {
	font-size: calc(var(--_s) * 0.38);
}

.sfhb-hostav__ini.is-tint-1,
.sfhb-f-host-photo__ini.is-tint-1 {
	color: var(--hx-sea);
	background: var(--hx-mist);
}

.sfhb-hostav__ini.is-tint-2,
.sfhb-f-host-photo__ini.is-tint-2 {
	color: var(--hx-dusk);
	background: var(--hx-panel-2);
}

.sfhb-hostav__ini.is-tint-3,
.sfhb-f-host-photo__ini.is-tint-3 {
	color: var(--hx-ink);
	background: var(--hx-mist);
}

.sfhb-hostav__ini.is-tint-4,
.sfhb-f-host-photo__ini.is-tint-4 {
	color: var(--hx-sage);
	background: var(--hx-mist);
}

/* Superhost: a word-pill in text, a gold star seal on photos. */
.sfhb-superhost {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 9px 2px 7px;
	border-radius: 999px;
	font: 600 12px/1.5 var(--hx-f-ui);
	color: var(--hx-gold);
	color: color-mix(in srgb, var(--hx-gold) 70%, var(--wp--preset--color--ink));
	background: var(--hx-panel-2);
	vertical-align: middle;
	white-space: nowrap;
}

.sfhb-hostav .sfhb-superhost,
.sfhb-f-host-photo .sfhb-superhost {
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: 0;
	display: grid;
	place-items: center;
	inline-size: max(16px, 34%);
	max-inline-size: 36px;
	aspect-ratio: 1;
	padding: 0;
	color: var(--hx-base);
	background: var(--hx-gold);
	box-shadow: 0 0 0 2px var(--hx-panel);
}

.sfhb-f-host-photo .sfhb-superhost {
	inset-inline-end: 6%;
	inset-block-end: 6%;
	inline-size: 22%;
	max-inline-size: 40px;
}

.sfhb-hostav .sfhb-superhost .sfhb-ico,
.sfhb-f-host-photo .sfhb-superhost .sfhb-ico {
	inline-size: 62%;
	block-size: 62%;
}

.sfhb-superhost svg {
	fill: currentColor;
}

.sfhb-hostav .sfhb-superhost svg,
.sfhb-f-host-photo .sfhb-superhost svg {
	inline-size: 100%;
	block-size: 100%;
}

/* Fallback host card for loops without a template (P-ENGAGE's card wins when present). */
.sfhb-hostmini {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--hx-line);
	border-radius: var(--hx-r-card);
	background: var(--hx-panel);
	color: var(--hx-ink);
}

.sfhb-hostmini__body {
	min-inline-size: 0;
}

.sfhb-hostmini__name {
	margin: 0;
	font: 600 18px/1.25 var(--hx-f-display);
}

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

.sfhb-hostmini__name a:hover {
	color: var(--hx-accent);
}

.sfhb-hostmini__sub {
	margin: 2px 0 4px;
	font: 400 14px/1.4 var(--hx-f-ui);
	color: var(--hx-muted);
}

/* ======================================================================
   2. Host fields
   ==================================================================== */

.sfhb-f-host-name {
	margin: 0;
	font-family: var(--hx-f-display);
	font-weight: 600;
	line-height: 1.2;
	color: var(--hx-ink);
	text-wrap: balance;
}

.sfhb-f-host-name a {
	color: inherit;
	text-decoration: none;
}

.sfhb-f-host-name a:hover {
	color: var(--hx-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sfhb-f-host-name .sfhb-superhost {
	margin-inline-start: 4px;
	font-family: var(--hx-f-ui);
}

.sfhb-f-host-photo {
	--_r: 50%;
	position: relative;
	display: block;
	inline-size: 100%;
	aspect-ratio: 1;
	margin: 0;
	border-radius: var(--_r);
}

.sfhb-f-host-photo.is-rounded {
	--_r: 22px;
}

.sfhb-f-host-photo__link,
.sfhb-f-host-photo__img,
.sfhb-f-host-photo__ini {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: inherit;
}

.sfhb-f-host-photo__img {
	object-fit: cover;
	background: var(--hx-panel-2);
}

.sfhb-f-host-photo__ini {
	display: grid;
	font-size: 28px;
	font-size: 34cqw;
}

.sfhb-f-host-photo {
	container-type: inline-size;
}

.sfhb-f-host-photo__link,
.sfhb-f-room-image__link {
	color: inherit;
	text-decoration: none;
}

.sfhb-f-host-tagline {
	margin: 0;
	font: 400 14.5px/1.45 var(--hx-f-ui);
	color: var(--hx-muted);
}

.sfhb-f-host-rating {
	margin: 0;
	font: 400 14px/1.4 var(--hx-f-ui);
	color: var(--hx-muted);
}

.sfhb-hrate {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.sfhb-hrate__star,
.sfhb-stat--rating .sfhb-ico {
	color: var(--hx-gold);
}

.sfhb-hrate__star svg,
.sfhb-stat--rating svg {
	fill: currentColor;
}

.sfhb-hrate__v {
	font-family: var(--hx-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--hx-ink);
}

.sfhb-f-host-phone,
.sfhb-f-host-email {
	margin: 0;
	font: 500 15px/1.4 var(--hx-f-ui);
}

.sfhb-f-host-phone a,
.sfhb-f-host-email a,
.sfhb-f-host-phone > .sfhb-ico + span,
.sfhb-f-host-email > .sfhb-ico + span {
	color: var(--hx-ink);
	text-decoration: none;
}

.sfhb-f-host-phone a,
.sfhb-f-host-email a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 24px;
}

.sfhb-f-host-phone .sfhb-ico,
.sfhb-f-host-email .sfhb-ico {
	color: var(--hx-sea);
}

.sfhb-f-host-phone a:hover span,
.sfhb-f-host-email a:hover span {
	color: var(--hx-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sfhb-f-host-bio {
	font: 400 15.5px/1.65 var(--hx-f-body, var(--hx-f-ui));
	color: var(--hx-ink);
}

.sfhb-f-host-bio > :first-child {
	margin-block-start: 0;
}

.sfhb-f-host-bio > :last-child {
	margin-block-end: 0;
}

.sfhb-f-host-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfhb-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.sfhb-stat__v {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font: 600 clamp(22px, 2.6vw, 28px) / 1.1 var(--hx-f-display);
	font-variant-numeric: tabular-nums;
	color: var(--hx-ink);
}

.sfhb-stat__l {
	font: 500 13px/1.3 var(--hx-f-ui);
	color: var(--hx-muted);
}

.sfhb-f-host-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfhb-hicon,
.sfhb-hbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hx-line);
	background: var(--hx-panel);
	color: var(--hx-ink);
	text-decoration: none;
	transition: transform 0.2s var(--hx-ease), border-color 0.2s var(--hx-ease), background-color 0.2s var(--hx-ease), color 0.2s var(--hx-ease);
}

.sfhb-hicon {
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
}

.sfhb-hicon:hover,
.sfhb-hbtn:hover {
	transform: translateY(-1px);
	border-color: var(--hx-sea);
	color: var(--hx-sea);
}

.sfhb-f-host-contact-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sfhb-hbtn {
	gap: 8px;
	min-block-size: 44px;
	padding: 0 20px;
	border-radius: var(--hx-r-btn);
	font: 600 14.5px/1 var(--hx-f-ui);
	white-space: nowrap;
}

.sfhb-hbtn.is-primary {
	border-color: var(--hx-ink);
	background: var(--hx-ink);
	color: var(--hx-base);
}

.sfhb-hbtn.is-primary:hover {
	border-color: var(--hx-accent);
	background: var(--hx-accent);
	color: var(--hx-base);
}

.sfhb-hbtn.is-icon {
	inline-size: 44px;
	padding: 0;
	border-radius: 50%;
}

/* ======================================================================
   3. Destination tile  (tile · wide · card · chip)
   ==================================================================== */

.sfhb-dest {
	position: relative;
	display: block;
	min-inline-size: 0;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--hx-r-card);
	background: var(--hx-panel-2);
	color: var(--hx-on-photo);
}

.sfhb-dest--tile {
	aspect-ratio: 4 / 5;
}

/* No min-block-size here: with an aspect-ratio it would transfer into a min-width and widen the grid track. */
.sfhb-dest--wide {
	aspect-ratio: 16 / 9;
}

@media (max-width: 640px) {
	.sfhb-dest--wide {
		aspect-ratio: 4 / 3;
	}
}

.sfhb-dest__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.sfhb-dest__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--hx-ease);
}

.sfhb-dest__ph {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	color: var(--hx-muted);
	background: var(--hx-panel-2);
}

.sfhb-dest__scrim {
	position: absolute;
	inset: 0;
	background: var(--hx-scrim);
	pointer-events: none;
}

.sfhb-dest__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 20px 18px;
	text-shadow: 0 1px 14px color-mix(in srgb, black 40%, transparent);
}

.sfhb-dest__parent {
	font: 600 11.5px/1.2 var(--hx-f-ui);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.88;
}

.sfhb-dest__name {
	margin: 0;
	font: 600 clamp(22px, 2.2vw, 28px) / 1.12 var(--hx-f-display);
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.sfhb-dest__link {
	color: inherit;
	text-decoration: none;
}

/* The whole tile is the link. */
.sfhb-dest__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.sfhb-dest__link:focus-visible {
	outline: none;
}

.sfhb-dest__link:focus-visible::after {
	outline: 3px solid var(--hx-sea);
	outline-offset: -3px;
	border-radius: inherit;
}

.sfhb-dest__tagline {
	margin: 2px 0 0;
	max-inline-size: 38ch;
	font: 400 14.5px/1.45 var(--hx-f-ui);
	opacity: 0.92;
}

.sfhb-dest__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	margin: 4px 0 0;
	font: 500 13.5px/1.4 var(--hx-f-ui);
	font-variant-numeric: tabular-nums;
	opacity: 0.94;
}

.sfhb-dest__meta > span + span::before {
	content: "·";
	margin-inline-end: 12px;
	opacity: 0.7;
}

.sfhb-dest__go {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-end: 14px;
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	background: var(--hx-glass);
	color: var(--hx-ink);
	text-shadow: none;
	opacity: 0;
	transform: translate(-6px, 6px);
	transition: opacity 0.3s var(--hx-ease), transform 0.3s var(--hx-ease);
}

@media (hover: hover) {
	.sfhb-dest:hover .sfhb-dest__img {
		transform: scale(1.05);
	}

	.sfhb-dest:hover .sfhb-dest__go {
		opacity: 1;
		transform: none;
	}
}

.sfhb-dest:focus-within .sfhb-dest__go {
	opacity: 1;
	transform: none;
}

/* Card: photo above the text. */
.sfhb-dest--card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hx-line);
	background: var(--hx-panel);
	color: var(--hx-ink);
}

.sfhb-dest--card .sfhb-dest__media {
	position: relative;
	inset: auto;
	aspect-ratio: 4 / 3;
}

.sfhb-dest--card .sfhb-dest__body {
	position: static;
	padding: 16px 18px 18px;
	text-shadow: none;
}

.sfhb-dest--card .sfhb-dest__parent,
.sfhb-dest--card .sfhb-dest__meta {
	color: var(--hx-muted);
	opacity: 1;
}

.sfhb-dest--card .sfhb-dest__tagline {
	color: var(--hx-muted);
	opacity: 1;
}

/* Chip: round thumb + name + count. */
.sfhb-dest--chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 16px 5px 5px;
	border: 1px solid var(--hx-line);
	border-radius: 999px;
	background: var(--hx-panel);
	color: var(--hx-ink);
	text-decoration: none;
	transition: border-color 0.2s var(--hx-ease), transform 0.2s var(--hx-ease);
}

.sfhb-dest--chip:hover {
	border-color: var(--hx-sea);
	transform: translateY(-1px);
}

.sfhb-dest--chip:focus-visible {
	outline: 2px solid var(--hx-sea);
	outline-offset: 2px;
}

.sfhb-dest--chip .sfhb-dest__media {
	position: relative;
	inset: auto;
	flex: none;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 50%;
}

.sfhb-dest--chip .sfhb-dest__name {
	font: 600 14.5px/1.2 var(--hx-f-ui);
	letter-spacing: 0;
}

.sfhb-dest--chip .sfhb-dest__count {
	padding: 1px 8px;
	border-radius: 999px;
	font: 600 12px/1.6 var(--hx-f-num);
	font-variant-numeric: tabular-nums;
	color: var(--hx-muted);
	background: var(--hx-panel-2);
}

/* ======================================================================
   4. Destination fields (the designer-built tile: image + name + count …)
   ==================================================================== */

.sfhb-f-destination-name {
	margin: 0;
	font-family: var(--hx-f-display);
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
}

.sfhb-f-destination-name a {
	color: inherit;
	text-decoration: none;
}

.sfhb-f-destination-name a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sfhb-f-destination-image {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	border-radius: var(--sfhb-img-radius, var(--hx-r-card));
	aspect-ratio: var(--sfhb-aspect, 4 / 5);
	background: var(--hx-panel-2);
}

.sfhb-f-destination-image.is-fill {
	position: absolute;
	inset: 0;
	z-index: 0;
	aspect-ratio: auto;
	border-radius: 0;
}

.sfhb-f-destination-image__img {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--hx-ease);
}

.sfhb-f-destination-image__scrim {
	position: absolute;
	inset: 0;
	background: var(--hx-scrim);
	pointer-events: none;
}

.sfhb-f-destination-image.is-placeholder .sfhb-dest__ph {
	position: absolute;
	inset: 0;
}

.sfhb-f-destination-count,
.sfhb-f-destination-from-price {
	font: 500 14px/1.4 var(--hx-f-ui);
	font-variant-numeric: tabular-nums;
}

.sfhb-f-destination-from-price .sfhb-f__l,
.sfhb-f-destination-from-price .sfhb-f__u {
	opacity: 0.8;
}

.sfhb-f-destination-from-price .sfhb-f__v {
	font-family: var(--hx-f-num);
	font-weight: 700;
}

.sfhb-f-destination-tagline {
	margin: 0;
	font: 400 14.5px/1.45 var(--hx-f-ui);
}

/* destination-link / room-link (stretched): an invisible hit area over the nearest positioned card. */
.sfhb-f-destination-link,
.sfhb-f-room-link.is-stretch {
	display: block;
	inline-size: 0;
	block-size: 0;
	overflow: visible;
	text-decoration: none;
}

.sfhb-f-destination-link::after,
.sfhb-f-room-link.is-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.sfhb-f-destination-link:focus-visible,
.sfhb-f-room-link.is-stretch:focus-visible {
	outline: none;
}

.sfhb-f-destination-link:focus-visible::after,
.sfhb-f-room-link.is-stretch:focus-visible::after {
	outline: 3px solid var(--hx-sea);
	outline-offset: -3px;
	border-radius: inherit;
}

@media (hover: hover) {
	.sfhb-loop--destinations > *:hover .sfhb-f-destination-image__img {
		transform: scale(1.06);
	}
}

/* ======================================================================
   5. Room fields, price, facts + the fallback room tile
   ==================================================================== */

.sfhb-f-room-title {
	margin: 0;
	font-family: var(--hx-f-display);
	font-weight: 600;
	line-height: 1.2;
	color: var(--hx-ink);
	text-wrap: balance;
}

.sfhb-f-room-title a {
	color: inherit;
	text-decoration: none;
}

.sfhb-f-room-title a:hover {
	color: var(--hx-accent);
}

/* Price: "from €240 / night" · "€240 / night" + "€720 total · 3 nights" · "Not available". */
.sfhb-price {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--hx-ink);
}

.sfhb-price__main {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
}

.sfhb-price__from,
.sfhb-price__per {
	font: 500 13.5px/1.3 var(--hx-f-ui);
	color: var(--hx-muted);
}

.sfhb-price__amt {
	font: 650 clamp(20px, 2vw, 24px) / 1.15 var(--hx-f-num);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.sfhb-price__sub {
	font: 400 13px/1.4 var(--hx-f-ui);
	font-variant-numeric: tabular-nums;
	color: var(--hx-muted);
}

.sfhb-price__left {
	font-weight: 600;
	color: var(--hx-accent);
}

.sfhb-price__na {
	font: 600 14.5px/1.35 var(--hx-f-ui);
	color: var(--hx-muted);
}

.sfhb-price.is-unavailable .sfhb-price__sub {
	text-decoration: line-through;
	text-decoration-color: var(--hx-line);
}

/* Room photo. */
.sfhb-f-room-image {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	border-radius: var(--sfhb-img-radius, var(--hx-r-card));
	aspect-ratio: var(--sfhb-aspect, 4 / 3);
	background: var(--hx-panel-2);
}

.sfhb-f-room-image.is-natural {
	aspect-ratio: auto;
}

.sfhb-f-room-image__link {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.sfhb-f-room-image__img,
.sfhb-roomtile__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--hx-ease);
}

.sfhb-f-room-image.is-natural .sfhb-f-room-image__img {
	block-size: auto;
}

.sfhb-f-room-image.is-placeholder,
.sfhb-roomtile__media {
	position: relative;
	display: grid;
	place-items: center;
	color: var(--hx-muted);
}

.sfhb-roomtile__ph {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	color: var(--hx-muted);
	background: var(--hx-panel-2);
}

.sfhb-f-room-image__count {
	position: absolute;
	inset-inline-start: 10px;
	inset-block-end: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	font: 600 12px/1.4 var(--hx-f-ui);
	color: var(--hx-ink);
	background: var(--hx-glass);
	backdrop-filter: blur(8px);
}

@media (hover: hover) {
	.sfhb-loop--rooms > *:hover .sfhb-f-room-image__img,
	.sfhb-roomtile:hover .sfhb-roomtile__img {
		transform: scale(1.04);
	}
}

/* Facts: Sleeps 4 · 1 bedroom · 2 beds · 1 bathroom · 28 m². */
.sfhb-rfacts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 14px/1.45 var(--hx-f-ui);
	color: var(--hx-muted);
}

.sfhb-rfacts__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-inline-size: 0;
}

.sfhb-rfacts__item .sfhb-ico {
	color: var(--hx-sea);
}

/* Separators: with icons the icons separate; dots only print in icon-less rows (a wrapped row would start with a stray dot), slashes always. */
.sfhb-rfacts.has-sep-dot.no-icons > .sfhb-rfacts__item + .sfhb-rfacts__item::before,
.sfhb-rfacts.has-sep-slash > .sfhb-rfacts__item + .sfhb-rfacts__item::before {
	content: "·";
	margin-inline-end: 10px;
	opacity: 0.7;
}

.sfhb-rfacts.has-sep-slash > .sfhb-rfacts__item + .sfhb-rfacts__item::before {
	content: "/";
}

.sfhb-f-room-beds,
.sfhb-f-room-view {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: 500 14.5px/1.4 var(--hx-f-ui);
	color: var(--hx-ink);
}

.sfhb-f-room-beds .sfhb-ico,
.sfhb-f-room-view .sfhb-ico {
	color: var(--hx-sea);
}

/* room-link as text link / button. */
.sfhb-f-room-link.is-link,
.sfhb-f-room-link.is-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 600 14.5px/1.2 var(--hx-f-ui);
	text-decoration: none;
	transition: transform 0.2s var(--hx-ease), color 0.2s var(--hx-ease), background-color 0.2s var(--hx-ease);
}

.sfhb-f-room-link.is-link {
	color: var(--hx-sea);
}

.sfhb-f-room-link.is-link:hover {
	color: var(--hx-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sfhb-f-room-link.is-button {
	min-block-size: 44px;
	padding: 0 20px;
	border-radius: var(--hx-r-btn);
	color: var(--hx-base);
	background: var(--hx-ink);
}

.sfhb-f-room-link.is-button:hover {
	color: var(--hx-base);
	background: var(--hx-accent);
	transform: translateY(-1px);
}

/* Fallback room tile (room-loop without an inner template, P-BOOK-B's room-card wins when present). */
.sfhb-roomtile {
	position: relative;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	overflow: hidden;
	border: 1px solid var(--hx-line);
	border-radius: var(--hx-r-card);
	background: var(--hx-panel);
	color: var(--hx-ink);
	transition: transform 0.24s var(--hx-ease), box-shadow 0.24s var(--hx-ease);
}

.sfhb-roomtile__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--hx-panel-2);
}

.sfhb-roomtile__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px 18px;
}

.sfhb-roomtile__stay {
	font: 600 11.5px/1.2 var(--hx-f-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hx-muted);
}

.sfhb-roomtile__title {
	margin: 0;
	font: 600 20px/1.2 var(--hx-f-display);
}

.sfhb-roomtile__link {
	color: inherit;
	text-decoration: none;
}

.sfhb-roomtile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.sfhb-roomtile__link:hover {
	color: var(--hx-accent);
}

.sfhb-roomtile__link:focus-visible {
	outline: none;
}

.sfhb-roomtile__link:focus-visible::after {
	outline: 3px solid var(--hx-sea);
	outline-offset: -3px;
	border-radius: inherit;
}

.sfhb-roomtile__beds {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: 500 14.5px/1.4 var(--hx-f-ui);
}

.sfhb-roomtile__beds .sfhb-ico {
	color: var(--hx-sea);
}

.sfhb-roomtile__price {
	margin-block-start: auto;
	padding-block-start: 6px;
}

.sfhb-roomtile.is-unavailable .sfhb-roomtile__img {
	filter: grayscale(0.55);
	opacity: 0.85;
}

.sfhb-roomtile.is-unavailable .sfhb-roomtile__link {
	color: var(--hx-muted);
}

@media (hover: hover) {
	.sfhb-roomtile:hover {
		transform: translateY(-3px);
		box-shadow: 0 14px 34px color-mix(in srgb, var(--hx-ink) 12%, transparent);
	}
}

/* ======================================================================
   5b. Composed tiles — the block editor's default loop templates (and the
       theme patterns) build a host / destination / room card from field
       blocks inside a core/group carrying these classes.
   ==================================================================== */

.sfhb-host-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	block-size: 100%;
	padding: 28px 22px 24px;
	border: 1px solid var(--hx-edge);
	border-radius: var(--hx-r-card);
	background: var(--hx-panel);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--hx-ink) 6%, transparent);
	text-align: center;
	transition: transform 0.35s var(--hx-ease), box-shadow 0.35s var(--hx-ease);
}

.sfhb-host-tile .sfhb-f-host-photo {
	inline-size: 112px;
	margin-block-end: 8px;
	box-shadow: 0 0 0 4px var(--hx-panel), 0 0 0 5px var(--hx-line);
}

.sfhb-host-tile .sfhb-f-host-name {
	font-size: 20px;
}

.sfhb-host-tile .sfhb-f-host-name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sfhb-host-tile .sfhb-f-host-stats {
	inline-size: 100%;
	justify-content: center;
	margin-block-start: 10px;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--hx-line);
}

.sfhb-host-tile .sfhb-stat {
	align-items: center;
	text-align: center;
}

.sfhb-host-tile :is(.sfhb-f-host-contact-buttons, .sfhb-f-host-socials, .sfhb-f-host-phone a, .sfhb-f-host-email a) {
	position: relative;
	z-index: 2;
}

.sfhb-host-tile .sfhb-f-host-contact-buttons,
.sfhb-host-tile .sfhb-f-host-socials {
	justify-content: center;
}

.sfhb-destination-tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	min-inline-size: 0;
	aspect-ratio: 4 / 5;
	padding: 20px 22px 22px;
	overflow: hidden;
	border-radius: var(--hx-r-card);
	color: var(--hx-on-photo);
	background: var(--hx-dusk);
}

.sfhb-destination-tile > .sfhb-f-destination-image {
	position: absolute;
	inset: 0;
	z-index: -1;
	aspect-ratio: auto;
	border-radius: 0;
}

.sfhb-destination-tile :is(.sfhb-f-destination-name, .sfhb-f-destination-count, .sfhb-f-destination-from-price, .sfhb-f-destination-tagline) {
	color: var(--hx-on-photo);
	text-shadow: 0 1px 14px color-mix(in srgb, black 42%, transparent);
}

.sfhb-destination-tile .sfhb-f-destination-name {
	font-size: clamp(22px, 2.2vw, 28px);
}

.sfhb-destination-tile .sfhb-f-destination-name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.sfhb-destination-tile .sfhb-f-destination-name a:focus-visible {
	outline: none;
}

.sfhb-destination-tile .sfhb-f-destination-name a:focus-visible::after {
	outline: 3px solid var(--hx-sea);
	outline-offset: -3px;
	border-radius: inherit;
}

.sfhb-card--room {
	position: relative;
}

.sfhb-card > .sfhb-f-room-image,
.sfhb-card > .wp-block-hotel-booking-room-image {
	flex: none;
	border-radius: 0;
}

.sfhb-card--room > .sfhb-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
}

.sfhb-card--room .sfhb-f-room-title {
	display: -webkit-box;
	min-block-size: 2.4em;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.sfhb-card--room .sfhb-f-room-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.sfhb-card--room .sfhb-f-room-title a:focus-visible {
	outline: none;
}

.sfhb-card--room .sfhb-f-room-title a:focus-visible::after {
	outline: 3px solid var(--hx-sea);
	outline-offset: -3px;
	border-radius: inherit;
}

.sfhb-card--room .sfhb-f-room-price {
	margin-block-start: auto;
	padding-block-start: 8px;
}

@media (hover: hover) {
	.sfhb-host-tile:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 36px color-mix(in srgb, var(--hx-ink) 12%, transparent);
	}

	.sfhb-card--room:hover .sfhb-f-room-image__img {
		transform: scale(1.04);
	}

	.sfhb-card--room:hover .sfhb-f-room-title a {
		color: var(--hx-accent);
	}
}

/* ======================================================================
   6. Loop kinds (the base grid + rails live in cards.css; these are the
      zero-specificity fallbacks + per-kind minimums + the item anchor)
   ==================================================================== */

:where(.sfhb-loop--hosts, .sfhb-loop--rooms, .sfhb-loop--destinations) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sfhb-loop-min, 260px)), 1fr));
	gap: var(--sfhb-loop-gap, 24px);
	min-inline-size: 0;
}

:where(.sfhb-loop--hosts) {
	--sfhb-loop-min: 260px;
}

:where(.sfhb-loop--rooms) {
	--sfhb-loop-min: 290px;
}

:where(.sfhb-loop--destinations) {
	--sfhb-loop-min: 240px;
}

:where(.sfhb-loop--hosts, .sfhb-loop--rooms, .sfhb-loop--destinations) > * {
	position: relative;
	min-inline-size: 0;
}

.sfhb-loop--hosts[data-sfhb-variant="horizontal"] {
	--sfhb-loop-min: 420px;
}

.sfhb-loop--destinations[data-sfhb-variant="chip"] {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sfhb-loop--destinations[data-sfhb-variant="wide"] {
	--sfhb-loop-min: 360px;
}

/* ======================================================================
   7. Dark scheme + motion
   ==================================================================== */

:root[data-sfhb-scheme="dark"] :where(.sfhb-dest__img, .sfhb-f-destination-image__img, .sfhb-f-room-image__img, .sfhb-roomtile__img, .sfhb-f-host-photo__img, .sfhb-hostav__img) {
	filter: brightness(0.92);
}

@media (prefers-reduced-motion: reduce) {
	.sfhb-dest__img,
	.sfhb-dest__go,
	.sfhb-dest--chip,
	.sfhb-f-destination-image__img,
	.sfhb-f-room-image__img,
	.sfhb-roomtile,
	.sfhb-roomtile__img,
	.sfhb-host-tile,
	.sfhb-hicon,
	.sfhb-hbtn,
	.sfhb-f-room-link.is-link,
	.sfhb-f-room-link.is-button {
		transition: none;
	}

	.sfhb-dest:hover .sfhb-dest__img,
	.sfhb-host-tile:hover,
	.sfhb-roomtile:hover,
	.sfhb-roomtile:hover .sfhb-roomtile__img,
	.sfhb-hicon:hover,
	.sfhb-hbtn:hover,
	.sfhb-dest--chip:hover {
		transform: none;
	}

	.sfhb-dest__go {
		opacity: 1;
		transform: none;
	}
}

/* Touch: no hover reveal for the arrow. */
@media (hover: none) {
	.sfhb-dest__go {
		opacity: 1;
		transform: none;
	}
}