/* Range and stay pages: hero slider, phone reading order, roadmap, testimonials and
   "more to explore" suggestions. Loaded only on safari and stay detail pages. */

/* ---- Hero slider -------------------------------------------------------------------------- */
.ds-host{position:relative}
.ds-slider{position:relative;width:100%;height:100%;overflow:hidden;background:var(--forest)}
.ds-track{display:flex;width:100%;height:100%;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline:none}
.ds-track::-webkit-scrollbar{display:none}
.ds-track:focus-visible{box-shadow:inset 0 0 0 3px var(--orange)}
.ds-slide{position:relative;flex:0 0 100%;width:100%;height:100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.ds-slide>img,.ds-slide>video{display:block;width:100%;height:100%;object-fit:cover}
/* Translucent arrows hint that the hero slides; touch screens swipe instead. */
.ds-arrow{position:absolute;top:50%;z-index:4;display:grid;place-items:center;width:clamp(40px,4vw,52px);height:clamp(40px,4vw,52px);margin:0;padding:0;transform:translateY(-50%);border:1px solid #fcf9f266;border-radius:50%;background:#1b2a1e4d;color:var(--cream);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:.75;cursor:pointer;transition:opacity .2s,background .2s}
.ds-arrow svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ds-prev{left:clamp(10px,2vw,22px)}.ds-next{right:clamp(10px,2vw,22px)}
.ds-slider:hover .ds-arrow,.ds-arrow:focus-visible{opacity:1}
.ds-arrow:hover{background:#1b2a1e8c}
.ds-arrow:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media(hover:none){.ds-arrow{display:none}}
.ds-dots{position:absolute;left:50%;bottom:clamp(10px,2vh,22px);z-index:4;display:flex;gap:7px;max-width:calc(100% - 32px);padding:6px 9px;transform:translateX(-50%);border-radius:999px;background:#1b2a1e47;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ds-dots button{flex:none;width:7px;height:7px;min-height:0;margin:0;padding:0;border:0;border-radius:999px;background:#fcf9f28c;cursor:pointer;transition:width .25s,background .25s}
.ds-dots button[aria-current]{width:20px;background:var(--orange)}
.ds-dots button:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
/* Phones and tablets: the slider is the cover photo, at a steady proportion. */
@media(max-width:1279.98px){
  .dh-cover>.visual-media.ds-host{height:auto}
  .ds-cover{height:auto;aspect-ratio:4/3;max-height:75svh}
}
@media(min-width:700px) and (max-width:1279.98px){.ds-cover{aspect-ratio:16/9;max-height:70svh}}
/* Desktop hero: arrows at the left and right edges (mid-height, clear of the headline copy and
   of the floating help buttons); dots at the top right, level with the title pill. */
@media(min-width:1280px){
  .ds-hero{position:absolute;inset:0}
  .ds-hero .ds-prev{left:clamp(14px,1.6vw,28px)}
  .ds-hero .ds-next{right:clamp(14px,1.6vw,28px)}
  .ds-hero .ds-dots{left:auto;right:var(--gutter);top:clamp(22px,2.6vw,38px);bottom:auto;transform:none}
}
@media(prefers-reduced-motion:reduce){.ds-dots button{transition:none}}

/* ---- Short description under the slider (phones and tablets) ------------------------------ */
.dp-lead{display:none}
@media(max-width:1279.98px){
  body:has(.dp-flow) .page-intro .lead{display:none}
  .dp-lead{display:block;margin:0 0 18px;color:var(--forest);font:400 clamp(16px,2.2vw,19px)/1.55 var(--body)}
}

/* ---- Phone reading order -------------------------------------------------------------------
   Ranges: description, text, price box, roadmap, highlights, gallery.
   Stays:  description, text, amenities, highlights, gallery, stay note. */
@media(max-width:850px){
  .dp-flow{display:flex;flex-direction:column;gap:0;padding-top:clamp(20px,5vw,36px)}
  .dp-flow>.prose,.dp-flow>.detail-aside{display:contents}
  .dp-flow .dp-lead{order:1}
  .dp-flow .dp-body{order:2}
  .dp-safari .booking-note{order:3;margin:22px 0 4px}
  .dp-flow .dp-roadmap{order:4}
  .dp-flow .dp-amenities{order:5}
  .dp-flow .dp-highlights{order:6}
  .dp-flow .dp-gallery{order:7}
  .dp-stay .booking-note{order:8;margin-top:30px}
  .dp-flow .dp-amenities,.dp-flow .dp-highlights,.dp-flow .dp-gallery{margin-top:8px}
}

/* ---- Roadmap ------------------------------------------------------------------------------ */
.dp-roadmap{margin:clamp(30px,5vw,56px) 0 clamp(10px,2vw,24px)}
.dp-roadmap .eyebrow{margin-bottom:6px}
.dp-steps{--dp-progress:1;position:relative;margin:22px 0 0;padding:0;list-style:none}
.dp-steps::before,.dp-steps::after{content:"";position:absolute;left:11px;top:10px;bottom:22px;width:2px;border-radius:2px;background:var(--line)}
.dp-steps::after{background:var(--sand);transform:scaleY(var(--dp-progress));transform-origin:top}
.dp-step{position:relative;display:flex;align-items:flex-start;gap:clamp(12px,2vw,18px);padding:0 0 clamp(20px,3vw,28px) 40px}
.dp-step::before{content:"";position:absolute;left:3px;top:6px;z-index:1;width:18px;height:18px;border-radius:50%;background:var(--sand);box-shadow:0 0 0 4px var(--cream)}
.dp-step-photo{flex:none;width:clamp(64px,15vw,96px);aspect-ratio:1;overflow:hidden;border-radius:14px;background:var(--line);box-shadow:0 8px 20px -12px #1b2a1e66}
.dp-step-photo img{display:block;width:100%;height:100%;object-fit:cover}
.dp-step-copy{min-width:0}
.dp-step-time{margin:0 0 3px;color:color-mix(in srgb,var(--sand) 55%,var(--forest));font:700 13px/1.3 var(--body);letter-spacing:.03em}
.dp-step h3{margin:0 0 4px;color:var(--forest);font:700 clamp(17px,1.6vw,20px)/1.25 var(--body)}
.dp-step p{margin:0;color:var(--muted);font-size:clamp(14px,1.2vw,16px);line-height:1.5}
.dp-steps.is-animated .dp-step{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s var(--tv-ease-reveal,ease)}
.dp-steps.is-animated .dp-step.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.dp-steps .dp-step{opacity:1!important;transform:none!important;transition:none!important}.dp-steps::after{transform:none}}
html.reduce-motion .dp-steps .dp-step{opacity:1!important;transform:none!important;transition:none!important}

/* Section heads, horizontal rows and testimonials moved to testimonials.css (also used on the homepage). */

/* ---- More to explore ---------------------------------------------------------------------- */
.dp-related{padding-top:clamp(28px,5vw,72px)}
.dp-related>h2{margin-bottom:6px}
.dp-related-group{margin-top:clamp(22px,3vw,36px)}
.dp-related-group h3{font:600 clamp(18px,1.6vw,22px)/1.2 var(--display)}
.dp-more{white-space:nowrap}
.dp-cards>.experience-card{flex:0 0 clamp(250px,76vw,340px);margin:0}
@media(min-width:1100px){
  .dp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;scroll-snap-type:none}
  .dp-cards>.experience-card{flex:none}
}

/* ---- Phone price bar joined to the navigation --------------------------------------------
   The bar floats above the navigation's raised Home button; a cream band fills the space under
   it (and behind the navigation's rounded top corners) so no page content shows through and
   bar + navigation read as one panel. */
@media(max-width:1279.98px){
  body.pricebar-shown.pricebar-dock:has(.dh-pricebar.has-price:not(.is-hidden))::after{content:"";position:fixed;left:0;right:0;bottom:0;z-index:43;height:calc(var(--pricebar-dock,0px) + 28px + var(--pricebar-height,64px)/2);background:var(--cream);pointer-events:none}
}

/* ---- Tablets: the cover photo is never tucked under the page sheet ---------------------- */
@media(max-width:1279.98px){
  body:has(.dh-hero) .curtain-page.curtain-enabled{background:var(--cream)}
  body:has(.dh-hero) .curtain-page.curtain-enabled>.curtain-sheet{margin-top:0}
  body:has(.ds-cover) .dh-cover{height:auto;max-height:none}
}

/* ---- Breathing room between amenities, highlights, roadmap and gallery ------------------- */
.dp-amenities{margin-bottom:clamp(8px,2vw,16px)}
.dp-gallery{margin-top:clamp(30px,4.5vw,56px)}

/* ---- What makes it different: soft cards with a leaf mark --------------------------------- */
.dp-highlights{margin:clamp(34px,5vw,60px) 0 clamp(26px,4vw,48px)}
.dp-highlights h2{margin-bottom:16px}
.dp-highlights .tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px;margin:0}
.dp-highlights .tags span{position:relative;display:flex;align-items:center;min-height:56px;margin:0;padding:14px 16px 14px 46px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--sage) 18%,var(--cream)) 0%,var(--cream) 72%);color:var(--forest);font:600 15px/1.3 var(--body);letter-spacing:0;text-transform:none;box-shadow:0 10px 24px -20px #1b2a1e80}
.dp-highlights .tags span::before{content:"";position:absolute;left:17px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:0 100%;background:var(--orange);transform:rotate(-8deg)}

