/* Joya Builders, For Sale cards, projects.html sale section and property pages.
   Loaded after site.css. Radius 0, no gradients, no shadows. Hover only on fine pointers.
   Colour rules: hairlines are always neutral. Gold appears only on prices, the active
   filter underline, primary buttons, focus and link hover. Body copy uses --c-text. */

/* ---------- shared label style ---------- */
.pcard__meta,.pcard__tag,.sale-filter__btn,.prop__zoom,.crumbs ol,.prop__kicker,.prop__h3,.kfacts dt,.spec th,.pview__cap,.penq a{
  font-family:var(--f-sans);font-weight:500;font-size:var(--t-label,.6875rem);line-height:1.5;letter-spacing:.2em;text-transform:uppercase
}

/* ---------- property card ---------- */
.pgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem clamp(1rem,2vw,1.75rem)}
.pgrid__item{min-width:0}
.pgrid__item[hidden]{display:none}
@media (min-width:560px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,2.75rem) clamp(1rem,2vw,1.75rem)}}
@media (min-width:900px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.pcard{position:relative;display:block}
.pcard__media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--c-black-3,#161616)}
.pcard__media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--focal,50% 50%)}
.pcard__tag{position:absolute;top:.75rem;left:.75rem;padding:.4rem .6rem;background:rgba(10,10,10,.72);color:var(--c-ivory);font-size:.5625rem;border:0}
.pcard__body{display:grid;gap:.35rem;padding-top:1rem}
.pcard__meta{color:var(--c-dim);font-size:.625rem}
.pcard__title{font-family:var(--f-serif);font-weight:400;font-size:clamp(1.125rem,1.05rem + .3vw,1.3125rem);line-height:1.2;letter-spacing:-.01em;color:var(--c-ivory);transition:color .3s var(--ease-out,cubic-bezier(.22,1,.36,1))}
.pcard__link{color:inherit}
.pcard__link::after{content:"";position:absolute;inset:0;z-index:1}
.pcard__price{margin-top:.1rem;font-family:var(--f-sans);font-weight:500;font-size:1rem;line-height:1.4;color:var(--c-gold);font-variant-numeric:lining-nums tabular-nums}
.pcard__cur{margin-right:.35em;font-size:.625rem;letter-spacing:.2em;color:var(--c-dim)}
.pcard__specs{list-style:none;margin:.35rem 0 0;display:flex;flex-wrap:wrap;align-items:center;padding:.6rem 0 0;border-top:1px solid var(--c-line-neutral,rgba(250,245,232,.10));font-size:.8125rem;line-height:1.5;color:var(--c-text,rgba(250,245,232,.78))}
.pcard__specs li+li::before{content:"";display:inline-block;vertical-align:middle;width:1px;height:.85em;margin:0 .6rem;background:var(--c-line-strong,rgba(250,245,232,.18))}

/* hover / focus panel: more about the property, over the photo. Pointer devices only;
   touch devices tap straight through to the page. */
