/* Destinations page refinements */
/* Hero tile sub-labels: slightly larger for legibility */
header a.group p.font-sans[class*="text-[9px]"] {
  font-size: 10px;
  letter-spacing: 0.2em;
}
/* "Explore ..." text links: a little larger and darker for legibility */
section a[href^="explore-"] {
  font-size: 11px;
  color: #5C6350;
  border-bottom-color: rgba(92, 99, 80, 0.45);
}
section a[href^="explore-"]:hover { color: #1E1B16; }
/* Hero title: same scale as the Explore pages */
h1[style*="clamp(28px, 9vw, 150px)"] {
  font-size: clamp(30px, 6.5vw, 92px) !important;
}

/* Other Destinations: contained green panel like About */
.why-box {
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  background-color: #4A5040 !important;
  color: #F2EFE9;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.why-box h2 {
  text-wrap: balance;
}
.why-box p {
  text-wrap: pretty;
}

/* Destination tiles: stronger, softer shade so the labels stay readable on every image */
header a.group[href^="#"] > div.absolute.inset-0 {
  background: linear-gradient(to top, rgba(30, 27, 22, 0.7) 0%, rgba(30, 27, 22, 0.38) 40%, rgba(30, 27, 22, 0.14) 100%) !important;
}
header a.group[href^="#"] h3,
header a.group[href^="#"] p {
  text-shadow: 0 1px 14px rgba(30, 27, 22, 0.45);
}

/* Destination tiles (phones): label centred on the photo under an even soft shade */
@media (max-width: 767px) {
  header a.group[href^="#"] {
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
  }
  header a.group[href^="#"] > div.absolute.inset-0 {
    background: radial-gradient(ellipse at center, rgba(30, 27, 22, 0.64) 0%, rgba(30, 27, 22, 0.46) 55%, rgba(30, 27, 22, 0.34) 100%) !important;
  }
  header a.group[href^="#"] > div.z-10 {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    padding: 0 1rem;
  }
  header a.group[href^="#"] h3 {
    font-size: 24px;
    margin-bottom: 0.45rem;
    text-shadow: 0 1px 18px rgba(30, 27, 22, 0.6);
  }
  header a.group[href^="#"] p {
    font-size: 10px;
    color: #F2EFE9;
    text-shadow: 0 1px 14px rgba(30, 27, 22, 0.6);
  }
  header .max-w-\[840px\] { row-gap: 1.5rem; }
  /* Intro text: less distance to the second image */
  header.relative.bg-brand-olive > div.mt-\[80px\] { margin-top: 2.5rem !important; }
}