/* Vacatures page styles */

/* Hero section layout */
.vacatures-hero {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xl);
  position: relative;
}

.vacatures-hero__left {
  flex: 1;
  max-width: 50%;
}

.vacatures-hero__left h1 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-headers-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-headers-h1);
  color: var(--text-inverted-high);
  margin: 0 0 var(--spacing-m) 0;
}

.vacatures-hero__left .hero-description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-default);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-body-default);
  color: var(--text-inverted-high);
  margin: 0;
}

/* Hero images container */
.vacatures-hero__images {
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-start;
}

/* Sprite hover image - original 904x1120 per frame, aspect ratio ~0.807 */
.vacatures-hero__sprite {
  width: 260px;
  height: 322px;
  background: url('/static/jaw/img/team-sprite.webp') 0 0 / 100% 200%;
  cursor: pointer;
}

.vacatures-hero__sprite:hover {
  background-position: 0 100%;
}

/* First image wrapper with caption below */
.vacatures-hero__image-1-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Caption container under first image */
.vacatures-hero__caption {
  position: relative;
  margin-top: 16px;
  height: 24px;
  width: 100%;
}

.hero-section .vacatures-hero__hint,
.hero-section .vacatures-hero__counter {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 1px;
  color: var(--text-inverted-high);
  text-align: left;
  white-space: nowrap;
}

.vacatures-hero__hint {
  opacity: 1;
}

.vacatures-hero__counter {
  opacity: 0;
}

.vacatures-hero__counter-number,
.vacatures-hero__counter-number span {
  color: var(--brand-green);
}

.vacatures-hero__images:has(.vacatures-hero__sprite:hover) .vacatures-hero__hint,
.vacatures-hero__images:has(.vacatures-kerst-sprite:hover) .vacatures-hero__hint {
  opacity: 0;
}

.vacatures-hero__images:has(.vacatures-hero__sprite:hover) .vacatures-hero__counter,
.vacatures-hero__images:has(.vacatures-kerst-sprite:hover) .vacatures-hero__counter {
  opacity: 1;
}

/* Kerst sprite */
.vacatures-kerst-sprite {
  width: 260px;
  height: 322px;
  background: url('/static/jaw/img/kerst-sprite.webp') 0 0 / 100% 200%;
  cursor: pointer;
}

.vacatures-kerst-sprite:hover {
  background-position: 0 100%;
}

/* Image on right variant with sprite */
.vacatures-box--with-image-right {
  position: relative;
  max-width: 50%;
  padding: var(--spacing-xl);
}

.vacatures-box--with-image-right .vacatures-box__content {
  flex: 1;
  min-width: 0;
}

.vacatures-box__sprite-right {
  position: absolute;
  left: calc(100% + 80px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Robot sprite - same dimensions as team sprite */
.vacatures-robot-sprite {
  width: 320px;
  height: 396px;
  background: url('/static/jaw/img/robot-sprite.webp') 0 0 / 100% 200%;
  cursor: pointer;
}

.vacatures-robot-sprite:hover {
  background-position: 0 100%;
}

/* Robot hint text */
.vacatures-robot__hint {
  margin: 16px 0 0 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-default);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-body-default);
  color: var(--text-inverted-high);
  text-align: center;
}

/* Section wrapper with image outside the box */
.vacatures-section--with-image-left {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 60px;
}

.vacatures-section--with-image-left .vacatures-box {
  margin-bottom: 0;
}

.vacatures-section__image-left {
  position: absolute;
  right: calc(50% + 80px);
  top: 50%;
  transform: translateY(-50%);
}

.vacatures-section__image-left img {
  width: 580px;
  height: auto;
  display: block;
}

/* Reduce gap between image and text on smaller desktops */
@media (max-width: 1400px) and (min-width: 1024px) {
  .vacatures-section__image-left {
    right: calc(50% + 40px);
  }
  
  .vacatures-section__image-left img {
    width: 480px;
  }
}

@media (max-width: 1200px) and (min-width: 1024px) {
  .vacatures-section__image-left {
    right: calc(50% + 20px);
  }
  
  .vacatures-section__image-left img {
    width: 400px;
  }
}

@media (max-width: 1023px) {
  /* Hide all images on mobile */
  .vacatures-hero__images,
  .vacatures-section__image-left,
  .vacatures-box__sprite-right {
    display: none;
  }
  
  .vacatures-hero__left {
    max-width: 100%;
  }
  
  .vacatures-box--with-image-right {
    max-width: 100%;
  }
  
  /* Fix section alignment on mobile - don't push to right */
  .vacatures-section--with-image-left {
    justify-content: flex-start;
  }
  
  .vacatures-section--with-image-left .vacatures-box {
    max-width: 100%;
  }
}