.pcard__more{display:none}
@supports selector(:has(*)){
  .pcard__link:focus-visible{outline:none}
  .pcard:has(.pcard__link:focus-visible){outline:1px solid var(--c-gold);outline-offset:6px}
}
@media (hover:hover) and (pointer:fine){
  .pcard__media img{transition:transform 1.2s var(--ease-out,cubic-bezier(.22,1,.36,1))}
  .pcard__more{position:absolute;left:0;right:0;bottom:0;display:grid;gap:.9rem;padding:1.1rem 1.1rem 1rem;background:rgba(10,10,10,.9);transform:translateY(101%);transition:transform .6s var(--ease-out,cubic-bezier(.22,1,.36,1));pointer-events:none}
  .pcard__sum{font-size:.8125rem;line-height:1.55;color:var(--c-text,rgba(250,245,232,.78));display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .pcard__facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem}
  .pcard__facts div{min-width:0}
  .pcard__facts dt{font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-dim)}
  .pcard__facts dd{margin:.1rem 0 0;font-size:.8125rem;line-height:1.35;color:var(--c-ivory)}
  .pcard__go{display:inline-flex;align-items:center;gap:.5rem;font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--c-ivory);padding-top:.7rem;border-top:1px solid var(--c-line-neutral,rgba(250,245,232,.10))}
  .pcard:hover .pcard__more{transform:none}
  .pcard:hover .pcard__media img{transform:scale(1.04)}
  .pcard:hover .pcard__title{color:var(--c-gold-light)}
  .pcard:hover .pcard__go{color:var(--c-gold)}
}
@supports selector(:has(*)){
  @media (hover:hover) and (pointer:fine){.pcard:has(.pcard__link:focus-visible) .pcard__more{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .pcard:hover .pcard__media img{transform:none}
  .pcard__more{transition:none!important}
}

/* phones: compact row cards (photo left, details right) in the For Sale grid */
@media (max-width:559px){
  .pgrid:not(.pgrid--rail) .pcard{display:grid;grid-template-columns:36% minmax(0,1fr);gap:1rem;align-items:start}
  .pgrid:not(.pgrid--rail) .pcard__media{aspect-ratio:3/4}
  .pgrid:not(.pgrid--rail) .pcard__tag{top:.5rem;left:.5rem;padding:.3rem .45rem;font-size:.5rem}
  .pgrid:not(.pgrid--rail) .pcard__body{padding-top:.1rem;gap:.3rem}
  .pgrid:not(.pgrid--rail) .pcard__specs{font-size:.75rem}
  .pgrid:not(.pgrid--rail) .pcard__specs li+li::before{margin:0 .45rem}
}

/* rail: horizontal snap strip below 1024px, grid from 1024px.
   Used by the home preview (.home-sale) and the related cards on property pages.
   Block padding lets the focus outline and reveal offset clear the scroll box. */
@media (max-width:1023px){
  .pgrid--rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);padding-block:.5rem;margin-block:-.5rem;scroll-padding-inline:var(--gutter)}
  .pgrid--rail::-webkit-scrollbar{display:none}
  .pgrid--rail>.pgrid__item{flex:0 0 min(62vw,260px);scroll-snap-align:start}
}
@media (min-width:1024px){.pgrid--rail{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- For Sale section (projects.html) ---------- */
.sale{padding:clamp(1rem,3vw,2rem) 0 var(--section)}
.sale__head{display:grid;gap:1.5rem}
@media (min-width:768px){.sale__head{grid-template-columns:1fr auto;align-items:end}}
.sale__intro{max-width:56ch;margin-top:1rem;font-size:.9375rem;line-height:1.75;color:var(--c-dim)}
.sale .pgrid{margin-top:clamp(2.5rem,4vw,3.5rem)}
.sale-filter{display:flex;flex-wrap:wrap;gap:0 1.75rem}
.sale-filter.is-pending{visibility:hidden}
.sale-filter__btn{position:relative;padding:.75rem 0;color:var(--c-dim);transition:color .3s var(--ease-out,cubic-bezier(.22,1,.36,1))}
.sale-filter__btn::after{content:"";position:absolute;left:0;right:0;bottom:.35rem;height:1px;background:var(--c-gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out,cubic-bezier(.22,1,.36,1))}
.sale-filter__btn[aria-pressed="true"]{color:var(--c-ivory)}
.sale-filter__btn[aria-pressed="true"]::after{transform:scaleX(1)}
.sale-filter__n{margin-left:.35em;opacity:.7}
@media (hover:hover) and (pointer:fine){.sale-filter__btn:hover{color:var(--c-ivory)}}

/* ---------- property page ---------- */
.prop{padding-top:var(--nav-h)}
.prop__split{display:block}
.prop__media{position:relative}
.prop__photo{display:block;position:relative;width:100%;cursor:zoom-in;background:var(--c-black-3,#161616)}
.prop__photo img{display:block;width:100%;max-width:none;height:min(133.33vw,72vh);height:min(133.33vw,72svh);object-fit:cover;object-position:var(--focal,50% 50%)}
.prop__zoom{position:absolute;right:1rem;bottom:1rem;padding:.6rem .9rem;background:rgba(10,10,10,.72);color:var(--c-ivory);letter-spacing:.18em}
@media (hover:hover) and (pointer:fine){
  .prop__zoom{opacity:.8;transition:opacity .3s var(--ease-out,cubic-bezier(.22,1,.36,1))}
  .prop__photo:hover .prop__zoom{opacity:1}
}
.prop__panel{min-width:0;padding:clamp(1.75rem,5vw,2.5rem) var(--gutter) var(--section)}

@media (min-width:1024px){
  .prop__split{display:grid;grid-template-columns:minmax(0,min(50vw,896px)) minmax(0,1fr);align-items:start}
  .prop__media{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h))}
  .prop__photo,.prop__photo img{width:100%;height:100%}
  .prop__panel{max-width:800px;padding:clamp(2.5rem,4vw,4.5rem) clamp(2rem,5vw,6rem) var(--section)}
}

.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;letter-spacing:.18em;color:var(--c-dim)}
.crumbs li{min-width:0}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--c-line-strong,rgba(250,245,232,.18))}
.crumbs [aria-current]{max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-ivory)}
@media (hover:hover) and (pointer:fine){.crumbs a{transition:color .3s var(--ease-out,cubic-bezier(.22,1,.36,1))}.crumbs a:hover{color:var(--c-gold)}}

