/**
 * Исправления для мобильных устройств
 * Фикс CSS масок для iOS Safari и отображения изображений
 */

/* Убираем маску с picture элементов - на iOS не работает */
.exhibitions-img__container picture,
.home-banner-img__item picture,
.format-img picture,
.about-img__top picture,
.about-img__bottom picture {
    -webkit-mask: none !important;
    mask: none !important;
}

/* Применяем маску только к img */
.exhibitions-img__container img {
    -webkit-mask: url(../img/exhibitions-mask.png);
    mask: url(../img/exhibitions-mask.png);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.home-banner-img__item img {
    -webkit-mask: url(../img/banner-mask.png);
    mask: url(../img/banner-mask.png);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.format-img img {
    -webkit-mask: url(../img/exhibitions-mask-img.png);
    mask: url(../img/exhibitions-mask-img.png);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Показываем баннер на планшетах (700-1350px) - он был скрыт */
@media screen and (min-width: 700px) and (max-width: 1350px) {
    .exhibitions-img,
    .home-banner-img {
        display: flex !important;
        width: 100% !important;
        height: 50vh !important;
    }
}

/* Убираем маску на мобильных для лучшей совместимости */
@media screen and (max-width: 768px) {
    .exhibitions-img__container img,
    .home-banner-img__item img,
    .format-img img {
        -webkit-mask: none !important;
        mask: none !important;
        border-radius: 8px;
    }
}

/* Фикс для карточек выставок на мобильных */
.exhibitions-block__img {
    display: flex !important;
    overflow: hidden;
}

.exhibitions-block__img picture {
    display: block;
    width: 100%;
    height: 100%;
}

.exhibitions-block__img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Фиксы для iOS Safari */
@supports (-webkit-touch-callout: none) {
    /* iOS specific */
    .exhibitions-block__img img,
    .home-banner-img__item img,
    .exhibitions-img__container img {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Переключение стендов */
.stands__img picture[data-stand] {
    display: none;
}

.stands__img picture[data-stand].active {
    display: block;
}

/* Стили для полей даты фильтра */
.filter-date {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.filter-date .date-input {
    flex: 1;
    padding: 15px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    min-width: 0;
}

.filter-date .date-input:focus {
    outline: none;
    border-color: #ed770b;
}

.filter-date__label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #ed770b;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.filter-date__label svg {
    fill: #fff;
    width: 20px;
    height: 20px;
}

.filter-date__label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.filter-date__label:hover {
    background: #d6680a;
}

.filter-date__label:active {
    background: #c45f09;
}