/* ==========================================================================
   BTA33KAR - UI-P3-H3-I - homepage hero, search and advanced filters.

   Gate: UI-P3-H3 (read-only PASS) plus the focused single-submit prototype in
   UI-P3-H3-I. Every selector is rooted at `body#page-home`, which the theme
   emits on / and /ar and nowhere else.

   WHAT THIS SHEET FIXES, all measured before the change:
     - `.topsearch` was `position:absolute; top:50%; transform:translateY(-50%)`
       above 768px, so the search was OUT OF FLOW inside a `height:60vh` hero.
       The expanded filter panel could therefore never grow the document and
       spilled over Featured projects (28 039 px2 overlap at 1440).
     - `.advanced-search-content.active` was `max-height:400px; overflow-y:auto`,
       producing a nested scrollbar that hid 214px of fields and clipped 8
       labels at the panel boundary.
       style.css ALREADY ships the correct treatment below 768px
       (`position:static` + `height:auto!important`), which is why 375 and 768
       measured zero overlap while 1440 did not. This sheet applies that same
       treatment at every width.

   SINGLE SUBMIT. The form contains exactly ONE `button[type=submit]`. The Blade
   change moves that one node after the Advanced region so the tab order reads
   mode -> keyword -> location -> Advanced toggle -> Advanced fields -> Search.
   The grid below then paints that same node in the basic action row while
   Advanced is closed, and in flow after the last field while it is open. No
   second submit button is created.

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

@supports selector(:has(*)) {

/* --------------------------------------------------------------------------
   1. HERO - content-sized at every width, decorative band constrained

   The hero must grow with the search, but the decorative photograph must not
   stretch behind several screens of filters. The background therefore paints
   only a clamped top band while the element itself grows.
   `height: auto !important` is required: style.css sets `.home_banner{height:60vh}`
   and, below 768px, `height:auto!important` - an equally-important declaration
   that a normal one cannot beat.
   -------------------------------------------------------------------------- */
body#page-home .home_banner {
    height: auto !important;
    min-block-size: 60svh;
    background-size: 100% clamp(340px, 60svh, 560px);
    background-repeat: no-repeat;
    background-position: 50% 0;
    padding-block: var(--bta-space-12);
    position: relative;
}

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

/* Scrim over the band only, so the white search card and the H1 stay legible
   on the photograph without darkening the filter surface below it. */
body#page-home .home_banner::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: clamp(340px, 60svh, 560px);
    background: linear-gradient(180deg, rgba(25, 27, 23, .55) 0%, rgba(25, 27, 23, .35) 55%, rgba(25, 27, 23, .15) 100%);
    pointer-events: none;
}

/* The single most important line in this sheet: the search re-enters the flow. */
body#page-home .home_banner > .topsearch {
    position: static;
    transform: none;
    inset: auto;
    inline-size: min(100%, var(--bta-container-w));
    max-inline-size: 100%;
    margin-inline: auto;
    padding-inline: var(--bta-gutter);
    text-align: start;
    z-index: 1;
}

@media (min-width: 768px) {
    body#page-home .home_banner > .topsearch { --bta-gutter: var(--bta-space-6); }
}

@media (min-width: 1024px) {
    body#page-home .home_banner > .topsearch { --bta-gutter: var(--bta-space-8); }
}

body#page-home .home_banner h1 {
    font-size: var(--bta-fs-h1);
    line-height: var(--bta-lh-tight);
    font-weight: 700;
    margin-block: 0 var(--bta-space-6);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------------------
   2. SEARCH SHELL - a raised card, because it sits on a photograph

   The listing filter bar is a flat sunken surface on a page background; this
   one needs a border and a soft shadow to stay legible over the hero image.
   That is the one deliberate difference from the listing design language;
   target sizes, radii, borders and type all match it.
   -------------------------------------------------------------------------- */
body#page-home #frmhomesearch {
    background: var(--bta-surface-raised);
    border: 1px solid var(--bta-border-subtle);
    border-radius: var(--bta-radius-lg);
    box-shadow: var(--bta-shadow-md);
    padding: var(--bta-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--bta-space-3);
}

@media (min-width: 768px) {
    body#page-home #frmhomesearch { padding: var(--bta-space-5); }
}

/* --------------------------------------------------------------------------
   3. MODE SELECTOR - native radio group styled as a segmented control

   The three controls were `<a href>` with preventDefault: mutually exclusive
   selection inside one form, not navigation. The Blade now renders a real
   fieldset/legend/radio group; these rules only dress it. Keyboard behaviour,
   the single tab stop and the single checked value all come from the platform.
   -------------------------------------------------------------------------- */
body#page-home .bta-mode-group {
    border: 1px solid var(--bta-border-subtle);
    border-radius: var(--bta-radius-pill);
    padding: 4px;
    margin: 0;
    display: flex;
    gap: 4px;
    inline-size: fit-content;
    max-inline-size: 100%;
    flex-wrap: wrap;
}

body#page-home .bta-mode-group legend { padding: 0; margin: 0; }

body#page-home .bta-visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body#page-home .bta-mode-input {
    position: absolute;
    opacity: 0;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
}

