/* =========================================
   1. ОСНОВНЫЕ НАСТРОЙКИ
   ========================================= */

/* Для всех элементов ширина включает отступы и границы */
* {
    box-sizing: border-box;
}

/* Основное содержимое страницы */
body {
    max-width: 900px; /* Максимальная ширина сайта */
    margin: 0 auto; /* Центрируем страницу */
    padding: 40px 20px; /* Внутренние отступы */
    background-color: #F5F2E9; /* Молочный фон */
    color: #394536; /* Основной цвет текста */
    font-family: Arial, sans-serif; /* Шрифт */
    line-height: 1.6; /* Межстрочное расстояние */
}

/* Заголовки второго уровня */
h2 {
    margin-top: 40px;
    color: #596747;
}

/* Общие настройки абзацев */
p {
    font-size: 18px;
}

/* =========================================
   2. ШАПКА САЙТА
   ========================================= */

/* Название и слоган */
.header {
    text-align: center;
    margin-bottom: 70px;
}

/* Название «Наше место» */
.logo {
    color: #44513B;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 3px;
    text-decoration: none;
}

/* Слоган под названием */
.tagline {
    margin-top: 0;
    color: #777B6B;
    font-size: 13px;
}

/* =========================================
   3. ПРИВЕТСТВЕННЫЙ БЛОК
   ========================================= */

/* Главный заголовок */
h1 {
    font-size: 42px;
    text-align: center;
    color: #596747;
    margin-bottom: 10px;
}

/* Приветственный блок */
.hero {
    padding: 65px 30px;
    text-align: center;
    background-color: #E8E8D9;
    border-radius: 24px;
}

/* Маленькие надписи над заголовками */
.eyebrow {
    color: #778064;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Главный заголовок внутри приветственного блока */
.hero h1 {
    max-width: 650px;
    margin: 20px auto;
}

/* Короткое описание в приветственном блоке */
.hero-text {
    max-width: 480px;
    margin: 0 auto 30px;
    color: #5D6255;
}

/* =========================================
   4. КНОПКИ
   ========================================= */

/* Основной стиль кнопок и ссылок-кнопок */
.button {
    display: inline-block;
    padding: 14px 28px;
    background-color: #596747;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.2s;
}

/* Цвет основной кнопки при наведении мыши */
.button:hover {
    background-color: #3F4B35;
}

/* Светлый вариант кнопки */
.button-light {
    background: #FFFFFF;
    color: #44513B;
    border: 1px solid #D6D8C9;
}

/* =========================================
   5. ОПИСАНИЕ СТУДИИ
   ========================================= */

.about {
    max-width: 650px;
    margin: 80px auto;
    text-align: center;
}

/* =========================================
   6. АФИША
   ========================================= */

/* Внешние отступы раздела афиши */
.events {
    padding: 30px 0;
}

/* Текст под заголовком афиши */
.section-description {
    color: #686B60;
    max-width: 600px;
}

/* Кнопки фильтрации */
.event-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 25px 0;
}

/* Обычная кнопка фильтра */
.filter-button {
    padding: 10px 16px;
    border: 1px solid #D6D8C9;
    border-radius: 30px;
    background: transparent;
    color: #44513B;
    cursor: pointer;
    font: inherit;
}

/* Выбранная категория */
.filter-button.active {
    background: #596747;
    color: #FFFFFF;
    border-color: #596747;
}

/* Сетка карточек афиши. */
.event-list {
    display: grid; /* Размещаем карточки в сетке */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Три колонки одинаковой ширины */
    gap: 16px; /* Расстояние между карточками */
    align-items: start; /* Каждая карточка сохраняет собственную высоту */
}

/* На небольших экранах оставляем две колонки. */
@media (max-width: 800px) {
    .event-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* На телефонах показываем одну колонку. */
@media (max-width: 520px) {
    .event-list {
        grid-template-columns: 1fr;
    }
}


/* Карточка мероприятия */
.event-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    background-color: #FFFFFF;
    border: 1px solid #E5E2D8;
    border-radius: 16px;
}

/* Метка категории */
.event-category {
    padding: 5px 10px;
    background: #E8E8D9;
    color: #596747;
    border-radius: 20px;
    font-size: 12px;
}

/* Заголовок мероприятия */
.event-card h3 {
    color: #44513B;
    font-size: 19px;
}

/* Описание мероприятия */
.event-card p {
    color: #686B60;
    font-size: 15px;
}

/* Описание занимает свободное место в карточке */
.event-description {
    flex: 1;
}

