/* ==========================================================================
   BTA33KAR - UI-P3-H2 - homepage presentation layer.

   Gate: UI-P3-H1 preflight (2026-09-18) + the H2 prototype matrix.

   Every selector is rooted at `body#page-home`, which the theme already emits
   on `/` and `/ar` and nowhere else (`/properties` is `page-7`, `/projects` is
   `page-8`, a property detail is `property-<id>`, `/agents` and `/wishlist`
   carry no id). No homepage markup is changed and no shared card partial is
   touched: `real-estate.properties.item` has 14 callers, `projects.item` 7 and
   `agents.item` 2, so all of them stay byte-identical and every other surface
   is untouched by construction, not by luck.

   OUT OF SCOPE HERE, owned by UI-P3-H3: `.home_banner`, `#frmhomesearch` and
   `#hometypesearch`. Nothing below may match them - the section rules exclude
   the hero explicitly with `:not(.home_banner)`.

   Also deliberately absent: item counts and View All links (UI-P3-H4), image
   loading and derivatives (UI-P3-H5), and any heading-level change - a heading
   level is markup, not presentation.

   The whole sheet is wrapped in `@supports selector(:has(*))` for symmetry with
   the shipped bta-mobile-actions / bta-map-expand sheets: an engine without
   `:has()` keeps the legacy homepage rather than a half-applied one.

   Immutable path. A correction ships as css/bta-home-presentation-1.1.css.
   ========================================================================== */

@supports selector(:has(*)) {

/* --------------------------------------------------------------------------
   1. CONTAINER - adopt the approved listing ladder

   The homepage container was 95% / 85% / max-width 1140px with a flat 15px
   gutter; the approved listing container is --bta-container-w (1280px, 1440px
   at >=1600) with a 16/24/32px gutter ladder. The tokens are declared on :root
   in bta-visual.css, so they are reachable here without touching that file.
   The hero is excluded so P3-H3 keeps its geometry untouched.
   -------------------------------------------------------------------------- */
body#page-home .ck-content > *:not(.home_banner) .container-fluid.w90,
body#page-home .ck-content > .container-fluid.w90 {
    inline-size: 100%;
    max-inline-size: var(--bta-container-w);
    margin-inline: auto;
    padding-inline: var(--bta-gutter);
}

@media (min-width: 768px) {
    body#page-home .ck-content > *:not(.home_banner) .container-fluid.w90,
    body#page-home .ck-content > .container-fluid.w90 {
        --bta-gutter: var(--bta-space-6);
    }
}

@media (min-width: 1024px) {
    body#page-home .ck-content > *:not(.home_banner) .container-fluid.w90,
    body#page-home .ck-content > .container-fluid.w90 {
        --bta-gutter: var(--bta-space-8);
    }
}

@media (min-width: 1600px) {
    body#page-home .ck-content > *:not(.home_banner) .container-fluid.w90,
    body#page-home .ck-content > .container-fluid.w90 {
        --bta-container-w: var(--bta-container-max-wide);
    }
}

/* --------------------------------------------------------------------------
   2. SECTION RHYTHM - 48px below 768, 64px at and above

   Replaces the mixed padtop70 / padtop30 / inline bottom spacing. The nested
   wrappers are zeroed so the section block owns the rhythm exactly once.
   -------------------------------------------------------------------------- */
body#page-home .ck-content > *:not(.home_banner) {
    padding-block: var(--bta-space-12);
    margin-block: 0;
}

@media (min-width: 768px) {
    body#page-home .ck-content > *:not(.home_banner) {
        padding-block: var(--bta-space-16);
    }
}

body#page-home .ck-content > *:not(.home_banner) > .box_shadow {
    padding-block: 0;
    margin-block: 0;
}

body#page-home .ck-content .homehouse,
body#page-home .ck-content .projecthome,
body#page-home .ck-content .discover {
    padding-block: 0;
    margin-block: 0;
}

/* The News section carries an inline `padding-bottom: 80px` on its own section
   element. An inline declaration outranks every selector, so this is the ONE
   place the sheet needs !important, and only for that one property.
   Competing declaration: element style="margin-bottom: 0;padding-bottom: 80px"
   on `partials/short-codes/latest-news.blade.php` line 4. */
body#page-home .ck-content > .box_shadow:has(.discover) {
    padding-block-end: var(--bta-space-12) !important;
}

@media (min-width: 768px) {
    body#page-home .ck-content > .box_shadow:has(.discover) {
        padding-block-end: var(--bta-space-16) !important;
    }
}

