/*
 * The beach page in bands (October 2026): today's sea, places at the
 * beach, visiting, the full guide beside a sticky map, then nearby. Bands
 * alternate white and a soft lavender so each part reads as its own.
 * Tokens from conditions.css and guides.css.
 */

:root {
  --band-tint: #f6f4fb;
  --band-space: clamp(40px, 3vw + 24px, 72px);
}

.beach-band {
  border-top: 1px solid var(--wb-line);
  padding-bottom: var(--band-space);
  padding-top: var(--band-space);
}

.beach-band--tint { background: var(--band-tint); border-top: 0; }

.beach-band--tint + .beach-band { border-top: 0; }

.beach-band__title { margin: 0 0 24px; }

/* Sections that bring their own spacing elsewhere sit flush inside a band. */
.beach-band .beach-today { margin-bottom: 32px; }

.beach-band .beach-places { margin-bottom: 0; }

.beach-band--nearby .nearby { margin: 0; padding-top: 0; }

.beach-band--nearby .nearby > h2 { margin-top: 0; }

/* Today: the forecast, then why and when side by side */
.beach-why { display: grid; gap: 16px; }

.beach-why .side-card { background: #fff; margin: 0; }

.beach-why .side-card + .side-card { margin-top: 0; }

@media (min-width: 60em) {
  .beach-why { align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; }

  .beach-when-to-go {
    column-gap: 32px;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .beach-when-to-go > .side-card__title { grid-column: 1 / -1; }

  .beach-when-to-go .exposure-compass { grid-row: span 2; }
}

/* Visiting: practical info, amenities beside it */
.beach-visit__grid { display: grid; gap: 32px; }

@media (min-width: 60em) {
  .beach-visit__grid { align-items: start; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 56px; }
}

.beach-visit__main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

.beach-visit__main .guide-section > h2 { font-size: 20px; margin: 0 0 10px; }

.beach-amenities {
  border: 1px solid var(--wb-line);
  border-radius: 16px;
  padding: 20px 22px;
}

.beach-amenities__title {
  color: var(--wb-purple);
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 14px;
}

.beach-amenities__list {
  display: grid;
  gap: 12px 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.beach-amenities__list li {
  align-items: center;
  color: #4a4a4a;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
  line-height: 1.25;
  min-width: 0;
}

.beach-amenities__list .icon { flex-shrink: 0; height: 30px; width: 30px; }

.beach-amenities__missing {
  border-top: 1px solid var(--wb-line);
  color: #7a7690;
  font-size: 13px;
  line-height: 1.5;
  margin: 16px 0 0;
  padding-top: 12px;
}

/* About: the guide text at a readable width, map and guides beside it */
.beach-about { display: grid; gap: 40px; }

@media (min-width: 60em) {
  .beach-about { align-items: start; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; }

  .beach-about__sticky { position: sticky; top: 24px; }
}

.beach-about__main.description { max-width: 44rem; padding-bottom: 0; padding-top: 0; }

.beach-about__main .beach-section { margin-top: 28px; }

.beach-section__title {
  color: var(--wb-purple);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 10px;
}

.beach-about__main .beach-faq { margin-top: 40px; }

.beach-about__sticky { display: flex; flex-direction: column; gap: 28px; }

.beach-about__side-title {
  color: var(--wb-teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.beach-about__map .map-container { border-radius: 14px; overflow: hidden; }

.beach-about__map #map { height: 260px; min-height: 260px; }

.beach-about__maps-link,
.beach-about__guides a {
  color: var(--wb-purple);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--wb-teal);
  text-decoration-skip-ink: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.beach-about__maps-link { display: inline-block; margin-top: 10px; }

.beach-about__guides ul { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }

.beach-about__maps-link,
.beach-about__guides a,
.place-sections a { transition: color 0.15s ease, text-decoration-color 0.15s ease; }

.beach-about__maps-link:hover,
.beach-about__guides a:hover,
.place-sections a:hover { color: var(--wb-teal); text-decoration-color: currentColor; }

.beach-about__maps-link:focus-visible,
.beach-about__guides a:focus-visible { outline: 2px solid var(--wb-teal); outline-offset: 2px; }

@media (min-width: 60em) {
  .beach-about--map-only { grid-template-columns: minmax(0, 26rem); }
}

/* Long write-ups start folded once JavaScript can unfold them. */
.beach-about__text.is-folded {
  max-height: 720px;
  overflow: hidden;
  position: relative;
}

.beach-about__text.is-folded::after {
  background: linear-gradient(to bottom, rgba(246, 244, 251, 0), var(--band-tint));
  bottom: 0;
  content: '';
  height: 160px;
  left: 0;
  position: absolute;
  right: 0;
}

.beach-band:not(.beach-band--tint) .beach-about__text.is-folded::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

.beach-about__more {
  background: #fff;
  border: 1.5px solid var(--wb-purple);
  border-radius: 999px;
  color: var(--wb-purple);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  margin-top: 16px;
  padding: 9px 18px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.beach-about__more:hover,
.beach-about__more:focus-visible { background: var(--wb-purple); color: #fff; }

.beach-about__more:focus-visible { outline: 2px solid var(--wb-teal); outline-offset: 2px; }

/* Water quality: a smaller label over the chosen grade, with a CSS pointer
   (the theme's pointer is a fixed-size image sized for the old big label). */
.single-beach .bathing-water-quality-wrapper .quality-metering .bubble {
  font-size: 13px;
  font-weight: 700;
  height: auto;
  letter-spacing: 0.01em;
  line-height: 16px;
  padding: 5px 10px;
  white-space: nowrap;
}

.single-beach .bathing-water-quality-wrapper .quality-metering .bubble::before {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #f0f5ff;
  content: '';
  height: 0;
  left: 50%;
  top: 100%;
  width: 0;
}

/* The theme's banner shade sits over the whole banner, card included, and
   swallowed clicks and text selection. It's decoration only. */
.banner::after { pointer-events: none; }

.banner .card { z-index: 3; }

/* Heroes take about three-quarters of the screen (capped on big monitors),
   so the top of the sea score, or a place's description, shows on the first
   screen. Beach, dive-site and place pages share the height. */
.single-beach .banner,
.single-dive_site .banner { height: min(calc(var(--vh, 1vh) * 75), 760px); }