/* ================================================================
 * TOURS PAGES — archive, single, taxonomy archives
 * Scoped: .em-tours-page  (archive + taxonomy)
 *         .em-single-tour-page  (single tour)
 * Enqueued conditionally in functions.php (is_post_type_archive /
 * is_singular('tour') / is_tax).
 * ================================================================ */

/* ---------------------------------------------------------------
 * SHARED BASE
 * ------------------------------------------------------------- */
.em-tours-page,
.em-single-tour-page {
  background: var(--em-bg);
  color: var(--em-ink);
}

/* ---------------------------------------------------------------
 * ARCHIVE HERO  (dark header above the grid)
 * ------------------------------------------------------------- */
.em-archive-hero {
  position:        relative;
  background:      var(--em-dark);
  height:          100vh;    /* fill the viewport exactly — same as home hero */
  min-height:      540px;    /* floor for very short viewports */
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         5rem 0 0; /* clear the fixed nav */
  overflow:        hidden;
}
@media (max-width: 768px) {
  .em-archive-hero { height: auto; min-height: 70vh; padding: 6rem 0 3rem; }
}

.em-archive-hero__inner {
  max-width: 760px;
}

.em-archive-hero .em-subtitle {
  color: var(--em-gold);
}

.em-archive-hero .em-title {
  color: var(--em-bg);
  margin: .7rem 0 1.1rem;
}

.em-archive-hero__sub {
  color: rgba(244,236,224,.55);
  font-size: 1.05rem;
  max-width: 580px;
  line-height: 1.65;
}

.em-archive-hero__wm {
  position: absolute;
  bottom: -.08em;
  right: -.04em;
  font-family: var(--em-font-head);
  font-size: clamp(5rem, 18vw, 15rem);
  font-weight: 700;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.05);
  pointer-events: none;
  line-height: 1;
  user-select: none;
}

/* ---------------------------------------------------------------
 * BREADCRUMB
 * ------------------------------------------------------------- */
.em-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  font-family: var(--em-font-head);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,236,224,.35);
  margin-bottom: 1.8rem;
}

.em-breadcrumb a {
  color: rgba(244,236,224,.55);
  transition: color .2s;
}

.em-breadcrumb a:hover {
  color: var(--em-gold);
}

.em-breadcrumb [aria-current="page"],
.em-single-tour-page .em-breadcrumb [aria-current="page"] {
  color: var(--em-gold);
}

/* On single pages the breadcrumb sits on the dark hero */
.em-single-tour-page .em-breadcrumb {
  color: rgba(255,255,255,.35);
}

.em-single-tour-page .em-breadcrumb a {
  color: rgba(255,255,255,.55);
}

/* ---------------------------------------------------------------
 * FILTER BAR
 * ------------------------------------------------------------- */
.em-filter-bar {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  padding-top: 3rem;
}

.em-filter-bar a {
  font-family: var(--em-font-head);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  padding: .5rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(28,24,19,.18);
  color: var(--em-muted);
  transition: background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}

.em-filter-bar a:hover {
  border-color: var(--em-gold);
  color: var(--em-gold);
}

.em-filter-bar a.is-active {
  background: var(--em-gold);
  color: #fff;
  border-color: var(--em-gold);
}

/* ---------------------------------------------------------------
 * TOURS ARCHIVE GRID
 * ------------------------------------------------------------- */
.em-tours-archive {
  padding: 0 0 clamp(5rem,11vw,9rem);
}

.em-tours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.em-no-results {
  grid-column: 1 / -1;
  padding: 6rem 0;
  text-align: center;
  color: var(--em-muted);
  font-family: var(--em-font-head);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* ---------------------------------------------------------------
 * TOUR CARD  (used in archive + related tours on single page)
 * ------------------------------------------------------------- */
.em-tcard {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--em-ease), box-shadow .4s;
}

.em-tcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(28,24,19,.14);
}

/* Image */
.em-tcard__img {
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--em-bg2);
}

.em-tcard__img .ph {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .6s var(--em-ease);
}

.em-tcard:hover .em-tcard__img .ph {
  transform: scale(1.06);
}

/* Badges */
.em-tcard__badge {
  position: absolute;
  top: .9rem;
  left: .9rem;
  background: var(--em-gold);
  color: #fff;
  font-family: var(--em-font-head);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  padding: .28rem .75rem;
  border-radius: 999px;
  z-index: 2;
}

