/* ===========================================
   ANNASTAR LANDING — МЕДИА-ЗАПРОСЫ
   =========================================== */

/* --- TABLET: ≤ 1024px --- */
@media (max-width: 1024px) {
  .hero__content { align-items: center; text-align: center; }
  .hero__subtitle { max-width: 100%; }
  .hero__title { max-width: 100%; }

  .about__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about__photo {
    max-width: 320px;
    margin: 0 auto;
  }
  .about__facts li { padding-left: 0; }
  .about__facts li::before { display: none; }

  .atwork__inner { grid-template-columns: 1fr; gap: 40px; }
  .atwork__title { text-align: center; }
  .atwork__photo { max-width: 480px; margin: 0 auto; }

  /* Catalog — 2 колонки на планшете */
  .catalog__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* --- MOBILE: ≤ 768px --- */
@media (max-width: 768px) {
  :root { --container-px: 16px; }

  /* Hero */
  .hero__content { padding: 80px 16px; gap: 8px; }
  .hero__btns { flex-direction: column; }
  .hero__btns .btn { width: 100%; text-align: center; }

  /* Artist at work */
  .atwork { padding: 64px 0; }

  /* About */
  .about { padding: 64px 0; }

  /* Commission */
  .commission__steps { grid-template-columns: 1fr 1fr; gap: 20px; }
  .commission__bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
  .commission__info { gap: 24px; }

  /* Reviews */
  .reviews__grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

  /* Order dark */
  .order__inner { grid-template-columns: 1fr; }
  .order__left  { padding: 48px 24px 32px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .order__right { padding: 32px 24px 48px; }
  .order__stats { gap: 20px; }


  /* Catalog */
  .catalog { padding: 64px 0; }
  .catalog__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .work-card { margin-bottom: 12px; }
  .catalog__filters { gap: 8px; }
  .filter-btn { padding: 6px 14px; font-size: 13px; }

  /* Mockups */
  .mockups { padding: 64px 0; }
  .mockups__slide { flex: 0 0 88%; max-width: 88%; }
  .mockups__arrow--prev { left: 8px; }
  .mockups__arrow--next { right: 8px; }

  /* Modal */
  .modal__grid { grid-template-columns: 1fr !important; }
  .modal__content { padding: 24px 20px; width: 95%; }
  .modal__grid img { max-height: 260px; object-fit: contain; }

  /* Try on */
  .tryon { padding: 64px 0; }
  .tryon__panels { grid-template-columns: 1fr; gap: 24px; }
  .tryon__works  { max-height: 200px; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .tryon__upload { height: 220px; }
  .tryon__editor { grid-template-columns: 1fr; }
  .tryon__sidebar { position: static; }
  .tryon__start-row { flex-direction: column; gap: 12px; }

  /* Quiz */
  .quiz { padding: 64px 0; }
  .quiz__options { grid-template-columns: 1fr; }
  .quiz__nav { flex-direction: column-reverse; align-items: stretch; }
  .quiz__btn-next { width: 100%; }
  .quiz__btn-back { text-align: center; }

  /* Order */
  .order { padding: 64px 0; }

  /* Footer */
  .footer__inner { flex-direction: column; gap: 16px; text-align: center; }

  /* Modal */
  .modal__content { padding: 24px 20px; width: 95%; }

  /* Work card */
  .work-card__footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* --- SMALL MOBILE: ≤ 480px --- */
@media (max-width: 480px) {
  .section-title { margin-bottom: 28px; }
  .commission__steps { grid-template-columns: 1fr; }
  .reviews__grid { grid-template-columns: 1fr; }

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

  .quiz__result-cards { grid-template-columns: 1fr; }

  .hero__title { font-size: 28px; }

  .btn { padding: 12px 24px; font-size: 15px; }
}

/* --- HOVER: touch-устройства --- */
@media (hover: none) {
  .work-card:hover { transform: none; }
  .work-card:hover .work-card__img img { transform: none; }
}

/* --- НОВЫЕ СЕКЦИИ: ≤ 768px --- */
@media (max-width: 768px) {
  .interior-cta__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .interior-cta__inner .btn { width: 100%; text-align: center; }
  .b2b__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .b2b__inner .btn { width: 100%; text-align: center; }
  .delivery-table__row { grid-template-columns: 90px 1fr; gap: 8px; }
  .footer__contacts { gap: 12px; }
  .promo-banner__inner { flex-direction: row; }

  .hero__contacts { gap: 8px; }
  .hero__contact-btn { font-size: 12px; padding: 7px 12px; }

  .quicknav__link { padding: 12px 14px; font-size: 12px; }
}

/* --- PREFER REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}