/* --- ПАЛИТРА И ПЕРЕМЕННЫЕ --- Playfair Display */
:root {
    --bg-sand: #EFECE1;    
    --dark-brown: #332315; 
    --olive: #4E5941;      
    --red: #a80019;       
    --text-dark: #2A2A2A;  
    --white: #FFFFFF;
    --gold: #d4a373;
    --serif: 'Manrope', serif;
    --sans: 'Manrope', sans-serif;
    --transition: all 0.4s ease;
}

/* Принудительное применение шрифтов для контента номера */
.room-single-wrapper * { font-family: var(--sans); }
.room-single-wrapper h1, .room-single-wrapper h2, .room-single-wrapper h3, .room-single-wrapper h4, .section-title { font-family: var(--serif) !important; }

/* КНОПКИ */
.room-single-wrapper .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 35px; background: var(--dark-brown); color: var(--white); text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: 1px; border: none; cursor: pointer; transition: var(--transition); text-align: center; border-radius: 4px; text-decoration: none; }
.room-single-wrapper .btn:hover { background: var(--red); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(168,0,25,0.2); color: var(--white); }
.room-single-wrapper .btn-gold { background: var(--gold); color: var(--dark-brown); }
.room-single-wrapper .btn-gold:hover { background: var(--red); color: var(--white); }
.room-single-wrapper .btn-outline { background: transparent; border: 2px solid var(--dark-brown); color: var(--dark-brown); padding: 16px 33px; }
.room-single-wrapper .btn-outline:hover { background: var(--red); border-color: var(--red); color: var(--white); }

/* ОБЩИЕ */
.room-single-wrapper .container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.room-single-wrapper .section-title { font-size: clamp(28px, 4vw, 42px); margin-bottom: 20px; text-transform: uppercase; color: var(--dark-brown); }
.room-single-wrapper .img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; background: linear-gradient(45deg, #1f271b, #3a4732); color: rgba(255,255,255,0.4); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; transition: transform 0.6s ease; }

/* 1. HERO */
.room-hero { position: relative; height: 65vh; min-height: 500px; display: flex; align-items: center; justify-content: center; text-align: center; }
.room-hero-bg { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center; }
.room-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.2) 50%, rgba(0, 0, 0, 0.6) 100%); }
.room-hero-content { position: relative; z-index: 3; color: var(--white); max-width: 900px; 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; }
.breadcrumbs a { color: var(--white); transition: var(--transition); text-decoration: none; }
.breadcrumbs a:hover { color: var(--red); }
.breadcrumbs span { margin: 0 10px; opacity: 0.5; }
.room-hero h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.1; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; }
.room-hero p { font-size: clamp(16px, 2vw, 18px); line-height: 1.6; font-weight: 500; opacity: 0.9; max-width: 700px; margin: 0 auto; }

/* ПЛАШКА */
.specs-card-wrapper { padding: 0 20px; margin-top: -50px; position: relative; z-index: 10; }
.specs-card { max-width: 900px; margin: 0 auto; background: var(--white); border-radius: 8px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); display: flex; justify-content: space-around; padding: 30px 20px; }
.spec-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.spec-item span { font-family: var(--sans) !important; font-size: 38px; font-weight: 800; color: var(--dark-brown); line-height: 1; margin-bottom: 8px; letter-spacing: -1px; }
.spec-item small { font-size: 11px; text-transform: uppercase; font-weight: 700; color: var(--text-dark); opacity: 0.6; letter-spacing: 1px; }

