/* ==========================================================================
   Voyara — Tour UI (Task 10). Region listing (com_content/category/tour.php),
   style listing (com_tags/tag/tour.php), shared tour card (layouts/voyara/
   tour_card.php) and tour detail (com_content/article/tour.php).

   IMPORTANT: destination category/tag menu items are NOT in the index.php
   Itemid→css map, so blog.css / taxonomy.css / single.css are NOT loaded on
   any of these pages — only this file + the global template.css/darkmode.css/
   chrome.css/interactions.css bundle. Every class this markup reuses from
   those page-specific files (.acm-dest-card refinements, .voy-tax-masthead,
   .voy-tax-bc-band, .voy-blog-pagination, .voy-article-hero, .voy-article-
   tags…) is therefore re-declared here, self-contained. Tokens (--voy-*) and
   the dark-mode hook (html.t4-dark) come from template.css/darkmode.css and
   ARE global — reused, not redefined.
   ========================================================================== */

/* ---- Shared tour card (region + style listings + related-tours strip) ---
   Base look (.voy-card / .acm-dest-card) is global; these are the ACM-parity
   refinements that normally live in acm/destinations/css/style.css (not
   loaded here) plus the ribbon + hot-badge additions specific to tours. */
.voy-tour-card .voy-card__media {
  aspect-ratio: 16 / 11;
}
.voy-tour-card .voy-card__body {
  padding: 18px;
  gap: 8px;
}
.voy-tour-card .acm-dest-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--voy-font-mono);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 11px;
  color: var(--voy-muted);
}
.voy-tour-card .acm-dest-loc svg { color: var(--voy-primary); width: 13px; height: 13px; }
.voy-tour-card .acm-dest-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  flex-wrap: nowrap;
}
.voy-tour-card .voy-card__meta { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.voy-tour-card .voy-price { font-family: var(--voy-font-body); font-size: 16px; white-space: nowrap; flex: 0 0 auto; }
.voy-tour-card .voy-rating-badge svg { color: #E8B66F; }

/* Ribbon (top-left, avoids the rating badge which sits top-right) */
.voy-tour-ribbon {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--voy-r-pill);
  font-family: var(--voy-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #fff;
  box-shadow: var(--voy-sh-sm);
}
.voy-tour-ribbon--best {
  background: var(--voy-primary);
}
.voy-tour-ribbon--featured {
  background: var(--voy-accent);
  color: var(--voy-on-accent);
}

/* ---- Shared grid (region + style listings) ------------------------------- */
.voy-tour-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Placeholder cards (no tour data yet — title-only, no image/meta/price):
   keep them from looking broken by giving the media slot a graceful empty
   state instead of a blank void. */
.voy-tour-card .voy-card__media:not(:has(img)) {
  background: linear-gradient(135deg, var(--voy-elevated), var(--voy-border));
}
.voy-tour-card .voy-card__media:not(:has(img))::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%238A7E72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: .35;
}

/* ---- Tour listing masthead — UNIFIED for region (.voy-tour-listing) AND style
   (.voy-tour-listing--tag). Both the com_content category listing and the com_tags
   tag listing render the SAME .voy-tax-masthead + .voy-tax-bc-band so the two look
   identical (biz #2). Rules below are scoped to the base .voy-tour-listing so they
   apply to both. -------------------------------------------------------------- */
.voy-tour-listing {
  display: block;
}
.voy-tour-listing > .voy-tour-grid {
  max-width: 1140px;
  margin: 0 auto;
  padding: 32px 48px 72px;
}
/* [BAND-1140] Container parity for the STYLE (com_tags) tour listing.
   The region (com_content category) listing sits in the canonical T4 section
   container — max-width 1180 + 20px gutter → a 1140 content band at x150. The
   style listing (voy-tag-page) does NOT get taxonomy.css's container treatment
   (taxonomy.css isn't loaded on the tour Itemid range), so its section falls to
   the bare Bootstrap .container (max-width 1140 + 16px gutter → a narrower 1108
   band at x166). That 16px/side discrepancy is exactly the "same layout,
   different spacing" the review flagged between /destinations/southeast-asia
   (category) and /destinations/food-culture (tag). Pin the style page's section
   container to the same 1180/20 canonical so BOTH tour listings share the exact
   1140 @ x150 band (matching Pricing/Blog) at every width. */
body:has(.voy-tag-page.voy-tour-listing) .t4-section-inner.container {
  max-width: 1180px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ---- Self-contained taxonomy masthead + breadcrumb (taxonomy.css is NOT loaded
   on the tour Itemid range) -------------------------------------------------- */
.voy-tour-listing .voy-tax-masthead {
  background: var(--voy-bg);
  padding: 80px 48px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voy-tour-listing .voy-tax-masthead-inner {
  width: 100%;
  max-width: 1140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.voy-tour-listing .voy-eyebrow {
  font-family: var(--voy-font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--voy-primary);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.voy-tour-listing .voy-tax-title {
  font-family: var(--voy-font-head);
  font-size: 48px;
  font-weight: 700;
  color: var(--voy-heading);
  line-height: 1.1;
  margin: 0;
}
.voy-tour-listing .voy-tax-sub {
  font-family: var(--voy-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--voy-text-dim);
  max-width: 640px;
  margin: 0;
}
.voy-tour-listing .voy-tax-count {
  font-family: var(--voy-font-body);
  font-size: 17px;
  font-weight: 400;
  color: var(--voy-text-dim);
  margin: 0;
}

/* Hide the T4 auto-breadcrumb module (renders above the masthead) on BOTH tour
   listings — they render their own .voy-tax-bc-band. Re-declared here since
   taxonomy.css/blog.css aren't loaded on the tour Itemid range. */
:has(.voy-tour-listing) .t4-breadcrumbs {
  display: none !important;
}

.voy-tour-listing .voy-tax-bc-band {
  background: var(--voy-bg);
  padding: 0 48px 8px;
  display: flex;
  align-items: center;
}
.voy-tour-listing .voy-tax-bc-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--voy-font-body);
  font-size: 13px;
  font-weight: 400;
}
.voy-tour-listing .voy-tax-bc-link { color: var(--voy-muted); text-decoration: none; }
.voy-tour-listing .voy-tax-bc-link:hover { color: var(--voy-text); }
.voy-tour-listing .voy-tax-bc-sep { color: var(--voy-muted); font-size: 12px; }
.voy-tour-listing .voy-tax-bc-current { color: var(--voy-heading); font-weight: 600; }

/* ---- Pagination (region listing only) — self-contained (blog.css not
   loaded on this Itemid range); same 42px-pill recipe as the blog list ----- */
.voy-tour-listing .voy-blog-pagination {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 48px 72px;
}
.voy-tour-listing .voy-blog-pagination li:has(a[aria-label="Go to end page"]),
.voy-tour-listing .voy-blog-pagination li:has(a[aria-label="Go to start page"]),
.voy-tour-listing .voy-blog-pagination li:has(span[aria-label="Go to end page"]),
.voy-tour-listing .voy-blog-pagination li:has(span[aria-label="Go to start page"]) { display: none !important; }
.voy-tour-listing .voy-blog-pagination li.disabled:first-child { display: none !important; }
.voy-tour-listing .voy-blog-pagination .pagination,
.voy-tour-listing .voy-blog-pagination ul.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.voy-tour-listing .voy-blog-pagination .pagination .page-item .page-link,
.voy-tour-listing .voy-blog-pagination ul.pagination li a,
.voy-tour-listing .voy-blog-pagination ul.pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--voy-border);
  border-radius: var(--voy-r-sm);
  background: var(--voy-surface);
  color: var(--voy-text);
  font-family: var(--voy-font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.voy-tour-listing .voy-blog-pagination .pagination .page-item.active .page-link,
.voy-tour-listing .voy-blog-pagination ul.pagination li.active a,
.voy-tour-listing .voy-blog-pagination ul.pagination li.active span {
  background: var(--voy-primary);
  border-color: var(--voy-primary);
  color: var(--voy-on-primary);
}
.voy-tour-listing .voy-blog-pagination .pagination .page-item .page-link:hover:not(.active),
.voy-tour-listing .voy-blog-pagination ul.pagination li a:hover {
  border-color: var(--voy-primary);
  color: var(--voy-primary);
}

/* ==========================================================================
   TOUR DETAIL (.voy-tour-detail)
   ========================================================================== */

/* Suppress T4 main-body vertical padding so bands touch flush, same technique
   as single.css's article override. */
body.view-article:has(.voy-tour-detail) #t4-main-body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.item-page.voy-tour-detail .article-info,
.item-page.voy-tour-detail .article-aside,
.item-page.voy-tour-detail .page-header h2,
.item-page.voy-tour-detail .icons { display: none !important; }
body.view-article:has(.voy-tour-detail) .t4-breadcrumbs { display: none !important; }

/* ---- 0. Tour-detail masthead (breadcrumb + region eyebrow + title) --------
   The masthead element (html/layouts/t4/element/masthead.php) renders the tour
   title as the H1 here. Those .voy-art-* classes are styled in single.css, which
   is NOT enqueued on tour pages, so port a self-contained, scoped copy. */
.t4-masthead:has(.voy-tour-detail-masthead) {
  background: var(--voy-bg) !important;
  border-bottom: 0 !important;
  padding-block: 56px 32px !important;
}
.voy-tour-detail-masthead {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.voy-tour-detail-masthead .t4-masthead-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.voy-tour-detail-masthead .voy-art-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--voy-font-body);
  font-size: 13px;
  color: var(--voy-muted);
}
.voy-tour-detail-masthead .voy-art-bc-item { color: var(--voy-muted); text-decoration: none; }
.voy-tour-detail-masthead .voy-art-bc-item:hover { color: var(--voy-text); }
.voy-tour-detail-masthead .voy-art-bc-current { color: var(--voy-text); }
.voy-tour-detail-masthead .voy-art-bc-sep { font-size: 0; line-height: 0; display: inline-flex; align-items: center; }
.voy-tour-detail-masthead .voy-art-bc-sep::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-top: 1.5px solid var(--voy-muted); border-right: 1.5px solid var(--voy-muted);
  transform: rotate(45deg);
}
.voy-tour-detail-masthead .voy-art-cat {
  font-family: var(--voy-font-mono);
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--voy-primary);
}
.voy-tour-detail-masthead .voy-masthead-title {
  font-family: var(--voy-font-head);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--voy-heading);
  margin: 0;
}
@media (max-width: 991px) { .voy-tour-detail-masthead .voy-masthead-title { font-size: 34px; } }
@media (max-width: 575px) {
  .t4-masthead:has(.voy-tour-detail-masthead) { padding-block: 36px 24px !important; }
  .voy-tour-detail-masthead .voy-masthead-title { font-size: 28px; line-height: 1.15; }
  .voy-tour-detail-masthead .voy-art-breadcrumb .voy-art-bc-item:first-child,
  .voy-tour-detail-masthead .voy-art-breadcrumb .voy-art-bc-sep:first-of-type { display: none; }
}

