/* Property and unit detail pages: hero, spec grids, gallery, sidebar, tables. */

.detail-hero { padding: 1.75rem 0 1.25rem; background: linear-gradient(180deg, var(--sand), var(--bg)); }
.detail-hero-tight { padding-bottom: 1rem; }
.crumbs {
  display: flex; flex-wrap: wrap; gap: .45rem;
  font-size: .85rem; color: var(--slate); margin-bottom: .85rem;
}
.crumbs a { color: var(--slate); }
.detail-tagline { color: var(--slate); font-size: 1.02rem; margin: 0; }

.unit-headline { display: flex; flex-direction: column; gap: .85rem; }
.unit-h1-number {
  display: block; font-size: .92rem; font-weight: 600;
  color: var(--slate); letter-spacing: 0;
}
.unit-price-block { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.unit-price { margin: 0; }
.unit-price strong { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }

.detail-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.detail-main h2 { margin-top: 1.75rem; }
.detail-main h2:first-child { margin-top: 0; }

/* --- Spec and amenity grids ---------------------------------------------- */

.spec-grid {
  display: grid; gap: .85rem; grid-template-columns: repeat(2, 1fr);
  margin: 0 0 1rem; padding: 0;
}
.spec-grid > div {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .8rem .9rem;
}
.spec-grid dt {
  font-size: .78rem; font-weight: 700; color: var(--slate);
  text-transform: uppercase; letter-spacing: .04em;
}
.spec-grid dd { margin: .2rem 0 0; font-size: 1.06rem; font-weight: 700; }

.amenity-grid {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: grid; gap: .6rem; grid-template-columns: 1fr;
}
.amenity-grid li { display: flex; align-items: center; gap: .55rem; color: var(--navy); font-weight: 550; }
.amenity-grid svg { color: var(--green); flex: none; }

/* --- Sidebar ------------------------------------------------------------- */

.side-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.35rem;
  box-shadow: var(--shadow);
}
.side-card h3 { font-size: 1.18rem; margin-bottom: .25rem; }
.side-sub { color: var(--slate); font-size: .92rem; margin-bottom: 1.1rem; }
.side-card hr { border: 0; border-top: 1px solid var(--line); margin: 1.15rem 0; }
.side-note {
  display: inline-block; padding: .28rem .7rem; border-radius: 999px;
  background: var(--green-tint); color: #0f6f51;
  font-size: .8rem; font-weight: 750; text-transform: uppercase; letter-spacing: .03em;
}
.side-contact { font-size: .93rem; margin: 0; line-height: 1.9; }
.side-label { color: var(--slate); font-size: .84rem; display: inline-block; }

/* --- Gallery ------------------------------------------------------------- */

/* Horizontal snap scroller: the natural gesture on a phone, and it degrades to
   a plain overflow row anywhere scroll-snap is unsupported. */
.gallery-strip { padding: .5rem 0 0; }
.gallery {
  display: grid; gap: .5rem;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
  scrollbar-width: thin;
}
.gallery-item { margin: 0; scroll-snap-align: center; }
.gallery-item img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line);
}

/* --- Unit table ---------------------------------------------------------- */

.all-units { margin-top: 1.75rem; }
.all-units summary {
  cursor: pointer; font-weight: 700; color: var(--teal-dark);
  padding: .75rem 0; list-style-position: inside;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.unit-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 460px; }
.unit-table th, .unit-table td {
  text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--line);
}
.unit-table th {
  font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--slate);
}

/* --- Share and sticky CTA ------------------------------------------------ */

.share-row { margin-top: 1.75rem; }

/* Keeps the price and the contact button reachable while scrolling a long
   listing on a phone. Hidden once the sidebar form is visible on desktop. */
.sticky-cta {
  position: sticky; bottom: 0; z-index: 90;
  background: rgba(255,253,249,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: .7rem 1.15rem calc(.7rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(20,54,66,.08);
}
.sticky-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.sticky-inner strong { font-size: 1.25rem; font-weight: 800; }