/* ============================================================
   Finca — /p/<code> single-property page (chrome only)
   The property itself is a .pcard, styled by app.css exactly as in the
   list. Nothing here restyles .pcard internals; this file is the page
   around it: header, one centred column, and the three non-success states.
   Tokens: finca-tokens.css only — no new colours, no new radii.
   ============================================================ */

/* app.css locks the app shell (html,body{height:100%} + body{overflow:hidden})
   because the app's inner regions scroll. A document page scrolls itself. */
html { height: auto; }
body.pp {
  height: auto;
  /* keeps the footer at the bottom of the screen on a short page (a not-found
     card is ~300px tall); html is height:auto here, so a percentage min-height
     would resolve against nothing */
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  overscroll-behavior: auto;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

/* ---------- header ---------- */
.pp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  background: var(--bone);
  border-bottom: var(--bd-ink);
}
.pp__head .brand__wm { font-size: 1.45rem; }
.pp__back { padding: 8px 14px; font-size: .9rem; }
.pp__back::before {
  content: "";
  width: 7px; height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}

/* ---------- column ---------- */
.pp__main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-5) var(--gutter) var(--sp-7);
}

/* The page's real heading is the listing title. It is already the card's
   visible <h3>, so showing it twice would just be noise — this keeps the
   document outline correct for screen readers and search results. */
.pp__h1 {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.pp__eyebrow {
  font-family: var(--font-caps);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--sp-3);
}

/* ---------- the card ---------- */
.pp__slot .pcard:hover { transform: none; box-shadow: var(--shadow-card); }
/* This card is the page, not one tile in a grid: the body link and the photo
   both lead to the same place, so no hover lift and no pointer on the photo. */
.pp__slot .pcard__img { cursor: default; }

/* ---------- actions under the card ---------- */
.pp__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* ---------- non-success states ----------
   Same card silhouette as a property (bone, ink border, hard shadow) so a
   missing home reads as a considered answer, not a broken page. */
.pp__state {
  background: var(--bone);
  border: var(--bd-ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
.pp__state h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--forest);
  margin: 0 0 var(--sp-2);
}
.pp__state p {
  font-size: var(--fs-body);
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0 auto var(--sp-4);
}
.pp__state code {
  font-family: var(--font-caps);
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}
.pp__state .pp__stateacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}

.pp__note {
  font-size: var(--fs-caption);
  color: var(--ink-faint);
  margin-top: var(--sp-4);
}

/* ---------- footer ---------- */
.pp__foot {
  flex: none;
  padding: var(--sp-4) var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  border-top: var(--bd-hair);
  text-align: center;
}
.pp__foot a {
  font-family: var(--font-caps);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--magenta-deep);
}

/* ---------- phones: the card is the screen ---------- */
@media (max-width: 640px) {
  .pp__main { padding-left: 0; padding-right: 0; }
  .pp__eyebrow,
  .pp__acts,
  .pp__note { padding-left: var(--gutter); padding-right: var(--gutter); }
  /* the skeleton has to be full-bleed too, or the real card lands 2px narrower
     and every visitor is charged a layout shift for the swap */
  .pp__slot .pcard,
  .pp__slot .skelcard,
  .pp__state {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Shared property pages use the same native video player as the detail panel. */
.pp__videos { margin-top: 28px; }
.pp__videos h2 { font: 600 20px/1.3 var(--font-body, sans-serif); margin: 0 0 12px; }