/* Wild Gaze Safaris – Luxury Box & Card Enhancement Layer
   Loaded last to override inline page styles site-wide */

/* ── Enhanced design tokens ─────────────────────────────────── */
:root {
  --wg-shadow-sm: 0 2px 14px rgba(26, 20, 8, 0.08);
  --wg-shadow-md: 0 10px 32px rgba(26, 20, 8, 0.14);
  --wg-shadow-lg: 0 20px 48px rgba(26, 20, 8, 0.18);
  --wg-shadow-hover: 0 16px 40px rgba(26, 20, 8, 0.16), 0 4px 12px rgba(184, 148, 26, 0.12);
  --wg-card-pad: clamp(22px, 3vw, 30px);
  --wg-card-pad-lg: clamp(26px, 3.5vw, 36px);
  --wg-text-on-light: #334155;
  --wg-text-muted-light: #475569;
  --wg-text-on-dark: rgba(245, 236, 210, 0.92);
  --wg-text-muted-dark: rgba(232, 220, 188, 0.78);
}

/* ── Shared card elevation ──────────────────────────────────── */
.wg-shortcut-card,
.wg-tzh-card,
.wg-tz-card,
.wg-kili-card,
.wg-zan-exp-card,
.wg-pemba-exp-card,
[class*="-white-card"],
[class*="-stat-card"],
.wg-itin-info-card,
.wg-cultural-info-card,
.wg-faq-item,
.wg-birding-park,
.wg-about-value-card,
.wg-about-team-card,
.wg-rental-perk {
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--wg-shadow-sm) !important;
  transition:
    transform 0.32s cubic-bezier(0.22, 0.68, 0, 1.05),
    box-shadow 0.32s ease,
    border-color 0.25s ease !important;
}

.wg-shortcut-card:hover,
.wg-tzh-card:hover,
.wg-tz-card:hover,
.wg-kili-card:hover,
.wg-zan-exp-card:hover,
.wg-pemba-exp-card:hover,
[class*="-white-card"]:hover,
[class*="-stat-card"]:hover,
.wg-itin-info-card:hover,
.wg-cultural-info-card:hover,
.wg-birding-park:hover,
.wg-rental-perk:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--wg-shadow-hover) !important;
  border-color: rgba(184, 148, 26, 0.45) !important;
}

/* ── Homepage shortcut cards ──────────────────────────────────── */
.wg-shortcut-card {
  padding: 0 !important;
  overflow: hidden;
  clip-path: var(--wg-radius-cut);
  background: var(--card-bg) !important;
}

.wg-shortcut-body {
  padding: var(--wg-card-pad) var(--wg-card-pad-lg) calc(var(--wg-card-pad) + 4px) !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  background: var(--card-bg);
}

.wg-shortcut-title {
  margin-bottom: 4px !important;
  color: var(--dark) !important;
  line-height: 1.35 !important;
}

.wg-shortcut-text {
  font-size: 0.875rem !important;
  color: var(--wg-text-on-light) !important;
  line-height: 1.72 !important;
  margin-bottom: 12px !important;
}

.wg-shortcut-link {
  font-size: 0.625rem !important;
  color: var(--orange) !important;
  padding-bottom: 3px !important;
  margin-top: auto;
}

/* ── Package / safari cards (tzh, tz, kili, zan, pemba) ─────── */
.wg-tzh-body,
.wg-tz-body,
.wg-kili-body,
.wg-zan-exp-body,
.wg-pemba-exp-body,
[class*="-card-body"] {
  padding: var(--wg-card-pad) var(--wg-card-pad-lg) calc(var(--wg-card-pad) + 6px) !important;
  gap: 12px !important;
}

.wg-tzh-desc,
.wg-tz-desc,
.wg-kili-desc,
.wg-zan-exp-desc,
[class*="-card-desc"],
[class*="-desc"]:not([class*="hero"]):not([class*="sec-sub"]) {
  font-size: 0.8125rem !important;
  color: var(--wg-text-muted-light) !important;
  line-height: 1.75 !important;
}

.wg-tzh-card-title,
.wg-tz-card-title,
.wg-kili-card-title,
.wg-zan-exp-title,
[class*="-card-title"]:not([class*="info"]) {
  color: var(--dark) !important;
  line-height: 1.3 !important;
}

.wg-tzh-mstat .lbl,
.wg-tz-mstat .lbl,
[class*="-mstat"] .lbl,
[class*="-stat"] .lbl {
  color: var(--wg-text-muted-light) !important;
}

/* ── Circuit panel – luxury light card on dark intro bands ───── */
.wg-tzh-intro .wg-tzh-info-cards,
.wg-tz-intro .wg-tz-info-cards,
.wg-circuit-panel,
.wg-kili-intro .wg-kili-info-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(132, 105, 51, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02) !important;
  overflow: hidden;
  clip-path: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.wg-tzh-intro .wg-tzh-info-cards::before,
