/* MOBILE ONLY — definitive rule, intentionally last in source order. */
@media (max-width:1023px){
    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:stretch!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        margin-left:0!important;
        margin-right:0!important;
        padding-left:0!important;
        padding-right:0!important;
        text-align:center!important;
        white-space:normal!important;
        box-sizing:border-box!important;
    }
}



/* =========================================================
   DESKTOP ONLY (>=1024px) — final full-bleed geometry for the
   editorial yacht/chauffeur image between DETAILS and DESTINATIONS.
   Mobile is intentionally untouched.
   ========================================================= */
@media (min-width:1024px){

    /*
     * The outer editorial section is already part of the full-width page
     * flow. The side gutters came from the legacy 1680px max-width on the
     * inner visual, not from the image itself. Remove that cap instead of
     * compensating with arbitrary negative margins.
     */
    html body #home-view .editorial-cabin{
        width:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:0!important;
        background:#000!important;
        overflow:hidden!important;
    }

    html body #home-view .editorial-cabin .editorial-visual-inner{
        width:100%!important;
        max-width:none!important;
        height:clamp(300px,42vw,610px)!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
        box-sizing:border-box!important;
    }

    html body #home-view .editorial-cabin picture,
    html body #home-view .editorial-cabin .desktop-hq-picture{
        display:block!important;
        width:100%!important;
        height:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:0!important;
    }

    html body #home-view .editorial-cabin img{
        display:block!important;
        width:100%!important;
        height:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:0!important;
        object-fit:cover!important;
        object-position:center 50%!important;
    }

    /* Keep the transition seamless with the surrounding dark sections. */
    html body #home-view #details{
        border-bottom:0!important;
    }

    html body #home-view #destinations{
        margin-top:-1px!important;
        border-top:0!important;
    }
}

/*
 * Ultra-wide desktops: after the normal 610px cinematic cap has been
 * reached, allow a slow additional increase so 2K/ultra-wide screens do
 * not turn the visual into an excessively thin ribbon. This is continuous
 * at the 1920px reference width and remains capped for predictability.
 */
@media (min-width:1921px){
    html body #home-view .editorial-cabin .editorial-visual-inner{
        height:clamp(610px,calc(18vw + 264px),760px)!important;
    }
}



/* =========================================================
   DESKTOP ONLY (>=1024px) — final geometry for
   FRENCH RIVIERA DESTINATIONS / POPULAR PRIVATE TRANSFERS.
   Mobile/tablet rules remain untouched.
   ========================================================= */
@media (min-width:1024px){

    /*
     * Match the controlled desktop content width used by the preceding
     * DETAILS composition. Keep the whole block mathematically centred,
     * while allowing both columns to scale continuously.
     */
    html body #home-view #destinations{
        padding-top:clamp(72px,4.35vw,84px)!important;
        padding-bottom:clamp(72px,4.35vw,84px)!important;
    }

    html body #home-view #destinations .destinations-wrap{
        width:min(1180px,100%)!important;
        max-width:1180px!important;
        margin-left:auto!important;
        margin-right:auto!important;
        display:grid!important;
        grid-template-columns:minmax(0,1.06fr) minmax(430px,.94fr)!important;
        column-gap:clamp(48px,3.8vw,68px)!important;
        row-gap:0!important;
        align-items:center!important;
        box-sizing:border-box!important;
    }

    html body #home-view #destinations .destinations-copy{
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
        margin:0!important;
        justify-self:stretch!important;
        align-self:center!important;
        box-sizing:border-box!important;
    }

    /* One centred heading axis, with readable body copy underneath. */
    html body #home-view #destinations .destinations-copy .eyebrow{
        width:100%!important;
        margin:0 auto 14px!important;
        text-align:center!important;
    }

    html body #home-view #destinations .destinations-copy .luxury-title{
        width:min(610px,100%)!important;
        max-width:610px!important;
        margin:0 auto 20px!important;
        line-height:1.08!important;
        text-align:center!important;
    }

    html body #home-view #destinations .destinations-copy .luxury-intro{
        width:min(590px,100%)!important;
        max-width:590px!important;
        margin:0 auto 28px!important;
        font-size:clamp(.90rem,.84rem + .07vw,.97rem)!important;
        line-height:1.74!important;
        text-align:center!important;
        box-sizing:border-box!important;
    }

    html body #home-view #destinations .destination-pills{
        width:min(590px,100%)!important;
        max-width:590px!important;
        margin:0 auto!important;
        display:flex!important;
        flex-wrap:wrap!important;
        justify-content:center!important;
        align-content:center!important;
        gap:10px!important;
        box-sizing:border-box!important;
    }

    html body #home-view #destinations .destination-pill{
        margin:0!important;
        flex:0 0 auto!important;
        box-sizing:border-box!important;
    }

    /*
     * A legacy global card rule adds 18px top/bottom margins to route-panel.
     * Those margins distort the grid centre. Remove them here and let the
     * section/grid own all spacing instead.
     */
    html body #home-view #destinations .route-panel{
        width:100%!important;
        max-width:520px!important;
        min-width:0!important;
        margin:0!important;
        justify-self:end!important;
        align-self:center!important;
        padding:clamp(26px,1.65vw,30px)!important;
        box-sizing:border-box!important;
    }

    html body #home-view #destinations .route-panel .route-panel-title{
        width:100%!important;
        margin:0 auto 18px!important;
        text-align:center!important;
    }

    html body #home-view #destinations .route-panel .route-row{
        width:100%!important;
        min-width:0!important;
        margin:0!important;
        padding:12px 0!important;
        box-sizing:border-box!important;
    }

    /* Keep the CTA on the same central axis as the panel title. */
    html body #home-view #destinations .route-panel .premium-cta{
        width:100%!important;
        margin:30px auto 0!important;
        text-align:center!important;
    }
}

