/* Journey "Quick View" popup. Cream #F8F4EB dialog, clay #A77F68 accents, dark #241C16, text #6D6359 (same palette as the Journeys cards). */
:root{--clay:#A77F68}
body.jpop-open{overflow:hidden}

.jpop{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .3s ease}
.jpop[hidden]{display:none}
.jpop.is-open{opacity:1}
.jpop__backdrop{position:absolute;inset:0;background:rgba(24,16,10,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

.jpop__dialog{position:relative;display:flex;flex-direction:column;width:100%;max-width:1040px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:hidden;
  border-radius:10px;background:#F8F4EB;box-shadow:0 30px 80px rgba(0,0,0,.35);outline:0;
  transform:translateY(16px);transition:transform .35s ease}
.jpop.is-open .jpop__dialog{transform:none}
/* the content scrolls inside the dialog, the close button stays in place */
.jpop__scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(36,28,22,.35) transparent}
.jpop__scroll::-webkit-scrollbar{width:6px}
.jpop__scroll::-webkit-scrollbar-thumb{background:rgba(36,28,22,.35);border-radius:3px}

.jpop__close{position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(248,244,235,.9);color:#1c1c1c;cursor:pointer;transition:background .2s,transform .2s}
.jpop__close:hover{background:#fff;transform:rotate(90deg)}

/* top photo. NOTE: width:100% is required - with "aspect-ratio + max-height" alone the browser transfers the
   max-height to the width and the photo stops short of the right edge. */
.jpop__media{position:relative;width:100%;aspect-ratio:1040/400;max-height:46vh;background:#2a3a2c;overflow:hidden}
.jpop__media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}

/* two columns: text + price box */
.jpop__body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;padding:38px 48px 44px}
.jpop__body--full{grid-template-columns:minmax(0,1fr)}
.jpop__main{min-width:0}

.jpop__title{margin:0;font:400 clamp(26px,2.3vw,36px)/1.15 "Cormorant Garamond",serif;letter-spacing:.16px;color:#241C16}
.jpop__meta{margin:12px 0 0;font:300 15px/1.5 "Jost",sans-serif;letter-spacing:.16px;color:var(--clay)}
.jpop__intro{margin:22px 0 0;font:300 15px/1.7 "Jost",sans-serif;letter-spacing:.16px;color:#6D6359}

/* sections: collapsed to a fixed height with a fade until "View more" is clicked (height animated by JS) */
.jpop__sections{position:relative;margin-top:26px;overflow:hidden;max-height:260px;transition:max-height .5s cubic-bezier(.65,0,.35,1)}
.jpop__sections::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(to bottom,rgba(248,244,235,0),#F8F4EB);pointer-events:none;opacity:1;transition:opacity .3s ease}
.jpop__sections.is-expanded::after,.jpop__sections.is-short::after{opacity:0}
.jpop__sections.is-short{max-height:none}
.jpop__section + .jpop__section{margin-top:26px}
.jpop__section--rule{margin-top:34px;padding-top:30px;border-top:1px solid rgba(36,28,22,.14)}   /* divider line before "What's included" */
.jpop__h{margin:0 0 8px;font:400 16px/1.4 "Jost",sans-serif;letter-spacing:.2px;color:#241C16}
.jpop__p{margin:0;font:300 15px/1.7 "Jost",sans-serif;letter-spacing:.16px;color:#6D6359}
.jpop__p + .jpop__list{margin-top:10px}
/* main.css resets ul to list-style:none, so the bullets are switched back on here */
.jpop__list{list-style:disc outside;margin:0;padding:0 0 0 20px;font:300 15px/1.7 "Jost",sans-serif;letter-spacing:.16px;color:#6D6359}
.jpop__list li{list-style:disc outside;padding-left:4px;margin:0 0 4px}
.jpop__list li::marker{color:var(--clay)}
.jpop__list--cols{columns:2;column-gap:36px}
.jpop__list--cols li{break-inside:avoid}

.jpop__toggle{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:0;border:0;border-bottom:1px solid #241C16;background:transparent;color:#241C16;cursor:pointer;
  font:400 11px/1 "Jost",sans-serif;letter-spacing:.2em;text-transform:uppercase;padding-bottom:6px;transition:color .2s,border-color .2s}
.jpop__toggle:hover{color:var(--clay);border-color:var(--clay)}
.jpop__toggle svg{transition:transform .3s ease}
.jpop__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.jpop__toggle[hidden]{display:none}

/* price box */
.jpop__side{min-width:0}
.jpop__box{position:sticky;top:24px;padding:26px 26px 28px;border:1px solid rgba(167,127,104,.25);border-radius:8px;background:#F2EDE3}
.jpop__label{margin:0 0 8px;font:400 10px/1 "Jost",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#8a7f73}
.jpop__dates{margin:0 0 22px;padding:12px 14px;border-radius:4px;background:#F8F4EB;font:300 13.5px/1.55 "Jost",sans-serif;color:#6D6359}
.jpop__price{margin:0;font:400 40px/1 "Cormorant Garamond",serif;color:#241C16}
.jpop__note{margin:12px 0 0;font:300 12px/1.55 "Jost",sans-serif;color:#8a7f73}
.jpop__cta{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:50px;margin-top:22px;border:0;border-radius:2px;background:#1F1710;color:#F8F4EB;cursor:pointer;
  font:500 11px/1 "Jost",sans-serif;letter-spacing:2.2px;text-transform:uppercase;transition:background .2s}
.jpop__cta:hover{background:#3a2c20}
.jpop__cta svg{flex:none}

/* tablet */
@media (max-width:1023px){
  .jpop__dialog{max-width:760px}
  .jpop__media{aspect-ratio:760/320}
  .jpop__body{grid-template-columns:minmax(0,1fr) 260px;gap:32px;padding:30px 32px 36px}
  .jpop__box{padding:22px 20px 24px}
  .jpop__price{font-size:34px}
  .jpop__sections{max-height:240px}
}

/* phones: bottom sheet, one column, price box moves under the text */
@media (max-width:767px){
  .jpop{padding:0;align-items:flex-end}
  .jpop__dialog{max-width:none;max-height:94vh;max-height:94dvh;border-radius:14px 14px 0 0}
  .jpop__close{top:12px;right:12px}
  .jpop__media{aspect-ratio:4/3;max-height:40vh}
  .jpop__body{grid-template-columns:1fr;gap:28px;padding:24px 20px 32px}
  .jpop__title{font-size:26px}
  .jpop__meta{font-size:11px}
  .jpop__intro,.jpop__p,.jpop__list{font-size:14.5px;line-height:1.65}
  .jpop__sections{margin-top:22px;max-height:220px}
  .jpop__section + .jpop__section{margin-top:22px}
  .jpop__list--cols{columns:1}
  .jpop__box{position:static;padding:22px 20px 24px}
  .jpop__price{font-size:34px}
}

@media (prefers-reduced-motion:reduce){
  .jpop,.jpop__dialog,.jpop__sections,.jpop__toggle svg,.jpop__close{transition:none}
}