/* Koken met Chantal · Homepage Bannerstudio · Release 62 */
.hero {
  min-height: max(92svh, 680px);
}
.hero-media-picture,
.hero-video-frame {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.hero-media-picture .hero-image,
.hero-video-frame .hero-image,
.hero-slide[data-banner-id] .hero-image {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: var(--hero-focus-desktop-x, 50%) var(--hero-focus-desktop-y, 50%) !important;
  background: #08271c;
}

.hero-video {
  pointer-events: none;
}

.hero-slide[data-overlay="soft"] .hero-shade {
  background:
    linear-gradient(90deg, rgba(3, 19, 14, .78), rgba(17, 60, 43, .46) 44%, rgba(17, 60, 43, .04)),
    linear-gradient(0deg, rgba(3, 19, 14, .58), rgba(3, 19, 14, .04) 58%);
}

.hero-slide[data-overlay="strong"] .hero-shade {
  background:
    linear-gradient(90deg, rgba(3, 19, 14, .97), rgba(17, 60, 43, .84) 46%, rgba(17, 60, 43, .28)),
    linear-gradient(0deg, rgba(3, 19, 14, .9), rgba(3, 19, 14, .16) 58%);
}

.hero-slide[aria-hidden="true"] {
  visibility: hidden;
}

.hero-slider-controls[data-single-banner="true"] {
  display: none;
}

.hero-play-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 44px;
  height: 46px;
  flex: 0 0 auto;
  padding: 0 13px !important;
  gap: 7px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}

.hero-play-toggle svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.hero-play-toggle span {
  font-size: .72rem;
  font-weight: 850;
  line-height: 1;
}

.hero[data-cms-loading="true"]::after {
  content: "";
  position: absolute;
  z-index: 6;
  right: 20px;
  top: 104px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.74);
  box-shadow: 0 0 0 6px rgba(255,255,255,.12);
}

@media (max-width: 680px) {
  .hero {
    min-height: max(92svh, 760px);
  }

  .hero h1,
  .hero h2 {
    font-size: clamp(2.55rem, 12vw, 3.85rem);
  }

  .hero-media-picture .hero-image,
  .hero-video-frame .hero-image,
  .hero-slide[data-banner-id] .hero-image {
    object-position: var(--hero-focus-mobile-x, 50%) var(--hero-focus-mobile-y, 50%) !important;
  }

  .hero-play-toggle {
    width: 40px !important;
    min-width: 40px;
    height: 40px;
    padding: 0 !important;
    gap: 0;
    border-radius: 50%;
  }

  .hero-play-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none !important;
  }
}

/* Release 74: de inhoud bepaalt de hoogte, bediening staat in een eigen rij.
   Alle banners delen één gridcel zodat ook langere CMS-tekst ruimte krijgt. */
.hero[data-hero-slider]{display:block;min-height:0;background:#082c21}
.hero[data-hero-slider] .hero-slides{position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr)}
.hero[data-hero-slider] .hero-slide{position:relative;inset:auto;grid-area:1/1;min-width:0;min-height:clamp(34rem,77svh,53rem);align-items:center;padding:clamp(3rem,6vw,6rem) max(1.25rem,6vw);overflow:hidden}
.hero[data-hero-slider] .hero-content{width:min(43rem,56%);min-width:0;overflow-wrap:anywhere}
.hero[data-hero-slider] .hero-footer{position:relative;z-index:4;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:1.25rem max(1.25rem,6vw);background:#082c21}
.hero[data-hero-slider] .hero-slider-controls{position:relative;inset:auto;display:flex;flex-wrap:wrap;flex:0 1 auto;gap:.5rem;max-width:100%;min-width:0}
.hero[data-hero-slider] .hero-slider-controls[data-single-banner="true"],
.hero[data-hero-slider] .hero-slider-controls[hidden],
.hero[data-hero-slider] .hero-note[hidden],
.hero[data-hero-slider] .hero-play-toggle[hidden]{display:none!important}
.hero[data-hero-slider] .hero-dots{display:flex;flex-wrap:wrap;align-items:center;gap:0;max-width:100%}
.hero[data-hero-slider] .hero-dots button{display:grid;place-items:center;width:28px;height:44px;flex:0 0 28px;background:transparent;border-radius:8px}
.hero[data-hero-slider] .hero-dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:#ffffff70;transition:width .18s ease}
.hero[data-hero-slider] .hero-dots button.active::before{width:20px;border-radius:5px;background:#fff}
.hero[data-hero-slider] .hero-slider-controls .icon-button{width:44px;height:44px;min-width:44px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.hero[data-hero-slider] .hero-slider-controls .hero-play-toggle{width:auto!important;padding:0 .9rem!important;gap:.45rem;border-radius:999px}
.hero[data-hero-slider] .hero-play-toggle span{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-size:.875rem;line-height:1.3;font-weight:600;white-space:normal}
.hero[data-hero-slider] .hero-note{position:relative;inset:auto;display:flex;flex:1 1 24rem;flex-wrap:wrap;min-width:0;max-width:100%;gap:.5rem;justify-content:flex-end;transform:none;opacity:1}
.hero[data-hero-slider] .hero-note span{max-width:100%;white-space:normal;overflow-wrap:anywhere;padding:.5rem .8rem;font-size:.875rem;font-weight:500;background:#ffffff09;border-color:#ffffff24;backdrop-filter:none}
@media(max-width:920px){
  .hero[data-hero-slider] .hero-content{width:min(40rem,78%)}
  .hero[data-hero-slider] .hero-note{justify-content:flex-start}
}
@media(max-width:680px){
  .hero[data-hero-slider] .hero-slide{min-height:38rem;align-items:end;padding:3rem 1.25rem 2rem}
  .hero[data-hero-slider] .hero-content{width:100%}
  .hero[data-hero-slider] .hero-footer{gap:.75rem;padding:1rem 1.25rem}
  .hero[data-hero-slider] .hero-note{flex-basis:100%}
  .hero[data-hero-slider] .hero-shade{background:linear-gradient(0deg,#031b14f7,#082c21b8 65%,#082c214d)}
}
@media(prefers-reduced-motion:reduce){.hero[data-hero-slider] .hero-dots button::before{transition:none}}

@media(pointer:coarse){.hero[data-hero-slider] .hero-dots button{width:44px;flex-basis:44px}}