/* extra.css — brand logo, contact page, gallery lightbox zoom.
   Kept separate from the core sheets so it layers cleanly over them. */

/* ---------- brand logo (header) ---------- */
.brand-logo { height: 48px; width: auto; display: block; }
.header.is-compact .brand-logo { height: 40px; }
@media (max-width: 560px) { .brand-logo { height: 38px; } }

/* ---------- contact page ---------- */
.contact { list-style: none; margin: 0; padding: 0; }
.contact__row {
  display: grid;
  grid-template-columns: 104px 1fr;
  column-gap: var(--s-4);
  row-gap: 4px;
  align-items: baseline;
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--line);
}
.contact__row > .mono {
  grid-column: 1; grid-row: 1;
  color: var(--gold-ink); font-size: var(--step-util);
  letter-spacing: var(--tr-util); text-transform: uppercase;
}
.contact__v { grid-column: 2; grid-row: 1; font-size: var(--step-body); font-weight: 600; color: inherit; text-decoration: none; width: fit-content; }
a.contact__v:hover { color: var(--gold-ink); }
.contact__v--sm { font-size: var(--step-small); font-weight: 500; line-height: 1.45; }
.contact__sub { grid-column: 2; font-size: var(--step-small); color: var(--bone-mute); text-decoration: none; width: fit-content; }
a.contact__sub:hover { color: var(--gold-ink); }
.contact-socials { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-5); }
.contact-socials a {
  font-family: var(--font-mono); font-size: var(--step-util);
  text-transform: uppercase; letter-spacing: var(--tr-util);
  color: var(--gold-ink); text-decoration: none;
}
.contact-socials a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .contact__row { grid-template-columns: 1fr; row-gap: 2px; }
  .contact__row > .mono, .contact__row > .contact__v, .contact__row > .contact__sub {
    grid-column: 1; grid-row: auto;
  }
}

/* ---------- guest reviews carousel ---------- */
.reviews__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--s-8); align-items: center; }
@media (max-width: 860px) { .reviews__grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.reviews__nav { display: flex; gap: var(--s-3); margin-top: var(--s-6); }
.reviews__arrow {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  display: grid; place-items: center; line-height: 1; font-size: 1.5rem;
  color: var(--gold-ink); cursor: pointer;
  transition: background-color .2s var(--ease, ease), color .2s ease, border-color .2s ease, transform .2s ease;
}
.reviews__arrow:hover { background: var(--gold); color: var(--on-accent); border-color: var(--gold); transform: translateY(-2px); }
.reviews__arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.reviews__card {
  background: linear-gradient(140deg, color-mix(in srgb, var(--jade) 7%, #fff), #fff 60%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .06);
}
.reviews__text {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.25rem, 1rem + 1.3vw, 1.95rem);
  line-height: 1.4; margin: var(--s-4) 0 var(--s-6); font-weight: 500;
}
.reviews__who { display: flex; flex-direction: column; gap: 2px; }
.reviews__name { font-weight: 700; font-size: var(--step-body); }
.reviews__who .mono { color: var(--bone-mute); }
.reviews__dots { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--s-7); }
.reviews__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 32%, transparent); cursor: pointer;
  transition: width .2s ease, background-color .2s ease, border-radius .2s ease;
}
.reviews__dot:hover { background: color-mix(in srgb, var(--gold) 55%, transparent); }
.reviews__dot.is-active { width: 24px; border-radius: 5px; background: var(--gold); }

