/**
 * Viewport fallbacks for compact airline ticket cards.
 *
 * Mirrors tbo-ticket-card-responsive.css for phones/tablets when container
 * queries are unavailable, and as a belt-and-suspenders match for true mobile
 * and tablet viewports. The upper bound is the same tablet ceiling as the
 * two-up `.flights-list` grid (1024px): on that band tickets sit in half-width
 * cells, so the three-track desktop card must not remain active. Desktop
 * (>1024px) is untouched.
 */

@media (max-width: 1024px) {
    .tbo-ticket-card {
        grid-template:
            "head" auto
            "routes" auto
            "fare" auto
            "aside" auto
            / minmax(0, 1fr);
        column-gap: 0;
        row-gap: 0;
        padding: 16px 16px 18px;
        border-radius: 16px;
    }

    .tbo-ticket__head {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        align-items: center;
        padding-bottom: 12px;
    }

    .tbo-ticket__carrier {
        flex: 1 1 12rem;
        min-width: 0;
    }

    .tbo-ticket__airline-name {
        white-space: normal;
        text-overflow: clip;
        line-height: 1.25;
    }

    .tbo-ticket__kind {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .tbo-ticket__routes {
        gap: 14px;
    }

    .tbo-route__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(68px, 0.9fr) minmax(0, 1.1fr);
        gap: 8px;
    }

    .tbo-route__time {
        font-size: 22px;
    }

    .tbo-route__city {
        font-size: 13px;
    }

    .tbo-route__path {
        padding-top: 18px;
        gap: 4px;
    }

    .tbo-ticket__fare {
        gap: 12px;
        padding-top: 14px;
        padding-left: 0;
        margin-top: 14px;
        border-top: 1px solid var(--tt-hairline);
        border-left: none;
    }

    .tbo-ticket-card--has-cabin-photo .tbo-ticket__fare {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        grid-template-columns: none;
        column-gap: 0;
        row-gap: 12px;
    }

    .tbo-ticket__fare-main {
        width: 100%;
        min-width: 0;
    }

    .tbo-fare {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .tbo-fare__row {
        padding: 8px 0;
        border-bottom: 1px solid var(--tt-hairline);
    }

    .tbo-fare__row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .tbo-ticket-card--has-cabin-photo .tbo-ticket__cabin-photo {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        justify-content: stretch;
    }

    .tbo-ticket-card--has-cabin-photo .tbo-ticket__cabin-photo-frame {
        width: 100%;
        max-height: none;
        aspect-ratio: 16 / 10;
        border-radius: 12px;
    }

    .tbo-ticket__aside {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "seats price"
            "cta cta";
        column-gap: 12px;
        row-gap: 12px;
        align-items: start;
        padding-top: 14px;
        padding-left: 0;
        margin-top: 14px;
        border-top: 1px solid var(--tt-hairline);
        border-left: none;
    }

    .tbo-ticket__seats {
        grid-area: seats;
        align-self: start;
        justify-self: start;
        text-align: left;
        white-space: normal;
    }

    .tbo-ticket__commit {
        display: contents;
    }

    .tbo-ticket__price {
        grid-area: price;
        align-items: flex-end;
        width: auto;
        max-width: 100%;
        text-align: right;
    }

    .tbo-ticket__amount {
        font-size: 24px;
    }

    .tbo-ticket__details-button {
        grid-area: cta;
        width: 100%;
    }
}

@media (max-width: 420px) {
    .tbo-ticket-card {
        padding: 14px 14px 16px;
    }

    .tbo-ticket__airline-logo {
        width: 26px;
        height: 26px;
    }

    .tbo-ticket__airline-name {
        font-size: 14px;
    }

    .tbo-ticket__kind {
        font-size: 9px;
        letter-spacing: 0.08em;
    }

    .tbo-route__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(56px, 0.85fr) minmax(0, 1.15fr);
        gap: 6px;
    }

    .tbo-route__time {
        font-size: 20px;
    }

    .tbo-route__date,
    .tbo-route__caption {
        font-size: 10px;
    }

    .tbo-route__city {
        font-size: 12.5px;
    }

    .tbo-fare__label {
        font-size: 12px;
    }

    .tbo-fare__value {
        font-size: 12.5px;
    }

    .tbo-ticket__amount {
        font-size: 22px;
    }
}