/* ---- Amenities on phones: two columns, first 8 shown, then "Show all" ---------------------- */
.dp-amenities-more{display:none}
@media(max-width:850px){
  .dp-amenities .amenities{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
  .dp-amenities .amenities li{padding:9px 0;font-size:13.5px;line-height:1.35}
  .dp-amenities .amenities[data-collapsed] li:nth-child(n+9){display:none}
  .dp-amenities-more:not([hidden]){display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;padding:9px 18px;border:1px solid var(--forest);border-radius:999px;background:transparent;color:var(--forest);font:600 13px/1 var(--body);cursor:pointer}
}

/* ---- Roadmap on wider screens: a horizontal timeline that scrolls sideways when needed ----- */
@media(min-width:851px){
  .dp-steps{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 2px 14px;scrollbar-width:thin}
  .dp-steps::before,.dp-steps::after{display:none}
  .dp-step{flex:0 0 clamp(168px,21%,220px);flex-direction:column;gap:12px;padding:30px 0 0;scroll-snap-align:start}
  .dp-step::before{left:0;top:2px}
  .dp-step::after{content:"";position:absolute;top:10px;left:24px;right:-14px;height:2px;border-radius:2px;background:var(--line);transition:background .6s ease .2s}
  .dp-step:last-child::after{display:none}
  .dp-step.is-in::after{background:var(--sand)}
  .dp-step-photo{width:100%;aspect-ratio:4/3}
  .dp-steps.is-animated .dp-step{transform:translateX(18px)}
}

/* ---- Chat on phones and short screens ---------------------------------------------------
   The chat is a full-screen sheet there (assistant.css). The price-bar rule that lifts the chat
   panel on tablets must not shrink that sheet to half height on range and stay pages. */
@media(max-width:600px),(max-height:560px){
  body.pricebar-shown.pricebar-dock .travel-assistant{bottom:auto;height:var(--chat-vh,100dvh)}
}

/* ---- Roadmap animation --------------------------------------------------------------------
   As each step reaches the screen: it rises in (staggered), its dot pops with a soft ripple,
   the photo is revealed with a wipe and settles from a slow zoom, and on wider screens the
   connecting line draws itself to the next step. Off for reduced motion. */
@keyframes dp-pop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes dp-ripple{0%{box-shadow:0 0 0 4px var(--cream),0 0 0 4px rgba(212,163,115,.6)}100%{box-shadow:0 0 0 4px var(--cream),0 0 0 20px rgba(212,163,115,0)}}
.dp-steps .dp-step:nth-child(2){--dp-d:.12s}.dp-steps .dp-step:nth-child(3){--dp-d:.24s}.dp-steps .dp-step:nth-child(4){--dp-d:.36s}
.dp-steps .dp-step:nth-child(5){--dp-d:.48s}.dp-steps .dp-step:nth-child(6){--dp-d:.6s}.dp-steps .dp-step:nth-child(7){--dp-d:.72s}
.dp-steps .dp-step:nth-child(8){--dp-d:.84s}.dp-steps .dp-step:nth-child(9){--dp-d:.96s}.dp-steps .dp-step:nth-child(n+10){--dp-d:1.08s}
.dp-steps.is-animated .dp-step{transition-delay:var(--dp-d,0s)}
.dp-steps.is-animated .dp-step::before{transform:scale(0)}
.dp-steps.is-animated .dp-step.is-in::before{animation:dp-pop .6s cubic-bezier(.34,1.56,.64,1) calc(var(--dp-d,0s) + .1s) both,dp-ripple 1.4s ease-out calc(var(--dp-d,0s) + .45s) 1}
.dp-steps.is-animated .dp-step-photo{clip-path:inset(0 100% 0 0 round 14px);transition:clip-path .9s var(--tv-ease-reveal,ease) calc(var(--dp-d,0s) + .15s)}
.dp-steps.is-animated .dp-step.is-in .dp-step-photo{clip-path:inset(0 0 0 0 round 14px)}
.dp-steps .dp-step-photo img{transition:transform 1.4s var(--tv-ease-reveal,ease)}
.dp-steps.is-animated .dp-step:not(.is-in) .dp-step-photo img{transform:scale(1.18)}
.dp-step-photo:hover img{transform:scale(1.06)}
.dp-steps::after{box-shadow:0 0 12px rgba(212,163,115,.55)}
@media(min-width:851px){
  .dp-steps.is-animated .dp-step::after{transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--tv-ease-reveal,ease) calc(var(--dp-d,0s) + .5s),background .6s ease calc(var(--dp-d,0s) + .5s)}
  .dp-steps.is-animated .dp-step.is-in::after{transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce){
  .dp-steps .dp-step::before,.dp-steps .dp-step::after{animation:none!important;transform:none!important;transition:none!important}
  .dp-steps .dp-step-photo{clip-path:none!important;transition:none!important}
  .dp-steps .dp-step-photo img{transform:none!important;transition:none!important}
}
html.reduce-motion .dp-steps .dp-step::before,html.reduce-motion .dp-steps .dp-step::after{animation:none!important;transform:none!important;transition:none!important}
html.reduce-motion .dp-steps .dp-step-photo{clip-path:none!important;transition:none!important}
html.reduce-motion .dp-steps .dp-step-photo img{transform:none!important;transition:none!important}
/* Weekly closed days: a short auto-scrolling notice along the top edge of a range's hero. Booking is blocked on those days; pages stay open. */
.dg-hero{position:relative}
.weekly-closed-notice{position:absolute;inset:0 0 auto;z-index:3;overflow:hidden;white-space:nowrap;padding:9px 0;background:#1b2a1ee8;color:#fcf9f2;border-bottom:1px solid #ffffff24;font:600 13px/1.4 var(--body)}
.weekly-closed-notice.is-today{background:#7a2e1ee8}
.weekly-closed-notice p{margin:0}
.weekly-closed-notice span{display:inline-block;padding-left:100%;animation:weekly-closed-scroll 34s linear infinite}
.weekly-closed-notice:hover span,.weekly-closed-notice:focus-within span{animation-play-state:paused}
@keyframes weekly-closed-scroll{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.weekly-closed-notice{white-space:normal;text-align:center;padding:9px 16px}.weekly-closed-notice span{padding-left:0;animation:none}}