/* ==========================================================================
   Off-plan project pages  —  .hzpr-* namespace

   The index at /themes/property/projects and the six project pages under it.

   These were flat HTML in public/themes/property/projects/ until this
   revision, and this sheet sat in that directory with them. It had to move:
   the directory is now the address the index answers on, and a directory that
   exists on disk stops Apache handing the request to Laravel at all. It is
   loaded with @push('styles') from the two views, alongside the five sheets
   the footer component loads.

   The namespace is deliberately .hzpr-, distinct from the storefront's .hz-,
   the listing and search pages' .hzp-, and the newer .hzg-, .hzseo-, .hzpg-,
   .hzpa-, .hzp-sell and .hzf- families. Class matching is exact and no
   property stylesheet uses substring or prefix attribute selectors, so nothing
   here can reach a page owned by another session.

   Values are copied from property-pages.css so the two page families read as
   one site.

   RIGHT-TO-LEFT. This sheet is direction-neutral by construction rather than
   mirrored by hand, which is the approach the other five property sheets took:
   there is one physical directional declaration in it and it is stated
   logically, so the same numbers serve both directions. The short block at the
   foot holds the two things a logical property cannot express — an arrow that
   points, and the digit runs that must keep their own order inside Arabic
   text. Everything in that block is scoped to [dir="rtl"], so it is inert on
   an English page.
   ========================================================================== */

