/*
Theme Name: Rabotaest Custom
Author: Vyacheslav Gulyaev
Description: Легкая кастомная тема в стиле текстового блога-лонгрида.
Version: 1.0
*/

/* Базовый сброс и шрифты */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h2 a,
h2 a:visited,
h2 a:hover,
h2 a:active,
h2 a:focus {
    all: unset;
    cursor: pointer;
    /* чтобы оставался курсор-ссылка */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #222222;
    background-color: #ffffff;
    padding-top: 40px;
    padding-bottom: 60px;
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-family: sans-serif;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    vertical-align: baseline;
    display: inline-block;
}

/* Главный контейнер (узкая колонка 760px как на timur-smirnov.com) */
.container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;
}



/* Контейнер шапки */
.site-header {
    margin-bottom: 15px;
    padding-bottom: 25px;
    border-bottom: 2px solid #222222;
    /* Плотная акцентная черта под шапкой */
}

/* Верхний ряд: заголовок и навигация */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.site-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.site-title a {
    color: #111111;
    text-decoration: none;
}

.site-tagline {
    font-size: 14px;
    color: #666666;
    margin-top: 4px;
}




/* Навигация контрастная */
.main-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.main-nav a {
    color: #ffffff;
    background-color: #222222;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    transition: background-color 0.2s ease;
}

.main-nav a:hover {
    background-color: #0056b3;
    color: #ffffff;
}






/* Интро-блок автора */
.author-intro {
    background: #f8f9fa;
    border-left: 3px solid #222222;
    padding: 15px 20px;
    font-size: 16px;
    line-height: 1.5;
    color: #333333;
}