.em-tcard__diff {
  position: absolute;
  top: .9rem;
  right: .9rem;
  background: rgba(22,19,13,.72);
  color: var(--em-bg);
  font-family: var(--em-font-head);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  padding: .28rem .75rem;
  border-radius: 999px;
  z-index: 2;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Card body */
.em-tcard__body {
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.em-tcard__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .76rem;
  color: var(--em-muted);
  font-family: var(--em-font-head);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .7rem;
}

.em-tcard__meta-item {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.em-tcard__meta-item svg {
  color: var(--em-gold);
  flex-shrink: 0;
}

.em-tcard__title {
  font-family: var(--em-font-head);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.06;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--em-ink);
  margin-bottom: .6rem;
  transition: color .3s;
}

.em-tcard__title a {
  color: inherit;
}

.em-tcard:hover .em-tcard__title {
  color: var(--em-gold);
}

.em-tcard__highlight {
  font-size: .88rem;
  color: var(--em-muted);
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1.2rem;
}

/* Card footer */
.em-tcard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(28,24,19,.09);
  padding-top: 1rem;
  margin-top: auto;
  gap: 1rem;
}

.em-tcard__price {
  font-family: var(--em-font-head);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--em-muted);
  line-height: 1.2;
}

.em-tcard__price strong {
  display: block;
  font-size: 1.55rem;
  color: var(--em-gold);
  letter-spacing: -.02em;
  line-height: 1;
  margin-top: .1rem;
}

.em-tcard__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--em-font-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  font-size: .78rem;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  background: var(--em-ink);
  color: var(--em-bg);
  white-space: nowrap;
  transition: background .3s, transform .3s var(--em-ease);
}

.em-tcard__cta:hover {
  background: var(--em-gold);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------
 * PAGINATION
 * ------------------------------------------------------------- */
.em-pagination {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
}

.em-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: center;
}

.em-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 .5rem;
  border-radius: 999px;
  font-family: var(--em-font-head);
  font-size: .9rem;
  letter-spacing: .04em;
  font-weight: 600;
  border: 1px solid rgba(28,24,19,.16);
  color: var(--em-ink);
  transition: background .25s, border-color .25s, color .25s;
}

.em-pagination .page-numbers:hover,
.em-pagination .page-numbers.current {
  background: var(--em-gold);
  border-color: var(--em-gold);
  color: #fff;
}

.em-pagination .page-numbers.dots {
  border: none;
  background: none;
  color: var(--em-muted);
  pointer-events: none;
}

/* ================================================================
 * SINGLE TOUR
 * ================================================================ */

/* ---------------------------------------------------------------
 * SINGLE HERO
 * ------------------------------------------------------------- */
.em-single-hero {
  position: relative;
  height: 88vh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.em-single-hero__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.6s var(--em-ease);
  transform: scale(1.06);
}

.em-single-hero.is-loaded .em-single-hero__img {
  transform: scale(1);
}

.em-single-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(22,19,13,.92) 0%,
    rgba(22,19,13,.5)  45%,
    rgba(22,19,13,.18) 100%
  );
}

.em-single-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 3.5rem;
}

.em-single-hero h1 {
  font-family: var(--em-font-head);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .96;
  color: #fff;
  margin: .8rem 0 1.4rem;
  max-width: 840px;
}

.em-single-hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--em-gold);
  font-family: Georgia, serif;
  text-transform: none;
  letter-spacing: 0;
}

/* Key facts strip */
.em-single-facts {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.13);
}

.em-single-fact {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--em-font-head);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.6);
}

.em-single-fact svg {
  color: var(--em-gold);
  flex-shrink: 0;
}

.em-single-fact strong {
  color: #fff;
  font-weight: 600;
}

/* ---------------------------------------------------------------
 * SINGLE BODY LAYOUT  (2-col: main left, sidebar right)
 * ------------------------------------------------------------- */
.em-single-body {
  background: var(--em-bg);
}

.em-single-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 4.5rem;
  padding: 5rem 0 7rem;
  align-items: start;
}

/* With a gallery above it the band already supplies the breathing room, so
   the body must not add a second 5rem gap. */
.em-tour-gallery-band + .em-single-body .em-single-layout { padding-top: 4rem; }

/* ---------------------------------------------------------------
 * SINGLE CONTENT (left col)
 * ------------------------------------------------------------- */
.em-single-content h2 {
  font-family: var(--em-font-head);
  font-size: 1.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--em-ink);
  margin: 2.8rem 0 1.1rem;
}

.em-single-content h2:first-child {
  margin-top: 0;
}

