/* ==========================================================================
   КАТАЛОГ НОМЕРОВ (page-rooms.css)
   ========================================================================== */

/* Бронебойный импорт шрифтов */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap');

/* --- ВНУТРЕННИЙ HERO --- */
.inner-hero { position: relative; height: 60vh; min-height: 450px; display: flex; align-items: center; justify-content: center; text-align: center; }
.inner-hero-bg { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center; }
.inner-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 100%); }
.inner-hero-content { position: relative; z-index: 3; color: #fff; max-width: 800px; padding: 0 20px; text-shadow: 0 4px 20px rgba(0,0,0,0.5); margin-top: 50px; }
.breadcrumbs { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 25px; opacity: 0.8; font-weight: 600; font-family: 'Manrope', sans-serif; }
.breadcrumbs a { color: #fff; transition: all 0.3s ease; }
.breadcrumbs a:hover { color: #a80019; }
.breadcrumbs span { margin: 0 10px; opacity: 0.5; }
.inner-hero h1 { font-size: clamp(32px, 5vw, 60px); line-height: 1.1; font-family: 'Playfair Display', serif; text-transform: uppercase; letter-spacing: 2px; margin: 0; }

/* --- ФИЛЬТРЫ --- */
.catalog-section { padding: 80px 0 100px; font-family: 'Manrope', sans-serif; }
.catalog-filters { display: flex; justify-content: center; gap: 15px; margin-bottom: 60px; flex-wrap: wrap; }
.filter-btn { background: transparent; border: 2px solid #332315; padding: 12px 25px; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; text-transform: uppercase; color: #332315; cursor: pointer; border-radius: 30px; transition: all 0.3s ease; letter-spacing: 1px; }
.filter-btn:hover { background: #a80019; color: #fff; border-color: #a80019; }
.filter-btn.active { background: #332315; color: #fff; border-color: #332315; box-shadow: 0 10px 20px rgba(0,0,0,0.1); pointer-events: none; }

/* --- СЕТКА И КАРТОЧКИ --- */
.catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.room-card { display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.05); transition: transform 0.4s ease, box-shadow 0.4s ease; border-top: 4px solid transparent; }
.room-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,0,0,0.1); border-top-color: #a80019; }
.room-card.hide { display: none !important; }
.room-img { height: 350px; position: relative; overflow: hidden; }
.room-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.room-card:hover .room-img img { transform: scale(1.05); }

.room-badge { position: absolute; top: 20px; right: 20px; background: #d4a373; color: #fff; padding: 8px 15px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; z-index: 2; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); letter-spacing: 1px; }
.room-badge i { margin-right: 5px; }

.room-info { padding: 40px; display: flex; flex-direction: column; flex-grow: 1; }
.room-info h3 { font-family: 'Manrope', serif; font-size: 26px; margin-bottom: 25px; color: #332315; }

.room-features { display: flex; gap: 20px; margin-bottom: 25px; color: #2A2A2A; font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 500; flex-wrap: wrap; opacity: 0.9; list-style: none; padding: 0; }
.room-features li { display: flex; align-items: center; gap: 10px; }
.room-features i { color: #4E5941; font-size: 16px; opacity: 0.8; }

.room-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 25px; border-top: 1px solid rgba(0,0,0,0.05); }
.room-price { display: flex; flex-direction: column; }
.room-price span { font-family: 'Manrope', sans-serif; font-size: 11px; color: #2A2A2A; opacity: 0.5; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 3px; }

/* === ИЗМЕНЕН ШРИФТ ДЛЯ ЦЕНЫ НА MANROPE === Playfair Display */
.room-price strong { font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 800; color: #332315; }
.room-price strong small { font-size: 14px; opacity: 0.7; font-weight: 500; }

/* --- CTA БЛОК --- */
.cta-wrapper { padding-bottom: 120px; font-family: 'Manrope', sans-serif; }
.cta-section { display: flex; background: #332315; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
.cta-left { width: 50%; padding: 80px 60px; color: #fff; display: flex; flex-direction: column; justify-content: center; }
.cta-left h2 { font-family: 'Playfair Display', serif; font-size: 42px; margin-bottom: 20px; color: #d4a373; }
.cta-left p { font-size: 16px; font-weight: 400; line-height: 1.7; margin-bottom: 40px; opacity: 0.9; }
.cta-right { width: 50%; position: relative; }
.cta-right img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   АДАПТИВ (Планшеты и Мобильные)
   ========================================================================== */

@media(max-width: 1024px) {
    .catalog-grid { gap: 20px; }
    .cta-section { flex-direction: column; }
    .cta-left, .cta-right { width: 100%; }
    .cta-right { height: 350px; }
}

@media(max-width: 768px) {
    /* --- 1. ВНУТРЕННИЙ HERO --- */
    .inner-hero { 
        height: auto; 
        min-height: auto; 
        padding: 120px 0 50px; /* Убрали лишнюю высоту, оставили аккуратный отступ */
    }
    .inner-hero h1 { 
        font-size: 32px; /* Уменьшили главный заголовок */
    }
    .breadcrumbs { 
        font-size: 10px; 
        margin-bottom: 15px; 
    }

    /* --- 2. ФИЛЬТРЫ И КАТАЛОГ --- */
    .catalog-section { 
        padding: 40px 0 60px; /* Сократили отступы секции */
    }
    .catalog-filters { 
        gap: 8px; /* Кнопки фильтра ближе друг к другу */
        margin-bottom: 30px; 
    }
    .filter-btn { 
        padding: 10px 18px; 
        font-size: 11px; /* Сделали кнопки фильтра компактнее */
    }

    /* --- 3. СЕТКА И КАРТОЧКИ --- */
    .catalog-grid { 
        grid-template-columns: 1fr; 
        gap: 25px; /* Уменьшили дыры между карточками */
    }
    .room-img { 
        height: 220px; /* Фото ниже, чтобы быстрее листалось */
    }
    .room-badge { 
        top: 15px; 
        right: 15px; 
        padding: 6px 12px; 
        font-size: 10px; 
    }
    
    .room-info { 
        padding: 25px 20px; /* Сократили внутренние отступы карточки */
    }
    .room-info h3 { 
        font-size: 22px; 
        margin-bottom: 15px; 
    }
    
    .room-features { 
        font-size: 13px; /* Текст удобств меньше */
        gap: 12px; 
        margin-bottom: 20px; 
    }
    
    .room-bottom { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 15px; 
        padding-top: 15px; 
    }
    .room-price strong { 
        font-size: 20px; /* Цена чуть меньше, но все еще читается отлично */
    }
    .room-bottom .btn { 
        width: 100%; 
        padding: 14px 20px; 
    }

    /* --- 4. CTA БЛОК (ПРИЗЫВ К ДЕЙСТВИЮ) --- */
    .cta-wrapper { 
        padding-bottom: 60px; 
    }
    .cta-left { 
        padding: 40px 20px; 
        text-align: center; 
    }
    .cta-left h2 { 
        font-size: 28px; 
        margin-bottom: 15px; 
    }
    .cta-left p { 
        font-size: 14px; /* Текст компактнее */
        margin-bottom: 25px; 
    }
    
    /* Делаем так, чтобы кнопки внутри CTA на мобилке шли друг под другом с маленьким отступом */
    .cta-left div[style*="display: flex"] { 
        flex-direction: column;
        gap: 10px !important; 
    }
    .cta-left .btn { 
        width: 100%; 
    }
    .cta-right { 
        height: 250px; /* Фото в блоке CTA меньше по высоте */
    }
}