/*Разделение на две колонки контента на главной странице*/
/* Двухколоночный макет */
.content-wrapper {
    display: flex;
    gap: 40px;
    /* Отступ между основной лентой и сайдбаром */
    align-items: flex-start;
    /* 💥 ДОБАВЛЕНЫ ЭТИ СТРОКИ: Ограничение ширины и центрирование */
    max-width: 970px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* 💥 ДОБАВЛЕНО: Сбрасываем ограничения для тега <main class="container"> внутри wrapper */
.content-wrapper .container {
    flex: 1;
    min-width: 0;
}









/* Основная лента занимает всё оставшееся место */
.posts-feed {
    flex: 1;
}



/* Блоки постов */
.postitem-card {
    margin-bottom: 50px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eaeaea;
    max-height: 250px;
    height: 250px;
}

.postitem-title {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 0px;
}

.postitem-title a {
    color: #111111;
    text-decoration: none;
}

.postitem-title a:hover {
    color: #0056b3;
}

.postitem-meta {
    font-size: 12px;
    color: #777777;
    margin-bottom: 5px;
}

/* Оформление контента */
.postitem-content p {
    margin-bottom: 20px;
}

.postitem-content iframe {
    max-width: 100%;
    margin: 20px 0;
    border-radius: 4px;
}

/* Отзывы / Социальные доказательства */
.reviews-section {
    margin-top: 60px;
}

.review-item {
    background: #f9f9f9;
    border-left: 4px solid #0056b3;
    padding: 24px;
    margin-bottom: 30px;
    border-radius: 0 6px 6px 0;
}

.review-item h3 {
    margin-bottom: 10px;
    font-size: 20px;
}

/*Картинка поста на главной*/
/* Контейнер для картинки */
.postitem-thumbnail {
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 8px;
    /* Скругление углов (по желанию) */
    max-height: 175px;
    height: 175px;
    position: relative;
    overflow: hidden;
}

/* Настройки самой картинки */
.postitem-thumbnail img {
    width: 100%;
    max-width: 100%;
    height: 175px;
    /* Сохраняет пропорции без искажений */
    display: block;
    object-fit: cover;
    /* Заполняет блок без растяжения */
}

/* Стили для кнопки "Читать далее" */
.read-more-btn {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    color: #ffffff;
    background-color: #222222;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    transition: background-color 0.2s ease;
}

.read-more-btn:hover {
    background-color: #0056b3;
    color: #ffffff;
}






/* Объявления недвижимости */
.booking-card {
    display: flex;
    background: #ffffff;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    
    height: 215px; /* Фиксированная высота */
    box-sizing: border-box; /* Чтобы padding и border входили в 260px */
}

.booking-card-media {
    position: relative;
    width: 180px;
    height: 100%; /* Занимает всю высоту 260px */
    flex-shrink: 0;
}

.booking-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge-favorite {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 6px 8px;
    cursor: pointer;
}

.booking-card-content {
    flex-grow: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Занимает всю высоту карточки */
    box-sizing: border-box;
    overflow: hidden; /* Предотвращает выпадение текста */
}

.booking-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.booking-title {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
}

.booking-title a {
    color: #006ce4;
    text-decoration: none;
}

.booking-title a:hover {
    color: #003580;
    text-decoration: underline;
}

.booking-location {
    font-size: 12px;
    color: #595959;
    margin: 0;
}

.rating-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rating-text {
    text-align: right;
}

.rating-status {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.rating-count {
    font-size: 11px;
    color: #595959;
}

.rating-badge {
    background: #003580;
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 6px 6px 6px 0;
}

.tags-list {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.tag-pill {
    font-size: 11px;
    background: #f5f5f5;
    padding: 4px 8px;
    border-radius: 4px;
    color: #333;
}

.tag-pill.accent {
    background: #eef4fc;
    color: #006ce4;
}

.tag-pill.free {
    background: #e7f6e7;
    color: #088208;
    font-weight: 600;
}

.booking-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 16px;
    border-top: 1px dotted #ccc;
    padding-top: 12px;
}

.urgency-note {
    font-size: 12px;
    color: #d4111e;
    font-weight: 600;
}

.price-section {
    text-align: right;
}

.price-period {
    display: block;
    font-size: 11px;
    color: #595959;
}

.price-amount {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    display: block;
    margin-bottom: 6px;
}

.booking-btn {
    background: #006ce4;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
}

.booking-btn:hover {
    background: #003580;
}

/* Адаптив для мобильных устройств */
@media (max-width: 650px) {
    .booking-card {
        flex-direction: column;
        height: auto; /* Сбрасываем фиксированную высоту для мобильных */
    }

    .booking-card-media {
        width: 100%;
        height: 180px; /* Высота фото на мобильных */
    }

    .booking-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .price-section {
        text-align: left;
        width: 100%;
    }
}








/* Сайдбар фиксированной ширины */
.sidebar {
    width: 300px;
    flex-shrink: 0;
}

.sidebar-widget {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.widget-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2rem;
    line-height: 1.2;
}

.widget-title-h1 {
    line-height: 1.2;
    margin-bottom: 30px;
}

.sidebar-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-posts-list li {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.sidebar-posts-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sidebar-posts-list a {
    text-decoration: none;
    color: #222;
    font-weight: 500;
    display: block;
    line-height: 1.3;
}

.sidebar-posts-list a:hover {
    color: #0073aa;
}

.sidebar-post-date {
    font-size: 0.8rem;
    color: #777;
    display: block;
    margin-top: 4px;
}

/* Ссылка "Все объявления" внизу виджета сайдбара*/
.all-ads-link {
    display: inline-block;
    margin-top: 15px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0073aa;
    text-decoration: none;
    transition: color 0.2s ease;
}

.all-ads-link:hover {
    color: #005177;
    text-decoration: underline;
}



/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {

    /* 1. Основной контейнер и сброс отступов */
    .content-wrapper {
        flex-direction: column;
        padding: 0 10px;
        /* Защита от прилипания к краям экрана */
    }

    .container,
    .sidebar {
        width: 100%;
        max-width: 100%;
    }

    /* 2. Шапка и навигация */
    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .main-nav {
        display: flex;
        flex-wrap: wrap;
        /* Чтобы ссылки переносились, если не влезают */
        gap: 12px;
        width: 100%;
    }

    .main-nav a {
        display: inline-block;
        padding: 6px 12px;
        background-color: #222222;
        /* Легкая подложка для кликабельности на смартфонах */
        border-radius: 4px;
        font-size: 14px;
    }

    /* 3. Карточки постов в основной ленте */
    .postitem-card {
        padding: 15px 0;
        margin-bottom: 25px;
    }

    .postitem-title {
        font-size: 20px;
        /* Уменьшаем размер заголовка для мобильных */
        line-height: 1.3;
    }

    .postitem-meta {
        font-size: 13px;
        margin-bottom: 10px;
    }

    /* Адаптивность для миниатюр постов */
    .postitem-thumbnail img {
        width: 100%;
        height: auto;
        /* Картинка масштабируется пропорционально */
        max-height: 250px;
        object-fit: cover;
        border-radius: 6px;
    }

    /* 4. Кнопка «Читать далее» */
    .read-more-btn {
        display: inline-block;
        margin-top: 10px;
        padding: 8px 16px;
        width: 100%;
        /* Удобно нажимать пальцем */
        text-align: center;
        box-sizing: border-box;
    }

    /* 5. Сайдбар */
    .sidebar {
        margin-top: 40px;
        border-top: 2px solid #eee;
        padding-top: 30px;
    }

    .sidebar-posts-list li {
        padding: 10px 0;
    }

    .all-ads-link {
        display: block;
        text-align: center;
        padding: 10px;
        background-color: #eef2f5;
        border-radius: 4px;
        margin-top: 15px;
    }
}














/* Доска объявлений */
/* Блок с логотипом на доске объявлений */
.topblock {
    padding: 15px 0px 0px 0px;
    margin-bottom: 0px;
}

.topblock h1 {
    margin-bottom: 0;
}

p.sublogo {
    margin-bottom: 13px;
    font-size: 14px;
    color: #666666;
}

.topblock h1 a {
    color: inherit;
    text-decoration: none;
}

.topblock h1 a:hover {
    text-decoration: underline;
    /* по желанию */
}

.topblock p.subtitle {
    margin-bottom: 60px;
}


.w-layout-blockcontainer {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

@media screen and (max-width: 991px) {
    .w-layout-blockcontainer {
        max-width: 728px;
    }
}

@media screen and (max-width: 767px) {
    .w-layout-blockcontainer {
        max-width: none;
    }
}

.w-layout-blockcontainer.container-galery.w-container {
    flex: 1;
    /* Занимает всё оставшееся свободное место */
    min-width: 0;
    /* Предотвращает разрыв сетки широкими элементами/картинками */
    max-width: none;
    /* Сбрасываем жесткий предел Webflow */
    margin: 0;
    /* Сбрасываем центрирование Webflow внутри flex-блока */
}

.container1 {
    width: 100%;
    max-width: 970px;
    /* Фиксируем общую ширину */
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.w-container {
    margin-left: auto;
    margin-right: auto;
}


.section-main {
    display: flex;
    justify-content: flex-start;
    /* Заменяем space-between на flex-start */
    gap: 40px;
    /* Задаем фиксированный межколоночный отступ */
    align-items: flex-start;
    margin-bottom: 40px;
    padding: 30px 0 40px 0;
    width: 100%;
}

.container-galery {
    flex: 1 0 937px;
    /* flex-grow: 1 (расти), flex-shrink: 0 (не сжиматься), basis: 937px (ширина под 4 карточки) */
    min-width: 937px;
    /* Гарантирует ширину ровно под 4 карточки */
    /*flex: 1 1 auto;*/
    /*width: auto;*/
    /*max-width: 985px;*/
    /*min-width: 985px;*/
    /*мешает flex - верстке*/
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
}

.w-layout-blockcontainer.container-galery.w-container {
    /*max-width: 985px;*/
}



/* Блок фильтр по городам */
.selectcity {
    margin: 0 0 20px 0;
}

.selectcity__cityitem {
    font-size: 14px;
    padding: 5px 10px;
    border: 1px solid gray;
    border-radius: 5px;
    display: inline-block;
    color: #fff;
    margin-bottom: 10px;
}

.selectcity__cityitem-green {
    background: #28A745;
}

.selectcity__cityitem a,
.selectcity__cityitem a:visited,
.selectcity__cityitem a:hover,
.selectcity__cityitem a:active {
    color: inherit !important;
    /* или укажи нужный цвет */
    text-decoration: none;
}



/* сама галерея */
.div_galery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 равные колонки */
    gap: 20px;
    /* Отступы между карточками */
    width: 100%;
    margin-bottom: 30px;
}

.

/* Элемент карточки */
.div_galery .div_galery__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Защита от расползания контента */
}

.div_galery .item__image {
    margin-bottom: 10px;
}

/* Картинка карточки */
.div_galery .item__image img {
    width: 100%;
    height: 160px;
    /* Единая высота для всех обложек */
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* Описание краткое карточки */
.item__shortdesc a {
    display: inline-block;
    /* или block */
    line-height: 1.3;
}

/* Адаптив под планшеты и мобильные */
@media screen and (max-width: 991px) {
    .div_galery {
        grid-template-columns: repeat(2, 1fr);
        /* По 2 в ряд на планшетах */
    }
}

@media screen and (max-width: 576px) {
    .div_galery {
        grid-template-columns: 1fr;
        /* По 1 в ряд на телефонах */
    }
}


/*Подробно карточка*/
.mysinglepost {
    max-width: 725px;
    margin: 0 auto 100px;
}





/* Контейнер для нижних карточек в подробно карточка на странице single.php
*/
/* Контейнер для нижнего блока */
.bottom-cards-section {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Сетка CSS Grid: ровно 4 одинаковые колонки в каждом ряду */
.bottom-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 равные колонки */
    gap: 20px;
    /* Отступы между карточками как по горизонтали, так и по вертикали */
}

/* Настройки каждой карточки */
.bottom-cards-grid .div_galery__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Не даёт сетке расползаться */
}

.bottom-cards-grid .item__image img {
    width: 100%;
    height: 160px;
    /* Одинаковая высота картинок для аккуратного ряда */
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* Адаптивность для разных экранов */
@media screen and (max-width: 991px) {
    .bottom-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        /* По 2 карточки в ряд на планшетах */
    }
}

@media screen and (max-width: 576px) {
    .bottom-cards-grid {
        grid-template-columns: 1fr;
        /* По 1 карточке в ряд на телефонах */
    }
}





/* Правая боковая панель целиком */
.container-aside {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    /*background-color: var(--_color---background);*/
    flex-flow: column;
    /*flex: 0 auto;*/
    flex: 0 1 240px;
    width: 315px;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    display: flex;
}

/* боковая панель Мы в социальных сетях / Реклама репетитор */
.sidebar-socialmedia {
    grid-column-gap: 30px;
    grid-row-gap: 5px;
    background-color: var(--white);
    flex-flow: column;
    padding: 15px 15px;
    display: flex;
    border-radius: 12px;
    border: 1px solid #E3E3E3;
    width: 100%;
    margin-bottom: 30px;
}

.div-block-3 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    display: flex;
    text-align: center;
}

/* Для Реклама репетитор (parts/fizmatcode.php) Делаем картинку внутри сайдбара адаптивной */
.sidebar-socialmedia img {
    max-width: 100%;
    /* Картинка не может быть шире своего родителя */
    height: auto;
    /* Сохраняет правильные пропорции сторон */
    display: block;
    /* Убирает лишний зазор под картинкой */
}

/* Для Реклама репетитор (parts/fizmatcode.php) */
.fizmatcode__text {
    margin-bottom: 16px;
    font-family: Roboto, sans-serif;
    font-size: 22px;
    font-weight: 700;
}

/* Для Реклама репетитор (parts/fizmatcode.php) */
.fizmatcode__text.text1,
.fizmatcode__text.text2 {
    margin-bottom: 0;
}

/* Для Реклама репетитор (parts/fizmatcode.php) */
.text-block-3 {
    color: var(--_color---advertising-react);
}

/* Для Реклама репетитор (parts/fizmatcode.php) */
.text-block-5 {
    font-weight: 400;
}









/* 5. Адаптивность для мобильных устройств и планшетов */
@media screen and (max-width: 767px) {
    .section-main {
        flex-direction: column;
        gap: 30px;
    }

    .container-aside {
        width: 100%;
    }
}









/* Закомментил: Сетка для карточек постов на странице blog*/
/*.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
}*/

/* Переключаем сетку на колоночную раскладку (Masonry) */
.posts-grid {
    column-count: 2;
    /* 2 колонки на ПК */
    column-gap: 25px;
    margin-top: 30px;
}

/* Закомментил: Карточка поста */
/*.post-card {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #222222;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}*/

/* Карточка поста подстраивается под контент */
.post-card {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #222222;
    padding: 20px;
    margin-bottom: 25px;
    /* Отступ снизу между карточками в колонке */

    /* Важно: предотвращает разрыв карточки между колонками */
    break-inside: avoid;
    display: inline-block;
    /* Убираем flex, чтобы высоты не выравнивались */
    width: 100%;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    /* 👈 Обязательно: включает padding в общую ширину */
}

.post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}


/* Заголовок поста */
.post-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 8px 0;
}