/* The gallery used to open this column and absorbed the top of it. Without
   it the first block's own top margin collapses out of the article and drops
   the whole column below the sidebar, so the first block that actually
   renders must not carry one. Quick facts are display:none above 1024, hence
   the second rule. */
.em-single-content > *:first-child { margin-top: 0; }
@media (min-width: 1025px) {
  .em-single-content > .em-tour-facts:first-child + * { margin-top: 0; }
}

.em-single-desc {
  font-size: 1.04rem;
  line-height: 1.74;
  color: var(--em-ink);
}

.em-single-desc p + p {
  margin-top: .9rem;
}

/* Itinerary */
.em-itinerary {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .5rem;
}

.em-itinerary__item {
  background: #fff;
  border-radius: 14px;
  padding: 1.1rem 1.4rem 1.1rem 1.6rem;
  border-left: 3px solid var(--em-gold);
  transition: box-shadow .3s, border-color .3s;
}

.em-itinerary__item:hover {
  box-shadow: 0 4px 24px rgba(28,24,19,.08);
  border-color: var(--em-gold-d);
}

.em-itinerary__label {
  font-family: var(--em-font-head);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--em-gold);
  font-weight: 600;
  margin-bottom: .2rem;
}

.em-itinerary__text {
  font-size: .93rem;
  line-height: 1.57;
  color: var(--em-ink);
}

/* Included / Not Included */
.em-inc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: .5rem;
}

.em-inc-box {
  background: #fff;
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
}

.em-inc-box__title {
  font-family: var(--em-font-head);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.em-inc-box--yes .em-inc-box__title {
  color: var(--em-teal);
}

.em-inc-box--no .em-inc-box__title {
  color: var(--em-muted);
}

.em-inc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.em-inc-list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .88rem;
  line-height: 1.48;
  color: var(--em-ink);
}

.em-inc-list li svg {
  flex-shrink: 0;
  margin-top: .15em;
}

.em-inc-box--yes .em-inc-list li svg {
  color: var(--em-teal);
}

.em-inc-box--no .em-inc-list li svg {
  color: rgba(122,111,95,.5);
}

/* Photo gallery */
.em-single-gallery {
  margin-top: .5rem;
}

.em-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  border-radius: 16px;
  overflow: hidden;
}

.em-gallery-item {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--em-bg2);
}

.em-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--em-ease);
}

.em-gallery-item:hover img {
  transform: scale(1.08);
}

/* ---------------------------------------------------------------
 * BOOKING SIDEBAR  (right col, sticky)
 * ------------------------------------------------------------- */
.em-booking-box {
  background: #fff;
  border-radius: 22px;
  padding: 2rem;
  box-shadow: 0 2px 32px rgba(28,24,19,.08);
  position: sticky;
  top: 100px;
}

.em-booking-box__price-label {
  font-family: var(--em-font-head);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--em-muted);
  margin-bottom: .2rem;
}

.em-booking-box__price {
  font-family: var(--em-font-head);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--em-gold);
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .3rem;
}

.em-booking-box__price-note {
  font-size: .8rem;
  color: var(--em-muted);
  margin-bottom: 1.8rem;
}

.em-btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: 100%;
  padding: 1rem 1.4rem;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-family: var(--em-font-head);
  font-weight: 600;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: background .3s, transform .3s var(--em-ease);
  margin-bottom: .7rem;
}

.em-btn-whatsapp:hover {
  background: #128c7e;
  transform: translateY(-2px);
}

.em-btn-enquire {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .8rem 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(28,24,19,.18);
  color: var(--em-ink);
  font-family: var(--em-font-head);
  font-weight: 600;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: border-color .3s, color .3s;
  margin-bottom: 1.8rem;
}

.em-btn-enquire:hover {
  border-color: var(--em-gold);
  color: var(--em-gold);
}

.em-booking-box__divider {
  height: 1px;
  background: rgba(28,24,19,.09);
  margin-bottom: 1.5rem;
}

.em-booking-box__facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin-bottom: 1.6rem;
}

.em-booking-box__fact {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .86rem;
  color: var(--em-ink);
  line-height: 1.4;
}

.em-booking-box__fact svg {
  color: var(--em-gold);
  flex-shrink: 0;
  margin-top: .1em;
}

.em-booking-box__fact-label {
  font-family: var(--em-font-head);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--em-muted);
  display: block;
  margin-bottom: .1rem;
}

/* Share row */
.em-booking-box__share {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--em-font-head);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--em-muted);
}

