/*
 * single-ewt_experience.css — styles for single-ewt_experience.php
 * Moved out of the template in v2.3.0: it used to be an inline <style>
 * block printed AFTER the page content (unstyled flash + reflow, never cached).
 * Loaded in <head> only when WordPress renders single-ewt_experience.php (see ewt_template_styles()).
 */

/* ── 01. Hero ──────────────────────────────────────────────── */

/* ── 02. Body grid ─────────────────────────────────────────── */
.exs-body__grid { display: grid; grid-template-columns: 1fr 380px; gap: 64px; }
.exs-body__main { min-width: 0; }

.exs-overview { margin-bottom: 4rem; }
.exs-overview .ewt-eyebrow { margin-top: .5rem; margin-bottom: 1.25rem; }
.exs-overview__text p { max-width: 68ch; margin-bottom: 1.25rem; }
.exs-overview__text p:last-child { margin-bottom: 0; }

.exs-highlights { margin-bottom: 4rem; }
.exs-highlights .ewt-eyebrow { margin-top: .5rem; margin-bottom: 1.5rem; }
.exs-highlights__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; }
.exs-highlight-item { display: flex; align-items: flex-start; gap: 1rem; }
.exs-highlight-item__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ewt-border);
  color: var(--ewt-bronze);
}
.exs-highlight-item__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: .5rem;
  background-color: var(--ewt-bronze);
}
.exs-highlight-item__label { display: block; font-family: var(--ewt-font-body); font-weight: 400; color: var(--ewt-ink-soft); font-size: 1rem; margin-bottom: .25rem; }
.exs-highlight-item__desc { font-size: .875rem; color: var(--ewt-ink-soft); }

.exs-included { margin-bottom: 1rem; }
.exs-included .ewt-eyebrow { margin-top: .5rem; margin-bottom: 1.25rem; }
.exs-included__list { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem 2rem; }
.exs-included__list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: .9375rem;
  color: var(--ewt-ink-soft);
  font-weight: 300;
}
.exs-included__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: 12px;
  height: 8px;
  border-left: 1.5px solid var(--ewt-bronze);
  border-bottom: 1.5px solid var(--ewt-bronze);
  transform: rotate(-45deg);
}

/* ── Sticky sidebar (shared price-card pattern) ───────────── */
.exs-sidebar { position: relative; }
.exs-sidebar__inner { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 1.5rem; }
.exs-price-card { background-color: var(--ewt-surface); padding: 2rem; }
.exs-price-card__top { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--ewt-border); }
.exs-price-card__top .ewt-eyebrow { margin-bottom: .75rem; }
.exs-price-card__price { font-family: var(--ewt-font-display); font-size: 1.5rem; color: var(--ewt-ember); margin-bottom: .375rem; }
.exs-price-card__duration { font-size: .8125rem; color: var(--ewt-muted); }
.exs-price-card__body { margin-bottom: 1.25rem; }
.exs-price-card__fact { display: flex; justify-content: space-between; align-items: baseline; font-size: .8125rem; }
.exs-price-card__fact span { color: var(--ewt-muted); }
.exs-price-card__fact strong { color: var(--ewt-ink-soft); font-weight: 400; text-align: right; }
.exs-price-card__actions { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }
.exs-price-card__cta { justify-content: center; }
.exs-price-card__wa {
  justify-content: center;
  color: var(--ewt-whatsapp);
  border: .5px solid var(--ewt-whatsapp);
}
.exs-price-card__wa:hover { background-color: var(--ewt-whatsapp); color: var(--ewt-ink); }
.exs-price-card__note { font-size: .75rem; color: var(--ewt-ghost); line-height: 1.6; }

.exs-trust { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; background-color: var(--ewt-surface-2); }
.exs-trust__item { display: flex; align-items: flex-start; gap: .75rem; font-size: .8125rem; color: var(--ewt-muted); }
.exs-trust__item svg { flex-shrink: 0; color: var(--ewt-bronze); margin-top: .1rem; }

/* ── 05. Gallery (edge-to-edge) ────────────────────────────── */
.exs-gallery { padding: var(--ewt-section-y) 0; }
.exs-gallery__head { margin-bottom: 2rem; }
.exs-gallery__head .ewt-eyebrow { margin-bottom: .5rem; }
.exs-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 4px;
}
.exs-gallery__item { position: relative; display: block; overflow: hidden; }
.exs-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ewt-ease); }
.exs-gallery__item:hover img { transform: scale(1.05); }
.exs-gallery__item--wide { grid-column: span 2; }
.exs-gallery__item--tall { grid-row: span 2; }
.exs-gallery__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16,14,11,.6);
  color: var(--ewt-ink-soft);
  opacity: 0;
  transition: opacity .2s var(--ewt-ease);
}
.exs-gallery__item:hover .exs-gallery__zoom { opacity: 1; }