.wg-tz-intro .wg-tz-info-cards::before,
.wg-circuit-panel::before,
.wg-kili-intro .wg-kili-info-cards::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-pale), transparent);
  flex-shrink: 0;
}

.wg-tzh-intro .wg-tzh-info-card,
.wg-tz-intro .wg-tz-info-card,
.wg-circuit-panel .wg-circuit-row,
.wg-kili-intro .wg-kili-info-card {
  display: grid !important;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 18px !important;
  row-gap: 4px !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(132, 105, 51, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  padding: 22px 26px !important;
  margin: 0 !important;
  transition: background 0.25s ease !important;
}

/* safaris.html: icon, title, text are siblings – grid placement */
.wg-tz-intro .wg-tz-info-card-icon,
.wg-kili-intro .wg-kili-info-card-icon {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
}

.wg-tz-intro .wg-tz-info-card-title,
.wg-kili-intro .wg-kili-info-card-title {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0 !important;
}

.wg-tz-intro .wg-tz-info-card-text,
.wg-kili-intro .wg-kili-info-card-text {
  grid-column: 2;
  grid-row: 2;
}

/* homepage: icon + wrapped content column */
.wg-tzh-intro .wg-tzh-info-card-icon,
.wg-circuit-panel .wg-tzh-info-card-icon {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
}

.wg-tzh-intro .wg-circuit-row-content,
.wg-circuit-panel .wg-circuit-row-content {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wg-tzh-intro .wg-tzh-info-card:last-child,
.wg-tz-intro .wg-tz-info-card:last-child,
.wg-circuit-panel .wg-circuit-row:last-child,
.wg-kili-intro .wg-kili-info-card:last-child {
  border-bottom: none !important;
}

.wg-tzh-intro .wg-tzh-info-card:hover,
.wg-tz-intro .wg-tz-info-card:hover,
.wg-circuit-panel .wg-circuit-row:hover,
.wg-kili-intro .wg-kili-info-card:hover {
  transform: none !important;
  background: #fdfbf7 !important;
  box-shadow: none !important;
}

.wg-tzh-intro .wg-tzh-info-card-icon,
.wg-tz-intro .wg-tz-info-card-icon,
.wg-circuit-panel .wg-tzh-info-card-icon,
.wg-kili-intro .wg-kili-info-card-icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  color: var(--wg-title-bronze-alt, #9a7e3e) !important;
  background: #fdfbf7 !important;
  border: 1px solid rgba(132, 105, 51, 0.15) !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  clip-path: none !important;
}

.wg-tzh-intro .wg-tzh-info-card-title,
.wg-tz-intro .wg-tz-info-card-title,
.wg-circuit-panel .wg-tzh-info-card-title,
.wg-circuit-panel .wg-tz-info-card-title,
.wg-kili-intro .wg-kili-info-card-title {
  font-family: var(--font-display), 'Cinzel', serif !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wg-title-bronze, #846933) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.wg-tzh-intro .wg-tzh-info-card-text,
.wg-tz-intro .wg-tz-info-card-text,
.wg-circuit-panel .wg-tzh-info-card-text,
.wg-circuit-panel .wg-tz-info-card-text,
.wg-kili-intro .wg-kili-info-card-text {
  color: var(--wg-text-slate, #334155) !important;
  font-size: 0.8125rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  letter-spacing: 0.01em;
}

/* intro band spacing */
.wg-tzh-intro-grid,
.wg-tz-intro-grid {
  align-items: center !important;
  gap: clamp(36px, 5vw, 64px) !important;
}

@media (max-width: 960px) {
  .wg-tzh-intro .wg-tzh-info-cards,
  .wg-tz-intro .wg-tz-info-cards,
  .wg-circuit-panel,
  .wg-kili-intro .wg-kili-info-cards {
    margin-top: 8px;
  }
}

@media (max-width: 560px) {
  .wg-tzh-intro .wg-tzh-info-card,
  .wg-tz-intro .wg-tz-info-card,
  .wg-circuit-panel .wg-circuit-row,
  .wg-kili-intro .wg-kili-info-card {
    grid-template-columns: 42px 1fr;
    column-gap: 14px !important;
    padding: 18px 20px !important;
  }

  .wg-tzh-intro .wg-tzh-info-card-icon,
  .wg-tz-intro .wg-tz-info-card-icon,
  .wg-circuit-panel .wg-tzh-info-card-icon,
  .wg-kili-intro .wg-kili-info-card-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 0.9rem !important;
  }
}

/* ── Light-section white / info cards ───────────────────────── */
.wg-itin-info-card,
.wg-cultural-info-card,
[class*="-white-card"],
.wg-zan-white-card,
.wg-birding-info-card,
.wg-book-info-card {
  background: var(--card-bg) !important;
  padding: var(--wg-card-pad) var(--wg-card-pad-lg) !important;
  border: 1px solid rgba(132, 105, 51, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02) !important;
  clip-path: none !important;
}

.wg-itin-info-card-title,
.wg-cultural-info-card-title,
[class*="-white-card-title"],
.wg-birding-info-card-title,
.wg-book-info-card-title {
  color: var(--wg-title-bronze, #846933) !important;
  margin-bottom: 14px !important;
}

.wg-itin-info-card p,
.wg-itin-info-card li,
.wg-cultural-info-card p,
.wg-cultural-info-card li,
[class*="-white-card"] p,
[class*="-white-card"] li,
.wg-birding-info-card p,
.wg-birding-info-card li,
.wg-book-info-card p,
.wg-book-info-card li {
  color: var(--wg-text-on-light) !important;
  line-height: 1.75 !important;
  font-size: 0.875rem !important;
}

/* ── Review cards – premium testimonial style ───────────────── */
.wg-rev-card {
  background: linear-gradient(168deg, #fffefb 0%, #faf5e8 42%, #fffdf7 100%) !important;
  border: 1px solid rgba(184, 148, 26, 0.28) !important;
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 6px rgba(26, 20, 8, 0.05),
    0 14px 40px rgba(26, 20, 8, 0.11),
    0 0 0 1px rgba(184, 148, 26, 0.07) !important;
}

.wg-rev-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-pale), rgba(245, 208, 96, 0.4), transparent);
  z-index: 2;
}

.wg-rev-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(245, 208, 96, 0.07), transparent 55%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(184, 148, 26, 0.04), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.wg-rev-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(184, 148, 26, 0.5) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 6px 16px rgba(26, 20, 8, 0.08),
    0 22px 52px rgba(26, 20, 8, 0.14),
    0 0 0 1px rgba(184, 148, 26, 0.18) !important;
}

.wg-rev-body {
  position: relative;
  z-index: 1;
  padding: var(--wg-card-pad-lg) var(--wg-card-pad-lg) calc(var(--wg-card-pad-lg) + 2px) !important;
}

.wg-rev-text {
  font-size: 0.875rem !important;
  color: var(--wg-text-muted-light) !important;
  line-height: 1.78 !important;
}

.wg-rev-title {
  color: var(--dark) !important;
  margin-bottom: 10px !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.05em !important;
}

.wg-rev-author {
  padding-top: 16px !important;
  margin-top: 6px !important;
  border-top: 1px solid rgba(184, 148, 26, 0.14) !important;
}

.wg-rev-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #f5f0e4 !important;
  border: 2px solid rgba(184, 148, 26, 0.38) !important;
  box-shadow:
    0 2px 10px rgba(26, 20, 8, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55) !important;
  flex-shrink: 0;
  padding: 0 !important;
}

