/* ==========================================================================
   BTA33KAR — bta-cards.css  v1.3
   P2C SLICE B: property + project card system, projects grid, D5 closure.

   Loads AFTER bta-visual.css (declared dependency), which is frozen at v1.8.

   SCOPE DISCIPLINE — the single most important constraint in this slice.
   `real-estate.properties.item` is included in ELEVEN places: the listing grid,
   the homepage shortcodes (featured-properties, properties-for-sale,
   properties-for-rent, recently-viewed-properties), property-detail related
   listings, project-detail available units, wishlist, agent and category pages.
   `real-estate.projects.item` is likewise shared with featured-projects and
   wishlist. So NEITHER card partial is edited, and every rule below is scoped to
   #properties-list or #projects-list. The homepage and all detail contexts are
   therefore untouched by construction, not by luck.

   The legacy card builds its media with a padding-top aspect hack on .blii and
   absolutely positions .img / .linkdetail / .status / .media-count / the price
   strip inside it. Rather than fight that, .blii is made `display: contents`
   inside the listing scope, which promotes those children to grid items of
   .item — letting the media overlays share one grid cell and letting the PRICE
   move out of the image and into the card body with no markup change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PROPERTY CARD — surface + structure
   -------------------------------------------------------------------------- */
#properties-list .data-listing .item {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    background-color: var(--bta-surface-raised);
    border: 1px solid var(--bta-border-subtle);
    border-radius: var(--bta-radius-lg);
    overflow: hidden;
    block-size: 100%;
    transition: border-color var(--bta-motion-fast) var(--bta-ease),
                box-shadow var(--bta-motion-fast) var(--bta-ease);
}

#properties-list .data-listing .item > .blii {
    display: contents;
}

/* --------------------------------------------------------------------------
   2. PROPERTY MEDIA — 4:3, overlays share one grid cell
   -------------------------------------------------------------------------- */
#properties-list .data-listing .item .img,
#properties-list .data-listing .item > .blii > a.linkdetail,
#properties-list .data-listing .item .media-count-wrapper,
#properties-list .data-listing .item .status {
    grid-area: 1 / 1;
}

#properties-list .data-listing .item .img {
    position: relative;
    inset: auto;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--bta-surface-sunken);
}

#properties-list .data-listing .item img.thumb {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* The full-cover link becomes a grid item, so it covers exactly the media cell
   instead of the whole card — the favourite and title links stay clickable. */
#properties-list .data-listing .item > .blii > a.linkdetail {
    position: static;
    z-index: 2;
}

#properties-list .data-listing .item .media-count-wrapper {
    position: static;
    justify-self: start;
    align-self: start;
    margin: var(--bta-space-2);
    z-index: 3;
}

#properties-list .data-listing .item .status {
    position: static;
    justify-self: end;
    align-self: start;
    margin: var(--bta-space-2);
    z-index: 3;
}

#properties-list .data-listing .item .status .status-label {
    font-size: var(--bta-fs-caption);
    font-weight: 600;
    border-radius: var(--bta-radius-sm);
    padding: 2px var(--bta-space-2);
}

/* --------------------------------------------------------------------------
   3. PRICE — moved off the image into the card body
   -------------------------------------------------------------------------- */
#properties-list .data-listing .item .item-price-wrap {
    grid-area: 2 / 1;
    position: static;
    inline-size: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--bta-space-2);
    margin: 0;
    padding: var(--bta-space-4) var(--bta-space-4) 0;
    list-style: none;
    color: var(--bta-text-primary);
}

#properties-list .data-listing .item .item-price-wrap > li {
    position: static;
    margin: 0;
    padding: 0;
    background: none;
    display: block;
}

#properties-list .data-listing .item .item-price {
    order: 1;
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bta-text-primary);
}

#properties-list .data-listing .item .item-price span {
    color: inherit;
}

#properties-list .data-listing .item .h-type {
    order: 2;
    font-size: var(--bta-fs-meta);
    font-weight: 500;
    color: var(--bta-text-muted);
}

#properties-list .data-listing .item .h-type span {
    color: inherit;
}

/* --------------------------------------------------------------------------
   4. BODY — title, location, meta
   -------------------------------------------------------------------------- */
#properties-list .data-listing .item .description {
    grid-area: 3 / 1;
    position: relative;
    background: none;
    padding: var(--bta-space-2) var(--bta-space-4) var(--bta-space-4);
}

