.region-page main {
  --region-dark: #1d3557;
  --region-accent: #255286;
  --region-tint: #eff5fc;
  --region-ink: #152c47;
  --region-muted: #495c71;
  --region-line: #d9e3ed;
  padding: 0;
  background: #fff;
  font-family: "Nunito Sans", "Segoe UI", sans-serif;
}

.region-page--bergenopzoom main {
  --region-dark: #4f2549;
  --region-accent: #783b6d;
  --region-tint: #fcf1fa;
}

.region-page--steenbergen main {
  --region-dark: #184537;
  --region-accent: #29634c;
  --region-tint: #eef8f2;
}

.region-page--halderberge main {
  --region-dark: #4b3a1e;
  --region-accent: #705319;
  --region-tint: #fcf6e9;
}

.region-page--moerdijk main {
  --region-dark: #26345e;
  --region-accent: #394a96;
  --region-tint: #f1f2fc;
}

.region-page--rucphen main {
  --region-dark: #35451c;
  --region-accent: #4d621d;
  --region-tint: #f3f7e9;
}

.region-page--ettenleur main {
  --region-dark: #13424a;
  --region-accent: #18616c;
  --region-tint: #eaf7f8;
}

.region-page--zundert main {
  --region-dark: #56313f;
  --region-accent: #87415e;
  --region-tint: #fcf2f6;
}

.region-page--breda main {
  --region-dark: #243f59;
  --region-accent: #315f85;
  --region-tint: #edf6fd;
}

.region-page--alphen-chaam main,
.region-page--woensdrecht main {
  --region-dark: #304630;
  --region-accent: #3e693e;
  --region-tint: #f0f7ed;
}

.region-page--tholen main {
  --region-dark: #234852;
  --region-accent: #28606d;
  --region-tint: #eef8fa;
}

.region-page--nederland main {
  --region-dark: #7c320e;
  --region-accent: #a34417;
  --region-tint: #fff2e7;
}

.region-hero {
  padding: clamp(30px, 6vw, 72px) 0 clamp(38px, 7vw, 86px);
  background: var(--region-dark);
  color: #fff;
}

.region-hero--photo {
  position: relative;
  isolation: isolate;
}

.region-hero__photo {
  position: absolute;
  z-index: -2;
  inset: 0 0 0 30%;
}

.region-hero__photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.region-hero--photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, var(--region-dark) 30%, color-mix(in srgb, var(--region-dark) 90%, transparent) 51%, color-mix(in srgb, var(--region-dark) 16%, transparent) 100%);
}

.region-photo-credit {
  padding-top: 9px;
  color: var(--region-muted);
  font-size: .75rem;
  line-height: 1.5;
}

.region-photo-credit a {
  color: var(--region-accent);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.region-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
  margin-bottom: clamp(24px, 5vw, 54px);
  color: #e7edf4;
  font-size: .875rem;
}

.region-breadcrumb a, .region-hero .region-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.region-municipality { margin: 0 0 12px; color: #fff; font-size: .875rem; font-weight: 800; }
.region-hero h1 {
  max-width: 22ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2.05rem, 5.5vw, 4.1rem);
  line-height: 1.07;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

.region-intro {
  max-width: 64ch;
  margin: 18px 0 0;
  color: #e1e9f3;
  font-size: clamp(1.03rem, 2vw, 1.2rem);
  line-height: 1.65;
}

.region-actions, .region-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}
.region-actions { margin-top: 24px; }
.region-content .btn.primary { background: var(--region-accent); color: #fff; box-shadow: none; }
.region-hero .btn.primary { background: #fff; color: var(--region-dark); box-shadow: none; }
.region-content { padding-block: clamp(30px, 5vw, 64px); color: var(--region-ink); }

.region-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr);
  gap: clamp(22px, 5vw, 60px);
  align-items: start;
  scroll-margin-top: 94px;
}

.region-content h2 {
  margin: 0 0 16px;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.25;
  letter-spacing: -.02em;
}
.region-content h3 { margin: 0 0 5px; font-size: 1.03rem; }
.region-content p { margin: 0; color: var(--region-muted); line-height: 1.65; }
.region-content a:not(.btn) { color: var(--region-accent); text-decoration: underline; text-underline-offset: .2em; }

.region-planning > div { padding: 14px 0; border-top: 1px solid var(--region-line); }
.region-section { margin-top: clamp(24px, 3vw, 40px); }
.region-section p, .region-planning p { max-width: 72ch; }

.region-tools, .region-offer {
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid var(--region-line);
  border-radius: 16px;
  background: var(--region-tint);
}
.region-tools h2 { font-size: 1.1rem; }
.region-tools ul, .region-history ul, .region-related ul { margin: 0; padding: 0; list-style: none; }
.region-tools li + li { margin-top: 10px; }
.region-history, .region-offer, .region-faq, .region-related { margin-top: clamp(28px, 5vw, 56px); }
.region-content > :is(.region-offer, .region-related):first-child { margin-top: 0; }
.region-content > :is(.region-offer, .region-related) + .region-grid { margin-top: clamp(28px, 5vw, 56px); }
.region-history ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
  gap: 14px;
}
.region-history li { padding: 18px; border: 1px solid var(--region-line); border-radius: 12px; background: #fff; }
.region-history li a { display: inline-block; margin-top: 8px; }
.region-offer { justify-content: space-between; }
.region-offer > div { flex: 1 1 310px; }
.region-offer h2 { margin-bottom: 6px; font-size: 1.25rem; }
.region-faq details { padding: 13px 0; border-top: 1px solid var(--region-line); }
.region-faq summary { cursor: pointer; font-weight: 800; }
.region-faq p { margin-top: 8px; max-width: 72ch; }
.region-related ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.region-related p { margin-bottom: 10px; }
.region-page main :is(a, summary):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.region-hero a.btn:focus-visible { outline-color: #fff; }

@media (max-width: 680px) {
  .region-grid { grid-template-columns: minmax(0, 1fr); }
  .region-hero--photo {
    --region-photo-height: clamp(220px, 55vw, 330px);
    padding-top: calc(var(--region-photo-height) - 28px);
  }
  .region-hero__photo, .region-hero--photo::before {
    inset: 0 0 auto;
    height: var(--region-photo-height);
  }
  .region-hero--photo::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--region-dark) 12%, transparent) 40%, var(--region-dark) 100%);
  }
}