/* info panel: title, one line of context, then the price as the hero */
.prop__kicker{margin-top:2rem;color:var(--c-dim)}
.prop__title{margin-top:.75rem;font-family:var(--f-serif);font-weight:400;font-size:clamp(2.25rem,1.7rem + 2.4vw,3.75rem);line-height:1.06;letter-spacing:-.015em;color:var(--c-ivory);overflow-wrap:break-word}
.prop__lead{max-width:46ch;margin-top:1.25rem;font-size:1.0625rem;line-height:1.75;color:var(--c-text,rgba(250,245,232,.78))}
.prop__price{margin-top:clamp(2.25rem,4vw,3rem)}
.prop__amount{font-family:var(--f-serif);font-weight:400;font-size:clamp(2.25rem,1.7rem + 2.2vw,3.25rem);line-height:1.1;letter-spacing:-.01em;color:var(--c-gold);font-variant-numeric:lining-nums tabular-nums}
.prop__cur{margin-right:.5em;vertical-align:.7em;font-family:var(--f-sans);font-weight:500;font-size:.75rem;letter-spacing:.2em;color:var(--c-dim)}
.prop__price-note{margin-top:.75rem;font-size:.875rem;line-height:1.6;color:var(--c-dim)}
.prop__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:2rem}
@media (max-width:479px){.prop__actions .btn--gold,.prop__actions .btn--line{flex:1 1 100%}}
.prop__note{max-width:52ch;margin-top:1.25rem;font-size:.8125rem;line-height:1.7;color:var(--c-dim)}

