/* ==========================================
   Сетка карточек журнала
   ========================================== */
.journal-home {
    padding: 100px 0;
    background-color: var(--color-bg-champagne);
}

@media (max-width: 576px) {
.journal-home {
    padding: 50px 0;
    background-color: var(--color-bg-champagne);
}
}
.journal-home__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
    flex-wrap: wrap;
    gap: 20px;
}

.journal-home__header .section-title {
    margin-bottom: 0;
}

.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* ==========================================
   Дизайн карточки поста
   ========================================== */
.journal-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eae8e1;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.journal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(197, 155, 39, 0.1);
}

.journal-card__thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--color-card-champagne);
}

.journal-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.journal-card:hover .journal-card__img {
    transform: scale(1.05);
}

/* Золотой ярлык рубрики */
.journal-card__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--color-gold-gradient);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
}

.journal-card__info {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.journal-card__title {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
    margin-bottom: 12px;
}

.journal-card__excerpt {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 24px;
    flex-grow: 1;
}

.journal-card__more {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.journal-card__more span {
    transition: transform 0.3s ease;
}

.journal-card:hover .journal-card__more span {
    transform: translateX(5px);
    color: var(--color-gold);
}

/* ==========================================
   Страница архива (Лента постов)
   ========================================== */
.journal-archive {
    padding: 100px 0;
    background-color: #ffffff;
    min-height: 70vh;
}

.journal-archive__subtitle {
    color: var(--color-text-muted);
    margin-bottom: 40px;
    font-size: 1.1rem;
}

.journal-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 60px;
}

.journal-filter__link {
    padding: 8px 20px;
    border-radius: 30px;
    border: 1px solid rgba(42, 40, 36, 0.1);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
    transition: all 0.3s ease;
}

.journal-filter__link:hover,
.journal-filter__link.active {
    background-color: var(--color-dark-accent);
    border-color: var(--color-dark-accent);
    color: #ffffff;
}

.journal-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 60px;
}

.journal-pagination .page-numbers {
    padding: 10px 16px;
    border: 1px solid #eae8e1;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.journal-pagination .page-numbers:hover,
.journal-pagination .current {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: #fff;
}

/* ==========================================
   Страница отдельного поста (Single)
   ========================================== */
.journal-single {
    padding: 80px 0;
    background-color: var(--color-bg-champagne);
}

.journal-single .container {
    max-width: 900px;
    /* Сужаем контент для удобного чтения */
}

.journal-single__header {
    text-align: center;
    margin-bottom: 40px;
}

.journal-single__cat {
    display: inline-block;
    background: var(--color-gold-gradient);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

.journal-single__title {
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.2;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 16px;
}

.journal-single__meta {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.journal-single__thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    margin-bottom: 40px;
}

.journal-single__footer {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(42, 40, 36, 0.1);
    text-align: center;
}

/* ==========================================
   Адаптивная обертка для видео из ВК
   ========================================== */
.vk-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* Пропорция 16:9 */
    height: 0;
    overflow: hidden;
    margin-bottom: 40px;
    border-radius: 16px;
    background-color: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.vk-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Оформление контента внутри редактора WordPress */
.journal-single__content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text);
}

.journal-single__content h2,
.journal-single__content h3 {
    margin: 40px 0 20px;
    color: var(--color-text);
}

.journal-single__content p {
    margin-bottom: 20px;
}

.journal-single__content ul,
.journal-single__content ol {
    margin-bottom: 24px;
    padding-left: 20px;
}

.journal-single__content li {
    margin-bottom: 10px;
}

.journal-single__content blockquote {
    padding: 20px 30px;
    background-color: #ffffff;
    border-left: 4px solid var(--color-gold);
    font-style: italic;
    border-radius: 0 12px 12px 0;
    margin: 30px 0;
}

/* ==========================================
   Адаптив блога
   ========================================== */
@media (max-width: 991px) {
    .journal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .journal-home__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .journal-grid {
        grid-template-columns: 1fr;
    }

    .vk-video-wrapper {
        border-radius: 8px;
    }

    .journal-single__title {
        font-size: 1.8rem;
    }
}

