:root {
    --bg-client: #94959A; 
    --bg-dark-vignette: #5e5f62; 
    --accent-yellow: #FFD700;  
    --metal-grey: #F0F0F0;     
    --panel-bg: rgba(43, 43, 43, 0.95); 
    --deep-grey: #1A1A1A;      
}

/* 1. ГЛОБАЛЬНАЯ ЗАЩИТА: запрещаем скролл в бок на уровне браузера */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden; /* Самый важный фикс */
    position: relative;
}

* {
    box-sizing: border-box; /* Чтобы padding не раздувал блоки */
}

body { 
    font-family: 'Roboto Condensed', sans-serif; 
    background-color: var(--bg-client);
    background-image: radial-gradient(circle at center, var(--bg-client) 0%, var(--bg-dark-vignette) 100%);
    background-attachment: fixed;
    color: var(--metal-grey); 
}

.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 20px 10px; /* Уменьшили боковые отступы до минимума */
    width: 100%;
    overflow: hidden; /* Контейнер не дает содержимому вылезти */
}

.back-link { margin-bottom: 20px; }
.back-link a { 
    color: var(--accent-yellow); 
    text-decoration: none; 
    font-weight: bold; 
    text-transform: uppercase; 
    border: 2px solid var(--accent-yellow); 
    padding: 8px 15px; 
    background: var(--deep-grey);
    display: inline-block;
}

h1 { 
    color: var(--accent-yellow); 
    text-transform: uppercase; 
    font-style: italic; 
    font-size: clamp(1.4em, 6vw, 2.2em); 
    margin-bottom: 25px; 
    border-bottom: 3px solid var(--accent-yellow); 
    padding-bottom: 10px; 
    word-break: break-word; /* Перенос длинных слов */
}

/* ФИЛЬТРЫ: делаем их резиновыми */
.filters-container {
    background: var(--panel-bg);
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    width: 100%;
}

.filters-container form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-group {
    flex: 1 1 200px; /* Группы фильтров тянутся, но не меньше 200px */
    min-width: 0;
}

.search-input, select, .btn-reset {
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 5px;
    display: block;
}

/* КАРТОЧКИ: ГЛАВНЫЙ ФИКС */
.points-grid { 
    display: grid; 
    gap: 20px; 
    width: 100%;
}

.point-item { 
    background: var(--panel-bg); 
    padding: 20px; 
    border-left: 6px solid var(--accent-yellow); 
    display: flex;
    justify-content: space-between;
    align-items: center; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    width: 100%; /* Жестко 100% от контейнера */
    max-width: 100%;
    overflow: hidden; /* Защита от вылетающих элементов внутри */
}

.point-info { 
    flex: 1; 
    min-width: 0; /* Разрешает блоку сжиматься, если текст длинный */
    padding-right: 15px;
}

.point-info h2 { 
    margin: 5px 0 10px 0; 
    color: #fff; 
    font-size: 1.3em; 
    text-transform: uppercase;
    word-wrap: break-word; /* Перенос заголовка на новую строку */
    overflow-wrap: break-word;
}

.tag { 
    display: inline-block; 
    padding: 3px 8px; 
    background: var(--deep-grey); 
    color: var(--accent-yellow); 
    font-size: 10px; 
    font-weight: bold; 
    text-transform: uppercase; 
    border: 1px solid var(--accent-yellow);
}

.details { 
    font-size: 14px; 
    line-height: 1.5; 
    color: #CCC; 
}
.details p { 
    margin: 5px 0; 
    word-break: break-word; /* Чтобы ссылки и телефоны не ломали экран */
}
.details b { color: var(--accent-yellow); }

.nav-button {
    background: var(--accent-yellow);
    color: var(--deep-grey);
    padding: 12px 15px;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 11px;
    text-align: center;
    flex-shrink: 0; 
    transition: 0.3s;
}

/* --- МОБИЛЬНАЯ АДАПТАЦИЯ (ДО 800PX) --- */
@media (max-width: 800px) {
    .point-item { 
        flex-direction: column; /* Перестраиваем в колонку */
        align-items: stretch; /* Растягиваем на всю ширину */
        padding: 15px;
    }
    
    .point-info {
        padding-right: 0;
        margin-bottom: 15px;
    }

    .nav-button {
        width: 100%; /* Кнопка на весь экран телефона */
        white-space: normal;
        padding: 15px;
    }

    .container {
        padding: 15px 8px; /* Еще меньше отступы на самых маленьких экранах */
    }
}