.em-booking-box__share a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(28,24,19,.15);
  display: grid;
  place-items: center;
  color: var(--em-muted);
  transition: border-color .2s, color .2s;
}

.em-booking-box__share a:hover {
  border-color: var(--em-gold);
  color: var(--em-gold);
}

/* ---------------------------------------------------------------
 * RELATED TOURS SECTION
 * ------------------------------------------------------------- */
.em-related {
  background: var(--em-bg2);
  padding: clamp(4rem,9vw,7rem) 0;
}

.em-related .em-title {
  margin-bottom: 3rem;
}

.em-related .em-subtitle {
  margin-bottom: .6rem;
}

/* ================================================================
 * RESPONSIVE
 * ================================================================ */
@media (max-width: 1024px) {
  /* Kept as the single-column fallback for any engine that does not support
     `display: contents` (below): there the wrapper still has a box and this
     is what stacks the two columns. Where contents IS supported the rule is
     inert, because the element has no box to lay out. */
  .em-single-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .em-booking-box {
    position: static;
  }
  /* No separate fallback `order` is needed for that case: the aside and the
     article are given order 1 and 3 below, and those work just as well as
     grid items of .em-single-layout as they do as flex items of <main>. The
     card leads the article either way; only the gallery's position differs. */

  /* ── BOOKING CARD FIRST ─────────────────────────────────────────────
     Hoisting the sidebar to `order: -1` inside .em-single-layout put the
     booking card above the article — and above the map, which
     single-content.php renders as the LAST thing in the article. But the
     photo gallery is not in the article: single-tour.php prints it as a
     sibling of .em-single-body, directly under <main>, deliberately so it
     can span the full container instead of the 828px content column. So
     the card was above the map and still below the gallery, and on a phone
     the gallery is a full 16/9 band — the customer scrolled past a screen
     of photographs before reaching a price or a WhatsApp button.

     The booking card and the gallery are in different DOM branches, three
     levels apart, and `order` only ever sorts siblings. Flattening the
     three wrapper DIVs between them with `display: contents` puts the
     article, the aside, the gallery band and the hero into ONE sibling
     list — <main>'s — where a single `order` scale can sequence all four:

         hero → booking card → gallery → article (facts, itinerary, map)

     Only generic <div> wrappers are flattened. <article>, <aside> and the
     hero <section> keep their boxes, so no landmark or role is lost; this
     is a layout change, not a semantic one.

     ALL OF THIS IS ≤1024 ONLY. Above it every rule here is off, <main> is a
     plain block again and the 1fr/340px two-column composition is byte-for
     -byte what it is today. */
  .em-single-tour-page #em-main {
    display:        flex;
    flex-direction: column;
  }
  /* .em-lightbox is also a direct child of <main>, but it is
     `position: fixed`, so it is out of flow and unaffected by the ordering
     below. The hero keeps the default order 0 and stays first. */
  .em-single-tour-page .em-single-sidebar      { order: 1; }
  .em-single-tour-page .em-tour-gallery-band   { order: 2; }
  .em-single-tour-page .em-single-content      { order: 3; }
  .em-single-tour-page .em-related             { order: 4; }

  .em-single-tour-page .em-single-body,
  .em-single-tour-page .em-single-body > .container,
  .em-single-tour-page .em-single-layout {
    display: contents;
  }

  /* The three flattened wrappers carried two things worth keeping, and both
     are restated here rather than redesigned:

     1. .container's measure — `width: min(1240px, 92vw); margin-inline:
        auto`, copied verbatim from main.css, so the article and the card
        keep exactly the gutters they have today. Logical, so RTL mirrors.
     2. .em-single-layout's spacing — its 5rem/7rem block padding and 3rem
        row gap became margins on the two children. The gallery band brings
        its own `padding: 4rem 0 0`, which supplies the space below the card.

     .em-single-body's only other property was `background: var(--em-bg)`,
     the same papyrus <body> already paints, so nothing changes visually
     when its box goes away. */
  .em-single-tour-page .em-single-content,
  .em-single-tour-page .em-single-sidebar {
    width:         min(1240px, 92vw);
    margin-inline: auto;
  }
  /* 5rem/7rem are .em-single-layout's own block padding and 3rem is its row
     gap, moved onto the two children now that the wrapper has no box. 5rem,
     not the 4rem of the `.em-tour-gallery-band + .em-single-body` variant:
     that reduction existed because the gallery band sat directly above the
     body and already supplied the space. Below 1024 the band no longer sits
     there — the booking card does, directly under the hero — so the
     unreduced value is the correct one on both gallery and no-gallery
     tours.

     Measured against production at 390 / 768: a tour with no gallery comes
     out at 7698 / 6479 px of document height — identical, to the pixel. A
     tour with one is 16px (1rem) taller, which is exactly the reduction
     that no longer applies now that the band is not the thing sitting above
     the body. No other spacing on the page moves. */
  .em-single-tour-page .em-single-sidebar { margin-block: 5rem 0; }
  .em-single-tour-page .em-single-content { margin-block: 3rem 7rem; }
}

