/* ===================================================================
   vi-main.css   -   viaggindia.in

   Deliberately NOT the main site's look. viaggitourindia.com is light,
   cream and serif. This is dark, geometric and sans, with marigold and
   jade instead of rust and gold. Same company, different room.
   =================================================================== */

:root {
  --vi-bg:      #12110F;   /* near black, warm */
  --vi-bg2:     #1B1A17;   /* raised panel */
  --vi-line:    #2C2A26;
  --vi-text:    #E9E5DC;
  --vi-muted:   #948C7E;
  --vi-marigold:#E9A13B;   /* accent 1 */
  --vi-jade:    #3E9E82;   /* accent 2 */
  --vi-white:   #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--vi-bg);
  color: var(--vi-text);
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--vi-white);
}
a { color: var(--vi-marigold); text-decoration: none; }
a:hover { color: var(--vi-white); }
img { max-width: 100%; height: auto; display: block; }

/* ---------- top strip -------------------------------------------------- */
.vi-strip {
  background: var(--vi-bg2); border-bottom: 1px solid var(--vi-line);
  font-size: 13.5px; color: var(--vi-muted);
}
.vi-strip a { color: var(--vi-text); }
.vi-strip a:hover { color: var(--vi-marigold); }
.vi-strip i { color: var(--vi-jade); }

.vi-head { border-bottom: 1px solid var(--vi-line); }
.vi-mark {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px;
  color: var(--vi-white); letter-spacing: -.02em; line-height: 1.1;
}
.vi-mark span { color: var(--vi-marigold); }
.vi-dom { font-size: 11.5px; color: var(--vi-muted); letter-spacing: .14em; text-transform: uppercase; }
.vi-navlink { color: var(--vi-text); font-size: 15px; font-weight: 500; }
.vi-navlink:hover { color: var(--vi-marigold); }

/* ---------- buttons ---------------------------------------------------- */
.vi-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--vi-marigold); color: #17150F; font-weight: 700; font-size: 15px;
  padding: 13px 26px; border: 0; border-radius: 2px; transition: background .2s ease;
}
.vi-btn:hover { background: #f3b258; color: #17150F; }
.vi-btn-line {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; color: var(--vi-text); font-weight: 600; font-size: 15px;
  padding: 12px 25px; border: 1px solid var(--vi-line); border-radius: 2px;
}
.vi-btn-line:hover { border-color: var(--vi-marigold); color: var(--vi-marigold); }

/* ---------- hero: split, not a photo banner ---------------------------- */
.vi-hero { border-bottom: 1px solid var(--vi-line); overflow: hidden; }
.vi-hero-copy { padding: 74px 0; }
@media (max-width: 991px) { .vi-hero-copy { padding: 48px 0 40px; } }

.vi-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--vi-jade); margin-bottom: 22px;
}
.vi-eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--vi-jade); }
.vi-hero h1 {
  font-size: clamp(32px, 4.4vw, 58px); line-height: 1.04; margin: 0 0 20px; letter-spacing: -.03em;
}
.vi-hero h1 em { font-style: normal; color: var(--vi-marigold); }
.vi-hero p { font-size: clamp(15.5px, 1.3vw, 18px); color: var(--vi-muted); max-width: 52ch; margin: 0 0 30px; }

/* photo mosaic instead of one big banner */
.vi-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; min-height: 460px; height: 100%; }
.vi-mosaic a { overflow: hidden; background: var(--vi-bg2); }
.vi-mosaic img { width: 100%; height: 100%; object-fit: cover; opacity: .82;
  transition: opacity .4s ease, transform .6s ease; }
.vi-mosaic a:hover img { opacity: 1; transform: scale(1.05); }
.vi-mosaic a:first-child { grid-row: span 2; }
@media (max-width: 991px) { .vi-mosaic { min-height: 260px; } }

/* ---------- sections --------------------------------------------------- */
.vi-sec { padding: 84px 0; border-bottom: 1px solid var(--vi-line); }
.vi-sec.is-tight { padding: 56px 0; }
.vi-sec.is-panel { background: var(--vi-bg2); }
@media (max-width: 767px) { .vi-sec { padding: 54px 0; } }

