/* ═══════════════════════════════════════════════════════════
   TRAVELLER'S TONIC — Hero + Mobile Fix  v6 (FINAL)
   -------------------------------------------------------
   Strategy: hero-wrap is always a flex column.
   - Desktop: hero-content is a flex child, flex: 1, centered via
     justify-content:center. hero-nav is position:absolute (overlays top).
   - Mobile ≤768px: same flex model, adjusted padding + font sizes.
   This eliminates ALL conflicts with main.css absolute positioning.
   Enqueued LAST — wins without needing !important on every rule.
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   HERO BG LAYERS — real Unsplash photos per destination
───────────────────────────────────────────────────────── */
.slide-bg .bg-layer:nth-child(1) {
  background:
    linear-gradient(135deg, rgba(10,15,26,0.45) 0%, rgba(10,15,26,0.2) 100%),
    url('https://images.unsplash.com/photo-1489493585363-d69421e0edd3?w=1920&q=80&auto=format&fit=crop') center/cover no-repeat;
}
.slide-bg .bg-layer:nth-child(2) {
  background:
    linear-gradient(135deg, rgba(10,15,26,0.45) 0%, rgba(10,15,26,0.2) 100%),
    url('https://images.unsplash.com/photo-1518105779142-d975f22f1b0a?w=1920&q=80&auto=format&fit=crop') center/cover no-repeat;
}
.slide-bg .bg-layer:nth-child(3) {
  background:
    linear-gradient(135deg, rgba(10,15,26,0.45) 0%, rgba(10,15,26,0.2) 100%),
    url('https://images.unsplash.com/photo-1528360983277-13d401cdc186?w=1920&q=80&auto=format&fit=crop') center/cover no-repeat;
}
.slide-bg .bg-layer:nth-child(4) {
  background:
    linear-gradient(135deg, rgba(10,15,26,0.45) 0%, rgba(10,15,26,0.2) 100%),
    url('https://images.unsplash.com/photo-1580060839134-75a5edca2e99?w=1920&q=80&auto=format&fit=crop') center/cover no-repeat;
}
.slide-bg .bg-layer:nth-child(5) {
  background:
    linear-gradient(135deg, rgba(10,15,26,0.45) 0%, rgba(10,15,26,0.2) 100%),
    url('https://images.unsplash.com/photo-1526392060635-9d6019884377?w=1920&q=80&auto=format&fit=crop') center/cover no-repeat;
}

/* Desktop overlay — strong left gradient, opens right for the cards */
.slide-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    108deg,
    rgba(10,15,26,0.90) 0%,
    rgba(10,15,26,0.58) 42%,
    rgba(10,15,26,0.08) 100%
  );
}