/* ---------- "coming soon" badge (paused countries) ---------- */
.cc--soon { position: relative; }
.cc__soon {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 3;
  font-family: var(--font-mono); font-size: var(--step-util); letter-spacing: var(--tr-util);
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-full, 999px);
  background: color-mix(in srgb, var(--ink, #160f0b) 78%, transparent); color: #fff;
  backdrop-filter: blur(4px);
}
.cc--soon .cc__media { filter: grayscale(0.35) opacity(0.88); }
.switch__item--soon, .footer__list a.is-soon { opacity: .6; }
.switch__soon { font-family: var(--font-mono); font-size: var(--step-util); color: var(--gold-ink); margin-left: auto; padding-left: var(--s-3); }

/* ---------- experiences theme cards with photos ---------- */
.theme--photo { min-height: 260px; justify-content: flex-end; }
.theme--photo .theme__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; transition: transform .6s var(--ease, ease);
}
.theme--photo:hover .theme__img { transform: scale(1.06); }
.theme--photo .theme__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--c) 88%, black 12%) 0%,
    color-mix(in srgb, var(--c) 46%, transparent) 48%,
    color-mix(in srgb, var(--c) 8%, transparent) 100%);
}
.theme--photo > .theme__dot,
.theme--photo > .theme__name,
.theme--photo > .theme__eg { position: relative; z-index: 2; }
.theme--photo .theme__name { color: #fff; }
.theme--photo .theme__eg { color: color-mix(in srgb, #fff 88%, transparent); }
.theme--photo .theme__dot { background: #fff; opacity: .9; }

/* ---------- about / profile ---------- */
.profile { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
@media (max-width: 760px) { .profile { grid-template-columns: 1fr; } }
.profile__photo { margin: 0; }
.profile__photo img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); border: 1px solid var(--line); }
.profile__photo figcaption { margin-top: var(--s-3); color: var(--bone-mute); font-size: var(--step-util); letter-spacing: var(--tr-util); text-transform: uppercase; }
.profile__bio > p { margin-bottom: var(--s-4); line-height: 1.75; }
.profile__bio > p:first-child { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); }

/* credentials */
.creds { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); }
.cred { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.1rem, 1rem + 1vw, 1.75rem); border-top: 3px solid var(--gold); }
.cred__date { color: var(--gold-ink); font-size: var(--step-util); letter-spacing: var(--tr-util); }
.cred__org { font-size: var(--step-body); font-weight: 700; margin: var(--s-2) 0 4px; }
.cred__title { color: var(--bone-mute); font-size: var(--step-small); line-height: 1.5; }

/* ---------- itinerary detail ---------- */
.itin-lead { max-width: 74ch; }
.itin-lead__text {
  font-size: clamp(1.05rem, 0.98rem + 0.55vw, 1.4rem);
  line-height: 1.7; margin-top: var(--s-4);
}
.itin-lead .pkg__chips { margin-top: var(--s-5); }

/* rich timeline: stop name + full description */
.tl--rich .tl__list { max-width: none; }
.tl--rich .stop { padding-block: var(--s-5); }
.stop__desc { margin-top: var(--s-3); color: var(--bone-mute); max-width: 70ch; line-height: 1.65; }

/* trip highlights — checklist grid */
.hl-grid {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 var(--s-6);
}
.hl-item {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding-block: var(--s-3); border-block-end: 1px solid var(--line);
  font-size: var(--step-small); line-height: 1.45;
}
.hl-item__tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 20%, transparent); position: relative; margin-top: 1px; }
.hl-item__tick::after { content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid var(--gold-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* what's included / not included */
.inc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
@media (max-width: 720px) { .inc-cols { grid-template-columns: 1fr; } }
.inc-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.inc-card > .mono { color: var(--gold-ink); }
.inc-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.inc-list li { position: relative; padding-left: 30px; line-height: 1.5; }
.inc-list li::before { position: absolute; left: 0; top: -1px; font-family: var(--font-mono); font-weight: 700; }
.inc-list--yes li::before { content: "\2713"; color: var(--jade); }
.inc-list--no li { color: var(--bone-mute); }
.inc-list--no li::before { content: "\2715"; color: var(--clay); }

/* good to know */
.gtk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-6); margin-top: var(--s-6); }
.gtk { border-inline-start: 2px solid var(--gold); padding-inline-start: var(--s-4); }
.gtk h3 { color: var(--gold-ink); margin-block-end: var(--s-2); }
.gtk p { color: var(--bone-mute); font-size: var(--step-small); line-height: 1.6; }

/* ---------- WhatsApp floating button (site-wide) ---------- */
.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 400;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  transition: transform .2s var(--ease, ease), box-shadow .2s ease;
}
.wa-fab:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(0, 0, 0, .34); color: #fff; }
.wa-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.wa-fab svg { width: 30px; height: 30px; fill: currentColor; }
@media (max-width: 560px) { .wa-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; } }
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; } }

/* ---------- gallery lightbox: zoom ---------- */
.lb__img { transition: transform 120ms ease; will-change: transform; touch-action: none; }
.lb__img.is-zoomed { cursor: grab; }
.lb__img.is-panning { cursor: grabbing; transition: none; }
.lb__tools { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; display: flex; gap: 8px; z-index: 2; }