/* 2. ОПИСАНИЕ И УДОБСТВА */
.room-details { padding: 80px 0 120px; }
.layout-split { display: grid; grid-template-columns: 2fr 1.2fr; gap: 60px; align-items: start; }
.detail-text p { font-size: 16px; color: var(--text-dark); margin-bottom: 20px; line-height: 1.8; opacity: 0.9; font-weight: 500; }
.amenities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 40px; }
.amenity-card { background: var(--bg-sand); padding: 20px; border-radius: 6px; display: flex; align-items: center; gap: 15px; transition: var(--transition); border-left: 3px solid transparent; }
.amenity-card:hover { transform: translateY(-3px); background: var(--white); box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-left-color: var(--red); }
.amenity-card i { font-size: 20px; color: var(--olive); width: 24px; text-align: center; }
.amenity-card span { font-weight: 600; font-size: 14px; color: var(--dark-brown); }

/* STICKY БРОНЬ */
.sticky-book { position: sticky; top: 120px; background: var(--white); padding: 40px; text-align: center; border-radius: 8px; box-shadow: 0 15px 40px rgba(0,0,0,0.05); border-top: 4px solid var(--gold); }
.sticky-book h4 { font-size: 26px; margin-bottom: 15px; color: var(--dark-brown); }
.sticky-book p { font-size: 14px; font-weight: 500; color: var(--text-dark); opacity: 0.8; margin-bottom: 25px; line-height: 1.6; }
.price-tag { margin-bottom: 30px; padding: 25px 20px; background: var(--bg-sand); border-radius: 8px; }
.price-tag span { display: block; font-size: 11px; text-transform: uppercase; font-weight: 700; color: var(--text-dark); opacity: 0.6; letter-spacing: 1px; margin-bottom: 5px; }
.price-tag strong { display: block; font-family: var(--sans) !important; font-size: 36px; font-weight: 800; color: var(--red); line-height: 1; margin-bottom: 5px; letter-spacing: -1px; }
.price-tag small { font-size: 14px; color: var(--text-dark); font-weight: 600; opacity: 0.7; }
.sticky-book .btn { width: 100%; margin-bottom: 15px; }
.check-in-info { margin-top: 25px; font-size: 13px; font-weight: 600; color: var(--text-dark); opacity: 0.7; display: flex; align-items: center; justify-content: center; gap: 8px; }
.check-in-info i { color: var(--gold); font-size: 16px; }

/* 3. ВКЛЮЧЕНО */
.included-banner { background: var(--dark-brown); color: var(--white); padding: 80px 0; }
.included-inner { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.included-text { max-width: 500px; }
.included-text h2 { font-size: 36px; color: var(--gold); margin-bottom: 15px; line-height: 1.2; }
.included-text p { font-size: 16px; font-weight: 400; line-height: 1.7; opacity: 0.9; }
.included-icons { display: flex; gap: 50px; flex-wrap: wrap; }
.inc-icon { text-align: center; display: flex; flex-direction: column; align-items: center; }
.inc-icon i { font-size: 36px; color: var(--gold); margin-bottom: 15px; }
.inc-icon span { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }

/* 4. ГАЛЕРЕЯ */
.gallery-section { padding: 120px 0; background: var(--bg-sand); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px; gap: 15px; }
.gal-item { border-radius: 6px; overflow: hidden; position: relative; }
.gal-item:hover img { transform: scale(1.05); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; display: block; }
.g-large { grid-column: span 2; grid-row: span 2; }
.center-btn { text-align: center; margin-top: 40px; }

/* --- ИСПРАВЛЕНИЕ ДЛЯ ИКОНОК --- */
i.fa-solid, i.fa-regular, i.fa-brands, i[class*="fa-"] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* АДАПТИВ */
@media(max-width: 1024px) {
    .layout-split { grid-template-columns: 1fr; gap: 50px; }
    .sticky-book { position: static; }
    .included-inner { flex-direction: column; text-align: center; }
}
@media(max-width: 768px) {
    .room-single-wrapper .container { padding: 0 15px; }
    .room-hero { height: auto; padding: 160px 0 80px; }
    .specs-card-wrapper { margin-top: -30px; }
    .specs-card { flex-direction: column; gap: 25px; padding: 30px; }
    .room-details { padding: 60px 0; }
    .amenities-grid { grid-template-columns: 1fr; }
    .included-banner { padding: 60px 0; }
    .included-icons { flex-direction: column; gap: 30px; align-items: center; }
    .gallery-section { padding: 60px 0; }
    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 250px; }
    .g-large { grid-column: span 1; grid-row: span 1; }
}