/* Дата, время и стоимость */
.event-details {
    display: grid;
    gap: 8px;
    margin: 15px 0 20px;
    color: #686B60;
    font-size: 14px;
}

/* Выделение цены */
.event-details strong {
    color: #44513B;
    font-size: 20px;
}

/* Кнопка записи на карточке */
.event-booking {
    border: none;
    cursor: pointer;
    font: inherit;
}

/* =========================================
   7. РАЗДЕЛ ЗАПИСИ
   ========================================= */

/* Общий блок записи */
.booking {
    margin-top: 60px;
    padding: 30px;
    background: #E8E8D9;
    border-radius: 20px;
}

/* Кнопки способов связи */
.booking-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

/* Подписи полей формы */
.booking label {
    display: block;
    margin: 15px 0 6px;
    color: #44513B;
    font-size: 14px;
}

/* Поля ввода */
.booking input {
    width: 100%;
    max-width: 480px;
    padding: 12px;
    border: 1px solid #D6D8C9;
    border-radius: 8px;
    background: #FFFFFF;
    font: inherit;
}

/* Отступ перед формой */
.booking form {
    margin-top: 25px;
}

/* Кнопка внутри формы */
.booking form button {
    margin-top: 18px;
    cursor: pointer;
    font: inherit;
    border: none;
}

/* Примечание о демонстрационном режиме */
.form-note {
    color: #777B6B;
    font-size: 12px;
}

/* Скрытые разделы и формы */
[hidden] {
    display: none !important;
}

/* =========================================
   8. ПОДВАЛ САЙТА
   ========================================= */

.footer {
    margin-top: 70px;
    padding: 25px 0;
    border-top: 1px solid #DCD9CE;
    text-align: center;
    color: #777B6B;
    font-size: 13px;
}

/* =========================================
   9. МОБИЛЬНАЯ ВЕРСИЯ
   ========================================= */

/* Эти настройки включаются на экранах шириной до 650 пикселей */
@media (max-width: 650px) {

    /* Уменьшаем отступы страницы */
    body {
        padding: 24px 16px;
    }

    /* Уменьшаем отступ после шапки */
    .header {
        margin-bottom: 35px;
    }

    /* Делаем приветственный блок компактнее */
    .hero {
        padding: 45px 18px;
    }

    /* Уменьшаем главный заголовок */
    .hero h1 {
        font-size: 32px;
    }

    /* Карточки афиши располагаются друг под другом */
    .event-list {
        grid-template-columns: 1fr;
    }

    /* Уменьшаем отступы вокруг описания студии */
    .about {
        margin: 55px auto;
    }

    /* Делаем блок записи компактнее */
    .booking {
        padding: 22px 16px;
    }

    /* Располагаем способы записи вертикально */
    .booking-options {
        flex-direction: column;
        align-items: stretch;
    }

    /* Выравниваем текст кнопок по центру */
    .booking-options .button {
        text-align: center;
    }
}

/* ==========================================
   ЕДИНЫЙ ФОРМАТ ИЗОБРАЖЕНИЙ МЕРОПРИЯТИЙ
   Все изображения готовим в соотношении 3:2.
   Рекомендуемый исходный размер — 1200 × 800 px.
   ========================================== */


/* Фотография внутри карточки афиши. */
.event-card .event-image {
    width: 100%; /* На всю ширину карточки */
    aspect-ratio: 3 / 2; /* Единый формат изображений */
    height: auto; /* Высота рассчитывается автоматически */
    object-fit: cover; /* Без искажения пропорций */
    margin: 8px 0 12px; /* Умеренные отступы */
    border-radius: 8px; /* Небольшое скругление */
}


/* На отдельной странице фотография может быть крупнее,
   но её пропорции остаются такими же, как в афише. */
.event-details-page .event-image {
    width: 100%; /* Используем доступную ширину страницы */
    aspect-ratio: 3 / 2; /* Сохраняем единый формат */
    height: auto; /* Не растягиваем изображение по высоте */
    max-height: none; /* Не ограничиваем высоту отдельным числом */
    object-fit: cover; /* Одинаковый способ заполнения области */
    border-radius: 16px; /* Более крупное скругление на странице */
    margin: 8px 0 24px; /* Отступы вокруг фотографии */
}


/* Делаем главный заголовок выразительным и удобным для чтения. */
.event-details-page h1 {
    margin: 12px 0 24px; /* Отступы вокруг заголовка */
    line-height: 1.2; /* Компактная высота строк */
}

