/* Le Baccanti public site — journey page (loaded after base.css).
   Colours come from the brand palette of base.css (:root): anthracite, olive, taupe, yellow. */

/* Breadcrumb */
.trip-breadcrumb{padding:20px clamp(24px,6vw,100px);font-size:14px;border-bottom:1px solid var(--line);color:var(--anthracite-soft)}

/* Opening: photos on the left (a slider when there are several), text and button on the right */
.trip-divider{background:var(--anthracite);color:#fff;display:grid;grid-template-columns:1fr 1fr;min-height:500px}
.trip-divider-copy{padding:65px clamp(30px,5vw,85px);align-self:center}
.trip-divider p{font-size:18px;color:rgba(255,255,255,.86)}
.trip-opening{min-height:560px}
.trip-opening .eyebrow{color:var(--yellow)}
.trip-opening h1{font:400 clamp(42px,4.5vw,66px)/1.14 'Playfair Display',Georgia,serif;margin:20px 0;letter-spacing:-.025em;text-wrap:balance}
/* Chinese, beside the photo: a slightly smaller headline, so that a nine-character line fits the column instead of leaving two characters alone. */
@media(min-width:961px){html[lang^="zh"] .trip-opening h1{font-size:clamp(42px,4.1vw,60px)}}
.trip-opening .opening-places{font-size:15px;color:var(--yellow);letter-spacing:.03em}
.trip-opening .button{margin-top:20px}
.cover{position:relative;min-height:560px;overflow:hidden;background:var(--anthracite)}
.cover-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.cover-track::-webkit-scrollbar{display:none}
.cover-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;scroll-snap-stop:always}
.cover-track:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.cover:after{content:'';position:absolute;inset:auto 0 0;height:130px;background:linear-gradient(0deg,rgba(47,49,51,.6),transparent);pointer-events:none}
.cover:not(.is-ready):after{display:none}
.cover-controls{position:absolute;z-index:1;left:clamp(16px,2.2vw,30px);bottom:clamp(16px,2.2vw,28px);display:flex;align-items:center;gap:12px;color:#fff}
.cover-controls[hidden]{display:none}
.cover-status{min-width:52px;text-align:center;font-size:14px;font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.cover.is-ready .cover-track{cursor:grab}
/* While the photo is dragged with the mouse (journey.js) it follows the pointer freely. */
.cover-track.is-dragging{scroll-snap-type:none;cursor:grabbing;-webkit-user-select:none;user-select:none}
.cover-track img{-webkit-user-drag:none}
/* Dots: one small button per photo (up to eight photos; with more, the counter alone tells the place). */
.cover-dots{position:absolute;z-index:1;right:calc(clamp(16px,2.2vw,30px) - 7px);bottom:calc(clamp(16px,2.2vw,28px) + 11px);display:none}
.cover.is-ready .cover-dots{display:flex}
.cover-dots button{position:relative;width:22px;height:24px;flex:none;padding:0;border:0;border-radius:12px;background:transparent;cursor:pointer}
.cover-dots button:before{content:'';position:absolute;top:8px;left:7px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);transition:background .2s,transform .2s}
@media(hover:hover){.cover-dots button:hover:before{background:#fff}}
.cover-dots .is-current:before{background:var(--yellow);transform:scale(1.3)}
.cover-dots .is-current:hover:before{background:var(--yellow)}
.cover-dots button:focus-visible{outline:2px solid #fff;outline-offset:-2px}
/* Narrow phones, and small tablets where the photo takes half the width: more than five dots would run into the buttons, so the counter stays alone. */
@media(max-width:430px),(min-width:701px) and (max-width:860px){.cover.is-ready .cover-dots-many{display:none}}

/* Round icon buttons (slider, photo viewer) */
.round-button{width:46px;height:46px;flex:none;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--yellow);color:var(--anthracite);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:background .2s,color .2s}
.round-button svg{width:22px;height:22px;display:block}
@media(hover:hover){.round-button:hover{background:#fff;color:var(--anthracite)}}
.round-button:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Controls that are tapped several times in a row: no double-tap zoom on phones (pinch zoom stays). */
.round-button,.cover-dots button,.carousel-controls button,.gallery-more button,.gallery-item,.day-photo,.video-play{touch-action:manipulation}

/* Call-to-action buttons of this page */
.enquire-button{background:var(--yellow);color:var(--anthracite);font-weight:700;font-size:15px;letter-spacing:.07em;padding:22px 30px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.trip-opening .button:hover,.trip-contact .button:hover{background:#fff;color:var(--anthracite)}
.trip-opening .button:focus-visible,.trip-contact .button:focus-visible,.trip-contact a:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* Facts band: your time / your places / your people / from */
.trip-facts{margin:0;padding:32px clamp(24px,6vw,100px);display:grid;grid-template-columns:repeat(4,1fr);gap:25px;background:var(--cream)}
/* The icon belongs to the label (dt) and sits in the left margin of the entry, so the four labels share one line. */
.trip-facts>div{position:relative;min-height:54px;padding-left:70px}
.fact-icon{position:absolute;left:0;top:0;width:54px;height:54px;padding:13px;border-radius:50%;background:var(--olive);color:#fff}
.trip-facts dt{padding-top:3px;text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:400;color:var(--taupe-ink);margin-bottom:8px}
.trip-facts dd{margin:0;font-size:18px;line-height:1.6;color:var(--anthracite)}
.trip-facts small{display:block;font-size:14px;line-height:1.6;color:var(--anthracite-soft)}

/* Story */
.trip-intro{padding:75px clamp(24px,9vw,150px) 35px;display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:start}
.trip-intro h2{font:400 clamp(40px,4vw,60px)/1.13 'Playfair Display',Georgia,serif;margin:20px 0}
.trip-intro h2:first-child{margin-top:0}
.trip-intro p{font-size:18px;color:var(--anthracite-soft);margin-top:5px}
.trip-intro .lead{font:400 26px/1.45 'Playfair Display',Georgia,serif;color:var(--anthracite)}

/* Photo gallery: a mosaic that stays whole with any number of photos.
   Eight photos make three full rows of four columns (one large, four small, one wide, two small);
   every other group of eight puts its large photo on the right. The rules under "last photos"
   stretch the final ones so the mosaic always ends on a full row. */
.trip-gallery{padding:45px clamp(24px,6vw,100px) 80px}
.gallery-head{margin-bottom:30px}
.gallery-head h2,.video-head h2{font:400 clamp(32px,3.2vw,44px)/1.15 'Playfair Display',Georgia,serif;margin:12px 0 0}
.gallery-mosaic{--row:clamp(150px,19.5vw,290px);--gap:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:var(--row);grid-auto-flow:dense;gap:var(--gap)}
.gallery-item{position:relative;display:block;overflow:hidden;background:var(--cream);cursor:zoom-in}
.gallery-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .3s}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-item:focus-visible{outline:3px solid var(--anthracite);outline-offset:3px}
.gallery-item:nth-child(8n+1){grid-column:span 2;grid-row:span 2}
.gallery-item:nth-child(8n+6){grid-column:span 2}
/* last photos */
.gallery-item:nth-child(8n+1):last-child{grid-column:1/-1}
.gallery-item:nth-child(8n+2):last-child{grid-column:span 2;grid-row:span 2}
.gallery-item:nth-child(8n+2):nth-last-child(2),.gallery-item:nth-child(8n+3):last-child,.gallery-item:nth-child(8n+4):last-child,.gallery-item:nth-child(8n+7):last-child{grid-column:span 2}
.gallery-item:nth-child(8n+4):nth-last-child(3),.gallery-item:nth-child(8n+5):nth-last-child(2),.gallery-item:nth-child(8n+6):last-child{grid-column:span 2}
@media(min-width:701px){.gallery-item:nth-child(16n+9):not(:last-child){grid-column:3/span 2}}
/* Many photos (more than sixteen, see journey.blade.php): the first two groups only — sixteen photos, six full rows,
   twelve on phones: never fewer than the largest gallery that is shown whole — and a short faded peek of the next row,
   until "See all photos" is pressed (journey.js). The cut falls between two rows, never across a photo. */
.gallery-mosaic.is-collapsed{--rows:6;--peek:calc(var(--row)*.24);max-height:calc(var(--row)*var(--rows) + var(--gap)*var(--rows) + var(--peek));overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - var(--peek)),transparent);mask-image:linear-gradient(#000 calc(100% - var(--peek)),transparent)}
.gallery-more{margin:14px 0 0;text-align:center}
.gallery-more[hidden]{display:none}
.gallery-more .button{margin-top:0;color:var(--anthracite)}

/* Photo viewer (full screen) */
html.lightbox-open{overflow:hidden}
.lightbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(47,49,51,.97);color:#fff;overflow:hidden}
/* Browsers without <dialog> (Safari before 15.4) would show it as plain content: closed means not displayed. */
.lightbox:not([open]){display:none}
.lightbox[open]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(8px,2vw,28px);padding:clamp(14px,3vw,40px)}
.lightbox::backdrop{background:rgba(47,49,51,.97)}
.lightbox figure{position:relative;margin:0;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;grid-column:2}
.lightbox img{display:block;max-width:100%;max-height:calc(100% - 40px);min-height:0;object-fit:contain}
.lightbox-status{font-size:14px;font-weight:600;letter-spacing:.1em;font-variant-numeric:tabular-nums;min-height:22px}
.lightbox-close{position:absolute;top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);z-index:1}
.lightbox-previous{grid-column:1}
.lightbox-next{grid-column:3}
.lightbox [hidden]{display:none}
/* While a photo is on its way: a turning ring, and the previous photo (if any) dimmed behind it. */
.lightbox img{transition:opacity .2s}
.lightbox img:not([src]){visibility:hidden;width:44px;height:44px}
.lightbox .is-loading img{opacity:.3}
.lightbox .is-loading:before{content:'';position:absolute;top:calc(50% - 40px);left:calc(50% - 22px);width:44px;height:44px;box-sizing:border-box;border:3px solid rgba(255,255,255,.28);border-top-color:var(--yellow);border-radius:50%;animation:lightbox-turn .8s linear infinite}
@keyframes lightbox-turn{to{transform:rotate(360deg)}}

/* Video */
.trip-video{padding:20px clamp(24px,6vw,100px) 80px}
.video-head{margin-bottom:30px}
.video-frame{position:relative;aspect-ratio:16/9;max-height:78vh;width:100%;margin:0 auto;overflow:hidden;background:var(--anthracite)}
.video-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;inset:0;width:100%;display:grid;place-items:center;padding:0;border:0;cursor:pointer;color:var(--anthracite);background:linear-gradient(0deg,rgba(47,49,51,.5),rgba(47,49,51,.18))}
.video-play span{width:clamp(72px,8vw,108px);height:clamp(72px,8vw,108px);display:grid;place-items:center;border-radius:50%;background:var(--yellow);box-shadow:0 10px 34px rgba(0,0,0,.35);transition:transform .25s,background .2s}
.video-play svg{width:42%;height:42%;display:block;margin-left:5%}
@media(hover:hover){.video-play:hover span{transform:scale(1.07);background:#fff}}
.video-play:focus-visible{outline:none}
.video-play:focus-visible span{outline:3px solid #fff;outline-offset:5px}

/* Itinerary: the band that opens it, then title, route, days and map.
   In-page anchors (#story, #itinerary, #advisor, #enquire) clear the sticky header through scroll-padding-top of base.css. */
.trip-band{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);padding:30px clamp(24px,6vw,100px);background:var(--olive);color:#fff}
.band-icon{flex:none;width:clamp(40px,3.6vw,52px);height:clamp(40px,3.6vw,52px);color:var(--yellow)}
.trip-band h2{flex:1;margin:0;font:400 clamp(28px,3.1vw,44px)/1.15 'Playfair Display',Georgia,serif;letter-spacing:-.02em;text-wrap:balance}
.trip-band p{flex:none;margin:0;font-size:14px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff}
.trip-days-body{padding:60px clamp(24px,6vw,100px) 70px}
.itinerary-head{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-bottom:69px}
.itinerary-head .section-title{margin:0;text-wrap:balance}
.itinerary-intro{max-width:350px;margin:0;color:var(--anthracite-soft)}
.route-line{display:flex;flex-wrap:wrap;gap:12px 25px;padding:22px 0;margin:0 0 40px;list-style:none;border-block:1px solid var(--line);font-size:16px}
.route-line li{display:flex;gap:10px;align-items:center}
.route-line b{flex:none;min-width:30px;height:30px;padding:0 6px;display:grid;place-items:center;border-radius:15px;background:var(--yellow);color:var(--anthracite);font-weight:700;font-size:12px;letter-spacing:.02em}
.itinerary-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:60px;align-items:start}
/* --day-number and --day-gap: the numeral column of a day and the space after it. Above 1000px the day text is indented by both,
   so that it starts under the day title. */
.day{--day-number:clamp(60px,5.4vw,80px);--day-gap:22px;border-top:1px solid var(--line)}
.day:last-child{border-bottom:1px solid var(--line)}
.day summary{cursor:pointer;display:grid;grid-template-columns:var(--day-number) 1fr 25px;gap:var(--day-gap);align-items:center;padding:26px 0;list-style:none}
.day summary::-webkit-details-marker{display:none}
.day summary h3{font:400 26px/1.22 'Playfair Display',Georgia,serif;margin:0}
.day summary .location{display:block;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px;color:var(--taupe-ink)}
.day summary .toggle{font-size:27px;font-weight:400;color:var(--anthracite);transition:transform .2s}
.day[open] .toggle{transform:rotate(45deg)}
.day-copy{padding:0 15px 32px calc(var(--day-number) + var(--day-gap));max-width:930px}
.day-copy p{font-size:16px;color:var(--anthracite-soft)}
.day-copy .day-note{border-left:2px solid var(--yellow-deep);padding-left:18px;font-size:14px;margin-top:25px}
.day-photo{display:block;margin:4px 0 22px;overflow:hidden;background:var(--cream);cursor:zoom-in}
.day-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}
.day-photo:hover img{transform:scale(1.03)}
.day-photo:focus-visible{outline:3px solid var(--anthracite);outline-offset:3px}
.journey-map{position:sticky;top:calc(var(--header-h) + 24px);padding:26px 10px 15px;background:var(--cream);text-align:center}
.journey-map img{display:block;width:100%;height:auto}
.map-credit{font-size:12px;color:var(--grey-ink);margin:0}
summary:focus-visible{outline:2px solid var(--anthracite);outline-offset:5px}

/* Highlights carousel */
.trip-signature{padding:35px clamp(24px,6vw,100px) 75px}
.signature-grid figure{margin:0}
.signature-grid img{width:100%;object-fit:cover}
.signature-grid h3{font:400 29px/1.2 'Playfair Display',Georgia,serif;margin:22px 0 12px}
.signature-grid p{color:var(--anthracite-soft);margin:0}
.signature-grid .eyebrow{display:block;margin-top:22px}
.carousel-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:32px}
.carousel-heading h2{font:400 40px/1.15 'Playfair Display',Georgia,serif;margin:15px 0 0}
.carousel-controls{display:flex;align-items:center;gap:16px;max-width:100%}
.carousel-controls button{background:transparent;border:1.5px solid var(--anthracite);color:var(--anthracite);padding:11px 20px;cursor:pointer;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background .2s,color .2s}
@media(hover:hover){.carousel-controls button:hover:not(:disabled){background:var(--anthracite);color:var(--yellow)}}
.carousel-controls button:disabled{opacity:.35;cursor:default}
.carousel-status{font-size:14px;white-space:nowrap;color:var(--anthracite-soft)}
.carousel-track{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--taupe-ink) var(--cream);padding-bottom:22px;overscroll-behavior-x:contain}
.carousel-track figure{flex:0 0 calc((100% - 60px)/3);scroll-snap-align:start}
.carousel-track img{height:330px}
.carousel-track:focus-visible{outline:2px solid var(--anthracite);outline-offset:4px}

/* What is included */
.included{background:var(--cream);padding:85px clamp(24px,9vw,150px);display:grid;grid-template-columns:1fr 1.15fr;gap:8vw}
.included h2{font:400 45px/1.15 'Playfair Display',Georgia,serif;margin:20px 0}
.included p{color:var(--anthracite-soft)}
.included ul{padding:0;margin:0;list-style:none}
.included li{border-bottom:1px solid var(--line);padding:16px 0;font-size:17px}
.included li:first-child{padding-top:0}
.included .fine{font-size:14px;color:var(--grey-ink)}

/* Travel advisor */
.trip-personal{padding:100px clamp(24px,9vw,150px);display:grid;grid-template-columns:180px 1fr;gap:55px;align-items:center;max-width:1250px;margin:auto}
.trip-personal img{width:180px;height:180px;object-fit:cover;border-radius:50%}
.trip-personal h2{font:400 38px/1.2 'Playfair Display',Georgia,serif;margin:15px 0}
.trip-personal p{font-size:18px;color:var(--anthracite-soft)}
.advisor-portrait{text-align:center}
.advisor-portrait p{font-size:17px;margin:15px 0 0;color:var(--anthracite)}
.advisor-portrait span{display:block;font-size:14px;color:var(--grey)}
.advisor-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:20px 0 25px}
.advisor-actions>a{font-size:16px;text-decoration:none}
.advisor-actions>a:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:5px}

/* Closing band */
.trip-contact{align-items:center}
.trip-contact .eyebrow{color:var(--yellow)}
.trip-contact .price-note{font-size:15px;font-weight:400;color:var(--yellow)}
.contact-actions{display:flex;flex-direction:column;gap:12px;min-width:300px}
.contact-actions .button{margin:0 0 10px;align-self:stretch;white-space:normal}
.direct-contact{font-size:17px;text-decoration:none;color:#fff}
.direct-contact:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:5px}
.back-collection{padding:30px clamp(24px,6vw,100px);background:var(--paper)}

@media(max-width:1000px){.itinerary-layout{gap:25px;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr)}.day summary h3{font-size:24px}.day-copy{padding-left:0}.carousel-track figure{flex-basis:calc((100% - 30px)/2)}.carousel-heading{align-items:start;flex-direction:column}}
/* Facts band: four columns down to 901px, as in the design. Between 901 and 1100px the columns leave too little room
   for the text beside the icon, so the icon goes above the label; from 900px down, two columns with the icon beside. */