body#page-home .bta-mode-label {
    min-block-size: 44px;
    min-inline-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--bta-space-4);
    border-radius: var(--bta-radius-pill);
    font-size: var(--bta-fs-body);
    font-weight: 600;
    color: var(--bta-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
    user-select: none;
}

body#page-home .bta-mode-input:checked + .bta-mode-label {
    background: var(--bta-brand);
    color: var(--bta-brand-contrast);
}

/* The ring follows the visually hidden input onto its label. */
body#page-home .bta-mode-input:focus-visible + .bta-mode-label {
    outline: var(--bta-focus-width) solid var(--bta-focus);
    outline-offset: var(--bta-focus-offset);
}

/* The three legacy anchors stay in the DOM as compatibility mirrors: app.js
   reads `#hometypesearch a.active` for the keyword-suggestion endpoint and for
   the delegated Advanced toggler. They are removed from sight, from the tab
   order and from the accessibility tree by the Blade, and hidden here. */
body#page-home #hometypesearch.bta-mode-mirror {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    padding: 0;
    border: 0;
}

/* DEPLOYMENT FALLBACK. During the window where this sheet is registered but the
   Blade has not been updated yet, `.bta-mode-mirror` is absent and the legacy
   anchors are still the live control. Give them the same 44px segmented
   treatment so that intermediate state is usable rather than merely surviving.
   These rules stop matching the moment the Blade adds the mirror class. */
body#page-home #hometypesearch:not(.bta-mode-mirror) {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    inline-size: fit-content;
    max-inline-size: 100%;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--bta-border-subtle);
    border-radius: var(--bta-radius-pill);
}

body#page-home #hometypesearch:not(.bta-mode-mirror) a {
    min-block-size: 44px;
    min-inline-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--bta-space-4);
    border-radius: var(--bta-radius-pill);
    font-size: var(--bta-fs-body);
    font-weight: 600;
    float: none;
    margin: 0;
    border: 0 !important;
    background-color: transparent !important;
    color: var(--bta-text-secondary);
}

body#page-home #hometypesearch:not(.bta-mode-mirror) a.active {
    background: var(--bta-brand) !important;
    color: var(--bta-brand-contrast);
}

/* --------------------------------------------------------------------------
   4. THE GRID THAT MOVES THE SINGLE SUBMIT

   Placement is by explicit grid row/column, so it does not depend on DOM order
   and the same rules work before and after the Blade reorder. Below 768px the
   layout is a single column and the action sits at the end of the block, which
   keeps the visual order identical to the tab order. At and above 768px the
   closed state paints the action in the basic row; the open state moves that
   same node below the last Advanced control.
   -------------------------------------------------------------------------- */
body#page-home #frmhomesearch .input-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bta-space-3);
    align-items: start;
}

@media (min-width: 768px) {
    body#page-home #frmhomesearch .input-group { grid-template-columns: 1fr 1fr auto; }
}

/* The two decorative icon slots are legacy input-group furniture and have no
   role once the controls carry their own borders. */
body#page-home #frmhomesearch .input-group > .input-group-prepend { display: none; }

body#page-home #frmhomesearch .keyword-input  { grid-column: 1; grid-row: 1; inline-size: auto; min-inline-size: 0; }
body#page-home #frmhomesearch .location-input { grid-column: 1; grid-row: 2; inline-size: auto; min-inline-size: 0; }
body#page-home #frmhomesearch .advanced-search { grid-column: 1; grid-row: 3; inline-size: 100%; margin: 0; padding: 0; text-align: start; }
body#page-home #frmhomesearch .search-button-wrapper { grid-column: 1; grid-row: 4; justify-self: stretch; }

@media (min-width: 768px) {
    body#page-home #frmhomesearch .location-input { grid-column: 2; grid-row: 1; }
    body#page-home #frmhomesearch .advanced-search { grid-column: 1 / -1; grid-row: 2; }
    body#page-home #frmhomesearch .search-button-wrapper { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* OPEN: the same node, one row lower, after the panel. */
body#page-home #frmhomesearch .input-group:has(.advanced-search-content.active) .search-button-wrapper {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: stretch;
}

@media (min-width: 768px) {
    body#page-home #frmhomesearch .input-group:has(.advanced-search-content.active) .search-button-wrapper {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: end;
    }
}

/* --------------------------------------------------------------------------
   5. BASIC CONTROLS - 44px, listing radius and border

   Three !important declarations are required here. Measured competitors, all
   from style.css:
     `.topsearch .form-control { height: 48px !important }`
     `.topsearch .form-control { border: none !important }`   (later rule wins)
     `.topsearch .btn, .topsearch .input-group-text { border-radius: 0 !important }`
     `.topsearch .btn { font-size: 15px !important }`
   -------------------------------------------------------------------------- */
body#page-home #frmhomesearch .keyword-input .form-control,
body#page-home #frmhomesearch .location-input .form-control {
    min-block-size: 44px;
    block-size: 44px !important;
    inline-size: 100%;
    border: 1px solid var(--bta-border-default) !important;
    border-radius: var(--bta-radius-md);
    font-size: var(--bta-fs-body);
    padding-inline: var(--bta-space-3);
}

