/* Мобильная адаптация (подключается последним)
 * Этап 1 — фундамент: токены, page-shell, формы, якоря
 * Этап 2 — главная: layout/home-mobile.css (только styles_home.html)
 * Этап 3 — внутренние страницы: layout/pages-mobile.css
 * Этап 4 — заказ: layout/order-mobile.css (шаблоны order / order_success)
 * Этап 5 — кабинет: layout/staff-mobile.css (staff_base.html)
 */

/* Меню открыто: страница скроллится, закрытие — в core.js */

.bee-header,
.bee-header * {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
  :root {
    --scroll-anchor-offset: calc(var(--header-height-mobile) + var(--scroll-anchor-gap));
  }

  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  .content {
    overflow-x: clip;
    max-width: 100%;
  }

  /* Горизонтальный скролл только внутри каруселей и форм */
  .stories-track,
  .order-page .progress-steps,
  .order-page .team-time-selection .time-range--inline {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Этап 1: внутренние страницы --- */
  .page-shell,
  .page-shell--wide {
    padding-top: calc(var(--header-height-mobile) + clamp(1.25rem, 4vw, 2rem));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: max(40px, env(safe-area-inset-bottom, 0px));
  }

  /* Поля ≥16px — без авто-зума на iOS */
  .form-control,
  .order-form input,
  .order-form textarea,
  .order-form select,
  .order-page .form-control,
  .order-page input,
  .order-page textarea,
  .order-page select {
    font-size: max(16px, 1rem);
    min-height: 48px;
  }

  .order-page textarea.form-control,
  .order-page textarea {
    min-height: 6rem;
  }

  .order-page .btn,
  .submit-button,
  .order-submit {
    min-height: 48px;
  }

  #about,
  #portfolio-works,
  #stories-carousel-section,
  #more-projects,
  #contact,
  #portfolio {
    scroll-margin-top: var(--scroll-anchor-offset);
  }

  .logo-link {
    min-width: 0;
    align-items: center;
  }

  .logo-text {
    font-size: clamp(0.68rem, 3.4vw, 0.98rem);
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
  }

  .logo-text .production {
    font-size: 0.72em;
    opacity: 0.85;
  }

  .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 28px;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
  }

  .simple-footer {
    padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }

  .footer-link,
  .social-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
  }

  /* --- Общее --- */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  .page-head {
    padding-left: 0;
    padding-right: 0;
  }

  .page-head__title {
    font-size: clamp(1.65rem, 7vw, 2.25rem);
  }

  .footer-nav {
    flex-direction: column;
    gap: 4px;
  }

  .footer-social {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  /* --- Плеер портфолио --- */
  .sp-bar {
    padding: 0.35rem 0.45rem max(0.55rem, env(safe-area-inset-bottom, 0px));
  }

  .sp-row--bar {
    gap: 0.35rem;
    min-height: 2rem;
  }

  .sp-fs,
  .sp-mute {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    font-size: 0.8rem;
  }

  .sp-volume {
    width: 2.75rem;
    min-height: 2rem;
  }

  .sp-volume::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5px;
  }

  .sp-volume::-moz-range-thumb {
    width: 14px;
    height: 14px;
  }

  .sp-track-hit {
    min-height: 1.75rem;
    padding: 8px 0;
    margin: -8px 0;
  }

  .sp-times {
    font-size: 0.56rem;
    gap: 0.12rem;
  }

}

/* Тач-устройства: без hover-зума и параллакс-артефактов */
@media (hover: none) and (pointer: coarse) {
  .video-wrapper,
  .video-wrapper:hover,
  .video-item .video-wrapper,
  .video-item:nth-child(odd) .video-wrapper,
  .video-item:nth-child(even) .video-wrapper,
  .more-projects__item--reveal.is-visible:hover {
    transform: none !important;
  }

  .story-item:hover .story-container {
    transform: none;
  }

  .photo-album-card:hover {
    transform: none;
  }

  .more-projects__item--reveal.is-visible:hover {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
    border-color: rgba(255, 255, 255, 0.06);
  }

  .more-projects__item--reveal.is-visible.more-projects__continue:hover {
    transform: none !important;
    border-color: rgba(250, 215, 104, 0.55);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
  }
}

@media (max-width: 360px) {
  .logo-text .production {
    display: none;
  }

  .logo-text {
    font-size: clamp(0.62rem, 3.1vw, 0.82rem);
  }
}

@media (max-width: 480px) {
  .sp-volume-wrap {
    max-width: 3.5rem;
  }

  .sp-times .sp-time-sep {
    display: none;
  }

  .sp-times .sp-time--dur::before {
    content: '/';
    margin-right: 0.12rem;
    opacity: 0.45;
  }

}

@media (prefers-reduced-motion: reduce) {
  .bee-logo,
  .bee-header .bee-logo--pixel,
  .team-png,
  .scroll-arrow {
    animation: none !important;
  }

  .story-container,
  .video-wrapper {
    transition: none !important;
  }

  .nav-group,
  .bee-header::after,
  .nav-group .nav-link,
  .nav-group .order-button {
    transition: none !important;
    transform: none !important;
  }

  .nav-group.active .nav-link,
  .nav-group.active .order-button,
  .nav-group.nav-group--closing .nav-link,
  .nav-group.nav-group--closing .order-button {
    opacity: 1;
  }
}