/* -------------------------------------------------------------------------
   Careers Why — Figma 2670:2206 (+ text group 2670:2255)
   1440×524 split: light gray copy left (pad 140 / top 96), brewery photo right.
   ------------------------------------------------------------------------- */
:root {
  --vp-careers-why-bg: #f1f1f1;
  --vp-careers-why-text: #191919;
  --vp-careers-why-height: 524px;
  --vp-careers-why-pad-left: 140px;
  --vp-careers-why-pad-right: 48px;
  --vp-careers-why-pad-top: 96px;
  --vp-careers-why-pad-bottom: 64px;
  --vp-careers-why-content-max: 492px;
  /* Figma 2669:2202 — Inter Black 60 / lineHeightPx 72.57 (120.95%) */
  --vp-careers-why-title-size: 60px;
  --vp-careers-why-title-lh: 1.2095;
  --vp-careers-why-title-max: 462px;
  --vp-careers-why-gap: 19px;
  --vp-careers-why-body-size: 16px;
  --vp-careers-why-body-lh: 1.21;
}

.vp-careers-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: var(--vp-careers-why-height);
  background: var(--vp-careers-why-bg);
  color: var(--vp-careers-why-text);
  overflow: hidden;
}

.vp-careers-why__copy {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--vp-careers-why-pad-top) var(--vp-careers-why-pad-right) var(--vp-careers-why-pad-bottom) var(--vp-careers-why-pad-left);
  min-width: 0;
}

.vp-careers-why__copy-inner {
  width: 100%;
  max-width: var(--vp-careers-why-content-max);
}

.vp-careers-why__title {
  margin: 0;
  max-width: var(--vp-careers-why-title-max);
  font-family: "Catamaran", sans-serif;
  font-weight: 600;
  font-size: var(--vp-careers-why-title-size);
  line-height: var(--vp-careers-why-title-lh);
  letter-spacing: 0;
  text-align: left;
  color: var(--vp-careers-why-text);
  text-wrap: unset;
  animation: vp-careers-why-fade-up 700ms var(--vp-menu-ease) both;
}

.vp-careers-why__title-line {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}

.vp-careers-why__body {
  margin-top: var(--vp-careers-why-gap);
  animation: vp-careers-why-fade-up 700ms var(--vp-menu-ease) both;
  animation-delay: 120ms;
}

.vp-careers-why__body p {
  margin: 0;
  font-family: "Catamaran", sans-serif;
  font-weight: 400;
  font-size: var(--vp-careers-why-body-size);
  line-height: var(--vp-careers-why-body-lh);
  color: var(--vp-careers-why-text);
  text-align: justify;
  text-wrap: pretty;
}

.vp-careers-why__body p + p {
  margin-top: 0.75em;
}

.vp-careers-why__media {
  position: relative;
  min-height: var(--vp-careers-why-height);
  background: #d8d8d8;
  overflow: hidden;
}

.vp-careers-why__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  animation: vp-careers-why-image-in 900ms var(--vp-menu-ease) both;
}

@keyframes vp-careers-why-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vp-careers-why-image-in {
  from {
    opacity: 0.72;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (min-width: 1440px) {
  .vp-careers-why {
    --vp-careers-why-height: calc(100vw * 524 / 1440);
    --vp-careers-why-pad-left: calc(100vw * 140 / 1440);
    --vp-careers-why-pad-right: calc(100vw * 48 / 1440);
    --vp-careers-why-pad-top: calc(100vw * 96 / 1440);
    --vp-careers-why-pad-bottom: calc(100vw * 64 / 1440);
    --vp-careers-why-content-max: calc(100vw * 492 / 1440);
    --vp-careers-why-title-size: calc(100vw * 60 / 1440);
    --vp-careers-why-title-max: calc(100vw * 462 / 1440);
    --vp-careers-why-gap: calc(100vw * 19 / 1440);
    --vp-careers-why-body-size: calc(100vw * 16 / 1440);
  }

  .vp-careers-why__title {
    max-width: var(--vp-careers-why-title-max);
    font-size: var(--vp-careers-why-title-size);
    line-height: var(--vp-careers-why-title-lh);
  }
}

@media (max-width: 1200px) and (min-width: 769px) {
  :root {
    --vp-careers-why-pad-left: 64px;
    --vp-careers-why-pad-right: 36px;
    --vp-careers-why-pad-top: 72px;
    --vp-careers-why-title-size: 48px;
    --vp-careers-why-content-max: 420px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  :root {
    --vp-careers-why-height: 460px;
    --vp-careers-why-pad-left: 40px;
    --vp-careers-why-pad-right: 28px;
    --vp-careers-why-pad-top: 56px;
    --vp-careers-why-pad-bottom: 48px;
    --vp-careers-why-title-size: 40px;
    --vp-careers-why-content-max: 360px;
    --vp-careers-why-body-size: 15px;
  }
}

@media (max-width: 768px) {
  :root {
    --vp-careers-why-height: auto;
    --vp-careers-why-pad-left: 28px;
    --vp-careers-why-pad-right: 28px;
    --vp-careers-why-pad-top: 48px;
    --vp-careers-why-pad-bottom: 40px;
    --vp-careers-why-title-size: 36px;
    --vp-careers-why-content-max: none;
    --vp-careers-why-gap: 16px;
    --vp-careers-why-body-size: 15px;
    --vp-careers-why-body-lh: 1.35;
  }

  .vp-careers-why {
    grid-template-columns: 1fr;
  }

  .vp-careers-why__title {
    max-width: none;
    text-align: center;
  }

  .vp-careers-why__title-line {
    margin-inline: auto;
  }

  .vp-careers-why__body p {
    text-align: left;
  }

  .vp-careers-why__media {
    min-height: 0;
    aspect-ratio: 722 / 524;
  }
}

@media (max-width: 430px) {
  :root {
    --vp-careers-why-pad-left: 20px;
    --vp-careers-why-pad-right: 20px;
    --vp-careers-why-pad-top: 40px;
    --vp-careers-why-pad-bottom: 32px;
    --vp-careers-why-title-size: 30px;
    --vp-careers-why-body-size: 14px;
  }
}

@media (max-width: 375px) {
  :root {
    --vp-careers-why-pad-left: 16px;
    --vp-careers-why-pad-right: 16px;
    --vp-careers-why-title-size: 26px;
    --vp-careers-why-body-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vp-careers-why__title,
  .vp-careers-why__body,
  .vp-careers-why__image {
    animation: none !important;
  }
}