/* ==========================================================================
   Testimonials and horizontal rows, shared by range/stay pages and the homepage.
   Rows marked data-glide slide continuously (glide-rows.js) and can still be
   swiped or scrolled by hand. Video testimonials sit under the written quotes.
   ========================================================================== */

/* ---- Shared section head + horizontal rows ---------------------------------------------- */
.dp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.dp-head h2,.dp-head h3{margin:0}
.dp-row{display:flex;gap:clamp(14px,2vw,24px);margin:22px 0 0;padding:4px 2px 16px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain}
.dp-row>*{scroll-snap-align:start;min-width:0}
.dp-row-nav{display:flex;gap:8px}
.dp-row-btn{display:grid;place-items:center;width:44px;height:44px;min-height:0;padding:0;border:1px solid var(--forest);border-radius:50%;background:transparent;color:var(--forest);cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.dp-row-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dp-row-btn:hover:not(:disabled){background:var(--forest);color:var(--cream)}
.dp-row-btn:disabled{opacity:.35;cursor:default}
.dp-row-btn[hidden]{display:none}
@media(hover:none){.dp-row-nav{display:none}}

/* ---- Testimonials ------------------------------------------------------------------------- */
.dp-testimonials{padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(24px,4vw,56px)}
.dp-quote{flex:0 0 clamp(268px,82vw,380px)}
@media(min-width:1100px){.dp-quote{flex-basis:calc((100% - 48px)/3)}}
.dp-quote figure{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;margin:0;padding:clamp(20px,2.4vw,30px);border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--cream) 70%,#fff);box-shadow:0 12px 30px -20px #1b2a1e55}
.dp-quote figure::before{content:"\201C";position:absolute;top:4px;right:18px;color:var(--sand);opacity:.4;font:700 76px/1 var(--display);pointer-events:none}
.dp-stars{margin:0;color:#d9cfbd;font-size:16px;letter-spacing:2px}
.dp-stars .on{color:var(--orange)}
.dp-quote blockquote{flex:1;margin:0}
.dp-quote blockquote p{margin:0;color:var(--forest);font:400 clamp(15px,1.25vw,17px)/1.6 var(--body)}
.dp-quote figcaption{display:flex;align-items:center;gap:12px;min-width:0}
.dp-avatar{flex:none;width:46px;height:46px;overflow:hidden;border-radius:50%;background:var(--green)}
.dp-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.dp-initials{display:grid;place-items:center;color:var(--cream);font:700 18px/1 var(--display)}
.dp-who{min-width:0}
.dp-who strong{display:block;color:var(--forest);font:700 15px/1.25 var(--body)}
.dp-who span{display:block;color:var(--muted);font-size:13px;line-height:1.35}

/* ---- Continuous glide (glide-rows.js adds .is-gliding only when a row overflows) -------------- */
/* Snap would fight the slow continuous motion, so it is off while a row glides. */
.dp-row.is-gliding{scroll-snap-type:none;scroll-behavior:auto;scrollbar-width:none}
.dp-row.is-gliding::-webkit-scrollbar{display:none}

/* ---- Video testimonials ------------------------------------------------------------------- */
/* One row from the left, sized by how many there are: 1, 2 side by side, 3 or 4 in a row on wide screens (2 per
   screen below that). When they do not all fit on the line, the row becomes the same endless, swipeable carousel as
   the written notes (glide-rows.js). Never centred: centring would push loop copies past the left edge. */
.dp-videos-block{margin-top:clamp(30px,4vw,52px)}
.dp-videos-title{margin:0;color:var(--forest);font:600 clamp(18px,1.6vw,22px)/1.2 var(--display)}
.dp-videos{--gap:clamp(14px,2vw,24px);--cols:1;--max-w:440px;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:var(--gap);margin:18px 0 0;padding:4px 2px 16px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.dp-videos::-webkit-scrollbar{display:none}
.dp-videos.is-2{--cols:2}
.dp-videos.is-3{--cols:3;--max-w:400px}
.dp-videos.is-4{--cols:4;--max-w:340px}
.dp-video{flex:0 0 calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));min-width:0;max-width:var(--max-w)}
.dp-video figure{display:flex;flex-direction:column;height:100%;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--cream) 70%,#fff);box-shadow:0 12px 30px -20px #1b2a1e55}
.dp-video-frame{position:relative;aspect-ratio:3/4;background:var(--forest)}
.dp-video-play{position:absolute;inset:0;z-index:1;display:block;overflow:hidden;color:var(--cream)}
.dp-video-play img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .4s}
.dp-video-play::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,#1b2a1e99)}
.dp-video-play:hover img{transform:scale(1.04)}
.dp-video-play:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.dp-video-icon{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--orange);color:var(--forest);box-shadow:0 10px 30px -10px #000a;transform:translate(-50%,-50%);transition:transform .3s,opacity .3s}
.dp-video-play:hover .dp-video-icon,.dp-video-play:focus-visible .dp-video-icon{transform:translate(-50%,-50%) scale(1.08)}
.dp-video-icon svg{width:28px;height:28px;margin-left:3px;fill:currentColor}
/* The muted preview fills the frame; once someone watches with sound, the whole video shows
   (letterboxed), whatever its shape, with the player controls. */
