/* Мобильные стили для Tradycyjna Chata */

/* Общие мобильные настройки */
@media screen and (max-width: 768px) {
    
    /* Типографика */
    body {
        font-size: 14px;
        line-height: 1.5;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    h4 {
        font-size: 1.1rem;
    }
    
    /* Отступы и контейнеры */
    .container {
        padding: 0 1rem;
    }
    
    .section {
        padding: 2rem 0;
    }
    
    /* Header */
    .header-container {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    
    .logo {
        height: 50px;
    }
    
    .nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .nav a {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }
    
    /* Hero секция */
    .hero {
        padding: 3rem 1rem;
        min-height: 400px;
    }
    
    .hero-content h1 {
        font-size: 2rem;
        margin-bottom: 0.8rem;
    }
    
    .hero-content p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    /* Сетки */
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .gallery {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Карточки */
    .card {
        margin-bottom: 1rem;
    }
    
    .card-content {
        padding: 1rem;
    }
    
    .card-image {
        height: 180px;
    }
    
    /* Галерея */
    .gallery-item img {
        height: 200px;
    }
    
    .gallery-overlay {
        position: static;
        transform: none;
        background: rgba(0,0,0,0.8);
        border-radius: 0 0 12px 12px;
    }
    
    /* Формы */
    .form-input,
    .form-textarea {
        padding: 10px 12px;
        font-size: 16px; /* Предотвращает зум на iOS */
    }
    
    .form-textarea {
        height: 100px;
    }
    
    .btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 1rem;
    }
    
    /* Контактная информация */
    .contact-info {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .contact-item {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
    
    /* Социальные сети */
    .social-links {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* Footer */
    .footer {
        padding: 2rem 0 1rem 0;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }
    
    /* Breadcrumbs */
    .breadcrumbs-list {
        flex-wrap: wrap;
        font-size: 0.9rem;
    }
    
    /* Рабочие часы */
    .business-hours {
        padding: 1rem;
    }
    
    .hours-row {
        flex-direction: column;
        text-align: center;
        gap: 0.2rem;
    }
    
    /* Утилиты для мобильных */
    .mobile-hidden {
        display: none;
    }
    
    .mobile-center {
        text-align: center;
    }
    
    .mobile-full-width {
        width: 100%;
    }
}

/* Очень маленькие экраны */
@media screen and (max-width: 480px) {
    
    .container {
        padding: 0 0.5rem;
    }
    
    .hero {
        padding: 2rem 0.5rem;
        min-height: 350px;
    }
    
    .hero-content h1 {
        font-size: 1.75rem;
    }
    
    .nav {
        flex-direction: column;
        width: 100%;
    }
    
    .nav a {
        text-align: center;
        width: 100%;
    }
    
    .card-content {
        padding: 0.8rem;
    }
    
    .contact-info {
        padding: 1rem;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* Более компактные отступы */
    .section {
        padding: 1.5rem 0;
    }
    
    .mb-1 { margin-bottom: 0.8rem; }
    .mb-2 { margin-bottom: 1.5rem; }
    .mb-3 { margin-bottom: 2rem; }
    
    .mt-1 { margin-top: 0.8rem; }
    .mt-2 { margin-top: 1.5rem; }
    .mt-3 { margin-top: 2rem; }
}

/* Горизонтальные планшеты */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    
    .container {
        padding: 0 1.5rem;
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .nav {
        gap: 1.5rem;
    }
}

/* Landscape телефоны */
@media screen and (max-height: 500px) and (orientation: landscape) {
    
    .hero {
        min-height: 300px;
        padding: 2rem 1rem;
    }
    
    .hero-content h1 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .hero-content p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .section {
        padding: 1.5rem 0;
    }
}

/* Touch устройства */
@media (hover: none) and (pointer: coarse) {
    
    /* Увеличиваем области касания */
    .btn,
    .nav a,
    .social-link {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Убираем hover эффекты */
    .card:hover {
        transform: none;
    }
    
    .gallery-item:hover img {
        transform: none;
    }
    
    .gallery-item:hover .gallery-overlay {
        transform: translateY(100%);
    }
    
    /* Всегда показываем overlay на мобильных */
    .gallery-overlay {
        position: static;
        transform: none;
        background: rgba(139, 69, 19, 0.9);
    }
}

/* Высокие DPI экраны */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    
    /* Более четкие границы */
    .card,
    .form-input,
    .form-textarea,
    .btn {
        border-width: 0.5px;
    }
}

/* Accessibility для мобильных */
@media (prefers-reduced-motion: reduce) {
    
    .card,
    .gallery-item img,
    .btn,
    .nav a {
        transition: none;
    }
    
    .fade-in {
        animation: none;
    }
}

/* Темная тема для мобильных */
@media (prefers-color-scheme: dark) {
    
    @media screen and (max-width: 768px) {
        
        .form-input,
        .form-textarea {
            background-color: #2a2a2a;
            border-color: #444;
            color: #fff;
        }
        
        .card {
            background-color: #2a2a2a;
            color: #fff;
        }
        
        .contact-info {
            background-color: #2a2a2a;
            color: #fff;
        }
    }
}