/* Innkeeper block layouts. Extends the base innkeeper.css frontend styles. */

.innkeeper-property-listing.is-grid {
	display: grid;
	gap: 24px;
	/* Cards never shrink below a readable width; columns wrap when they can't fit. */
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.innkeeper-property-listing.is-grid.innkeeper-cols-2,
	.innkeeper-property-listing.is-grid.innkeeper-cols-3,
	.innkeeper-property-listing.is-grid.innkeeper-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.innkeeper-property-listing.is-grid.innkeeper-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.innkeeper-property-listing.is-grid.innkeeper-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Smaller gap and tighter padding as columns increase so content keeps fitting. */
.innkeeper-property-listing.innkeeper-cols-3,
.innkeeper-property-listing.innkeeper-cols-4 {
	gap: 18px;
}

.innkeeper-property-listing .innkeeper-property-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
}

.innkeeper-property-listing.innkeeper-cols-4 .innkeeper-property-card__body {
	padding: 12px;
}

/* Footer: price and button reflow instead of overlapping; button wraps below
   the price on narrow cards. */
.innkeeper-property-listing .innkeeper-property-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-top: auto;
	padding-top: 10px;
}

.innkeeper-property-listing .innkeeper-property-card__price {
	min-width: 0;
	line-height: 1.2;
}

.innkeeper-property-listing .innkeeper-property-card__price-amount {
	font-size: 1.05em;
	font-weight: 700;
}

/* Compact, inline "View Details" button that always shows its full label. */
.innkeeper-property-listing .innkeeper-button {
	flex: 0 0 auto;
	padding: 0.4em 0.9em;
	font-size: 0.82em;
	line-height: 1.2;
	white-space: nowrap;
}

.innkeeper-property-listing.is-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.innkeeper-property-listing.is-list .innkeeper-property-card {
	display: grid;
	grid-template-columns: 240px 1fr;
}

@media (max-width: 600px) {
	.innkeeper-property-listing.is-list .innkeeper-property-card {
		grid-template-columns: 1fr;
	}
}

/* Availability calendar */
.innkeeper-availability-calendar {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.innkeeper-calendar-month {
	flex: 1 1 280px;
	max-width: 360px;
}

.innkeeper-calendar-month__title {
	margin: 0 0 8px;
	font-size: 1.05rem;
	text-align: center;
}

.innkeeper-calendar-grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.innkeeper-calendar-grid th {
	font-size: 0.72rem;
	text-transform: uppercase;
	color: var(--innkeeper-text-muted);
	padding: 4px 0;
	text-align: center;
}

.innkeeper-cal-day {
	height: 44px;
	border: 1px solid var(--innkeeper-border);
	text-align: center;
	vertical-align: middle;
	font-size: 0.82rem;
	position: relative;
}

.innkeeper-cal-day.is-empty {
	border: none;
}

.innkeeper-cal-num { display: block; line-height: 1; }
.innkeeper-cal-price { display: block; font-size: 0.62rem; color: var(--innkeeper-success); margin-top: 2px; }

.innkeeper-cal-day.is-available { background: var(--innkeeper-cal-available-bg); color: var(--innkeeper-cal-available-text); }
.innkeeper-cal-day.is-booked,
.innkeeper-cal-day.is-blocked {
	background: color-mix( in srgb, var(--innkeeper-text-muted) 12%, Canvas );
	color: var(--innkeeper-text-muted);
	text-decoration: line-through;
}
.innkeeper-cal-day.is-past { background: var(--innkeeper-bg-subtle); color: color-mix(in srgb, var(--innkeeper-text-muted) 55%, transparent); }

.innkeeper-calendar-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	width: 100%;
	font-size: 0.8rem;
}

.innkeeper-calendar-legend li { display: flex; align-items: center; gap: 6px; }

.innkeeper-cal-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
}

.innkeeper-cal-swatch.is-available { background: var(--innkeeper-cal-available-bg); border: 1px solid var(--innkeeper-cal-available-text); }
.innkeeper-cal-swatch.is-unavailable {
	position: relative;
	background: color-mix( in srgb, var(--innkeeper-text-muted) 12%, Canvas );
	border: 1px solid var(--innkeeper-text-muted);
	color: var(--innkeeper-text-muted);
	overflow: hidden;
}
.innkeeper-cal-swatch.is-unavailable::after {
	content: '';
	position: absolute;
	left: -1px;
	right: -1px;
	top: 50%;
	height: 1px;
	background: currentColor;
	transform: translateY( -50% );
}
.innkeeper-cal-swatch.is-past { background: var(--innkeeper-bg-subtle); border: 1px solid color-mix(in srgb, var(--innkeeper-text-muted) 55%, transparent); }

/* Services */
.innkeeper-services-listing.is-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.innkeeper-services-listing.is-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.innkeeper-service-card {
	border: 1px solid var(--innkeeper-border);
	border-radius: 8px;
	overflow: hidden;
	background: Canvas;
}

.innkeeper-service-card__media img { width: 100%; height: auto; display: block; }
.innkeeper-service-card__body { padding: 14px; }
.innkeeper-service-card__title { margin: 0 0 6px; font-size: 1rem; }
.innkeeper-service-card__price { font-weight: 600; margin: 8px 0 0; }

/* Property details */
.innkeeper-property-details__gallery {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	margin-bottom: 20px;
}

.innkeeper-property-details__gallery-item { margin: 0; }
.innkeeper-property-details__gallery-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

.innkeeper-amenities-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 6px 16px;
	list-style: none;
	padding: 0;
}

.innkeeper-notice--info {
	padding: 12px 16px;
	background: var(--innkeeper-info-bg);
	border-left: 4px solid var(--innkeeper-primary);
	color: inherit;
}