/*
Theme Name:  NewsTwenty Child
Template:    newsup
Description: Child theme of Newsup/NewsTwenty for Esoteric Universe
Version:     1.18.8
*/

/* ═══════════════════════════════════════════════════════════════════════════
   ДИЗАЙН-СИСТЕМА — единые брейкпоинты, плитки, отступы.
   ВНИМАНИЕ: для сетки используется auto-fit + minmax — НЕ media queries.
   Это устойчиво к LiteSpeed CSS minify/combine.

   Брейкпоинты (для случаев когда без media queries не обойтись):
     --bp-mobile-l : 480px   (узкие телефоны → широкие)
     --bp-tablet   : 768px   (телефоны → планшеты)
     --bp-laptop   : 1024px  (планшеты → ноутбуки)
     --bp-desktop  : 1280px  (ноутбуки → десктоп)

   Плитки — использовать утилитарные классы:
     .eso-grid              универсальный auto-fit (карточка минимум 280px)
     .eso-grid--sm          карточки минимум 220px (узкие, для иконок)
     .eso-grid--lg          карточки минимум 320px (широкие, для хабов)
     .eso-grid--3-fixed     ровно 3 колонки на десктопе, 2 на планшете, 1 на телефоне

   Отступы вертикальные:
     --space-xs : 8px
     --space-sm : 16px
     --space-md : 24px
     --space-lg : 40px
     --space-xl : 64px
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --bp-mobile-l: 480px;
    --bp-tablet:   768px;
    --bp-laptop:   1024px;
    --bp-desktop:  1280px;

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;

    --eso-card-radius: 8px;
    --eso-card-border: 1px solid #eee;
    --eso-card-shadow-hover: 0 4px 12px rgba(0,0,0,0.08);
}

/* Универсальная плитка — auto-fit заполняет столько колонок сколько влезает,
   minmax(280px, 1fr) гарантирует что карточка не уже 280px и не шире доли строки.
   На 1470px это даёт 4-5 колонок, на 1024px — 3, на 768px — 2, на 375px — 1. */
.eso-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
}
.eso-grid--sm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-sm);
}
.eso-grid--lg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-md);
}

/* Карточка-плитка — общий вид для всех плиток сайта */
.eso-card {
    display: block;
    color: inherit;
    text-decoration: none;
    border: var(--eso-card-border);
    border-radius: var(--eso-card-radius);
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
}
.eso-card:hover {
    box-shadow: var(--eso-card-shadow-hover);
    transform: translateY(-2px);
    text-decoration: none;
}
.eso-card__thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f0f0f0;
}
.eso-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.eso-card:hover .eso-card__thumb img {
    transform: scale(1.04);
}
.eso-card__title {
    padding: 14px 16px;
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 600;
    color: #1a1a1a;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Хаб-плитки (CPT-archive: /astrology/, /tarot/, …)
   Используется на archive-{cpt}.php. Конфиг в inc/hub-tiles.php.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Контейнер хаб-архива — повторяет масштаб /horoscopes/ (parent-темы).
   На /horoscopes/ внешний .container parent-темы имеет padding: 0 50px на десктопе
   (>=992px). Дублируем тот же масштаб явно, чтобы не зависеть от media-query parent. */
.eso-hub-archive-wrap {
    margin: 0 auto;
    padding: var(--space-md) 50px 0; /* 24px сверху — воздух между меню и crumbs */
    max-width: none;
}
@media (max-width: 991px) {
    .eso-hub-archive-wrap {
        padding: var(--space-md) 15px 0;
    }
}
.eso-hub-archive {
    padding: 0 0 var(--space-md); /* убрали padding-top: разделитель = margin-bottom у crumbs (24px) */
}
.eso-hub-archive__header {
    margin-bottom: var(--space-md); /* 24px после заголовка */
}

/* Пропорции: контент 66.66% / сайдбар 33.33% — как Bootstrap col-md-8 / col-md-4
   parent-темы на /horoscopes/. Padding 0 15px эмулирует col-* gutters Bootstrap,
   чтобы внутренний контент совпадал по x/w с /horoscopes/ (article x=50, w=883). */
.eso-hub-archive .eso-hub-content {
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
    padding-left: 15px;
    padding-right: 15px;
}
.eso-hub-archive .eso-hub-sidebar {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding-left: 15px;
    padding-right: 15px;
}
@media (max-width: 991px) {
    .eso-hub-archive .eso-hub-content,
    .eso-hub-archive .eso-hub-sidebar {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
}
/* Sticky sidebar — плывёт со скроллом на десктопе.
   align-self: flex-start обязательно — иначе flex-child получает stretch
   на полную высоту row и sticky не работает. */
@media (min-width: 992px) {
    .eso-hub-archive .eso-hub-sidebar {
        position: sticky;
        top: 20px;
        align-self: flex-start;
    }
}

/* Скрываем блок «You missed» parent-темы на всех страницах сайта.
   Это статичная плашка из parent-темы, не имеющая смысла в нашей структуре. */
.missed-inner,
.missed-section,
.you-missed,
[class*="missed-"] {
    display: none !important;
}
.eso-hub-archive__header .page-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--space-sm);
    color: #1a1a1a;
}
.eso-hub-archive__header .archive-description {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

.eso-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 в ряд на десктопе/планшете */
    gap: 20px; /* 20px — как vertical gap между постами на /horoscopes/ */
}
@media (max-width: 575px) {
    .eso-hub-grid {
        grid-template-columns: 1fr; /* 1 в ряд на мобилке */
    }
}

