/* ============================================================
   company-travel-guide.css — Almare Lanka Travels
   Sri Lanka Travel Guide page only.
   ============================================================ */

/* Sticky in-page section navigation */
.tg-nav {
  position: sticky;
  top: var(--header-height-scrolled);
  z-index: var(--z-index-docked);
  background: rgba(246, 247, 249, 0.92);
  border-bottom: 1px solid var(--color-navy-border);
  backdrop-filter: blur(10px);
}
.tg-nav-inner {
  display: flex;
  gap: var(--spacing-2);
  overflow-x: auto;
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  scrollbar-width: none;
}
.tg-nav-inner::-webkit-scrollbar { display: none; }
.tg-nav a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--coy-radius-chip);
  border: 1px solid var(--coy-border-soft);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-elegant);
}
.tg-nav a i { color: var(--color-gold); }
.tg-nav a:hover { border-color: var(--coy-border-gold-strong); color: var(--color-gold-light); }

/* Quick facts */
.tg-facts { gap: var(--spacing-4); }
.tg-fact {
  display: flex;
  gap: var(--spacing-4);
  align-items: flex-start;
  padding: var(--spacing-5);
  border-radius: var(--radius-2xl);
  background: var(--coy-glass);
  border: 1px solid var(--coy-border-soft);
}
.tg-fact-label {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-champagne-text);
  margin-bottom: var(--spacing-1);
}
.tg-fact-value {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* Best-season climate cards */
.tg-climate--best { border-color: var(--coy-border-gold-strong); }

/* Destinations: rounded photo, caption below (no overlay) */
.tg-dest { margin: 0; }
.tg-dest img,
.tg-dest .coy-img-missing {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--coy-border-soft);
  transition: var(--transition-elegant);
}
.tg-dest:hover img { border-color: var(--coy-border-gold-strong); transform: translateY(-4px); }
.tg-dest figcaption {
  margin-top: var(--spacing-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  font-weight: 400;
  color: var(--color-royal-light);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .tg-dest:hover img { transform: none; }
}

/* Silver Shore refinements */
.tg-fact { background: var(--color-platinum); border-color: var(--color-navy-border); border-radius: 14px; }
.tg-fact-label { font-family: var(--font-wordmark); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.24em; }
.tg-fact-value { font-weight: 300; color: var(--color-royal); }
.tg-nav a { font-weight: 400; text-transform: none; letter-spacing: 0.02em; font-size: 0.8rem; color: var(--color-royal-light); background: var(--color-platinum); border-color: var(--color-navy-border); }
.tg-nav a i { color: var(--color-gold); }
.tg-nav a:hover { color: #fff; background: var(--gradient-gold); border-color: transparent; }
.tg-nav a:hover i { color: #fff; }
.tg-climate--best { border-color: #2F7F86; }
.tg-dest img { border-radius: 18px; box-shadow: 0 20px 40px -28px rgba(10, 42, 102, 0.5); border: 0; }