/* Оформляем фотографию именно на странице мероприятия. */
.event-details-page .event-image {
    width: 100%; /* Фотография занимает всю ширину содержимого */
    max-height: 440px; /* Не даём ей стать чрезмерно высокой */
    object-fit: cover; /* Заполняем область без искажения фотографии */
    border-radius: 16px; /* Скругляем углы */
    margin: 8px 0 24px; /* Отделяем фотографию от соседних блоков */
}

/* Улучшаем читаемость основного описания мероприятия. */
.event-details-page > p:not(.eyebrow) {
    font-size: 17px; /* Немного увеличиваем размер текста */
    line-height: 1.7; /* Добавляем расстояние между строками */
}

/* Собираем дату, время и стоимость в отдельный блок. */
.event-details-page .event-details {
    display: flex; /* Размещаем сведения рядом друг с другом */
    flex-wrap: wrap; /* Разрешаем перенос на узком экране */
    gap: 12px 24px; /* Расстояние между сведениями по вертикали и горизонтали */
    margin: 28px 0; /* Отступы до и после блока */
    padding: 20px; /* Внутреннее пространство */
    border-radius: 14px; /* Скруглённые углы */
    background: #F5F2E9; /* Мягкий светлый фон */
}

/* Разделяем кнопки, чтобы между ними было достаточно места. */
.event-details-page .button {
    margin-right: 8px; /* Небольшой промежуток между кнопками */
    margin-bottom: 8px; /* Отступ, если кнопки переносятся на новую строку */
}

/* На телефонах уменьшаем внешние отступы страницы. */
@media (max-width: 650px) {
    .event-details-page {
        margin-top: 24px; /* Меньше места над содержимым */
        padding: 0 16px; /* Чуть компактнее боковые отступы */
    }

    .event-details-page .event-image {
        max-height: 300px; /* Не даём фотографии занимать весь экран */
    }

    .event-details-page .event-details {
        padding: 16px; /* Компактнее блок с датой, временем и стоимостью */
    }
}

/* Характеристики мероприятия располагаются вертикальным списком. */
.event-details-page .event-details {
    display: flex; /* Включаем гибкое расположение элементов */
    flex-direction: column; /* Каждый пункт занимает отдельную строку */
    gap: 0; /* Расстояние задаём через внутренние отступы строк */
    margin: 28px 0; /* Отделяем список от описания и кнопок */
    padding: 8px 20px; /* Внутренние отступы блока */
    border-radius: 14px; /* Скругляем углы */
    background: #F5F2E9; /* Светлый фон в стиле сайта */
}

/* Одна строка: название характеристики и её значение. */
.event-details-page .event-detail-row {
    display: flex; /* Размещаем подпись и значение рядом */
    justify-content: space-between; /* Разводим их по краям */
    align-items: baseline; /* Выравниваем текст по строке */
    gap: 16px; /* Минимальный промежуток между подписью и значением */
    padding: 14px 0; /* Воздух сверху и снизу */
    border-bottom: 1px solid #DEDACD; /* Тонкий разделитель */
    line-height: 1.5; /* Удобная высота строки */
}

/* У последней строки убираем нижний разделитель. */
.event-details-page .event-detail-row:last-child {
    border-bottom: none;
}

/* Подписи делаем спокойнее, чем значения. */
.event-details-page .event-detail-label {
    color: #596747; /* Оливковый цвет */
}

/* Стоимость выделяем чуть сильнее остальных значений. */
.event-details-page .event-detail-price strong {
    font-size: 20px; /* Увеличиваем размер цены */
    color: #44513B; /* Более насыщенный оливковый */
}

/* На узких экранах разрешаем длинным строкам переноситься. */
@media (max-width: 650px) {
    .event-details-page .event-detail-row {
        flex-wrap: wrap; /* Переносим текст, если не хватает ширины */
        gap: 4px 12px; /* Небольшие промежутки при переносе */
    }
}

/* Раздел с составом стоимости мероприятия. */
.event-details-page .event-included {
    margin: 28px 0; /* Отделяем раздел от соседних блоков */
    padding: 24px; /* Добавляем внутреннее пространство */
    border-radius: 14px; /* Скругляем углы */
    background: #F5F2E9; /* Используем светлый фон сайта */
}

/* Заголовок раздела. */
.event-details-page .event-included h2 {
    margin-top: 0; /* Убираем лишний отступ сверху */
    margin-bottom: 16px; /* Отделяем заголовок от списка */
    font-size: 21px; /* Делаем заголовок заметным */
}

/* Список того, что получает участник. */
.event-details-page .event-included ul {
    margin: 0; /* Убираем внешний отступ списка */
    padding-left: 22px; /* Оставляем место для маркеров */
    line-height: 1.8; /* Делаем строки удобными для чтения */
}

