/* ==========================================================================
   НДВ · Карьера — базовый слой лендинга.

   Порядок каскадных слоёв фиксирован: секционные файлы всегда сильнее базы,
   поэтому тикеты 03–09 правят только свой файл в sections/ и никогда не лезут
   сюда. Новый слой без согласования не добавляем.
   ========================================================================== */

@layer tokens, base, components, sections;

@import url('tokens.css') layer(tokens);

@import url('sections/hero.css') layer(sections);
@import url('sections/directions.css') layer(sections);
@import url('sections/vacancies.css') layer(sections);
@import url('sections/gallery.css') layer(sections);
@import url('sections/about.css') layer(sections);
@import url('sections/cta.css') layer(sections);

/* Тикет 09. Идут последними внутри того же слоя: покой секций уже описан,
   эти два файла описывают только движение поверх него. */
@import url('motion.css') layer(sections);
@import url('seasons.css') layer(sections);

/* ==========================================================================
   БАЗА
   ========================================================================== */

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Скроллбар — часть дизайна, а не браузерный дефолт. */
    scrollbar-width: thin;
    scrollbar-color: var(--ndv-hairline-strong) transparent;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    margin: 0;
    min-height: 100%;
    background: var(--ndv-ground);
    color: var(--ndv-ink);
    font-family: var(--ndv-font);
    font-size: var(--ndv-fs-body);
    font-weight: var(--ndv-w-regular);
    line-height: var(--ndv-lh-body);
    letter-spacing: var(--ndv-track-body);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  body.is-locked {
    overflow: hidden;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  h1,
  h2,
  h3,
  h4 {
    font-weight: var(--ndv-w-bold);
    line-height: var(--ndv-lh-heading);
    letter-spacing: var(--ndv-track-heading);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--ndv-fs-display);
    font-weight: var(--ndv-w-black);
    line-height: var(--ndv-lh-display);
    letter-spacing: var(--ndv-track-display);
  }

  h2 {
    font-size: var(--ndv-fs-h2);
    font-weight: var(--ndv-w-black);
    line-height: var(--ndv-lh-tight);
  }

  h3 {
    font-size: var(--ndv-fs-h3);
  }

  h4 {
    font-size: var(--ndv-fs-h4);
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1.5px;
  }

  img,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }

  img {
    height: auto;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  [hidden] {
    display: none !important;
  }

  /* ------------------------------------------------- браузерные поверхности */

  ::selection {
    background: var(--ndv-red);
    color: var(--ndv-on-red);
    text-shadow: none;
  }

  input,
  textarea {
    caret-color: var(--ndv-red);
  }

  ::placeholder {
    color: var(--ndv-muted);
    opacity: 1;
  }

  :focus-visible {
    outline: var(--ndv-focus-width) solid var(--ndv-focus);
    outline-offset: var(--ndv-focus-offset);
  }

  /* На красных и чернильных поверхностях красное кольцо не читается. */
  .ndv-on-red :focus-visible,
  .ndv-btn:not(.ndv-btn--ghost):focus-visible {
    outline-color: var(--ndv-ink);
    box-shadow: 0 0 0 calc(var(--ndv-focus-width) + var(--ndv-focus-offset) + 2px)
      rgba(255, 255, 255, 0.92);
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--ndv-hairline-strong);
    border: 3px solid var(--ndv-ground);
    border-radius: var(--ndv-r-pill);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--ndv-ink);
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   КОМПОНЕНТЫ И УТИЛИТЫ — общий словарь для всех секций
   ========================================================================== */

