/*брендбук сайта
Основной фон: темно-синий или серый (как символ тюрьмы и вечности).background-color: #7f7679 ;
Акценты: золотой (иконы, заголовки), красный (кровь мучеников). карточки  background:#6D5D5D;
Текст: белый или светло-серый для читаемости. текст color: #E8D8C0;


шрифт:
Заголовки: «Индукта» (церковный) + «Courier New» (тюремный). 'Roboto Slab', serif
Основной текст: «PT Serif» или «Old Standard TT».  'Old Standard TT', serif; 'Noto Serif',
Цитаты/дат: рукописный или трафаретный шрифт.кнопки  'Cormorant Upright';

отступы
gap: 10px; padding: 8px 16px;
*/
@import url('https://fonts.googleapis.com/css2?family=PT+Serif&family=PT+Mono&family=Roboto+Slab&family=Cormorant+Upright&display=swap');

body {
    background-color: #7f7679 ;
    font-family: 'Noto Serif', serif;  
}

h1 {
    text-align: center;
    font-family: 'Roboto Slab', serif;
}

.search-container {
    display: flex;
    justify-content: center;
    gap: 10px;/*расстояние между кнопками и окно поиска*/
}

#searchInput {
    padding: 8px;/*внутренние отступы*/
    width: 550px;
}

#searchButton, #resetButton, #showAllButton {
    padding: 8px 16px;
    cursor: pointer;
    font-family: 'Cormorant Upright';
    font-weight: 1000;
}

/* Стили для списка */
.list-container {
    max-width: 800px;
    margin: 0 auto; /* центрирует блок по горизонтали */
    padding: 0;
}

/* Стили для букв */
.letters-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.description-preview:hover {
    color: #efd0b4;/*цвет при наведении на текст описания*/
}

/*текст в карточке*/
.person-details p {
    margin: 4px 0;
    color: #E8D8C0;
}

.description-preview {
    font-size: 0.9em;
}
.person-photo {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #f5f5f5; /* Фон если фото не загрузится */
}
/*карточка*/
.person-card {
    background:#6D5D5D;
    border-radius: 10px;
    padding: 8px 16px;
    margin-bottom: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.person-card:hover {
    transform: translateY(-5px);
}

.person-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Гарантированное отображение дефолтного фото */
.person-photo:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('http://localhost:8000/static/images/no_photo.png') center/cover no-repeat;
    z-index: -1;
}

.letter-button {
    margin: 4px 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 8px 16px;
    cursor: pointer;
    font-family: 'Cormorant Upright';
    font-weight: 1000;
}

#lettersContainer {
    margin: 8px 0;
    display: flex;
    gap: 10px;
    justify-content: center;
}