/* =========================
   BASE
========================= */
:root{
  --bg:#ffffff;
  --card:#ffffff;
  --border:#e9e9e9;
  --muted:#666;

  --shadow: 0 10px 28px rgba(0,0,0,.06);
  --radius:18px;
  --max:1100px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  margin:0;
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system,
              Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:#0b0b0b;
  line-height:1.55;
}

h1,h2,h3{font-weight:600}
p{font-weight:400}
.small-text{font-weight:500}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 16px}


/* =========================
   TREK PAGES
========================= */

.hero-section{padding:22px 0}

.hero-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.hero-section-head h2{
  margin:0;
  font-size:18px;
  letter-spacing:-.2px;
}

.hero-section-head p{
  margin:0;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}

/* =========================
   HASHTAG MENU (Single Row Wrap)
========================= */

.tag-wrap{
  max-width:780px;
  margin:0 auto 14px;
  display:flex;
  flex-wrap:wrap;      /* Wrap only if needed */
  gap:14px;            /* Space between tags */
}

.tag{
  font-size:13px;
  font-weight:900;
  color:#0b0b0b;
  cursor:pointer;
  transition:opacity .15s ease, transform .15s ease;
}

.tag::before{
  content:"#";
  margin-right:3px;
  color:#666;
}

.tag:hover{
  opacity:.6;
  transform:translateY(-1px);
}

.tag.is-active{
  text-decoration:underline;
}


/* =========================
   CHIP MENU (2 columns everywhere)
========================= */

.chip-wrap{
  max-width:780px;
  margin:0 auto 12px;
  display:grid;
  grid-template-columns:repeat(2,1fr); /* Always 2 columns */
  gap:8px;
  padding-left:2px;
}

.chip{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
  transition:transform .15s ease;
  cursor:pointer;
  white-space:nowrap;
}

.chip:hover{
  transform:translateY(-1px);
}

.chip.is-active{
  background:#f2f2f2;
  border-color:#dcdcdc;
  box-shadow:none;
}

.chip-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  flex:0 0 10px;
}

/* Chip Colors */
.chip-route .chip-dot{background:#0b0b0b}
.chip-req .chip-dot{background:#7c3aed}
.chip-trans .chip-dot{background:#64748b}
.chip-exp .chip-dot{background:#f97316}
.chip-tips .chip-dot{background:#0ea5e9}
.chip-nepal .chip-dot{background:#dc2626}
.chip-green .chip-dot{background:#22c55e}


/* =========================
   INTRO CARD
========================= */

.intro{
  max-width:780px;
  margin:0 auto 14px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}

.intro-title{
  margin:0 0 4px;
  font-size:16px;
  font-weight:900;
}

.intro-desc{
  margin:0;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}


/* =========================
   CONTENT BLOCKS
========================= */

.block{
  padding:14px 0;
  border-bottom:1px solid var(--border);
  max-width:780px;
  margin:0 auto;
}

.block:last-child{border-bottom:none}

.block-title{
  margin:0 0 12px;
  font-size:15px;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:10px;
}


/* =========================
   PLACE LIST
========================= */

.place-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-left:4px;
}

.place-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
  transition:transform .15s ease, box-shadow .15s ease;
}

.place-link:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
}

.place-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}

.place-emoji{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  display:grid;
  place-items:center;
  background:#fff;
  font-size:18px;
  flex:0 0 34px;
}

.place-text{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1 1 auto;
}

.place-name{
  font-weight:900;
  font-size:14px;
}

.place-desc{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  margin-top:2px;
  line-height:1.35;
}


/* =========================
   META PILLS
========================= */

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-size:11px;
  font-weight:900;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
  white-space:nowrap;
}


/* Emoji Support */
.place-emoji,
.logo{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-variant-emoji:emoji;
}