@layer components {
  /* ------------------------------------------------------------- служебное */

  .ndv-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .ndv-skip {
    position: absolute;
    top: var(--ndv-s-8);
    left: var(--ndv-s-8);
    z-index: calc(var(--ndv-z-menu) + 1);
    padding: var(--ndv-s-12) var(--ndv-s-20);
    border-radius: var(--ndv-r-pill);
    background: var(--ndv-ink);
    color: var(--ndv-on-ink);
    font-size: var(--ndv-fs-meta);
    font-weight: var(--ndv-w-semibold);
    transform: translateY(-160%);
    transition: transform var(--ndv-dur-base) var(--ndv-ease-out);
  }

  .ndv-skip:focus-visible {
    transform: translateY(0);
  }

  /* ------------------------------------------------------------ сетка/ритм */

  .ndv-container {
    width: 100%;
    max-width: calc(var(--ndv-container) + var(--ndv-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--ndv-gutter);
  }

  .ndv-section {
    padding-block: var(--ndv-section-y);
  }

  .ndv-anchor {
    scroll-margin-top: calc(var(--ndv-header-h) + var(--ndv-s-24));
  }

  .ndv-section__head {
    display: flex;
    flex-direction: column;
    gap: var(--ndv-s-12);
    margin-bottom: var(--ndv-s-40);
  }

  .ndv-section__title {
    font-size: var(--ndv-fs-h2);
    font-weight: var(--ndv-w-black);
    line-height: var(--ndv-lh-tight);
    letter-spacing: var(--ndv-track-display);
  }

  .ndv-section__subtitle {
    max-width: var(--ndv-measure);
    color: var(--ndv-muted);
    font-size: var(--ndv-fs-lead);
  }

  /* --------------------------------------------------------- поверхности */

  .ndv-plate {
    border-radius: var(--ndv-r-lg);
    background: var(--ndv-plate);
    box-shadow: var(--ndv-shadow-plate);
  }

  .ndv-plate--flat {
    box-shadow: none;
  }

  .ndv-media {
    position: relative;
    overflow: hidden;
    border-radius: var(--ndv-r-lg);
    background: var(--ndv-ground-deep);
  }

  .ndv-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Контраст подписей на фото обеспечивает оверлей, а не надежда на снимок. */
  .ndv-media__scrim {
    position: absolute;
    inset: 0;
    background: var(--ndv-photo-scrim);
    pointer-events: none;
  }

  .ndv-media__caption {
    position: absolute;
    inset-inline: var(--ndv-s-20);
    bottom: var(--ndv-s-20);
    color: var(--ndv-on-photo);
    font-size: var(--ndv-fs-h4);
    font-weight: var(--ndv-w-bold);
    line-height: var(--ndv-lh-tight);
    letter-spacing: var(--ndv-track-heading);
  }

  /* ----------------------------------------------------------- типографика */

  .ndv-nums {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
  }

  .ndv-fact {
    color: var(--ndv-muted);
    font-size: var(--ndv-fs-fact);
    line-height: var(--ndv-lh-fact);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
  }

  .ndv-caps {
    font-size: var(--ndv-fs-micro);
    font-weight: var(--ndv-w-bold);
    letter-spacing: var(--ndv-track-caps);
    text-transform: uppercase;
  }

  .ndv-measure {
    max-width: var(--ndv-measure);
  }

  /* Красный маркер под акцентным словом — приём заголовка дня. */
  .ndv-mark {
    position: relative;
    display: inline-block;
    color: inherit;
    isolation: isolate;
  }

  .ndv-mark::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: -0.06em;
    right: -0.06em;
    bottom: 0.06em;
    height: 0.34em;
    background: var(--ndv-red);
    border-radius: 2px;
  }

  /* --------------------------------------------------------------- кнопки */

  .ndv-btn {
    --_btn-bg: var(--ndv-ink);
    --_btn-fg: var(--ndv-on-ink);
    --_btn-bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ndv-s-8);
    min-height: 48px;
    padding: 0 var(--ndv-s-24);
    border: 1.5px solid var(--_btn-bd);
    border-radius: var(--ndv-r-pill);
    background: var(--_btn-bg);
    color: var(--_btn-fg);
    font-size: var(--ndv-fs-fact);
    font-weight: var(--ndv-w-semibold);
    letter-spacing: var(--ndv-track-body);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--ndv-dur-fast) var(--ndv-ease-ui),
      color var(--ndv-dur-fast) var(--ndv-ease-ui),
      border-color var(--ndv-dur-fast) var(--ndv-ease-ui),
      transform var(--ndv-dur-fast) var(--ndv-ease-ui),
      box-shadow var(--ndv-dur-base) var(--ndv-ease-out);
  }

  .ndv-btn:hover {
    --_btn-bg: #000000;
    box-shadow: var(--ndv-shadow-plate);
  }

  .ndv-btn:active {
    transform: translateY(1px);
    box-shadow: var(--ndv-shadow-press);
  }

  .ndv-btn[disabled],
  .ndv-btn[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
    transform: none;
  }

  .ndv-btn--red {
    --_btn-bg: var(--ndv-red);
    --_btn-fg: var(--ndv-on-red);
  }

  .ndv-btn--red:hover {
    --_btn-bg: var(--ndv-red-deep);
  }

  .ndv-btn--ghost {
    --_btn-bg: transparent;
    --_btn-fg: var(--ndv-ink);
    --_btn-bd: var(--ndv-hairline-strong);
  }

  .ndv-btn--ghost:hover {
    --_btn-bg: var(--ndv-plate);
    --_btn-bd: var(--ndv-ink);
  }

  .ndv-btn--lg {
    min-height: 56px;
    padding-inline: var(--ndv-s-32);
    font-size: var(--ndv-fs-body);
  }

  .ndv-btn--sm {
    min-height: 40px;
    padding-inline: var(--ndv-s-16);
    font-size: var(--ndv-fs-meta);
  }

  /* ----------------------------------------------------------------- чипы */

  .ndv-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ndv-s-8);
    min-height: 36px;
    padding: 0 var(--ndv-s-16);
    border: 1px solid var(--ndv-hairline);
    border-radius: var(--ndv-r-pill);
    background: var(--ndv-plate);
    color: var(--ndv-ink-soft);
    font-size: var(--ndv-fs-meta);
    font-weight: var(--ndv-w-medium);
    transition:
      border-color var(--ndv-dur-fast) var(--ndv-ease-ui),
      background-color var(--ndv-dur-fast) var(--ndv-ease-ui),
      color var(--ndv-dur-fast) var(--ndv-ease-ui);
  }

  .ndv-chip.is-active {
    border-color: var(--ndv-ink);
    background: var(--ndv-ink);
    color: var(--ndv-on-ink);
  }

  /* ----------------------------------------------------------------- ссылки */

  .ndv-link {
    color: var(--ndv-ink);
    text-decoration: underline;
    text-decoration-color: var(--ndv-hairline-strong);
    transition:
      color var(--ndv-dur-fast) var(--ndv-ease-ui),
      text-decoration-color var(--ndv-dur-fast) var(--ndv-ease-ui);
  }

  .ndv-link:hover {
    color: var(--ndv-red);
    text-decoration-color: currentColor;
  }

  /* ----------------------------------------------------------------- иконки
     Один штрих 1.5px, currentColor, размер наследуется от кегля.
  */

  .ndv-icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ndv-icon--lg {
    width: 24px;
    height: 24px;
  }

  /* ================================================================= ШАПКА */

  .ndv-header {
    position: sticky;
    top: 0;
    z-index: var(--ndv-z-header);
    background: transparent;
    transition:
      background-color var(--ndv-dur-base) var(--ndv-ease-out),
      box-shadow var(--ndv-dur-base) var(--ndv-ease-out),
      backdrop-filter var(--ndv-dur-base) var(--ndv-ease-out);
  }

  .ndv-header.is-stuck {
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--ndv-shadow-header);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
  }

  .ndv-header.is-open {
    background: var(--ndv-plate);
    box-shadow: var(--ndv-shadow-header);
  }

  .ndv-header__inner {
    display: flex;
    align-items: center;
    gap: var(--ndv-s-24);
    min-height: var(--ndv-header-h);
  }

  .ndv-header__logo {
    flex: none;
    margin-right: auto;
    border-radius: var(--ndv-r-xs);
  }

  .ndv-header__logo img {
    width: 186px;
    height: 40px;
    transition: opacity var(--ndv-dur-fast) var(--ndv-ease-ui);
  }

  .ndv-header__logo:hover img {
    opacity: 0.78;
  }

  .ndv-header__nav {
    display: flex;
    align-items: center;
    gap: var(--ndv-s-24);
  }

  .ndv-header__link {
    position: relative;
    padding-block: var(--ndv-s-8);
    color: var(--ndv-muted);
    font-size: var(--ndv-fs-fact);
    font-weight: var(--ndv-w-medium);
    transition: color var(--ndv-dur-fast) var(--ndv-ease-ui);
  }

  /* Подчёркивание растёт от левого края — один приём, не набор хover'ов. */
  .ndv-header__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    background: var(--ndv-red);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ndv-dur-base) var(--ndv-ease-out);
  }

  .ndv-header__link:hover,
  .ndv-header__link[aria-current='true'] {
    color: var(--ndv-ink);
  }

  .ndv-header__link:hover::after,
  .ndv-header__link[aria-current='true']::after {
    transform: scaleX(1);
  }

  .ndv-header__phone {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--ndv-s-8);
    padding: var(--ndv-s-8);
    margin-inline: calc(var(--ndv-s-8) * -1);
    border-radius: var(--ndv-r-sm);
    color: var(--ndv-ink);
    font-size: var(--ndv-fs-fact);
    font-weight: var(--ndv-w-bold);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    white-space: nowrap;
    transition: color var(--ndv-dur-fast) var(--ndv-ease-ui);
  }

  .ndv-header__phone:hover {
    color: var(--ndv-red);
  }

  .ndv-header__phone .ndv-icon {
    display: none;
  }

  .ndv-header__cta {
    flex: none;
    min-height: 44px;
  }

  /* -------------------------------------------------------------- бургер */

  .ndv-burger {
    display: none;
    flex: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--ndv-r-sm);
    color: var(--ndv-ink);
  }

  .ndv-burger__box {
    position: relative;
    width: 22px;
    height: 14px;
  }

  .ndv-burger__box span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition:
      transform var(--ndv-dur-base) var(--ndv-ease-out),
      opacity var(--ndv-dur-fast) var(--ndv-ease-ui);
  }

  .ndv-burger__box span:nth-child(1) {
    top: 0;
  }

  .ndv-burger__box span:nth-child(2) {
    top: 6.25px;
  }

  .ndv-burger__box span:nth-child(3) {
    top: 12.5px;
  }

  .ndv-burger[aria-expanded='true'] .ndv-burger__box span:nth-child(1) {
    transform: translateY(6.25px) rotate(45deg);
  }

  .ndv-burger[aria-expanded='true'] .ndv-burger__box span:nth-child(2) {
    opacity: 0;
  }

  .ndv-burger[aria-expanded='true'] .ndv-burger__box span:nth-child(3) {
    transform: translateY(-6.25px) rotate(-45deg);
  }

  /* ------------------------------------------------------ выпадающее меню */

  .ndv-menu {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: var(--ndv-z-menu);
    border-top: 1px solid var(--ndv-hairline);
    background: var(--ndv-plate);
    box-shadow: var(--ndv-shadow-raise);
  }

  .ndv-menu__inner {
    display: flex;
    flex-direction: column;
    padding-block: var(--ndv-s-8) var(--ndv-s-24);
  }

  .ndv-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ndv-s-16) 0;
    border-bottom: 1px solid var(--ndv-hairline);
    color: var(--ndv-ink);
    font-size: var(--ndv-fs-h4);
    font-weight: var(--ndv-w-semibold);
    letter-spacing: var(--ndv-track-heading);
  }

  .ndv-menu__link .ndv-icon {
    color: var(--ndv-muted-2);
    transition: transform var(--ndv-dur-base) var(--ndv-ease-out);
  }

  .ndv-menu__link:hover .ndv-icon {
    transform: translateX(4px);
    color: var(--ndv-red);
  }

  .ndv-menu__phone {
    margin-top: var(--ndv-s-20);
    color: var(--ndv-ink);
    font-size: var(--ndv-fs-h4);
    font-weight: var(--ndv-w-bold);
    font-variant-numeric: tabular-nums;
  }

  /* ---------------------------------------------------------- адаптив шапки */

  /* 768–1024: меню уезжает в бургер, телефон и кнопка остаются. */
  @media (max-width: 1024px) {
    .ndv-header__nav {
      display: none;
    }

    .ndv-burger {
      display: inline-flex;
    }
  }

  @media (max-width: 767px) {
    .ndv-header__inner {
      gap: var(--ndv-s-4);
      min-height: var(--ndv-header-h-sm);
    }

    .ndv-header__logo img {
      width: 132px;
      height: 28px;
    }

    .ndv-header__phone-text {
      display: none;
    }

    .ndv-header__phone .ndv-icon {
      display: block;
      width: 22px;
      height: 22px;
    }

    .ndv-header__cta {
      min-height: 40px;
      padding-inline: var(--ndv-s-12);
      font-size: 0.8125rem;
    }

    .ndv-burger {
      width: 40px;
      height: 40px;
    }

    .ndv-anchor {
      scroll-margin-top: calc(var(--ndv-header-h-sm) + var(--ndv-s-16));
    }
  }

  @media (max-width: 359px) {
    .ndv-header__cta {
      display: none;
    }
  }

  /* ================================================================== ТЕЛО */

  /* Пока секции пустые, страница не схлопывается в шапку и футер.
     Правило перестаёт работать, как только тикеты 03–08 наполнят секции. */
  .ndv-main {
    min-height: 620px;
  }

  /* Понятная деградация вместо белого экрана, когда config.php ещё не создан. */
  .ndv-setup {
    border-bottom: 1px solid var(--ndv-hairline);
    background: var(--ndv-ink);
    color: var(--ndv-on-ink);
  }

  .ndv-setup__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ndv-s-8) var(--ndv-s-16);
    padding-block: var(--ndv-s-12);
    font-size: var(--ndv-fs-meta);
  }

  .ndv-setup__title {
    font-weight: var(--ndv-w-bold);
  }

  .ndv-setup__text {
    color: var(--ndv-on-ink-soft);
  }

  .ndv-setup__link {
    color: var(--ndv-on-ink);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
  }

  /* ================================================================= ФУТЕР */

  .ndv-footer {
    border-top: 1px solid var(--ndv-hairline);
    background: var(--ndv-ground);
  }

  .ndv-footer__inner {
    display: grid;
    grid-template-columns: minmax(280px, 1.4fr) repeat(3, minmax(140px, 1fr));
    gap: var(--ndv-s-40) var(--ndv-s-32);
    padding-block: clamp(40px, 5vw, 72px);
  }

  .ndv-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ndv-s-20);
  }

  .ndv-footer__logo {
    border-radius: var(--ndv-r-xs);
  }

  .ndv-footer__logo img {
    width: 178px;
    height: 38px;
    transition: opacity var(--ndv-dur-fast) var(--ndv-ease-ui);
  }

  .ndv-footer__logo:hover img {
    opacity: 0.78;
  }

  .ndv-footer__slogan {
    max-width: 34ch;
    color: var(--ndv-ink-soft);
    font-size: var(--ndv-fs-fact);
    line-height: var(--ndv-lh-fact);
  }

  .ndv-footer__col-title {
    margin-bottom: var(--ndv-s-20);
    font-size: var(--ndv-fs-body);
    font-weight: var(--ndv-w-bold);
    letter-spacing: var(--ndv-track-heading);
  }

  .ndv-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--ndv-s-12);
    align-items: flex-start;
  }

  .ndv-footer__link {
    display: inline-block;
    color: var(--ndv-muted);
    font-size: var(--ndv-fs-fact);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    text-align: left;
    border-radius: var(--ndv-r-xs);
    transition:
      color var(--ndv-dur-fast) var(--ndv-ease-ui),
      transform var(--ndv-dur-base) var(--ndv-ease-out);
  }

  .ndv-footer__link:hover {
    color: var(--ndv-red);
    transform: translateX(3px);
  }

  @media (max-width: 900px) {
    .ndv-footer__inner {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ndv-footer__brand {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 560px) {
    .ndv-footer__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--ndv-s-32);
    }

    .ndv-footer__brand {
      grid-column: auto;
    }

    .ndv-footer__col-title {
      margin-bottom: var(--ndv-s-12);
    }
  }
}