a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--showcase-clay);
  outline-offset: 4px;
}

.preview-button { cursor: pointer; }

.content-preview {
  max-height: calc(100svh - 48px);
  color: var(--showcase-ink);
}

.content-preview::backdrop { background: rgb(23 32 38 / .5); }

.preview-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 28px;
  cursor: pointer;
}

.content-preview .itinerary-card {
  position: static;
  width: 100%;
  height: auto;
  box-shadow: none;
  transform: none;
}

@media (max-width: 767px) {
/* Remove global clipping so overflow is fixed at its source. */
html,
body { overflow-x: visible; }

main section[id] { scroll-margin-top: 82px; }
.back-to-top {
    right: max(0.85rem, env(safe-area-inset-right));
    bottom: max(0.85rem, env(safe-area-inset-bottom));
    min-width: 6.7rem;
    min-height: 2.75rem;
    gap: 0.55rem;
    padding: 0.65rem 0.8rem 0.65rem 1rem;
    font-size: 0.62rem;
  }

}

@media (max-width: 767px) {
/* The live miniature itinerary sits beside the editorial copy, as approved.
     Its CTA opens the same content at reading size. */
.itinerary-preview {
    overflow: visible;
  }

.preview-copy-block { padding: 0; text-align: left; }

.preview-copy-block h2 { font-size: clamp(20px, 5.5vw, 30px); line-height: .98; }

.preview-description { margin-top: 8px; font-size: 12px; line-height: 1.4; }

.preview-description br { display: none; }

.preview-button { width: 100%; min-width: 0; height: auto; min-height: 44px; margin-top: 10px; padding: 8px 10px; gap: 7px; font-size: 14px; }

.preview-button span:last-child { flex: 0 0 auto; }

.postcard-collage {
    position: relative;
    left: auto;
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: 18% minmax(0, 64%) 18%;
    container-type: inline-size;
    align-items: center;
    margin: 0;
    padding: 6px 0;
    transform: none;
  }

.itinerary-card { position: relative; inset: auto; grid-area: 1 / 2; width: 100%; height: auto; padding: 5cqw 3cqw; transform: rotate(2deg); }

.itinerary-card h3 { font-size: 5.3cqw; padding-bottom: 3cqw; }

.timeline { margin-top: 0; }

.timeline li { min-height: 22cqw; grid-template-columns: 8cqw 7cqw minmax(0, 1fr); }

.timeline li:last-child { min-height: 17cqw; }

.timeline::before { left: 8cqw; }

.timeline li::before { top: 3px; left: calc(8cqw - 2px); width: 4px; height: 4px; border-width: 1px; }

.timeline time { font-size: 3cqw; }

.timeline div { padding-left: 2px; }

.timeline strong { font-size: 4.3cqw; }

.timeline small { margin-top: 2px; font-size: 3.1cqw; line-height: 1.3; }
}

/* The itinerary preview sits directly over a real Nusa Penida photograph. */
.itinerary-preview {
  height: auto;
  align-items: center;
  padding: 38px max(6vw, calc((100vw - 1280px) / 2));
  color: #fffaf0;
  background: linear-gradient(90deg, rgba(18, 38, 45, .82), rgba(18, 38, 45, .59) 48%, rgba(18, 38, 45, .28)), url('assets/nusa-penida-kelingking-retouched.webp') center 52% / cover no-repeat;
}

.itinerary-preview .preview-copy-block { padding: 0; }
.itinerary-preview .preview-description { max-width: 475px; }
.itinerary-preview .preview-button { border-color: currentColor; cursor: pointer; }

.itinerary-preview .postcard-collage {
  display: block;
  left: auto;
  width: 100%;
  height: auto;
  margin: 0;
  margin-left: 0;
  transform: none;
  container-type: normal;
  justify-self: end;
}

.itinerary-preview .itinerary-card {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  transform: none;
  box-shadow: 0 18px 42px rgba(12, 30, 36, .25);
}

.itinerary-preview .timeline li { min-height: 65px; grid-template-columns: 42px 38px minmax(0, 1fr); }
.itinerary-preview .timeline li:last-child { min-height: 42px; }
.itinerary-preview .timeline::before { left: 42px; }
.itinerary-preview .timeline li::before { top: 8px; left: 39px; width: 6px; height: 6px; border-width: 2px; }
.itinerary-preview .timeline div { padding-left: 7px; }
.itinerary-preview .timeline small { font-size: 10px; }

@media (max-width: 767px) {

  .itinerary-preview .preview-copy-block { text-align: left; }
  .itinerary-preview .preview-button { width: auto; min-width: min(100%, 286px); }
  .itinerary-preview .postcard-collage { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {

html { scroll-behavior: auto; }
  
}

.content-preview .timeline { margin-top: 14px; }

.content-preview .timeline li { min-height: 78px; }

.content-preview .timeline li:last-child { min-height: 65px; }

.content-preview .timeline::before { left: 42px; }

.content-preview .timeline li::before { left: 39px; top: 8px; width: 6px; height: 6px; border-width: 2px; }

.content-preview .itinerary-card h3 { padding-bottom: 12px; }