/* ===== pages/index.css ===== */
.page-index main.container {
  padding-bottom: 40px;
}

.page-index .topbar {
  /* position and background handled by base.css (fixed header) */
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.page-index .hero h1 {
  font-size: 32px;
  margin: 40px 0 20px;
  text-align: center;
  font-weight: 800;
  word-break: keep-all;
}

.page-index .subtitle {
  margin: 0;
  color: rgba(0, 0, 0, 0.65);
}

.page-index .country-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-index .city-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-index .spacer-box {
  min-height: 110px;
  height: auto;
  border: 1px dashed #ddd;
  border-radius: 12px;
  margin: 22px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* For map rounded corners */
}

#map-container {
  width: 100%;
  height: 400px;
  display: none;
  /* Toggled by JS */
}

/* index page chip colors (blue) */
.page-index .chip {
  border: 1px solid #2563eb;
  background: #eff6ff;
  color: #1e40af;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(2px);
}

.page-index .chip:hover {
  background: #dbeafe;
}

.page-index .chip.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* big CTA */
.page-index .primary.large {
  padding: 14px 18px;
  border-radius: 12px;
  border: 0;
  background: #2563eb;
  color: #fff;
  min-width: 240px;
  font-weight: 600;
}

.page-index .primary.large:hover {
  background: #1d4ed8;
}

.page-index .primary.large:disabled {
  background: #9db8f7;
}

/* CTA wrapper */
.page-index .footer-cta {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 3;
}

.page-index .footer-cta .go-plan-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-index .footer-cta .primary.large {
  position: relative;
  z-index: 3;
}

.page-index .go-plan-notice {
  margin: 8px 0 0;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/* Background image layer */


/* ensure UI above overlay */
.page-index main {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .page-index .chip {
    padding: 8px 10px;
  }

  .page-index .hero h1 {
    font-size: 26px;
    line-height: 1.2;
  }

  .page-index .footer-cta .primary.large {
    width: 100%;
    max-width: 360px;
    min-width: 0;
    margin: 0 auto;
  }
}


/* Travel Guide Section */
.page-index .guide-section {
  margin-top: 40px;
  margin-bottom: 60px;
}

.page-index .guide-header {
  margin-bottom: 30px;
  text-align: center;
}

.page-index .guide-header-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 14px;
}

.page-index .guide-header-copy {
  grid-column: 2;
  min-width: 0;
  text-align: center;
}

.page-index .guide-more-btn {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  min-width: 172px;
  border: 1px solid #1d4ed8;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 72%, #1e3a8a 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.14s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.page-index .guide-more-btn::after {
  content: "→";
  font-size: 15px;
  line-height: 1;
  opacity: 0.95;
}

.page-index .guide-more-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.page-index .guide-more-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(37, 99, 235, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.page-index .guide-more-btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 2px;
}

.page-index .guide-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.page-index .guide-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 4px;
  color: #111;
}

.page-index .guide-subtitle {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
}

/* Guide Grid - 3 Columns Always (until mobile) */
.page-index .guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Force 3 columns */
  gap: 16px;
  /* Smaller gap */
  padding: 0 10px;
}

/* Guide Card - Compact Vibe */
.page-index .guide-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  /* Slightly less rounded */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.page-index .guide-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

/* Card Image Area */
.page-index .guide-img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  /* Widescreen ratio */
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
}

.page-index .guide-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.page-index .guide-card:hover .guide-img-wrap img {
  transform: scale(1.05);
}

/* Badge on Image */
.page-index .guide-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: #2563eb;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

/* Card Content - Compact padding */
.page-index .guide-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Meta info */
.page-index .guide-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: #888;
  margin-bottom: 6px;
  align-items: center;
}

.page-index .guide-meta span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.page-index .guide-meta svg {
  width: 12px;
  height: 12px;
  fill: #999;
}

/* Title & Desc */
.page-index .guide-card h3 {
  font-size: 16px;
  /* Smaller title */
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 6px;
  color: #111;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-index .guide-card p {
  font-size: 13px;
  /* Smaller body */
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.5;
  margin: 0 0 12px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Only 2 lines of text */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card Footer */
.page-index .guide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
  font-size: 12px;
}

.page-index .guide-link {
  color: #2563eb;
  font-weight: 600;
  font-size: 12px;
}

/* Responsiveness */
@media (max-width: 768px) {
  .page-index .guide-header-top {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .page-index .guide-more-btn {
    width: 100%;
    min-width: 0;
  }

  /* On tablets, keep 3 columns but maybe horizontal scroll if too tight? 
     Or just stacked. The user wants "single line".
     Let's try horizontal scroll for small screens to keep "single line" concept? 
     Or just let them grid. 
     For now, enforcing grid columns might be too small on phone.
     Let's just scale down columns on very small screens.
  */
  .page-index .guide-grid {
    grid-template-columns: repeat(3, 1fr);
    /* 3 cols even on tablet */
    gap: 10px;
  }
}

@media (max-width: 500px) {

  /* On mobile, standard stack */
  .page-index .guide-grid {
    grid-template-columns: 1fr;
  }
}

/* CSS for smooth map transitions */
.map-smooth-transition .jvm-regions-group,
.map-smooth-transition .jvm-markers-group,
.map-smooth-transition .jvm-group,
.map-smooth-transition g {
  transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}