/*
 * ResourceSpace 11 switches to its single-row desktop header at 1366px.
 * At that width the search box can shrink the logo container while the image
 * keeps its intrinsic width. On ordinary desktop widths, keep the search in
 * the same row but constrain its width. Narrower layouts keep the upstream
 * multi-row behaviour so that the logo and actions are not squeezed.
 */
@media (min-width: 1024px) and (max-width: 1199px) {
    body #header-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "logo actions"
            "search search";
        gap: var(--space-16);
    }

    body #header-container .logo {
        justify-self: start;
    }

    body #header-container .header-search-field {
        grid-area: search;
        width: 100%;
        margin-left: 0;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    body #header-container {
        display: flex;
    }

    body #header-container .logo {
        flex: 0 0 200px;
    }

    body #header-container .header-search-field {
        flex: 0 1 clamp(286px, 22vw, 340px);
        margin-left: auto;
    }
}