@media (max-width: 860px) {
  .em-tours-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .em-tours-grid {
    grid-template-columns: 1fr;
  }
  .em-single-facts {
    gap: 1.4rem;
  }
  .em-inc-grid {
    grid-template-columns: 1fr;
  }
  .em-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .em-filter-bar {
    gap: .4rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .em-tcard,
  .em-tcard__img .ph,
  .em-single-hero__img,
  .em-tcard__cta,
  .em-btn-whatsapp,
  .em-btn-enquire {
    transition: none !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------
 * ACTIVITIES PAGE — page-activities.php
 * ------------------------------------------------------------- */
.em-page-activities {
  background: var(--em-bg);
}

.em-act-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 4rem 0;
}

.em-act-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  background: var(--em-bg2);
  border: 1px solid rgba(192,136,58,.15);
  border-radius: 12px;
  padding: 2.5rem 2rem 2rem;
  text-decoration: none;
  color: var(--em-ink);
  transition: border-color .25s, transform .25s;
  overflow: hidden;
}
.em-act-cat:hover {
  border-color: var(--em-gold);
  transform: translateY(-3px);
}
.em-act-cat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(192,136,58,.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s;
}
.em-act-cat:hover::before { opacity: 1; }

.em-act-cat__icon {
  color: var(--em-gold);
  margin-bottom: .4rem;
}

.em-act-cat__name {
  font-family: var(--em-font-head);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--em-ink);
  margin: 0;
}

.em-act-cat__desc {
  font-size: .95rem;
  color: var(--em-muted);
  line-height: 1.5;
  margin: 0;
  max-width: 30ch;
}

.em-act-cat__count {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--em-gold);
  font-weight: 600;
}

.em-act-cat__arrow {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  color: var(--em-gold);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s, transform .25s;
}
.em-act-cat:hover .em-act-cat__arrow {
  opacity: 1;
  transform: translateX(0);
}

.em-act-cta {
  background: var(--em-dark);
  padding: 4rem 0;
}
.em-act-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.em-act-cta__inner p {
  color: rgba(244,236,224,.7);
  font-size: 1.1rem;
  margin: 0;
}

@media (max-width: 640px) {
  .em-act-cats { grid-template-columns: 1fr; }
  .em-act-cta__inner { flex-direction: column; text-align: center; }
}


/* Tour count under the archive hero intro (Phase 5 collection pages).
   The hero sits on a dark ground, so this needs the light hero colour
   rather than the inherited body ink, which rendered it invisible. */
.em-archive-hero__count {
  margin-top:    .6rem;
  font-family:   var(--em-font-head);
  font-size:     .82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:         var(--em-gold);
}


/* Shown when a language has no tours of its own and the grid is falling back
   to the default language. Quiet, informational — not an error. */
.em-collection__fallback-note {
  margin:        0 0 1.6rem;
  padding:       .7rem 1rem;
  border-inline-start: 3px solid var(--em-gold);
  background:    var(--em-bg2);
  color:         var(--em-muted);
  font-size:     .9rem;
  border-radius: 0 6px 6px 0;
}


/* ══════════════════════════════════════════════════════════════════
 * SINGLE TOUR — BATCH A
 * Gallery + lightbox, inline quick facts, location map, price-on-request.
 * Uses the existing design tokens only; introduces no new visual language.
 * ══════════════════════════════════════════════════════════════════ */

/* ── Gallery ──────────────────────────────────────────────────── */

/* Phase 4: the gallery sits between the hero and the two-column body, so it
   owns the full container instead of the ~828px content column. Same warm
   ground as the body below it, so the two read as one surface. */
.em-tour-gallery-band {
  background: var(--em-bg);
  padding: 4rem 0 0;
}
.em-tour-gallery { margin: 0; }

/* main.css gives every <section> on an inner page clamp(4rem,9vw,7rem) of
   vertical padding — 112px above AND below the grid here, on top of the
   band's own spacing. The band owns this rhythm now. Specificity matches
   that rule deliberately; a plain class selector loses to it. */