.post-title a {
    color: #111111;
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-title a:hover {
    color: #0056b3;
}

/* Мета-информация (дата, рубрика) */
.post-meta {
    font-size: 13px;
    color: #666666;
    margin-bottom: 12px;
}

/* Отрывок текста — убираем растяжение */
.post-excerpt {
    font-size: 15px;
    line-height: 1.5;
    color: #333333;
    margin-bottom: 20px;
    /*flex-grow: 1; Так было раньше*/
}

/* Кнопка «Читать далее» */
.read-more-btn {
    display: inline-block;
    align-self: flex-start;
    color: #ffffff;
    background-color: #222222;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    transition: background-color 0.2s ease;
}

.read-more-btn:hover {
    background-color: #0056b3;
    color: #ffffff;
    text-decoration: none;
}

/* Обёртка миниатюры */
.post-thumbnail {
    margin-bottom: 15px;
    overflow: hidden;
    max-height: 200px;
    /* Ограничение высоты картинки по вкусу */
}

/* Ссылка внутри обёртки */
.post-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Сама картинка WordPress */
.post-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    /* Заполняет область без искажения пропорций */
    display: block;
    transition: transform 0.3s ease;
}

/* Легкий зум при наведении на карточку */
.post-card:hover .post-thumbnail img {
    transform: scale(1.03);
}

