/* Not final-design-polished - just a safety net so cover photos display proportioned
 * regardless of the original upload's dimensions, until real design lands. */

/* WordPress core's Gallery block sizes each image via
 * calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * .667), but never sets that
 * custom property itself - it's meant to be supplied by the active theme so gallery
 * columns line up with its actual blockGap. twentytwentyfour's theme.json sets root
 * blockGap to 1.2rem but doesn't wire it to this variable, so the calc() silently falls
 * back to a hardcoded 16px while the real flex gap renders at 1.2rem (19.2px) - a
 * mismatch that overflows a 3-image row by a few pixels and wraps the 3rd image onto its
 * own full-width line, regardless of how wide the gallery's container is. Setting it here
 * (matching root blockGap) is what actually produces the compact 3-across grid. */
:root {
	--wp--style--unstable-gallery-gap: 1.2rem;
}

/* Shared by every classic template this plugin renders (single-room.php,
 * single-amenity.php, taxonomy-room-term.php) - those render outside the active theme's
 * block template, so they get none of its content-width or cover/hero styling for free.
 * 620px matches twentytwentyfour's theme.json contentSize, so these pages line up with
 * the theme's own single-post width instead of running edge-to-edge. */
.hush-lodge-content {
	max-width: 620px;
	margin: 0 auto;
	padding: 0 20px;
}

.hush-lodge-cover-photo {
	display: block;
	max-width: 100%;
	width: 100%;
	height: 320px;
	object-fit: cover;
}

.hush-lodge-room-amenities {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0;
	margin: 24px 0;
}

.hush-lodge-amenity {
	width: 160px;
}

.hush-lodge-amenity__photo {
	display: block;
	max-width: 100%;
	width: 100%;
	height: 120px;
	object-fit: cover;
}

.hush-lodge-term-rooms {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0;
	margin: 24px 0;
}

.hush-lodge-term-room {
	width: 200px;
}

.hush-lodge-term-room__photo {
	display: block;
	max-width: 100%;
	width: 100%;
	height: 140px;
	object-fit: cover;
}

/* [hush_booking_form] (hush_lodge_booking_booking_form_shortcode()) - like the rest of this
 * file, a plain safety net (stacked labels, readable field width, obviously-colored notices)
 * rather than a finished design. */
.hush-lodge-booking-form {
	max-width: 480px;
}

.hush-lodge-booking-form__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 16px;
}

.hush-lodge-booking-form__field input,
.hush-lodge-booking-form__field select,
.hush-lodge-booking-form__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	font-size: 1em;
}

.hush-lodge-booking-form__notice {
	padding: 12px 16px;
	margin: 0 0 16px;
	border-left: 4px solid;
}

.hush-lodge-booking-form__notice p:last-child {
	margin-bottom: 0;
}

.hush-lodge-booking-form__notice--success {
	background: #edfaef;
	border-color: #1a7f37;
}

.hush-lodge-booking-form__notice--error {
	background: #fbeaea;
	border-color: #b32d2e;
}

.hush-lodge-booking-form__notice--error ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

.hush-lodge-booking-form__submit {
	cursor: pointer;
}

/* Branding (Aug 26 follow-up item 5): consume the --hlb-* custom properties the Settings
 * page emits (hush_lodge_booking_branding_custom_properties()), each with a fallback so an
 * unset value changes nothing. Deliberately a small surface. */
.hush-lodge-content {
	font-family: var( --hlb-font-family, inherit );
	font-size: var( --hlb-base-font-size, inherit );
}

.hush-lodge-house-rules__title,
.hush-lodge-content h1,
.hush-lodge-content h2 {
	color: var( --hlb-primary, inherit );
}

.hush-lodge-content a {
	color: var( --hlb-accent, var( --hlb-primary, inherit ) );
}

.hush-lodge-booking-form__submit {
	background: var( --hlb-primary, #2271b1 );
	border-color: var( --hlb-primary, #2271b1 );
	color: #fff;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 4px;
}

.hush-lodge-booking-form__logo {
	max-height: 64px;
	width: auto;
	margin-bottom: 16px;
}

/* Whitespace between the Room / Room Category / Location custom-rule groups - no headers,
 * just a gap (Aug 26 follow-up item 4). */
.hush-lodge-house-rules__custom + .hush-lodge-house-rules__custom {
	margin-top: 18px;
}

/* Social media links rendered by [hlb_business_detail field="social_links"] as icon links. */
.hlb-social-links {
	display: inline-flex;
	gap: 10px;
	align-items: center;
}

.hlb-social {
	display: inline-flex;
	color: var( --hlb-primary, currentColor );
	line-height: 0;
}

.hlb-social:hover {
	color: var( --hlb-accent, var( --hlb-primary, currentColor ) );
}

/* Shared room price presentation (Step 3c helper hush_lodge_booking_room_price_html) -
 * struck-through original next to the discounted price. Used on the single room page and
 * the Step 19 room card. */
.hlb-price {
	font-weight: 600;
}

.hlb-price--discounted del {
	opacity: 0.6;
	font-weight: 400;
	margin-right: 0.4em;
}

.hlb-price--discounted ins {
	text-decoration: none;
	color: var( --hlb-accent, #b32d2e );
}

.hush-lodge-single-room__price {
	font-size: 1.15em;
	margin: 0 0 1em;
}

.hush-lodge-single-room__price-unit {
	font-weight: 400;
	opacity: 0.7;
	font-size: 0.85em;
	margin-left: 0.3em;
}

/* [hlb_all_rooms] / [hlb_listings] - room card + grid (Step 19 / 19b). */
.hlb-all-rooms__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	align-items: end;
	margin-bottom: 20px;
}

.hlb-all-rooms__filters label {
	display: flex;
	flex-direction: column;
	font-size: 0.85em;
	gap: 3px;
}

.hlb-all-rooms__filters .hlb-all-rooms__discount {
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

.hlb-all-rooms__results.is-loading {
	opacity: 0.5;
	transition: opacity 0.15s;
}

.hlb-listings-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat( var( --hlb-cols, 3 ), 1fr );
}

.hlb-listings-grid--cols-1 { --hlb-cols: 1; }
.hlb-listings-grid--cols-2 { --hlb-cols: 2; }
.hlb-listings-grid--cols-3 { --hlb-cols: 3; }
.hlb-listings-grid--cols-4 { --hlb-cols: 4; }
.hlb-listings-grid--cols-5 { --hlb-cols: 5; }
.hlb-listings-grid--cols-6 { --hlb-cols: 6; }

@media ( max-width: 640px ) {
	.hlb-listings-grid { grid-template-columns: 1fr 1fr; }
}

@media ( max-width: 400px ) {
	.hlb-listings-grid { grid-template-columns: 1fr; }
}

.hlb-room-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.hlb-room-card__photo {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 6px;
	background: #eee;
}

.hlb-room-card__title {
	margin: 8px 0 4px;
	font-size: 1.05em;
}

.hlb-room-card__price {
	font-size: 0.95em;
}