/* ===== СБРОС СТИЛЕЙ ===== */
/* Браузеры по-своему добавляют отступы. 
   Мы их обнуляем, чтобы всё было предсказуемо */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== БАЗОВЫЕ СТИЛИ ДЛЯ ВСЕГО САЙТА ===== */
body {
    font-family: 'Montserrat', sans-serif; /* наш шрифт для текста */
    color: #3d3d3d; /* темно-серый, мягче чем черный */
    background-color: #fdf8f5; /* нежно-бежевый фон */
    line-height: 1.6; /* межстрочный интервал — текст дышит */
}

/* ===== ЗАГОЛОВКИ ===== */
h1, h2 {
    font-family: 'Playfair Display', serif; /* элегантный шрифт */
    color: #8b5a6b; /* пыльно-розовый */
}

h1 {
    font-size: 3em; /* большой размер */
    margin-bottom: 20px;
}

h2 {
    font-size: 2em;
    margin-bottom: 15px;
}

/* ===== ШАПКА САЙТА ===== */
   header {
    background: linear-gradient(135deg, #ffdde1 0%, #ee9ca7 100%);
    padding: 80px 20px;
    text-align: center;
}

header p {
    font-size: 1.2em;
    color: #6b4a52;
    font-style: italic; /* курсив */
}

/* ===== КНОПКА ЗАПИСИ ===== */
.btn {
    display: inline-block; /* ведёт себя как блок, но в строке */
    background-color: #8b5a6b; /* пыльно-розовый */
    color: #fdf8f5; /* светлый текст */
    padding: 15px 40px; /* отступы внутри кнопки */
    text-decoration: none; /* убираем подчёркивание ссылки */
    border-radius: 50px; /* закруглённые края */
    font-size: 1.1em;
    font-weight: 500;
    margin-top: 30px;
    transition: all 0.3s ease; /* плавная анимация при наведении */
    box-shadow: 0 4px 15px rgba(139, 90, 107, 0.3); /* тень */
}

.btn:hover {
    background-color: #6b4a52; /* темнее при наведении */
    transform: translateY(-2px); /* чуть приподнимается */
    box-shadow: 0 6px 20px rgba(139, 90, 107, 0.4); /* тень больше */
}

/* ===== ОСНОВНОЙ БЛОК ===== */
main {
    max-width: 900px; /* ширина контента */
    margin: 60px auto; /* авто по бокам = центрирование */
    padding: 0 20px;
    text-align: center;
}

main p {
    font-size: 1.1em;
    margin-bottom: 20px;
}

/* ===== СЕКЦИИ ===== */
section {
    margin-bottom: 80px;
}

/* ===== ПРАЙС-ЛИСТ ===== */
.services h2, .gallery h2, .about h2, .contacts h2 {
    margin-bottom: 40px;
}

.price-list {
    max-width: 600px;
    margin: 0 auto;
}

.price-item {
    display: flex;
    justify-content: space-between; /* название слева, цена справа */
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px dashed #e8b4bc; /* пунктирная линия */
}

.price-item:last-child {
    border-bottom: none; /* у последнего элемента убираем линию */
}

.service-name {
    font-weight: 400;
    color: #3d3d3d;
}

.service-price {
    font-weight: 700;
    color: #8b5a6b;
    font-size: 1.1em;
}

/* ===== ГАЛЕРЕЯ ===== */

.gallery-grid {
    display: grid;
    /* Ровно 3 колонки одинаковой ширины */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Расстояние между фото */
    margin-top: 30px;
}

.gallery-item {
    width: 100%;
    aspect-ratio: 1 / 1; /* делает блок строго квадратным */
    border-radius: 15px; /* скругленные края */
    overflow: hidden; /* обрезает всё, что вылезает за края */
    background-color: #f5d5d5; /* фон на случай, если фото не загрузится */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* фото заполняет квадрат, обрезая лишнее */
    object-position: center; /* центрирует фото */
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05); /* лёгкое увеличение при наведении */
}

/* ===== ОБО МНЕ ===== */
.about {
    background-color: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.about p {
    margin-bottom: 15px;
}

/* ===== КОНТАКТЫ ===== */
.contacts a {
    color: #8b5a6b;
    text-decoration: none;
}

.contacts a:hover {
    text-decoration: underline;
}

.work-hours {
    margin-top: 20px;
    padding: 15px;
    background-color: #f5d5d5;
    border-radius: 8px;
    display: inline-block;
}

/* ===== ПОДВАЛ ===== */
footer {
    background-color: #8b5a6b;
    color: #fdf8f5;
    text-align: center;
    padding: 30px 20px;
    margin-top: 60px;
}

/* ===== МОДАЛЬНОЕ ОКНО (ЛАЙТБОКС) ===== */
.lightbox {
    display: none; /* Скрыто по умолчанию */
    position: fixed; /* Фиксируем поверх всего сайта */
    z-index: 1000; /* Поверх всех остальных элементов */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Тёмный полупрозрачный фон */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    cursor: zoom-out; /* Курсор в виде лупы с минусом (подсказка, что можно закрыть) */
}

.lightbox img {
    max-width: 90%; /* Не шире 90% экрана */
    max-height: 90%; /* Не выше 90% экрана */
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
    animation: zoomIn 0.3s ease; /* Плавное появление */
}

/* Анимация плавного увеличения */
@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Добавляем подсказку курсора на маленькие картинки */
.gallery-item img {
    cursor: zoom-in; /* Курсор в виде лупы с плюсом */
}