/* theme-kit: assets/kit-main-room.css */
.kit-main-room.ss-section {
  padding-block: clamp(16px, 3vw, 40px) var(--kit-section-space);
}

.kit-main-room__grid {
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}

.kit-main-room__card {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 990px) {
  .kit-main-room--split {
    grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
  }

  .kit-main-room--sticky .kit-main-room__info {
    position: sticky;
    top: calc(var(--kit-header-offset) + 24px);
  }

  .kit-main-room--stacked .kit-main-room__info {
    width: min(100%, 720px);
  }
}

@media (max-width: 989px) {
  .kit-main-room__media {
    margin-inline: calc(-1 * var(--kit-gutter));
  }
}

.kit-room-title {
  display: grid;
  gap: 0.6rem;
}

.kit-room-title__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0;
  color: var(--kit-muted);
  list-style: none;
}

.kit-room-title__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.kit-room-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.kit-room-rating__value {
  font-weight: 700;
}

.kit-room-rating__count {
  color: var(--kit-muted);
}

.kit-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.kit-stars__row {
  display: inline-flex;
  gap: 1px;
  color: var(--kit-line-strong);
  white-space: nowrap;
}

.kit-stars__row--fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--kit-accent);
}

.kit-room-price {
  display: grid;
  gap: 0.2rem;
}

.kit-room-price__line {
  margin: 0;
  font-family: var(--kit-font-heading), var(--kit-font-body), sans-serif;
  font-size: var(--kit-h3);
  font-weight: var(--kit-heading-weight);
}

.kit-room-price__note {
  margin: 0;
  color: var(--kit-muted);
  font-size: var(--kit-small);
}

.kit-room-location {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.kit-room-location .kit-icon {
  margin-top: 0.15em;
}

.kit-room-location__body {
  display: grid;
  gap: 0.15rem;
}

.kit-room-location__name {
  margin: 0;
  font-weight: 600;
}

.kit-room-location__address {
  margin: 0;
  color: var(--kit-muted);
}

.kit-availability {
  display: grid;
  gap: 0.85rem;
  padding: 1.25rem;
  border: 1px solid var(--kit-line);
  border-radius: var(--kit-card-radius);
  background: var(--kit-surface);
}

.kit-availability__heading {
  margin: 0;
  font-family: var(--kit-font-heading), var(--kit-font-body), sans-serif;
  font-size: var(--kit-h3);
  font-weight: var(--kit-heading-weight);
}

.kit-availability__days {
  position: relative;
  display: flex;
  gap: 0.5rem;
  margin: 0 -1.25rem;
  padding: 0.15rem 1.25rem 0.4rem;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.kit-day {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  min-height: 48px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--kit-line-strong);
  border-radius: var(--kit-radius);
  color: var(--kit-ink);
  font-size: var(--kit-small);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  scroll-snap-align: start;
  white-space: nowrap;
}

.kit-day.is-full {
  border-style: dashed;
  color: var(--kit-muted);
  font-weight: 400;
  text-decoration: line-through;
}

.kit-day.is-selected {
  border-color: var(--kit-ink);
  box-shadow: inset 0 0 0 1px var(--kit-ink);
}

.kit-availability__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kit-availability__list[hidden],
.kit-availability__empty[hidden],
.kit-availability__next[hidden] {
  display: none;
}

.kit-start {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.5rem;
  border: 1px solid var(--kit-line-strong);
  border-radius: var(--kit-radius);
  background: var(--kit-bg);
  color: var(--kit-ink);
  font-weight: 600;
  text-decoration: none;
}

.kit-start:hover {
  border-color: var(--kit-ink);
}

.kit-availability__empty,
.kit-availability__next {
  margin: 0;
  color: var(--kit-muted);
}

.kit-availability__next a,
.kit-availability__all {
  color: var(--kit-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.kit-room-cta {
  display: grid;
  gap: 0.75rem;
}

.kit-room-cta__notes {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  color: var(--kit-muted);
  font-size: var(--kit-small);
  list-style: none;
  text-align: center;
}

.kit-room-cta__note {
  margin: 0;
  color: var(--kit-muted);
  font-size: var(--kit-small);
  text-align: center;
}

.kit-rates {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kit-rates__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--kit-line);
}

.kit-rates__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0;
}

.kit-rates__when {
  flex-basis: 100%;
  color: var(--kit-muted);
  font-size: var(--kit-small);
}

.kit-rates__price {
  font-weight: 600;
  white-space: nowrap;
}

.kit-rates__empty {
  margin: 0;
}