/* ============================================================
   Servito.lt custom CSS — only loaded for website_id=5
   ============================================================ */

/* ── 1. Desktop header: stretch search field ───────────────
   The 3-column header grid has nav | logo | search+CTA.
   Force the third column to grow so the search input fills
   all available space between the logo and cart buttons.
   ─────────────────────────────────────────────────────── */
#o_main_nav .o_grid_header_3_cols {
    grid-template-columns: auto auto 1fr !important;
}
#o_main_nav .o_header_search_right_col {
    min-width: 0;
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}
#o_main_nav .o_header_search_right_col > li:has(form.o_searchbar_form) {
    flex: 1 1 auto;
    min-width: 0;
}
#o_main_nav .o_header_search_right_col form.o_searchbar_form {
    width: 100%;
}
#o_main_nav .o_header_search_right_col .input-group {
    flex-wrap: nowrap;
    width: 100%;
}

/* ── 2. Mobile category tiles (< 992px) ────────────────────
   Odoo's CSS Grid is only applied at ≥992px (breakpoint-up lg).
   On mobile the section is a Bootstrap .row (display:flex wrap).
   We override to a single-column vertical stack with equal tiles.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {

    /* Container: vertical flex, uniform gap */
    .s_masonry_block.d-lg-none .o_grid_mode {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        height: auto !important;
        min-height: unset !important;
    }

    /* Each tile: fixed equal height, full width, no internal padding */
    .s_masonry_block.d-lg-none .o_grid_item {
        width: 100% !important;
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
        flex: 0 0 220px !important;
        padding: 0 !important;           /* override --grid-item-padding-y */
        position: relative !important;
        overflow: hidden !important;
        /* grid-area is ignored in flex, but reset for clarity */
        grid-area: unset !important;
        grid-column: unset !important;
        grid-row: unset !important;
    }

    /* Link is the tile's content wrapper */
    .s_masonry_block.d-lg-none .o_grid_item > a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Background / cover image — fills the full tile */
    .s_masonry_block.d-lg-none .o_grid_item > a > img:first-child {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: unset !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: none !important;
    }

    /* Category label / overlay image — anchored to the bottom.
       Covers two DOM variants:
         a) <a><img/><img/></a>            direct second img
         b) <a><img/><span><img/></span>   img inside span wrapper  */
    .s_masonry_block.d-lg-none .o_grid_item > a > img:not(:first-child),
    .s_masonry_block.d-lg-none .o_grid_item > a > span img {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 55% !important;
        object-fit: contain !important;
        object-position: bottom left !important;
        transform: none !important;
    }
}