/* Optional hero content panel (color + opacity from ACF) */

.hero--panel .hero__content {
  width: fit-content;
  max-width: min(40rem, 100%);
  padding: clamp(1.25rem, 3.2vw, 2rem) clamp(1.35rem, 3.8vw, 2.35rem);
  border-radius: var(--radius, 12px);
  background: color-mix(
    in srgb,
    var(--hero-panel-color, #ffffff) calc(var(--hero-panel-opacity, 0.92) * 100%),
    transparent
  );
  box-shadow: 0 18px 40px -22px rgb(44 40 36 / 38%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero--panel .hero__content > :last-child {
  margin-bottom: 0;
}

@media (max-width: 639px) {
  .hero--panel .hero__content {
    width: 100%;
    max-width: 100%;
  }
}

/* Homepage hero: desktop height token, then optional mobile override. */
.hero--home {
  --hero-height: var(--hero-height-desktop);
}

/* Smaller homepage height choices must beat the default 26rem floor
   and grow with the copy instead of clipping it. */
.hero--home.hero--short {
  min-height: max(14rem, var(--hero-height));
}

.hero--home.hero--short .hero__inner {
  flex: 0 0 auto;
  --_hero-air: 2rem;
}

.hero--home.hero--short:has(.hero__scroll) .hero__inner {
  padding-bottom: calc(var(--_hero-air) + 2.5rem);
}

/* Per-button colours from Hero (homepage) → Inhoud. Empty ACF = global tokens. */
body .hero--home .hero__actions .button.button--hero-color:not(.button--hero-outline) {
  background-color: var(--hero-btn-color);
  border-color: var(--hero-btn-color);
  color: var(--hero-btn-text, #fff);
}

body .hero--home .hero__actions .button.button--hero-color:not(.button--hero-outline):hover,
body .hero--home .hero__actions .button.button--hero-color:not(.button--hero-outline):focus-visible {
  background-color: var(--hero-btn-hover, var(--hero-btn-color));
  border-color: var(--hero-btn-hover, var(--hero-btn-color));
  color: var(--hero-btn-hover-text, var(--hero-btn-text, #fff));
}

body .hero--home .hero__actions .button.button--hero-outline {
  --_ibiza-leaf: none;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

body .hero--home .hero__actions .button.button--hero-outline.button--hero-color {
  background-color: transparent;
  border-color: var(--hero-btn-color);
  color: var(--hero-btn-color);
}

body .hero--home .hero__actions .button.button--hero-outline.button--hero-color:hover,
body .hero--home .hero__actions .button.button--hero-outline.button--hero-color:focus-visible {
  background-color: var(--hero-btn-color);
  background-image: none;
  border-color: var(--hero-btn-color);
  color: var(--hero-btn-hover-text, #fff);
  box-shadow: none;
}

/* Homepage hero: optional mobile copy / height / overlay (Hero → Mobiel). */
@media (max-width: 639px) {
  .hero--home.hero--mobile-hide .hero__inner,
  .hero--home.hero--mobile-custom .hero__content--desktop {
    display: none;
  }

  .hero--home.hero--mobile-height {
    --hero-height: var(--hero-height-mobile);
  }

  .hero--home.hero--mobile-short {
    min-height: max(14rem, var(--hero-height));
  }

  .hero--home.hero--mobile-short .hero__inner {
    flex: 0 0 auto;
    --_hero-air: 2rem;
  }

  .hero--home.hero--mobile-short:has(.hero__scroll) .hero__inner {
    padding-bottom: calc(var(--_hero-air) + 2.5rem);
  }

  .hero--home.hero--mobile-overlay-off .hero__overlay {
    display: none;
  }

  .hero--home.hero--mobile-overlay-on .hero__overlay {
    display: block;
    background: var(--hero-overlay-color-mobile, var(--hero-overlay-color));
    opacity: var(--hero-overlay-opacity-mobile, var(--hero-overlay-opacity));
  }

  .hero--home:not(.hero--scroll-mobile) .hero__scroll {
    display: none;
  }

  .hero--home:not(.hero--scroll-mobile):has(.hero__scroll) .hero__inner,
  .hero--home.hero--short:not(.hero--scroll-mobile):has(.hero__scroll) .hero__inner,
  .hero--home.hero--mobile-short:not(.hero--scroll-mobile):has(.hero__scroll) .hero__inner {
    padding-bottom: var(--_hero-air);
  }
}

@media (min-width: 640px) {
  .hero--home .hero__content--mobile {
    display: none;
  }

  .hero--home:not(.hero--overlay) .hero__overlay {
    display: none;
  }

  .hero--home:not(.hero--scroll-desktop) .hero__scroll {
    display: none;
  }

  .hero--home:not(.hero--scroll-desktop):has(.hero__scroll) .hero__inner,
  .hero--home.hero--short:not(.hero--scroll-desktop):has(.hero__scroll) .hero__inner {
    padding-bottom: var(--_hero-air);
  }
}