/* --------------------------------------------------------------------------
   3. SECTION HEADINGS - the global fluid H2 token

   Heading text and heading elements are unchanged; the H2->H5 hierarchy jump
   recorded in P3-H1 is a markup defect and is deliberately NOT papered over.
   -------------------------------------------------------------------------- */
body#page-home .ck-content h2 {
    font-size: var(--bta-fs-h2);
    font-weight: 700;
    line-height: var(--bta-lh-tight);
    color: var(--bta-text-primary);
    margin-block: 0 var(--bta-space-2);
}

body#page-home .ck-content > *:not(.home_banner) .row > .col-12 > p {
    font-size: var(--bta-fs-body);
    color: var(--bta-text-secondary);
    margin-block: 0 var(--bta-space-6);
    max-inline-size: 72ch;
}

/* --------------------------------------------------------------------------
   4. GRIDS - CSS Grid instead of Bootstrap negative-margin geometry

   The four grids are addressed structurally so they cannot collide:
     projects  = .container-fluid.w90 > .projecthome:not(.homehouse) > .row.rowm10
     sale/rent/recent = .homehouse > .projecthome > .row.rowm10
     agents    = .row.rowm10.list-agency
     news      = .discover .blog-container > .row
   `:not(.homehouse)` keeps the agents wrapper (.homehouse.projecthome) out of
   the projects rule. The Bootstrap columns keep their classes; only their
   width, flex and padding are neutralised so the grid tracks own the layout.
   The news row is where the measured EN-768 28px overflow came from: a nested
   `.row { margin-inline: -15px }` inside a zero-padding .blog-container.
   -------------------------------------------------------------------------- */
body#page-home .container-fluid.w90 > .projecthome:not(.homehouse) > .row.rowm10,
body#page-home .homehouse > .projecthome > .row.rowm10,
body#page-home .row.rowm10.list-agency,
body#page-home .discover .blog-container > .row {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--bta-space-6);
    margin-inline: 0;
    align-items: stretch;
}

body#page-home .container-fluid.w90 > .projecthome:not(.homehouse) > .row.rowm10 > [class*="col-"],
body#page-home .homehouse > .projecthome > .row.rowm10 > [class*="col-"],
body#page-home .row.rowm10.list-agency > [class*="col-"],
body#page-home .discover .blog-container > .row > [class*="col-"] {
    inline-size: auto;
    max-inline-size: none;
    flex: none;
    padding-inline: 0;
    margin-inline: 0;
}

/* Agents are 2-up from the smallest width: an avatar card needs far less
   inline space than a property card. */
body#page-home .row.rowm10.list-agency {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 576px) {
    body#page-home .container-fluid.w90 > .projecthome:not(.homehouse) > .row.rowm10,
    body#page-home .homehouse > .projecthome > .row.rowm10,
    body#page-home .discover .blog-container > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    body#page-home .container-fluid.w90 > .projecthome:not(.homehouse) > .row.rowm10 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body#page-home .row.rowm10.list-agency {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    body#page-home .homehouse > .projecthome > .row.rowm10 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* News goes 2 -> 4 with no 3-column tier on purpose: the section holds four
   items, so a 3-column tier would strand a single card on a second row. */
@media (min-width: 1440px) {
    body#page-home .homehouse > .projecthome > .row.rowm10,
    body#page-home .discover .blog-container > .row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   5. PROPERTY AND PROJECT CARD

   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. `.blii { display: contents }` promotes those children to
   grid items of .item, which is what lets the PRICE leave the image and sit in
   the card body with no markup change - the same technique already shipped and
   validated on the listing pages in bta-cards.css.

   No !important is needed against the legacy `!important` offsets:
   `.blii .img{...top:0!important...}` still applies, but on a position:relative
   box `top:0;left:0` is a zero offset; and `.linkdetail{...!important}` offsets
   are simply ignored once the link is position:static.
   -------------------------------------------------------------------------- */
body#page-home .ck-content .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);
    box-shadow: none;
    overflow: hidden;
    block-size: 100%;
    transition: border-color var(--bta-motion-fast) var(--bta-ease),
                box-shadow var(--bta-motion-fast) var(--bta-ease);
}

body#page-home .ck-content .item > .blii {
    display: contents;
}

body#page-home .ck-content .item .img,
body#page-home .ck-content .item > .blii > a.linkdetail,
body#page-home .ck-content .item .media-count-wrapper,
body#page-home .ck-content .item .status {
    grid-area: 1 / 1;
}

