/* Eturnal Rest -- a listing's own page (/plots/<handle>/, 2026-11-03).
   Markup: functions/_plot_render.js. Tokens: tokens.css. Loaded after
   cemetery.css, which supplies .listing__type, .listing__photo-badge, the
   inquiry form block and the .cta-note line this page reuses. */

.plot-page {
  padding-top: var(--space-6, 24px);
}

.plot-crumbs {
  font-size: 0.86rem;
  color: var(--ink-3);
  margin-bottom: var(--space-4, 16px);
  overflow-wrap: anywhere;
}
.plot-crumbs a {
  color: var(--blue-700);
  text-decoration: none;
}
.plot-crumbs a:hover,
.plot-crumbs a:focus-visible {
  text-decoration: underline;
}

.plot-gone {
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  border-radius: var(--radius);
  padding: var(--space-5, 20px);
  margin-bottom: var(--space-5, 20px);
}
.plot-gone__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin: 0 0 6px;
  color: var(--ink);
}
.plot-gone p {
  margin: 0 0 var(--space-3, 12px);
  color: var(--ink-2);
}

/* ---- layout v2 (2026-11-03) -------------------------------------------------
   The Zillow/Airbnb listing pattern: the gallery is the dominant element on
   the left (about two thirds), the price and contact card sits on the right
   and stays in view (sticky) while the details under the gallery scroll.
   At phone width: gallery, then the card, then the details. */
.plot-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  grid-template-areas:
    "gallery card"
    "details card";
  column-gap: 32px;
  row-gap: 28px;
  align-items: start;
}
.plot-layout__gallery {
  grid-area: gallery;
  min-width: 0;
}
.plot-layout__card {
  grid-area: card;
  position: sticky;
  top: 88px;
  align-self: start;
}
.plot-layout__details {
  grid-area: details;
  min-width: 0;
}

/* ---- gallery ---------------------------------------------------------------- */
.plot-gallery {
  position: relative;
  display: grid;
  gap: 8px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
  height: clamp(300px, 38vw, 520px);
}
.plot-gallery--single {
  grid-template-columns: 1fr;
}
.plot-gallery--pair {
  grid-template-columns: 1fr 1fr;
}
.plot-gallery--mosaic {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.plot-gallery--mosaic .plot-gallery__tile--0 {
  grid-row: 1 / span 2;
}
.plot-gallery__tile {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--surface-3);
}
.plot-gallery__tile[hidden] {
  display: none !important;
}
.plot-gallery__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.plot-gallery__tile:hover img,
.plot-gallery__tile:focus-visible img {
  transform: scale(1.03);
}
.plot-gallery__tile:focus-visible {
  outline: 3px solid var(--blue-600);
  outline-offset: -3px;
}
.plot-gallery .listing__photo-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
.plot-gallery__more {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.plot-summary {
  background: var(--white);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6, 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plot-summary__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.plot-title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.plot-loc {
  margin: 0;
  font-weight: 700;
  color: var(--ink-2);
}
.plot-cem {
  margin: 0;
  color: var(--ink-2);
}
.plot-cem a {
  color: var(--blue-700);
  font-weight: 700;
}
.plot-price {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--ink);
}
.plot-price--ask,
.plot-price--recent {
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--ink-2);
}

.plot-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.plot-cta .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.plot-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.plot-share__status {
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.plot-facts {
  margin: 4px 0 0;
  border-top: 1px solid var(--line-cool);
}
.plot-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-cool);
}
.plot-facts dt {
  color: var(--ink-3);
  font-size: 0.9rem;
}
.plot-facts dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.plot-id {
  margin: 0;
  font-size: 0.8rem;
}

.plot-block {
  padding: 4px 0 24px;
  border-bottom: 1px solid var(--line-cool);
  margin-bottom: 24px;
}
.plot-block:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}
.plot-block h2,
.plot-others h2 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  margin: 0 0 12px;
}
.plot-block .plot-facts {
  border-top: 0;
  margin: 0;
}
.plot-where p {
  margin: 0;
  color: var(--ink-2);
}
/* The card clamps the description to four lines; the page shows all of it. */
.plot-about .listing__desc {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  font-size: 1rem;
  white-space: pre-line;
  margin-bottom: 8px;
}

/* ---- "More plots at <cemetery>": a horizontal rail ------------------------- */
.plot-others {
  margin-top: var(--space-8, 40px);
}
.plot-others__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.plot-others__head h2 {
  margin: 0;
}
.plot-others__n {
  color: var(--ink-3);
  font-family: var(--font-sans, inherit);
  font-size: 1rem;
  font-weight: 400;
}
.plot-rail__nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.plot-rail__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.plot-rail__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.plot-rail__btn:not(:disabled):hover,
.plot-rail__btn:focus-visible {
  border-color: var(--blue-600);
  color: var(--blue-700);
}
.plot-rail {
  list-style: none;
  margin: 0;
  padding: 4px 2px 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, calc((100% - 3 * 16px) / 4));
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.plot-rail:focus-visible {
  outline: 3px solid var(--blue-300);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.plot-others__all {
  margin-top: 10px;
}

.plot-ask {
  padding-top: 0;
}

@media (max-width: 900px) {
  .plot-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "gallery"
      "card"
      "details";
    row-gap: 20px;
  }
  .plot-layout__card {
    position: static;
  }
  .plot-summary {
    padding: var(--space-5, 20px);
  }
  .plot-gallery {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .plot-rail {
    grid-auto-columns: minmax(200px, 46%);
  }
}
@media (max-width: 560px) {
  /* Full-bleed gallery on a phone, the way every listing app does it. */
  .plot-layout__gallery {
    margin: 0 -24px;
  }
  .plot-gallery {
    border-radius: 0;
    box-shadow: none;
  }
  .plot-gallery--mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    aspect-ratio: 1 / 1;
  }
  .plot-gallery--mosaic .plot-gallery__tile--0 {
    grid-row: auto;
    grid-column: 1 / span 2;
  }
  .plot-rail {
    grid-auto-columns: 72%;
  }
  .plot-rail__nav {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .plot-rail {
    scroll-behavior: auto;
  }
  .plot-gallery__tile img {
    transition: none;
  }
}