/* ==========================================================================
   1. ГРАДИЕНТ ДЛЯ ГЛАВНОГО ЭКРАНА (HERO)
   ========================================================================== */
.room-hero {
    position: relative; /* Обязательно для позиционирования градиента */
}

/* Сам градиент от низа к верху */
.room-hero::after {
    content: '';
    position: absolute;
    bottom: 0; 
    left: 0; 
    right: 0;
    height: 70%; /* Градиент занимает 70% высоты снизу */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none; /* Чтобы не мешал кликам */
}

.room-hero-bg {
    z-index: 0;
}

.room-hero-content {
    position: relative;
    z-index: 2; /* Текст поверх градиента */
}

/* ==========================================================================
   2. МОБИЛЬНАЯ АДАПТАЦИЯ (до 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* Базовый шрифт текста уменьшаем до 14px */
    .room-single-wrapper p,
    .room-single-wrapper .detail-text {
        font-size: 14px !important;
        line-height: 1.5;
    }

    /* --- ХАРАКТЕРИСТИКИ (В ОДИН РЯД) --- */
    .specs-card {
        display: flex;
        flex-direction: row; /* Принудительно в ряд */
        justify-content: space-between;
        align-items: flex-start
        padding: 12px 15px;
        gap: 10px;
        
    }
    .spec-item {
        flex: 1;
        text-align: center;
        padding: 0;
        border: none;
    }
    .spec-item span {
        font-size: 25px;
        display: block;
        margin-bottom: 10px;
    }
    .spec-item small {
        font-size: 11px; /* Уменьшаем описание, чтобы влезло */
        line-height: 1.1;
        display: block;
    }

    /* --- УДОБСТВА (КОМПАКТНО) --- */
    .amenities-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
        gap: 8px; /* Сокращаем отступы */
        margin-top: 20px;
    }
    .amenity-card {
        padding: 10px;
        font-size: 12px; /* Мелкий шрифт для компактности */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .amenity-card i {
        font-size: 20px; /* Уменьшаем иконки */
        margin-bottom: 6px;
    }

    /* --- ЧТО ВКЛЮЧЕНО (КОМПАКТНО, В РЯД/СЕТКУ) --- */
    .included-inner {
        padding: 30px 15px;
    }
    .included-icons {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на мобильном */
        gap: 10px;
        margin-top: 20px;
    }
    .inc-icon {
        padding: 10px;
        font-size: 12px;
        text-align: center;
    }
    .inc-icon i {
        font-size: 22px;
        margin-bottom: 5px;
    }

    /* --- ГАЛЕРЕЯ (2 КОЛОНКИ, ПРОВЕРКА ОТСТУПОВ) --- */
    .gallery-section {
        padding: 40px 15px; /* Аккуратные отступы по краям */
    }
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important; /* Строго 2 колонки */
        gap: 8px; /* Минимальный отступ между фото */
    }
    .gal-item {
        border-radius: 8px; /* Чуть скругляем углы на мобилке для красоты */
        overflow: hidden;
    }
    /* Если у вас есть широкие картинки, на мобилке делаем их обычными */
    .gal-item.g-large {
        grid-column: auto;
        grid-row: auto;
    }
    .real-img {
        height: 120px; /* Фиксируем высоту, чтобы сетка не прыгала */
        object-fit: cover;
    }

    /* Отступы кнопок */
    .center-btn {
        margin-top: 25px;
    }
    .center-btn .btn {
        width: 100% !important; /* На мобилке кнопка на всю ширину смотрится лучше */
        text-align: center;
    }
}