#properties-list .data-listing .item .description h5 {
    font-size: var(--bta-fs-h3);
    font-weight: 600;
    line-height: 1.35;
    color: var(--bta-text-primary);
    margin-block: 0 var(--bta-space-2);
    padding-inline-end: var(--bta-space-10);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

#properties-list .data-listing .item .dia_chi {
    font-size: var(--bta-fs-meta);
    color: var(--bta-text-secondary);
    margin-block: 0 var(--bta-space-3);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#properties-list .data-listing .item .threemt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bta-space-3);
    font-size: var(--bta-fs-meta);
    font-weight: 500;
    color: var(--bta-text-secondary);
    margin: 0;
    padding-block-start: var(--bta-space-3);
    border-block-start: 1px solid var(--bta-border-subtle);
}

#properties-list .data-listing .item .threemt > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    /* The legacy theme puts margin-inline-end: 25.19px on each span; with the
       flex gap above that pushed the row to 253.8px inside a 252px card body at
       1440 and wrapped the area onto a second line. The gap owns the spacing. */
    margin-inline: 0;
}

/* --------------------------------------------------------------------------
   5. FAVOURITE — 44x44 target, all wishlist hooks untouched
   -------------------------------------------------------------------------- */
#properties-list .data-listing .item .add-to-wishlist,
#projects-list .data-listing .item .add-to-wishlist {
    position: absolute;
    inset-block-start: var(--bta-space-2);
    inset-inline-end: var(--bta-space-2);
    inset-inline-start: auto;
    inline-size: 44px;
    block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--bta-radius-pill);
    background-color: var(--bta-surface-raised);
    border: 1px solid var(--bta-border-subtle);
    z-index: 4;
}

/* --------------------------------------------------------------------------
   6. DESKTOP HOVER — border/shadow only, no movement
   -------------------------------------------------------------------------- */
@media (hover: hover) and (min-width: 1024px) {
    #properties-list .data-listing .item:hover,
    #projects-list .data-listing .item:hover {
        border-color: var(--bta-border-default);
        box-shadow: var(--bta-shadow-md);
    }
}

/* --------------------------------------------------------------------------
   7. PROPERTY GRID — P2B ladder preserved, equal-height tracks
   -------------------------------------------------------------------------- */
#properties-list .data-listing > .row {
    align-items: stretch;
}

/* --------------------------------------------------------------------------
   8. RESULTS HEADING
   -------------------------------------------------------------------------- */
.bta-results-heading {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   9. PROJECTS GRID — D5 closure, structural
   The legacy markup is .data-listing > .row (margin-inline: -15px) with
   .col-12.col-sm-6.col-md-4.col-lg-3.colm10 children. Those negative margins are
   never compensated on /projects, so the row measured viewport + 15px at every
   width. Replacing the row with a grid removes the negative margins at source —
   no overflow:hidden anywhere.
   -------------------------------------------------------------------------- */
#projects-list .data-listing > .row {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--bta-space-4);
    margin-inline: 0;
    align-items: stretch;
}

#projects-list .data-listing > .row > [class*="col-"] {
    flex: none;
    inline-size: auto;
    max-inline-size: none;
    padding-inline: 0 !important;
    min-inline-size: 0;
}

@media (min-width: 768px) {
    #projects-list .data-listing > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--bta-space-5);
    }
}
@media (min-width: 1024px) {
    #projects-list .data-listing > .row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--bta-space-6);
    }
}
@media (min-width: 1440px) {
    #projects-list .data-listing > .row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Projects page container ladder, matching the properties listing. */
.container-fluid.w90:has(#projects-list) {
    max-width: var(--bta-container-w);
    padding-inline: var(--bta-gutter);
    margin-inline: auto;
}
@media (min-width: 768px) {
    .container-fluid.w90:has(#projects-list) { --bta-gutter: var(--bta-space-6); }
}
@media (min-width: 1024px) {
    .container-fluid.w90:has(#projects-list) { --bta-gutter: var(--bta-space-8); }
}
@media (min-width: 1600px) {
    .container-fluid.w90:has(#projects-list) { --bta-container-w: var(--bta-container-max-wide); }
}

/* --------------------------------------------------------------------------
   10. PROJECT CARD — sibling of the property card
   -------------------------------------------------------------------------- */
#projects-list .data-listing .item {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    background-color: var(--bta-surface-raised);
    border: 1px solid var(--bta-border-subtle);
    border-radius: var(--bta-radius-lg);
    overflow: hidden;
    block-size: 100%;
    transition: border-color var(--bta-motion-fast) var(--bta-ease),
                box-shadow var(--bta-motion-fast) var(--bta-ease);
}

#projects-list .data-listing .item > .blii {
    display: contents;
}

#projects-list .data-listing .item .img,
#projects-list .data-listing .item > .blii > a.linkdetail {
    grid-area: 1 / 1;
}

#projects-list .data-listing .item .img {
    position: relative;
    inset: auto;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--bta-surface-sunken);
}

