/* ============================================================
   Compass Rose — property detail page
   Loaded after site.css. Adds only what the detail surface needs;
   every token, button, field, card and motion class comes from the
   homepage system.
   ============================================================ */

/* ============ HERO ============ */
/* Compact, and vignetted from the bottom only — the top two thirds of the
   photograph stay untouched, same reasoning as the homepage hero panel. */
.phero{
  position:relative;overflow:hidden;background:var(--deep-3);
  min-height:clamp(340px,44vh,470px);
  display:flex;align-items:flex-end;
  padding:clamp(2.6rem,6vw,4.5rem) 0 clamp(3.6rem,6vw,4.4rem);
}
.phero-photo{position:absolute;inset:0;background-size:cover;background-position:center 58%}
.phero-vig{
  position:absolute;inset:0;
  background:
    linear-gradient(0deg, rgba(61,5,42,.92) 0%, rgba(61,5,42,.62) 38%, rgba(61,5,42,.12) 72%, rgba(61,5,42,.02) 100%),
    linear-gradient(90deg, rgba(61,5,42,.5) 0%, rgba(61,5,42,0) 55%);
}
.phero-in{position:relative;z-index:2;width:100%;color:#fff}

.phero-back{
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  font-size:.86rem;font-weight:600;color:rgba(255,255,255,.82);
  transition:color .25s ease, gap .35s var(--out);
}
.phero-back svg{width:16px;height:16px}
@media(hover:hover) and (pointer:fine){.phero-back:hover{color:var(--amber);gap:.62rem}}

.phero-where{
  margin-top:.4rem;font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);
  display:flex;align-items:center;gap:.42rem;
}
.phero-where svg{width:15px;height:15px}
.phero-h{
  margin-top:.6rem;color:#fff;
  font-size:clamp(1.95rem,4.1vw,3.3rem);line-height:1.05;letter-spacing:-.03em;
  max-width:20ch;text-wrap:balance;
}
.phero-sub{margin-top:.85rem;color:rgba(255,255,255,.84);font-size:clamp(.97rem,1.3vw,1.08rem);max-width:52ch}