body#page-home .ck-content .item .img {
    position: relative;
    inset: auto;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--bta-surface-sunken);
}

body#page-home .ck-content .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. */
body#page-home .ck-content .item > .blii > a.linkdetail {
    position: static;
    z-index: 2;
}

body#page-home .ck-content .item .media-count-wrapper {
    position: static;
    justify-self: start;
    align-self: start;
    margin: var(--bta-space-2);
    z-index: 3;
}

body#page-home .ck-content .item .status {
    position: static;
    justify-self: end;
    align-self: start;
    margin: var(--bta-space-2);
    z-index: 3;
}

body#page-home .ck-content .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);
}

/* Price (property) and category chip (project): out of the image, into the
   body. The legacy ::before/::after arrow decorations belonged to the coloured
   ribbon and are removed with the ribbon. */
body#page-home .ck-content .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);
}

body#page-home .ck-content .item .item-price-wrap > li {
    position: static;
    margin: 0;
    padding: 0;
    background: none;
    display: block;
    float: none;
    white-space: normal;
}

body#page-home .ck-content .item .item-price-wrap > li::before,
body#page-home .ck-content .item .item-price-wrap > li::after {
    content: none;
}

body#page-home .ck-content .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);
}

body#page-home .ck-content .item .item-price span {
    color: inherit;
}

body#page-home .ck-content .item .h-type {
    order: 2;
    font-size: var(--bta-fs-meta);
    font-weight: 500;
    color: var(--bta-text-muted);
}

body#page-home .ck-content .item .h-type span {
    color: inherit;
    max-inline-size: none;
}

body#page-home .ck-content .item .description {
    grid-area: 3 / 1;
    position: relative;
    background: none;
    padding: var(--bta-space-2) var(--bta-space-4) var(--bta-space-4);
}

body#page-home .ck-content .item .description h5,
body#page-home .ck-content .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;
}

body#page-home .ck-content .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;
}

body#page-home .ck-content .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);
}

/* The legacy theme puts margin-inline-end on each meta span; the flex gap owns
   the spacing here, so the row cannot overflow the card body. */
body#page-home .ck-content .item .threemt > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    margin-inline: 0;
}

/* Favourite: 44x44, all wishlist data hooks and hrefs untouched. */
body#page-home .ck-content .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. AGENT CARD
   -------------------------------------------------------------------------- */
body#page-home .list-agency .agents-grid {
    block-size: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bta-surface-raised);
    border: 1px solid var(--bta-border-subtle);
    border-radius: var(--bta-radius-lg);
    box-shadow: none;
    overflow: hidden;
    margin: 0;
    transition: border-color var(--bta-motion-fast) var(--bta-ease),
                box-shadow var(--bta-motion-fast) var(--bta-ease);
}

body#page-home .list-agency .agents-grid .fr-grid-thumb {
    inline-size: 100%;
    margin: 0;
}

body#page-home .list-agency .agents-grid .fr-grid-thumb a,
body#page-home .list-agency .agents-grid .fr-grid-thumb > span {
    display: block;
}

body#page-home .list-agency .agents-grid .fr-grid-thumb img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 0;
    margin: 0;
}

body#page-home .list-agency .agents-grid .fr-grid-detail {
    padding: var(--bta-space-4) var(--bta-space-4) 0;
}

body#page-home .list-agency .agents-grid .fr-can-name {
    font-size: var(--bta-fs-h3);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--bta-text-primary);
}

body#page-home .list-agency .agents-grid .fr-can-name a {
    color: inherit;
}

body#page-home .list-agency .agents-grid .fr-grid-info {
    padding: var(--bta-space-2) var(--bta-space-4) 0;
    font-size: var(--bta-fs-meta);
    color: var(--bta-text-secondary);
}

body#page-home .list-agency .agents-grid .fr-grid-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body#page-home .list-agency .agents-grid .fr-grid-footer {
    margin-block-start: auto;
    padding: var(--bta-space-3) var(--bta-space-4) var(--bta-space-4);
    display: flex;
    align-items: center;
    gap: var(--bta-space-3);
    flex-wrap: wrap;
    border-block-start: 1px solid var(--bta-border-subtle);
}

body#page-home .list-agency .agents-grid .fr-position {
    font-size: var(--bta-fs-meta);
    color: var(--bta-text-secondary);
}

