/**
 * Compact airline ticket cards (container queries).
 *
 * Wide results columns keep the three-track desktop grid from
 * tbo-ticket-card.css. When the list is narrow — a phone, or a desktop page
 * with a squeezed results column — the card becomes one vertical product:
 * carrier → journey → fare facts → cabin photo → price + details.
 *
 * Viewport fallbacks live in tbo-ticket-card-responsive-media.css.
 */

/* ---------------------------------------------------------------------------
 * Compact stack — list ≤ 960px
 * --------------------------------------------------------------------------- */

@container tbo-tickets (max-width: 960px) {
    .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;
    }

    /* Same three-beat journey as the desktop card, tightened. */
    .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-route__duration {
        font-size: 10.5px;
    }

    .tbo-route__via {
        font-size: 11px;
    }

    /* Fare leaves the side column: full-width facts, photo underneath. */
    .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-fare__row--headline {
        padding-top: 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;
    }

    /* Price foot: seats left, quote right, details CTA full-width below. */
    .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%;
    }
}

/* ---------------------------------------------------------------------------
 * Narrow phones — list ≤ 420px
 * --------------------------------------------------------------------------- */

@container tbo-tickets (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-route__path {
        padding-top: 16px;
    }

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

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

    .tbo-fare__row--strong .tbo-fare__value,
    .tbo-fare__row--headline .tbo-fare__value {
        font-size: 14px;
    }

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