body:not(.em-home-page) .em-tour-gallery-band .em-tour-gallery { padding: 0; }

.em-tgal__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
}
/* One image: it simply fills the frame */
.em-tgal__grid.is-single { grid-template-columns: 1fr; grid-template-rows: 1fr; }

.em-tgal__cell {
  position: relative;
  margin: 0; padding: 0;
  border: 0;
  background: var(--em-bg2);
  cursor: pointer;
  overflow: hidden;
  display: block;
}
.em-tgal__cell--primary { grid-column: 1 / 3; grid-row: 1 / 3; }
.em-tgal__grid.is-single .em-tgal__cell--primary { grid-column: 1; grid-row: 1; }

.em-tgal__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--em-ease);
}
.em-tgal__cell:hover .em-tgal__img { transform: scale(1.04); }
.em-tgal__cell:focus-visible { outline: 3px solid var(--em-gold); outline-offset: -3px; }

.em-tgal__all {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-end: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .58rem .95rem;
  border: 1px solid rgba(28,24,19,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--em-ink);
  font-family: var(--em-font-head);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--em-ease), transform .25s var(--em-ease);
}
.em-tgal__all:hover { background: #fff; transform: translateY(-1px); }
.em-tgal__all:focus-visible { outline: 3px solid var(--em-gold); outline-offset: 2px; }

/* Desktop / tablet geometry.
 *
 * The grid is chosen by how many SECONDARY photos there are, because a fixed
 * 4x2 mosaic cannot tile five of them: primary occupies 2x2, leaving four
 * cells, so the fifth fell into an implicit third row, collapsed the 1fr rows
 * and was clipped by overflow:hidden. Every data-n below tiles exactly, so no
 * cell is ever empty and none ever overflows.
 *
 * aspect-ratio on the grid (not on the cells) is what reserves the box before
 * the images arrive and keeps CLS at zero — every variant keeps it, and every
 * track is a fraction of it, never auto. */
@media (min-width: 769px) {
  .em-tgal__grid {
    aspect-ratio: 21 / 9;
    gap: 10px;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
  }
  .em-tgal__cell--primary { grid-column: 1; grid-row: 1 / -1; }

  /* 2 photos: side by side */
  .em-tgal__grid[data-n="1"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  /* 3 photos: stage + a stacked pair */
  .em-tgal__grid[data-n="2"] { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 1fr); }
  /* 4 photos: stage + a stacked trio */
  .em-tgal__grid[data-n="3"] { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); }
  /* 5 photos: stage + a 2x2 block */
  .em-tgal__grid[data-n="4"] { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); }
  /* 6+ photos: full-width stage over a thumbnail strip */
  .em-tgal__grid[data-n="5"] { grid-template-columns: repeat(5, 1fr); grid-template-rows: 3fr 1fr; }
  .em-tgal__grid[data-n="5"] .em-tgal__cell--primary { grid-column: 1 / -1; grid-row: 1; }

  /* The control belongs over the stage, not over a thumbnail. Grid placement
     rather than absolute offsets, so it mirrors correctly in RTL. */
  .em-tgal__all {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: end;
    justify-self: end;
    margin: 14px;
  }
  .em-tgal__grid[data-n="5"] .em-tgal__all { grid-column: -2 / -1; grid-row: 1; }
}

@media (max-width: 768px) {
  .em-tgal__grid { grid-template-columns: repeat(2, 1fr); aspect-ratio: 4 / 3; }
  .em-tgal__cell--primary { grid-column: 1 / 3; grid-row: 1; }
  /* only the first two secondary tiles fit once the primary is full-width */
  .em-tgal__cell:nth-child(n+4) { display: none; }
  .em-tgal__grid.is-single { aspect-ratio: 16 / 10; }
}
@media (max-width: 420px) {
  .em-tgal__all { inset-block-end: 10px; inset-inline-end: 10px; font-size: .72rem; padding: .5rem .8rem; }
}

/* ── Lightbox ─────────────────────────────────────────────────── */
body.em-lb-open { overflow: hidden; }

.em-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(.4rem, 2vw, 1.4rem);
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(12,10,7,.94);
}
.em-lightbox[hidden] { display: none; }

