/* Search Studio: responsive layers for the rebuilt search shell. */

@media (max-width: 1180px) {
    .sp-bar {
        grid-template-columns:
            minmax(0, 1.1fr) auto minmax(0, 1.1fr) minmax(10.5rem, 1fr) minmax(5.5rem, 0.36fr) auto;
    }

    .sp-search__submit {
        min-width: 8.25rem;
        padding: 0 14px;
    }
}

@media (max-width: 768px) {
    .sp-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0;
        padding: 0.25rem;
    }

    .sp-bar > .sp-cell--airport:not(.sp-cell--to) {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-right: 2.75rem;
    }

    .sp-bar > .sp-cell--to {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-right: 2.75rem;
    }

    .sp-bar > .sp-cell--dates {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .sp-bar > .sp-cell--pax {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .sp-bar > .sp-search__submit {
        grid-column: 1 / -1;
        grid-row: 5;
    }

    .sp-cell {
        padding: 0.5rem 0.75rem;
    }

    .sp-cell--to::after,
    .sp-cell--dates::after,
    .sp-cell--pax::after {
        display: none;
    }

    .sp-search__submit {
        min-height: 44px;
        margin: 6px 8px 8px;
    }

    .sp-cell--dates,
    .sp-cell--pax {
        border-top: 1px solid var(--sp-bar-separator);
    }

    /* Hairline stops before the swap control, same as the homepage form. */
    .sp-cell--to {
        border-top: none;
    }

    .sp-cell--to::before {
        display: block;
        top: 0;
        bottom: auto;
        left: 0.75rem;
        right: 3rem;
        width: auto;
        height: 1px;
        background: var(--sp-bar-separator);
    }

    .sp-cell--pax {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .sp-cell--pax .sp-pax {
        margin: 0;
    }

    .sp-cell--pax .sp-pax__btn {
        width: 36px;
        height: 36px;
    }

    .sp-swap {
        grid-column: 2;
        grid-row: 1 / 3;
        position: relative;
        top: auto;
        right: auto;
        z-index: 2;
        align-self: center;
        justify-self: end;
        width: 32px;
        height: 32px;
        margin: 0 8px 0 0;
        background: var(--sp-bar-fill);
        transform: rotate(90deg);
    }

    .sp-swap:hover {
        transform: rotate(270deg);
    }

    .sp-primer__grid {
        grid-template-columns: 1fr;
    }

    .sp-list-head {
        align-items: stretch;
        flex-direction: column;
    }

    .sp-list-head__controls {
        margin-left: 0;
        gap: 10px;
    }

    .sp-list-head__control {
        flex: 1 1 100%;
        justify-content: space-between;
        gap: 12px;
    }

    .sp-menu {
        flex: 1 1 auto;
        max-width: 70%;
    }
}

@media (max-width: 480px) {
    .sp-hero {
        padding-block: 32px 28px;
    }
}