/* 
 * HawkSearch Responsive Layout
 * Implements semantic structure and responsive behavior based on common.css design tokens.
 * Form controls (inputs, selects, facet buttons, date picker): common.css — `.hs-layout` scopes.
 */

.hs-search-container {
    /* Use design system container width */
    max-width: var(--max-width-container, 1248px);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
}

.hs-layout {
    display: flex;
    flex-direction: column;
    /* Mobile first: stack vertically */
    gap: 32px;
    /* Fixed gap as per requirements */
    width: 100%;
    margin-top: 20px;
}

/* Sidebar - Mobile/Tablet Default */
.hs-sidebar {
    width: 100%;
    order: 1;
    /* Ensure filters appear first or as needed */
}

/* Main Content - Mobile/Tablet Default */
.hs-content {
    width: 100%;
    order: 2;
}

.hs-content .right-bg {
    width: 100%;
}

/* Ensure images in content are responsive */
.hs-content img {
    max-width: 100%;
    height: auto;
}

/* Tablet Breakpoint (878px - 1023px) */
@media(min-width: 878px) {
    .hs-search-container {
        padding: 0;
    }

    /* Keeping stacked layout for tablet as per "Consider stacking" instruction 
                       to ensure best readability on medium screens without squeezing the content. */
}

/* Desktop Breakpoint (≥1024px) */
@media(min-width: 1024px) {
    .hs-search-container {
        padding: 0;
    }

    .hs-layout {
        flex-direction: row;
        /* Two-column layout */
        align-items: flex-start;
    }

    .hs-sidebar {
        width: 288px;
        /* Fixed width of 288px */
        flex: 0 0 288px;
        /* Prevent shrinking or growing */
    }

    .hs-content {
        flex: 1 1 0%;
        /* Flex grow to fill remaining space */
        min-width: 0;
        /* Prevent flex item from overflowing */
    }
}