/* Адаптивность для Masonry */
@media screen and (max-width: 992px) {
    .posts-grid {
        column-count: 2;
        /* 2 колонки на планшетах */
    }
}

@media screen and (max-width: 600px) {
    .posts-grid {
        column-count: 1;
        /* 1 колонка на мобильных */
    }
}















/* =========================================================
           1. СТИЛИ ТАБОВ (ПЕРЕКЛЮЧАТЕЛЕЙ)
           ========================================================= */
.tabs-nav-wrapper {
    display: flex;
    justify-content: center;
    margin: 20px 0 35px 0;
}

.tabs-nav {
    display: inline-flex;
    background-color: #f1f5f9;
    padding: 5px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    gap: 4px;
}

.tab-btn {
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tab-btn:hover {
    color: #0f172a;
}

.tab-btn.active {
    background-color: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.tab-content {
    display: none;
    /* По умолчанию скрываем все табы */
}

.tab-content.active {
    display: block;
    /* Показываем активную вкладку */
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   Стили для страницы Услуг SMM/Маркетинг
   ========================================== */

/* Заголовок страницы */
.page-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.page-title {
    font-size: 32px;
    font-weight: 800;
    color: #111111;
    margin: 0 0 10px 0;
}

/* Сетка карточек услуг */
.services-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 40px;
}

/* Карточка услуги в стиле ваших постов */
.service-card {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #222222;
    /* Акцентная левая граница */
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Шапка карточки */
.service-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 15px;
}

.service-number {
    font-size: 14px;
    font-weight: 700;
    color: #737d9b;
}

.service-title {
    font-size: 22px;
    font-weight: 800;
    color: #111111;
    margin: 0;
    line-height: 1.3;
}

/* Тело карточки */
.service-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #333333;
    margin: 0 0 15px 0;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.service-features li {
    font-size: 14px;
    color: #555555;
    padding-left: 18px;
    position: relative;
    margin-bottom: 6px;
}

.service-features li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: #222222;
}

/* Кнопка действия */
.service-btn {
    display: inline-block;
    background-color: #222222;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    transition: background-color 0.2s ease;
}

.service-btn:hover {
    background-color: #0056b3;
    color: #ffffff;
    text-decoration: none;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .service-card {
        padding: 20px;
    }

    .service-header {
        flex-direction: column;
        gap: 5px;
    }

    .service-title {
        font-size: 19px;
    }

    .service-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

/* ==========================================
   Блок: Финальный тезис / Манифест на странице Услуги
   ========================================== */

.manifest-section {
    margin-top: 60px;
    margin-bottom: 50px;
}

.manifest-card {
    background-color: #f4f5f7;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #222222;
    /* Акцентная левая линия */
    padding: 30px 35px;
    box-sizing: border-box;
}

.manifest-text {
    font-size: 17px;
    line-height: 1.65;
    font-weight: 500;
    color: #222222;
    margin: 0 0 15px 0;
    font-style: italic;
}

.manifest-footer {
    display: flex;
    justify-content: flex-end;
}

.manifest-source {
    font-size: 13px;
    color: #666666;
}

.manifest-source a {
    color: #222222;
    font-weight: 600;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.manifest-source a:hover {
    color: #0056b3;
}

/* Адаптив для мобильных устройств */
@media screen and (max-width: 600px) {
    .manifest-card {
        padding: 20px 22px;
    }

    .manifest-text {
        font-size: 15px;
    }
}


/* ==========================================
   Стили для страницы Репетитор
   ========================================== */
/* Стили для Hero-блока в стиле сайта */
.hero-section {
    padding: 40px 0 30px 0;
    text-align: center;
}

.hero-badge {
    display: inline-block;
    padding: 6px 16px;
    background-color: #f1f5f9;
    color: #2563eb;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: #475569;
    max-width: 680px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.hero-btn-primary {
    background-color: #000000;
    color: #ffffff;
}

.hero-btn-primary:hover {
    opacity: 0.85;
    color: #ffffff;
}

.hero-btn-secondary {
    background-color: #f1f5f9;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

.hero-btn-secondary:hover {
    background-color: #e2e8f0;
}

/* Выстраивание 3 карточек в 1 линию */
.classes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Блок "Формат и преимущества" */
.features-section {
    margin-top: 40px;
    margin-bottom: 40px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}

.feature-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05);
}

.feature-item h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #0f172a;
}

.feature-item p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

/* Блок "Призыв к действию (CTA / Instagram)" */
.cta-section {
    margin-top: 40px;
    margin-bottom: 50px;
}

.cta-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 48px 24px;
    text-align: center;
}

.cta-box h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0f172a;
}

