/**
 * Hero component: home (two-column, rotator, CTA) and compact variants.
 */
.hero {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--container-padding);
}

/* Invisible SVG used only for clipPath reference */
.hero__clip-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__title {
  margin: 0 0 var(--space-lg);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.hero__title--primary {
  color: var(--color-hero-title);
}

.hero__intro,
.hero__text {
  margin: 0 0 var(--space-xl);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.hero__cta {
  display: inline-block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-xl);
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.hero__cta:hover {
  background: var(--color-primary-light);
  color: #fff;
}

/* Home hero: full-bleed background, two columns */
.hero--home {
  background-color: #f5faff;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: calc(-1 * var(--space-xl));
  padding: calc(var(--space-3xl) + var(--space-xl)) var(--container-padding) var(--space-3xl);
}

.hero--home .hero__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  max-width: var(--container-max);
  margin: 0 auto;
}

.hero--home .hero__content {
  flex: 1 1 50%;
  min-width: 0;
}

.hero--home .hero__title {
  margin-bottom: var(--space-lg);
  font-size: 60px;
  line-height: 1.1;
}

.hero--home .hero__text {
  margin-bottom: var(--space-xl);
  font-size: 20px;
}

.hero--home .hero__media {
  flex: 1 1 50%;
  min-width: 0;
}

/* Background layer: hidden on desktop, used as full-bleed on mobile */
.hero--home .hero__media--bg {
  display: none;
}

.hero__placeholder {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-5xl);
  overflow: hidden;
  background: var(--color-border);
}

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

/* Side hero: clip-path and no placeholder chrome */
.hero--home .hero__media--side .hero__placeholder {
  background: transparent;
  border-radius: 0;
}

.hero--home .hero__media--side .hero__placeholder-img {
  clip-path: url(#heroClip);
}

.hero--compact {
  max-width: var(--content-max-width);
}

/* About hero: tag, title and text stacked and centered */
.hero--about {
  background-color: var(--color-bg-hero);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: calc(-1 * var(--space-xl));
  padding: var(--space-3xl) var(--container-padding);
}

.hero__inner--center {
  text-align: center;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.hero__tag {
  display: inline-block;
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 1rem;
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 50%, var(--color-secondary) 100%);
  background-size: 200% 100%;
  background-position: 0% 0;
  animation: hero-tag-gradient 4s ease-in-out infinite, hero-tag-brightness 2.5s ease-in-out infinite;
}

@keyframes hero-tag-gradient {
  0%, 100% {
    background-position: 0% 0;
  }
  50% {
    background-position: 100% 0;
  }
}

@keyframes hero-tag-brightness {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.25);
  }
}

.hero__title--about {
  margin: 0 0 var(--space-md);
  font-size: 60px;
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero__text--about {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
}

/* Page hero: title, subtitle and text (e.g. Wat we doen) – reusable for other pages */
.hero--page {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-hero);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: calc(-1 * var(--space-xl));
  padding: calc(var(--space-3xl) + var(--space-2xl)) var(--container-padding);
}

.hero__page-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero__page-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  animation: hero-page-orb-float 14s ease-in-out infinite;
}

.hero__page-orb--1 {
  width: 20rem;
  height: 20rem;
  left: var(--orb-1-left, 0%);
  top: var(--orb-1-top, 10%);
  background: var(--color-primary);
  animation-delay: 0s;
}

.hero__page-orb--2 {
  width: 16rem;
  height: 16rem;
  right: var(--orb-2-right, 5%);
  top: var(--orb-2-top, 20%);
  background: var(--color-secondary);
  animation-delay: -3s;
}

.hero__page-orb--3 {
  width: 18rem;
  height: 18rem;
  left: var(--orb-3-left, 15%);
  bottom: var(--orb-3-bottom, 15%);
  background: var(--color-secondary-light);
  animation-delay: -6s;
}

