/* Softer editorial treatment: gentle corners, pill actions, quiet dividers. */
:root {
  --organic-radius: 18px;
  --organic-pill: 999px;
}

.nav-book {
  border-radius: var(--organic-pill);
  padding: 11px 17px;
}

.button {
  border-radius: var(--organic-pill);
  padding-left: 21px;
  padding-right: 18px;
}

.mood-card,
.destination-image,
.story-image,
.batam-image {
  border-radius: var(--organic-radius);
  overflow: hidden;
}

/* Keep the three mood photographs visually identical across breakpoints. */
.mood-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mood-card {
  height: auto;
  aspect-ratio: 4 / 5;
}

.mood-card:after {
  border-radius: inherit;
}

.image-label {
  border-radius: var(--organic-pill);
  padding: 10px 14px;
}

.hero-places {
  left: 0;
  right: 0;
  border-top-color: rgba(255,255,255,.36);
}

.hero-places a {
  padding-left: 6.1vw;
  padding-right: 4vw;
}

.hero-places a {
  transition: opacity .25s ease, color .25s ease;
}

.hero-places a:hover {
  color: #f1d5ba;
}

.quick-facts,
.hero-places {
  border-color: rgba(44,57,47,.14);
}

.mood-card img,
.destination-image img,
.story-image img,
.batam-image img {
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}

.mood-card:hover img,
.destination-image:hover img {
  filter: saturate(1.04);
}

.round-arrow {
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.1);
}

.mood-card .round-arrow { display: none; }

@media (max-width: 650px) {
  .hero-places {
    inset: 0;
    bottom: auto;
    display: block;
    border: 0;
    pointer-events: none;
  }

  .hero-places a {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 0;
    padding: 8px 24px;
    border: 0;
    pointer-events: auto;
  }

  .hero-places a:nth-child(1) { bottom: 66.6667%; }
  .hero-places a:nth-child(2) { bottom: 33.3333%; }
  .hero-places a:nth-child(3) { bottom: 0; }

  .mood-grid { grid-template-columns: 1fr; }

  .mood-card,
  .destination-image,
  .story-image,
  .batam-image {
    border-radius: 15px;
  }

  .mood-card { height: auto; aspect-ratio: 4 / 3; }

  .nav-book { border-radius: var(--organic-pill) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mood-card img,
  .destination-image img,
  .story-image img,
  .batam-image img,
  .hero-places a { transition: none; }
}