.cta-box p {
    color: #475569;
    font-size: 1.05rem;
    max-width: 580px;
    margin: 0 auto 28px auto;
    line-height: 1.6;
}

.btn-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-instagram:hover {
    opacity: 0.92;
    transform: translateY(-2px);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 991px) {

    .services-grid,
    .classes-grid,
    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-btn {
        width: 100%;
    }

    .cta-box {
        padding: 32px 16px;
    }

    .cta-box h2 {
        font-size: 1.4rem;
    }

    .btn-instagram {
        width: 100%;
        /* Растягивается на всю ширину на смартфонах */
        padding: 14px 16px;
        /* Уменьшаем боковые отступы */
        font-size: 0.95rem;
        /* Слегка уменьшаем размер шрифта для мобилок */
        text-align: center;
    }
}








/* Контейнер баннера в стиле общего сайта */
.book-banner-container {
    background-color: #f8f9fa;
    border: 2px solid #222222;
    border-left: 4px solid #222222;
    padding: 24px;
    margin: 30px 0;
    box-sizing: border-box;
}

/* Бэдж состояния */
.book-banner-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #0056b3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

/* Заголовки */
.book-banner-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #111111 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

.book-banner-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: #666666;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Описание в стиле интро автора */
.book-banner-intro {
    font-size: 15px;
    line-height: 1.5;
    color: #333333;
    margin-bottom: 20px;
}

