/*
 * Responsive fixes for tablet and phone widths only.
 * Rules sit inside max-width media queries (<= 991.98px), except the clearly marked desktop
 * desktop blocks below (MORE/INSIGHTS right-edge fix, ABOUT/SERVICES dropdown width, home hero height).
 * Loaded last in layouts/welcome.blade.php.
 */

/* ---------- Desktop header dropdowns (>= 992px) — ONLY the MORE and INSIGHTS menus ----------
 * Both menus were centred on their trigger (translateX(-50%)), so the 900px MORE menu ran
 * 4–100px past the right edge at 992–1440px, and the INSIGHTS panel ran 1–2px past it at 992–1024px.
 * Fix: anchor the menu to the right edge of the nav list (ul.souq-nav) instead of centring it on
 * the trigger. The nav list has the same top/bottom as the trigger, so the menu opens at the same height
 * and the hover bridge still works. Nothing else in the header is touched.
 */
@media (min-width: 992px) {
    .souq-nav:has(> .nav-mega-item > .lux-mega-menu.compact) {
        position: relative;
    }

    .souq-nav > .nav-mega-item:has(> .lux-mega-menu.compact) {
        position: static;
    }

    .souq-nav > .nav-mega-item > .lux-mega-menu.compact {
        left: auto;
        right: 0;
        max-width: calc(100vw - 32px);
        transform: translateY(8px);
    }

    .souq-nav > .nav-mega-item:hover > .lux-mega-menu.compact {
        transform: translateY(0);
    }
}

/* ---------- Desktop ABOUT and SERVICES dropdowns (>= 992px) ----------
 * Single-column lists that reuse the BUY/RENT dropdown styles (.compact-buy-menu), narrowed to fit.
 * At 250px, centred on the trigger, they stay inside the viewport down to 992px.
 */
@media (min-width: 992px) {
    .souq-nav > .nav-mega-item > .compact-buy-menu.nav-simple-menu {
        width: 250px;
        padding: 14px 16px;
    }

    .compact-buy-menu.nav-simple-menu .lux-buy-inner {
        padding: 6px;
    }

    .compact-buy-menu.nav-simple-menu .lux-buy-group ul li:last-child {
        margin-bottom: 0;
    }
}

/* ---------- Desktop header height (>= 992px) ----------
 * The main nav bar had uneven space (links sat low, extra room under them). It now has a fixed
 * 60px height with the logo, links and buttons centred vertically, so the header is 36px top bar
 * + 60px = 96px. Keep --a1-desktop-header-height in step if this changes.
 */
@media (min-width: 992px) {
    :root {
        --a1-desktop-header-height: 96px;
    }

    .souq-header .mainnav,
    .souq-header--home .mainnav {
        height: 60px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;
        /* Visible edge so the gap above the home hero doesn't read as extra space inside the menu bar. */
        border-bottom: 1px solid #ececec;
    }

    .souq-header .mainnav > .container {
        width: 100%;
    }

    .souq-header .mainnav-row {
        flex-wrap: nowrap;
        align-items: center;
    }

    .souq-header .mainnav-logo-col,
    .souq-header .mainnav-actions-col {
        display: flex;
        align-items: center;
    }

    .souq-header .mainnav-logo-col {
        flex: 0 0 auto;
        max-width: none;
    }

    .souq-header .mainnav-actions-col {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
    }

    .souq-header .souq-logo {
        display: block;
        line-height: 0;
    }

    .souq-header .souq-logo .desktoplogo {
        height: 40px;
        width: auto;
        max-width: none;
    }

    .souq-header .souq-nav {
        margin: 0;
        white-space: nowrap;
    }

    .souq-header .souq-nav > li > a {
        padding-top: 4px;
        padding-bottom: 2px;
    }

    .souq-header a.headerlistproperty {
        white-space: nowrap;
    }
}

/* Small laptops: less space between menu links so the logo, menu and "List Your Property" fit on one line. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .souq-header .souq-nav > li > a {
        padding-right: 16px;
    }
}

@media (min-width: 992px) and (max-width: 1099.98px) {
    .souq-header .souq-nav > li > a {
        padding-right: 9px;
        font-size: 13px;
    }

    .souq-header .souq-logo .desktoplogo {
        height: 34px;
    }
}

/* ---------- Desktop home hero (>= 992px) ----------
 * The hero used to slide up under the header (negative margin) and fill 100vh, so the developer
 * logo strip started below the fold. Now it starts right under the header line (no gap) and is sized so
 * header (--a1-desktop-header-height) + gap + hero + logo strip (71px) fill exactly one screen.
 */