.wg-rev-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wg-rev-quote-icon {
  font-size: 2.6rem !important;
  color: rgba(184, 148, 26, 0.2) !important;
  margin-bottom: -4px !important;
}

.wg-rev-source {
  background: rgba(184, 148, 26, 0.08) !important;
  border: 1px solid rgba(184, 148, 26, 0.16) !important;
  padding: 4px 8px !important;
  border-radius: 2px !important;
}

/* ── FAQ accordion boxes ──────────────────────────────────────── */
.wg-faq-item {
  box-shadow: none !important;
}

.wg-faq-item.open {
  box-shadow: var(--wg-shadow-sm) !important;
  background: #fffdf8 !important;
}

.wg-faq-question {
  padding: 20px 24px !important;
}

.wg-faq-answer {
  padding: 0 24px 22px 62px !important;
}

.wg-faq-answer p,
.wg-faq-a-text {
  color: var(--wg-text-on-light) !important;
  line-height: 1.78 !important;
  font-size: 0.875rem !important;
}

/* ── Gold CTA buttons (VIEW ALL SAFARIS etc.) ─────────────────── */
.wg-tzh-btn,
.wg-tz-btn,
.wg-kili-btn,
.wg-zan-cta-btn,
.wg-pemba-cta-btn,
.wg-about-cta-btn-primary,
.wg-home-btn-primary,
.wg-ph-cta,
.wg-itin-book-btn {
  color: var(--dark) !important;
  background: linear-gradient(145deg, #e8c040 0%, #c49a18 55%, #a88010 100%) !important;
  padding: 15px 38px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow:
    0 4px 16px rgba(184, 148, 26, 0.35),
    0 1px 3px rgba(26, 20, 8, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  border: 1px solid rgba(160, 120, 10, 0.4) !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    gap 0.2s ease !important;
}

.wg-tzh-btn:hover,
.wg-tz-btn:hover,
.wg-kili-btn:hover,
.wg-zan-cta-btn:hover,
.wg-pemba-cta-btn:hover,
.wg-about-cta-btn-primary:hover,
.wg-home-btn-primary:hover,
.wg-ph-cta:hover,
.wg-itin-book-btn:hover {
  transform: translateY(-2px) !important;
  opacity: 1 !important;
  color: var(--dark) !important;
  box-shadow:
    0 8px 24px rgba(184, 148, 26, 0.45),
    0 2px 6px rgba(26, 20, 8, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* Outline / secondary CTA buttons */
.wg-tzh-btn-outline,
.wg-zan-cta-btn-outline,
.wg-pemba-cta-btn-outline,
.wg-about-cta-btn-outline {
  padding: 14px 28px !important;
  color: var(--gold) !important;
  border: 1px solid rgba(184, 148, 26, 0.5) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.wg-tzh-btn-outline:hover,
.wg-zan-cta-btn-outline:hover,
.wg-pemba-cta-btn-outline:hover {
  background: rgba(184, 148, 26, 0.08) !important;
  border-color: var(--gold) !important;
  color: var(--dark) !important;
}

/* Text link CTAs inside cards */
.wg-tzh-cta,
.wg-tz-cta,
.wg-kili-cta,
.wg-zan-cta,
[class*="-card"] [class*="-cta"]:not([class*="btn"]):not([class*="bar"]) {
  color: var(--orange) !important;
  font-size: 0.625rem !important;
  padding-bottom: 3px !important;
}

/* ── Body text contrast (light backgrounds) ───────────────────── */
.wg-shortcuts,
.wg-tzh,
.wg-tzh-packages,
.wg-tz-routes,
.wg-rev,
.wg-about,
.wg-faq,
.wg-contact,
.wg-book,
section[class*="-packages"],
section[class*="-exp"] {
  --text-light: var(--wg-text-on-light);
  --text-muted: var(--wg-text-muted-light);
}

.wg-shortcut-text,
.wg-tzh-desc,
.wg-tz-desc,
.wg-rev-text,
[class*="-intro-text"]:not([class*="-hero"]),
[class*="-sec-sub"],
[class*="-park-text"],
[class*="-highlight"]:not([class*="-item"]) {
  color: var(--wg-text-muted-light) !important;
}

/* Dark intro / hero bands only – not light card surfaces (wg-zan-intro-text-col, etc.) */
.wg-tzh-intro-text,
.wg-tz-intro-body p,
.wg-kili-intro-body p,
.wg-zan-hero-sub,
.wg-pemba-hero-sub,
[class*="-hero-sub"],
[class*="-cta-bar-sub"] {
  color: var(--wg-text-muted-dark) !important;
  line-height: 1.78 !important;
}

/* Light cream sections – readable body copy on white cards */
.wg-zan-intro-text,
.wg-zan-intro-points li,
.wg-zan-stone-lead,
.wg-zan-hi-text,
.wg-zan-section-sub,
.wg-zan-prac-card-text,
.wg-pemba-intro-text,
.wg-pemba-stone-lead,
.wg-pemba-hi-text,
.wg-pemba-section-sub,
.wg-pemba-prac-card-text {
  color: var(--wg-text-on-light) !important;
}

/* ── Stat mini cards ──────────────────────────────────────────── */
[class*="-stat-card"] {
  padding: var(--wg-card-pad) !important;
  background: var(--card-bg) !important;
  box-shadow: var(--wg-shadow-sm) !important;
}

/* ── Birding / cultural / accommodation cards ─────────────────── */
.wg-birding-park-body,
.wg-cultural-card-body,
.wg-accom-card-body {
  padding: var(--wg-card-pad) !important;
}

/* ── Responsive spacing ───────────────────────────────────────── */
@media (max-width: 620px) {
  .wg-shortcut-body,
  .wg-tzh-body,
  .wg-tz-body,
  .wg-rev-body {
    padding: 20px 22px 24px !important;
  }

  .wg-tzh-btn,
  .wg-tz-btn,
  .wg-zan-cta-btn,
  .wg-pemba-cta-btn {
    padding: 14px 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wg-shortcut-card,
  .wg-tzh-card,
  .wg-tz-card,
  .wg-rev-card,
  [class*="-white-card"],
  .wg-tzh-btn,
  .wg-tz-btn {
    transition: none !important;
  }

  .wg-shortcut-card:hover,
  .wg-tzh-card:hover,
  .wg-tz-card:hover {
    transform: none !important;
  }
}