/* Модификатор для главной — «Explore All Topics» (13 плиток).
   Главная теперь имеет sidebar справа (col-md-8), поэтому 2 в ряд на десктопе,
   1 в ряд на мобиле (стандарт .eso-hub-grid через @media). */
.eso-hub-grid--all-categories {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}
.eso-hub-grid--all-categories .eso-hub-tile__title {
    padding: 12px 16px;
    font-size: 18px;
    line-height: 24px;
}

.eso-hub-tile {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    border: var(--eso-card-border);
    border-radius: var(--eso-card-radius);
    overflow: hidden;
    background: #fff;
    position: relative;
    transition: box-shadow 0.2s, transform 0.2s;
}
.eso-hub-tile:hover {
    box-shadow: var(--eso-card-shadow-hover);
    transform: translateY(-3px);
    text-decoration: none;
    color: inherit;
}

.eso-hub-tile__thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f0f0f0;
}
.eso-hub-tile__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
    border-radius: 0; /* перебиваем глобальное .wp-post-image — внутри карточки скругление не нужно */
}
.eso-hub-tile:hover .eso-hub-tile__thumb img {
    transform: scale(1.04);
}
.eso-hub-tile__thumb--placeholder {
    background: linear-gradient(135deg, #f5f5f5 0%, #d8d8d8 100%);
}

.eso-hub-tile__title {
    padding: 16px 20px;
    font-size: 22px; /* как заголовок поста на /horoscopes/ (parent-тема) */
    line-height: 32px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: left;
}

/* Coming soon — серая, без ссылки */
.eso-hub-tile--coming-soon {
    opacity: 0.55;
    cursor: not-allowed;
}
.eso-hub-tile--coming-soon:hover {
    transform: none;
    box-shadow: none;
}
.eso-hub-tile__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Глобальные правила для post thumbnails ────────────────────────────────
   Все featured-image (на single, в виджетах, в карточках) получают единый стиль.
   Внутри карточек с overflow:hidden закругление не виден — оно подменяется
   закруглением самой карточки, что и нужно. */
.wp-post-image {
    border-radius: var(--eso-card-radius);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Унификация скругления элементов parent-темы (NewsTwenty/Newsup)
   Чтобы весь сайт был в одном стиле. Все радиусы — через CSS-переменную.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Карточки постов на архивных страницах (/crystals/, /tarot/, …).
   Parent-тема ставит padding: 20px 0 → превью не доходит до краёв карточки.
   Убираем эти отступы — превью flush к верху/низу/левому краю.
   align-items: flex-start — обе колонки сверху (НЕ stretch, чтобы не ломать aspect-ratio превью). */
.mg-posts-sec-post,
article.mg-posts-sec-post {
    border-radius: var(--eso-card-radius) !important;
    overflow: hidden !important;
    padding: 0 !important;
    align-items: flex-start !important;
}

/* Колонка с превью (первая) — без Bootstrap gutter */
.mg-posts-sec-post > [class*="col-"]:first-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-self: stretch;  /* колонка растягивается по высоте карточки */
}

/* Колонка с текстом (вторая) — нормальный padding */
.mg-posts-sec-post > [class*="col-"]:nth-child(2) {
    padding: 20px 24px !important;
}

/* Превью архивных карточек — background-image (не <img>).
   Aspect-ratio 3:2 совпадает с пропорцией наших картинок (800×533 от Flux 2 Pro)
   → background-size: cover работает как идеальная подгонка, ничего не обрезает.
   width: 100%; height: 100% заполняют свою колонку. */
.mg-post-thumb,
.mg-post-thumb.back-img {
    border-radius: 0;
    overflow: hidden;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 2 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Главный контейнер single-страницы — большой белый «лист» с тенью.
   Скругляем углы; overflow НЕ ставим, чтобы не обрезать absolute-элементы внутри. */
.mg-blog-post-box {
    border-radius: var(--eso-card-radius);
}

/* Виджеты сайдбара (Search, Recent posts, Categories, Archives).
   Parent-тема ставит `.mg-sidebar .mg-widget { border-radius: 0 }` (specificity 0,2,0),
   поэтому используем !important или равную/большую специфичность. */
.mg-sidebar .mg-widget,
.mg-sidebar .widget,
.mg-sidebar .widget_block,
.sidebar .widget,
footer .mg-widget,
.mg-widget,
.widget,
.widget_block {
    border-radius: var(--eso-card-radius) !important;
    overflow: hidden;
}

/* Поле и кнопка поиска */
.wp-block-search__input,
.search-form input[type="search"],
input[type="search"],
input[type="text"],
input[type="email"] {
    border-radius: var(--eso-card-radius);
}
.wp-block-search__button,
.search-form button,
.search-form input[type="submit"] {
    border-radius: var(--eso-card-radius);
}

/* Бэйджи / плашки на главной и в шапке статьи */
.bn_title,
.mg-featured-slider,
.mg-info-author-block,
.missed-inner {
    border-radius: var(--eso-card-radius);
}

/* Скрытие byline (автор/аватар) — оставляем только дату публикации.
   Newsup parent рендерит .mg-info-author-block дважды:
   1) над контентом — аватар + «By email» + дата → скрываем avatar+email, дату оставляем
   2) после контента — аватар + «By email» без даты → скрываем блок целиком */
.mg-info-author-block .mg-author-pic,
.mg-info-author-block .media-heading {
    display: none !important;
}
.mg-info-author-block .media-body {
    margin-left: 0 !important;
}
/* Нижний дубль-блок (только bio, без даты) — спрятать целиком */
.mg-info-author-block:not(:has(.mg-blog-date)) {
    display: none !important;
}

/* Parent-archive листинги (Newsup) используют .mg-blog-meta вместо .mg-info-author-block.
   Прячем автора (a.auth) и admin-only edit-link, дату оставляем. */
.mg-blog-meta a.auth,
body.archive .edit-link,
body.single .edit-link {
    display: none !important;
}

/* Обёртка Related — раньше имела сплошную рамку без радиуса.
   Сейчас оставляем тонкий top-divider (он уже задан выше как border-top). */
.esoterika-related {
    border-radius: 0;
}

/* Кнопки соцсетей внизу статьи — крошечные, скругляем меньшим радиусом */
.post-share .link {
    border-radius: 4px;
}

/* ── Compact header ─────────────────────────────────────────────────────── */

.mg-nav-widget-area-back .inner {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.mg-nav-widget-area .row {
    align-items: center;
}

.site-logo img,
.custom-logo {
    max-height: 48px;
    width: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ЛОГО САЙТА — Esoteric Universe
   Космический фон (images/logo-bg.jpg) + Montserrat 700 белый CAPS
   Размер 320×80 компактный, шрифт от parent-темы (--headFont).
   ═══════════════════════════════════════════════════════════════════════════ */
.site-title {
    margin: 0 !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.site-title a,
body .site-title a {
    /* Космический фон-баннер */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 80px;
    background-image: url('images/logo-bg.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);

    /* Текст */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
    color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7), 0 0 30px rgba(212, 169, 55, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.site-title a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 24px rgba(212, 169, 55, 0.25);
}

@media (max-width: 575px) {
    .site-title a { width: 260px; height: 65px; font-size: 15px; letter-spacing: 1.5px; }
}

.site-description {
    display: none;
}

.navbar-wp {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.mg-headwidget .navbar-wp .navbar-nav > li > a {
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0.02em;
    font-family: 'DM Sans', sans-serif !important;
}

.mg-headwidget .navbar-wp .navbar-nav.nav {
    padding: 0 !important;
}

/* ── Front-page layout ──────────────────────────────────────────────────── */

/* Контейнер главной — повторяет структуру archive parent-темы (container > row).
   Воздух сверху/снизу — как у /tarot/, чтобы шапка не липла к меню. */
.fp-container {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.fp-row {
    /* Bootstrap row уже даёт нужный margin/padding; ничего сверху не добавляем */
}

/* В col-md-8 секции идут одна под другой — padding снижаем (внешний воздух
   обеспечивает .fp-container), оставляем только разделитель и внутренний gap. */
.fp-section {
    padding: 40px 0;
    border-bottom: 1px solid #f0f0f0;
}
.fp-section:first-child {
    padding-top: 0;
}
.fp-section:last-child {
    border-bottom: none;
}

/* Sidebar главной — sticky чтобы не оставлять пустоту при скролле */
.fp-sidebar {
    /* Bootstrap col-md-4 уже даёт корректную ширину */
}
@media (min-width: 992px) {
    .fp-sidebar {
        padding-top: var(--space-md);
    }
}

.fp-section-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: #1a1a1a;
}

.fp-section-subtitle {
    color: #777;
    font-size: 0.95rem;
    margin-bottom: 32px;
}

/* ── Post grid ──────────────────────────────────────────────────────────── */

.fp-post-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.fp-post-grid--3 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1024px) {
    /* На планшете в col-md-8 уже узко — переключаемся на 1 колонку */
    .fp-post-grid { grid-template-columns: 1fr; }
}

/* ── Post card ──────────────────────────────────────────────────────────── */

.fp-post-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}

.fp-post-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.10);
    transform: translateY(-3px);
    text-decoration: none;
}

.fp-card-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f0f0f0;
}

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

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

.fp-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.fp-card-body h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.4;
    color: #1a1a1a;
}

.fp-card-body p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* ── Compact card (Angel Numbers) ──────────────────────────────────────── */

.fp-post-grid--compact {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.fp-post-card--compact .fp-card-img {
    aspect-ratio: 1 / 1;
}

.fp-post-card--compact .fp-card-body {
    padding: 12px;
}

.fp-post-card--compact .fp-card-body h3 {
    font-size: 0.85rem;
    margin: 0;
    text-align: center;
}

/* ── Horoscope grid (wider cards) ──────────────────────────────────────── */

.fp-post-grid--horoscope {
    grid-template-columns: repeat(2, 1fr);
}

/* ── Section footer link ────────────────────────────────────────────────── */

.fp-section-link {
    margin-top: 32px;
    text-align: center;
}

.fp-section-link a {
    display: inline-block;
    padding: 10px 24px;
    border: 1.5px solid #1a1a1a;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.fp-section-link a:hover {
    background: #1a1a1a;
    color: #fff;
}

/* ── Featured image centering (single post only) ──────────────────────────
   ВНИМАНИЕ: правило ОГРАНИЧЕНО селектором .single-featured-image.
   Раньше включало и `.wp-post-image` — это перебивало картинки в Related
   (они тоже .wp-post-image и тоже на single-странице).
   Если потребуется применять к ещё одной обёртке — добавлять явный класс,
   а НЕ общий .wp-post-image. */
body.single .single-featured-image {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 75% !important;
    height: auto !important;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .fp-post-grid--horoscope,
    .fp-post-grid--compact { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .mg-headwidget .mg-head-detail {
        display: none;
    }
    .fp-section {
        padding: 36px 0;
    }
    .fp-post-grid,
    .fp-post-grid--horoscope { grid-template-columns: 1fr; }
    .fp-post-grid--compact { grid-template-columns: repeat(2, 1fr); }
}


/* ── Archive page-header (sr-only) ──────────────────────────────────────────
   На archive-страницах плашка «Archives: …» визуально не нужна — её роль
   выполняют breadcrumbs. H1 оставляем в DOM для SEO (sr-only паттерн).

   В parent-теме NewsTwenty H1 архива оборачивается в .mg-breadcrumb-section
   (тёмная плашка) → .overlay (белый фон, padding 30px 0) → .container-fluid
   → .row → .col-md-12 → .mg-breadcrumb-title → h1.title.

   На /astrology/ этой плашки нет, потому что используется кастомный
   template archive-astrology_post.php. Для всех остальных archive (tarot,
   horoscopes, birth-chart, и т.д.) — обнуляем padding и фон секции, чтобы
   плашка визуально исчезла. H1 при этом ОСТАЁТСЯ в DOM (sr-only) для SEO,
   а не убирается через display:none. */
body.archive .page-header .page-title,
body.archive .mg-breadcrumb-section .title,
body.archive .mg-breadcrumb-section .mg-breadcrumb-title {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
body.archive .page-header {
    margin: 0;
    padding: 0;
    border: none;
}
body.archive .mg-breadcrumb-section,
body.archive .mg-breadcrumb-section .overlay {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    height: 0 !important;
    border: none !important;
    line-height: 0 !important;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */

.esoterika-breadcrumbs {
    font-size: 14px;
    color: #444;
    margin: 0 0 var(--space-md) 0;
    line-height: 1.5;
}

/* На parent-archive страницах (horoscopes, tarot, numerology, crystals и т.д.)
   parent-тема Newsup оборачивает loop в .container-fluid.archive-class с
   padding 60px 0. Это даёт ~60px воздуха СВЕРХУ crumbs (которые инжектятся
   в начало loop). Уменьшаем до 24px, чтобы gap между меню и crumbs был
   симметричен gap между crumbs и первым постом (24px).
   На /astrology/ и других кастомных hub-шаблонах .archive-class отсутствует —
   правило не сработает, отступ задаётся через .eso-hub-archive-wrap. */
body.archive .container-fluid.archive-class {
    padding-top: var(--space-md) !important;
    padding-bottom: var(--space-md) !important;
}

/* ── Sidebar alignment на archive parent-шаблона ─────────────────────────────
   На archive-страницах parent-темы Newsup (horoscopes, tarot, crystals и т.д.)
   crumbs инжектятся через action loop_start ВНУТРИ main loop, поэтому они
   оказываются внутри колонки .mg-blog-area (col-md-8), а sidebar (col-md-4)
   стартует на том же уровне что и crumbs. Визуально Search оказывается выше
   первого поста на ~45px (высота crumbs + margin-bottom).

   Поднимаем aside на эту высоту через padding-top, чтобы Search визуально
   был на уровне первого поста колонки контента.

   Замеры (см. baseline /horoscopes/): crumbs height 21px + margin-bottom 24px
   = 45px. Используем 45px.

   ИСКЛЮЧЕНИЕ для всех hub-archive (CPT с конфигом плиток): там crumbs
   вынесены ВЫШЕ .row через col-md-12, aside и main стартуют уже на одном
   уровне с первой плиткой — лишний padding-top вреден.
   Класс .eso-hub-archive-page добавляет esoterika_hub_body_class() в functions.php. */
body.archive:not(.eso-hub-archive-page) .mg-sidebar {
    padding-top: 45px;
}
.esoterika-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}
.esoterika-breadcrumbs a:hover {
    color: #000;
    text-decoration: underline;
}
.esoterika-breadcrumbs .breadcrumb-sep {
    margin: 0 4px;
    color: inherit;
}
/* Воздух между breadcrumbs и первым блоком статьи (на любом контейнере) */
.esoterika-breadcrumbs + article,
.esoterika-breadcrumbs + section,
.esoterika-breadcrumbs + p,
.esoterika-breadcrumbs + h1,
.esoterika-breadcrumbs + h2 {
    margin-top: var(--space-md);
}

/* ── Related posts ───────────────────────────────────────────────────────── */

.esoterika-related {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid #eee;
}
.esoterika-related h2 {
    font-size: 22px;
    margin: 0 0 var(--space-md) 0;
    font-weight: 600;
}
/* Грид без media queries — auto-fit делает работу адаптивно сам.
   На 1470px = 4-5 колонок, 1024px = 3, 768px = 2, 375px = 1. */
.esoterika-related .esoterika-related-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: var(--space-sm) !important;
}
.esoterika-related-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    border: var(--eso-card-border);
    border-radius: var(--eso-card-radius);
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
}
.esoterika-related-card:hover {
    box-shadow: var(--eso-card-shadow-hover);
    transform: translateY(-2px);
    text-decoration: none;
}
/* Контейнер с фиксированной пропорцией — картинка обязана заполнить его на 100%.
   Парент-тема задаёт .attachment-medium max-width, поэтому используем !important. */
.esoterika-related-thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f0f0f0;
}
.esoterika-related-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    transition: transform 0.3s;
}
.esoterika-related-card:hover .esoterika-related-thumb img {
    transform: scale(1.04);
}
.esoterika-related-title {
    padding: 14px 16px;
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 600;
    color: #1a1a1a;
}