/*
 * Compact desktop: retain two columns, but reserve enough width for the
 * transfer panel and tighten only the inter-column rhythm. This prevents
 * long EN/FR labels from forcing the whole section out of proportion.
 */
@media (min-width:1024px) and (max-width:1199px){
    html body #home-view #destinations{
        padding-top:66px!important;
        padding-bottom:66px!important;
    }

    html body #home-view #destinations .destinations-wrap{
        width:100%!important;
        max-width:none!important;
        grid-template-columns:minmax(0,1fr) minmax(400px,.90fr)!important;
        column-gap:32px!important;
    }

    html body #home-view #destinations .destinations-copy .luxury-title{
        width:min(500px,100%)!important;
        max-width:500px!important;
        margin-bottom:18px!important;
    }

    html body #home-view #destinations .destinations-copy .luxury-intro{
        width:min(500px,100%)!important;
        max-width:500px!important;
        margin-bottom:24px!important;
        font-size:.90rem!important;
        line-height:1.70!important;
    }

    html body #home-view #destinations .destination-pills{
        width:min(500px,100%)!important;
        max-width:500px!important;
        gap:8px!important;
    }

    html body #home-view #destinations .route-panel{
        max-width:none!important;
        padding:24px 22px!important;
    }

    html body #home-view #destinations .route-panel .route-panel-title{
        margin-bottom:16px!important;
    }

    html body #home-view #destinations .route-panel .route-row{
        padding:11px 0!important;
    }

    html body #home-view #destinations .route-panel .premium-cta{
        margin-top:26px!important;
    }
}



/* =========================================================
   DESKTOP ONLY (>=1024px) — final geometry for
   VIP & EVENT CHAUFFEUR SERVICE / MAJOR EVENTS.
   Mobile/tablet below 1024px remains intentionally untouched.
   ========================================================= */
@media (min-width:1024px){

    /* Keep this section on the same controlled desktop axis as the
       preceding Destinations composition instead of inheriting the
       older 1220px-wide generic luxury container. */
    html body #home-view #events > .luxury-inner{
        width:min(1180px,100%)!important;
        max-width:1180px!important;
        margin-left:auto!important;
        margin-right:auto!important;
        box-sizing:border-box!important;
    }

    /* Explicit heading geometry: one central axis and a stable reading
       measure independent of the card grid below. */
    html body #home-view #events > .luxury-inner > .eyebrow{
        width:100%!important;
        margin-left:auto!important;
        margin-right:auto!important;
        text-align:center!important;
    }

    html body #home-view #events > .luxury-inner > .luxury-title{
        width:min(920px,100%)!important;
        max-width:920px!important;
        margin-left:auto!important;
        margin-right:auto!important;
        text-align:center!important;
    }

    html body #home-view #events > .luxury-inner > .luxury-intro{
        width:min(840px,100%)!important;
        max-width:840px!important;
        margin-left:auto!important;
        margin-right:auto!important;
        margin-bottom:clamp(42px,2.8vw,48px)!important;
        text-align:center!important;
        box-sizing:border-box!important;
    }

    html body #home-view #events .events-grid{
        width:100%!important;
        max-width:1180px!important;
        margin:0 auto!important;
        display:grid!important;
        align-items:stretch!important;
        box-sizing:border-box!important;
    }

    html body #home-view #events .event-card{
        min-width:0!important;
        width:100%!important;
        height:100%!important;
        margin:0!important;
        box-sizing:border-box!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:flex-start!important;
        justify-content:flex-start!important;
    }
}