/* key facts: hairlines separate data only */
.kfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem;margin:clamp(2.5rem,4vw,3.25rem) 0 0}
.kfacts__item{min-width:0;padding:1.125rem 0;border-top:1px solid var(--c-line-neutral,rgba(250,245,232,.10))}
.kfacts dt{color:var(--c-dim)}
.kfacts dd{margin:.4rem 0 0;font-family:var(--f-serif);font-size:1.1875rem;line-height:1.3;color:var(--c-ivory);overflow-wrap:break-word}
@media (min-width:640px) and (max-width:1023px){.kfacts{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1440px){.kfacts{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* sections: separated by space, not rules. Lists, tables and FAQ carry their own hairlines. */
.prop__sec{margin-top:clamp(4rem,7vw,6rem)}
.prop__h2{margin-bottom:1.75rem;font-family:var(--f-serif);font-weight:400;font-size:clamp(1.5rem,1.3rem + .8vw,2rem);line-height:1.2;letter-spacing:-.01em;color:var(--c-ivory)}
.prop__h3{margin:2.25rem 0 .75rem;color:var(--c-dim)}
.prop__why{max-width:34ch;margin-bottom:1.75rem;font-family:var(--f-serif);font-style:italic;font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);line-height:1.45;color:var(--c-ivory)}
.prop__text,.prop__text p{max-width:62ch;line-height:1.8;color:var(--c-text,rgba(250,245,232,.78))}
.prop__text p+p{margin-top:1.25rem}
.prop__close .prop__text{margin-bottom:2rem}
.prop__list{list-style:none;margin:0;padding:0}
.prop__list li{padding:.8rem 0;border-top:1px solid var(--c-line-neutral,rgba(250,245,232,.10));font-size:.9375rem;line-height:1.6;color:var(--c-text,rgba(250,245,232,.78))}
@media (min-width:640px){.prop__list--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}}
.prop__small,.near__note{margin-top:1rem;max-width:62ch;font-size:.8125rem;line-height:1.7;color:var(--c-dim)}
.prop__address{margin-bottom:1rem;color:var(--c-ivory)}
.prop__sec .btn--text{margin-top:1.25rem}

.spec{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.6}
.spec tr{border-top:1px solid var(--c-line-neutral,rgba(250,245,232,.10))}
.spec th{width:38%;padding:.9rem 1rem .9rem 0;text-align:left;vertical-align:top;color:var(--c-dim)}
.spec td{padding:.9rem 0;vertical-align:top;color:var(--c-ivory);overflow-wrap:break-word}

.near{list-style:none;margin:0;padding:0}
.near li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-top:1px solid var(--c-line-neutral,rgba(250,245,232,.10));font-size:.9375rem;line-height:1.6;color:var(--c-text,rgba(250,245,232,.78))}
.near li span:first-child{min-width:0}
.near li span:last-child{flex:none;white-space:nowrap;color:var(--c-dim);font-variant-numeric:tabular-nums}
@media (max-width:420px){.near li span:last-child{white-space:normal;text-align:right;max-width:11ch}}

/* FAQ inside the panel: site.css supplies the type and neutral lines; only spacing is scoped here */
.prop__panel .faqs{margin-top:0}
.prop__panel .faq__a p{font-size:.9375rem}

/* related */
.related{padding-block:var(--section);background:var(--c-black-2,#0f0f0f)}
.related__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:clamp(2.5rem,4vw,3.5rem)}

/* ---------- mobile enquiry bar (clear of the Pakudo ribbon: the ribbon is in normal flow, the bar is fixed over the body's bottom padding) ---------- */
.penq{display:none}
@media (max-width:1023px){
  body.page-prop{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .page-prop .wa-float{display:none}
  .penq{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-float,90);display:grid;grid-template-columns:1fr 1fr;padding-bottom:env(safe-area-inset-bottom);background:var(--c-black);border-top:1px solid var(--c-line-neutral,rgba(250,245,232,.10))}
  .penq a{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:56px;font-size:.75rem;letter-spacing:.16em}
  .penq__wa{background:var(--c-gold);color:var(--c-black)}
  .penq__call{color:var(--c-ivory);border-left:1px solid var(--c-line-neutral,rgba(250,245,232,.10))}
  .penq a:focus-visible{outline-offset:-4px}
  .penq__wa:focus-visible{outline-color:var(--c-black)}
}

/* ---------- photo viewer ---------- */
.pview{inset:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,10,10,.97);color:var(--c-ivory);overflow:hidden}
.pview[open]{display:grid;place-items:center;align-content:center;gap:1rem}
.pview::backdrop{background:rgba(10,10,10,.97)}
.pview__img{width:auto;height:auto;max-width:94vw;max-height:84vh;max-height:84svh;object-fit:contain;touch-action:pinch-zoom}
.pview__cap{max-width:94vw;padding-inline:1rem;text-align:center;color:var(--c-dim)}
.pview__close{position:absolute;top:1rem;right:1rem;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--c-line-strong,rgba(250,245,232,.18));color:var(--c-ivory);transition:border-color .3s var(--ease-out,cubic-bezier(.22,1,.36,1)),color .3s var(--ease-out,cubic-bezier(.22,1,.36,1))}
@media (hover:hover) and (pointer:fine){.pview__close:hover{border-color:var(--c-gold);color:var(--c-gold)}}
@media (prefers-reduced-motion:no-preference){
  .pview[open]{animation:pview-in .35s var(--ease-out,cubic-bezier(.22,1,.36,1))}
  @keyframes pview-in{from{opacity:0}to{opacity:1}}
}