/* Вакансии — адаптив под макеты Figma Desktop / Tablet / Mobile (6:2263, 6:2729, 6:3195) */

/* Главная: у #container нет .job-shell, но футер использует var(--job-link) */
#container:not(.job-shell) {
  --job-link: rgba(0, 0, 0, 0.45);
}

#container.job-shell {
  --job-text: #352a25;
  --job-muted: #8b8582;
  --job-bg-hero: #f5f5f5;
  --job-link: rgba(0, 0, 0, 0.48);
  --job-radius-lg: 16px;
  --job-radius-md: 14px;
  --job-shadow-card: 0 4px 8px rgba(0, 0, 0, 0.02), 0 6px 12px rgba(0, 0, 0, 0.03);
  --job-btn-shadow: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
  --job-btn-primary-bg: url("data:image/svg+xml;utf8,<svg viewBox='0 0 327 50' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientUnits='userSpaceOnUse' gradientTransform='matrix(0 5 -16.35 0 163.5 0)'><stop stop-color='rgb(255,176,142)'/><stop offset='0.5' stop-color='rgb(255,153,109)'/><stop offset='1' stop-color='rgb(255,130,76)'/></radialGradient></defs></svg>");
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--job-text);
  background: #fff;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

#container.job-shell * {
  box-sizing: border-box;
}

/* Не трогаем изображения Figma-экспорта (классы css-*): у них свои размеры в ssr-css. */
#container.job-shell .job-header img,
#container.job-shell .job-hero img,
#container.job-shell .job-logo img,
#container.job-shell .job-footer img,
#container.job-shell .job-card img,
#container.job-shell .job-contact img,
#container.job-shell .ep-news-card img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

#container.job-shell .job-header a:not(.job-btn),
#container.job-shell .job-hero a:not(.job-btn),
#container.job-shell .job-footer a:not(.job-btn),
#container.job-shell .job-card a:not(.job-btn),
#container.job-shell .job-nav a,
#container.job-shell .job-btn-contact {
  color: inherit;
  text-decoration: none;
}

#container.job-shell a.job-btn {
  color: #fff;
}

#container.job-shell a.job-btn--secondary {
  color: var(--job-text);
}

/* ——— Header ——— */
.job-header {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 20px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (min-width: 800px) {
  .job-header {
    padding: 24px 32px;
  }
}

@media (min-width: 1280px) {
  .job-header {
    padding: 24px 64px;
  }
}

.job-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.job-logo__mark {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.job-logo__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job-logo__text {
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 700;
  font-size: 9.225px;
  line-height: 1.01;
  letter-spacing: -0.02em;
  color: var(--job-text);
}

@media (min-width: 800px) {
  .job-logo__text {
    font-size: 9.225px;
  }
}

.job-nav {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

@media (min-width: 800px) {
  .job-nav {
    display: flex;
  }
}

.job-nav a,
.job-nav span {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--job-text);
  white-space: nowrap;
}

.job-nav span.job-nav__current {
  opacity: 0.5;
}

.job-btn-contact {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: var(--job-radius-md);
  border: 2px solid rgba(255, 255, 255, 0.44);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: #fff;
  background: radial-gradient(
    ellipse 180% 100% at 50% 0%,
    #ffb08e 0%,
    #ff996d 50%,
    #ff824c 100%
  );
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (min-width: 800px) {
  .job-btn-contact {
    display: inline-flex;
  }
}

.job-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

@media (min-width: 800px) {
  .job-menu {
    display: none;
  }
}

.job-menu img {
  width: 27px;
  height: 27px;
}

/* ——— Hero ——— */
.job-hero {
  position: relative;
  background: var(--job-bg-hero);
  width: 100%;
  overflow: clip;
}

.job-hero__deco {
  position: absolute;
  pointer-events: none;
  width: 460px;
  height: 542px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.55;
}

@media (min-width: 1280px) {
  .job-hero__deco {
    left: 28%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.85;
  }
}

.job-hero__deco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.job-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  align-items: center;
  gap: 32px;
  padding: 56px 24px 24px;
}

@media (min-width: 1280px) {
  .job-hero__inner {
    grid-template-columns: minmax(0, 1fr) 640px;
    min-height: 540px;
    padding: 120px 64px;
    gap: 0;
  }
}

.job-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

@media (min-width: 1280px) {
  .job-hero__copy {
    text-align: left;
    gap: 24px;
    max-width: 720px;
    padding-right: 32px;
  }
}

.job-hero__title {
  margin: 0;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.job-hero__title .muted {
  color: var(--job-muted);
}

.job-hero__lead {
  margin: 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--job-muted);
}

@media (min-width: 1280px) {
  .job-hero__lead {
    font-size: 24px;
    letter-spacing: -0.005em;
  }
}

.job-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

@media (min-width: 1280px) {
  .job-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    max-width: none;
    width: auto;
  }

  .job-hero__actions .job-btn {
    width: auto;
    min-width: 170px;
  }
}

.job-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 16px;
  border-radius: var(--job-radius-md);
  font-family: "Geist:Medium", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.09px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.44);
  filter: var(--job-btn-shadow);
  text-align: center;
}