/* ---- 1. Hero ------------------------------------------------------------- */
.voy-tour-hero {
  background: var(--voy-bg);
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

/* Single-image fallback hero (reuses single.css's .voy-article-hero recipe,
   re-declared here since single.css isn't loaded on this Itemid range). */
.voy-tour-hero.voy-article-hero {
  padding: 0 48px 40px;
}
.voy-tour-hero-img.voy-article-hero-img {
  display: block;
  width: 100%;
  max-width: 1140px;
  height: 480px;
  object-fit: cover;
  border-radius: var(--voy-r-lg);
  margin: 0 auto;
}

/* Multi-image gallery hero: horizontal snap strip (no JS needed to cycle —
   the "active" first image leads, later frames peek in and are swipeable /
   scrollable on every input device). */
.voy-tour-hero.voy-tour-hero--gallery {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 48px 40px;
  scrollbar-width: thin;
}
.voy-tour-hero--gallery .voy-tour-hero-img {
  scroll-snap-align: start;
  flex: 0 0 68%;
  height: 480px;
  object-fit: cover;
  border-radius: var(--voy-r-lg);
  background: var(--voy-elevated);
}
.voy-tour-hero--gallery .voy-tour-hero-img:not(.voy-tour-hero-img--active) {
  flex-basis: 44%;
}

/* A gallery hero carrying a SINGLE image must read like the single-image hero —
   centred on the 1140 content column — not a left-packed peek strip. Every
   shipped tour has exactly one gallery image, so without this the cover sits
   flush-left (x=48) while the title/prose/bands are centred, and looks off.
   Height is left to the base + responsive rules above. */
.voy-tour-hero--gallery:has(.voy-tour-hero-img:only-child) {
  display: block;
}
.voy-tour-hero--gallery:has(.voy-tour-hero-img:only-child) .voy-tour-hero-img {
  flex: none;
  display: block;
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
}

/* ---- 2. Quick-facts bar ---------------------------------------------------
   Stat band with labeled values; wraps on mobile. Full-bleed elevated band
   between the hero and the prose column so it reads as a distinct module. */
.voy-quickfacts {
  background: var(--voy-elevated);
  border-top: 1px solid var(--voy-border);
  border-bottom: 1px solid var(--voy-border);
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
.voy-quickfacts__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 32px;
  border-left: 1px solid var(--voy-border);
  min-width: 140px;
}
.voy-quickfacts__item:first-child { border-left: none; }
.voy-quickfacts__label {
  font-family: var(--voy-font-mono);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 11px;
  color: var(--voy-muted);
}
.voy-quickfacts__value {
  font-family: var(--voy-font-head);
  font-weight: 700;
  font-size: 19px;
  color: var(--voy-heading);
}
.voy-quickfacts__item--rating .voy-quickfacts__value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.voy-quickfacts__item--rating .voy-quickfacts__value::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: var(--voy-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .9-5 4.9 1.2 7L12 18l-6.4 3.3L6.8 14l-5-4.9 7-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .9-5 4.9 1.2 7L12 18l-6.4 3.3L6.8 14l-5-4.9 7-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- 3. Overview (article prose) — self-contained (single.css not loaded) */
.voy-tour-overview {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 48px 8px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: var(--voy-font-body);
  font-size: 18px;
  line-height: 1.72;
  color: var(--voy-text);
}
.voy-tour-overview p { margin: 0; font-size: 18px; line-height: 1.7; color: var(--voy-text); }
.voy-tour-overview h2 {
  font-family: var(--voy-font-head);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--voy-heading);
  margin: 0;
}
.voy-tour-overview h3 {
  font-family: var(--voy-font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--voy-heading);
  margin: 0;
}
.voy-tour-overview blockquote {
  border-left: 4px solid var(--voy-primary);
  padding: 4px 0 4px 22px;
  margin: 8px 0;
  font-family: var(--voy-font-head);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: var(--voy-heading);
}
.voy-tour-overview ul,
.voy-tour-overview ol {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
}
.voy-tour-overview img {
  border-radius: var(--voy-r-md);
  width: 100%;
  height: auto;
}
.voy-tour-overview a { color: var(--voy-primary); }
.voy-tour-overview a:hover { color: var(--voy-primary-hover); }

/* ---- Shared section shell (itinerary / include / gallery) ---------------- */
.voy-tour-section {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 48px 8px;
}
.voy-tour-section--gallery {
  max-width: 1140px;
}
.voy-tour-section__title {
  font-family: var(--voy-font-head);
  font-size: 28px;
  font-weight: 700;
  color: var(--voy-heading);
  margin: 0 0 22px;
}

/* ---- 4. Itinerary accordion — same +/- pattern as the site's FAQ
   accordion (pricing.css), re-declared here (pricing.css isn't loaded). ---- */
.voy-itinerary { display: flex; flex-direction: column; gap: 12px; }
.voy-itinerary__item.accordion-item {
  background: var(--voy-elevated) !important;
  border-radius: var(--voy-r-md) !important;
  border: 1px solid var(--voy-border) !important;
  overflow: hidden;
}
.voy-itinerary__header.accordion-header { margin: 0 !important; }
.voy-itinerary__button.accordion-button {
  background: var(--voy-elevated) !important;
  color: var(--voy-heading) !important;
  font-family: var(--voy-font-head) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  padding: 20px 24px !important;
  box-shadow: none !important;
}
.voy-itinerary__button.accordion-button:not(.collapsed) {
  background: var(--voy-elevated) !important;
  color: var(--voy-primary) !important;
  padding-bottom: 10px !important;
}
.voy-itinerary__button.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7E72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  transform: none !important;
  flex-shrink: 0;
  transition: none;
}
.voy-itinerary__button.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2562F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
}
.voy-itinerary__body.accordion-body {
  color: var(--voy-text) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  padding: 0 24px 22px !important;
  background: var(--voy-elevated) !important;
}
.voy-itinerary__body.accordion-body p { margin: 0 0 10px; }
.voy-itinerary__body.accordion-body p:last-child { margin-bottom: 0; }