/* Расстояние между пунктами списка. */
.event-details-page .event-included li {
    padding: 3px 0; /* Немного увеличиваем расстояние между строками */
}

/* Компактнее располагаем сведения внутри карточки. */
.event-card .event-details {
    display: flex; /* Используем гибкое расположение */
    flex-direction: column; /* Каждое сведение — отдельная строка */
    align-items: flex-start; /* Выравниваем текст по левому краю */
    gap: 5px; /* Небольшие промежутки между строками */
    margin: 16px 0; /* Отступы вокруг блока */
}

/* Стоимость должна оставаться заметной. */
.event-card .event-details strong {
    font-size: 15px;
}

/* Немного сокращаем внутренние отступы карточки. */
.event-card {
    padding: 15px;
}

/* Компактная карточка мероприятия, если в ней есть фотография. */
.event-card:has(.event-image) {
    padding: 12px; /* Уменьшаем внутренние отступы карточки */
}

/* Делаем фотографию компактнее, сохраняя формат 3:2. */
.event-card .event-image {
    margin: 4px 0 8px; /* Уменьшаем расстояние вокруг изображения */
}

/* Сокращаем отступы заголовка после фотографии. */
.event-card:has(.event-image) h3 {
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 1.3;
}

/* Уменьшаем расстояние между описанием и характеристиками. */
.event-card:has(.event-image) .event-description {
    margin-top: 8px;
    margin-bottom: 10px;
    line-height: 1.45;
}

/* Делаем список характеристик плотнее. */
.event-card:has(.event-image) .event-details {
    gap: 3px;
    margin: 10px 0;
    line-height: 1.35;
}

/* Убираем лишние отступы у кнопки записи. */
.event-card:has(.event-image) .event-booking {
    margin-top: 2px;
}

/* ==========================================
   РАЗДЕЛ «КОНТАКТЫ»
   ========================================== */

/* Общий контейнер раздела контактов. */
.contacts {
    margin: 60px 0 40px; /* Отступы сверху и снизу */
    padding-top: 32px; /* Пространство над содержимым */
    border-top: 1px solid #DEDACD; /* Тонкая разделительная линия */
}

/* Сетка карточек с контактной информацией. */
.contacts-list {
    display: grid; /* Размещаем карточки в сетке */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Три колонки одинаковой ширины */
    gap: 16px; /* Расстояние между карточками */
    margin-top: 24px; /* Отступ после заголовка и описания */
    align-items: stretch; /* Карточки в одной строке имеют одинаковую высоту */
}

/* Внешний вид отдельной карточки. */
.contact-card {
    padding: 20px; /* Внутренние отступы */
    border: 1px solid #E2DED3; /* Тонкая рамка */
    border-radius: 14px; /* Скруглённые углы */
    background: #FFFFFF; /* Светлый фон карточки */
}

/* Заголовки внутри карточек контактов. */
.contact-card h3 {
    margin-top: 0; /* Убираем лишний верхний отступ */
    margin-bottom: 14px; /* Отделяем заголовок от текста */
    color: #596747; /* Оливковый цвет */
    font-size: 18px; /* Размер заголовка */
}

/* Текст с адресом и графиком работы. */
.contact-card p {
    margin: 8px 0; /* Умеренные расстояния между абзацами */
    line-height: 1.6; /* Улучшаем читаемость */
    overflow-wrap: anywhere; /* Не даём длинному тексту выходить за карточку */
}

/* Оформление телефонной ссылки и ссылки на ВКонтакте. */
.contact-card a {
    color: #44513B; /* Цвет ссылок в стиле сайта */
    text-decoration: underline; /* Показываем, что текст кликабельный */
    text-underline-offset: 3px; /* Немного отделяем подчёркивание от букв */
}

/* Небольшое изменение оформления при наведении мыши. */
.contact-card a:hover {
    color: #788563; /* Делаем ссылку светлее при наведении */
}

/* Адаптация раздела для планшетов и небольших экранов. */
@media (max-width: 800px) {
    .contacts-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Две колонки */
    }
}

/* Адаптация для телефонов. */
@media (max-width: 520px) {
    .contacts {
        margin-top: 40px; /* Сокращаем отступ сверху */
        padding-top: 24px; /* Сокращаем внутренний отступ */
    }

    .contacts-list {
        grid-template-columns: 1fr; /* Одна карточка в строке */
        gap: 12px; /* Расстояние между карточками */
    }

    .contact-card {
        padding: 16px; /* Компактнее на маленьком экране */
    }
}

