/*
 * POPULAR PRIVATE TRANSFERS / TRANSFERTS PRIVÉS POPULAIRES
 * One shared geometry for EN + FR.
 *
 * Default:
 *   journey (white) + service type (grey) remain on one line.
 *
 * If ANY visible row would overlap:
 *   JS adds .red-route-stack-all to the panel and ALL rows switch together
 *   to a harmonised two-line layout.
 */

/* ----- Shared default one-line geometry ----- */
html body #home-view #destinations .route-panel .route-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    column-gap:12px!important;
    row-gap:0!important;
}

html body #home-view #destinations .route-panel .route-row > div{
    min-width:0!important;
    width:auto!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    white-space:nowrap!important;
}

html body #home-view #destinations .route-panel .route-row > div > span.lang-en,
html body #home-view #destinations .route-panel .route-row > div > span.lang-fr{
    min-width:0!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    font-family:var(--font-ui)!important;
    font-size:inherit!important;
    font-weight:inherit!important;
    font-style:normal!important;
    line-height:inherit!important;
    letter-spacing:inherit!important;
    text-transform:none!important;
    white-space:nowrap!important;
    opacity:1!important;
}

html body #home-view #destinations .route-panel .route-row > span.lang-en,
html body #home-view #destinations .route-panel .route-row > span.lang-fr{
    justify-self:end!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    text-align:right!important;
    white-space:nowrap!important;
    color:#9f9f9f!important;
    -webkit-text-fill-color:#9f9f9f!important;
    font-family:var(--font-ui)!important;
    font-size:inherit!important;
    font-weight:inherit!important;
    font-style:normal!important;
    line-height:inherit!important;
    letter-spacing:inherit!important;
    text-transform:none!important;
    opacity:1!important;
}

/* ----- Global fallback: if ONE row collides, ALL rows stack ----- */
html body #home-view #destinations .route-panel.red-route-stack-all .route-row{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    row-gap:5px!important;
    align-items:start!important;
}

html body #home-view #destinations .route-panel.red-route-stack-all .route-row > div{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    white-space:normal!important;
}

html body #home-view #destinations .route-panel.red-route-stack-all .route-row > div > span.lang-en,
html body #home-view #destinations .route-panel.red-route-stack-all .route-row > div > span.lang-fr{
    white-space:normal!important;
}

html body #home-view #destinations .route-panel.red-route-stack-all .route-row > span.lang-en,
html body #home-view #destinations .route-panel.red-route-stack-all .route-row > span.lang-fr{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:start!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    text-align:left!important;
    white-space:normal!important;
    padding-left:calc(1em + 8px)!important;
}

/* The same rules drive both languages; no FR-specific geometry exists. */