.em-lightbox__stage {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}
.em-lightbox__img {
  max-width: 100%;
  max-height: 82svh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.em-lightbox__count {
  font-family: var(--em-font-head);
  font-size: .8rem;
  letter-spacing: .14em;
  color: rgba(247,241,230,.72);
}

.em-lightbox__close,
.em-lightbox__nav {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(247,241,230,.26);
  background: rgba(247,241,230,.09);
  color: #f7f1e6;
  cursor: pointer;
  transition: background .25s var(--em-ease), border-color .25s var(--em-ease);
}
.em-lightbox__close:hover,
.em-lightbox__nav:hover { background: rgba(247,241,230,.2); border-color: rgba(192,136,58,.7); }
.em-lightbox__close:focus-visible,
.em-lightbox__nav:focus-visible { outline: 3px solid var(--em-gold); outline-offset: 2px; }

.em-lightbox__close {
  position: absolute;
  inset-block-start: clamp(.8rem, 3vw, 1.6rem);
  inset-inline-end: clamp(.8rem, 3vw, 1.6rem);
  z-index: 2;
}
.em-lightbox__nav[hidden] { display: none; }

/* RTL: the chevrons must point the way the reader travels */
html[dir="rtl"] .em-lightbox__nav svg { transform: scaleX(-1); }

@media (max-width: 560px) {
  .em-lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .em-lightbox__stage { grid-row: 1; }
  .em-lightbox__nav { position: static; }
  .em-lightbox__nav--prev { grid-row: 2; justify-self: start; }
  .em-lightbox__nav--next { grid-row: 2; justify-self: end; }
  .em-lightbox__img { max-height: 66svh; }
}

/* ── Inline quick facts ───────────────────────────────────────── */
.em-tour-facts { margin: 0 0 2.2rem; }

.em-tfacts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--em-hair, rgba(28,24,19,.12));
  border: 1px solid var(--em-hair, rgba(28,24,19,.12));
  border-radius: 12px;
  overflow: hidden;
}
.em-tfacts__row { background: var(--em-bg); padding: .85rem 1rem; }
.em-tfacts dt {
  font-family: var(--em-font-head);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--em-muted);
  margin: 0 0 .2rem;
}
.em-tfacts dd { margin: 0; font-weight: 500; color: var(--em-ink); line-height: 1.35; }

/* The sidebar already carries these on wide screens; this block exists
   for mobile, where the sidebar drops below the whole article. */
@media (min-width: 1025px) { .em-tour-facts { display: none; } }

/* ── Location + map ─────────────────────────────────────────────
   Moved to assets/css/sections/tour-map.css in Phase 5B: the map grew a
   route layer, markers, an information card and a bottom sheet, and it
   loads only on tours that actually have coordinates. */

/* ── Price on request ─────────────────────────────────────────── */
.em-booking-box__price--request {
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--em-ink);
  font-family: var(--em-font-head);
}

