/* CreteCompass tour pages (experiences.cretecompass.com/{code}). Loaded by views/tour.php only. */

/* titles: no short underline, no icons (some sections had one, some not) */
.page-tour .block__title { padding-bottom: 0; margin-bottom: 12px; }
.page-tour .block__title::after { display: none; }
.page-tour .block__title .icon { display: none; }

/* rating like on the cards: green star, number of reviews in brackets */
.tour-rating .icon { color: var(--v-green); }
.tour-rating .muted { font-weight: 600; }

/* breadcrumbs: one row, the tour title gets cut with … */
.tour-crumbs { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; padding-top: 10px; }
.tour-crumbs > * { flex: none; }
.tour-crumbs__here { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tour-crumbs__short { display: none; }
@media (max-width: 759px) {
  .page-tour .tour { padding-top: 0; }
  .tour-crumbs { padding-top: 6px; font-size: 13px; gap: 4px; }
  .tour-crumbs a { min-height: 28px; }
  .tour-crumbs__long { display: none; }
  .tour-crumbs__short { display: inline; }
}

/* gallery: never wider than the screen (fixes the "zoomed in" photo on phones), heart on the main photo */
.tgallery { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .tgallery--side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.tgallery__main { min-width: 0; overflow: hidden; }
.tgallery__track { width: 100%; }
.tgallery__slide { min-width: 0; }
.tgallery__save { position: absolute; z-index: 3; top: 12px; right: 12px; }
.tgallery__nav[hidden] { display: none; }
@media (max-width: 759px) {
  .tgallery { margin: 6px -16px 16px; border-radius: 0; }
  .page-tour .listing__head { padding-top: 4px; }
  .page-tour .listing__title { font-size: 28px; line-height: 1.15; }
}

/* what is included / not included: one faint blue box with a line in the middle */
.tour-incl { background: var(--brand-50); border: 1px solid #d6e6f6; border-radius: 16px; padding: 18px 20px; gap: 0; }
.tour-incl > div { padding: 4px 0; }
@media (min-width: 700px) {
  .tour-incl > div + div { border-left: 1px solid #c9dcf0; padding-left: 24px; }
  .tour-incl > div:first-child { padding-right: 24px; }
}
@media (max-width: 699px) { .tour-incl > div + div { border-top: 1px solid #c9dcf0; margin-top: 12px; padding-top: 14px; } }
.tour-incl .block__title { font-size: 19px; }

/* card rows: no scrollbar, arrows, a part of the next card shows so you see there is more */
.xcar { position: relative; }
.xcar__track { display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; cursor: grab; }
.xcar__track::-webkit-scrollbar { display: none; }
.xcar__track > * { scroll-snap-align: start; min-width: 0; }
.xcar__track.is-grab { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.xcar__track.is-grab a { pointer-events: none; }
@media (max-width: 559px) { .xcar__track { grid-auto-columns: 78%; gap: 16px; } }
.xcar__nav { position: absolute; z-index: 4; top: 36%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); display: grid; place-items: center; box-shadow: 0 4px 14px rgb(20 50 79 / .18); cursor: pointer; }
.xcar__nav:hover { color: var(--brand); }
.xcar__nav--prev { left: -14px; }
.xcar__nav--next { right: -14px; }
.xcar__nav[hidden] { display: none; }
@media (hover: none) { .xcar__nav { display: none; } }

/* booking box: the green button is the box's top on phones; it sticks to the bottom of the screen
   (above the menu bar) until you scroll to the box, then it rides along with the box, and sticks again when you scroll back up */
.tour-cta { display: none; }
@media (max-width: 959px) {
  .page-tour .biz__layout { display: block; }
  .page-tour .tour-side { display: contents; }
  .tour-cta { position: sticky; z-index: 30; bottom: calc(var(--tabbar-h, 64px) + var(--safe-b, 0px)); display: flex; align-items: center; gap: 12px; margin: 26px 0 0; padding: 12px 14px; background: #fff; border: 1px solid #d9dde2; border-radius: 14px 14px 0 0; box-shadow: 0 -6px 18px rgb(20 50 79 / .1); }
  .tour-cta .vbox__btn { flex: 1; }
  .tour-cta__price { display: grid; line-height: 1.15; color: #1a2b49; }
  .tour-cta__price small { font-size: 12.5px; }
  .tour-cta__price strong { font-size: 20px; font-weight: 800; }
  .page-tour .tour-side .vbox { border-top: 0; border-radius: 0 0 12px 12px; margin-top: -1px; }
  .page-tour .vbox__btn--box, .page-tour .vbox__price { display: none; }
  .page-tour .biz__bar { display: none; }
}

/* v39: title of a card row as far from the cards as other titles from their text */
.tour-near .block__title { margin-bottom: 18px; }

/* v40: the same generous space above and below every divider line (as between Overview and the card row) */
.page-tour .biz__main > .block { padding: 0 0 40px; margin: 0 0 40px; border-bottom: 1px solid var(--line); }
.page-tour .biz__main > .block:last-child { border-bottom: 0; margin-bottom: 0; }
.page-tour .biz__main > .tour-stale + .block, .page-tour .listing__head + .block { padding-top: 0; }
.page-tour .listing__head { padding-bottom: 28px; }
@media (max-width: 759px) { .page-tour .biz__main > .block { padding-bottom: 32px; margin-bottom: 32px; } }

/* v40: desktop booking box sticks early and stays around the middle of the screen */
@media (min-width: 960px) {
  .tour .biz__side { top: max(calc(var(--header-h) + 24px), calc(50vh - 200px)); }
}
.page-tour .biz__main > .block > :last-child, .page-tour .biz__main > .block > ol:last-of-type li:last-child p { margin-bottom: 0; }
.page-tour .biz__main > .block > :first-child { margin-top: 0; }

/* ======================================================================
   v46 place pages (views/listing-detail.php): the same build as the tour pages, text over the full width
   ====================================================================== */
.page-place .listing { padding-top: 0; }
.page-place .block__title { padding-bottom: 0; margin-bottom: 12px; }
.page-place .block__title::after { display: none; }
.page-place .block__title .icon { display: none; }
.page-place .place__main > .block { padding: 0 0 40px; margin: 0 0 40px; border-bottom: 1px solid var(--line); }
.page-place .place__main > .block:last-child { border-bottom: 0; margin-bottom: 0; }
.page-place .place__main > .block > :first-child { margin-top: 0; }
.page-place .place__main > .block > :last-child { margin-bottom: 0; }
.page-place .listing__head { padding: 0 0 28px; }
.page-place .listing__meta { margin: 12px 0 0; gap: 8px; }
.page-place .listing__meta .rating .icon { color: var(--v-green, #008768); }
.page-place .listing__meta .rating .muted { font-weight: 600; }
.place-dir { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-left: 4px; border-radius: 50%; background: var(--brand-50); color: var(--brand); border: 1.5px solid var(--brand-50); }
.place-dir:hover { border-color: var(--brand); }
.place-dir .icon { width: 19px; height: 19px; }
@media (max-width: 759px) {
  .page-place .listing__title { font-size: 28px; line-height: 1.15; }
  .page-place .place__main > .block { padding-bottom: 32px; margin-bottom: 32px; }
}

/* gallery: badges top left, heart top right (as on the cards), photo credit small at the bottom */
.tgallery__badges { position: absolute; z-index: 3; top: 12px; left: 12px; right: 64px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.pbadge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--navy); font-size: 13px; font-weight: 800; box-shadow: 0 1px 4px rgb(0 0 0 / .18); }
.pbadge .icon { color: var(--cat, var(--brand)); }
.pbadge--gem { background: var(--gold); }
.pbadge--gem .icon { color: var(--navy); }
.tgallery__slide { position: relative; }
.tgallery__credit { position: absolute; left: 12px; bottom: 8px; font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .6); }
.tgallery__credit a { color: inherit; }
.page-place .tgallery__count { z-index: 3; }
.page-place .tgallery .placeholder { height: 100%; min-height: 260px; display: grid; place-items: center; background: color-mix(in srgb, var(--cat) 14%, #fff); }

/* insider tip: its own section, the light blue box with a line on the left */
.page-place .place-tip .tip { margin: 0; }

/* highlights & amenities: fact tiles, then one row per group with the features as chips */
.phl__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 4px 0 0; }
.phl__fact { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--brand-50); }
.phl__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--brand); }
.phl__ic .icon { width: 19px; height: 19px; }
.phl__fact dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.phl__fact dd { margin: 3px 0 0; font-weight: 700; color: var(--navy); line-height: 1.4; }
.phl__groups { margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.phl__facts + .phl__groups { margin-top: 18px; }
.phl__group { display: grid; gap: 10px; padding: 14px 18px; }
.phl__group + .phl__group { border-top: 1px solid var(--line); }
@media (min-width: 700px) { .phl__group { grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 16px; } }
.phl__label { margin: 0; font-size: 15px; font-weight: 800; color: var(--navy); }
.phl__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.phl__tags a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: none; }
.phl__tags a .icon { color: var(--brand); }
.phl__tags a:hover { border-color: var(--brand); color: var(--brand); }

/* around: the area in a few lines, then places nearby to swipe through */
.page-place .around > p { margin: 0 0 20px; }

/* activities nearby: the experiences bar and cards over the full width */
.place-acts { margin: 48px 0 10px; padding-top: 40px; border-top: 1px solid var(--line); }
.place-acts .section__title { margin: 0 0 6px; }
.place-acts__loading { color: var(--muted); min-height: 120px; }
.place-xf .xf-sticky { margin-bottom: 22px; }
@media (max-width: 759px) { .place-acts { margin-top: 36px; padding-top: 32px; } }
.page-place .place__main > .block:last-child { padding-bottom: 0; }
.place-acts { margin-top: 40px; }
.place-acts .section__title { margin-bottom: 0; }
.place-xf .xf-sticky { margin-top: 6px; }

/* v47: tour pages get the same space as the place pages: above/below the breadcrumbs and between photo and title */
.page-tour .tour { padding-top: 0; }
.page-tour .listing__head { padding-top: 0; }

/* v48: walks and drives show their stops and a button for the whole route in Google Maps */
.place-route { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: var(--brand-50); }
.place-route p { flex: 1 1 260px; margin: 0; display: flex; gap: 6px; align-items: baseline; color: var(--navy); font-size: 14.5px; }
.place-route .icon { color: var(--brand); flex: none; align-self: center; }
.mx-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border: 1.5px solid var(--brand); border-radius: 999px; background: #fff; color: var(--brand); font-weight: 800; font-size: 14px; text-decoration: none; }
.mx-btn:hover { background: #dcebfa; }
.place-route p { flex-wrap: wrap; }
.place-route p small { flex-basis: 100%; color: var(--muted); font-size: 13px; padding-left: 22px; }