/* Добавляем премиальный фильтр для всех превью в Журнале */
.journal-card__thumb,
.journal-single__thumbnail {
    position: relative;
}

/* Приглушаем цвета и добавляем контрастности оригинальному фото */
.journal-card__img,
.journal-single__thumbnail img {
    filter: grayscale(85%) contrast(1.1) brightness(0.9);
}

/* Накладываем фирменный дорогой градиент поверх картинки */
.journal-card__thumb::after,
.journal-single__thumbnail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(42, 40, 36, 0.5) 0%, rgba(197, 155, 39, 0.15) 100%);
    pointer-events: none;
    /* чтобы градиент не перекрывал клики */
    z-index: 1;
}

/* ==========================================
   Миниатюры карточек в ленте блога и рубрик
   ========================================== */
.journal-card__thumb {
    position: relative;
    width: 100%;
    /* Строгая пропорция 16:9, идеально для исходников 1024x576 */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* Если у карточек есть скругления, задаем их здесь. Например: */
    border-radius: 12px 12px 0 0;
}

.journal-card__img {
    width: 100%;
    height: 100%;
    /* cover заполнит область 16:9. Так как исходник тоже 16:9, ничего не обрежется */
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* Резервный блок, если картинки нет */
.journal-card__placeholder {
    width: 100%;
    height: 100%;
    background-color: #e2e2e2;
    aspect-ratio: 16 / 9;
}

/* Легкий эффект увеличения картинки при наведении на карточку (по желанию) */
.journal-card:hover .journal-card__img {
    transform: scale(1.05);
}

/* ==========================================
   Убираем затемняющий фон (overlay) с миниатюр карточек
   ========================================== */
.journal-card__thumb::before,
.journal-card__thumb::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
}

/* На всякий случай убираем затемнение самой картинки, если оно было задано через фильтры */
.journal-card__img {
    filter: brightness(1) !important;
    opacity: 1 !important;
}

/* ==========================================
   Слайдер отзывов / Скриншотов (CSS Scroll Snap)
   ========================================== */
.review-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Включаем привязку скролла */
    gap: 16px;

    /* Скрываем скроллбар для эстетики */
    scrollbar-width: none;
    /* Для Firefox */
    -ms-overflow-style: none;
    /* Для IE/Edge */

    /* Добавляем небольшие скругления для самого контейнера слайдера */
    border-radius: 16px;
}

/* Скрываем скроллбар в Chrome/Safari */
.review-slider::-webkit-scrollbar {
    display: none;
}

.review-slider__slide {
    /* На ПК: если это двойная сетка, слайд занимает 100% своей колонки. 
       Если одиночная - можно показывать по 2 фото на ПК (50%). 
       По умолчанию ставим 100%, чтобы фото было крупным. */
    flex: 0 0 100%;
    scroll-snap-align: center;
    position: relative;
}

/* Если в настройках поста только отзывы (journal-media--single),
   на ПК показываем сразу несколько фото (по 2 в ряд внутри слайдера) */
.journal-media--single .review-slider__slide {
    flex: 0 0 calc(50% - 8px);
}

.review-slider__slide img {
    width: 100%;
    height: 100%;
    /* Для скриншотов часто лучше использовать contain, чтобы не обрезался текст,
       но я оставляю cover для сохранения вашего дизайна. 
       Измените на contain, если текст на отзывах срезается. */
    object-fit: contain;
    display: block;
    border-radius: 16px;
}

.review-slider__hint {
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 12px;
    opacity: 0.6;
    display: none;
    /* По умолчанию скрыто на ПК (там листают мышью) */
}

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

    .review-slider__slide,
    .journal-media--single .review-slider__slide {
        /* На мобильных устройствах слайд всегда занимает 100% экрана,
           создавая классическую свайп-галерею по одной фотографии */
        flex: 0 0 100%;
    }

    /* Показываем подсказку для свайпа на мобильных экранах */
    .review-slider__hint {
        display: block;
    }
}
/* ==========================================
   Кнопка "Листать дальше" на ПК (вынесена за границу)
   ========================================== */