/* ── Itinerary: optional per-step image ───────────────────────── */
.em-itinerary__body { min-width: 0; }
.em-itinerary__title {
  font-family: var(--em-font-head);
  font-size: 1.02rem;
  margin: 0 0 .2rem;
  line-height: 1.25;
}
.em-itinerary__img {
  margin-top: .6rem;
  border-radius: 10px;
  overflow: hidden;
  max-width: 260px;
}
.em-itinerary__img img { width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  .em-tgal__img,
  .em-tgal__all { transition: none; }
  .em-tgal__cell:hover .em-tgal__img { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO PRICE + CTA
   ═══════════════════════════════════════════════════════════════ */
.em-single-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 1.15rem;
}
.em-hero-price { display: flex; align-items: baseline; gap: .45rem; color: #fff; }
.em-hero-price__from {
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  opacity: .78;
}
.em-hero-price__val {
  font-family: var(--em-font-head, inherit);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--em-gold);
}
.em-hero-price__val--req {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: #fff;
}
.em-hero-price__unit { font-size: .82rem; opacity: .78; }

/* ═══════════════════════════════════════════════════════════════
   CLS — reserve the hero facts strip
   Between roughly 700px and 1024px the four facts fit on ONE row in the
   metric-matched fallback font and need TWO in Barlow, so the strip grew
   45px -> 99px on font swap. The hero content is bottom-anchored, so the
   whole block jumped: CLS 0.21 on the two "2 days / 1 night" tours.
   Reserving the two-row height makes the swap invisible. Scoped to the
   single-tour hero; the typography system itself is untouched.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .em-single-hero .em-single-facts {
    /* Reserving height was not enough: the container stopped growing, but
       the facts still re-wrapped INSIDE it when the webfont arrived, and a
       fact hopping to the next row is itself a layout shift.
       A fixed two-column grid takes the decision away from text width, so
       every fact keeps its cell in the fallback font and in Barlow alike. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: .55rem 1.4rem;
  }
  .em-single-hero .em-single-fact { min-width: 0; }
}

/* Below 420px two columns leave a cell narrow enough that a long fact
   ("Group size 1-2 people per flight") could wrap inside it, which would
   reintroduce the same shift one level down. One column per fact keeps
   every row a single line. */
@media (max-width: 420px) {
  .em-single-hero .em-single-facts { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
}

/* Destination page — "see all tours" button spacing */
.em-dest-related__more { margin-top: 2.5rem; text-align: center; }

/* The generic .btn is designed for a light page; on the dark hero overlay
   it inherited the link colour and read as loose text next to the price.
   The hero CTA gets its own solid treatment. */
.em-single-hero .em-hero-book {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .72rem 1.5rem;
  border-radius: 999px;
  background: var(--em-gold);
  color: #17130d;
  font-family: var(--em-font-head, inherit);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .25s var(--em-ease, ease), transform .25s var(--em-ease, ease);
}
.em-single-hero .em-hero-book:hover,
.em-single-hero .em-hero-book:focus-visible {
  background: #d79b4a;
  transform: translateY(-2px);
  color: #17130d;
}
.em-single-hero .em-hero-book .arr { display: inline-flex; }
.em-single-hero .em-hero-book svg { width: 15px; height: 15px; }
[dir="rtl"] .em-single-hero .em-hero-book svg { transform: scaleX(-1); }

/* Separate the price from the CTA a little more at wide widths */
@media (min-width: 900px) { .em-single-hero__cta { gap: 1rem 2.2rem; } }

/* At exactly 390px the price and the CTA fit on one row in the fallback
   font and needed two in Barlow, so the bottom-anchored hero jumped 44px
   when the webfont landed — a shift introduced by adding this CTA.
   Stacking them on mobile makes the height independent of text width. */
@media (max-width: 640px) {
  .em-single-hero__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TRANSPORT VARIANT SELECTOR
   Bus / Van / Private car are separate tours with separate URLs. This
   is the only place the relationship is visible to a visitor, so it has
   to read as a real choice: current option marked, price per option,
   every other option a plain link to that tour.
   ═══════════════════════════════════════════════════════════════ */

.em-tour-transport { margin: 2.6rem 0 0; }
.em-tour-transport__lede { color: var(--em-muted); margin: 0 0 1rem; }

.em-transport {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--em-hair, rgba(28,24,19,.12));
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.em-transport__item + .em-transport__item {
  border-top: 1px solid var(--em-hair, rgba(28,24,19,.12));
}

.em-transport__opt {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .95rem 1.15rem;
  text-decoration: none;
  color: var(--em-ink);
  transition: background .25s var(--em-ease, ease);
}
a.em-transport__opt:hover,
a.em-transport__opt:focus-visible { background: var(--em-bg2); }
a.em-transport__opt:focus-visible { outline: 2px solid var(--em-gold); outline-offset: -2px; }

/* Radio-style marker: filled and ticked on the current tour */
.em-transport__mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(122,111,95,.45);
  display: grid;
  place-items: center;
  color: #fff;
}
.em-transport__item.is-current .em-transport__mark {
  background: var(--em-gold);
  border-color: var(--em-gold);
}

.em-transport__label {
  font-family: var(--em-font-head, inherit);
  font-size: 1.02rem;
  letter-spacing: .02em;
}
.em-transport__item.is-current .em-transport__label { font-weight: 700; }

.em-transport__price {
  font-family: var(--em-font-head, inherit);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--em-gold-d, #a06f28);
  white-space: nowrap;
}
/* A variant with no price says so — it never borrows a sibling's number */
.em-transport__req {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--em-muted);
}
.em-transport__item.is-current { background: var(--em-bg2); }

@media (max-width: 420px) {
  .em-transport__opt { grid-template-columns: 22px 1fr; row-gap: .3rem; padding: .85rem 1rem; }
  .em-transport__price { grid-column: 2; }
}

/* At 320px a two-line tour title momentarily collapses to one line while
   the webfont weights settle (74px -> 37px -> 74px), and because the hero
   content is bottom-anchored that transient reflow moved the whole block:
   CLS 0.0224, over the 0.02 budget. Reserving two lines holds it still.
   The final rendered height is unchanged for any title that already wraps. */
@media (max-width: 420px) {
  .em-single-hero h1 { min-height: 4.7rem; }
}