/* Ссылка на контакты в шапке сайта. */
.header-contacts-link {
    display: inline-block; /* Позволяет задавать отступы ссылке */
    margin-top: 10px; /* Отступ от слогана */
    color: #596747; /* Оливковый цвет */
    font-size: 14px; /* Компактный размер текста */
    text-decoration: none; /* Убираем стандартное подчёркивание */
}

/* Показываем посетителю, что ссылка активна. */
.header-contacts-link:hover {
    text-decoration: underline; /* Подчёркиваем при наведении */
}

/* Раздел с направлениями студии. */
.services {
    padding: 70px 20px;
    background-color: #F5F2E9;
    text-align: center;
}

/* Заголовок и описание раздела. */
.services h2 {
    margin: 10px 0 16px;
    color: #44513B;
}

.services .section-description {
    max-width: 650px;
    margin: 0 auto 35px;
}

/* Располагаем карточки рядом, если хватает ширины экрана. */
.services-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Внешний вид отдельной карточки. */
.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 26px;
    background-color: #FFFFFF;
    border: 1px solid #DEDACD;
    border-radius: 18px;
    text-align: center;
}

/* Декоративный знак в начале карточки. */
.service-card-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
    border-radius: 50%;
    background-color: #F5F2E9;
    color: #596747;
    font-size: 30px;
}

/* Название направления. */
.service-card h3 {
    margin: 0 0 14px;
    color: #44513B;
    font-size: 23px;
}

/* Описание направления. */
.service-card p {
    margin: 0 0 24px;
    line-height: 1.7;
}

/* Кнопка остаётся внизу карточки, даже если описания разной длины. */
.service-card .button {
    margin-top: auto;
}

/* На узких экранах показываем карточки друг под другом. */
@media (max-width: 700px) {
    .services {
        padding: 45px 16px;
    }

    .services-list {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .service-card {
        padding: 26px 20px;
    }
}

/* Главное меню сайта. */
.main-nav {
    display: flex; /* Размещаем ссылки в ряд */
    justify-content: center; /* Выравниваем меню по центру */
    align-items: center; /* Выравниваем ссылки по вертикали */
    flex-wrap: wrap; /* Разрешаем перенос на следующую строку */
    gap: 10px 24px; /* Расстояние между ссылками */
    margin-top: 24px; /* Отступ после слогана */
}

/* Оформление ссылок меню. */
.main-nav a {
    color: #44513B; /* Основной оливковый цвет */
    font-size: 15px;
    text-decoration: none; /* Убираем подчёркивание */
    transition: color 0.2s;
}

/* Изменение цвета при наведении. */
.main-nav a:hover {
    color: #788563;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Компактное меню на телефонах. */
@media (max-width: 650px) {
    .main-nav {
        gap: 12px 18px;
        margin-top: 20px;
    }

    .main-nav a {
        font-size: 14px;
    }
}

/* Блок встроенной карты. */
.contacts-map {
    margin-top: 36px; /* Отделяем карту от контактных карточек */
}

/* Заголовок над картой. */
.contacts-map h3 {
    margin-bottom: 16px;
    color: #596747;
    font-size: 22px;
}

/* Область, в которой размещается карта. */
.map-frame {
    position: relative;
    width: 100%;
    min-height: 400px;
    overflow: hidden;
    border: 1px solid #DEDACD;
    border-radius: 16px;
    background: #FFFFFF;
}

/* Делаем встроенную карту адаптивной. */
.map-frame > ymaps,
.map-frame iframe {
    max-width: 100%;
}

/* Ссылка для открытия карты отдельно. */
.map-link {
    margin-top: 14px;
    font-size: 15px;
}

.map-link a {
    color: #44513B;
    text-underline-offset: 3px;
}

/* На телефонах уменьшаем высоту карты. */
@media (max-width: 520px) {
    .map-frame {
        min-height: 320px;
    }
}

/* Раздел записи на мероприятие. */
.booking {
    margin-top: 60px;
    padding: 32px;
    background: #E8E8D9;
    border-radius: 20px;
}

/* Описание под заголовком формы. */
.booking-description {
    color: #5D6255;
    margin-bottom: 24px;
}

/* Область, в которой отображается Яндекс Форма. */
.booking-form-frame {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #FFFFFF;
}

/* Встроенная форма занимает всю ширину контейнера. */
.booking-form-frame iframe {
    display: block;
    width: 100%;
    min-height: 700px;
    border: none;
    background: #FFFFFF;
}

/* Уменьшаем отступы на телефонах. */
@media (max-width: 650px) {
    .booking {
        padding: 22px 16px;
    }

    .booking-form-frame iframe {
        min-height: 760px;
    }
}