/* Прогресс-бар */
.book-banner-progress-wrapper {
    background: #ffffff;
    border: 1px solid #222222;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #222222;
    margin-bottom: 8px;
}

.progress-info strong {
    color: #0056b3;
}

.progress-bar-bg {
    width: 100%;
    height: 10px;
    background-color: #e9ecef;
    border: 1px solid #222222;
}

.progress-bar-fill {
    height: 100%;
    background-color: #222222;
    transition: width 0.3s ease;
}

/* Кнопки в стиле навигации .main-nav a */
.book-banner-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.book-btn-primary {
    color: #ffffff !important;
    background-color: #222222;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    transition: background-color 0.2s ease;
    display: inline-block;
}

.book-btn-primary:hover {
    background-color: #0056b3;
    color: #ffffff !important;
}

.book-btn-secondary {
    color: #222222 !important;
    background-color: transparent;
    border: 1px solid #222222;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 17px;
    transition: all 0.2s ease;
    display: inline-block;
}

.book-btn-secondary:hover {
    background-color: #222222;
    color: #ffffff !important;
}

/* Адаптивность */
@media (max-width: 600px) {
    .book-banner-container {
        padding: 18px 15px;
    }

    .book-banner-title {
        font-size: 20px !important;
    }

    .book-banner-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .book-btn-primary,
    .book-btn-secondary {
        text-align: center;
    }
}









/* Главный контейнер в стиле сайта */
.landing-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 0 40px 0;
    font-family: inherit;
    color: #333333;
}

/* Шапка */
.landing-header {
    border-bottom: 2px solid #222222;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.landing-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #0056b3;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.landing-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #111111 !important;
    margin: 0 0 6px 0 !important;
}

.landing-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #666666;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.landing-lead {
    font-size: 18px;
    line-height: 1.5;
    color: #222222;
    margin-bottom: 24px;
}

/* Карточка CTA */
.landing-cta-card {
    background: #f8f9fa;
    border: 2px solid #222222;
    border-left: 4px solid #222222;
    padding: 20px;
    margin-top: 20px;
}

.cta-price {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 12px;
}

.cta-price span {
    font-size: 22px;
    font-weight: 800;
    color: #0056b3;
}

.landing-btn-main {
    display: block;
    text-align: center;
    background-color: #222222;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 20px;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}

.landing-btn-main:hover {
    background-color: #0056b3;
    color: #ffffff !important;
}

.cta-note {
    font-size: 12px;
    color: #666666;
    margin-top: 8px;
    text-align: center;
}

/* Секции */
.landing-section {
    margin-bottom: 35px;
}

.landing-section h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin: 0 0 15px 0 !important;
}

/* Интро-манифест */
.author-manifesto {
    background: #ffffff;
    border-left: 3px solid #222222;
    padding: 10px 0 10px 18px;
    font-size: 16px;
    line-height: 1.6;
}

/* Прогресс-бар */
.progress-section {
    background: #f8f9fa;
    border: 1px solid #222222;
    padding: 16px 20px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: #222222;
    margin-bottom: 10px;
}

.progress-bar-outer {
    width: 100%;
    height: 12px;
    background-color: #e9ecef;
    border: 1px solid #222222;
}

.progress-bar-inner {
    height: 100%;
    background-color: #222222;
}

/* Оглавление и Аккордеон */
.toc-hint {
    font-size: 14px;
    color: #666666;
    margin-bottom: 15px;
}

.toc-part-header {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    color: #111111;
    background: #e9ecef;
    padding: 8px 12px;
    margin: 20px 0 10px 0;
    border-left: 3px solid #222222;
}