/* Standard and large desktop: use a six-track grid. Each card spans two
   tracks, giving three identical cards on row one. The two cards on row
   two begin one track inward, so their combined group is mathematically
   centred while retaining exactly the same card width and inter-card gap. */
@media (min-width:1200px){
    html body #home-view #events .events-grid{
        grid-template-columns:repeat(6,minmax(0,1fr))!important;
        column-gap:20px!important;
        row-gap:20px!important;
        grid-auto-rows:1fr!important;
    }

    html body #home-view #events .event-card{
        grid-column:span 2!important;
        min-height:230px!important;
        padding:clamp(28px,1.6vw,30px)!important;
    }

    html body #home-view #events .event-card:nth-child(4){
        grid-column:2 / span 2!important;
    }

    html body #home-view #events .event-card:nth-child(5){
        grid-column:4 / span 2!important;
    }
}

/* Compact desktop: two readable cards per row rather than squeezing three
   narrow cards. A four-track grid lets the fifth card occupy the exact
   same width as the others while sitting perfectly on the section axis. */
@media (min-width:1024px) and (max-width:1199px){
    html body #home-view #events > .luxury-inner > .luxury-title{
        width:min(820px,100%)!important;
        max-width:820px!important;
    }

    html body #home-view #events > .luxury-inner > .luxury-intro{
        width:min(780px,100%)!important;
        max-width:780px!important;
        margin-bottom:40px!important;
    }

    html body #home-view #events .events-grid{
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
        column-gap:18px!important;
        row-gap:18px!important;
        grid-auto-rows:1fr!important;
    }

    html body #home-view #events .event-card{
        grid-column:span 2!important;
        min-height:220px!important;
        padding:26px!important;
    }

    html body #home-view #events .event-card:nth-child(5){
        grid-column:2 / span 2!important;
    }
}



/* =========================================================
   DESKTOP ONLY (>=1024px) — final geometry for the
   WEDDINGS & PRIVATE CELEBRATIONS editorial transition.
   The image is true full-bleed: no legacy 1680px inner cap,
   no negative-margin compensation, and no mobile changes.
   ========================================================= */
@media (min-width:1024px){

    /* Make the transition below the wedding copy deterministic instead
       of inheriting the generic .luxury-intro bottom margin + section
       padding combination. */
    html body #home-view #events{
        padding-bottom:0!important;
        border-bottom:0!important;
    }

    html body #home-view #events .wedding-service-feature{
        width:min(760px,100%)!important;
        max-width:760px!important;
        margin-left:auto!important;
        margin-right:auto!important;
        margin-top:clamp(62px,4.3vw,78px)!important;
        padding-bottom:clamp(64px,4.2vw,78px)!important;
        text-align:center!important;
        box-sizing:border-box!important;
    }

    html body #home-view #events .wedding-service-feature .luxury-intro{
        width:100%!important;
        max-width:760px!important;
        margin-left:auto!important;
        margin-right:auto!important;
        margin-bottom:0!important;
        text-align:center!important;
    }

    /* The outer section already spans the viewport. The visible black
       side gutters came from .editorial-visual-inner's legacy 1680px
       max-width. Remove that cap at the source. */
    html body #home-view .editorial-wedding{
        width:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:0!important;
        background:#000!important;
        overflow:hidden!important;
        border-top:0!important;
        border-bottom:0!important;
        box-shadow:none!important;
    }

    html body #home-view .editorial-wedding .editorial-visual-inner{
        width:100%!important;
        max-width:none!important;
        height:clamp(300px,42vw,610px)!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
        background:#000!important;
        box-sizing:border-box!important;
    }

    html body #home-view .editorial-wedding picture,
    html body #home-view .editorial-wedding .desktop-hq-picture{
        display:block!important;
        width:100%!important;
        height:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:0!important;
    }

    html body #home-view .editorial-wedding img{
        display:block!important;
        width:100%!important;
        height:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:0!important;
        object-fit:cover!important;
        object-position:50% 50%!important;
        transform:none!important;
        transition:none!important;
    }

    /* Seamless dark hand-off to the reviews section below. */
    html body #home-view .editorial-wedding + #reviews,
    html body #home-view #reviews{
        margin-top:-1px!important;
        border-top:0!important;
    }
}

/* Preserve the same cinematic proportion on 2K/ultra-wide desktops
   once the normal 610px cap is reached, while retaining a hard ceiling. */
@media (min-width:1921px){
    html body #home-view .editorial-wedding .editorial-visual-inner{
        height:clamp(610px,calc(18vw + 264px),760px)!important;
    }
}