/* Section: cluster-hero — compact navy sub-page hero.
 * A shorter sibling of the main .hero: navy background, optional photo behind a
 * scrim, white headline, light-blue lede, light eyebrow, green primary CTA.
 * Media variants (mosaic / single / diagonal) and the dark slider variant keep
 * their layouts; presentation is restyled to the navy/blue design system.
 */

.cluster-hero {
    position: relative;
    background: linear-gradient(
        240deg,
        rgba(0,87,112,1) 0%,
        rgba(0,87,112,1) 30%,
        rgba(33,43,85,1) 50%,
        rgba(33,43,85,1) 100%
    );
    color: #fff;
    overflow: hidden;
    padding: 70px 0 120px 0;
}

.cluster-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 30px;
    width: 360px;
    height: 360px;
    background: url("https://wordpress-899356-6390615.cloudwaysapps.com/wp-content/uploads/2026/07/watermerk-boven-gesneden.svg") no-repeat top right;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

.cluster-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 71px;
    background: #fff;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    z-index: 2;
    pointer-events: none;
}

.cluster-hero .container {
    position: relative;
    z-index: 3;
}

.cluster-hero .container { position: relative; z-index: 3; }

.cluster-hero .cluster-hero-text { position: relative; }

/* Eyebrow — light blue on dark */
.cluster-hero .eyebrow {
  position: relative;
  color: #8fb4ff;
}

/* Headline — white, compact clamp */
.cluster-hero h1 {
  max-width: 800px;
  position: relative;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  margin: 0 0 30px 0;
}

/* Lede / intro — light blue, reads as the dark-hero lede */
.cluster-hero .cluster-hero-intro {
  max-width: 820px;
  margin-top: 22px;
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.06);
  border-left: 4px solid var(--green);
  box-shadow: none;
  color: #d4e0f4;
}
.cluster-hero .cluster-hero-intro,
.cluster-hero .cluster-hero-intro p { color: #d4e0f4; }
.cluster-hero .cluster-hero-intro strong { color: #fff; }
.cluster-hero .lede { color: #d4e0f4; max-width: 720px; }

/* CTA row */
.cluster-hero .cluster-hero-cta {
  margin-top: 26px;
  margin-bottom: 0;
}

/* ============================================================
 * Slider variant — photo crossfade behind a navy scrim.
 * ============================================================ */
.cluster-hero.has-slider {
  padding: 64px 0 66px;
  min-height: 380px;
  display: flex;
  align-items: center;
}
.cluster-hero.has-slider::before { display: none; }

.cluster-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cluster-hero-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.4s ease, transform 12s linear;
  will-change: opacity, transform;
}
/* Pre-init (no JS yet): first image visible so SEO crawlers / no-JS visitors
   still see content. Once JS adds .is-init the explicit .is-active wins. */
.cluster-hero-slider:not(.is-init) img:first-child,
.cluster-hero-slider img.is-active {
  opacity: 1;
  transform: scale(1.0);
}

/* Navy scrim — matches the main hero's diagonal gradient over the photo. */
.cluster-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8, 18, 38, .96) 0%, rgba(8, 18, 38, .86) 40%, rgba(8, 18, 38, .55) 78%, rgba(8, 18, 38, .35) 100%);
  z-index: 1;
}
.cluster-hero.has-slider .container { z-index: 2; }

/* Mobile: stack CTAs full-width so they remain tappable. */
@media (max-width: 580px) {
  .cluster-hero .cluster-hero-cta { gap: 10px; }
  .cluster-hero .cluster-hero-cta .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cluster-hero-slider img { transition: none; transform: none; }
}

/* ============================================================
 * Media variants: mosaic / single / diagonal
 * Two-column grid (text left, media right). Slider variant is
 * unaffected — it still uses .has-slider rules above.
 * ============================================================ */

.cluster-hero.has-media .cluster-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}
.cluster-hero.has-media .cluster-hero-text { min-width: 0; }
.cluster-hero.has-media .cluster-hero-media { min-width: 0; position: relative; }

/* When NOT a media-grid variant, the grid is a no-op single column so
   existing text-only and slider heroes keep their layout. */
.cluster-hero:not(.has-media) .cluster-hero-grid { display: block; }