.job-btn--primary {
  background-color: transparent;
  background-image: var(--job-btn-primary-bg);
  background-size: 100% 100%;
}

.job-btn--secondary {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  font-size: 16px;
  letter-spacing: -0.08px;
}

.job-btn--dark {
  border-color: rgba(255, 255, 255, 0.44);
  background-color: transparent;
  background-image: radial-gradient(
    ellipse 200% 100% at 50% 0%,
    #8b7d7d 0%,
    #605451 50%,
    #352a25 100%
  );
}

.job-hero__visual {
  display: none;
  position: relative;
  height: 540px;
  align-self: stretch;
}

@media (min-width: 1280px) {
  .job-hero__visual {
    display: block;
  }
}

.job-hero__frame {
  position: absolute;
  right: 8px;
  top: 65px;
  width: min(562px, 100%);
  height: 411px;
  border-radius: 28px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.job-hero__frame .base {
  position: absolute;
  inset: 0;
}

.job-hero__frame .base img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job-hero__frame .overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 26px;
}

.job-hero__frame .overlay img {
  position: absolute;
  width: 100%;
  height: 156%;
  left: 0;
  top: -0.76%;
  object-fit: cover;
}

/* ——— Cards ——— */
.job-cards {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  gap: 32px;
}

@media (min-width: 800px) {
  .job-cards {
    padding: 40px 64px;
  }
}

@media (min-width: 1280px) {
  .job-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    padding: 40px 64px 40px;
  }
}

.job-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--job-radius-lg);
  box-shadow: var(--job-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.job-card__media {
  position: relative;
  width: 100%;
  height: 197px;
  overflow: hidden;
}

@media (min-width: 800px) {
  .job-card__media {
    height: min(423px, 52vw);
    max-height: 423px;
  }
}

@media (min-width: 1280px) {
  .job-card__media {
    height: 240px;
    max-height: none;
  }
}

.job-card__media img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job-card__media--loader img {
  width: 108.6%;
  height: 100%;
  left: -4.3%;
  object-fit: cover;
}

.job-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 800px) {
  .job-card__body {
    padding: 24px;
    gap: 32px;
  }
}

.job-card__title {
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.015em;
}

@media (min-width: 800px) {
  .job-card__title {
    font-size: 24px;
    letter-spacing: -0.02em;
  }
}

.job-card__salary {
  margin: 8px 0 0;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--job-muted);
}

@media (min-width: 1280px) {
  .job-card__salary {
    margin-top: 0;
  }
}

.job-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.job-card .job-btn {
  width: 100%;
}

@media (min-width: 1280px) {
  .job-card .job-btn {
    width: auto;
    align-self: flex-start;
  }
}

/* ——— Contact / map ——— */
#job-map {
  scroll-margin-top: 24px;
}

#container.job-shell .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.job-contact {
  max-width: 1440px;
  margin: 0 auto;
  padding: 52px 24px 36px;
  position: relative;
}

@media (min-width: 800px) {
  .job-contact {
    padding: 103px 24px 36px;
  }
}

@media (min-width: 1280px) {
  .job-contact {
    padding: 120px 64px 36px;
  }
}

.job-contact__rule {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  width: min(100%, 1200px);
  height: 54px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.9;
}

@media (min-width: 800px) {
  .job-contact__rule {
    top: 25px;
  }
}

.job-contact__rule img {
  width: 100%;
  height: auto;
  display: block;
}

#container.job-shell .ep-yandex-map-root {
  border-radius: var(--job-radius-lg);
}

