/* Development page and its unit view. */
@layer page {
  .dev { padding-bottom: var(--sp-6); }

  /* Gallery. Mobile: a swipeable, scroll-snapped strip. Desktop: a mosaic
     of the first three photos (one large, two stacked); every photo opens
     the lightbox (gallery.js). The frame has a fixed ratio: no shift. */
  .dev__gallery { margin-inline: calc(-1 * var(--gutter)); }
  .gallery { position: relative; background: var(--stone-2); overflow: hidden; }
  .gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 3; margin: 0; padding: 0; list-style: none; }
  .gallery__track::-webkit-scrollbar { display: none; }
  .gallery__slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; }
  .gallery__slide img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
  .gallery__slide img[data-placeholder] { object-fit: contain; padding: 12%; opacity: 0.45; cursor: default; }
  .gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); display: none; align-items: center; justify-content: center; box-shadow: var(--shadow); }
  .gallery__nav--prev { left: var(--sp-3); }
  .gallery__nav--next { right: var(--sp-3); }
  .gallery__counter { position: absolute; right: var(--sp-3); bottom: var(--sp-3); background: rgba(22, 35, 59, 0.75); color: #fff; font-size: var(--fs-xs); padding: 0.15rem 0.6rem; border-radius: 2rem; }
  .gallery__placeholder { position: absolute; inset: auto 0 var(--sp-3); text-align: center; color: var(--ink-2); font-size: var(--fs-s); }
  .gallery__save { position: absolute; left: var(--sp-3); top: var(--sp-3); }
  .gallery__all { position: absolute; right: var(--sp-3); bottom: var(--sp-3); display: none; }
  @media (min-width: 48em) {
    .gallery[data-ready] .gallery__nav { display: inline-flex; }
  }
  @media (min-width: 64em) {
    .dev__gallery { margin-inline: 0; }
    .gallery { border-radius: var(--radius-l); }
    .gallery__track { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.25rem; aspect-ratio: 3 / 1.25; overflow: hidden; }
    .gallery__slide:first-child { grid-row: 1 / 3; }
    .gallery__slide:nth-child(n + 4) { display: none; }
    .gallery[data-count="1"] .gallery__track, .gallery[data-count="2"] .gallery__track { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 2.4 / 1; }
    .gallery[data-count="2"] .gallery__track { grid-template-columns: 1fr 1fr; }
    .gallery[data-count="2"] .gallery__slide:first-child { grid-row: auto; }
    .gallery__nav, .gallery__counter { display: none !important; }
    .gallery[data-ready] .gallery__all { display: inline-flex; }
  }
  /* Lightbox: a dialog with a snapped strip of every photo. */
  .lightbox { border: 0; padding: 0; background: #0b1120; color: #fff; width: 100vw; height: 100dvh; max-width: none; max-height: none; }
  .lightbox::backdrop { background: #0b1120; }
  .lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-s); }
  .lightbox__close { color: #fff; }
  .lightbox__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: calc(100dvh - 3.5rem); scrollbar-width: none; }
  .lightbox__track::-webkit-scrollbar { display: none; }
  .lightbox__slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; place-items: center; padding: 0 var(--sp-4) var(--sp-4); }
  .lightbox__slide img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
  .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
  .lightbox__nav--prev { left: var(--sp-4); }
  .lightbox__nav--next { right: var(--sp-4); }
  .lightbox__track { touch-action: pan-y pinch-zoom; }
  .lightbox--thumbs .lightbox__track { height: calc(100dvh - 3.5rem - 4.75rem); }
  .lightbox__thumbs { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-2) var(--sp-4) var(--sp-3); scrollbar-width: thin; }
  .lightbox__thumb { flex: none; width: 4.5rem; height: 3.375rem; border-radius: var(--radius); overflow: hidden; opacity: 0.6; border: 2px solid transparent; padding: 0; background: rgba(255, 255, 255, 0.08); }
  .lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .lightbox__thumb[aria-current] { opacity: 1; border-color: #fff; }
  .lightbox__thumb:hover { opacity: 0.9; }
  .gallery__tours { position: absolute; left: var(--sp-3); bottom: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .gallery__tour { background: rgba(255, 255, 255, 0.94); }

  /* Share, the monthly estimate and the price alert (detail pages). */
  .share { display: flex; }
  .share [data-copied] { border-color: var(--ready, var(--sea)); }
  .monthly { margin: 0; color: var(--ink-2); }
  .monthly a { color: var(--ink); font-weight: 600; }
  .dev__rail .monthly { margin-top: var(--sp-1); }
  .price-alert { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
  .price-alert h2 { font-size: var(--fs-l); }
  .price-alert__form { display: grid; gap: var(--sp-3); max-width: 32rem; }
  .price-alert__form .btn { justify-self: start; }
  .chip--more { cursor: pointer; border-style: dashed; font-weight: 600; min-height: 2rem; }

  /* Two columns from 64em: content and the sticky rail. */
  .dev__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); margin-top: var(--sp-5); }
  .dev__main, .dev__rail { min-width: 0; }
  @media (min-width: 64em) {
    .dev__layout { grid-template-columns: minmax(0, 1fr) 23rem; gap: var(--sp-7); align-items: start; }
    .dev__rail-inner { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
  }

  .dev__head h1 { font-size: var(--fs-3xl); }
  .dev__unit-ref { color: var(--ink-3); font-weight: 500; font-size: 0.6em; letter-spacing: 0; }
  .dev__where { display: flex; align-items: center; gap: 0.4rem; color: var(--ink-2); flex-wrap: wrap; }
  .dev__where a { color: var(--ink); }
  .dev__facts { padding-top: var(--sp-3); border-top: 1px solid var(--line); margin-top: var(--sp-3); }
  .dev__facts dd { white-space: nowrap; }

  .section__h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
  .dev__fallback { color: var(--ink-2); }

  .dev__unit { padding: var(--sp-5); border-left: 4px solid var(--brand); }
  .dev__unit-head { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: flex-start; flex-wrap: wrap; }
  .dev__unit-head h2 { font-size: var(--fs-xl); }

  .dev__units td:first-child { white-space: nowrap; }
  /* Units: a photo card per home on a phone, a thumbnail in the table. */
  .dev__unit-list { border-top: 1px solid var(--line); }
  .dev__unit-list li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 0.15rem var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); align-items: center; }
  .dev__unit-list li[aria-current] { background: var(--brand-tint); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .dev__unit-thumb { grid-column: 1; grid-row: 1 / 3; display: block; width: 6.5rem; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--stone-2); }
  .dev__unit-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .dev__unit-thumb--none { display: grid; place-items: center; color: var(--ink-3); }
  .dev__unit-thumb--s { width: 3rem; flex: none; }
  .dev__unit-cell { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .dev__unit-id { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .dev__unit-link { grid-column: 2; align-self: end; }
  .dev__unit-meta { grid-column: 2; align-self: start; font-size: var(--fs-s); color: var(--ink-2); }
  .dev__unit-price { grid-column: 3; grid-row: 1 / 3; text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
  @media (max-width: 22.5em) {
    .dev__unit-list li { grid-template-columns: 5rem minmax(0, 1fr); }
    .dev__unit-thumb { width: 5rem; grid-row: 1 / 4; }
    .dev__unit-price { grid-column: 2; grid-row: auto; text-align: left; align-items: flex-start; }
  }
  .dev__unit-link { color: var(--ink); font-weight: 600; text-decoration: none; min-height: 1.5rem; display: inline-flex; align-items: center; }
  .dev__unit-link:hover { text-decoration: underline; }
  .dev__units .price { white-space: nowrap; }
  .dev__unit-was { display: block; font-size: var(--fs-xs); font-weight: 500; }
  .dev__costs { max-width: 32rem; }
  .dev__costs dt { color: var(--ink-2); }
  .dev__costs dd { font-weight: 600; white-space: nowrap; }
  .dev__near-cat > span { min-width: 0; }
  .dev__unit-list .drop { grid-column: 2 / -1; margin: 0; }
  @media (max-width: 22.5em) { .dev__unit-list .drop { grid-column: 2; } }

  .dev__map { aspect-ratio: 16 / 10; border-radius: var(--radius-l); background: var(--stone-2); overflow: hidden; position: relative; display: grid; place-items: center; }
  @media (min-width: 48em) { .dev__map { aspect-ratio: 2 / 1; } }
  .dev__map-note { position: absolute; inset: auto var(--sp-3) var(--sp-3); background: rgba(255, 255, 255, 0.9); padding: 0.25rem 0.6rem; border-radius: var(--radius); z-index: 2; font-size: var(--fs-xs); }
  .dev__map[data-ready] .dev__map-note { pointer-events: none; }
  .dev__map .maplibregl-map { position: absolute; inset: 0; }
  .dev__near { margin-top: var(--sp-4); border-top: 1px solid var(--line); }
  .dev__near li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-s); }
  .dev__near-cat { display: inline-flex; align-items: center; gap: var(--sp-2); }

  .dev__place { padding: var(--sp-5); }
  .dev__place h2 { font-size: var(--fs-l); }

  .dev__rail-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; }
  .lead-panel .form__note { margin: 0; }

  /* Hide the rail's heading price on the unit view when the title already shows it */
  .dev__text .prose p:first-child { font-size: var(--fs-l); color: var(--ink); }
}