.innkeeper-property-listing.is-grid {
display: grid;
gap: 24px; 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)); }
} .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;
} .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;
} .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;
}
} .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 { background: var(--innkeeper-cal-booked-bg); color: var(--innkeeper-cal-booked-text); text-decoration: line-through; }
.innkeeper-cal-day.is-blocked { background: var(--innkeeper-bg-subtle); color: var(--innkeeper-text-muted); }
.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-booked { background: var(--innkeeper-cal-booked-bg); border: 1px solid var(--innkeeper-cal-booked-text); }
.innkeeper-cal-swatch.is-blocked { background: var(--innkeeper-bg-subtle); border: 1px solid var(--innkeeper-text-muted); }
.innkeeper-cal-swatch.is-past { background: var(--innkeeper-bg-subtle); border: 1px solid color-mix(in srgb, var(--innkeeper-text-muted) 55%, transparent); } .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; } .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;
}