/* ============================================================
   Эффекты для блока Nabiev.NET — главная страница
   Подключение: <link rel="stylesheet" href="director-effects.css">
   ============================================================ */

/* "Дышащее" фото директора — лёгкое покачивание вверх-вниз
   с небольшим увеличением, создаёт эффект живого изображения */
@keyframes photoFloat {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-10px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

.director-photo {
  animation: photoFloat 5s ease-in-out infinite;
}

/* Пульсирующее свечение вокруг кнопки звонка,
   привлекает внимание к основному призыву к действию */
@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 84, 42, 0.35); }
  70%  { box-shadow: 0 0 0 14px rgba(232, 84, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 84, 42, 0); }
}

.call-btn {
  animation: glowPulse 2.2s ease-out infinite;
}

/* ============================================================
   Адаптивность для мобильных устройств
   Инлайн-стили в HTML имеют высокий приоритет, поэтому здесь
   используется !important, чтобы переопределить их на узких
   экранах. Это нужно только для media query — не общий подход.
   ============================================================ */

/* Планшеты в альбомной ориентации: только сужаем отступы,
   строка "фото + текст" ещё умещается нормально */
@media (max-width: 900px) and (min-width: 861px) {
  .nabiev-card {
    max-width: 94% !important;
  }
  .nabiev-text {
    padding: 28px 30px !important;
  }
}

/* Начиная с 860px и уже — переключаем на колонку.
   ВАЖНО: раньше здесь стоял breakpoint 640px, и в промежутке
   640–899px фото (жёстко зафиксированное на 300px) сжимало
   текст в узкую нечитаемую колонку — блок выглядел сломанным.
   Теперь переход в колонку происходит раньше, до того как
   строчная раскладка станет тесной. */
@media (max-width: 860px) {
  .nabiev-card {
    flex-direction: column !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
  .photo-wrap {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 340px !important;
  }
  .director-photo {
    width: 100% !important;
    height: 100% !important;
  }
  .nabiev-text {
    padding: 28px 24px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .nabiev-title {
    font-size: 21px !important;
  }
  .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .call-btn {
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .price-tag {
    text-align: center !important;
  }
}

/* Планшеты вертикально / небольшие экраны */
@media (max-width: 640px) {
  .photo-wrap {
    height: 280px !important;
  }
  .nabiev-text {
    padding: 24px 20px !important;
  }
  .nabiev-title {
    font-size: 20px !important;
  }
  .nabiev-paragraph {
    font-size: 15.5px !important;
  }
  .quote-box {
    padding: 14px 16px !important;
    box-sizing: border-box !important;
  }
  .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .call-btn {
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .price-tag {
    text-align: center !important;
  }
}

/* Совсем маленькие экраны */
@media (max-width: 380px) {
  .photo-wrap {
    height: 220px !important;
  }
  .nabiev-title {
    font-size: 18px !important;
  }
}

/* Страховка от горизонтального overflow на любой ширине —
   картинка и текстовые блоки никогда не должны раздвигать
   контейнер шире окна */
.nabiev-card, .photo-wrap, .nabiev-text {
  max-width: 100%;
  box-sizing: border-box;
}
.director-photo {
  max-width: 100%;
}