/* Shared results-page layout tokens + two-column shell.
   Source of truth: Flight Price Tracker (_ch02_results.scss / _base.scss).
   Hotels and other product results pages must consume these values —
   do not add product-specific max-width, gutter, gap, or sidebar overrides. */

:root {
    --page-gutter: 20px;
    --results-hero-padding-top: 40px;
    --results-hero-band-height: 110px;
    /* Price Tracker trip-options strip:
       22.5px line + 8px label padding + 10px wrapper padding + 1px border. */
    --results-search-options-height: 41.5px;
    --results-search-to-content-gap: 18px;
    --results-layout-gap: 18px;
    --results-layout-padding-y: 18px;
    --results-sidebar-width: 260px;
    --results-col-stack-gap: 16px;
    --results-card-gap: 12px;
}

/* Shared hero search shell. Price Tracker supplies its own options strip;
   products without one reserve exactly the same structural height so the
   segmented form intersects the hero boundary at the same coordinate. */
.results-search-shell {
    width: 100%;
}

@media (min-width: 1025px) {
    .results-search-shell--without-options {
        padding-top: var(--results-search-options-height);
    }
}

/* Two-column results shell (sidebar + main). Matches Price Tracker
   `.result-layout` desktop spacing. Nest inside `.container-wrapper`
   so page gutters stay on the container (do not merge the classes). */
.results-layout {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--results-layout-gap);
    width: 100%;
    padding-top: var(--results-search-to-content-gap);
    padding-bottom: var(--results-layout-padding-y);
    box-sizing: border-box;
}

.results-layout__sidebar {
    width: var(--results-sidebar-width);
    flex: 0 0 var(--results-sidebar-width);
    max-width: var(--results-sidebar-width);
    min-width: 0;
    box-sizing: border-box;
}

.results-layout__main {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1024px) {
    .results-layout {
        flex-direction: column;
    }

    .results-layout__sidebar {
        width: auto;
        flex: none;
        max-width: none;
    }

    .results-layout__main {
        flex: 1 1 auto;
        width: 100%;
    }
}