/* ========================================
   15. Медиазапросы (Responsive Design)
======================================== */

/* < lg (tablet): до 991.98px */
@media (max-width: 991.98px) {
    .footer-links {
        justify-content: center;
        margin-top: var(--space-5);
    }
}

/* ========================================
   Mobile blur стратегия (Этап 7.3)
   На мобильных тяжёлые glass-поверхности переходят на --glass-blur-sm
   или полностью отключают blur (fullscreen overlay, booking modal).
   prefers-reduced-data дополнительно снимается в sidebar.css.
======================================== */
@media (max-width: 767.98px) {
    /* Page-header цена: уменьшаем blur */
    .page-header-price {
        backdrop-filter: var(--glass-blur-sm);
        -webkit-backdrop-filter: var(--glass-blur-sm);
    }

    /* Модалка бронирования: убираем blur → solid background */
    #bookingModal .booking-modal-content {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--white);
    }

    /* Лайтбокс: fullscreen overlay без blur (производительность) */
    #custom-lightbox .lb-backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Форма бронирования на главной: уменьшаем blur */
    .booking-form-wrapper {
        backdrop-filter: var(--glass-blur-sm);
        -webkit-backdrop-filter: var(--glass-blur-sm);
    }
}

/* prefers-reduced-data: полностью убираем blur (экономия трафика + CPU) */
@media (prefers-reduced-data: reduce) {
    .page-header-price,
    #bookingModal .booking-modal-content,
    .booking-form-wrapper {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #custom-lightbox .lb-backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* < md (mobile landscape / small tablet): до 767.98px */
@media (max-width: 767.98px) {
    .hero-section {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .hero-slide {
        position: relative;
        min-height: 100vh;
        min-height: 100dvh;
        padding: var(--hero-padding-top-mobile) 0 var(--space-7);
        justify-content: flex-start;
        gap: var(--space-5);
    }
    
    .hero-slide .container {
        flex: 0 0 auto;
        padding-top: 0.75rem;
    }

    .hero-content {
        padding-top: 0.25rem;
    }
    
    .hero-subtitle {
        font-size: var(--text-base);
        letter-spacing: 0.08em;
        margin-bottom: 1rem;
    }

    .hero-actions--with-weather {
        max-width: min(100%, 22rem);
    }
    
    .hero-scroll-hint {
        display: flex;
        padding: 0.5rem 0;
        font-size: var(--text-sm);
        opacity: 1;
    }

    .hero-scroll-hint-arrow {
        font-size: var(--text-lg);
    }
    
    .booking-widget {
        margin-top: var(--space-3);
        padding: 0 var(--space-4);
    }
    
    .booking-form-wrapper {
        padding: var(--space-5);
    }
    
    /* Логотип на мобильных */
    .logo-icon {
        width: 38px;
        height: 38px;
    }
    
    .sun-rays {
        width: 38px;
        height: 38px;
    }
    
    .sun-center {
        width: 16px;
        height: 16px;
    }
    
    .ray {
        width: 2px;
        height: 10px;
    }
    
    /* Обновляем позиционирование для меньшего размера */
    .ray:nth-child(1)  { transform: translate(-50%, -100%) rotate(0deg) scaleY(var(--ray-scale)); }
    .ray:nth-child(2)  { transform: translate(-50%, -100%) rotate(30deg) scaleY(var(--ray-scale)); }
    .ray:nth-child(3)  { transform: translate(-50%, -100%) rotate(60deg) scaleY(var(--ray-scale)); }
    .ray:nth-child(4)  { transform: translate(-50%, -100%) rotate(90deg) scaleY(var(--ray-scale)); }
    .ray:nth-child(5)  { transform: translate(-50%, -100%) rotate(120deg) scaleY(var(--ray-scale)); }
    .ray:nth-child(6)  { transform: translate(-50%, -100%) rotate(150deg) scaleY(var(--ray-scale)); }
    .ray:nth-child(7)  { transform: translate(-50%, -100%) rotate(180deg) scaleY(var(--ray-scale)); }
    .ray:nth-child(8)  { transform: translate(-50%, -100%) rotate(210deg) scaleY(var(--ray-scale)); }
    .ray:nth-child(9)  { transform: translate(-50%, -100%) rotate(240deg) scaleY(var(--ray-scale)); }
    .ray:nth-child(10) { transform: translate(-50%, -100%) rotate(270deg) scaleY(var(--ray-scale)); }
    .ray:nth-child(11) { transform: translate(-50%, -100%) rotate(300deg) scaleY(var(--ray-scale)); }
    .ray:nth-child(12) { transform: translate(-50%, -100%) rotate(330deg) scaleY(var(--ray-scale)); }
    
    .ray:nth-child(1),
    .ray:nth-child(4),
    .ray:nth-child(7),
    .ray:nth-child(10) {
        height: 14px;
    }
    
    .ray:nth-child(2),
    .ray:nth-child(5),
    .ray:nth-child(8),
    .ray:nth-child(11) {
        height: 12px;
    }
    
    .ray:nth-child(3),
    .ray:nth-child(6),
    .ray:nth-child(9),
    .ray:nth-child(12) {
        height: 10px;
    }
    
    .logo-main {
        font-size: var(--logo-main-size-compact);
        letter-spacing: 0.27em;
    }

    .logo-sub {
        font-size: var(--text-3xs);
        letter-spacing: var(--logo-sub-letter-spacing-compact);
    }
    
    .hotels-section {
        padding-top: var(--section-padding-top-mobile);
    }
    
    .hotel-card-horizontal-image {
        min-height: var(--card-image-height-horizontal-mobile);
    }
    
    /* Зоны нажатия для касаний: не менее ~44px по высоте (рекомендация WCAG/мобильный UX) */
    .btn {
        min-height: 44px;
        padding-top: var(--btn-touch-padding-y);
        padding-bottom: var(--btn-touch-padding-y);
    }
    
    .booking-form .form-control,
    .booking-form .form-select,
    .booking-sidebar-form .form-control,
    .booking-sidebar-form .form-select,
    #bookingModal .booking-modal-body .form-control,
    #bookingModal .booking-modal-body .form-select {
        min-height: 44px;
        padding: var(--input-padding-y) var(--input-padding-x);
    }
    
    #mainNav .navbar-collapse .navbar-nav .nav-link {
        min-height: 44px;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        display: inline-flex;
        align-items: center;
    }
}

/* < sm (mobile portrait): до 575.98px */
@media (max-width: 575.98px) {
    .navbar-brand {
        font-size: var(--text-xl);
    }
    
    .logo-sub {
        display: none;
    }
    
    
    .footer-links {
        flex-direction: column;
        gap: var(--space-5);
        text-align: center;
    }
    
    /* На мобильных — чуть больше вертикального зазора между карточками */
    .hotels-section .row.g-4,
    .rooms-section .row.g-4,
    .hotels-listing .row.g-4,
    .rooms-listing .row.g-4,
    .features-section .row.g-4,
    .similar-rooms .row.g-4,
    .available-rooms .row.g-4 {
        --bs-gutter-y: var(--listing-gap-mobile);
    }
    
}

/* ========================================
   12. Горизонтальный скролл для "Похожие номера" на мобильных
======================================== */
@media (max-width: 767.98px) {
    /* Контейнер карусели — обрезает вылезающие отрицательные марджины .row */
    .similar-rooms {
        overflow-x: hidden;
    }

    /* Превращаем вертикальную сетку карточек в горизонтальный скролл */
    .similar-rooms .row.g-4 {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
        padding-bottom: var(--space-5); /* Отступ для прокрутки */
        margin-right: calc(-1 * var(--bs-gutter-x, 1.5rem)); /* Компенсация padding контейнера */
        margin-left: calc(-1 * var(--bs-gutter-x, 1.5rem));
        padding-right: var(--bs-gutter-x, 1.5rem);
        padding-left: var(--bs-gutter-x, 1.5rem);
    }
    
    /* Карточки фиксированной ширины с snap points */
    .similar-rooms .row.g-4 > [class*="col-"] {
        flex: 0 0 85%; /* 85% ширины экрана - показываем часть следующей карточки */
        max-width: 85%;
        scroll-snap-align: start;
        scroll-snap-stop: always; /* Останавливаемся точно на карточке */
    }
    
    /* Стилизация scrollbar для WebKit браузеров (Chrome, Safari) */
    .similar-rooms .row.g-4::-webkit-scrollbar {
        height: 4px;
    }
    
    .similar-rooms .row.g-4::-webkit-scrollbar-track {
        background: var(--black-alpha-05);
        border-radius: var(--radius-xs);
    }
    
    .similar-rooms .row.g-4::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: var(--radius-xs);
    }
    
    .similar-rooms .row.g-4::-webkit-scrollbar-thumb:hover {
        background: var(--primary-dark);
    }
}