/* Shared public image sizing so listing, gallery, and related-property photos stay consistent. */
.property-grid,
.grid {
  align-items: stretch;
}

.property-card,
.card,
.compact-card {
  min-width: 0;
}

.property-card a,
.card,
.compact-card {
  height: 100%;
}

.property-image-wrap,
.card > img,
.compact-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--sand-100, #f3efe9);
}

.property-image-wrap img,
.card > img,
.compact-img-wrap img,
.gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-image-wrap img,
.compact-img-wrap img {
  object-position: center;
}

.gallery-main {
  min-height: clamp(260px, 56vw, 675px);
  background: var(--sand-100, #f3efe9);
}

.gallery-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gallery-thumbs {
  min-height: 92px;
}

.gallery-thumb {
  width: 120px;
  height: 80px;
}

@media (min-width: 768px) {
  .gallery-thumb {
    width: 160px;
    height: 100px;
  }
}

@media (max-width: 767px) {
  .property-image-wrap,
  .card > img,
  .compact-img-wrap {
    aspect-ratio: 16 / 11;
  }

  .gallery-main {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}

/* Booking modal usability shared by every property page. */
.modal-overlay .modal-box {
  display: flex;
  flex-direction: column;
}

.modal-overlay #bookingFormContent {
  min-height: 0;
}

.modal-overlay .form-row > div[style*="border-top"],
.modal-overlay .form-row > .form-group[style*="display:flex"],
.modal-overlay .form-row > .modal-book-btn {
  grid-column: 1 / -1;
}

.modal-overlay .form-group input[type="file"] {
  min-height: 48px;
  padding: 10px 12px !important;
}

.modal-overlay .modal-book-btn {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 18px;
  box-shadow: 0 -12px 24px rgba(255, 255, 255, 0.92);
}

.modal-overlay .jrnp-date-help {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted-text, #7a756d);
}

.modal-overlay .jrnp-date-error {
  color: #b94a3a;
  font-weight: 600;
}

@media (min-width: 900px) {
  .modal-overlay .modal-box {
    max-width: min(920px, calc(100vw - 64px));
  }

  .modal-overlay .modal-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
  }
}

@media (max-width: 700px) {
  .modal-overlay {
    align-items: stretch;
    padding: 10px;
  }

  .modal-overlay .modal-box {
    max-height: calc(100dvh - 20px);
    border-radius: 14px;
  }

  .modal-overlay .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light, #e8e1d8);
  }
}