.toc-item {
    border: 1px solid #222222;
    margin-bottom: 8px;
    background: #ffffff;
}

.toc-trigger {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: inherit;
    gap: 10px;
}

.toc-title {
    font-size: 15px;
    font-weight: 700;
    color: #111111;
}

.toc-trigger:hover .toc-title {
    color: #0056b3;
}

/* Бэджи статусов */
.toc-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-ready {
    background-color: #222222;
    color: #ffffff;
}

.badge-process {
    background-color: #0056b3;
    color: #ffffff;
}

.badge-planned {
    background-color: #f8f9fa;
    color: #666666;
    border: 1px solid #cccccc;
}

/* Контент главы (скрытый по умолчанию) */
.toc-content {
    display: none;
    padding: 0 16px 14px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #444444;
    border-top: 1px dashed #e9ecef;
}

.toc-content ul {
    margin: 10px 0 0 20px;
    padding: 0;
}

.toc-item.active .toc-content {
    display: block;
}

/* Футер лендинга */
.landing-footer-cta {
    background: #f8f9fa;
    border: 2px solid #222222;
    padding: 30px 20px;
    text-align: center;
    margin-top: 40px;
}

.landing-footer-cta h2 {
    margin-bottom: 10px !important;
}

.landing-footer-cta p {
    font-size: 15px;
    margin-bottom: 20px;
}

/* Мобильная адаптивность */
@media (max-width: 600px) {
    .landing-title {
        font-size: 24px !important;
    }

    .landing-lead {
        font-size: 16px;
    }

    .toc-trigger {
        flex-direction: column;
        align-items: flex-start;
    }

    .toc-badge {
        margin-top: 4px;
    }
}






/* Стили для соцсетей в боковой колонке */
.sidebar-socials {
    display: flex;
	flex-direction: row;
    gap: 7px;
    margin-bottom: 12px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    color: #334155;
}

.social-link svg {
    flex-shrink: 0;
}

.social-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Оформление Instagram */
.social-link.instagram:hover {
    background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
    color: #ffffff;
    border-color: transparent;
}

/* Оформление Telegram */
.social-link.telegram:hover {
    background-color: #229ed9;
    color: #ffffff;
    border-color: transparent;
}















/* Общий контейнер страницы */
.contacts-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #1e293b;
}

/*
.contacts-header h1 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0f172a;
}
*/
.contacts-mainheader {
    margin-bottom: 15px;
}

.contacts {
    display: flex;
    justify-content: space-between;
}

.contacts-header,
.resume-header {
    flex: 0 1 400px;
    /* Разрешает блоку сжиматься, если не хватает места */
    max-width: 400px;
    /* Жестко ограничивает максимальную ширину */
}

.contacts-intro {
    font-size: 16px;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 28px;
    padding: 3px;
}

/* Блок1 со ссылками на мессенджеры и Блок2 со ссылками на соцсети в одну линию */
.messengers-row {
    display: flex;
    flex-wrap: wrap;
    /* Автоматический перенос на мобильных устройствах */
    gap: 12px;
    margin-bottom: 30px;
    justify-content: space-between;
    align-items:center;
}

.socials-row {
    display: flex;
    flex-wrap: wrap;
    /* Автоматический перенос на мобильных устройствах */
    gap: 12px;
    margin-bottom: 30px;
    justify-content: space-between;
}

/* Кнопка мессенджер соцсети */
.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Стилизация иконки SVG внутри кнопки */
.social-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* WhatsApp */
.social-btn.whatsapp:hover {
    background-color: #f0fdf4;
    color: #16a34a;
    border-color: #bbf7d0;
}

/* Цвета акцентов при наведении */
.social-btn.instagram:hover {
    background-color: #fdf2f8;
    color: #db2777;
    border-color: #fbcfe8;
}

.social-btn.telegram:hover {
    background-color: #f0f9ff;
    color: #0284c7;
    border-color: #bae6fd;
}

.social-btn.instagram-alt:hover {
    background-color: #f0fdf4;
    color: #16a34a;
    border-color: #bbf7d0;
}





/* Линия-разделитель */
.contacts-divider {
    border: 0;
    height: 1px;
    background: #e2e8f0;
    margin: 30px 0;
}

.socials-row-smm {
    display: flex;
    flex-direction: column;
    flex: 0 1 245px;
}




/* Блок Резюме */
.resume-block {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
}

.resume-file {
    display: flex;
}

.resume-label {
    font-weight: 700;
    color: #0f172a;
    display: block;
    padding: 7px 5px 0 0;
}

.resume-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.document-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* При наведении иконка слегка приподнимается */
.resume-link:hover .document-icon {
    transform: translateY(-1px);
}





