/* Single accommodation page — Airbnb-lite layout.
 *
 * 60/40 columns at ≥900px, sticky stay-card on the right. Below 900px the
 * core wp:columns stacks naturally and we unstick the card. */

/* ---------- Body container ---------- */
.wwh-single--accommodation .wwh-single__body {
	padding-block: clamp(2rem, 4vw, 3rem);
}

/* The post-content prose column inherits its own typography from
   inner-pages.css; we only need to tighten the column padding. */
.wwh-single--accommodation__columns {
	margin-block-start: 0;
}

/* ---------- Sticky stay-card column ---------- */
.wwh-stay-card-col {
	align-self: flex-start;
}

@media (min-width: 900px) {
	.wwh-stay-card-col {
		position: sticky;
		top: var(--wwh-sticky-header-height, 96px);
	}
}

/* ---------- Stay card panel ---------- */
.wwh-stay-card {
	background: #f5efe5;
	border: 1px solid #e0d6c4;
	border-radius: 4px;
	padding: clamp(1.25rem, 2vw, 1.75rem);
}

.wwh-stay-card__heading {
	margin: 0 0 1rem;
	color: #241823;
}

/* ---------- Rows ---------- */
.wwh-stay-card__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-block: 0.5rem;
	border-bottom: 1px solid #e0d6c4;
}

.wwh-stay-card__row:last-of-type {
	border-bottom: none;
	margin-bottom: 0.5rem;
}

/* Hide rows whose value paragraph is empty (no source meta).
   The paragraph is rendered as <p class="wwh-stay-card__value"></p>.
   Numeric meta (rooms, star rating) returns `null` from the binding when
   the value is `0` (see args.hide_zero in the template), so those rows
   collapse here too. */
.wwh-stay-card__row:has(.wwh-stay-card__value:empty) {
	display: none;
}

.wwh-stay-card__label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #5a544d;
	flex: 0 0 auto;
}

.wwh-stay-card__value {
	margin: 0;
	font-style: italic;
	color: #241823;
	text-align: right;
	flex: 1 1 auto;
	word-break: break-word;
}

/* Rows whose value is long-form prose (amenities, hours, multi-line address)
   wrap the value below the label rather than crushing it on one line. */
.wwh-stay-card__row--amenities,
.wwh-stay-card__row--multiline {
	flex-wrap: wrap;
}

.wwh-stay-card__row--amenities .wwh-stay-card__value,
.wwh-stay-card__row--multiline .wwh-stay-card__value {
	flex-basis: 100%;
	text-align: left;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	white-space: pre-line;
}

/* ---------- Booking CTA inside the card ---------- */
/*
 * The first CTA in the stack opens with extra top spacing + a hairline
 * separator from the meta rows above. Subsequent CTAs sit flush in a tight
 * vertical stack so multi-link traders (Website / Menu / Products / FB / IG)
 * read as a unified action list, not five separate buttons.
 */
.wwh-stay-card .wwh-booking-cta-wrap {
	margin: 0.5rem 0 0;
	text-align: left;
}

.wwh-stay-card .wwh-booking-cta-wrap:first-of-type {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid #e0d6c4;
}

.wwh-booking-cta {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	background: transparent;
	color: #241823;
	padding: 0.7rem 0.85rem;
	border: 1px solid #d6cab4;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-style: normal;
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
	letter-spacing: 0.01em;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.wwh-booking-cta:hover,
.wwh-booking-cta:focus-visible {
	background: #241823;
	border-color: #241823;
	color: #f2ede6;
	outline: none;
}

.wwh-booking-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 auto;
	color: inherit;
}

.wwh-booking-cta__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.wwh-booking-cta__label {
	flex: 1 1 auto;
}

.wwh-booking-cta__arrow {
	flex: 0 0 auto;
	opacity: 0.55;
	font-size: 0.95em;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.wwh-booking-cta:hover .wwh-booking-cta__arrow,
.wwh-booking-cta:focus-visible .wwh-booking-cta__arrow {
	opacity: 1;
	transform: translateX(2px);
}

/* Primary booking CTA (accommodation "Book direct") — keep the filled
 * obsidian look so it remains the dominant action on the stay-card. */
.wwh-booking-cta:not(.wwh-booking-cta--has-icon) {
	background: #241823;
	border-color: #241823;
	color: #f2ede6;
	font-style: italic;
}

.wwh-booking-cta:not(.wwh-booking-cta--has-icon):hover,
.wwh-booking-cta:not(.wwh-booking-cta--has-icon):focus-visible {
	background: #3a2a39;
	border-color: #3a2a39;
}

/* Social platform brand tints — the icon adopts the platform colour at rest;
 * on hover the whole button flips to the obsidian fill like the others. */
.wwh-booking-cta--facebook .wwh-booking-cta__icon {
	color: #1877f2;
}

.wwh-booking-cta--facebook:hover .wwh-booking-cta__icon,
.wwh-booking-cta--facebook:focus-visible .wwh-booking-cta__icon {
	color: #f2ede6;
}

.wwh-booking-cta--instagram .wwh-booking-cta__icon {
	color: #c13584;
}

.wwh-booking-cta--instagram:hover .wwh-booking-cta__icon,
.wwh-booking-cta--instagram:focus-visible .wwh-booking-cta__icon {
	color: #f2ede6;
}

/* ---------- Related accommodation strip ---------- */
.wwh-related-accommodation {
	margin: 4rem 0 0;
	padding-top: 2.5rem;
	border-top: 1px solid #e0d6c4;
}

.wwh-related-accommodation__heading {
	margin: 0 0 1.5rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: #241823;
	text-align: center;
}

@media (max-width: 700px) {
	.wwh-related-accommodation__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 480px) {
	.wwh-related-accommodation__grid {
		grid-template-columns: 1fr !important;
	}
}