.vi-num {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: .2em;
  color: var(--vi-jade); display: block; margin-bottom: 12px;
}
.vi-sec h2 { font-size: clamp(25px, 2.8vw, 36px); line-height: 1.15; margin: 0 0 14px; }
.vi-intro { color: var(--vi-muted); max-width: 60ch; margin: 0; }

/* ---------- fact rows --------------------------------------------------- */
.vi-facts { list-style: none; padding: 0; margin: 0; }
.vi-facts li { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--vi-line); }
.vi-facts li:last-child { border-bottom: 1px solid var(--vi-line); }
.vi-facts b { display: block; color: var(--vi-white); font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.vi-facts span { color: var(--vi-muted); font-size: 14.5px; line-height: 1.6; }
.vi-facts i { flex: 0 0 22px; color: var(--vi-jade); font-size: 17px; padding-top: 3px; }

/* ---------- destinations as a list, not cards --------------------------- */
.vi-dest { list-style: none; padding: 0; margin: 0; }
.vi-dest li { border-top: 1px solid var(--vi-line); }
.vi-dest li:last-child { border-bottom: 1px solid var(--vi-line); }
.vi-dest a {
  display: flex; align-items: center; gap: 20px; padding: 16px 4px;
  color: var(--vi-text); transition: padding .25s ease, background .25s ease;
}
.vi-dest a:hover { padding-left: 16px; background: rgba(233,161,59,.05); color: var(--vi-marigold); }
.vi-thumb { flex: 0 0 88px; width: 88px; height: 58px; overflow: hidden; background: var(--vi-bg2); }
.vi-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter .35s ease; }
.vi-dest a:hover .vi-thumb img { filter: grayscale(0); }
.vi-name { flex: 1 1 auto; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 17px; min-width: 0; }
.vi-note { color: var(--vi-muted); font-size: 13.5px; display: none; }
.vi-go { color: var(--vi-muted); font-size: 14px; }
.vi-dest a:hover .vi-go { color: var(--vi-marigold); }
@media (min-width: 768px) { .vi-note { display: block; flex: 0 0 auto; } }
@media (hover: none) { .vi-thumb img { filter: grayscale(0); } }

/* ---------- prose -------------------------------------------------------- */
.vi-rich { font-size: 16.5px; line-height: 1.85; color: var(--vi-muted); }
.vi-rich strong { color: var(--vi-text); }
.vi-rich h3 { font-size: 20px; margin: 30px 0 10px; }
.vi-rich p { margin: 0 0 18px; }

/* ---------- CTA ---------------------------------------------------------- */
.vi-cta { background: linear-gradient(120deg, #17352C 0%, #12110F 62%); }
.vi-cta h2 { font-size: clamp(26px, 3.2vw, 40px); margin: 0 0 14px; }
.vi-cta p { color: #b7c9c1; max-width: 56ch; margin: 0 0 26px; }

/* ---------- chips -------------------------------------------------------- */
.vi-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.vi-chips a {
  display: inline-block; padding: 9px 15px; font-size: 13.5px; color: var(--vi-muted);
  border: 1px solid var(--vi-line); border-radius: 2px;
}
.vi-chips a:hover { border-color: var(--vi-marigold); color: var(--vi-marigold); }

/* ---------- footer ------------------------------------------------------- */
.vi-foot { background: #0C0B0A; }
.vi-foot h4 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--vi-muted); margin: 0 0 16px; }
.vi-foot ul { list-style: none; padding: 0; margin: 0; }
.vi-foot ul li a { display: block; padding: 5px 0; font-size: 14.5px; color: var(--vi-text); }
.vi-foot ul li a:hover { color: var(--vi-marigold); }
.vi-foot p { color: var(--vi-muted); font-size: 14.5px; }
.vi-foot i { color: var(--vi-jade); width: 18px; }
.vi-bar { border-top: 1px solid var(--vi-line); font-size: 13px; color: #6E675C; }

@media (prefers-reduced-motion: reduce) {
  .vi-mosaic img, .vi-dest a, .vi-thumb img { transition: none; }
  .vi-mosaic a:hover img { transform: none; }
}