@media (min-width: 992px) {
    :root {
        --a1-home-hero-gap: 0px;
        --a1-home-partners-height: 71px;
    }

    .home-hero-media {
        margin-top: var(--a1-home-hero-gap);
    }

    .home-hero-media .banner-parallax {
        height: calc(100vh - var(--a1-desktop-header-height) - var(--a1-home-hero-gap) - var(--a1-home-partners-height)) !important;
        min-height: 440px;
    }

    .home-hero-media .banner-caption-bottom {
        top: 0;
    }
}

/* About Us "Management" section is the target of the header's About > Management link;
   keep its heading clear of the sticky header when jumped to. */
#management {
    scroll-margin-top: 120px;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* The nav sits further left on small desktops, so narrow the 4-column MORE menu to fit. */
    .souq-nav > .nav-mega-item > .lux-mega-menu.compact {
        width: 800px;
    }

    .souq-nav:has(> .nav-mega-item > .compact-buy-menu.insights-menu) {
        position: relative;
    }

    .souq-nav > .nav-mega-item:has(> .compact-buy-menu.insights-menu) {
        position: static;
    }

    .souq-nav > .nav-mega-item > .compact-buy-menu.insights-menu {
        left: auto;
        right: 0;
        transform: translateY(8px);
    }

    .souq-nav > .nav-mega-item:hover > .compact-buy-menu.insights-menu {
        transform: translateY(0);
    }
}

