/* ============================================
   RESPONSIVE.CSS
   ============================================ */

/* ============================================
   БАЗОВЫЕ СТИЛИ (DESKTOP FIRST)
   ============================================ */

.container {
  width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* ============================================
   HERO LOGO
   ============================================ */

.hero__logo-wrapper {
  width: 10%;
}

/* ============================================
   HERO IMAGE
   ============================================ */

.hero__image-wrapper {
  width: 30%;
  aspect-ratio: 1200 / 700;
}

/* ============================================
   SERVICES IMAGE
   ============================================ */

.services__image-wrapper {
  width: 18%;
  aspect-ratio: 1200 / 1200;
}

/* ============================================
   TEAM IMAGE
   ============================================ */

.team__image {
  width: 15%;
  aspect-ratio: 1 / 1;
}

/* ============================================
   ICONS (benefits, services-title, services-extra, hero-cards)
   ============================================ */

.benefits__card-icon,
.services__title-icon,
.services__extra-icon,
.hero-cards__card-icon {
  aspect-ratio: 1 / 1;
}

/* ============================================
   ШИРОКИЕ ЭКРАНЫ (DESKTOP FIRST — ПОВЫШЕНИЕ)
   ============================================ */

@media (min-width: 1921px) {
  .container {
    width: 80%;
    max-width: 1600px;
  }

  .modal--size-mini {
    width: 30vw;
    height: 40vh;
  }

  .modal--size-default {
    width: 50vw;
    height: 60vh;
  }

  .modal--size-large {
    width: 70vw;
    height: 75vh;
  }
}

@media (min-width: 2560px) {
  .container {
    width: 70%;
    max-width: 1800px;
  }

  .modal--size-mini {
    width: 25vw;
    height: 35vh;
  }

  .modal--size-default {
    width: 45vw;
    height: 55vh;
  }

  .modal--size-large {
    width: 65vw;
    height: 70vh;
  }
}

@media (min-width: 3840px) {
  .container {
    width: 60%;
    max-width: 2200px;
  }

  .modal--size-mini {
    width: 20vw;
    height: 30vh;
  }

  .modal--size-default {
    width: 40vw;
    height: 50vh;
  }

  .modal--size-large {
    width: 60vw;
    height: 65vh;
  }
}

/* ============================================
   ПЛАНШЕТЫ (до 1024px)
   ============================================ */

@media (max-width: 1024px) {
  .hero__logo-wrapper {
    width: 20%;
  }

  .hero__image-wrapper {
    width: 50%;
  }

  .services__image-wrapper {
    width: 30%;
  }

  .team__image {
    width: 25%;
  }

  .modal-container .modal,
  .modal-container .tooltip,
  .modal-container .cart-modal,
  .modal-container #chatWindow,
  .modal-container .modal--size-mini,
  .modal-container .modal--size-default,
  .modal-container .modal--size-large {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ============================================
   ПЛАНШЕТЫ (769px - 1024px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services__extra-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services__row,
  .team__grid,
  .about__grid {
    grid-template-columns: 1fr;
  }

  .modal-container .modal--size-mini,
  .modal-container .modal--size-default,
  .modal-container .modal--size-large {
    width: 85vw;
    height: auto;
    max-height: calc(100vh - var(--header-height) - var(--space-lg));
    top: calc(var(--header-height) + var(--space-sm));
  }
}

/* ============================================
   МОБИЛЬНЫЕ (ДО 768px) — ВЕРТИКАЛЬНАЯ ОРИЕНТАЦИЯ
   ============================================ */

@media (max-width: 768px) and (orientation: portrait) {
  .hero__logo-wrapper {
    width: 40%;
  }

  .hero__image-wrapper {
    width: 100%;
    margin-inline: calc(-1 * var(--space-sm));
  }

  .services__image-wrapper {
    width: 90%;
  }

  .team__image {
    width: 50%;
  }

  body,
  .text-base,
  .modal__content,
  .tooltip__content,
  .cart-modal .modal__content,
  .services__link-name,
  .services__link-price,
  .benefits__card-text,
  .about__card-text,
  .team__desc,
  .hero-cards__card p,
  .chat-message,
  .toast__message {
    font-size: var(--text-md);
  }

  body,
  .text-light,
  .services__link-name,
  .services__link-price,
  .benefits__card-text,
  .about__card-text,
  .team__desc,
  .hero-cards__card p,
  .chat-message,
  .toast__message {
    font-weight: var(--weight-normal);
  }

  .section__title,
  .services__title-row .section__title {
    font-size: var(--text-4xl);
  }

  .section__subtitle,
  .hero-cards .section__subtitle,
  .hero-cards__footer-text {
    max-width: 90%;
  }

  .header {
    height: 6rem;
  }

  .header__btn,
  .header__ai-banner,
  .header__discount-banner {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .services__title-row {
    flex-direction: column;
    width: 100%;
    gap: var(--space-sm);
  }

  .services__title-icon {
    margin-bottom: var(--space-xs);
  }

  .hero-cards__card,
  .benefits__card,
  .services__card,
  .services__extra-item,
  .team__card,
  .about__card,
  .footer__column {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .container {
    padding-inline: var(--space-sm);
  }

  .hero-cards__grid,
  .benefits__grid,
  .services__row,
  .services__extra-row,
  .team__grid,
  .about__grid,
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .modal-container .modal,
  .modal-container .tooltip,
  .modal-container .cart-modal,
  .modal-container #chatWindow,
  .modal-container .modal--size-mini,
  .modal-container .modal--size-default,
  .modal-container .modal--size-large {
    width: 95vw;
    max-height: calc(100vh - var(--header-height) - var(--space-lg));
    height: auto;
    top: var(--header-height);
  }

  .modal-container .modal--large,
  .modal-container .tooltip--small,
  .modal-container .tooltip--default {
    height: auto;
  }

  .modal__form-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .team__card {
    flex-direction: column;
    text-align: center;
  }

  .modal__textarea--auto-resize {
    min-height: 12rem;
  }

  .modal__textarea--work {
    min-height: 12rem;
  }

  .modal__textarea--comment {
    min-height: 24rem;
  }
}

/* ============================================
   МОБИЛЬНЫЕ (ДО 768px) — ГОРИЗОНТАЛЬНАЯ ОРИЕНТАЦИЯ
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
  .hero__logo-wrapper {
    width: 30%;
  }

  .hero__image-wrapper {
    width: 50%;
  }

  .services__image-wrapper {
    width: 50%;
  }

  .team__image {
    width: 35%;
  }

  body,
  .text-base,
  .modal__content,
  .tooltip__content,
  .cart-modal .modal__content,
  .services__link-name,
  .services__link-price,
  .benefits__card-text,
  .about__card-text,
  .team__desc,
  .hero-cards__card p,
  .chat-message,
  .toast__message {
    font-size: var(--text-md);
  }

  body,
  .text-light,
  .services__link-name,
  .services__link-price,
  .benefits__card-text,
  .about__card-text,
  .team__desc,
  .hero-cards__card p,
  .chat-message,
  .toast__message {
    font-weight: var(--weight-normal);
  }

  .section__title,
  .services__title-row .section__title {
    font-size: var(--text-4xl);
  }

  .section__subtitle,
  .hero-cards .section__subtitle,
  .hero-cards__footer-text {
    max-width: 70%;
  }

  .header {
    height: 5rem;
  }

  .header__btn,
  .header__ai-banner,
  .header__discount-banner {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .services__title-row {
    flex-direction: column;
    width: 100%;
    gap: var(--space-sm);
  }

  .services__title-icon {
    margin-bottom: var(--space-xs);
  }

  .hero-cards__card,
  .benefits__card,
  .services__card,
  .services__extra-item,
  .team__card,
  .about__card,
  .footer__column {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .container {
    padding-inline: var(--space-sm);
  }

  .hero-cards__grid,
  .benefits__grid,
  .services__extra-row,
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .services__row,
  .team__grid,
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .modal-container .modal,
  .modal-container .tooltip,
  .modal-container .cart-modal,
  .modal-container #chatWindow,
  .modal-container .modal--size-mini,
  .modal-container .modal--size-default,
  .modal-container .modal--size-large {
    width: 95vw;
    max-height: calc(100vh - var(--header-height) - var(--space-lg));
    height: auto;
    top: var(--header-height);
  }

  .modal-container .modal--large,
  .modal-container .tooltip--small,
  .modal-container .tooltip--default {
    height: auto;
  }

  .modal__form-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .team__card {
    flex-direction: column;
    text-align: center;
  }

  .modal__textarea--auto-resize {
    min-height: 8rem;
  }

  .modal__textarea--work {
    min-height: 8rem;
  }

  .modal__textarea--comment {
    min-height: 16rem;
  }
}

/* ============================================
   ЧАТ — ВЕСЬ ЭКРАН (ВСЕ МОБИЛЬНЫЕ)
   ============================================ */

@media (max-width: 768px),
(min-width: 769px) and (max-width: 1024px) {
  #chatModalContainer.active #chatWindow {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
  }

  body:has(#chatModalContainer.active) .header {
    transform: translateY(-100%);
    transition: transform var(--duration) var(--ease);
  }
}

/* ============================================
   SAFE AREA (ВСЕ МОБИЛЬНЫЕ)
   ============================================ */

@media (max-width: 768px) {

  .modal-container .modal,
  .modal-container .tooltip,
  .modal-container .cart-modal,
  .modal-container #chatWindow {
    max-height: calc(100vh - var(--header-height) - var(--space-lg) - env(safe-area-inset-bottom));
    margin-bottom: env(safe-area-inset-bottom);
  }

  .modal__content,
  .tooltip__content,
  .cart-modal .modal__content,
  #chatMessages {
    padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
  }
}

/* ============================================
   HEADER — ИКОНКИ
   ============================================ */

/* Десктоп (>1024px) — 3 слева, 3 справа */
.header__container {
  justify-content: space-between;
}

.header__left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header__contacts {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Планшеты и мобилы (≤1024px) — все 6 иконок по центру */
@media (max-width: 1024px) {
  .header__container {
    justify-content: center;
    gap: var(--space-sm);
    /* ← отступ между блоками */
  }

  .header__left {
    gap: var(--space-sm);
    justify-content: center;
  }

  .header__contacts {
    gap: var(--space-sm);
    justify-content: center;
  }
}

/* Планшеты и мобильные — ВЕРТИКАЛЬНАЯ ориентация (portrait) */
@media (max-width: 1024px) and (orientation: portrait) {
  .side-menu {
    width: 50vw;
    height: auto;
    top: calc(var(--header-height) + var(--space-md));
    left: var(--space-xl);
    transform: none;
  }
}

/* Планшеты и мобильные — ГОРИЗОНТАЛЬНАЯ ориентация (landscape) */
@media (max-width: 1024px) and (orientation: landscape) {
  .side-menu {
    width: 25vw;
    height: auto;
    top: calc(var(--header-height) + var(--space-md));
    left: var(--space-xl);
    transform: none;
  }
}

/* Мобильные вертикально (до 768px portrait) */
@media (max-width: 768px) and (orientation: portrait) {
  .side-menu {
    width: 50vw;
    height: auto;
    top: calc(var(--header-height) + var(--space-sm));
    left: var(--space-md);
    transform: none;
  }
}

/* Мобильные горизонтально (до 768px landscape) */
@media (max-width: 768px) and (orientation: landscape) {
  .side-menu {
    width: 25vw;
    height: auto;
    top: calc(var(--header-height) + var(--space-sm));
    left: var(--space-md);
    transform: none;
  }
}