@charset "UTF-8";

/* Стили для очень маленьких экранов (320px-374px) */
@media (width <= 374px) {
    :root {
        --card-padding: 16px;
        --header-height: 48px;
    }

    .header {
        padding: 0 12px;
    }

    .card-title {
        font-size: 18px;
    }

    .card-address {
        font-size: 13px;
    }

    .card-description {
        font-size: 14px;
    }

    .card-overlay {
        padding: 30px var(--card-padding) var(--card-padding);
    }

    .card-type {
        font-size: 10px;
        padding: 3px 10px;
    }

    .card-stats {
        font-size: 12px;
    }

    .card-button {
        padding: 6px 16px;
        font-size: 13px;
    }

    .card-actions button {
        font-size: 13px;
    }

    .floating-buttons a {
        width: 48px;
        height: 48px;
    }

    .floating-buttons a img {
        width: 22px;
        height: 22px;
    }

    .gallery {
        padding-top: var(--header-height);
        padding-bottom: var(--floating-buttons-height);
    }

    .gallery-card {
        height: 100vh;
    }

    .modal-content {
        padding: 16px 16px 32px;
    }

    .modal-info h2 {
        font-size: 20px;
    }

    .modal-info .address {
        font-size: 13px;
    }
}

/* Стили для маленьких экранов (375px-599px) */
@media (width >= 375px) and (width <= 599px) {
    .card-title {
        font-size: 22px;
    }

    .card-description {
        font-size: 15px;
    }

    .card-overlay {
        padding: 32px var(--card-padding) var(--card-padding);
    }

    .card-actions button span {
        font-size: 13px;
    }
}

/* Стили для средних экранов (600px-767px) */
@media (width >= 600px) and (width <= 767px) {
    .gallery {
        grid-template-columns: 1fr 1fr !important;
        scroll-snap-type: none !important;
        overflow-y: auto !important;
    }

    .gallery-card {
        height: auto !important;
        min-height: 80vh;
        scroll-snap-align: none !important;
        border-radius: var(--border-radius);
        overflow: hidden;
    }

    .card-overlay {
        padding: 30px;
    }
}

/* Стили для больших экранов (768px-1199px) */
@media (width >= 768px) and (width <= 1199px) {
    .gallery {
        grid-template-columns: 1fr 1fr !important;
    }

    .gallery-card {
        height: 100vh !important;
        min-height: 0 !important;
    }

    .card-content {
        justify-content: center;
    }
}

/* Стили для очень больших экранов (1200px+) */
@media (width >= 1200px) {
    .gallery {
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    .gallery-card {
        height: 100vh !important;
        min-height: 0 !important;
    }

    .card-content {
        justify-content: center;
    }
}

/* Оптимизация для мобильных устройств (Touch-интерфейсы) */
@media (hover: none) and (pointer: coarse) {
    .card-button {
        touch-action: manipulation;
    }

    .floating-buttons a {
        touch-action: manipulation;
    }

    button, a {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Улучшенный scroll-snap для мобильных */
@media (width <= 767px) {
    .gallery {
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .gallery-card {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        height: 100vh;
    }
}

/* Скрытие ненужных элементов на мобильных */
@media (width <= 480px) {
    .card-stats span:nth-child(2) {
        display: none;
    }

    .menu {
        width: 100%;
        max-width: 100%;
    }

    .menu-contacts {
        display: none;
    }

    .menu-social {
        flex-direction: column;
        gap: 8px;
    }
}

/* Плотность пикселей (Retina дисплеи) */
@media (resolution >= 2dppx) {
    .card-image {
        image-rendering: -webkit-optimize-contrast;
    }

    .card-image {
        image-rendering: crisp-edges;
    }
}

/* Поворот экрана на мобильных */
@media (orientation: landscape) and (height <= 500px) {
    .gallery {
        padding-top: 56px;
    }

    .card-content {
        max-width: 100%;
    }
}

/* Улучшенная адаптация формы на мобильных */
@media (width <= 480px) {
    #contactForm input,
    #contactForm select,
    #contactForm textarea {
        font-size: 14px;
        padding: 10px;
    }

    #contactForm button {
        font-size: 14px;
        padding: 12px;
    }
}