/* ---------- Tablet portrait (768px - 991.98px) ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* Home "Featured Projects": the 20px flex gap pushed the col-md-6 cards onto one column each,
       leaving half the row empty. Keep the vertical gap, drop the horizontal one. */
    .row.home-scroll-stagger {
        column-gap: 0;
    }

    /* Site-wide Book a Day CTA: the 4-in-a-row field layout was squeezed into a ~300px panel,
       truncating every placeholder. Widen the panel and use the 2-column phone layout. */
    .home-bad-section .row > [class*="col-"]:first-child {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .home-bad-section__fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 6px;
    }

    .home-bad-section__field:nth-child(1),
    .home-bad-section__field:nth-child(2) {
        grid-column: auto;
        grid-row: auto;
    }

    .home-bad-section__field--phone {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .home-bad-section__actions {
        grid-column: 1 / -1;
        grid-row: auto;
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    .home-bad-section__field--submit {
        flex: 1;
    }

    .home-bad-section__field--learn-more {
        margin-left: auto;
    }
}

/* ---------- Tablet and below (<= 991.98px) ---------- */
@media (max-width: 991.98px) {

    /* The fixed header (z-index 99980) sat on top of the Book a Day modal (10050) and Bootstrap
       modals such as Careers "Apply" (1050), hiding their title and close button on phones/tablets.
       While a modal is open, drop the header beneath it. */
    body.book-a-day-modal-open .souq-header,
    body.modal-open .souq-header {
        z-index: 1030;
    }

    /* Home hero "More filters" bottom sheet (a <= 991px feature): the card's backdrop-filter made the
       card the containing block for the fixed-position sheet, so it opened inside the card, partly
       above the screen, instead of sliding up from the bottom. Drop the blur only while it is open. */
    .home-hero-filter.is-more-open .home-hero-filter__card {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* ...and the hero's own stacking context (z-index: 1) kept the sheet under the developer-logo
       strip below it. Lift the hero only while the sheet is open (still under the fixed header). */
    .home-hero-media:has(.home-hero-filter.is-more-open) {
        z-index: 1000;
    }

    /* Property detail breadcrumb now sits inside a .container (property-details.blade.php),
       so the old tablet padding patch here was removed. */

    /* Property carousels (area detail listings, etc.): main.js injects the "next" arrow with an
       inline `right: -65px !important`, which pushed it outside the container and widened the
       whole page by ~50px on every phone/tablet width (sideways scroll + zoomed-out layout).
       Inline !important can't be overridden, so pull the arrow back in with a matching margin. */
    .owl-nav .souq-props-carousel-right-arrow[style*="right: -65px"] {
        margin-right: 65px;
    }

    .souq-community-tabs .owl-nav .souq-props-carousel-right-arrow {
        right: 0 !important;
    }

    /* Property cards in carousels (home featured, similar, area listings): the absolutely
       positioned WhatsApp / View buttons covered the beds/baths/size line. Put them on their own row. */
    .propitembody .body-right {
        position: static;
        display: flex;
        justify-content: flex-end;
        margin-top: 8px;
    }
}

/* ---------- Tablet portrait and below (<= 767.98px) ---------- */
@media (max-width: 767.98px) {

    /* Home hero, first screen. The caption box was positioned with `top: calc(100vh - 50%)`, so on
       shorter phones (e.g. 375x667) its content grew upwards behind the fixed header and the heading
       was hidden. Start the caption right below the header and centre the content in the space
       above the scroll indicator. */
    .home-hero-media .banner-caption-bottom {
        /* hero is pulled up under the header by the offset, so add it twice: pull-up + header height */
        top: calc(var(--a1-home-header-offset, 72px) * 2);
        bottom: 0;
        padding: 0;
    }

    .home-hero-media .banner-caption-bottom .container.hero-caption-shell {
        height: 100%;
        justify-content: center;
        padding-top: 12px;
        padding-bottom: 72px; /* room for the scroll indicator */
    }

    .home-hero-media .banner-caption-bottom .home-hero-title {
        margin-bottom: 12px;
    }

    .home-hero-media .banner-caption-bottom .hero-search-wrap {
        margin-top: 0;
    }

    /* Compact hero filter: same controls, less height. */
    .home-hero-filter .home-hero-filter__card {
        padding: 6px;
    }

    .home-hero-filter .home-hero-filter__row--primary {
        gap: 6px;
    }

    .home-hero-filter .home-hero-filter__segment-btn {
        min-height: 38px;
        font-size: 13px;
    }

    /* Location + Search on one row. */
    .home-hero-filter .home-hero-filter__location {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        min-height: 40px;
    }

    .home-hero-filter .home-hero-filter__location-input {
        min-height: 38px;
        font-size: 14px;
    }

    .home-hero-filter .home-hero-filter__submit {
        flex: 0 0 auto;
        width: auto;
        min-height: 40px;
        padding: 0 18px;
    }

    .home-hero-filter .home-hero-filter__secondary-wrap {
        margin-top: 6px;
    }

    .home-hero-filter .home-hero-filter__more-toggle {
        margin-top: 4px;
        padding: 6px 0 2px;
    }

    .home-hero-media .home-hero-cta {
        margin-top: 14px;
    }

    /* Nearby facilities tabs: legacy margin-right:20px on top of the flex gap made the
       wrapped tabs ragged. */
    .souq-sp-pois-nav > .pois-tab {
        margin-right: 0;
    }
}

/* ---------- Small phones (<= 374.98px, e.g. iPhone SE 1st gen 320x568) ---------- */
@media (max-width: 374.98px) {

    /* Home hero: a little tighter so heading + filter + CTA fit the short first screen. */
    .home-hero-media .banner-caption-bottom .container.hero-caption-shell {
        padding-top: 4px;
    }

    .home-hero-media .banner-caption-bottom .home-hero-title {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .home-hero-filter .home-hero-filter__segment-btn {
        min-height: 36px;
    }

    .home-hero-filter .home-hero-filter__submit {
        padding: 0 14px;
    }

    .home-hero-media .home-hero-cta {
        margin-top: 10px;
    }
}

/* ---------- Below the carousel's 600px breakpoint (<= 599.98px) ---------- */
@media (max-width: 599.98px) {

    /* Listing carousels on area / property / project detail pages use owl autoWidth on phones,
       so a long title stretched the card past the screen (title cut mid-word, WhatsApp / View
       buttons off-screen). Use the same fixed card width the home page already uses. */
    .souq-props-carousel-right-stage-sale .owl-item {
        width: 300px !important;
        max-width: calc(100vw - 56px);
    }

    .souq-props-carousel-right-stage-sale .owlpropertybox {
        width: 100%;
    }
}

/* ---------- Phones (<= 575.98px) ---------- */
@media (max-width: 575.98px) {

    /* Nearby facilities tabs: tidy two-column grid. */
    .souq-sp-pois-nav > .pois-tab {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Properties list cards: "WhatsApp" was truncated to "Wha..." because the three buttons were
       forced to equal widths. Size them by content instead, with tighter padding. */
    .properties-page .property-wrapper .properties-card-contact-actions {
        gap: 6px;
    }

    .properties-page .property-wrapper .properties-card-contact-actions .properties-card-contact-btn {
        flex: 1 1 auto;
        padding-left: 6px;
        padding-right: 6px;
        gap: 5px;
    }

    .properties-page .property-wrapper .properties-card-contact-actions .properties-card-contact-btn i {
        font-size: 14px;
    }
}