#projects-list .data-listing .item img.thumb {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

#projects-list .data-listing .item > .blii > a.linkdetail {
    position: static;
    z-index: 2;
}

/* Project category chip moves off the image, mirroring the property price. */
#projects-list .data-listing .item .item-price-wrap {
    grid-area: 2 / 1;
    position: static;
    inline-size: auto;
    display: flex;
    gap: var(--bta-space-2);
    margin: 0;
    padding: var(--bta-space-4) var(--bta-space-4) 0;
    list-style: none;
}

#projects-list .data-listing .item .item-price-wrap > li {
    position: static;
    margin: 0;
    padding: 0;
    background: none;
    font-size: var(--bta-fs-meta);
    font-weight: 500;
    color: var(--bta-text-muted);
}

#projects-list .data-listing .item .item-price-wrap > li span {
    color: inherit;
}

#projects-list .data-listing .item .description {
    grid-area: 3 / 1;
    position: relative;
    background: none;
    padding: var(--bta-space-2) var(--bta-space-4) var(--bta-space-4);
}

#projects-list .data-listing .item .description h3 {
    font-size: var(--bta-fs-h3);
    font-weight: 600;
    line-height: 1.35;
    color: var(--bta-text-primary);
    margin-block: 0 var(--bta-space-2);
    padding-inline-end: var(--bta-space-10);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

#projects-list .data-listing .item .dia_chi {
    font-size: var(--bta-fs-meta);
    color: var(--bta-text-secondary);
    margin-block: 0 var(--bta-space-2);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Project price range — the card's strongest body element. */
#projects-list .data-listing .item .description .bold500 {
    font-size: var(--bta-fs-body);
    font-weight: 700;
    color: var(--bta-text-primary);
    margin: 0;
    padding-block-start: var(--bta-space-3);
    border-block-start: 1px solid var(--bta-border-subtle);
}

/* --------------------------------------------------------------------------
   11. RTL — logical properties carry almost everything
   -------------------------------------------------------------------------- */
[dir="rtl"] #properties-list .data-listing .item .threemt,
[dir="rtl"] #projects-list .data-listing .item .item-price-wrap {
    text-align: start;
}

/* --------------------------------------------------------------------------
   12. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #properties-list .data-listing .item,
    #projects-list .data-listing .item {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   13. D5 — THE ACTUAL OFFENDING ROW
   Measured: the element overflowing /projects is NOT the grid row inside
   #projects-list. It is a bare `.row` one level up —
   MAIN#main-content > .padtop50 > .row > .col-sm-12 — carrying Bootstrap's
   margin-inline: -15px with a .col-sm-12 whose padding computes to 0/0, so the
   negative margin is never compensated and the row measures viewport + 15px at
   every width (left -15, right 1440 in a 1425px client).

   Neutralising that margin removes the overflow at source. Scoped with :has()
   so only the projects page is affected — no body/html clipping, no
   overflow:hidden anywhere.
   -------------------------------------------------------------------------- */
main#main-content .padtop50 > .row:has(#projects-list) {
    margin-inline: 0;
}

/* --------------------------------------------------------------------------
   v1.3 — KEYBOARD FOCUS RING CONTAINMENT.

   The card sets `overflow: hidden` so the media corners follow the card radius.
   `a.linkdetail` is the media-cell link and is flush with the card's top, inline
   -start and inline-end edges, so the standard OUTWARD ring from bta-tokens.css
   (3px at +2px offset) is clipped on exactly those three sides — measured at 5px
   lost per side, leaving only the bottom edge of the ring visible.

   Painting the ring INWARD keeps the whole indicator inside the clip box, so it
   stays fully visible without removing `overflow: hidden` (which the radius
   needs) and without touching the frozen bta-visual.css ring definition.
   Only this one element needs it: the favourite control clears the edge by 3px
   and the title link by 11px, both already unclipped.
   -------------------------------------------------------------------------- */
#properties-list .data-listing .item a.linkdetail:focus-visible,
#projects-list .data-listing .item a.linkdetail:focus-visible {
    outline: var(--bta-focus-width) solid var(--bta-focus);
    outline-offset: calc(-1 * var(--bta-focus-width));
}