@media(min-width:901px) and (max-width:1100px){.trip-facts>div{padding-left:0;padding-top:66px}}
@media(max-width:900px){.trip-facts{grid-template-columns:repeat(2,1fr)}}
/* Where the text column of the opening is narrow (tablets, phones) the headline wraps by itself, in balanced lines, instead of at its forced break. */
@media(max-width:960px){.trip-opening h1 br{display:none}html[lang^="zh"] .trip-opening h1:has(br){text-wrap:balance}}
@media(max-width:900px){.trip-intro{gap:35px;padding-inline:6vw}.included{gap:35px;padding:70px 6vw}.trip-personal{padding:70px 6vw;gap:35px}.gallery-mosaic{--gap:10px}}
@media(max-width:700px){
.trip-divider{grid-template-columns:1fr}
.trip-opening{min-height:0}
.cover{min-height:0;height:310px}
.trip-opening h1{font-size:clamp(34px,11vw,43px)}
.trip-divider-copy{padding:40px 24px}
.trip-intro{grid-template-columns:1fr;padding:55px 24px 35px;gap:15px}
.trip-gallery{padding:30px 24px 55px}
.gallery-mosaic{--row:clamp(120px,40vw,220px);grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery-mosaic.is-collapsed{--rows:12}
.lightbox[open]{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;padding:64px 12px 18px;gap:14px}
.lightbox figure{grid-column:1/-1;grid-row:1}
.lightbox-previous{grid-column:1;grid-row:2;justify-self:end}
.lightbox-next{grid-column:2;grid-row:2;justify-self:start}
.trip-video{padding:10px 24px 55px}
.trip-band{padding:24px}
.trip-band p{display:none}
.trip-days-body{padding:40px 24px 45px}
.itinerary-head{display:block;margin-bottom:28px}
.itinerary-intro{max-width:none;margin-top:24px}
.route-line{gap:12px 18px}
.itinerary-layout{grid-template-columns:1fr;gap:30px}
.journey-map{position:relative;top:auto;grid-row:1;width:100%;max-width:460px;margin:0 auto 12px}
.journey-map img{max-height:460px;object-fit:contain}
.day summary{grid-template-columns:54px 1fr 22px;gap:14px}
.day-copy{padding:0 15px 28px 0}
.trip-signature{padding:15px 24px 55px}
.carousel-track{gap:20px}
.carousel-track figure{flex-basis:88%}
.carousel-track img{height:310px}
.carousel-heading h2{font-size:34px}
.carousel-controls{gap:8px 10px;flex-wrap:wrap}
.carousel-controls button{padding:11px 12px;font-size:12px;letter-spacing:.06em}
.included{grid-template-columns:1fr;padding:60px 24px;gap:25px}
.trip-personal{grid-template-columns:1fr;padding:60px 24px;gap:20px}
.trip-personal img{height:130px;width:130px}
.advisor-portrait{text-align:left}
.advisor-actions{align-items:stretch}
.trip-contact h2{font-size:clamp(32px,10.8vw,42px)}
.contact-actions{width:100%;min-width:0}
.enquire-button{font-size:14px;padding:21px 20px}
.trip-breadcrumb{font-size:13px;padding:15px 24px}
.trip-facts{padding:32px 24px;gap:24px}
.trip-facts>div{min-height:44px;padding-left:56px}
.trip-facts dt{padding-top:0}
.fact-icon{width:44px;height:44px;padding:10px}
.trip-facts dd{font-size:16px}
}
@media(max-width:650px){.trip-intro .lead{font-size:24px}}
/* Phones: the facts band keeps two columns, with the icon above the label. */
@media(max-width:560px){.trip-facts>div{min-height:0;padding-left:0;padding-top:54px}}
@media(max-width:360px){.carousel-controls{gap:8px}.carousel-controls button{padding:11px 8px;letter-spacing:.04em}}
@media(prefers-reduced-motion:reduce){.cover-track{scroll-behavior:auto}.lightbox .is-loading:before{animation-duration:2.4s}.gallery-item:hover img,.day-photo:hover img,.video-play:hover span{transform:none}}

/* Optional content: when the neighbouring block is missing (no photo, no map, no list, no advisor) the remaining one takes the full width. */
.trip-opening>.trip-divider-copy:only-child,.itinerary-layout>.day-list:only-child,.included>div:only-child,.trip-personal>div:only-child{grid-column:1/-1}
.trip-intro>div:only-child{grid-column:1/-1;max-width:820px}
/* Carousel controls: journey.js hides them when every photo is already in view. */
.carousel-controls[hidden]{display:none}
/* No heading above the photos: on wide screens the controls keep their place on the right. */
@media(min-width:1001px){.carousel-heading>.carousel-controls:only-child{margin-left:auto}}
/* Other languages: a very long word wraps inside its column instead of widening the page (phones especially). */
.trip-breadcrumb,.trip-divider,.trip-facts,.trip-intro,.trip-days,.trip-signature,.included,.trip-personal,.trip-contact,.trip-gallery,.trip-video{overflow-wrap:break-word}
.trip-divider-copy,.trip-facts>div,.trip-intro>div,.itinerary-head>*,.itinerary-layout>*,.day summary>span,.carousel-heading>div:not(.carousel-controls),.carousel-track figure,.included>*,.trip-personal>div,.trip-contact>div:first-child,.trip-band h2{min-width:0}
.carousel-heading>div:not(.carousel-controls),.trip-contact>div:first-child{max-width:100%}

/* Final checks (2026-10-14) */
/* A place name stays whole on its line ("San Gimignano", "Gulf of Orosei"); lines break only after a " · ". */
.trip-facts .place,.opening-places .place{white-space:nowrap}
/* Chinese: place names and labels never break inside a name (they may only where nothing else fits). */
html[lang^="zh"] :is(.trip-facts dd,.opening-places,.day .location,.trip-divider-copy .eyebrow){word-break:keep-all;overflow-wrap:anywhere}
html[lang^="zh"] :is(.trip-facts .place,.opening-places .place){white-space:normal}
/* The highlights counter keeps its width next to its buttons (French "1–3 sur 6" was squeezed under "Suivant"). */
.carousel-heading>.carousel-controls,.carousel-status{flex-shrink:0}
/* Balanced lines: no word left alone at the end of a day title, a highlight title or the story title. */
.day summary h3,.signature-grid h3,.trip-intro h2{text-wrap:balance}
/* Titles written on two lines (a <br> in the admin): each line is balanced on its own, so no word is left alone at its end. */
.title-line{display:block;text-wrap:balance}
.carousel-heading h2{text-wrap:balance}
/* Very narrow phones: the facts in one column, icon on the left, so long place names keep their line. */
@media(max-width:360px){.trip-facts{grid-template-columns:minmax(0,1fr)}.trip-facts>div{min-height:44px;padding-top:0;padding-left:56px}}
@media(min-width:1101px) and (max-width:1120px){.trip-facts>div{padding-left:0;padding-top:66px}}