/* Shared travel-journal layout for the page and its expanded preview. */
.itinerary-preview .preview-copy-block h2 {
  letter-spacing: -.03em;
  text-wrap: balance;
}
.itinerary-preview .preview-button { max-width: 100%; text-align: left; }
.itinerary-preview .preview-button:hover { background: rgb(255 250 240 / .12); }
.itinerary-preview .preview-button:focus-visible { outline: 2px solid #fffaf0; outline-offset: 6px; }
.itinerary-preview .itinerary-card,
.content-preview .itinerary-card {
  color: #254535;
  background: #f7f3e9;
  border: 0;
  border-radius: 12px;
}
.itinerary-card .itinerary-day-title {
  margin: 0 0 28px;
  padding: 0 0 24px;
  border-bottom: 1px solid #dcc9a8;
  font: 500 clamp(28px, 2.6vw, 36px)/1.1 var(--font-display);
  letter-spacing: -.02em;
}
.itinerary-day-title em { font-weight: 400; }
:is(.itinerary-preview, .content-preview) .timeline { margin: 0; }
:is(.itinerary-preview, .content-preview) .timeline::before { display: none; }
:is(.itinerary-preview, .content-preview) .timeline li {
  min-height: 0;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding: 0 0 24px;
}
:is(.itinerary-preview, .content-preview) .timeline li:last-child { min-height: 0; padding-bottom: 0; }
:is(.itinerary-preview, .content-preview) .timeline li::before { display: none; }
:is(.itinerary-preview, .content-preview) .timeline time {
  padding-top: 4px;
  color: #7e422f;
  font: 600 12px/1.5 var(--font-body);
  font-variant-numeric: tabular-nums;
}
:is(.itinerary-preview, .content-preview) .timeline div { padding: 0; }
:is(.itinerary-preview, .content-preview) .timeline strong {
  font: 600 20px/1.2 var(--font-display);
  text-wrap: pretty;
}
:is(.itinerary-preview, .content-preview) .timeline small {
  margin-top: 6px;
  color: #52604d;
  font: 400 12px/1.65 var(--font-body);
}
.itinerary-teaser { margin-top: 24px; padding-top: 20px; border-top: 1px solid #dcc9a8; }
.itinerary-teaser-lines { overflow: hidden; user-select: none; pointer-events: none; }
.itinerary-teaser-lines span {
  display: block;
  width: fit-content;
  max-width: 100%;
  color: #52604d;
  font: 500 18px/1.7 var(--font-display);
  filter: blur(3px);
}
.itinerary-teaser-lines span + span { opacity: .65; filter: blur(4px); }
.itinerary-teaser p { margin: 16px 0 0; color: #7e422f; font: italic 500 20px/1.3 var(--font-display); }
.content-preview .itinerary-card { padding-top: 0; }
@media (max-width: 767px) {
  .itinerary-preview .postcard-collage { justify-self: center; }
  :is(.itinerary-preview, .content-preview) .timeline li { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
  :is(.itinerary-preview, .content-preview) .timeline strong { font-size: 19px; }
  .content-preview .itinerary-card { padding-top: 0; }
}

/* Compact transition banner; the dialog retains the complete itinerary. */
.itinerary-preview {
  min-height: 0;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(28px, 5vw, 64px);
  padding-block: 28px;
}
.itinerary-preview .preview-copy-block h2 {
  max-width: 22ch;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.08;
}
.itinerary-preview .preview-description { margin-top: 14px; font-size: 14px; line-height: 1.6; }
.itinerary-preview .preview-button { margin-top: 20px; min-height: 44px; font-size: 17px; }
.itinerary-preview .postcard-collage { max-width: 420px; }
.itinerary-preview .itinerary-card { min-height: 0; }
.itinerary-preview .itinerary-day-title { margin-bottom: 16px; padding-bottom: 12px; font-size: 26px; }
.itinerary-preview .itinerary-day-title br { display: none; }
.itinerary-preview .itinerary-day-title em::before { content: ' '; }
.itinerary-preview .timeline li { padding-bottom: 12px; gap: 12px; }
.itinerary-preview .timeline li:nth-child(n + 4),
.itinerary-preview .timeline small { display: none; }
.itinerary-preview .timeline strong { font-size: 17px; line-height: 1.25; }
.itinerary-preview .timeline time { font-size: 11px; padding-top: 2px; }
.itinerary-preview .itinerary-teaser { margin-top: 4px; padding-top: 12px; }
.itinerary-preview .itinerary-teaser-lines span { font-size: 16px; line-height: 1.5; }
.itinerary-preview .itinerary-teaser p { margin-top: 8px; font-size: 17px; }
@media (max-width: 767px) {
  .itinerary-preview { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; gap: 20px; }
  .itinerary-preview .preview-copy-block h2 { max-width: 24ch; font-size: 32px; }
  .itinerary-preview .preview-description { margin-top: 12px; }
  .itinerary-preview .preview-button { margin-top: 16px; }
  .itinerary-preview .postcard-collage { max-width: none; }
  .itinerary-preview .itinerary-teaser { margin: 0; padding: 0; border: 0; }
}

/* Custom event pictograms, shared by both views. */
.itinerary-event-icon { display: inline-block; width: 22px; height: 22px; margin-right: 7px; vertical-align: middle; color: #7e422f; flex: 0 0 auto; }
.itinerary-hidden-event { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.itinerary-hidden-event .itinerary-event-icon { margin: 0; opacity: .7; }
.itinerary-teaser-lines .itinerary-hidden-event span { filter: blur(3px); }
.itinerary-teaser-lines .itinerary-hidden-event + .itinerary-hidden-event span { filter: blur(4px); opacity: .65; }
.itinerary-preview .itinerary-event-icon { width: 18px; height: 18px; margin-right: 4px; }
.itinerary-preview .itinerary-hidden-event { min-height: 26px; }

/* Expanded journal: a forest-green masthead and a spacious timed sequence. */
.content-preview { padding: 0; border: 0; border-radius: 16px; background: #f7f3e9; }
.content-preview .itinerary-card { padding: 0; border-radius: 0; }
.content-preview .itinerary-card h3 {
  margin: 0;
  color: #f7f3e9; background: #254535; border: 0; line-height: 1.1;
}
.content-preview .itinerary-day-title em { color: #dcc9a8; }
.content-preview .preview-close { z-index: 2; float: right; width: 44px; height: 44px; border-radius: 50%; background: #f7f3e9; color: #254535; }
.content-preview .preview-close:hover { background: #dcc9a8; }
.content-preview .timeline li { grid-template-columns: 52px minmax(0, 1fr); gap: 20px; border-bottom: 1px solid #dcc9a8; }
.content-preview .timeline li:last-child { border-bottom: 0; }
.content-preview .timeline time { font-size: 13px; padding-top: 3px; }
.content-preview .timeline strong { font: 600 15px/1.6 var(--font-body); }
.content-preview .timeline strong, .content-preview .timeline small { position: relative; padding-left: 32px; }
.content-preview .timeline .itinerary-event-icon { position: absolute; left: 0; top: 1px; margin: 0; }
.content-preview .itinerary-teaser { margin: 0 36px; }
.content-preview .itinerary-hidden-event { gap: 12px; }
@media (max-width: 767px) {
  .itinerary-preview .timeline { display: block; }
  .itinerary-preview .timeline li { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; }
  .itinerary-preview .itinerary-teaser { padding-top: 8px; }
  .content-preview .timeline li { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding-block: 16px; }
}

/* The banner is a readable excerpt; the remaining stops and teaser belong to the dialog. */
.itinerary-preview .timeline li:nth-child(n + 4),
.itinerary-preview .itinerary-teaser { display: none; }
.itinerary-preview .timeline li:nth-child(3) { padding-bottom: 0; }

/* A three-stop excerpt with its own action; explanation only in the expanded view. */
.itinerary-preview .itinerary-example-note { display: none; }
.itinerary-preview .itinerary-card { padding: 24px; }
.itinerary-preview .itinerary-day-title { display: block; }
.itinerary-preview .itinerary-card-button {
  display: flex; width: 100%; min-width: 0; margin-top: 20px;
  padding: 12px 18px; color: #f7f3e9; background: #254535; border-color: #254535;
  font: 500 13px/1.4 var(--font-body);
}
.itinerary-preview .itinerary-card-button:hover { background: #354f40; }
.itinerary-preview .itinerary-card-button:focus-visible { outline-color: #7e422f; }
.content-preview .itinerary-example-note p { margin: 0 0 10px; color: #52604d; font: 400 13px/1.7 var(--font-body); }
.content-preview .itinerary-example-note strong { color: #254535; font-weight: 600; }
.content-preview .itinerary-teaser-lines { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; }
.content-preview .itinerary-hidden-time { grid-row: 1 / 3; color: #7e422f; font: 600 13px/1.5 var(--font-body); font-variant-numeric: tabular-nums; }
.content-preview .itinerary-hidden-event { grid-column: 2; }
@media (max-width: 767px) {
  .content-preview .itinerary-teaser-lines { grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; }
  .itinerary-preview .itinerary-card { padding: 20px; }
}

/* Fit the complete example in the viewport without a scrolling dialog. */
.content-preview {
  width: min(860px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
body:has(.content-preview[open]) { overflow: hidden; }
.content-preview .itinerary-card h3 { padding: 20px 64px 18px 28px; font-size: 32px; }
.content-preview .itinerary-day-title br { display: none; }
.content-preview .itinerary-day-title em::before { content: ' '; }

.itinerary-preview {
  --itinerary-photo: url('assets/itinerary-batur-mirrored-enhanced.webp');
  --itinerary-focus: 50% 60%;
  --itinerary-focus-mobile: 40% 60%;
  background-image: linear-gradient(90deg, rgba(18, 38, 45, .64), rgba(18, 38, 45, .45) 48%, rgba(18, 38, 45, .28)), var(--itinerary-photo);
  background-position: center, var(--itinerary-focus);
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .itinerary-preview { background-position: center, var(--itinerary-focus-mobile); }
}
.content-preview .itinerary-example-note { padding: 14px 28px 0; }
.content-preview .itinerary-example-note p { margin-bottom: 6px; font-size: 12px; line-height: 1.5; }
.content-preview .timeline { padding: 0 28px; }
.content-preview .timeline li,
.content-preview .timeline li:last-child { padding: 12px 0; }
.content-preview .timeline strong { font-size: 14px; line-height: 1.4; }
.content-preview .timeline small { margin-top: 5px; font-size: 12px; line-height: 1.4; }
.content-preview .itinerary-teaser { margin-inline: 28px; padding: 10px 0 16px; }
.content-preview .itinerary-hidden-event { min-height: 28px; }
.content-preview .itinerary-teaser p { margin-top: 8px; font-size: 21px; }
.content-preview .itinerary-hidden-time { padding-top: 4px; }
.content-preview .preview-close { position: absolute; margin: 0; top: 10px; right: 10px; }
@media (max-width: 600px) {
  .content-preview .itinerary-card h3 { padding: 18px 56px 14px 18px; font-size: 26px; }
  .content-preview .itinerary-example-note { padding: 10px 18px 0; }
  .content-preview .timeline { padding-inline: 18px; }
  .content-preview .timeline li,
  .content-preview .timeline li:last-child { padding-block: 9px; gap: 8px; }
  .content-preview .timeline strong { font-size: 12px; }
  .content-preview .timeline small { font-size: 14px; margin-top: 4px; }
  .content-preview .timeline strong, .content-preview .timeline small { padding-left: 25px; }
  .content-preview .itinerary-event-icon { width: 18px; height: 18px; }
  .content-preview .itinerary-example-note p { font-size: 14px; line-height: 1.45; }
  .content-preview .itinerary-teaser { margin-inline: 18px; padding-bottom: 12px; }
  .content-preview .itinerary-teaser-lines { column-gap: 8px; }
  .content-preview .itinerary-teaser-lines span { font-size: 14px; line-height: 1.3; }
  .content-preview .itinerary-teaser p { font-size: 18px; }
}

/* Blend the services texture and itinerary photograph across their shared edge. */
@media (min-width: 768px) and (min-height: 501px), (min-width: 951px), (min-width: 768px) and (hover: hover) {
  .travel-services {
    background-image: linear-gradient(180deg, transparent calc(100% - 90px), #f3ead7 100%), linear-gradient(#f9e7d344, #f9e7d344), url("assets/services/background-refined.webp");
    background-size: auto, auto, cover;
    background-position: center, center, left top;
    background-repeat: no-repeat;
  }
  .itinerary-preview {
    background-image: linear-gradient(180deg, #f3ead7 0, rgb(243 234 215 / .94) 18px, rgb(243 234 215 / .64) 42px, rgb(243 234 215 / .2) 76px, transparent 110px), linear-gradient(90deg, rgba(18, 38, 45, .64), rgba(18, 38, 45, .45) 48%, rgba(18, 38, 45, .28)), var(--itinerary-photo);
    background-position: center, center, var(--itinerary-focus);
  }
}