/* ========================================
   BITIRUVCHI LENTALAR - Responsive Styles
   ======================================== */

/* ====== TABLET: 992px ====== */
@media (max-width: 992px) {
  section { padding: 70px 0; }

  /* Header */
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-phone { display: none; }
  .lang-switcher { display: none; }

  /* Hero */
  .hero-stats { gap: 24px; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-img-wrap img { height: 360px; }
  .about-badge-float { bottom: -10px; right: 10px; }

  /* Categories */
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .category-card.wide { grid-column: span 1; }

  /* Products */
  .products-grid { grid-template-columns: repeat(3, 1fr); }

  /* Advantages */
  .advantages-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  /* Catalog */
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-sidebar { position: static; }

  /* Product detail */
  .product-detail-grid { grid-template-columns: 1fr; }
  .product-detail-info { position: static; }

  /* Constructor */
  .constructor-grid { grid-template-columns: 1fr; }
  .constructor-preview { position: static; }

  /* Contacts */
  .contacts-grid { grid-template-columns: 1fr; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-item.tall { grid-row: span 1; aspect-ratio: 4/3; }

  /* Services */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ====== MOBILE: 768px ====== */
@media (max-width: 768px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.6rem !important; }

  .container { padding: 0 16px; }

  /* Hero — center on mobile */
  .hero-content { text-align: center; }
  .hero-badge { display: inline-flex; }
  .hero-title { text-align: center; }
  .hero-desc { text-align: center; }
  .hero-btns { gap: 12px; justify-content: center; flex-direction: column; align-items: center; }
  .hero-btns .btn-gold,
  .hero-btns .btn-outline { width: 100%; justify-content: center; }
  .hero-btn-photos { justify-content: center; }
  .hero-stats { gap: 20px; justify-content: center; }
  .hero-stat .num { font-size: 1.8rem; }
  .hero-stat { text-align: center; }

  /* Products */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .product-actions { flex-direction: column; }

  /* Categories */
  .categories-grid { grid-template-columns: 1fr; }

  /* Advantages */
  .advantages-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .advantage-card { padding: 24px 16px; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  /* CTA */
  .cta-btns { flex-direction: column; align-items: center; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }

  /* Section title */
  .section-title { margin-bottom: 36px; }

  /* Modal */
  .modal-box { padding: 28px 20px; }

  /* Contacts */
  .contact-form { padding: 24px 16px; }

  /* Search */
  .search-bar-wrap input { padding: 14px 52px 14px 18px; font-size: 0.9rem; }

  /* About features */
  .about-features { grid-template-columns: 1fr; }

  /* Breadcrumb */
  .breadcrumb-section { padding: 90px 0 30px; }

  /* Catalog header */
  .catalog-header { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Size/color selectors */
  .size-btns { gap: 6px; }
  .color-swatches { gap: 8px; }
}

/* ====== SMALL MOBILE: 480px ====== */
@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; }
  .advantages-grid { grid-template-columns: 1fr; }
  .hero-stats { flex-direction: column; gap: 14px; }
  .hero-stat { display: flex; align-items: center; gap: 12px; }
  .logo-text { display: none; }
  .about-img-wrap img { height: 260px; }
  .about-badge-float { display: none; }

  .footer-grid { gap: 24px; }
  .site-footer { padding: 50px 0 0; }

  .modal-box h2 { font-size: 1.3rem; }
}