/* ——— Footer ——— */
.job-footer {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px max(48px, calc(24px + env(safe-area-inset-bottom, 0px)));
}

@media (min-width: 800px) {
  .job-footer {
    padding: 0 32px max(48px, calc(24px + env(safe-area-inset-bottom, 0px)));
  }
}

@media (min-width: 1280px) {
  .job-footer {
    padding: 0 64px max(64px, calc(32px + env(safe-area-inset-bottom, 0px)));
  }
}

.job-footer__inner {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

@media (min-width: 1280px) {
  .job-footer__inner {
    flex-direction: row;
    gap: 120px;
    align-items: flex-start;
  }
}

.job-footer__brand {
  flex: 1;
  min-width: 0;
}

.job-footer__name {
  margin: 0 0 8px;
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.job-footer__line {
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--job-link);
}

.job-footer__cols {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 800px) {
  .job-footcol--prod {
    order: 1;
  }
  .job-footcol--svc {
    order: 2;
  }
  .job-footcol--oth {
    order: 3;
  }
  .job-footcol--req {
    order: 4;
  }
}

@media (min-width: 1280px) {
  .job-footer__cols {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
  }
}

.job-footcol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 130px;
}

.job-footcol h3 {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: rgba(0, 0, 0, 0.92);
}

.job-footcol p {
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--job-link);
  text-align: left;
}

.job-footcol a,
.job-footcol button,
.job-footcol span.job-footcol__here {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: rgba(0, 0, 0, 0.46);
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.job-footcol span.job-footcol__here {
  cursor: default;
}

.job-footcol--svc .job-footcol__narrow {
  font-size: 15px;
}

@media (min-width: 800px) {
  .job-footcol--svc .job-footcol__narrow {
    font-size: 16px;
  }
}

.job-footcol a:hover,
.job-footcol button:hover {
  color: rgba(0, 0, 0, 0.82);
}

#container.job-shell .job-footer .job-footcol a:not(.job-btn),
#container.job-shell .job-footer .job-footcol button {
  color: rgba(0, 0, 0, 0.46);
}

#container.job-shell .job-footer .job-footcol a:not(.job-btn):hover,
#container.job-shell .job-footer .job-footcol button:hover {
  color: rgba(0, 0, 0, 0.82);
}

#container.job-shell .job-footer .job-footcol span.job-footcol__here {
  color: rgba(0, 0, 0, 0.46);
}

/* Вакансии: блок внутри экспорта главной (#container) — только то, чего нет в ssr-css */
#container .css-z0spvu.css-roiesn {
  position: relative;
}

#container .job-ep-deskHero__overlay {
  position: absolute;
  left: 0;
  top: -0.76%;
  width: 100%;
  height: 155.99%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

#container .job-ep-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

#container .job-ep-card__media {
  border-radius: 16px;
  overflow: hidden;
  background: #f5f5f5;
  aspect-ratio: 4 / 3;
}

#container [data-breakpoint-id="node-0_4"] .job-ep-card__media {
  aspect-ratio: auto;
  height: 240px;
}

#container [data-breakpoint-id="node-23_3483"] .job-ep-card__media {
  aspect-ratio: auto;
  height: 423px;
}

#container [data-breakpoint-id="node-0_6"] .job-ep-card__media {
  aspect-ratio: auto;
  height: 200px;
}

#container .job-ep-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#container .job-ep-card__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 0;
  flex: 1 1 auto;
}

#container [data-breakpoint-id="node-0_6"] .job-ep-card__body {
  gap: 24px;
}

#container a.job-ep-cardBtn {
  margin-top: auto;
}

#container a.job-ep-cardBtn.job-ep-btnDark {
  background: radial-gradient(
    ellipse 200% 100% at 50% 0%,
    #8b7d7d 0%,
    #605451 50%,
    #352a25 100%
  );
  border-color: rgba(255, 255, 255, 0.44);
  color: #fff;
}

/* Desktop: три карточки в ряд (Figma 6:2263 — gap 32, py 40, px 64) */
#container [data-breakpoint-id="node-0_4"] .job-ep-deskCards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 32px;
  width: 100%;
  box-sizing: border-box;
  padding: 40px 64px;
}

#container [data-breakpoint-id="node-0_4"] .job-ep-deskCards > .css-3eutuf.css-5knerd {
  flex: 1 1 280px;
  max-width: 362.667px;
  min-width: 0;
}