body#page-home #frmhomesearch .search-button-wrapper .btn {
    min-block-size: 44px;
    min-inline-size: 120px;
    inline-size: 100%;
    border-radius: var(--bta-radius-md) !important;
    font-size: var(--bta-fs-body) !important;
    font-weight: 600;
    padding-inline: var(--bta-space-6);
}

@media (min-width: 768px) {
    body#page-home #frmhomesearch .search-button-wrapper .btn { inline-size: auto; }
}

/* --------------------------------------------------------------------------
   6. ADVANCED TOGGLE - a real control, not a 12.8px text link

   Before: 73.7 x 19.2px in EN and 43.1 x 19.2px in AR.
   -------------------------------------------------------------------------- */
body#page-home .advanced-search > button.advanced-search-toggler {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--bta-space-2);
    padding-inline: var(--bta-space-4);
    border: 1px solid var(--bta-border-default);
    border-radius: var(--bta-radius-md);
    background: var(--bta-surface-raised);
    color: var(--bta-brand);
    font-size: var(--bta-fs-body);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. EXPANDED PANEL - in flow, no clipping, no nested scroller

   `max-height` and `overflow` need !important against
   `.advanced-search .advanced-search-content.active { max-height: 400px;
   overflow-y: auto; padding-right: 20px }` and its two media-query overrides
   (300px below 768, 350px between 768 and 991).
   -------------------------------------------------------------------------- */
body#page-home .advanced-search .advanced-search-content {
    margin-block-start: var(--bta-space-4);
}

body#page-home .advanced-search .advanced-search-content.active {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    padding-block-start: var(--bta-space-4) !important;
    display: block;
    border-block-start: 1px solid var(--bta-border-subtle);
}

body#page-home .advanced-search .advanced-search-content .form-group { margin: 0; }

body#page-home .advanced-search .advanced-search-content .form-group > .row {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--bta-space-4);
    margin-inline: 0;
    margin-block: 0 var(--bta-space-4);
}

body#page-home .advanced-search .advanced-search-content .form-group > .row > [class*="col-"] {
    inline-size: auto;
    max-inline-size: none;
    flex: none;
    padding-inline: 0;
    margin-block: 0;
    min-inline-size: 0;
}

@media (min-width: 576px) {
    body#page-home .advanced-search .advanced-search-content .form-group > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    body#page-home .advanced-search .advanced-search-content .form-group > .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
    body#page-home .advanced-search .advanced-search-content .form-group > .row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

body#page-home .advanced-search .advanced-search-content .form-group label,
body#page-home .advanced-search .advanced-search-content .form-group .control-label {
    font-size: var(--bta-fs-meta);
    font-weight: 600;
    color: var(--bta-text-secondary);
    margin-block-end: var(--bta-space-2);
    display: block;
}

/* `height: 34px` in style.css is a normal declaration, but the shorthand
   `.topsearch .form-control{height:48px!important}` also reaches these fields,
   so the 44px contract needs !important. */
body#page-home .advanced-search .advanced-search-content .form-group .form-control,
body#page-home .advanced-search .advanced-search-content .form-group select,
body#page-home .advanced-search .advanced-search-content .form-group input[type="text"],
body#page-home .advanced-search .advanced-search-content .form-group input[type="number"],
body#page-home .advanced-search .advanced-search-content .form-group input[type="date"] {
    block-size: 44px !important;
    min-block-size: 44px;
    inline-size: 100%;
    border: 1px solid var(--bta-border-default);
    border-radius: var(--bta-radius-md);
    font-size: var(--bta-fs-body);
    padding-inline: var(--bta-space-3);
}

body#page-home .advanced-search .advanced-search-content .form-group .select--arrow .form-control {
    block-size: 44px !important;
}

/* Nested min/max pairs (price, land area, unit space, delivery dates). Without
   this the four date inputs collapse into one narrow column with the label
   words stacked vertically; with it they measure 269.5 x 44 and the 1440 panel
   drops from 699.3px to 439px. */
body#page-home .advanced-search .advanced-search-content .min-max-input > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bta-space-3);
    margin-inline: 0;
    margin-block: 0;
}

body#page-home .advanced-search .advanced-search-content .min-max-input > .row > [class*="col-"] {
    inline-size: auto;
    max-inline-size: none;
    flex: none;
    padding-inline: 0;
    min-inline-size: 0;
}

body#page-home .advanced-search .advanced-search-content .min-max-input + .min-max-input {
    margin-block-start: var(--bta-space-4);
}

body#page-home .advanced-search .advanced-search-content .form-group > .row.delivery-date-row {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    body#page-home .advanced-search .advanced-search-content .form-group > .row.delivery-date-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body#page-home .advanced-search .advanced-search-content .form-group > .row.delivery-date-row > .col-12 {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    body#page-home .advanced-search .advanced-search-content .form-group > .row.delivery-date-row > .col-12 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--bta-space-4);
    }

    body#page-home .advanced-search .advanced-search-content .form-group > .row.delivery-date-row > .col-12 > .min-max-input + .min-max-input {
        margin-block-start: 0;
    }
}

}