/* ---- 5. What's included checklist ----------------------------------------
   Check = primary/teal fill; muted cross = excluded (visually de-emphasised,
   never confused with a hard error). */
.voy-tour-include {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.voy-tour-include__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--voy-font-body);
  font-size: 16px;
  line-height: 1.5;
}
.voy-tour-include__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin-top: 1px;
}
.voy-tour-include__item--yes .voy-tour-include__icon {
  background: var(--voy-secondary);
  color: var(--voy-secondary-ink);
}
.voy-tour-include__item--yes .voy-tour-include__text { color: var(--voy-text); }
.voy-tour-include__item--no .voy-tour-include__icon {
  background: var(--voy-border);
  color: var(--voy-muted);
}
.voy-tour-include__item--no .voy-tour-include__text {
  color: var(--voy-muted);
  text-decoration: line-through;
  text-decoration-color: var(--voy-border);
}

/* ---- 6. Gallery grid ------------------------------------------------------ */
.voy-tour-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.voy-tour-gallery__item {
  aspect-ratio: 4 / 3;
  border-radius: var(--voy-r-md);
  overflow: hidden;
  background: var(--voy-elevated);
}
.voy-tour-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.voy-tour-gallery__item:hover .voy-tour-gallery__img {
  transform: scale(1.05);
}