.phero-facts{
  margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.5rem;
}
.phero-facts li{
  display:inline-flex;align-items:center;gap:.42rem;
  background:rgba(61,5,42,.55);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:.42rem .85rem;
  font-size:.85rem;font-weight:600;color:#fff;
}
.phero-facts svg{width:15px;height:15px;color:#fff}
.phero-facts .fact-rate svg{color:var(--amber)}

/* ============ GALLERY ============ */
/* Lifts over the hero the way the homepage finder does, so the photographs
   read as the first real object on the page. */
.pgal-sec{position:relative;z-index:20;margin-top:clamp(-3.4rem,-4vw,-2rem);padding-bottom:clamp(2rem,4vw,3rem)}
.pgal{position:relative;border-radius:var(--r);overflow:hidden;background:var(--deep-2);box-shadow:0 26px 60px -30px rgba(61,5,42,.5)}
.pgal-stage{position:relative;aspect-ratio:16/9;background:var(--deep-2)}
.pshot{
  position:absolute;inset:0;opacity:0;
  transition:opacity .55s ease;
}
.pshot[data-on="1"]{opacity:1}
.pshot img{width:100%;height:100%;object-fit:cover}
.pgal-open{position:absolute;inset:0;z-index:4;cursor:zoom-in;background:none}
.pgal-nav{z-index:5}
.pgal-nav.gnav--prev{left:clamp(.5rem,1.6vw,1rem)}
.pgal-nav.gnav--next{right:clamp(.5rem,1.6vw,1rem)}
.pgal-count{
  position:absolute;right:1rem;bottom:1rem;z-index:5;
  background:rgba(61,5,42,.66);backdrop-filter:blur(8px);
  color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.02em;
  padding:.42rem .8rem;border-radius:999px;
  display:inline-flex;align-items:center;gap:.4rem;
}
.pgal-count svg{width:14px;height:14px;color:#fff}

.pgal-rail{
  display:flex;gap:.6rem;margin-top:.75rem;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  padding:.25rem .25rem .35rem;scroll-snap-type:x proximity;
}
.pgal-rail::-webkit-scrollbar{display:none}
.pthumb{
  flex:0 0 auto;width:104px;aspect-ratio:4/3;
  border-radius:var(--r-sm);overflow:hidden;background:var(--deep-2);
  scroll-snap-align:start;position:relative;
  opacity:.62;
  transition:opacity .35s ease, transform .35s var(--out), box-shadow .35s ease;
}
.pthumb img{width:100%;height:100%;object-fit:cover}
.pthumb::after{
  content:'';position:absolute;inset:0;border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 0 var(--amber);
  transition:box-shadow .35s ease;
}
.pthumb[aria-selected="true"]{opacity:1}
.pthumb[aria-selected="true"]::after{box-shadow:inset 0 0 0 3px var(--amber)}
@media(hover:hover) and (pointer:fine){
  .pthumb:hover{opacity:1;transform:translateY(-2px)}
}

/* ============ 70 / 30 BODY ============ */
/* Section rhythm on this page: photograph → paper (gallery) → fog (body) →
   paper (other properties) → deep footer. */
.pbody-sec{position:relative;background:var(--fog)}
.pbody-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.il--coast-p{top:1.5%;right:-9%;width:min(46vw,520px);opacity:.1;color:var(--amber)}
.il--treeline-p{bottom:-6px;left:-4%;width:min(122%,1240px);opacity:.055}
@media (max-width:900px){
  .il--coast-p{width:80vw;opacity:.08}
  .il--treeline-p{width:160%;opacity:.05}
}

.pwrap{position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) 372px;
  gap:clamp(1.8rem,3.4vw,3.2rem);
  align-items:start;
  padding-top:clamp(1.6rem,3vw,2.6rem);
  padding-bottom:var(--pad);
}
.pblock{padding:clamp(1.9rem,3vw,2.6rem) 0;border-top:1px solid var(--line)}
.pblock:first-child{border-top:0;padding-top:.4rem}
/* Content headings are left-aligned: the centred rule in DESIGN.md governs
   marketing sections, and a centred heading over a 70% reading column reads
   as a page break rather than a label for what follows. */
.pblock h2{font-size:clamp(1.5rem,2.6vw,2.05rem);letter-spacing:-.026em}
.pblock-sub{margin-top:.6rem;color:var(--muted);font-size:.95rem}

.pprose{margin-top:1.1rem;display:grid;gap:1rem;max-width:66ch}
.pprose p{color:var(--ink);font-size:1.04rem;line-height:1.68}
.pprose p:first-child{font-size:1.14rem;color:var(--deep);line-height:1.6}

/* ---------- amenities ---------- */
.amen-groups{margin-top:1.5rem;display:grid;gap:1.7rem}
.amen-group h3{
  font-family:var(--d-body);font-size:.71rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.75rem;
}
.amen-group h3::after{content:'';flex:1;height:1px;background:var(--line)}
.amen-list{margin-top:.9rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem 1.2rem}
.amen{display:flex;align-items:center;gap:.65rem;font-size:.95rem;color:var(--ink);min-height:34px}
.amen-ico{
  width:32px;height:32px;flex:none;border-radius:var(--r-sm);
  background:var(--tint);color:var(--deep);
  display:grid;place-items:center;
  transition:background-color .35s ease, color .35s ease;
}
.amen-ico svg{width:17px;height:17px}
@media(hover:hover) and (pointer:fine){
  .amen:hover .amen-ico{background:var(--amber);color:var(--deep-3)}
}

/* ---------- good to know ---------- */
.know-grid{margin-top:1.4rem;display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.know-card{
  background:var(--paper);border-radius:var(--r);padding:1.5rem 1.5rem 1.6rem;
  box-shadow:0 3px 10px -4px rgba(61,5,42,.16), 0 18px 40px -26px rgba(61,5,42,.4);
}
.know-card h3{font-size:1.14rem;letter-spacing:-.02em}
.rules{margin-top:1.1rem;display:grid;gap:.1rem}
.rules li{
  display:flex;align-items:center;gap:.8rem;
  padding:.62rem 0;border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.rules li:last-child{border-bottom:0}
.rule-l{color:var(--muted)}
.rule-v{margin-left:auto;font-weight:600;color:var(--deep);display:inline-flex;align-items:center;gap:.4rem;text-align:right}
.rule-v svg{width:15px;height:15px;flex:none}
.rule-v[data-ok="1"] svg{color:#2E7D63}
.rule-v[data-ok="0"] svg{color:var(--muted)}

/* A refund ladder is a sequence, so it is drawn as one: the further out you
   are, the more comes back. `padding:0` is load-bearing — site.css resets
   `ul` but not `ol`, and the UA's 40px list indent left this block sitting
   off the card's own left edge. */
.cxl{margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:.9rem}
.cxl li{display:flex;align-items:flex-start;gap:.8rem;font-size:.95rem}
.cxl-pct{
  flex:none;min-width:52px;text-align:center;
  background:var(--tint);color:var(--deep);
  font-weight:700;font-size:.83rem;
  padding:.3rem .5rem;border-radius:999px;
}
.cxl li:first-child .cxl-pct{background:var(--amber);color:var(--deep-3)}
.cxl-t{color:var(--ink);padding-top:.15rem}
.know-note{margin-top:1.1rem;font-size:.86rem;color:var(--muted)}

/* ---------- map ---------- */
.map-frame{
  margin-top:1.3rem;border-radius:var(--r);overflow:hidden;
  aspect-ratio:16/9;background:var(--fog);border:1px solid var(--line);
}
.map-frame iframe{display:block;width:100%;height:100%;border:0}

/* ============ THE ASK — the page's one solid-colour object ============ */
/* Sticky, and short enough to stand in the viewport whole. A card that needs
   its own scrollbar is a card with too much in it — the fix was to cut the
   form down, not to give it a second scroll surface.
   On a window too short to hold the whole card, property.js writes a negative
   `top` so the card's BOTTOM — the submit button — is what stays on screen.
   It is always sticky; only the offset changes. (`bottom:20px` was the
   obvious way to express that and does not stick at all on a sticky grid
   item — measured, not assumed.) */
.pask{position:sticky;top:130px;align-self:start}
.pask-card{
  background:var(--deep);color:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:0 26px 60px -30px rgba(61,5,42,.55);
}
/* Every measurement in this card is chosen to keep it inside a laptop
   viewport — trimming here is cheaper than any scroll or pin fallback. */
.pask-head{padding:1.1rem 1.4rem .9rem;border-bottom:1px solid rgba(255,255,255,.18)}
.pask-head h2{font-size:1.28rem;color:#fff;letter-spacing:-.024em}
.pask-head p{margin-top:.35rem;font-size:.845rem;color:rgba(255,255,255,.74);line-height:1.4}

.pask-form{padding:1rem 1.4rem 1.2rem;display:grid;gap:.68rem}
.pask .fld{gap:.32rem}
.pask-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.pask .fld label{color:rgba(255,255,255,.7)}
.pask .opt{text-transform:none;letter-spacing:0;font-weight:600;color:rgba(255,255,255,.45)}

/* Fields on colour stay translucent rather than solid white — the same
   tinted-glass treatment the system uses anywhere it sits on deep. */
.pask .inp,
.pask .date-wrap input,
.pask .sel-wrap select{
  width:100%;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-sm);
  padding:.72rem .9rem;font-size:.95rem;font-weight:500;
  color:#fff;min-height:46px;
  transition:border-color .25s ease, background-color .25s ease;
}
.pask textarea.inp{min-height:88px;resize:vertical;line-height:1.5;font-family:inherit}
.pask .date-wrap input,
.pask .sel-wrap select{padding-right:2.4rem;color-scheme:dark}
.pask .inp::placeholder{color:rgba(255,255,255,.45)}
.pask .inp:hover,
.pask .date-wrap input:hover,
.pask .sel-wrap select:hover{border-color:var(--amber);background:rgba(255,255,255,.12)}
.pask .inp:focus-visible,
.pask .date-wrap input:focus-visible,
.pask .sel-wrap select:focus-visible{background:rgba(255,255,255,.14)}
.pask .cal,.pask .chev{color:rgba(255,255,255,.55)}
.pask .sel-wrap select option{background:var(--deep);color:#fff}
.pask .inp[aria-invalid="true"],
.pask .date-wrap input[aria-invalid="true"]{border-color:var(--amber)}

.pask-err{
  font-size:.86rem;color:var(--amber-2);font-weight:600;
  display:flex;align-items:flex-start;gap:.45rem;
}
.pask-foot{font-size:.78rem;color:rgba(255,255,255,.62);line-height:1.4;text-align:center}
.pask-foot a{color:var(--tint);text-decoration:underline;text-underline-offset:2px}
.pask-foot a:hover{color:var(--amber)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pask-done{padding:2.4rem 1.7rem 2.6rem;text-align:center}
.pask-tick{
  width:52px;height:52px;margin:0 auto 1.1rem;border-radius:50%;
  background:var(--amber);color:var(--deep-3);display:grid;place-items:center;
}
.pask-tick svg{width:26px;height:26px}
.pask-done h3{font-size:1.3rem;color:#fff;letter-spacing:-.022em}
.pask-done p{margin-top:.7rem;font-size:.93rem;color:rgba(255,255,255,.76);line-height:1.55}

/* ============ MORE ============ */
.grid--3{grid-template-columns:repeat(3,1fr)}
.more-all{margin-top:2.2rem;text-align:center;position:relative;z-index:1}

/* ============ MOBILE ASK BAR ============ */
.pbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:none;align-items:center;gap:1rem;
  padding:.7rem clamp(1rem,4vw,1.4rem);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(251,252,251,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .35s var(--out);
}
.pbar[data-on="1"]{transform:none}
.pbar-t{font-size:.86rem;font-weight:600;color:var(--deep);line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbar .btn{margin-left:auto;flex:none}

/* ============ LIGHTBOX ============ */
.lbox{
  position:fixed;inset:0;z-index:140;background:rgba(20,2,13,.94);
  display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  opacity:0;transition:opacity .28s ease;
}
/* A display value on a full-screen overlay OUT-RANKS the UA's [hidden] rule.
   Without this the closed lightbox stays laid out over the whole page at zero
   opacity and silently eats every click, tap and focus on the site. Any
   element that is toggled with the hidden attribute needs this pairing. */
.lbox[hidden],.pbar[hidden]{display:none}
.lbox[data-on="1"]{opacity:1}
.lbox-img{max-width:min(1200px,100%);max-height:82vh;border-radius:var(--r);object-fit:contain}
.lbox-x{
  position:absolute;top:1rem;right:1rem;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;
  transition:background-color .3s ease;
}
.lbox-x svg{width:22px;height:22px}
.lbox-x:hover{background:rgba(255,255,255,.24)}
.lbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;
  transition:background-color .3s ease, transform .2s ease-out;
}
.lbox-nav svg{width:22px;height:22px}
.lbox-nav:hover{background:var(--amber);color:var(--deep-3)}
.lbox-nav--prev{left:clamp(.5rem,2vw,1.6rem)}
.lbox-nav--next{right:clamp(.5rem,2vw,1.6rem)}
.lbox-count{
  position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);
  color:rgba(255,255,255,.78);font-size:.82rem;font-weight:600;
}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .pwrap{grid-template-columns:minmax(0,1fr) 330px}
  .amen-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  /* The sticky card becomes a block in the flow; the bottom bar takes over
     the job of keeping the ask reachable. */
  .pwrap{grid-template-columns:minmax(0,1fr)}
  .pask{position:static;margin-top:.5rem}
  .pbar{display:flex}
  body.pbody{padding-bottom:78px}
  .pgal-count{right:.7rem;bottom:.7rem}
}
@media (max-width:720px){
  .phero{min-height:0;padding-top:2.4rem}
  .phero-h{max-width:none}
  .know-grid{grid-template-columns:1fr}
  .amen-list{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
  .pgal-sec{margin-top:-2rem}
  .pgal-nav{width:44px;height:44px}
  .pthumb{width:82px}
  .pask-row{grid-template-columns:1fr}
  .map-frame{aspect-ratio:4/3}
}
@media (max-width:560px){
  /* On a phone the photograph is only ~330px wide, so side arrows sit ON the
     picture. Move them down to flank the counter instead. */
  .lbox-nav{top:auto;bottom:1rem;transform:none;width:48px;height:48px}
  .lbox-nav--prev{left:calc(50% - 94px)}
  .lbox-nav--next{right:calc(50% - 94px)}
  .lbox-count{bottom:1.95rem}
  .lbox-img{max-height:74vh}
}
@media (max-width:420px){
  .pbar-t{display:none}
  .pbar .btn{width:100%}
}
@media (prefers-reduced-motion: reduce){
  .pshot{transition:opacity .01ms}
}