/* ====== 📱 УНИВЕРСАЛЬНАЯ МОБИЛЬНАЯ АДАПТАЦИЯ (Готовое решение) ====== */

/* Базовые настройки для всех мобильных устройств */
@media (max-width: 768px) {
    /* 1. Шрифты — читаемые */
    html {
        font-size: 15px;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: calc(1.1rem + 0.3vw);
        line-height: 1.25;
        margin: 1em 0 0.6em;
    }

    /* 2. Отступы у секций — меньше */
    section,
    .section,
    .hero-section,
    .products-section,
    .categories-section,
    .about-section,
    .certificates-section,
    .contact-section,
    .gallery-section {
        padding: 60px 0 40px;
    }

    /* 3. Контейнеры — с отступами по бокам */
    .container,
    .hero-container,
    .section-header,
    .features-grid,
    .products-grid,
    .categories-grid,
    .certificates-grid,
    .gallery-grid,
    .contact-content {
        max-width: 100%;
        padding: 0 16px;
        margin: 0 auto;
    }

    /* 4. Все сетки — 2 колонки на мобильных */
    .features-grid,
    .products-grid,
    .categories-grid,
    .certificates-grid,
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* 5. Настройка карточек */
    .feature-card,
    .product-card,
    .category-card,
    .cert-item,
    .gallery-item {
        padding: 20px 12px;
        text-align: center;
    }

    .feature-icon-wrapper,
    .product-img-wrap,
    .category-icon,
    .cert-image-wrapper {
        width: 60px;
        height: 60px;
        margin: 0 auto 12px;
    }

    .feature-icon,
    .product-img,
    .category-icon i,
    .cert-img {
        width: 40px;
        height: 40px;
        max-width: 100%;
        object-fit: contain;
    }

    .feature-label,
    .product-card h3,
    .category-card h3,
    .cert-name {
        font-size: 1.1rem;
        line-height: 1.4;
    }

    /* 6. Убираем hover-эффекты — они не работают на сенсоре */
    .feature-card:hover,
    .product-card:hover,
    .category-card:hover,
    .cert-item:hover {
        transform: none;
        box-shadow: none;
    }

    /* 7. Герой-секция */
    .hero-section {
        padding: 80px 0 50px;
        min-height: auto;
        background-attachment: scroll;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .hero-main-title {
        font-size: 1.8rem;
    }

    .hero-main-desc {
        font-size: 1rem;
        padding: 15px;
    }

    .hero-social-links {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .hero-social-links a {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        text-align: center;
    }

    /* 8. Блок "не содержат" */
    .features-title {
        font-size: 2.1rem;
        margin-bottom: 40px;
    }

    .features-emphasis {
        font-size: 1rem;
        padding: 4px 10px;
        border-radius: 8px;
    }

    /* 9. Контакты */
    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .info-title,
    .form-title {
        text-align: center;
    }

    .contact-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }

    .contact-icon-wrapper {
        width: 50px;
        height: 50px;
        margin-bottom: 5px;
    }

    .contact-icon {
        font-size: 1.5rem;
    }

    .contact-item-title {
        font-size: 1.2rem;
    }

    .contact-item-text {
        font-size: 1rem;
    }

    /* 10. Форма */
    .form-input,
    .form-textarea {
        font-size: 1rem;
        padding: 12px;
    }

    .form-button {
        width: 100%;
        font-size: 1rem;
        padding: 13px;
    }

    /* 11. Сертификаты */
    .certificates-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cert-image-wrapper {
        height: 160px;
    }

    .cert-desc {
        font-size: 0.9rem;
    }

    /* 12. Галерея */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .gallery-item img {
        height: 180px;
    }

    /* 13. Подвал */
    footer {
        padding: 30px 16px;
        font-size: 0.95rem;
    }

    .footer-logo {
        margin-bottom: 20px;
    }

    .footer-links {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

/* ====== 📱 СМАРТФОНЫ (до 480px) — ещё сильнее упрощаем ====== */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.4rem; }

    section, .section {
        padding: 50px 0 30px;
    }

    /* Все сетки — 2 колонки, но с меньшими отступами */
    .features-grid,
    .products-grid,
    .categories-grid,
    .certificates-grid,
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 0 12px;
    }

    /* Карточки */
    .feature-icon-wrapper,
    .product-img-wrap,
    .cert-image-wrapper {
        width: 50px;
        height: 50px;
    }

    .feature-icon,
    .product-img,
    .cert-img {
        width: 36px;
        height: 36px;
    }

    .feature-label,
    .product-card h3,
    .cert-name {
        font-size: 1.05rem;
    }

    /* Герой */
    .hero-title {
        font-size: 2.4rem;
    }

    .hero-main-title {
        font-size: 1.6rem;
    }

    /* Контакты */
    .contact-icon-wrapper {
        width: 45px;
        height: 45px;
    }

    .contact-icon {
        font-size: 1.3rem;
    }

    .contact-item-title {
        font-size: 1.1rem;
    }

    /* Форма */
    .form-button {
        font-size: 1.05rem;
        padding: 14px;
    }

    /* Подвал */
    footer {
        font-size: 0.9rem;
        padding: 20px 12px;
    }

    .footer-links {
        gap: 12px;
    }
}

/* ====== 🚫 Запрет горизонтального скролла ====== */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ====== ✅ Улучшения для сенсорных экранов ====== */
button, a, .product-card, .category-card, .cert-item {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

/* Увеличиваем кликабельную область */
.feature-card,
.product-card,
.category-card,
.cert-item {
    min-height: 120px;
}


body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}