/* Карточки, перенесённые JS-ом в parent-блок .mg-featured-slider (Bootstrap col grid).
   Перебиваем grid-режим (на этом уровне card — flex-child Bootstrap col, не grid-item). */
.mg-featured-slider .row .eso-related-col {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 16px;
    display: flex;
}
.mg-featured-slider .row .eso-related-col .esoterika-related-card {
    width: 100%;
    height: 100%;
}
.mg-featured-slider .row .esoterika-related-thumb img {
    max-width: none !important;
    border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ accordion — render-time wraps <h3>Q</h3><p>A</p> в <details><summary>.
   Filter в functions.php esoterika_faq_accordion(). Контент в БД не меняется.
   ═══════════════════════════════════════════════════════════════════════════ */
.eso-faq-list {
    margin: 24px 0;
}
.eso-faq-item {
    border: 1px solid #e0e0e0;
    border-radius: var(--eso-card-radius);
    margin-bottom: 12px;
    padding: 16px 20px;
    background: #fafafa;
    transition: background 0.2s, box-shadow 0.2s;
}
.eso-faq-item[open] {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.eso-faq-item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    color: #1a1a1a;
    line-height: 1.4;
    list-style: none;
    position: relative;
    padding-right: 32px;
}
.eso-faq-item summary::-webkit-details-marker {
    display: none;
}
.eso-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    color: #888;
    font-weight: 400;
}
.eso-faq-item[open] summary::after {
    content: "−";
}
.eso-faq-answer {
    margin-top: 12px;
    color: #444;
    line-height: 1.6;
}
.eso-faq-answer p {
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sidebar — кастомный (sidebar.php): Search + Recent + Random Category + Random Post.
   Заменяет дефолтные WP widget блоки (которые были пустые — тянули из standard
   CPT `post`, у нас весь контент в кастомных CPT).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sticky sidebar на single-постах parent-темы (Bootstrap col с .sidebar-sticky).
   Parent делает row через flex (Bootstrap), aside растягивается на высоту row.
   align-self: flex-start + position:sticky → sidebar плывёт со скроллом.
   На archive-hub уже работает через .eso-hub-sidebar (выше в файле). */
@media (min-width: 992px) {
    aside.sidebar-sticky {
        position: sticky;
        top: 20px;
        align-self: flex-start;
    }
}
.eso-sidebar .eso-sidebar-widget {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--eso-card-radius);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.eso-sidebar .eso-sidebar-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}
/* Custom search form (esoterika_render_search_form) — context-aware с hidden cpt/section */
.eso-search-form {
    display: flex;
    gap: 6px;
}
.eso-search-form input[type="search"] {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    outline: none;
    min-width: 0;
}
.eso-search-form input[type="search"]:focus {
    border-color: #888;
}
.eso-search-form button {
    border: none;
    background: #1a1a1a;
    color: #fff;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 1rem;
    cursor: pointer;
    flex: 0 0 auto;
}
.eso-search-form button:hover {
    background: #444;
}