/* ─────────────────────────────────────────────────────────
   HERO WRAP — flex column, always. Nav overlays via absolute.
───────────────────────────────────────────────────────── */
.hero-wrap {
  position: relative;
  width: 100%;
  height: 100svh;
  height: 100vh;       /* fallback for browsers without svh */
  min-height: 600px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Slide background always fills */
.hero-wrap .slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ─────────────────────────────────────────────────────────
   HERO NAV — always position:absolute so it never
   pushes hero-content down. Zero height in flex flow.
───────────────────────────────────────────────────────── */
.hero-nav {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 52px;
  gap: 0;
  background: linear-gradient(to bottom, rgba(10,15,26,0.70) 0%, transparent 100%);
}

/* ─────────────────────────────────────────────────────────
   HERO CONTENT — flex child that fills remaining space,
   centres vertically. Top padding clears the nav.
───────────────────────────────────────────────────────── */
.hero-content {
  /* Clear all legacy absolute positioning from main.css */
  position: relative !important;
  left: unset !important;
  top: unset !important;
  transform: none !important;
  /* Flex child layout — equal padding top/bottom so justify-content:center is true */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 80px 80px;
  max-width: 660px;
  width: 100%;
  z-index: 20;
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────
   HERO CARDS — absolute, right-centred (desktop)
───────────────────────────────────────────────────────── */
.hero-cards {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding-right: 52px;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
   NAV LOGO — enforce visibility
───────────────────────────────────────────────────────── */
.nav-logo-name {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
   ≤ 1100px — Tablet / intermediate
═══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero-nav  { padding: 14px 32px; }
  .hero-content { padding: 80px 52px 80px; }
  .hero-cards { padding-right: 32px; gap: 10px; }
  .h-card { width: 160px; }
  .nav-links-center { gap: 22px; }
}

@media (max-width: 900px) {
  .nav-links-center { gap: 14px; }
  .nav-links-center > li > a { font-size: 9.5px; }
  .hero-content { padding: 80px 40px 80px; max-width: 520px; }
  .h-card { width: 140px; }
}

/* ═══════════════════════════════════════════════════════
   ≤ 768px — MOBILE BREAKPOINT
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV: hide desktop items, show hamburger ── */
  .nav-links-center,
  .nav-links-flat,
  .nav-search,
  .nav-search-wrap,
  .nav-cta-pill {
    display: none !important;
  }

  .hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 46px !important;
    height: 46px !important;
    cursor: pointer !important;
    gap: 5px !important;
    border: none !important;
    background: rgba(255,255,255,0.12) !important;
    border-radius: 10px !important;
    padding: 6px !important;
    flex-shrink: 0 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: background 0.2s !important;
  }
  .hamburger:active { background: rgba(255,255,255,0.22) !important; }
  .hamburger span {
    width: 20px !important;
    height: 1.5px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    display: block !important;
  }
  .white-nav .hamburger {
    background: var(--mist) !important;
    backdrop-filter: none !important;
  }
  .white-nav .hamburger span {
    background: var(--ink) !important;
  }

  /* ── MOBILE NAV BAR ── */
  .hero-nav {
    padding: 14px 20px !important;
    background: linear-gradient(to bottom, rgba(10,15,26,0.82) 0%, transparent 100%) !important;
  }

  .white-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 20px !important;
    gap: 0 !important;
  }

  .hero-nav .nav-right,
  .white-nav .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
  }

  .nav-logo { flex-shrink: 0 !important; }

  .nav-logo-mark {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }
  .nav-logo-mark svg { width: 22px !important; height: 22px !important; }
  .nav-logo-name { font-size: 13.5px !important; line-height: 1.25 !important; }

  /* ── HERO WRAP — same flex model, 100svh ── */
  .hero-wrap {
    height: 100svh !important;
    height: 100vh !important;
    min-height: 580px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Darker overlay bottom for readability */
  .slide-bg::after {
    background: linear-gradient(
      to bottom,
      rgba(10,15,26,0.45) 0%,
      rgba(10,15,26,0.65) 45%,
      rgba(10,15,26,0.90) 100%
    ) !important;
  }

  /* Hide desktop side-scroll dots */
  .hero-scroll-indicator { display: none !important; }

  /* ── HERO CONTENT — mobile layout ── */
  .hero-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    /* Top pad clears nav (~70px), bottom pad is minimal — cards are absolute */
    padding: 72px 24px 20px !important;
    max-width: 100% !important;
    width: 100% !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
  }

  .hero-title {
    font-size: clamp(52px, 13vw, 80px) !important;
    line-height: 0.90 !important;
    margin-bottom: 18px !important;
  }

  .hero-body {
    font-size: 14px !important;
    line-height: 1.78 !important;
    max-width: 100% !important;
    margin-bottom: 30px !important;
    color: rgba(255,255,255,0.80) !important;
  }

  .btn-cta {
    padding: 13px 24px !important;
    font-size: 11px !important;
    gap: 12px !important;
  }

  /* ── HERO CARDS — icon strip at bottom on mobile ── */
  .hero-cards {
    position: absolute !important;
    top: unset !important;
    right: unset !important;
    bottom: 52px !important;
    left: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 0 20px !important;
    z-index: 10 !important;
    pointer-events: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Bigger cards on mobile — show label too */
  .h-card {
    width: 108px !important;
    height: 108px !important;
    border-radius: 18px !important;
    flex-shrink: 0 !important;
  }

  .h-card-bg {
    font-size: 44px !important;
    font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif !important;
  }

  /* Show card label on mobile now that cards are big enough */
  .h-card-label {
    display: block !important;
    font-size: 11px !important;
    padding: 10px 12px !important;
    letter-spacing: 0.01em !important;
  }

  /* ── CONTROLS & PROGRESS ── */
  .hero-controls {
    position: absolute !important;
    bottom: 18px !important;
    right: 20px !important;
    z-index: 20 !important;
  }

  .ctrl { width: 38px !important; height: 38px !important; font-size: 13px !important; }
  .hero-progress { height: 3px !important; }

  /* ── SECTION ADJUSTMENTS ── */
  .looking-section  { padding: 60px 0 40px; }
  .looking-header   { padding: 0 5%; margin-bottom: 32px; }
  .section-title    { font-size: clamp(28px,8vw,44px); }
  .cpanel           { width: 175px; height: 245px; }

  .country-section       { padding: 64px 0 56px; }
  .country-section-title { font-size: clamp(32px,8.5vw,52px); }
  .country-section-sub   { font-size: 13px; padding: 0 6%; }
  .country-card          { width: 230px; height: 340px; }
  .ccard-country-name    { font-size: 24px; }
  .ccard-country-name span { font-size: 18px; }

  .tailored-section  { padding: 60px 5%; }
  .tailored-header   { margin-bottom: 40px; }
  .tailored-title    { font-size: clamp(30px,8vw,46px); }
  .offerings-grid    { grid-template-columns: 1fr; border: none; border-radius: 0; gap: 0; }
  .offering-card     { border: 1px solid var(--ink-20) !important; border-radius: 12px !important; margin-bottom: 12px; }
  .offering-card:last-child { margin-bottom: 0; }
  .offering-card::after { display: none; }

  .testimonials-section { padding: 60px 5%; }
  .testimonials-header  { margin-bottom: 40px; }
  .testimonials-masonry { grid-template-columns: 1fr; gap: 16px; }
  .testimonials-masonry > div:nth-child(2) { margin-top: 0 !important; }
  .tcard-quote { font-size: 16px; }
  .tcard-body  { padding: 22px 20px; }
  .tcard-text  { padding: 28px 22px; }
  .tcard-text .tcard-quote { font-size: 18px; }

  .cta-band    { padding: 56px 5%; }
  .cta-band h2 { font-size: clamp(30px,8vw,46px); }

  .page-hero-band  { padding: 56px 5% 64px; }
  .page-hero-band::before { display: none; }
  .page-hero-title { font-size: clamp(36px,9vw,56px); }
  .page-hero-sub   { font-size: 13px; }

  .filter-bar { padding: 16px 5%; gap: 8px; overflow-x: auto; flex-wrap: nowrap; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-pill { padding: 7px 14px; font-size: 10px; flex-shrink: 0; }

  .destinations-section { padding: 36px 5% 60px; }
  .dest-grid      { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .dest-card-img  { height: 185px; font-size: 46px; }
  .dest-card-name { font-size: 20px; }
  .dest-card-desc { font-size: 12px; }
  .dest-card-price-val { font-size: 20px; }

  .cta-section  { padding: 60px 5%; }
  .cta-title    { font-size: clamp(28px,7.5vw,44px); }
  .booking-row  { flex-direction: column; }
  .booking-field { min-width: 100%; border-right: none; border-bottom: 1px solid var(--ink-20); padding: 18px 20px; }
  .booking-field:last-child { border-bottom: none; }
  .booking-cta-row { padding: 20px 20px; }
  .booking-submit  { width: 100%; padding: 16px; }

  .about-hero-band   { padding: 56px 5% 68px; }
  .about-hero-band::before { display: none; }
  .about-hero-title  { font-size: clamp(36px,9vw,56px); }
  .about-hero-sub    { font-size: 14px; }
  .founder-section   { grid-template-columns: 1fr; gap: 36px; padding: 60px 5%; }
  .founder-quote-card { padding: 36px 28px; }
  .founder-quote-text { font-size: clamp(17px,4.5vw,22px); }
  .founder-stat-row  { gap: 10px; }
  .founder-stat-num  { font-size: 36px; }
  .motto-section { padding: 64px 5%; }
  .motto-text    { font-size: clamp(48px,13vw,80px); }
  .beliefs-section { padding: 60px 5%; }
  .beliefs-grid  { grid-template-columns: 1fr 1fr; gap: 12px; }
  .beliefs-grid .belief-card:nth-child(n) { grid-column: auto; }
  .belief-card   { padding: 26px 20px; }
  .team-section  { padding: 60px 5%; }
  .founders-row  { gap: 20px; }

  .site-footer   { padding: 48px 5% 28px; }
  .footer-inner  { flex-direction: column; gap: 36px; }
  .footer-right  { text-align: left; }
  .footer-socials { justify-content: flex-start; }
  .footer-bottom  { margin-top: 36px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════
   ≤ 480px — SMALL PHONES
═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .hero-wrap { min-height: 560px !important; }

  .hero-content {
    /* Minimal bottom padding — cards are absolute, no need to reserve space */
    padding: 70px 20px 16px !important;
  }

  .nav-logo-mark { width: 40px !important; height: 40px !important; }
  .nav-logo-name { font-size: 12.5px !important; }

  .hero-title {
    font-size: clamp(44px, 13vw, 66px) !important;
    line-height: 0.90 !important;
    margin-bottom: 14px !important;
  }

  .hero-body { font-size: 13px !important; margin-bottom: 24px !important; }

  .hero-cards {
    bottom: 48px !important;
    gap: 10px !important;
    padding: 0 20px !important;
  }

  /* Still big on small phones */
  .h-card { width: 96px !important; height: 96px !important; border-radius: 16px !important; }
  .h-card-bg { font-size: 38px !important; }
  .h-card-label { font-size: 10px !important; padding: 8px 10px !important; }

  .btn-cta { padding: 12px 20px !important; font-size: 10.5px !important; gap: 10px !important; }
  .btn-cta .arrow-circle { width: 22px !important; height: 22px !important; font-size: 11px !important; }
  .hero-controls { right: 16px !important; bottom: 14px !important; }

  .looking-section  { padding: 52px 0 36px; }
  .section-title    { font-size: clamp(26px,9vw,38px); }
  .cpanel           { width: 160px; height: 225px; }

  .country-section       { padding: 52px 0 44px; }
  .country-section-title { font-size: clamp(28px,9.5vw,44px); }
  .country-card          { width: 210px; height: 310px; }

  .dest-grid     { grid-template-columns: 1fr; gap: 14px; }
  .dest-card-img { height: 200px; font-size: 52px; }

  .filter-bar { gap: 6px; }
  .filter-label { display: none; }
}

/* ═══════════════════════════════════════════════════════
   ≤ 380px — VERY SMALL PHONES
═══════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .hero-nav { padding: 12px 14px !important; }
  .white-nav { padding: 11px 14px !important; }

  .hero-content { padding: 64px 16px 14px !important; }
  .hero-title { font-size: clamp(38px, 13vw, 54px) !important; }

  .nav-logo-mark { width: 36px !important; height: 36px !important; }
  .nav-logo-mark svg { width: 18px !important; height: 18px !important; }
  .nav-logo-name { font-size: 12px !important; }

  .hamburger { width: 42px !important; height: 42px !important; }

  /* Compact but still visible cards */
  .h-card { width: 82px !important; height: 82px !important; border-radius: 14px !important; }
  .h-card-bg { font-size: 30px !important; }
  .h-card-label { font-size: 9px !important; padding: 7px 8px !important; }
  .hero-cards { gap: 8px !important; padding: 0 16px !important; bottom: 44px !important; }

  .country-card { width: 195px; height: 290px; }
  .cpanel       { width: 150px; height: 210px; }
  .dest-card-img { height: 180px; }

  .mobile-nav-links > li > a { font-size: 22px; padding: 14px 0; }
  .mob-sub-links a { font-size: 15px; }
}