/* details.css — listing details (/apartments/{area}/{building}/).
   Shared inner-page chrome (.crumbs, .page_head, .pager, .prose, .map, .grid_3) is in global.css;
   these rules are specific to the details layout. Rules from docs/wla-design-board.html
   (Listing details tab). No gradients, no shadows, no transforms. */

/* gallery */
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--s-2);
  height: 460px;
  margin: var(--s-5) 0 var(--s-6);
}

.gallery .photo {
  aspect-ratio: auto;
  height: 100%;
  border-radius: var(--r-md);
}

.gallery .photo:first-child {
  grid-row: 1 / 3;
}

.gallery_more {
  position: relative;
}

.gallery_more b {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-3);
  background: #fff;
  border: var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.4em 0.7em;
  color: var(--c-ink);
}

/* gallery tiles are real <button> elements (a11y: keyboard-focusable, native activation) —
   this resets default button chrome so they inherit .photo exactly, as the board's <div> did */
button.photo {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: #e2e8ea;
  font: inherit;
  color: var(--c-charcoal-deep);
  text-align: left;
  cursor: pointer;
  width: 100%;
}

/* details grid */
.det_grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
}

/* .det_title moved to global.css: also reused, unchanged, by the guide details meta line */

/* section headings in the left column (outside .prose, so they don't inherit its h2 rules) */
.det_h2 {
  font-size: var(--fs-xl);
  margin: var(--s-5) 0 var(--s-5);
}

.det_h2_top {
  margin-top: var(--s-6);
}

/* key facts table */
.kf {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--s-6);
}

.kf tr:nth-child(odd) {
  background: var(--c-mist);
}

.kf td {
  padding: 0.65em 0.85em;
}

.kf td:last-child {
  text-align: right;
  font-weight: 500;
}

/* what's included */
.amen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.amen li {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.amen svg {
  width: 16px;
  height: 16px;
  stroke: var(--c-teal);
  fill: none;
  stroke-width: 2;
  flex: none;
}

/* booking panel */
.book {
  border: var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  background: var(--c-surface);
  position: sticky;
  top: var(--s-5);
}

.book .from {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
}

.book .from strong {
  font-size: var(--fs-2xl);
  letter-spacing: var(--track-tight);
}

.book .from span {
  color: var(--c-slate);
  font-size: var(--fs-sm);
}

.book .checked {
  font-size: var(--fs-xs);
  color: var(--c-slate);
  margin-bottom: var(--s-4);
}

.book .rates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
}

.book .rates li {
  border: var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: grid;
}

.book .rates li span {
  color: var(--c-slate);
  font-size: var(--fs-xs);
}

.book .btn {
  width: 100%;
  justify-content: center;
}

.book .btn + .btn {
  margin-top: var(--s-2);
}

/* mobile sticky booking bar */
.sticky_cta {
  display: none;
}

/* .nearby_head moved to global.css: includes/components/nearby-listings.php is also used
   by the guide details page's "Apartments in {area}" block */

/* ---------- lightbox (our own addition; gallery.js) ---------- */
/* Flat, no gradients/shadows/transforms — image overlays use solid charcoal at 70% opacity
   per design-system.md §2. Shown/hidden via the [hidden] attribute, never display toggling in JS. */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 29, 40, 0.92);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}

.lightbox[hidden] {
  display: none;
}

.lightbox img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  border-radius: var(--r-md);
}

.lightbox_caption {
  color: #aeb9c4;
  font-size: var(--fs-sm);
  text-align: center;
  margin-top: var(--s-3);
}

.lightbox_close,
.lightbox_prev,
.lightbox_next {
  position: absolute;
  background: var(--c-charcoal);
  color: #fff;
  border: 0;
  border-radius: var(--r-md);
  padding: 0.6em 0.9em;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.lightbox_close:hover,
.lightbox_prev:hover,
.lightbox_next:hover {
  background: var(--c-charcoal-deep);
}

.lightbox_close {
  top: var(--s-4);
  right: var(--s-4);
}

/* vertical centering via a fixed negative margin, not transform (global.css bans transforms
   except the FAQ icon rotation the spec allows) */
.lightbox_prev {
  left: var(--s-4);
  top: 50%;
  margin-top: -1.4em;
}

.lightbox_next {
  right: var(--s-4);
  top: 50%;
  margin-top: -1.4em;
}

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

  .book {
    position: static;
  }

  .gallery {
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .gallery .photo {
    aspect-ratio: 3 / 2;
  }

  .gallery .photo:first-child {
    grid-column: 1 / 3;
    grid-row: auto;
  }
}

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

  .gallery {
    grid-template-columns: 1fr;
  }

  .gallery .photo:first-child {
    grid-column: auto;
  }

  .gallery .photo:nth-child(n + 3) {
    display: none;
  }

  .sticky_cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--c-surface);
    border-top: var(--border);
    padding: var(--s-3) var(--s-4);
    gap: var(--s-3);
    z-index: 25;
    align-items: center;
  }

  .sticky_cta .from {
    flex: 1;
    font-size: var(--fs-sm);
  }

  .sticky_cta .from strong {
    display: block;
    font-size: var(--fs-lg);
  }

  .book .btn_primary {
    display: none;
  }

  body.has_sticky {
    padding-bottom: 84px;
  }

  .lightbox_prev,
  .lightbox_next {
    padding: 0.5em 0.7em;
  }
}