.review-slider-wrapper {
    position: relative;
    width: 100%;
}

.review-slider__next {
    position: absolute;
    top: 50%;
    /* Вместо right: 16px; выталкиваем кнопку за правую границу + отступ 20px */
    left: calc(100% + 20px);
    transform: translateY(-50%);
    z-index: 10;

    display: flex;
    align-items: center;
    gap: 8px;

    background: #ffffff;
    /* Делаем непрозрачным, так как фон теперь не фото */
    border: 1px solid rgba(197, 155, 39, 0.2);
    color: var(--color-text);
    padding: 10px 18px 10px 22px;
    border-radius: 40px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    font-family: inherit;
    outline: none;

    /* Запрещаем тексту переноситься на новую строку, чтобы кнопка не ломалась */
    white-space: nowrap;
}

.review-slider__next-text {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.review-slider__next svg {
    transition: transform 0.3s ease;
}

.review-slider__next:hover {
    background: #ffffff;
    color: var(--color-gold);
    border-color: var(--color-gold);
    box-shadow: 0 6px 20px rgba(197, 155, 39, 0.15);
}

.review-slider__next:hover svg {
    transform: translateX(4px);
}

/* 
  ВАЖНОЕ ДОПОЛНЕНИЕ:
  Так как кнопка вылезает за пределы контентной области (900px), 
  на экранах меньше 1250px ей может не хватить места на экране (появится горизонтальный скролл). 
  Поэтому на средних экранах мы возвращаем её внутрь на край фото. 
*/
@media (max-width: 1250px) {
    .review-slider__next {
        left: auto;
        right: 16px;
        /* Возвращаем внутрь поверх фото */
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(5px);
    }
}

/* Прячем кнопку на мобильных (оставляем только свайп) */
@media (max-width: 768px) {
    .review-slider__next {
        display: none !important;
    }
}

/* ==========================================
   Галерея отзывов ВНУТРИ карточки архива (category-testotimonials)
   ========================================== */
.journal-card__thumb .review-slider--card {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 0;
    /* Чтобы края обрезались общим контейнером thumb */
}

.journal-card__thumb .review-slider--card::-webkit-scrollbar {
    display: none;
}

.journal-card__thumb .review-slider__slide {
    flex: 0 0 100%;
    /* Внутри карточки показываем строго 1 фото (на всех устройствах) */
    scroll-snap-align: center;
    height: 100%;
    position: relative;
}

/* Растягиваем ссылки на картинках на всю ширину (если фото одно) */
.journal-card__img-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Бейдж-подсказка поверх карточки, чтобы пользователи понимали, что можно свайпать */
.review-slider__hint-card {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    color: var(--color-text);
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 5;
    pointer-events: none;
    /* Пропускаем клики сквозь подсказку */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ==========================================
   Уникальный дизайн карточек для рубрики Отзывы (во весь рост)
   ========================================== */

/* Отменяем жесткую пропорцию 16:9, чтобы карточка тянулась вниз за фото */
.journal-card--testimonial .journal-card__thumb {
    aspect-ratio: auto;
    height: auto;
    background-color: transparent;
}

/* Позволяем самой картинке показать всю свою высоту */
.journal-card--testimonial .journal-card__img {
    height: auto;
    /* Высота подстроится под пропорции файла */
    object-fit: contain;
    /* Гарантирует, что скриншот не будет срезан по краям */
    display: block;
    width: 100%;
}

.journal-card--testimonial .journal-card__img-link {
    height: auto;
}

/* Адаптируем галерею под свободную высоту */
.journal-card--testimonial .review-slider--card {
    height: auto;
    align-items: flex-start;
    /* Если в галерее скрины разной длины, они не будут искажаться */
}

.journal-card--testimonial .review-slider__slide {
    height: auto;
}

/* Настраиваем фон под скриншотами на случай, если они разной ширины/высоты */
.journal-card--testimonial .review-slider__slide,
.journal-card--testimonial .journal-card__img-link {
    background-color: #f8f8f8;
    /* Легкий фон, если фото не перекрывает 100% ширины */
}