.dp-video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--forest)}
.dp-video-frame.is-watching video{object-fit:contain;background:#000}
.dp-video-frame.is-watching .dp-video-play{display:none}
.dp-video-frame.is-previewing .dp-video-play img{opacity:0}
.dp-video-frame.is-previewing .dp-video-icon{opacity:0}
.dp-video-sound{position:absolute;left:12px;bottom:12px;z-index:1;display:none;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:#1b2a1ecc;color:var(--cream);font:600 12px/1 var(--body);letter-spacing:.02em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dp-video-sound svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dp-video-frame.is-previewing .dp-video-sound{display:inline-flex}
.dp-video-frame.is-previewing .dp-video-play:hover .dp-video-sound{background:var(--orange);color:var(--forest)}
/* Player controls while watching with sound: a tap anywhere on the picture plays or pauses it
   (a large play button shows while paused); the bar holds play/pause, progress, mute/unmute and
   full screen. */
.dp-video-controls{display:none}
.dp-video-frame.is-watching .dp-video-controls{display:block}
.dp-video-toggle{position:absolute;inset:0 0 52px;z-index:2;display:grid;place-items:center;width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--forest);cursor:pointer}
.dp-video-toggle svg{width:68px;height:68px;padding:20px 18px 20px 22px;border-radius:50%;background:var(--orange);fill:currentColor;box-shadow:0 10px 30px -10px #000a;opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s}
.dp-video-controls.is-paused .dp-video-toggle svg{opacity:1;transform:none}
.dp-video-toggle:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.dp-video-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:4px;padding:8px 10px;background:linear-gradient(180deg,transparent,#000000b3);color:#fff}
.dp-video-bar button{display:grid;place-items:center;flex:none;width:36px;height:36px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.dp-video-bar button:hover,.dp-video-bar button:focus-visible{background:#ffffff2e}
.dp-video-bar svg{width:20px;height:20px;fill:currentColor}
.dp-video-bar svg.is-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dp-video-progress{flex:1;height:3px;margin:0 6px;overflow:hidden;border-radius:3px;background:#ffffff4d}
.dp-video-progress i{display:block;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}
.dp-video-frame:fullscreen{width:100%;height:100%;aspect-ratio:auto;background:#000}
.dp-video figcaption{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px}
.dp-video figcaption .dp-stars{margin-bottom:4px}
.dp-video figcaption strong{color:var(--forest);font:700 15px/1.25 var(--body)}
.dp-video figcaption span{color:var(--muted);font-size:13px;line-height:1.35}
.dp-video figcaption p:not(.dp-stars){display:-webkit-box;margin:6px 0 0;overflow:hidden;color:var(--forest);font-size:14px;line-height:1.5;-webkit-line-clamp:3;-webkit-box-orient:vertical}
@media(max-width:1099px){.dp-videos.is-4{--cols:2;--max-w:400px}}
@media(max-width:860px){.dp-videos.is-3{--cols:2}}
/* Phones: written and video testimonials become a centred carousel. One card sits in the middle
   (84% of the width) with an equal slice of its neighbours on each side; glide-rows.js slides it
   along and loops it (.is-stepping). A single card fills the width. */
@media(max-width:640px){
  .dp-testimonials{container-type:inline-size}
  .dp-videos.is-many{flex-wrap:nowrap;justify-content:flex-start;padding-bottom:10px;overflow-x:auto;overscroll-behavior-x:contain}
  .dp-testimonials .dp-quotes,.dp-videos.is-many{gap:3cqw;scroll-snap-type:x mandatory}
  .dp-testimonials .dp-quote,.dp-videos.is-many .dp-video{flex:0 0 84cqw;max-width:none;scroll-snap-align:center}
  .dp-testimonials .dp-quote:only-child,.dp-videos.is-1 .dp-video{flex-basis:100%}
  .dp-testimonials .is-stepping{scrollbar-width:none;scroll-behavior:auto}
  .dp-testimonials .is-stepping.is-sliding{scroll-snap-type:none}
  .dp-testimonials .is-stepping::-webkit-scrollbar{display:none}
  /* Without the carousel (reduced motion) the first and last cards can still reach the middle. */
  .dp-testimonials .dp-quotes:not(.is-stepping),.dp-videos.is-many:not(.is-stepping){padding-inline:8cqw}
}
@media(prefers-reduced-motion:reduce){.dp-video-play img,.dp-video-icon{transition:none}}
html.reduce-motion .dp-video-play img,html.reduce-motion .dp-video-icon{transition:none}
/* Written quotes glide continuously on phones too: no snapping while the row is gliding. */
.dp-testimonials .dp-quotes.is-gliding{scroll-snap-type:none}
/* Smooth glide (glide-rows.js): the cards shift together by --glide-x while the row glides (no scrolling, so no shaking edges). */
.dp-row.is-gliding>*,.dp-videos.is-gliding>*{translate:calc(var(--glide-x,0px) * -1) 0;will-change:translate}
.dp-videos.is-gliding{scroll-snap-type:none;scroll-behavior:auto}
/* Guest notes cards, in the site's field-journal look: a framed paper card with the hard forest offset shadow and a
   folded paper corner, a large outlined quote mark as a faint watermark behind the words, the stars in a soft orange pill,
   the words in the display face, and a dashed line above the guest, whose photo wears an orange ring. On a mouse, the
   card lifts and its shadow turns orange. Sizes and the row's layout are unchanged. */
.dp-quote figure{gap:18px;padding:clamp(24px,2.4vw,30px) clamp(20px,2.2vw,28px) clamp(18px,2vw,24px);border:1px solid var(--forest);border-radius:4px;background:linear-gradient(165deg,#fffdf8 0%,#fbf6ec 60%,#f3e8d6 100%);box-shadow:6px 6px 0 var(--forest);transition:translate .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1)}
.dp-quote figure::before{content:"\201D";top:clamp(14px,1.6vw,20px);right:clamp(46px,4.6vw,58px);bottom:auto;z-index:0;height:.62em;overflow:hidden;color:transparent;opacity:.7;-webkit-text-stroke:1.5px var(--orange);font:700 clamp(92px,8vw,112px)/.86 Georgia,"Times New Roman",serif}
.dp-quote figure::after{content:"";position:absolute;top:-1px;right:-1px;width:30px;height:30px;border-bottom:1px solid var(--forest);border-left:1px solid var(--forest);border-radius:0 0 0 5px;background:linear-gradient(225deg,var(--cream) 0 50%,#ead9bb 50% 100%);box-shadow:-3px 3px 6px -2px #1b2a1e33,7px 0 0 var(--cream),7px 7px 0 var(--cream);pointer-events:none}
.dp-quote figure>*{position:relative;z-index:1}
.dp-quote .dp-stars{display:inline-flex;align-self:flex-start;gap:2px;padding:5px 11px 4px;border:1px solid #e6a15c73;border-radius:999px;background:#e6a15c17;font-size:14px;line-height:1;letter-spacing:1px}
.dp-quote blockquote p{font:400 clamp(16px,1.3vw,18px)/1.6 var(--display);letter-spacing:-.005em;overflow-wrap:anywhere}
.dp-quote figcaption{padding-top:16px;border-top:1px dashed #1b2a1e47}
.dp-quote .dp-avatar{width:48px;height:48px;box-shadow:0 0 0 2px #fffdf8,0 0 0 3px var(--orange)}
.dp-quote .dp-initials{background:var(--forest)}
.dp-quote .dp-who strong{font:600 16px/1.25 var(--display);letter-spacing:-.01em}
.dp-quote .dp-who span{margin-top:3px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
@media(hover:hover){.dp-quote figure:hover{translate:-3px -3px;box-shadow:9px 9px 0 var(--orange)}}
@media(prefers-reduced-motion:reduce){.dp-quote figure{transition:none}}
html.reduce-motion .dp-quote figure{transition:none}
/* Video testimonial cards, matching the guest notes: a framed paper card with the hard forest offset shadow, the
   film in its own framed window with a small orange "Guest film" tag, the stars in a soft orange pill, the name in
   the display face and a dashed line above the guest's words. On a mouse the card lifts and its shadow turns orange.
   Sizes, playback and the carousel are unchanged. */
.dp-video figure{border:1px solid var(--forest);border-radius:4px;background:linear-gradient(165deg,#fffdf8 0%,#fbf6ec 60%,#f3e8d6 100%);box-shadow:6px 6px 0 var(--forest);transition:translate .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1)}
.dp-video .dp-video-frame{margin:10px 10px 0;border:1px solid var(--forest);border-radius:2px;overflow:hidden}
.dp-video .dp-video-frame::before{content:"\2733  Guest film";position:absolute;top:10px;left:10px;z-index:3;padding:5px 10px 4px;border:1px solid var(--forest);border-radius:2px;background:var(--orange);color:var(--forest);font:700 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;box-shadow:2px 2px 0 var(--forest);pointer-events:none}
.dp-video .dp-video-frame.is-watching::before{display:none}
.dp-video figcaption{gap:5px;padding:16px 18px 20px}
.dp-video figcaption .dp-stars{display:inline-flex;align-self:flex-start;gap:2px;margin-bottom:6px;padding:5px 11px 4px;border:1px solid #e6a15c73;border-radius:999px;background:#e6a15c17;font-size:13px;line-height:1;letter-spacing:1px}
.dp-video figcaption strong{font:600 17px/1.25 var(--display);letter-spacing:-.01em}
.dp-video figcaption span{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.dp-video figcaption p:not(.dp-stars){margin-top:10px;padding-top:12px;border-top:1px dashed #1b2a1e47;font:400 15px/1.55 var(--display)}
@media(hover:hover){.dp-video figure:hover{translate:-3px -3px;box-shadow:9px 9px 0 var(--orange)}}
@media(prefers-reduced-motion:reduce){.dp-video figure{transition:none}}
html.reduce-motion .dp-video figure{transition:none}
/* Softer, easier on the eye: both card sets (written notes and films) trade the dark forest outline and heavy dark
   offset shadow for a warm sand outline and a light sand offset with a gentle blur. Same shapes, sizes and layout;
   on a mouse a card still lifts, now with a warm orange shadow. */
.dp-quote figure,.dp-video figure{border-color:#dccbab;box-shadow:5px 5px 0 #eadbc2,0 18px 34px -24px #1b2a1e40}
.dp-quote figure::after{border-color:#dccbab;box-shadow:-3px 3px 6px -2px #1b2a1e1f,7px 0 0 var(--cream),7px 7px 0 var(--cream)}
.dp-video .dp-video-frame{border-color:#dccbab}
.dp-video .dp-video-frame::before{border-color:#c98a4b;box-shadow:2px 2px 0 #1b2a1e33}
.dp-quote figcaption,.dp-video figcaption p:not(.dp-stars){border-top-color:#1b2a1e2b}
@media(hover:hover){.dp-quote figure:hover,.dp-video figure:hover{box-shadow:8px 8px 0 #e6a15c8c,0 22px 38px -24px #1b2a1e4d}}
/* The written notes carry a small "I ❤️ Travella" stamp in the top corner instead of the quote mark, and the films
   no longer carry the "Guest film" tag. */
.dp-quote figure::before{content:"I \2764\FE0F  Travella";top:clamp(18px,1.8vw,22px);right:clamp(46px,4.4vw,56px);bottom:auto;height:auto;overflow:visible;padding:6px 12px 5px;border:1px dashed #d9b98f;border-radius:999px;background:#fffdf8;color:var(--forest);opacity:1;-webkit-text-stroke:0;font:700 13px/1 var(--display);letter-spacing:.01em;white-space:nowrap;transform:rotate(-4deg);box-shadow:0 6px 14px -10px #1b2a1e66}
.dp-video .dp-video-frame::before{content:none}
/* Card boundary: on the homepage safari, stay and field-notes collections and in "More to explore nearby", each card's
   photo or film and its text sit inside one slim, soft-edged card. The homepage's staggered cards keep their offset
   (the top padding that made it becomes an equal margin, so the line wraps the card only). */
.scroll-home .safari-section .experience-card,.scroll-home .stay-section .experience-card,.scroll-home .journal-section .experience-card,.dp-cards .experience-card{box-sizing:border-box;border:1px solid #dccbab;border-radius:6px;background:#fffdf8;padding:10px 10px 16px;box-shadow:0 16px 30px -26px #1b2a1e4d}
.scroll-home .safari-section .experience-card>:not(.card-image),.scroll-home .stay-section .experience-card>:not(.card-image),.scroll-home .journal-section .experience-card>:not(.card-image),.dp-cards .experience-card>:not(.card-image){padding-inline:6px}
.scroll-home .safari-section .experience-card>.card-image,.scroll-home .stay-section .experience-card>.card-image,.scroll-home .journal-section .experience-card>.card-image,.dp-cards .experience-card>.card-image{border-radius:3px}
.scroll-home .safari-section .experience-card:nth-child(3n + 2),.scroll-home .stay-section .experience-card:nth-child(3n + 2){padding-top:10px;margin-top:55px}
.scroll-home .safari-section .experience-card:nth-child(3n),.scroll-home .stay-section .experience-card:nth-child(3n){padding-top:10px;margin-top:110px}
@media(max-width:850px){
  .scroll-home .safari-section .experience-card:nth-child(3n + 2),.scroll-home .stay-section .experience-card:nth-child(3n + 2){margin-top:28px}
  .scroll-home .safari-section .experience-card:nth-child(3n),.scroll-home .stay-section .experience-card:nth-child(3n){margin-top:55px}
  .scroll-home .journal-section .experience-card:nth-child(3n + 2){margin-top:28px}
  .scroll-home .journal-section .experience-card:nth-child(3n){margin-top:55px}
}
@media(max-width:600px){
  .scroll-home .safari-section .experience-card:nth-child(n),.scroll-home .stay-section .experience-card:nth-child(n),.scroll-home .journal-section .experience-card:nth-child(n){padding-top:10px;margin-top:0}
}
/* Clean, plain card surface for the written notes and the films (no tinted gradient). */
.dp-quote figure,.dp-video figure{background:#fff}
.dp-quote figure::after{background:linear-gradient(225deg,var(--cream) 0 50%,#efe6d6 50% 100%)}
/* Field notes share the safari and stay rows' web layout: the same staggered offsets and photo height. */
@media(min-width:601px){
  .scroll-home .journal-section .experience-card:nth-child(2n){padding-top:10px;margin-top:0}
  .scroll-home .journal-section .experience-card:nth-child(3n + 2){padding-top:10px;margin-top:55px}
  .scroll-home .journal-section .experience-card:nth-child(3n){padding-top:10px;margin-top:110px}
  .scroll-home .journal-section .card-image{aspect-ratio:auto;height:350px}
}
@media(min-width:1600px){.scroll-home .journal-section .card-image{height:430px}}
@media(min-width:851px) and (max-width:1100px){.scroll-home .journal-section .card-image{height:280px}}
@media(min-width:601px) and (max-width:850px){
  .scroll-home .journal-section .experience-card:nth-child(3n + 2){margin-top:28px}
  .scroll-home .journal-section .experience-card:nth-child(3n){margin-top:55px}
  .scroll-home .journal-section .card-image{height:220px}
}
/* Simple and calm: no stamp, no folded corner, a light soft shadow, plain stars. */
.dp-quote figure::before,.dp-quote figure::after{content:none}
.dp-quote figure,.dp-video figure{border-color:#e8dcc6;box-shadow:0 10px 26px -18px #1b2a1e33}
.dp-quote .dp-stars,.dp-video figcaption .dp-stars{padding:0;border:0;background:none}
@media(hover:hover){.dp-quote figure:hover,.dp-video figure:hover{translate:0 -2px;box-shadow:0 16px 32px -18px #1b2a1e40}}