/* ---- Article tags (reuses single.css's pill recipe; re-declared, single.css
   isn't loaded on this Itemid range) ---------------------------------------- */
.voy-article-tags-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 48px 40px;
}
/* "Topics" eyebrow + hairline top rule so the pills read as a deliberate
   end-of-article footer rather than a chip orphaned under the gallery. */
.voy-article-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--voy-border);
}
.voy-article-tags-label {
  font-family: var(--voy-font-mono, 'Geist Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--voy-muted);
  margin-right: 4px;
}
.voy-article-tag {
  display: inline-block;
  background: var(--voy-elevated);
  border: none;
  border-radius: var(--voy-r-pill);
  padding: 7px 14px;
  font-size: 13px;
  color: var(--voy-text);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.voy-article-tag:hover { background: var(--voy-border); color: var(--voy-primary); }

/* ---- 7. Booking CTA band — same recipe as the site's .voy-cta-band ------- */
.voy-tour-cta {
  background: var(--voy-primary);
  padding-block: 80px;
  text-align: center;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}
.voy-tour-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.voy-tour-cta__title {
  font-family: var(--voy-font-head);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}
.voy-tour-cta__sub {
  font-family: var(--voy-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  margin: 0;
}
.voy-tour-cta__btn.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--voy-primary);
  border-radius: var(--voy-r-pill);
  padding: 14px 30px;
  font-family: var(--voy-font-body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background .18s, transform .12s;
}
.voy-tour-cta__btn.btn-white:hover { background: rgba(255,255,255,.9); transform: translateY(-1px); }

/* ---- 8. Related tours ------------------------------------------------------ */
.voy-tour-related {
  background: var(--voy-elevated);
  padding-block: 72px;
}
.voy-tour-related__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 48px;
}
.voy-tour-related__title {
  font-family: var(--voy-font-head);
  font-size: 30px;
  font-weight: 700;
  color: var(--voy-heading);
  margin: 0 0 32px;
}
.voy-tour-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.voy-tour-related__card {
  background: var(--voy-surface);
  border: 1px solid var(--voy-border);
  border-radius: var(--voy-r-lg);
  box-shadow: var(--voy-sh-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.voy-tour-related__card:hover {
  box-shadow: var(--voy-sh-md);
  transform: translateY(-3px);
}
.voy-tour-related__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--voy-elevated);
  overflow: hidden;
}
.voy-tour-related__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.voy-tour-related__card:hover .voy-tour-related__media img { transform: scale(1.05); }
/* Related "tours" can be non-tour fallback articles with no cover image (see
   article/tour.php's same-category-then-any-published fallback query) — give
   them the same graceful empty media slot as the card grid instead of a bare
   white gap that breaks row alignment. */
.voy-tour-related__card:not(:has(.voy-tour-related__media))::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 10;
  background-color: var(--voy-elevated);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%238A7E72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.voy-tour-related__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.voy-tour-related__cat {
  font-family: var(--voy-font-mono);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 11px;
  color: var(--voy-secondary);
}
.voy-tour-related__card-title {
  font-family: var(--voy-font-head);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  margin: 0;
}
.voy-tour-related__card-title a { color: var(--voy-heading); }
.voy-tour-related__card-title a:hover { color: var(--voy-primary); }
.voy-tour-related__excerpt {
  color: var(--voy-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  .voy-tour-overview,
  .voy-tour-section,
  .voy-article-tags-wrap { padding-inline: 32px; }
}

@media (max-width: 991px) {
  .voy-tour-grid,
  .voy-tour-related__grid { grid-template-columns: repeat(2, 1fr); }
  .voy-tour-listing .voy-tax-title { font-size: 38px; }
  .voy-tour-hero.voy-article-hero .voy-tour-hero-img { height: 340px; }
  .voy-tour-hero--gallery .voy-tour-hero-img { height: 340px; flex-basis: 78%; }
  .voy-tour-hero--gallery .voy-tour-hero-img:not(.voy-tour-hero-img--active) { flex-basis: 52%; }
  .voy-tour-cta__title { font-size: 34px; }
  .voy-tour-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
  .voy-tour-listing .voy-tax-masthead { padding: 48px 20px 24px; }
  .voy-tour-listing > .voy-tour-grid,
  .voy-tour-listing .voy-blog-pagination { padding-inline: 20px; }
  .voy-tour-listing .voy-tax-title { font-size: 30px; }
  .voy-tour-listing .voy-tax-count { font-size: 15px; }
  .voy-tour-listing .voy-tax-bc-band { display: none; }

  .voy-tour-grid,
  .voy-tour-related__grid { grid-template-columns: 1fr; gap: 20px; }

  .voy-tour-hero.voy-article-hero { padding: 0 20px 28px; }
  .voy-tour-hero.voy-article-hero .voy-tour-hero-img { height: 240px; }
  .voy-tour-hero.voy-tour-hero--gallery { padding: 0 20px 28px; gap: 10px; }
  .voy-tour-hero--gallery .voy-tour-hero-img { height: 240px; flex-basis: 86%; }
  .voy-tour-hero--gallery .voy-tour-hero-img:not(.voy-tour-hero-img--active) { flex-basis: 60%; }

  .voy-quickfacts { justify-content: flex-start; }
  .voy-quickfacts__item {
    flex: 1 1 45%;
    padding: 16px 20px;
    border-left: none;
    border-bottom: 1px solid var(--voy-border);
  }
  .voy-quickfacts__item:nth-child(odd) { border-right: 1px solid var(--voy-border); }

  .voy-tour-overview,
  .voy-tour-section,
  .voy-article-tags-wrap { padding-inline: 20px; }
  .voy-tour-overview p { font-size: 16px; }
  .voy-tour-overview h2 { font-size: 23px; }
  .voy-tour-overview blockquote { font-size: 20px; padding-left: 18px; }
  .voy-tour-section__title { font-size: 24px; }

  .voy-itinerary__button.accordion-button { font-size: 16px !important; padding: 16px 18px !important; }
  .voy-itinerary__body.accordion-body { padding: 0 18px 18px !important; }

  .voy-tour-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .voy-tour-cta { padding-block: 56px; }
  .voy-tour-cta__inner { padding-inline: 20px; gap: 16px; }
  .voy-tour-cta__title { font-size: 27px; }

  .voy-tour-related { padding-block: 48px; }
  .voy-tour-related__inner { padding-inline: 20px; }
  .voy-tour-related__title { font-size: 24px; margin-bottom: 22px; }
}

/* ==========================================================================
   DARK MODE — hook is html.t4-dark (see darkmode.css); tokens already flip,
   these are the leaks that need an explicit remap (fixed pixel colors,
   Bootstrap accordion defaults, line-through/box-shadow colors, etc).
   ========================================================================== */
html.t4-dark .voy-tour-listing .voy-tax-masthead,
html.t4-dark .voy-tour-listing .voy-tax-bc-band,
html.t4-dark .voy-tour-hero,
html.t4-dark .voy-tour-overview { background: var(--voy-bg); }

html.t4-dark .voy-tour-listing .voy-eyebrow { color: var(--voy-primary); }

html.t4-dark .voy-quickfacts { background: var(--voy-elevated); border-color: var(--voy-border); }
html.t4-dark .voy-quickfacts__item { border-color: var(--voy-border); }

html.t4-dark .voy-itinerary__item.accordion-item,
html.t4-dark .voy-itinerary__button.accordion-button,
html.t4-dark .voy-itinerary__body.accordion-body { background: var(--voy-elevated) !important; border-color: var(--voy-border) !important; }
html.t4-dark .voy-itinerary__button.accordion-button:not(.collapsed) { color: var(--voy-primary) !important; }
html.t4-dark .voy-itinerary__button.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C9085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
}
html.t4-dark .voy-itinerary__button.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D86A3F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
}

html.t4-dark .voy-tour-include__item--no .voy-tour-include__icon { background: var(--voy-border); color: var(--voy-muted); }
html.t4-dark .voy-tour-include__item--no .voy-tour-include__text { text-decoration-color: var(--voy-border); }

html.t4-dark .voy-article-tag { background: var(--voy-elevated); border-color: var(--voy-border); color: var(--voy-text); }
html.t4-dark .voy-article-tag:hover { background: var(--voy-border); }

html.t4-dark .voy-tour-related { background: var(--voy-elevated); }
html.t4-dark .voy-tour-related__card { background: var(--voy-surface); border-color: var(--voy-border); }

html.t4-dark .voy-tour-card .voy-card__media:not(:has(img)) {
  background: linear-gradient(135deg, var(--voy-elevated), var(--voy-bg));
}
html.t4-dark .voy-tour-related__card:not(:has(.voy-tour-related__media))::before {
  background-color: var(--voy-elevated);
}