/* ============================================================
   RESPONSIVE.CSS — медиа-запросы
   ============================================================ */

/* ============================================================
   Планшеты и меньше (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --container-pad: 20px;
  }

  .tile {
    width: 240px;
    height: 320px;
    padding: 24px 20px;
  }

  .tile__icon {
    width: 56px;
    height: 56px;
  }

  .tile__title {
    font-size: 19px;
  }

  .calc-layout {
    grid-template-columns: 1fr;
  }

  .calc-side {
    position: static;
  }
}

/* ============================================================
   Малые планшеты (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --header-h: 62px;
    --container-pad: 16px;
  }

  .site-header__typed,
  .site-header__cursor,
  .site-header__static {
    font-size: 18px;
    letter-spacing: 2px;
  }

  .site-header__logo {
    width: 38px;
    height: 38px;
  }

  .home__subtitle {
    margin-bottom: 32px;
  }

  .home__tiles {
    gap: 20px;
  }

  .tile {
    width: 100%;
    max-width: 380px;
    height: auto;
    min-height: 240px;
    padding: 22px 18px;
  }

  .tile__icon {
    width: 48px;
    height: 48px;
  }

  .tile__title {
    font-size: 18px;
  }

  .main-content {
    padding: 24px 0 40px;
  }

  .card {
    padding: 18px;
  }

  .phone-frame {
    width: 260px;
    height: 500px;
  }

  .browser-frame__body {
    padding: 16px;
    min-height: 320px;
  }

  .modal__actions {
    grid-template-columns: 1fr;
  }

  .about__cards {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Телефоны (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --header-h: 58px;
    --footer-h: 56px;
    --container-pad: 14px;
  }

  body {
    font-size: 14px;
  }

  .site-header__brand {
    gap: 10px;
  }

  .site-header__logo {
    width: 34px;
    height: 34px;
  }

  .site-header__typed,
  .site-header__cursor,
  .site-header__static {
    font-size: 16px;
    letter-spacing: 2px;
  }

  .site-footer__socials {
    gap: 14px;
  }

  .site-footer__link svg {
    width: 20px;
    height: 20px;
  }

  .home__title {
    font-size: 22px;
  }

  .home__subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .tile {
    min-height: 220px;
    padding: 20px 16px;
    gap: 12px;
  }

  .tile__icon {
    width: 44px;
    height: 44px;
  }

  .tile__title {
    font-size: 17px;
  }

  .tile__subtitle {
    font-size: 13px;
  }

  .phone-frame {
    width: 100%;
    max-width: 280px;
    height: 480px;
  }

  .calc-budget__value {
    font-size: 24px;
  }

  /* ============================================================
     Мобильные улучшения — тач-подсветка
     ============================================================ */

  /* Тактильный отклик при тапе */
  .tile:active,
  .card--hover:active,
  .chip:active,
  .calc-option:active,
  .calc-feature:active,
  .calc-tab:active,
  .btn:active,
  .lang-btn:active,
  .site-footer__link:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }

  /* Карточки — при тапе показывают акцентную рамку */
  .tile:active {
    border-color: var(--tile-accent, var(--accent-cyan));
    box-shadow: 0 0 30px 2px rgba(var(--tile-accent-rgb, 0, 229, 255), 0.3);
  }

  /* Чипы — при тапе */
  .chip:active {
    border-color: var(--chip-accent, var(--accent-cyan));
    background: rgba(var(--chip-accent-rgb, 0, 229, 255), 0.15);
  }

  /* Опции калькулятора — при тапе */
  .calc-option:active,
  .calc-feature:active {
    border-color: var(--accent-cyan);
    background: rgba(0, 229, 255, 0.08);
  }

  /* Убираем синюю подсветку ссылок на iOS Safari */
  a,
  button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  /* Но добавляем свою кастомную */
  .btn:active {
    filter: brightness(0.9);
  }

  /* Активные состояния — усиленные */
  .calc-option.is-active,
  .calc-feature.is-active {
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
  }

  /* Кнопка срочности — при тапе */
  .calc-urgent:active {
    border-color: var(--accent-amber);
    background: linear-gradient(
      135deg,
      rgba(251, 191, 36, 0.15),
      rgba(251, 191, 36, 0.05)
    );
  }

  /* Футер-кнопки */
  .site-footer__link:active {
    transform: scale(0.92);
    border-color: currentColor;
  }
}