.hero__page-orb--4 {
  width: 14rem;
  height: 14rem;
  right: var(--orb-4-right, 20%);
  bottom: var(--orb-4-bottom, 25%);
  background: var(--color-primary-light);
  animation-delay: -9s;
}

@keyframes hero-page-orb-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(3%, -4%) scale(1.08);
  }
  50% {
    transform: translate(-3%, 3%) scale(0.95);
  }
  75% {
    transform: translate(4%, 2%) scale(1.05);
  }
}

/* Wat we doen landing: same featured look as subpages (bg + pink/purple blobs) */
.hero--page-featured {
  background-color: #fdf9f4;
}

.hero--page-featured .hero__page-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero--page-featured .hero__page-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.38;
  animation: hero-page-blob-float 16s ease-in-out infinite;
}

.hero--page-featured .hero__page-blob--pink {
  background: #e879a3;
}

.hero--page-featured .hero__page-blob--purple {
  background: #b07dd9;
}

.hero--page-featured .hero__page-blob--1 {
  width: 22rem;
  height: 22rem;
  left: 60%;
  top: 5%;
  animation-delay: 0s;
}

.hero--page-featured .hero__page-blob--2 {
  width: 18rem;
  height: 18rem;
  right: 10%;
  bottom: 30%;
  animation-delay: -4s;
}

.hero--page-featured .hero__page-blob--3 {
  width: 16rem;
  height: 16rem;
  left: 5%;
  bottom: 10%;
  animation-delay: -8s;
}

.hero--page-featured .hero__page-blob--4 {
  width: 20rem;
  height: 20rem;
  right: 40%;
  top: 40%;
  animation-delay: -12s;
}

@keyframes hero-page-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-4%, 5%) scale(1.1); }
  66% { transform: translate(5%, -3%) scale(0.92); }
}

/* Oplossingen landing: light blue bg + white blobs */
.hero--page-oplossingen {
  background-color: #d7e5f8;
}

.hero--page-uitdagingen {
  background-color: #f7f6f6;
}

.hero--page-uitdagingen .hero__page-orb--1 {
  background: #fbc89f;
}

.hero--page-uitdagingen .hero__page-orb--2 {
  background: #93c5fd;
}

.hero--page-uitdagingen .hero__page-orb--3 {
  background: #bfdbfe;
}

.hero--page-uitdagingen .hero__page-orb--4 {
  background: #fcd9b3;
}

.hero--page-uitdagingen .hero__tag {
  color: var(--color-secondary);
  background: #dbeafe;
  background-size: auto;
  animation: none;
}

.hero--page-oplossingen .hero__page-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero--page-oplossingen .hero__page-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: hero-page-blob-float 16s ease-in-out infinite;
}

.hero--page-oplossingen .hero__page-blob--white {
  background: #fff;
}

.hero--page-oplossingen .hero__page-blob--light-purple {
  background: #c4b5fd;
}

/* Light purple blobs: offset positions so they don’t overlap white blobs */
.hero--page-oplossingen .hero__page-blobs--light-purple .hero__page-blob--1 {
  width: 20rem;
  height: 20rem;
  left: 15%;
  top: 25%;
  animation-delay: -2s;
}

.hero--page-oplossingen .hero__page-blobs--light-purple .hero__page-blob--2 {
  width: 16rem;
  height: 16rem;
  right: 25%;
  bottom: 15%;
  animation-delay: -6s;
}

.hero--page-oplossingen .hero__page-blobs--light-purple .hero__page-blob--3 {
  width: 18rem;
  height: 18rem;
  left: 50%;
  bottom: 20%;
  animation-delay: -10s;
}

.hero--page-oplossingen .hero__page-blobs--light-purple .hero__page-blob--4 {
  width: 14rem;
  height: 14rem;
  right: 8%;
  top: 15%;
  animation-delay: -14s;
}

.hero--page-oplossingen .hero__page-blob--1 {
  width: 22rem;
  height: 22rem;
  left: 60%;
  top: 5%;
  animation-delay: 0s;
}

