/* Section 6 - Destination. Page is NOT pinned - it scrolls normally.
   Layout (from the reference): [2 stacked images] [ CENTER image ] [2 stacked images]
   Scrolling down: the CENTER gets wider, left images move LEFT, right images move RIGHT (their size never changes).
   Everything is in % of the screen width, so it scales with the window automatically.
   JS only sets --p (0 = closed, 1 = fully open) on .destination__mosaic. */
.destination{position:relative;padding:110px 0 0;background:#F5F1E9;overflow:hidden;overflow:clip}

.destination__head{text-align:center;padding:0 24px;margin:0 auto 72px}
.destination__eyebrow{display:inline-flex;align-items:center;gap:36px;margin:0 0 22px;font:300 14px/14.4px "Jost",sans-serif;letter-spacing:3.2px;text-transform:uppercase;color:#A77F68}
.destination__eyebrow::before{content:"";width:40px;height:1px;background:#A77F68}
.destination__heading{margin:0 0 26px;font:300 82px/1.1 "Cormorant Garamond",serif;letter-spacing:.16px;text-transform:capitalize;color:#1c1c1c}
.destination__text{margin:0 auto;max-width:940px;font:300 18px/28px "Jost",sans-serif;letter-spacing:.16px;color:#7a7a7a}

/* mosaic: FAR LEFT | LEFT | CENTER | RIGHT | FAR RIGHT (side columns hold 2 stacked images).
   Start = staggered arc (center highest). Scroll down: center widens, left columns go left, right columns go right,
   and every column rises to the same top. All sizes are % / vw, so it scales with the window. */
.destination__mosaic{
  --p:0;
  --c0:28.125%;                /* center width, closed */
  --c1:80%;                    /* center width, fully open */
  --win:21.875%;               /* left / right column width (never changes) */
  --wfar:11.67%;               /* far columns width (never changes) */
  --g:clamp(6px,1.25vw,24px);  /* gap between images */
  --s-in:4vw;                  /* how much lower the inner columns start */
  --s-far:6.8vw;               /* how much lower the far columns start */
  --wc:calc(var(--c0) + (var(--c1) - var(--c0)) * var(--p));
  --cl:calc(50% - var(--wc) / 2);          /* center: left edge  */
  --cr:calc(50% + var(--wc) / 2);          /* center: right edge */
  --dy:calc(1 - var(--p));                 /* 1 -> 0 while opening */
  position:relative;height:clamp(320px,44vw,880px);overflow:hidden}

.dtile{position:absolute;overflow:hidden;background:#e6e0d3}
.dtile__media{display:block;width:100%;height:100%;object-fit:cover}

/* center */
.dtile--c{z-index:2;top:0;height:100%;width:var(--wc);left:var(--cl)}
.dtile--c::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,calc(var(--p) * .3));pointer-events:none}
.dtile__over{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;margin:0;padding:24px;text-align:center;
  font:300 clamp(24px,3vw,56px)/1.1 "Cormorant Garamond",serif;color:#F8F4EB;opacity:calc((var(--p) - .2) * 2);transform:translateY(calc((1 - var(--p)) * 24px))}

/* every side image: height = half of the column; top images / bottom images */
.dtile--lt,.dtile--lb,.dtile--rt,.dtile--rb,
.dtile--flt,.dtile--flb,.dtile--frt,.dtile--frb{height:calc((100% - var(--g)) / 2)}

/* LEFT column */
.dtile--lt,.dtile--lb{width:var(--win);left:calc(var(--cl) - var(--g) - var(--win))}
.dtile--lt{top:calc(var(--s-in) * var(--dy))}
.dtile--lb{top:calc(var(--s-in) * var(--dy) + (100% - var(--g)) / 2 + var(--g))}
/* FAR LEFT column */
.dtile--flt,.dtile--flb{width:var(--wfar);left:calc(var(--cl) - var(--g) - var(--win) - var(--g) - var(--wfar))}
.dtile--flt{top:calc(var(--s-far) * var(--dy))}
.dtile--flb{top:calc(var(--s-far) * var(--dy) + (100% - var(--g)) / 2 + var(--g))}

/* RIGHT column */
.dtile--rt,.dtile--rb{width:var(--win);left:calc(var(--cr) + var(--g))}
.dtile--rt{top:calc(var(--s-in) * var(--dy))}
.dtile--rb{top:calc(var(--s-in) * var(--dy) + (100% - var(--g)) / 2 + var(--g))}
/* FAR RIGHT column */
.dtile--frt,.dtile--frb{width:var(--wfar);left:calc(var(--cr) + var(--g) + var(--win) + var(--g))}
.dtile--frt{top:calc(var(--s-far) * var(--dy))}
.dtile--frb{top:calc(var(--s-far) * var(--dy) + (100% - var(--g)) / 2 + var(--g))}

/* ---------- discover cards: infinite slider ---------- */
.discover{--gap:22px;--per-view:3;background:#F5F1E9;padding:22px 0 0;overflow:hidden}
.discover__viewport{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.discover__viewport.is-dragging{cursor:grabbing}
.discover__track{display:flex;gap:var(--gap);width:max-content;will-change:transform;transform:translate3d(0,0,0)}
.dcard{position:relative;flex:0 0 auto;display:block;width:calc((100vw - var(--gap) * (var(--per-view) - 1)) / var(--per-view));aspect-ratio:624/800;overflow:hidden;color:#fff;text-decoration:none;-webkit-user-drag:none}
.dcard__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transition:transform 1.1s ease}
.dcard:hover .dcard__media{transform:scale(1.05)}
.dcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 45%);pointer-events:none}
.dcard__body{position:absolute;left:37px;right:37px;bottom:40px;z-index:2;pointer-events:none}
.dcard__eyebrow{margin:0 0 14px;font:400 14px/1 "Jost",sans-serif;letter-spacing:1px;text-transform:uppercase}
.dcard__text{margin:0;max-width:420px;font:300 32px/1.45 "Jost",sans-serif}

@media (max-width:1279px){.destination__heading{font-size:64px}.dcard__text{font-size:26px}}
@media (max-width:1023px){
  .discover{--per-view:2}
  .destination{padding-top:88px}
  .destination__head{margin-bottom:56px}
  .destination__heading{font-size:52px}.destination__text{font-size:16px;line-height:26px}
  .destination__mosaic{--c0:40%;--c1:80%;--win:24%;--wfar:12%;--s-in:5vw;--s-far:8vw;height:clamp(320px,56vw,700px)}
}
@media (max-width:767px){
  .discover{--per-view:1.15;--gap:14px}
  .destination{padding-top:64px}
  .destination__head{margin-bottom:40px}
  .destination__heading{font-size:36px}
  .destination__eyebrow{font-size:12px;gap:16px;letter-spacing:2.4px}
  .destination__text{font-size:14px;line-height:22px}
  .destination__mosaic{--c0:60%;--c1:100%;--win:30%;--wfar:20%;--g:6px;--s-in:8vw;--s-far:14vw;height:118vw}
  .dcard__body{left:22px;right:22px;bottom:26px}
  .dcard__text{font-size:22px}
}