/* =========================================
   Property Detail Page Styles
   ========================================= */

/* Site nav (.prop-nav*) now lives in styles.css so every page shares it. */

/* =========================================
   Photo Grid
   ========================================= */
.photo-section {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2rem;
  position: relative;
}

.photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .photo-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.photo-main {
  position: relative;
  aspect-ratio: 4/3;
  background-color: var(--forest);
  cursor: pointer;
  overflow: hidden;
}

@media (min-width: 768px) {
  .photo-main {
    aspect-ratio: auto;
    grid-row: span 2;
    min-height: 480px;
  }
}

.photo-main img,
.photo-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 200ms;
}
.photo-main:hover img,
.photo-thumb:hover img { opacity: 0.9; }

.photo-thumbs {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
@media (min-width: 768px) { .photo-thumbs { display: grid; } }

.photo-thumb {
  position: relative;
  aspect-ratio: 4/3;
  background-color: var(--forest);
  cursor: pointer;
  overflow: hidden;
}

.photo-all-btn {
  position: absolute;
  bottom: 2.5rem;
  right: 2rem;
  background-color: var(--cream);
  color: var(--night);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 150ms;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.photo-all-btn:hover { background-color: var(--copper); color: var(--cream); }

/* =========================================
   Main Layout
   ========================================= */
.prop-main {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

.prop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .prop-grid {
    grid-template-columns: 1fr 380px;
    gap: 3rem;
  }
}

.prop-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* =========================================
   Property Header
   ========================================= */
.prop-header {
  border-bottom: 1px solid var(--forest);
  padding-bottom: 2rem;
}

.prop-title {
  color: var(--cream);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.prop-subtitle {
  color: var(--sage);
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.prop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: rgba(var(--sage-rgb),0.8);
  font-size: 0.875rem;
}

.prop-meta-dot { color: rgba(var(--sage-rgb),0.4); }

/* =========================================
   Host Card
   ========================================= */
.host-card {
  background-color: var(--edge-30);
  border: 1px solid var(--forest);
  border-radius: 1rem;
  padding: 1.25rem;
  max-width: 24rem;
}

.host-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.host-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--forest);
}
.host-avatar img { width: 100%; height: 100%; object-fit: cover; }

.host-name {
  color: var(--cream);
  font-size: 1.125rem;
  font-weight: 700;
}

.host-title {
  color: rgba(var(--sage-rgb),0.7);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.host-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
}

.host-stat-val { color: var(--cream); font-weight: 600; }
.host-stat-lbl { color: rgba(var(--sage-rgb),0.6); }
.host-stat-div { width: 1px; height: 1rem; background: var(--forest); }

.host-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--edge-50);
  color: var(--cream);
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  margin-top: 1rem;
}

.host-contact-btn {
  margin-top: 1rem;
  width: 100%;
  background-color: var(--copper);
  color: var(--cream);
  padding: 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: background-color 150ms;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.host-contact-btn:hover { background-color: var(--rust); }

/* =========================================
   About Section
   ========================================= */
.prop-section {
  border-bottom: 1px solid var(--forest);
  padding-bottom: 1.5rem;
}

.prop-section-title {
  color: var(--cream);
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.prop-section-title-lg {
  color: var(--cream);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.prop-body {
  color: rgba(var(--sage-rgb),0.8);
  line-height: 1.7;
  white-space: pre-line;
}

.show-more-btn {
  color: var(--cream);
  text-decoration: underline;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  margin-top: 0.75rem;
  transition: color 150ms;
}
.show-more-btn:hover { color: var(--sage); }

/* =========================================
   Amenities Grid
   ========================================= */
.amenities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.amenity-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(var(--sage-rgb),0.8);
  font-size: 0.9rem;
}

.amenity-icon {
  color: var(--copper);
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

/* =========================================
   Sleep Grid
   ========================================= */
.sleep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.sleep-card { cursor: pointer; }

.sleep-img {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
  background-color: var(--forest);
}
.sleep-img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 300ms;
}
.sleep-card:hover .sleep-img img { transform: scale(1.05); }

.sleep-name {
  color: var(--cream);
  font-weight: 500;
  transition: color 150ms;
}
.sleep-card:hover .sleep-name { color: var(--gold); }

.sleep-desc { color: rgba(var(--sage-rgb),0.7); font-size: 0.875rem; }

/* =========================================
   Reviews
   ========================================= */
.reviews-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.reviews-rating {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--cream);
  font-size: 1.125rem;
  font-weight: 700;
}

.reviews-count { color: rgba(var(--sage-rgb),0.6); font-size: 0.875rem; }

.reviews-list { display: flex; flex-direction: column; gap: 1.5rem; }

.review-item {}

.review-author-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.review-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage);
  font-weight: 700;
  font-size: 1.125rem;
  flex-shrink: 0;
}
img.review-avatar {
  object-fit: cover;
  display: block;
  border: 2px solid rgba(var(--sage-rgb),0.2);
}

