/* =========================================================
   hotel.css — layout layer for individual location pages
   Extends style.css / color.css with the sections unique to
   a single-property page (hero, quick facts, amenities,
   gallery, hotel-switch strip). Loaded in addition to the
   two base stylesheets, same load order convention.
   ========================================================= */

/* breadcrumb + brand badge sitting above the hero heading */
.breadcrumb{
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}

.breadcrumb a{ text-decoration: underline; text-underline-offset: 3px; }

.badge{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

/* hotel switcher strip (mirrors the legacy "Locations:" menu repeated on every page) */
.hotel-switch{
  padding: 16px 0;
}

.hotel-switch .wrap{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hotel-switch .label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: 4px;
}

.hotel-switch a{
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid;
}

.hotel-switch a.current{
  cursor: default;
}

/* quick facts strip (brand-tinted variant of #stats) */
#quickfacts .wrap{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 26px 24px;
}

#quickfacts .fact{ text-align: center; }

#quickfacts .fact small{
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 4px;
}

#quickfacts .fact span{
  font-size: 15px;
  font-weight: 700;
}

/* sidebar reservation button */
.btn-block{
  display: block;
  text-align: center;
  padding: 13px 18px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}

.btn-outline-block{
  display: block;
  text-align: center;
  padding: 12px 18px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid;
}

.area-list{ list-style: none; margin: 0; padding: 0; }

.area-list li{ margin-bottom: 12px; font-size: 14px; }

.area-list li a{ font-weight: 600; }

.area-list li p{ font-size: 13px; margin: 4px 0 0; line-height: 1.5; }

/* amenities grid */
.amenity-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin: 18px 0 8px;
  padding: 0;
  list-style: none;
}

.amenity-grid li{
  font-size: 14px;
  padding-left: 22px;
  position: relative;
  margin: 0;
}

.amenity-grid li::before{
  content: "\2713";
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* gallery */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.gallery-grid img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
}

/* featured photo embedded inline within the welcome copy */
.feature-photo{
  margin: 22px 0;
}

.feature-photo img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 6px;
}

.feature-photo figcaption{
  font-size: 12px;
  margin-top: 8px;
  letter-spacing: .03em;
}

@media (max-width: 900px){
  #quickfacts .wrap{ grid-template-columns: 1fr; }
}

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