/* Post-card widget — карточка САМА является виджетом (без внешнего .eso-sidebar-widget
   chrome), внутри thumb 16:9 во всю ширину + title 2 строки. Лейбл «RECENT» / «DISCOVER»
   мелкой строкой над карточкой. Высота ~210px на карточку, sticky-sidebar влезает в viewport. */
.eso-sidebar-post-card {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 16px;
}
.eso-sidebar-post-card > .eso-sidebar-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #888;
    margin: 0 0 8px;
    padding: 0 4px;
    border: none;
}
.eso-sidebar-card {
    display: block;
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--eso-card-radius);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}
.eso-sidebar-card:hover {
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}
.eso-sidebar-card__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f0f0f0;
    border-radius: 0;
}
.eso-sidebar-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.eso-sidebar-card__title {
    padding: 12px 14px;
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 600;
    color: #1a1a1a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.eso-sidebar-card:hover .eso-sidebar-card__title {
    color: #444;
}

/* Random category — большая «кнопка» с названием категории */
.eso-sidebar-cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
    transition: background 0.2s, transform 0.2s;
}
.eso-sidebar-cat-link:hover {
    background: #f0f0f0;
    text-decoration: none;
    color: #1a1a1a;
    transform: translateX(2px);
}
.eso-sidebar-cat-arrow {
    font-size: 1.2rem;
    color: #888;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Footer — кастомный (footer.php): 3 колонки About / Explore / Quick Links.
   Заменяет parent default (там был только site title + WP credits).
   ═══════════════════════════════════════════════════════════════════════════ */
/* !important нужен чтобы перебить parent .back-img { background-image: url(...) }
   и .overlay { background-color: rgba(0,0,0,0.5) } — иначе футер белый/прозрачный. */
.eso-footer.back-img,
footer.eso-footer {
    background: #1a1a1a !important;
    background-image: none !important;
    color: #ddd;
    padding: 0;
    margin-top: 40px;
}
.eso-footer .overlay {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0;
}
.eso-footer-main {
    padding: 50px 50px 30px;
}
@media (max-width: 991px) {
    .eso-footer-main {
        padding: 40px 20px 20px;
    }
}
.eso-footer-col {
    margin-bottom: 30px;
}
.eso-footer-title {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}
.eso-footer-about-text {
    color: #aaa;
    line-height: 1.7;
    font-size: 0.95rem;
    margin: 0;
}
.eso-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 24px;
}
.eso-footer-quick .eso-footer-links {
    columns: 1;
}
.eso-footer-links li {
    margin: 0 0 8px;
    break-inside: avoid;
}
.eso-footer-links a {
    color: #aaa;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s;
}
.eso-footer-links a:hover {
    color: #fff;
    text-decoration: underline;
}
.eso-footer-copyright {
    background: #0e0e0e;
    padding: 18px 0;
    text-align: center;
    font-size: 0.85rem;
    color: #888;
}
.eso-footer-copyright a {
    color: #ccc;
    text-decoration: none;
}
.eso-footer-copyright a:hover {
    color: #fff;
    text-decoration: underline;
}
/* Скрываем parent default-футер если вдруг просочится */
.footer .mg-footer-bottom-area {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   СКРЫТЫЕ ЭЛЕМЕНТЫ PARENT ТЕМЫ
   ═══════════════════════════════════════════════════════════════════════════ */

/* Плашка соцсетей в конце поста (Facebook/X/Email/LinkedIn/Telegram/Pinterest/Print) */
.post-share,
.post-share-icons {
    display: none !important;
}