/* ── 06. Practical info ────────────────────────────────────── */
.exs-practical__head { margin-bottom: 2.5rem; text-align: center; }
.exs-practical__head .ewt-eyebrow { display: inline-block; margin-bottom: .5rem; }
.exs-practical__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background-color: var(--ewt-border);
}
.exs-practical-card { background-color: var(--ewt-ink); padding: 2rem; }
.exs-practical-card .ewt-eyebrow { margin-bottom: .75rem; }
.exs-practical-card__value { color: var(--ewt-ink-soft); font-size: .9375rem; }

/* ── 07. Related safaris (shared card component) ──────────── */
.exs-safaris__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; }
.exs-safaris__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ewt-safari-card { background: var(--ewt-surface); overflow: hidden; }
.ewt-safari-card__image-wrap { display: block; position: relative; aspect-ratio: 4/3; overflow: hidden; }
.ewt-safari-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ewt-ease); }
.ewt-safari-card:hover .ewt-safari-card__image-wrap img { transform: scale(1.04); }
.ewt-safari-card__no-img { width: 100%; height: 100%; min-height: 240px; background: linear-gradient(135deg, var(--ewt-surface-2), var(--ewt-border)); }
.ewt-safari-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,14,11,.7) 0%, transparent 60%); }
.ewt-safari-card__body { padding: 1.5rem; }
.ewt-safari-card__tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ewt-safari-card__tag { font-size: .6rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ewt-bronze); border: .5px solid var(--ewt-ember); padding: .2rem .6rem; }
.ewt-safari-card__title { font-family: var(--ewt-font-display); font-size: 1.25rem; font-weight: 400; color: var(--ewt-ink-soft); line-height: 1.25; margin-bottom: .75rem; }
.ewt-safari-card__title a:hover { color: var(--ewt-bronze); }
.ewt-safari-card__meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: .5px solid var(--ewt-border); }
.ewt-safari-card__duration { font-size: .75rem; color: var(--ewt-muted); }
.ewt-safari-card__price { font-size: .8125rem; font-weight: 300; color: var(--ewt-ember); }
.ewt-safari-card__price span { font-size: .6rem; color: var(--ewt-ghost); margin-left: .2rem; }
.ewt-safari-card__cta { display: inline-flex; align-items: center; gap: .375rem; font-size: .6875rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ewt-bronze); }

/* ── 08. Bottom CTA ────────────────────────────────────────── */
.exs-cta-block { position: relative; background-color: var(--ewt-surface); overflow: hidden; padding: var(--ewt-section-y) 0; }
.exs-cta-block__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(191,140,69,.12), transparent 60%);
}
.exs-cta-block__inner { position: relative; max-width: 640px; margin: 0 auto; text-align: center; }
.exs-cta-block__inner h2 { margin-bottom: 1.25rem; }
.exs-cta-block__inner p { margin: 0 auto 2rem; color: var(--ewt-ink-soft); }
.exs-cta-block__btns { display: flex; justify-content: center; gap: 1rem; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .exs-body__grid { grid-template-columns: 1fr; }
  .exs-sidebar { order: -1; }
  .exs-sidebar__inner { position: static; }
  .exs-safaris__grid { grid-template-columns: repeat(2, 1fr); }
  .exs-gallery__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
}

@media (max-width: 768px) {
  
  
  
  .exs-highlights__grid { grid-template-columns: 1fr; }
  .exs-included__list { grid-template-columns: 1fr; }
  .exs-safaris__grid { grid-template-columns: 1fr; }
  .exs-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .exs-gallery__item--wide { grid-column: span 2; }
  .exs-gallery__item--tall { grid-row: span 1; }
  .exs-cta-block__btns { flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .exs-gallery__item img { transition: none; }
}

#exs-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
#exs-lightbox.is-open { display: flex; }
.exs-lb__backdrop { position: absolute; inset: 0; background: rgba(13,11,8,.96); }
.exs-lb__stage { position: relative; z-index: 1; max-width: 90vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; }
.exs-lb__img { max-width: 90vw; max-height: 90vh; object-fit: contain; display: block; }
.exs-lb__close {
  position: fixed; top: 1.5rem; right: 1.5rem;
  background: transparent; border: .5px solid var(--ewt-border); color: var(--ewt-ink-soft);
  font-size: 1.25rem; width: 44px; height: 44px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: border-color .2s;
}
.exs-lb__close:hover { border-color: var(--ewt-bronze); color: var(--ewt-bronze); }
.exs-lb__prev, .exs-lb__next {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: transparent; border: .5px solid var(--ewt-border); color: var(--ewt-ink-soft);
  font-size: 2rem; width: 48px; height: 64px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: border-color .2s, color .2s;
}
.exs-lb__prev { left: 1rem; }
.exs-lb__next { right: 1rem; }
.exs-lb__prev:hover, .exs-lb__next:hover { border-color: var(--ewt-bronze); color: var(--ewt-bronze); }