/* Content boxes */
.vacatures-box {
  background: var(--company-card-bg);
  border: 1px solid var(--company-card-border);
  border-radius: var(--spacing-s);
  padding: var(--spacing-xl);
  margin-bottom: 60px;
  max-width: 50%;
}

.vacatures-box--wide {
  max-width: 60%;
}

.vacatures-box--left {
  margin-left: 0;
  margin-right: auto;
}

.vacatures-box--right {
  margin-left: auto;
  margin-right: 0;
}

/* Horizontal CTA section: 50% text + 25% card + 25% card */
.vacatures-cta {
  display: flex;
  gap: var(--spacing-m);
  margin-bottom: 60px;
  align-items: stretch;
}

.vacatures-cta__text {
  flex: 0 0 50%;
  max-width: 50%;
  background: var(--company-card-bg);
  border: 1px solid var(--company-card-border);
  border-radius: var(--spacing-s);
  padding: var(--spacing-xl);
}

.vacatures-cta__text p {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-default);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-body-default);
  color: var(--text-inverted-high);
  margin: 0 0 var(--spacing-s) 0;
}

.vacatures-cta__text p:last-child {
  margin-bottom: 0;
}

.vacatures-cta > .vacatures-card {
  flex: 0 0 calc(25% - var(--spacing-m) * 0.75);
  max-width: calc(25% - var(--spacing-m) * 0.75);
  margin-bottom: 0;
}

.vacatures-box__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-headers-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-headers-h4);
  color: var(--brand-green);
  margin: 0 0 var(--spacing-s) 0;
}

.vacatures-box p {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-default);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-body-default);
  color: var(--text-inverted-high);
  margin: 0 0 var(--spacing-s) 0;
}

.vacatures-box p:last-child {
  margin-bottom: 0;
}

/* Image variant */
.vacatures-box--with-image {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  max-width: 50%;
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) 200px;
  min-height: 280px;
}

.vacatures-box__content {
  flex: 1;
  min-width: 0;
}

.vacatures-box__image {
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
}

.vacatures-box__image img {
  width: 240px;
  height: auto;
  display: block;
}



/* Vacatures grid */
.vacatures-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-m);
  margin-top: var(--spacing-xl);
}

.vacatures-card {
  background: var(--company-card-bg);
  border: 1px solid var(--company-card-border);
  border-radius: 16px;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .vacatures-card:hover {
    border-color: var(--company-card-border-hover);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 60px var(--company-accent-glow);
  }
}

.vacatures-card h3 {
  font-family: var(--font-family-primary);
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--spacing-s) 0;
  color: var(--brand-green);
}

.vacatures-card p {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-default);
  line-height: 1.6;
  margin: 0 0 var(--spacing-m) 0;
  color: var(--text-inverted-high);
  flex: 1;
}

.vacatures-btn {
  display: inline-flex;
  height: 48px;
  padding: 12px var(--spacing-m);
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-s);
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  background: var(--brand-green);
  color: rgba(5, 56, 107, 0.95);
  transition: var(--transition-normal);
  align-self: flex-start;
  margin-top: auto;
}

.vacatures-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* Buttons container for CTA section */
.vacatures-box__buttons {
  display: flex;
  gap: var(--spacing-m);
  margin-top: var(--spacing-m);
}

.vacatures-box__buttons .vacatures-btn {
  margin-top: 0;
}

.vacatures-card--secondary .vacatures-btn {
  background: var(--blue-500);
  color: var(--text-inverted-high);
}

.vacatures-card--secondary .vacatures-btn:hover {
  background: #3A6590;
  opacity: 1;
}

/* Responsive: tablet and mobile */
@media (max-width: 1023px) {
  .vacatures-box,
  .vacatures-box--wide,
  .vacatures-box--with-image {
    max-width: 100%;
    padding: var(--spacing-m) var(--spacing-s);
    margin-bottom: var(--spacing-l);
  }
  
  .vacatures-box--left,
  .vacatures-box--right {
    margin-left: 0;
    margin-right: 0;
  }
  
  .vacatures-grid {
    grid-template-columns: 1fr;
  }
  
  .vacatures-cta {
    flex-direction: column;
    gap: var(--spacing-m);
    margin-bottom: var(--spacing-l);
  }
  
  .vacatures-cta__text,
  .vacatures-cta > .vacatures-card {
    flex: 1 1 100%;
    max-width: 100%;
    padding: var(--spacing-m) var(--spacing-s);
  }
  
  .vacatures-section--with-image-left {
    margin-bottom: var(--spacing-l);
  }
}