.review-name { color: var(--cream); font-weight: 600; font-size: 0.9rem; }
.review-date { color: rgba(var(--sage-rgb),0.6); font-size: 0.8rem; }

.review-stars { display: flex; gap: 0.125rem; margin-bottom: 0.375rem; }
.review-star { color: var(--copper); width: 0.875rem; height: 0.875rem; }

.review-body { color: rgba(var(--sage-rgb),0.8); font-size: 0.875rem; line-height: 1.6; }

/* =========================================
   Booking Sidebar
   ========================================= */
.booking-sidebar {
  position: sticky;
  top: 1.5rem;
}

.booking-card {
  border: 1px solid var(--forest);
  border-radius: 0.75rem;
  padding: 1.5rem;
  background-color: var(--night);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.booking-price {
  margin-bottom: 1rem;
}
.booking-price-num {
  color: var(--cream);
  font-size: 1.5rem;
  font-weight: 700;
}
.booking-price-per { color: rgba(var(--sage-rgb),0.7); }

.booking-dates {
  border: 1px solid var(--forest);
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: border-color 150ms;
}
.booking-dates:hover { border-color: rgba(var(--sage-rgb),0.5); }

.booking-dates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.booking-date-cell {
  padding: 0.75rem;
  background-color: var(--edge-30);
  border-right: 1px solid var(--forest);
}
.booking-date-cell:last-child { border-right: none; }

.booking-label {
  font-size: 0.625rem;
  color: var(--sage);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.booking-value { color: rgba(var(--sage-rgb),0.5); font-size: 0.875rem; }

.booking-guests-row {
  border: 1px solid var(--forest);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  background-color: var(--edge-30);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.booking-guests-select {
  color: var(--cream);
  background: transparent;
  border: none;
  font-size: 0.875rem;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  appearance: none;
}
.booking-guests-select option { background-color: var(--night); color: var(--cream); }

.booking-check-btn {
  width: 100%;
  background-color: var(--copper);
  color: var(--cream);
  padding: 0.875rem;
  border-radius: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  transition: background-color 150ms;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.booking-check-btn:hover { background-color: var(--rust); }

.booking-note {
  color: rgba(var(--sage-rgb),0.6);
  font-size: 0.875rem;
  text-align: center;
  margin-top: 0.75rem;
}

/* =========================================
   Location Map
   ========================================= */
.location-map {
  border-radius: 0.75rem;
  overflow: hidden;
  height: 20rem;
}
.location-map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* =========================================
   Meet Your Host (full width section)
   ========================================= */
.host-section {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

.host-section-title {
  color: var(--cream);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.host-facts { display: flex; flex-direction: column; gap: 0.75rem; }

.host-fact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(var(--sage-rgb),0.8);
  font-size: 0.875rem;
}
.host-fact-label { color: rgba(var(--sage-rgb),0.6); text-transform: uppercase; letter-spacing: 0.05em; }
.host-fact-icon { color: var(--copper); width: 1rem; height: 1rem; flex-shrink: 0; }

.host-bio { color: rgba(var(--sage-rgb),0.8); line-height: 1.7; font-size: 0.875rem; white-space: pre-line; }

/* =========================================
   Things to Know
   ========================================= */
.things-section {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

.things-title {
  color: var(--cream);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.things-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .things-grid { grid-template-columns: repeat(3, 1fr); }
}

.things-col-title {
  color: var(--cream);
  font-weight: 700;
  margin-bottom: 1rem;
}

.things-list { display: flex; flex-direction: column; gap: 0.75rem; }

.things-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(var(--sage-rgb),0.8);
  font-size: 0.875rem;
}
.things-icon { color: rgba(var(--sage-rgb),0.6); width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

.cancel-list { display: flex; flex-direction: column; gap: 0.5rem; }
.cancel-item { color: rgba(var(--sage-rgb),0.8); font-size: 0.875rem; }
.cancel-note { color: rgba(var(--sage-rgb),0.6); font-size: 0.75rem; margin-top: 1rem; }

/* =========================================
   FAQ
   ========================================= */
.faq-section {
  background-color: var(--night);
  padding: 5rem 1.5rem 7rem;
}

.faq-inner {
  max-width: 48rem;
  margin: 0 auto;
}

.faq-title {
  color: var(--cream);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  margin-bottom: 3rem;
}

.faq-list { border-top: 1px solid var(--edge-60); }

details.faq-item { border-bottom: 1px solid var(--edge-60); padding: 1.5rem 0; }

details.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}
details.faq-item summary::-webkit-details-marker { display: none; }

.faq-q {
  color: var(--cream);
  font-size: 1.0625rem;
  font-weight: 300;
}

.faq-icon {
  color: var(--copper);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 200ms;
  flex-shrink: 0;
}
details.faq-item[open] .faq-icon { transform: rotate(45deg); }

.faq-a {
  margin-top: 1rem;
  color: rgba(var(--cream-rgb),0.8);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
}