/* Caption pill — shared across all media variants */
.ch-caption-pill {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: var(--sh);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}

/* ----- Mosaic variant ----- */
.ch-mosaic {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  height: 400px;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: var(--navy-2);
}
.ch-mosaic figure { position: relative; overflow: hidden; margin: 0; }
.ch-mosaic-main { grid-row: 1 / 3; grid-column: 1 / 2; }
.ch-mosaic-sub-1 { grid-row: 1 / 2; grid-column: 2 / 3; }
.ch-mosaic-sub-2 { grid-row: 2 / 3; grid-column: 2 / 3; }
.ch-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ch-mosaic-main img {
  animation: ch-kenburns 14s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ch-kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.06) translate(-1.5%, -1%); }
}

/* ----- Single variant ----- */
.ch-single {
  position: relative;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  aspect-ratio: 4 / 3;
  background: var(--navy-2);
}
.ch-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: ch-kenburns 16s ease-in-out infinite alternate;
  will-change: transform;
}

/* ----- Diagonal variant ----- */
.ch-diagonal {
  position: relative;
  margin: 0;
  height: 420px;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: linear-gradient(135deg, var(--blue-d) 0%, var(--navy-2) 100%);
}
.ch-diagonal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.ch-diagonal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.30) 0%, transparent 35%);
  z-index: 1;
  pointer-events: none;
}
.ch-diagonal .ch-caption-pill {
  left: auto;
  right: 18px;
}

/* ----- Mobile collapse ----- */
@media (max-width: 980px) {
  .cluster-hero { padding: 44px 0 48px; }
  .cluster-hero.has-media .cluster-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ch-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 260px;
  }
  .ch-mosaic-sub-1, .ch-mosaic-sub-2 { display: none; }
  .ch-mosaic-main { grid-row: 1 / 2; grid-column: 1 / 2; }
  .ch-diagonal { height: 260px; }
  .ch-diagonal img { clip-path: none; }
  .ch-diagonal::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-mosaic-main img,
  .ch-single img { animation: none; transform: none; }
}

/* ============================================================
 * Meta line (author / date / reading time) — light on dark
 * ============================================================ */
.cluster-hero-meta {
  margin-top: 22px;
  display: flex;
  gap: 6px 14px;
  align-items: center;
  font-size: 13.5px;
  color: #9db4d8;
  flex-wrap: wrap;
}
.cluster-hero-meta .chm-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cluster-hero-meta .chm-icon {
  font-size: 14px;
  line-height: 1;
}
.cluster-hero-meta .chm-sep { opacity: 0.5; }
.cluster-hero-meta strong { color: #fff; font-weight: 700; }

/* ============================================================
 * Quick-facts strip — translucent glass cards on the navy bg
 * ============================================================ */
.quick-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 30px;
}
.quick-fact {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-sm);
  padding: 18px 16px;
  text-align: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.quick-fact .icon-circle {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}
.quick-fact h4 {
  font-size: 12.5px;
  color: var(--blue);
  margin: 0 0 4px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.quick-fact p {
  font-size: 14px;
  font-weight: 500;
  color: #d4e0f4;
  margin: 0;
  line-height: 1.5;
}
.quick-fact sup { font-weight: 400; }

@media (max-width: 720px) {
  .quick-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:768px){
	.cluster-hero .container { padding-bottom:80px}
    .cluster-hero::before{
        width:200px;
        height:200px;
        right:15px;
    }
}
@media (max-width: 420px) {
  .quick-facts { grid-template-columns: 1fr; }
}

/* ============================================================
 * Breadcrumb directly above a cluster-hero — light on dark.
 * Overrides the global light-surface .breadcrumb so it merges
 * visually into the navy hero band.
 * ============================================================ */
.breadcrumb:has(+ .cluster-hero) {
  background: var(--navy);
  border-bottom: 0;
  color: #9db4d8;
  padding-bottom: 16px;
  padding-top: 16px;
}
.breadcrumb:has(+ .cluster-hero) a { color: #9db4d8; }
.breadcrumb:has(+ .cluster-hero) a:hover { color: #dbe7fb; }
.breadcrumb:has(+ .cluster-hero) span { color: rgba(157, 180, 216, 0.5); }
.breadcrumb:has(+ .cluster-hero) strong { color: #dbe7fb; }