.hzpr-page {
    /*
        Hagzi's action colour moved from red to blue. The token is declared in
        property.css :root, which these pages link at runtime rather than inline,
        so it reaches them with no rebuild; the literal is repeated as a fallback
        exactly as that file asks. Blue marks actions and the accent-weight
        facts only - it is not a page colour.
    */
    --hzpr-accent: var(--hagzi-primary, #0745D9);
    --hzpr-accent-dark: var(--hagzi-primary-dark, #0638B0);
    /*
        The two red tokens went with the banner, which was the only thing on
        these pages that used them. No caution colour is declared here now.
        The disclosures that remain — the map, neighbourhood, amenity and units
        notes, and the line under the disabled button — were always set in the
        muted grey of ordinary small print, not in red, so none of them lost
        anything when these two were removed.
    */
    --hzpr-ink: var(--hz-ink, #12141a);
    --hzpr-body: #3c414c;
    --hzpr-muted: #6b7280;
    --hzpr-line: var(--hz-line, #e7e9ee);
    --hzpr-line-strong: #d6dae1;
    --hzpr-fill: #f4f5f7;
    --hzpr-fill-soft: #fafbfc;
    --hzpr-radius: 10px;
    --hzpr-radius-sm: 6px;

    padding-bottom: 40px;
    background: #ffffff;
    color: var(--hzpr-body);
    font-size: 14px;
    line-height: 1.6;
}

.hzpr-page *,
.hzpr-page *::before,
.hzpr-page *::after {
    box-sizing: border-box;
}

.hzpr-shell {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/*
    These pages carried no focus styling at all and fell back to the UA ring.
    Match the site's convention: a 3px ring in the action colour, offset so it
    clears the control. Inside the hero, where the backdrop is a photograph, the
    ring is white for the same reason the header uses white on its dark band.
*/
.hzpr-page a:focus-visible,
.hzpr-page button:focus-visible,
.hzpr-page summary:focus-visible {
    outline: 3px solid var(--hzpr-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.hzpr-hero a:focus-visible {
    outline-color: #ffffff;
}

.hzpr-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------ breadcrumb -- */

.hzpr-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0;
    padding: 14px 0 0;
    color: var(--hzpr-muted);
    font-size: 12px;
    list-style: none;
}

.hzpr-crumbs li {
    display: flex;
    gap: 6px;
    align-items: center;
}

.hzpr-crumbs li + li::before {
    color: var(--hzpr-line-strong);
    content: "/";
}

.hzpr-crumbs a {
    color: var(--hzpr-muted);
    text-decoration: none;
}

.hzpr-crumbs a:hover {
    color: var(--hzpr-accent);
    text-decoration: underline;
}

.hzpr-crumbs [aria-current="page"] {
    color: var(--hzpr-ink);
    font-weight: 600;
}

/* ------------------------------------------------------------------ hero -- */

/*
    Plain block-level full-width image. Not 100vw with a negative margin:
    that trick overflows by the scrollbar width and this page is checked for
    horizontal overflow at 1440 and 390.
*/
.hzpr-hero {
    position: relative;
    width: 100%;
    margin: 14px 0 0;
    overflow: hidden;
    background: var(--hzpr-fill);
}

.hzpr-hero__img {
    display: block;
    width: 100%;
    height: clamp(230px, 34vw, 430px);
    object-fit: cover;
}

/*
    left/translateX is centring, not direction: the pair puts the box's middle
    on the container's middle, which is the same place in either direction.
    inset-inline-start here would flip the anchor and leave the transform
    pulling the box off the edge, so this one stays physical on purpose. The
    pills inside are flex children and reverse on their own.
*/
.hzpr-hero__flags {
    position: absolute;
    bottom: 14px;
    left: 50%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: 1200px;
    padding: 0 24px;
    transform: translateX(-50%);
}

.hzpr-flag {
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(18, 20, 26, 0.72);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    backdrop-filter: blur(2px);
}

.hzpr-flag--status {
    background: var(--hzpr-ink);
}

/*
    The red banner's two rules stood here — .hzpr-demo-note and its icon — and
    are deleted with the markup, so nothing in this sheet is left addressing an
    element that no longer renders.

    Nothing replaces them and no spacing was adjusted to compensate. The banner
    carried its own 18px top margin and the identity band below carries a 20px
    one; with the banner gone that 20px is simply the gap between the hero and
    the project name, which is the same rhythm the rest of the page uses.
*/

/* --------------------------------------------------------- identity band -- */

/*
    Full-width band under the hero: name/developer/location on the left, the
    launch price pushed to the right. Previously this row held the enquiry panel
    on the right, which left ~70px of dead space beneath the price because the
    left column ran out of content before the panel did. The panel now lives in
    the sidebar of the content grid below, and the price fills this row instead.
*/
.hzpr-ident {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: flex-end;
    justify-content: space-between;
    margin: 20px 0 0;
}

.hzpr-ident__text {
    min-width: 0;
    flex: 1 1 340px;
}

.hzpr-ident__name {
    margin: 0;
    color: var(--hzpr-ink);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.22;
    overflow-wrap: break-word;
}

.hzpr-ident__dev {
    margin: 7px 0 0;
    color: var(--hzpr-body);
    font-size: 13.5px;
}

.hzpr-ident__dev strong {
    color: var(--hzpr-ink);
    font-weight: 600;
}

.hzpr-ident__loc {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 6px 0 0;
    color: var(--hzpr-muted);
    font-size: 13px;
}

.hzpr-ident__loc svg {
    flex: none;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--hzpr-accent);
    stroke-width: 1.7;
    stroke-linejoin: round;
}

.hzpr-price {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--hzpr-line);
    border-radius: var(--hzpr-radius);
    background: var(--hzpr-fill-soft);
}

.hzpr-price__label {
    margin: 0;
    color: var(--hzpr-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hzpr-price__value {
    margin: 3px 0 0;
    color: var(--hzpr-accent-dark);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.15;
}

.hzpr-price__value span {
    color: var(--hzpr-ink);
    font-size: 14px;
    font-weight: 600;
}

/* ------------------------------------------------------------ body grid -- */

/*
    Same idiom as .hzp-dgrid on the listing detail page: content column left,
    narrower sidebar right, sidebar dropped below the content at 1023.98px.
    Column width and gap are copied from it so the two page types line up.
*/
.hzpr-dgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
    gap: 24px;
    align-items: start;
    margin: 26px 0 0;
}

.hzpr-dmain {
    display: grid;
    gap: 22px;
    min-width: 0;
}

/* sections are spaced by the grid gap in here, not by their own margin */
.hzpr-dmain > .hzpr-sec {
    margin: 0;
}

/*
    Stretched to the full height of the grid row so the sticky panel inside it
    has somewhere to travel - a sticky element cannot leave its containing
    block, and an unstretched grid item shrink-wraps to the panel, pinning it in
    place. align-content keeps the panel at the top of that tall column instead
    of stretching it.
*/
.hzpr-dside {
    display: grid;
    align-self: stretch;
    align-content: start;
    gap: 16px;
    min-width: 0;
}

/* enquiry panel ------------------------------------------------------------ */

/* sticky like .hzp-contactcard; goes static once the sidebar stacks */
.hzpr-enq {
    position: sticky;
    top: 16px;
    padding: 16px;
    border: 1px solid var(--hzpr-line);
    border-radius: var(--hzpr-radius);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(18, 20, 26, 0.04);
}

.hzpr-enq__title {
    margin: 0;
    color: var(--hzpr-ink);
    font-size: 16px;
    font-weight: 700;
}

.hzpr-enq__sub {
    margin: 5px 0 0;
    color: var(--hzpr-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.hzpr-agent {
    display: flex;
    gap: 11px;
    align-items: center;
    margin: 12px 0 0;
    padding: 11px;
    border: 1px solid var(--hzpr-line);
    border-radius: var(--hzpr-radius-sm);
    background: var(--hzpr-fill-soft);
}

.hzpr-agent__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hzpr-line);
    border-radius: 50%;
    background: #ffffff;
}

.hzpr-agent__avatar svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--hzpr-muted);
    stroke-width: 1.6;
}

.hzpr-agent__body {
    min-width: 0;
}

.hzpr-agent__name {
    margin: 0;
    color: var(--hzpr-ink);
    font-size: 13.5px;
    font-weight: 600;
}

.hzpr-agent__role {
    margin: 2px 0 0;
    color: var(--hzpr-muted);
    font-size: 12px;
}

/*
    The enquiry panel's buttons, copied value for value from `.hzp-btn` in
    property-pages.css — the control the listing detail page's contact card
    uses — so the two page families read as one site. The geometry that
    carries the resemblance is the explicit 40px height, the 6px corner, a
    14px/500 label rather than a heavier one, a 16px stroked icon, 7px
    between icon and label and 9px between stacked buttons.

    Only the treatment is copied, not the button set: these pages offer
    WhatsApp, a phone call and an inert register-interest control, and each
    still does what it did.
*/
.hzpr-btns {
    display: grid;
    gap: 9px;
    margin: 13px 0 0;
}

.hzpr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--hzpr-line-strong);
    border-radius: var(--hzpr-radius-sm);
    background: #ffffff;
    color: var(--hzpr-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.hzpr-btn svg {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
    The listing page's contact card promotes exactly one action to the purple
    fill and leaves the others white with a neutral border; its stylesheet
    says so in a comment, to stop a later edit quietly promoting a second.
    The same holds here, which is why WhatsApp is no longer green — the
    reference has moved off brand-green for that button and onto the shared
    secondary treatment. Purple arrives on hover only.
*/
a.hzpr-btn:not(.hzpr-btn--call):hover {
    border-color: var(--hzpr-accent);
    color: var(--hzpr-accent);
}

.hzpr-btn--call {
    border-color: var(--hzpr-accent);
    background: var(--hzpr-accent);
    color: #ffffff;
}

a.hzpr-btn--call:hover {
    border-color: var(--hzpr-accent-dark);
    background: var(--hzpr-accent-dark);
}

/* Stroke only: every icon here is an outline, so the fill stays off. */
.hzpr-btn--call svg {
    stroke: #ffffff;
}

/* Matches the 2px ring the reference puts on this control specifically,
   rather than the page-wide 3px ring these pages use elsewhere. */
.hzpr-page .hzpr-btn:focus-visible {
    outline: 2px solid var(--hzpr-accent);
    outline-offset: 2px;
}

/*
    Inert control. It keeps the shared geometry so the stack stays even, but
    drops to the grey fill, the lighter border and muted text, and takes the
    not-allowed cursor. It is a span with no href, so it is unfocusable and
    unclickable rather than merely styled to look that way, and it is the one
    button in the stack with no icon — deliberately, so it does not read as
    another live action.
*/
.hzpr-btn--off {
    border-color: var(--hzpr-line);
    background: var(--hzpr-fill);
    color: var(--hzpr-muted);
    cursor: not-allowed;
}

.hzpr-enq__note {
    margin: 11px 0 0;
    color: var(--hzpr-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

/* -------------------------------------------------------------- sections -- */

.hzpr-sec {
    margin: 26px 0 0;
}

.hzpr-sec__head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 13px;
}

.hzpr-sec__title {
    margin: 0;
    color: var(--hzpr-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.hzpr-panel {
    padding: 18px;
    border: 1px solid var(--hzpr-line);
    border-radius: var(--hzpr-radius);
    background: #ffffff;
}

.hzpr-note {
    margin: 12px 0 0;
    color: var(--hzpr-muted);
    font-size: 11.5px;
    line-height: 1.55;
}

/* --------------------------------------------------------- key information -- */

.hzpr-keys {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--hzpr-line);
    border-radius: var(--hzpr-radius);
    background: var(--hzpr-line);
    list-style: none;
}

.hzpr-keys > li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    min-width: 0;
    padding: 15px 16px;
    background: #ffffff;
}

.hzpr-keys svg {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    fill: none;
    stroke: var(--hzpr-accent);
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.hzpr-keys > li > span,
.hzpr-points > li > span,
.hzpr-amen > li > span {
    min-width: 0;
}

.hzpr-keys__k {
    margin: 0;
    color: var(--hzpr-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hzpr-keys__v {
    margin: 3px 0 0;
    color: var(--hzpr-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: break-word;
}

.hzpr-keys__v.is-unknown {
    color: var(--hzpr-muted);
    font-weight: 500;
    font-style: italic;
}

/* ------------------------------------------------------- similar projects -- */

/*
    Full-width band at the foot of the page, after the two-column body and
    before the footer. Head layout mirrors .hzp-rail__head on the listing page.
*/
/* margin-top only: .hzpr-shell needs its `margin: 0 auto` to stay centred */
.hzpr-rail {
    margin-top: 30px;
    padding-bottom: 34px;
}

.hzpr-rail__head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px;
}

.hzpr-rail__title {
    margin: 0;
    color: var(--hzpr-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.hzpr-rail__tools {
    display: flex;
    flex: none;
    gap: 12px;
    align-items: center;
}

.hzpr-rail__all {
    color: var(--hzpr-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* The reference's rail link changes colour and nothing else on hover; the
   underline these pages added was the only thing separating the two. */
.hzpr-rail__all:hover {
    color: var(--hzpr-accent);
}

/*
    The nav starts hidden in the markup and is revealed by script only after the
    buttons are wired up AND the track actually overflows. No arrow is ever shown
    that would not scroll.
*/
.hzpr-rail__nav {
    display: flex;
    gap: 8px;
}

.hzpr-rail__nav[hidden] {
    display: none;
}

.hzpr-arrow {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--hzpr-line-strong);
    border-radius: 50%;
    background: #ffffff;
    color: var(--hzpr-ink);
    cursor: pointer;
}

.hzpr-arrow svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hzpr-arrow:hover:not(:disabled) {
    border-color: var(--hzpr-accent);
    color: var(--hzpr-accent);
}

/*
    The reference greys the glyph to the border colour and leaves the button
    otherwise intact. The opacity and one-off grey used here were a second way
    of saying the same thing, and a slightly different one.
*/
.hzpr-arrow:disabled {
    color: var(--hzpr-line-strong);
    cursor: default;
}

/* As on the reference's own rail arrows and contact-card buttons. */
.hzpr-page .hzpr-arrow:focus-visible {
    outline: 2px solid var(--hzpr-accent);
    outline-offset: 2px;
}

.hzpr-rail__track {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 2px 2px 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    list-style: none;
}

/* ---------------------------------------------------------- index grid -- */

/*
    The card below is shared by both project surfaces: the detail pages put it
    in .hzpr-rail__track, a horizontal flex carousel, and the index puts it in
    .hzpr-grid. The rail is why .hzpr-mini is `flex: none; width: 240px`, and
    why that width has to be released again here -- without the override every
    card sits 240px wide inside a wider track, left-aligned, with the remainder
    of the track empty.

    .hzpr-grid was named in the index markup from the day the page was written
    but never given a rule, in this stylesheet or the one it replaced, so the
    six fixed-width cards stacked down the page as block-level list items. The
    class was doing nothing at all.

    auto-fill, where the card grids in property-pages.css use auto-fit. The
    difference only shows when there are fewer projects than columns, which is
    now possible because projects are editor-managed: auto-fit collapses the
    empty tracks and stretches two remaining projects to half the page each,
    auto-fill leaves them card-sized. No media queries -- the track floor does
    the reflow, so this cannot fall out of step with the breakpoints the rest
    of the page uses.
*/
.hzpr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hzpr-grid .hzpr-mini {
    width: auto;
}

.hzpr-mini {
    flex: none;
    width: 240px;
    overflow: hidden;
    border: 1px solid var(--hzpr-line);
    border-radius: var(--hzpr-radius);
    background: #ffffff;
}

.hzpr-mini__img {
    display: block;
    width: 100%;
    height: 145px;
    object-fit: cover;
}

.hzpr-mini__body {
    padding: 10px 11px 12px;
}

.hzpr-mini__price {
    margin: 0;
    color: var(--hzpr-accent-dark);
    font-size: 14.5px;
    font-weight: 700;
}

.hzpr-mini__price span {
    color: var(--hzpr-ink);
    font-size: 12px;
    font-weight: 600;
}

.hzpr-mini__name {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.hzpr-mini__name a {
    color: var(--hzpr-ink);
    text-decoration: none;
}

.hzpr-mini__name a:hover {
    color: var(--hzpr-accent);
    text-decoration: underline;
}

.hzpr-mini__loc {
    margin: 3px 0 0;
    color: var(--hzpr-muted);
    font-size: 12px;
}

.hzpr-mini__pill {
    display: inline-block;
    margin: 8px 0 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--hzpr-fill);
    color: var(--hzpr-muted);
    font-size: 11px;
    font-weight: 600;
}

/* ----------------------------------------------------------------- about -- */

.hzpr-prose p {
    margin: 0 0 11px;
    color: var(--hzpr-body);
    font-size: 14px;
    line-height: 1.72;
}

.hzpr-prose p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------- map -- */

.hzpr-map {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 240px;
    overflow: hidden;
    border: 1px solid var(--hzpr-line);
    border-radius: var(--hzpr-radius);
    background:
        repeating-linear-gradient(0deg, #eceef1 0 1px, transparent 1px 42px),
        repeating-linear-gradient(90deg, #eceef1 0 1px, transparent 1px 42px),
        #f6f7f9;
}

.hzpr-map__pin {
    display: grid;
    justify-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--hzpr-line);
    border-radius: var(--hzpr-radius);
    background: rgba(255, 255, 255, 0.94);
    text-align: center;
}

.hzpr-map__pin svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--hzpr-accent);
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.hzpr-map__label {
    color: var(--hzpr-ink);
    font-size: 13.5px;
    font-weight: 600;
}

.hzpr-map__sub {
    color: var(--hzpr-muted);
    font-size: 11.5px;
}

/* ---------------------------------------------------------------- living -- */

.hzpr-living {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.hzpr-living__card {
    overflow: hidden;
    border: 1px solid var(--hzpr-line);
    border-radius: var(--hzpr-radius);
    background: #ffffff;
}

.hzpr-living__img {
    display: block;
    width: 100%;
    height: 156px;
    object-fit: cover;
}

.hzpr-living__cardbody {
    padding: 12px 13px 14px;
}

.hzpr-living__cardtitle {
    margin: 0;
    color: var(--hzpr-ink);
    font-size: 14.5px;
    font-weight: 700;
}

.hzpr-living__cardsub {
    margin: 4px 0 0;
    color: var(--hzpr-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.hzpr-points {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hzpr-points > li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    min-width: 0;
}

.hzpr-points svg {
    flex: none;
    width: 19px;
    height: 19px;
    margin-top: 2px;
    fill: none;
    stroke: var(--hzpr-accent);
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.hzpr-points__t {
    margin: 0;
    color: var(--hzpr-ink);
    font-size: 13.5px;
    font-weight: 600;
}

.hzpr-points__d {
    margin: 2px 0 0;
    color: var(--hzpr-body);
    font-size: 13px;
    line-height: 1.6;
}

/* ------------------------------------------------------------- amenities -- */

.hzpr-amen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hzpr-amen > li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    min-width: 0;
    color: var(--hzpr-body);
    font-size: 13.5px;
}

.hzpr-amen svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    fill: none;
    stroke: var(--hzpr-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ----------------------------------------------------------------- units -- */

.hzpr-empty {
    display: grid;
    justify-items: center;
    gap: 9px;
    padding: 34px 18px;
    border: 1px dashed var(--hzpr-line-strong);
    border-radius: var(--hzpr-radius);
    background: var(--hzpr-fill-soft);
    text-align: center;
}

.hzpr-empty svg {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--hzpr-line-strong);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.hzpr-empty__t {
    margin: 0;
    color: var(--hzpr-ink);
    font-size: 14.5px;
    font-weight: 600;
}

.hzpr-empty__d {
    max-width: 460px;
    margin: 0;
    color: var(--hzpr-muted);
    font-size: 12.5px;
    line-height: 1.6;
}

/* ------------------------------------------------------------------- faq -- */

.hzpr-faq {
    display: grid;
    gap: 8px;
}

.hzpr-faq__item {
    overflow: hidden;
    border: 1px solid var(--hzpr-line);
    border-radius: var(--hzpr-radius-sm);
    background: #ffffff;
}

.hzpr-faq__q {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 13px 15px;
    color: var(--hzpr-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
    list-style: none;
}

.hzpr-faq__q::-webkit-details-marker {
    display: none;
}

.hzpr-faq__q:hover {
    background: var(--hzpr-fill-soft);
}

.hzpr-faq__q svg {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--hzpr-muted);
    stroke-width: 2;
    stroke-linecap: round;
    transition: transform 0.16s ease;
}

.hzpr-faq__item[open] .hzpr-faq__q svg {
    transform: rotate(180deg);
}

.hzpr-faq__a {
    margin: 0;
    padding: 0 15px 14px;
    color: var(--hzpr-body);
    font-size: 13.5px;
    line-height: 1.68;
}

/* ------------------------------------------------------------ responsive -- */

/* Sidebar no longer fits beside the content column - same breakpoint the
   listing page uses, so both page types reflow at the same width. */
@media (max-width: 1023.98px) {
    .hzpr-dgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hzpr-enq {
        position: static;
    }

    .hzpr-keys {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hzpr-living {
        grid-template-columns: minmax(0, 1fr);
    }

    .hzpr-living__card {
        max-width: 420px;
    }
}

@media (max-width: 639.98px) {
    .hzpr-shell {
        padding: 0 16px;
    }

    .hzpr-hero__flags {
        padding: 0 16px;
    }

    .hzpr-ident__name {
        font-size: 21px;
    }

    /* price sits under the title rather than beside it */
    .hzpr-ident {
        align-items: stretch;
    }

    .hzpr-price {
        flex: 1 1 100%;
    }

    .hzpr-keys {
        grid-template-columns: minmax(0, 1fr);
    }

    .hzpr-amen {
        grid-template-columns: minmax(0, 1fr);
    }

    .hzpr-panel {
        padding: 14px;
    }

    .hzpr-price__value {
        font-size: 22px;
    }
}


/* ==========================================================================
   Right-to-left
   ==========================================================================

   Everything above is already direction-neutral. What is left is the two cases
   a logical property cannot state, and they are the same two the shared
   property-rtl.css calls out. Both are scoped to [dir="rtl"], so an English
   page reads this sheet and applies none of it.
   ========================================================================== */

/*
    The rail's arrows.

    Their boxes have already swapped ends by this point — the nav is a flex row
    and reverses on its own, so "previous" is on the right in Arabic. The
    chevrons inside would still point the way they were drawn, and the two
    would disagree. These are single chevrons, so a mirror is exactly a
    reversal.

    The direction of travel is handled in the view's script, not here: a
    right-to-left track counts scrollLeft down from zero into negative numbers,
    which no stylesheet can correct.
*/
[dir="rtl"] .hzpr-arrow svg {
    transform: scaleX(-1);
}

/*
    Prices, delivery quarters and bedroom ranges are left-to-right runs
    whatever surrounds them. Western digits are what this market reads on a
    property portal, and the shared sheet makes the same choice for the listing
    pages — but a bare digit run inside Arabic text is at the mercy of the bidi
    algorithm, which is free to reorder the groups around it. "168,000 JOD" can
    come out with the currency on the wrong side of the figure.

    isolate rather than embed: it also stops the run from affecting the
    ordering of the text on either side of it.
*/
[dir="rtl"] .hzpr-price__value,
[dir="rtl"] .hzpr-mini__price,
[dir="rtl"] .hzpr-keys__v {
    unicode-bidi: isolate;
}

/* ======================================================================
   THE PAGE TITLE

   .hzpr-idx__title has been in this page's markup since it was written and
   has never had a rule behind it, so the <h1> introducing the index has
   been rendering at body size while every other page on the site carries a
   heading. Same shape of defect as .hzpr-grid, which was likewise named in
   the markup before anything styled it.

   Not a new type scale. This is the treatment the valuation page's <h1>
   already uses -- clamp(23px, 2.6vw, 32px), 800, -.018em -- restated in
   this sheet's ink token rather than invented here.
   ====================================================================== */

.hzpr-idx__title {
    margin: 0;
    color: var(--hzpr-ink);
    font-size: clamp(23px, 2.6vw, 32px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.018em;
}

/* ---------------------------------------------------------- facets ---- */

/*
    The pills themselves are .hzp-fpill out of property-pages.css, which is
    loaded on this page too. Nothing about them is redefined here: two pages
    of one site should not hold two opinions about what a chosen option
    looks like. What follows is only the row they sit in.
*/
.hzpr-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: flex-end;
    margin: 16px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--hzpr-line);
    border-radius: var(--hzpr-radius);
    background: #ffffff;
}

.hzpr-filters__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.hzpr-filters__label {
    color: var(--hzpr-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

/*
    Logical, not left: in Arabic the actions belong at the other end and
    margin-inline-start flips with the document where margin-left would
    have pinned them to the wrong side.
*/
.hzpr-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-inline-start: auto;
}

.hzpr-filters + .hzpr-grid,
.hzpr-filters + .hzpr-empty {
    margin-top: 16px;
}

.hzpr-fbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid var(--hzpr-line-strong);
    border-radius: 999px;
    padding: 6px 18px;
    color: var(--hzpr-ink);
    background: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.hzpr-fbtn:hover {
    border-color: var(--hzpr-ink);
}

.hzpr-fbtn--accent {
    border-color: var(--hzpr-accent);
    background: var(--hzpr-accent);
    color: #ffffff;
}

.hzpr-fbtn--accent:hover {
    border-color: var(--hzpr-accent-dark);
    background: var(--hzpr-accent-dark);
}

.hzpr-fbtn:focus-visible {
    outline: 2px solid var(--hzpr-accent);
    outline-offset: 2px;
}

/* ----------------------------------------------------- empty state ---- */

.hzpr-empty {
    margin: 16px 0 0;
    padding: 30px 18px;
    border: 1px solid var(--hzpr-line);
    border-radius: var(--hzpr-radius);
    background: #ffffff;
    text-align: center;
}

.hzpr-empty__title {
    margin: 0;
    color: var(--hzpr-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.hzpr-empty__hint {
    margin: 8px auto 16px;
    max-width: 46ch;
    color: var(--hzpr-muted);
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 560px) {
    /* On a phone the row is already stacked, so pinning the actions to the
       far end just leaves them floating away from the pills. */
    .hzpr-filters__actions {
        margin-inline-start: 0;
    }
}

/*
    The bar's menus are .hzp-select out of property-pages.css -- the same
    control the search bar uses, reused rather than copied so the two bars
    cannot drift apart.

    Its --hzp-* tokens are declared on .hzp-page, and this page's root is
    .hzpr-page, so they do not reach it: the border would fall back to
    currentColor and the corners to square. Mapped here from this sheet's own
    palette rather than left to chance, which is the same failure the missing
    .hzpr-idx__title rule above was.
*/
.hzpr-filters .hzp-select {
    --hzp-line-strong: var(--hzpr-line-strong);
    --hzp-ink: var(--hzpr-ink);
    --hzp-body: var(--hzpr-muted);
    --hzp-radius-sm: var(--hzpr-radius-sm);

    min-width: 176px;
}

.hzpr-filters .hzp-select:focus-within {
    border-color: var(--hzpr-accent);
}

/*
    "by <developer>", the line between a project's name and its location.

    It had no rule at all, so it inherited 14px while the name above it is
    13px and the location below it is 12px -- which made the least important
    line in the card the second largest thing in it, and inverted the order
    the other four lines are carefully in. Third of the three classes on
    these pages found named in the markup with nothing behind them, and the
    only one of the three that was actually wrong on screen.

    Sized and weighted to sit where it belongs in that descending order:
    price 14.5/700, name 13/600, this 12.5/500, location 12/400, pill 11/600.
    Top margin matches .hzpr-mini__loc so the stack keeps one rhythm.

    Coloured --hzpr-body rather than --hzpr-ink: the name above it is the
    ink one, and three steps down -- ink, body, muted -- is what separates
    the project from who is building it from where it is.
*/
.hzpr-mini__dev {
    margin: 3px 0 0;
    color: var(--hzpr-body);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
}

.hzpr-mini__price-label { margin: 0 0 4px; color: var(--hzpr-muted, #6b7280); font-size: 12px; line-height: 1.5; }

/* Hub pages also render these cards outside the project detail wrapper. */
.hzp-page[data-property-hub-kind="project"] .hzpr-mini {
    border: 1px solid #d6dae1;
    border-radius: 12px;
}
.hzp-page[data-property-hub-kind="project"] #property-hub-faq-title {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

/* Source introductions replace the former combined About/FAQ heading. */
.hzp-page[data-property-hub-kind="project"] [data-property-source-introduction] h2,
.hzp-page[data-property-hub-kind="project"] [data-property-source-introduction] p {
    font-size: 14px;
    line-height: 1.6;
}