/* ==========================================
   Адаптив под экраны смартфонов (до 768px)
   ========================================== */
@media (max-width: 768px) {

    /* 1. Переводим главный контейнер в одну колонку */
    .contacts {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    /* 2. Левый блок с текстом занимает всю ширину */
    .contacts-header {
        max-width: 100%;
        flex: 0 1 0px;
    }

    /* 3. Корректируем шрифты для мобильных */
    .contacts-mainheader h1 {
        font-size: 22px;
        line-height: 1.1;
        margin-bottom: 12px;
    }

    .contacts-intro {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 8px;
    }

    /* 4. Кнопки мессенджеров растягиваются на всю ширину экрана */
    .messengers-row {
        width: 100%;
        min-width: 100%;
    }

    .socials-row {
        flex-direction: column;
        align-items: stretch;
        display: block;
    }
    
    .socials-row-smm {
        margin-bottom: 25px;
    }

    .social-btn {
        width: 100%;
        padding: 14px 16px;
        /* Увеличенная область клика пальцем */
        font-size: 15px;
        justify-content: center;
    }

    .resume-block {
    	display:block;
    }
    
    .resume-header {
     	margin-bottom: 7px;
    }
}












/* ==========================================
   Карточка блогера (Каталог rabotaest.kz)
   ========================================== */
.blogger-card {
    display: flex;
    height: 190px;
    max-height: 190px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
}

.blogger-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Левая часть — Изображение */
.blogger-media {
    width: 170px;
    min-width: 170px;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #f8fafc;
    flex-shrink: 0;
}

.blogger-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.blogger-card:hover .blogger-img {
    transform: scale(1.04);
}

/* Метка категории/ниши поверх фото */
.blogger-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Правая часть — Контент */
.blogger-body {
    flex: 1;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Шапка: Имя + Метрики */
.blogger-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.blogger-name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.blogger-name a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.15s ease;
}

.blogger-name a:hover {
    color: #006ce4;
}

.blogger-handle {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* Метрики */
.blogger-stats {
    display: flex;
    gap: 12px;
    background-color: #f8fafc;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #f1f5f9;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}

.stat-label {
    font-size: 9px;
    color: #64748b;
    margin-top: 2px;
}

/* Описание с обрезкой в 2 строки */
.blogger-bio {
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
    margin: 6px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Подвал карточки */
.blogger-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
}

.blogger-socials {
    display: flex;
    gap: 8px;
}

.blogger-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    transition: all 0.2s ease;
}

.blogger-social-link svg {
    width: 14px;
    height: 14px;
}

.blogger-social-link.insta:hover {
    background: #fdf2f8;
    color: #db2777;
}

.blogger-social-link.tg:hover {
    background: #f0f9ff;
    color: #0284c7;
}

.blogger-contact-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background-color: #006ce4;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.blogger-contact-btn:hover {
    background-color: #0056b3;
}

.blogger-contact {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #1e293b;
    font-size: 16px;
}

/* ==========================================
   Адаптив под мобильные устройства (до 600px)
   ========================================== */
@media (max-width: 600px) {
    .blogger-card {
        height: auto;
        max-height: none;
        flex-direction: column;
    }

    .blogger-media {
        width: 100%;
        min-width: 100%;
        height: 140px;
    }

    .blogger-header {
        flex-direction: column;
        gap: 6px;
    }

    .blogger-stats {
        align-self: flex-start;
    }
}






/* Основные стили подвала */
.site-footer {
    background-color: #1a1a1a;
    color: #e0e0e0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding-top: 50px;
    margin-top: 60px;
    font-size: 14px;
    line-height: 1.6;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}

.footer-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
}

.footer-title::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background-color: #0088cc; /* Акцентный цвет */
    margin-top: 8px;
}

.footer-desc {
    color: #a0a0a0;
    margin-bottom: 20px;
}

/* Списки ссылок */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a,
.footer-socials a {
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.footer-links a:hover,
.footer-socials a:hover {
    color: #ffffff;
}

/* Соцсети */
.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-socials a {
    background-color: #2a2a2a;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
}

.footer-socials a:hover {
    background-color: #0088cc;
}

/* Кнопка действия */
.footer-btn {
    display: inline-block;
    background-color: #0088cc;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.footer-btn:hover {
    background-color: #006699;
}

/* Нижняя часть подвала (копирайт) */
.footer-bottom {
    border-top: 1px solid #2a2a2a;
    margin-top: 40px;
    padding: 20px 0;
    background-color: #141414;
    color: #888888;
    font-size: 13px;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
}

.footer-legal a {
    color: #888888;
    text-decoration: none;
}

.footer-legal a:hover {
    color: #cccccc;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
}