.hero--page-oplossingen .hero__page-blob--2 {
  width: 18rem;
  height: 18rem;
  right: 10%;
  bottom: 30%;
  animation-delay: -4s;
}

.hero--page-oplossingen .hero__page-blob--3 {
  width: 16rem;
  height: 16rem;
  left: 5%;
  bottom: 10%;
  animation-delay: -8s;
}

.hero--page-oplossingen .hero__page-blob--4 {
  width: 20rem;
  height: 20rem;
  right: 40%;
  top: 40%;
  animation-delay: -12s;
}

.hero--page .hero__inner--center {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}

.hero__title--page {
  margin: 0 0 var(--space-md);
  font-size: 4rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: #020817;
}

.hero__page-line {
  width: 100px;
  height: 4px;
  margin: 0 auto var(--space-md);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 100%);
}

.hero--page-featured .hero__page-line {
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 50%, #a855f7 100%);
}

.hero--page-oplossingen .hero__page-line {
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 50%, #93c5fd 100%);
}

.hero--page-uitdagingen .hero__page-line {
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 50%, #f3f4f6 100%);
}

.hero__subtitle--page {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.hero__text--page {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

/* Optional tag above title (e.g. uitdagingen subpage) */
.hero__tag--page {
  margin-bottom: var(--space-md);
}

.hero__text--quote {
  font-style: italic;
  color: var(--color-text);
}

@media (max-width: 48rem) {
  .hero--page {
    padding: var(--space-2xl) var(--container-padding);
  }

  .hero__title--page {
    font-size: 2.5rem;
  }

  .hero__subtitle--page {
    font-size: var(--font-size-lg);
  }

  .hero__text--page {
    font-size: var(--font-size-base);
  }

  .hero--about .hero__title--about {
    font-size: 3rem;
  }

  .hero--about .hero__text--about {
    font-size: var(--font-size-base);
  }

  /* Fewer orbs/blobs on mobile – hide half for a cleaner look */
  .hero__page-orb--3,
  .hero__page-orb--4 {
    display: none;
  }

  .hero--page-featured .hero__page-blob--3,
  .hero--page-featured .hero__page-blob--4 {
    display: none;
  }

  .hero--page-oplossingen .hero__page-blob--3,
  .hero--page-oplossingen .hero__page-blob--4,
  .hero--page-oplossingen .hero__page-blobs--light-purple .hero__page-blob--3,
  .hero--page-oplossingen .hero__page-blobs--light-purple .hero__page-blob--4 {
    display: none;
  }
}

/* Tablet & mobile: image as light background, centered text */
@media (max-width: 64rem) {
  .hero--home {
    position: relative;
    overflow: hidden;
  }

  .hero--home .hero__inner {
    position: relative;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-xl);
  }

  .hero--home .hero__content {
    max-width: 36rem;
    margin: 0 auto;
  }

  .hero--home .hero__title,
  .hero--home .hero__text {
    margin-left: auto;
    margin-right: auto;
  }

  .hero--home .hero__cta {
    display: inline-block;
  }

  .hero--home .hero__rotator-item {
    justify-content: center;
  }

  /* Full-bleed background layer (direct child of hero, behind content) */
  .hero--home .hero__media--bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }

  .hero--home .hero__placeholder--bg {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .hero--home .hero__placeholder--bg .hero__placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.35;
  }

  .hero--home .hero__media--bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(245, 250, 255, 0.7) 0%, rgba(245, 250, 255, 0.9) 100%);
    z-index: 1;
  }

  /* Hide side image on tablet/mobile */
  .hero--home .hero__media--side {
    display: none;
  }
}

@media (max-width: 48rem) {
  .hero {
    padding: var(--space-xl) var(--container-padding);
  }

  .hero--home {
    padding: var(--space-2xl) var(--container-padding);
  }

  .hero--home .hero__title {
    font-size: 2.25rem;
  }

  .hero__title {
    font-size: var(--font-size-2xl);
  }

  .hero__intro,
  .hero__text {
    font-size: var(--font-size-base);
  }
}