body#page-home .list-agency .agents-grid .fr-grid-footer-flex-right {
    margin-inline-start: auto;
}

body#page-home .list-agency .agents-grid .prt-view {
    min-block-size: 44px;
    padding-inline: var(--bta-space-4);
}

/* --------------------------------------------------------------------------
   7. NEWS CARD

   The card surface is .grid-shadow, not .hourseitem: style.css pins
   `.grid-in .hourseitem { border-radius: 0 !important }`, so styling the outer
   wrapper avoids an !important fight for nothing. .grid-shadow's overflow
   clips the media corners to the card radius.
   -------------------------------------------------------------------------- */
body#page-home .discover .container-grid .grid-in {
    block-size: 100%;
    margin: 0;
}

body#page-home .discover .container-grid .grid-shadow {
    block-size: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bta-surface-raised);
    border: 1px solid var(--bta-border-subtle);
    border-radius: var(--bta-radius-lg);
    box-shadow: none;
    overflow: hidden;
    transition: border-color var(--bta-motion-fast) var(--bta-ease),
                box-shadow var(--bta-motion-fast) var(--bta-ease);
}

body#page-home .discover .container-grid .hourseitem {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
}

body#page-home .discover .container-grid .hourseitem > .blii {
    display: contents;
}

body#page-home .discover .container-grid .hourseitem .img,
body#page-home .discover .container-grid .hourseitem > .blii > a.linkdetail {
    grid-area: 1 / 1;
}

body#page-home .discover .container-grid .hourseitem .img {
    position: relative;
    inset: auto;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--bta-surface-sunken);
}

body#page-home .discover .container-grid .hourseitem img.thumb {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

body#page-home .discover .container-grid .hourseitem > .blii > a.linkdetail {
    position: static;
    z-index: 2;
}

body#page-home .discover .grid-h {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--bta-space-4);
    gap: var(--bta-space-2);
}

body#page-home .discover .blog-title h3 {
    font-size: var(--bta-fs-h3);
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: var(--bta-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

body#page-home .discover .blog-title > a {
    color: inherit;
}

body#page-home .discover .post-meta {
    font-size: var(--bta-fs-meta);
    color: var(--bta-text-secondary);
    margin: 0;
}

body#page-home .discover .post-meta p {
    margin: 0;
}

body#page-home .discover .blog-excerpt {
    margin-block-start: auto;
}

/* P3-H1 measured the legacy excerpt colour rgb(135,135,152) on white at
   3.53:1, below the 4.5:1 AA threshold for 14px text. --bta-text-secondary
   measures 9.60:1 in the same place. */
body#page-home .discover .blog-excerpt p {
    font-size: var(--bta-fs-meta);
    line-height: var(--bta-lh-body);
    color: var(--bta-text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. HOVER, FOCUS AND MOTION - border and shadow only, never movement
   -------------------------------------------------------------------------- */
@media (hover: hover) and (min-width: 1024px) {
    body#page-home .ck-content .item:hover,
    body#page-home .list-agency .agents-grid:hover,
    body#page-home .discover .container-grid .grid-shadow:hover {
        border-color: var(--bta-border-default);
        box-shadow: var(--bta-shadow-md);
    }
}

/* The card surfaces set overflow:hidden so the radius can clip the media.
   `a.linkdetail` is the media-cell link and is flush with the card's top and
   both inline edges, so the shared outward ring is clipped on three sides -
   measured 4px lost per side on the homepage, and the same is measurable on the
   shipped listing today. The ring is therefore painted INWARD for that one
   element, and its white halo is switched to an inset shadow so it stays inside
   the clip box too.

   !important is required here and is the only other place the sheet uses it.
   Competing declarations, both from bta-tokens.css v1.7:
     `a:focus-visible, ... { outline-offset: 2px !important }`
     `a:focus-visible, ... { box-shadow: 0 0 0 2px #ffffff !important }`
   Every other focusable control on the homepage clears the card edge and keeps
   the shared outward ring untouched. */
body#page-home .ck-content .item > .blii > a.linkdetail:focus-visible,
body#page-home .discover .container-grid .hourseitem > .blii > a.linkdetail:focus-visible {
    outline-offset: calc(-1 * var(--bta-focus-width)) !important;
    box-shadow: inset 0 0 0 2px #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
    body#page-home .ck-content .item,
    body#page-home .list-agency .agents-grid,
    body#page-home .discover .container-grid .grid-shadow {
        transition: none;
    }
}

}