/* ============================================
   КАРТКА ПОСТА — компонент структури 2.0
   ============================================

   Етап E (2026-08-24): перенесено з assets/css/posts.css.

   Що змінилось: файл більше не загорнутий у @layer і не має жодного !important.
   Усі 96 !important тут існували з однієї причини — файл лежав у шарі
   і програвав нешарованим стилям ядра, а частина ще й воювала з custom.css
   (там навіть був селектор на 8 класів із підписом «перебиваємо вороже правило»).
   Поза шарами ця війна не потрібна: компонент виграє і в ядра, і в custom.css.
   ============================================ */

/* ============================================
   POSTS.CSS — Стилі карток постів та мета-інформації
   ============================================ */

/* ============================================
   МЕТА-ІНФОРМАЦІЯ ПОСТА (дата та час читання)
   ============================================ */

/* Приховуємо мету-інформацію в картках постів */
.post-card .post-meta-single-only,
.post-card .wp-block-template-part {
    display: none;
}

/* Приховуємо іконку календаря перед датою в картках */
.post-card .wp-block-post-date::before {
    content: none;
    display: none;
}

/* Приховуємо порожні параграфи (для постів без категорії) */
.post-card > p:empty,
.post-card > p:not(:has(*)),
.post-card .category-badge-wrapper:not(:has(.post-category-badge)) {
    display: none;
    margin: 0;
    padding: 0;
    height: 0;
    line-height: 0;
}

/* ============================================
   БЕЙДЖ КАТЕГОРІЇ
   ============================================ */

/* За замовчуванням - статичне позиціонування (для карток БЕЗ картинки) */
.post-card .post-category-badge-list {
    position: static;
    margin: 0 0 0.3em 0;
    padding: 0;
    background: transparent;
    display: block;
}

/* Абсолютне позиціонування ТІЛЬКИ для карток З картинкою */
.post-card:has(.wp-block-post-featured-image img) .post-category-badge-list {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    margin: 0;
}

/* Приховуємо всі категорії окрім першої */
.post-card .post-category-badge-list a:not(:first-child) {
    display: none;
}

/* Стилізуємо першу категорію як бейдж - чорна рамка, золотий текст */
.post-card .post-category-badge-list a:first-child {
    display: inline-block;
    padding: 0.4em 1em;
    background: #1a1a1a;
    color: var(--wp--preset--color--accent);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.post-card .post-category-badge-list a:first-child:hover {
    background: var(--wp--preset--color--accent);
    color: #1a1a1a;
}

/* Приховуємо категорію "Uncategorized" */
.post-card .post-category-badge-list a[href*="uncategorized"],
.post-card .post-category-badge-list a[href*="bez-kategoriyi"],
.post-card .post-category-badge-list a[href*="%d0%b1%d0%b5%d0%b7-%d0%ba%d0%b0%d1%82%d0%b5%d0%b3%d0%be%d1%80%d1%96%d1%97"] {
    display: none;
}

/* Якщо всі категорії приховані, приховуємо весь блок */
.post-card .post-category-badge-list:not(:has(a:not([style*="display: none"]))) {
    display: none;
}

/* Приховуємо теги в картках блогу */
.post-card .post-tags-list,
.post-card .wp-block-post-terms:not(.post-category-badge-list) {
    display: none;
}

/* ============================================
   POST CARD CONTENT LAYOUT
   ============================================ */

/* Flexbox для post-card-content щоб кнопка була внизу */
.post-card .post-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0.6em 1.8em 1.8em 1.8em;
}

.post-card .post-card-title {
    order: 1;
    margin-top: 0.3em;
}

.post-card .post-card-excerpt {
    flex-grow: 1;
    margin-bottom: 1em;
    order: 2;
}

.post-card .read-more-btn {
    margin-top: auto;
    order: 4;
}

/* ============================================
   МЕТА-ІНФОРМАЦІЯ: ОДИНОЧНИЙ ПОСТ
   ============================================ */

/* Показуємо тільки в одиночних постах */
.content-block .post-meta-single-only {
    display: block;
}

.post-meta-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;          /* Sprint 4: вирівнювання дати й таймера по центру */
    gap: 1.5em;
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 2px solid #f0f0f0;
    font-size: 0.875rem;          /* rem замість em — розриваємо каскад від WP 24px */
    line-height: 1;               /* нормалізуємо висоту рядка */
    color: #666;
}

.post-meta-date,
.reading-time,
.post-date-text {
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: #666;
    font-weight: 500;
    font-size: 1rem;              /* явно фіксуємо — не наслідуємо em від батька */
    line-height: 1;
}

.post-date-text time {
    color: #666;
}

.reading-time i,
.reading-time svg,
.reading-time svg.lb-icon {
    color: var(--wp--preset--color--accent);
    font-size: 1.1em;
    display: block;               /* SVG як блок → flex-item без inline baseline-зсуву */
    flex-shrink: 0;
    width: 1em;
    height: 1em;
}

/* Мета-рядок статті: дата й час читання на одній лінії.
 *
 * 2026-08-30. Тут стояв хак Sprint 4 — клас повторювався по шість разів
 * підряд, щоб набрати специфічність 0-8-0 і перебити правило з відступом
 * для груп у контенті. Хак мовчки перестав працювати: після переїзду того
 * правила з custom.css у components/content.css воно теж стало 0-8-0,
 * а за однакової специфічності виграє те, що підключене пізніше — content.css
 * іде після card.css. Наслідок було видно очима: час читання висів на 12px
 * вище за дату (рівно пів того відступу — flexbox центрує margin-box).
 *
 * Тепер відступ не долітає сюди взагалі: у content.css мета-рядок доданий
 * до винятків. Тож ці правила лишаються звичайними, без гри в специфічність,
 * і роблять рівно те, що написано. */
.content-block .post-meta-info .reading-time,
.content-block .post-meta-info .post-date-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1;
    align-items: center;
}

/* ============================================
   АДАПТИВНІСТЬ ОСНОВНОГО КОНТЕНТУ
   ============================================ */

@media (max-width: 992px) {
    /* Етап C/D (2026-08-24): `display: none` для сайдбарів прибрано звідси.
     * Сайдбари — це макет, а не картка, і тепер вони не порожні: ліворуч зміст
     * статті, праворуч CTA. Ховати їх на мобільному означало б викинути зміст
     * зовсім. Уся адаптивна поведінка сайдбарів тепер в одному місці —
     * components/layout.css. */

    .main-column,
    main.main-column,
    .wp-block-group.main-column {
        flex-basis: 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        background-color: #ece8e0; /* Етап C/D: синхронно з layout.css */
    }

    .site-content-wrapper {
        background-color: #111;
    }
}

/* Етап C/D (2026-08-24): падінг .main-column прибрано звідси і з блоку ≤576px —
 * тепер це одне fluid-правило в components/layout.css. Правило для ≤576px було
 * мертвим (0,1,0 проти 0,2,0 у блоці вище), тому його зникнення нічого не змінює. */



/* ============================================
   ДОДАНО З custom.css (Етап E, 2026-08-24)
   ============================================

   Рядки 866-1284 старого custom.css: решта стилів картки поста
   (25 правил .post-card), галереї і CTA-банер.
   Знято 92 !important.

   TODO: галереї і CTA згодом варто винести в окремі компоненти —
   тут вони опинились тому, що лежали поруч у custom.css.
   ============================================ */

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

.main-column .wp-block-gallery,
.content-block .wp-block-gallery {
    margin: 2em 0;
}

.main-column .wp-block-gallery .wp-block-image,
.content-block .wp-block-gallery .wp-block-image {
    margin: 0;
}

.main-column .wp-block-gallery img,
.content-block .wp-block-gallery img {
    border: 2px solid #e5e5e5;
    transition: border-color 0.3s ease;
}

.main-column .wp-block-gallery img:hover,
.content-block .wp-block-gallery img:hover {
    border-color: var(--wp--preset--color--accent);
}

/* ============================================
   CTA BANNER (Потрібна консультація?) - CLEAN LUXURY
   ============================================ */

.cta-banner-block {
    margin: 4em 0;
}

.cta-banner-inner {
    background: #ffffff; /* Білий фон */
    border: 2px solid var(--wp--preset--color--accent); /* Золота рамка */
    border-radius: 12px;
    padding: 3em;
    
    /* Стильна тінь з золотим відтінком */
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.05),
        0 5px 15px rgba(212, 175, 55, 0.15);
        
    position: relative;
    overflow: hidden;
    
    /* Flexbox для вирівнювання */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
    flex-wrap: wrap;
}

/* Sprint 3 (2026-05-13): Декоративний фон (іконка молотка)
   Раніше використовувався Font Awesome unicode "\f0e3" + font-family "Font Awesome 6 Free".
   Тепер — inline SVG як background-image (data:URI). Не потребує Font Awesome CDN. */
.cta-banner-inner::before {
    content: "";
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23d4af37'><path d='M318.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-120 120c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l4-4L325.4 293.4l-4 4c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l120-120c12.5-12.5 12.5-32.8 0-45.3l-16-16c-12.5-12.5-32.8-12.5-45.3 0l-4 4L330.6 74.6l4-4c12.5-12.5 12.5-32.8 0-45.3l-16-16zm-152 288c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l48 48c12.5 12.5 32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-1.4-1.4L272 285.3 226.7 240 168 298.7l-1.4-1.4z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -20px;
    right: 20px;
    width: 10em;
    height: 10em;
    opacity: 0.05; /* Дуже прозорий */
    transform: rotate(15deg);
    pointer-events: none;
    z-index: 0;
}

/* Контейнер для тексту (щоб відокремити від кнопки) */
.cta-text-wrapper {
    flex: 1 1 500px; /* Займає простір, але може стискатися */
    z-index: 1;
}

/* Заголовок */
.cta-banner-title {
    color: #1a1a1a; /* Темний колір */
    font-family: 'Playfair Display', serif;
    font-size: 2.2em;
    font-weight: 700;
    margin: 0 0 0.3em 0;
    line-height: 1.2;
}

/* Текст */
.cta-banner-text {
    color: #555555; /* Темно-сірий */
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    margin: 0;
    line-height: 1.6;
}

/* Кнопка */
.cta-banner-button {
    z-index: 1;
    flex-shrink: 0; /* Не стискати кнопку */
}

/* Етап E (2026-08-24): стилі CTA-кнопки і її :hover переїхали
   в components/button.css. Разом із ними пішли 17 —
   усі вони воювали з нешарованими стилями ядра, а не з темою. */

/* Адаптивність */
@media (max-width: 992px) {
    .cta-banner-inner {
        flex-direction: column;
        text-align: center;
        padding: 2.5em 1.5em;
    }
    
    .cta-text-wrapper {
        flex: auto;
        width: 100%;
    }
    
    .cta-banner-inner::before {
        font-size: 8em;
        right: 50%;
        margin-right: -4em;
        top: 10%;
    }
    
    .cta-banner-title {
        font-size: 1.8em;
    }
}

/* ============================================
   КОНЦЕПЦІЯ 3: КАРТКИ З ТІННЮ + ЗОЛОТИЙ АКЦЕНТ
   ============================================ */

/* --- КАРТКИ СТАТЕЙ (для патернів) - Modern Clean Luxury --- */
.post-card,
article.post-card,
.wp-block-group.post-card,
.wp-block-post .post-card,
article.wp-block-group.post-card.is-layout-flow {
    border: 1px solid #c5ccd6; /* Помітна сіра рамка */
    border-top: 4px solid var(--wp--preset--color--accent); /* Золотий верх */
    border-right: 1px solid #c5ccd6;
    border-bottom: 1px solid #c5ccd6;
    border-left: 1px solid #c5ccd6;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff; /* Білий фон */
    background-color: #ffffff;
    min-height: 280px; /* Однакова мінімальна висота */
    height: 100%; /* Розтягуємо на всю висоту grid-комірки */
    position: relative;
    padding: 0; /* Без внутрішніх відступів - вони в post-card-content */
    
    /* Виразна тінь для контрасту на сіро-голубому фоні */
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 12px 35px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 12px 35px rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 12px 35px rgba(0, 0, 0, 0.15);
    
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin-bottom: 1.5em; /* Зменшений відступ між картками */
}

.post-card:hover,
article.post-card:hover,
.wp-block-group.post-card:hover,
.wp-block-post .post-card:hover,
article.wp-block-group.post-card.is-layout-flow:hover {
    transform: translateY(-8px);
    -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 30px 60px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 30px 60px rgba(0, 0, 0, 0.22);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 30px 60px rgba(0, 0, 0, 0.22);
    border-color: var(--wp--preset--color--accent); /* Золота рамка при ховері */
}

/* БЕЙДЖ КАТЕГОРІЇ - мінімалістичний */
.post-category-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    display: inline-block;
    padding: 0.5em 1em;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
    border: none;
    border-left: 3px solid var(--wp--preset--color--accent);
    border-radius: 0 4px 4px 0;
    font-size: 0.7em;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.post-category-badge:hover {
    background: var(--wp--preset--color--accent);
    color: #fff;
    transform: translateX(3px);
}

/* Зображення картки */
.post-card-thumbnail,
.post-card .wp-block-post-featured-image,
.post-card figure.wp-block-post-featured-image {
    position: relative;
    overflow: hidden;
    min-height: 220px; /* Фіксована висота */
    height: 220px;
    background: transparent; /* Прозорий фон */
    display: block;
    border-radius: 8px 8px 0 0; /* Закруглення зверху */
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Картка з картинкою - прибираємо border-top */
.post-card:has(.post-card-thumbnail img),
.post-card:has(.wp-block-post-featured-image img) {
    border-top: none;
}

/* Картки без зображення - прибираємо область thumbnail */
.post-card:not(:has(.post-card-thumbnail img)):not(:has(.wp-block-post-featured-image img)) .post-card-thumbnail,
.post-card:not(:has(.post-card-thumbnail img)):not(:has(.wp-block-post-featured-image img)) .wp-block-post-featured-image {
    display: none;
}

.post-card-thumbnail img,
.post-card .wp-block-post-featured-image img,
.post-card figure.wp-block-post-featured-image img {
    width: 100%;
    max-width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
    border-radius: 8px 8px 0 0;
    margin: 0;
}

/* Посилання в featured image */
.post-card .wp-block-post-featured-image a,
.post-card figure.wp-block-post-featured-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.post-card:hover .post-card-thumbnail img,
.post-card:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
}

.post-card-thumbnail::after {
    content: none; /* Видаляємо золоту лінію під фото для чистішого вигляду */
    display: none;
}

.post-card-content,
.post-card .post-card-content,
article.post-card .post-card-content,
.wp-block-group.post-card-content,
.post-card-content.is-layout-flex,
.post-card-content.wp-block-group {
    padding: 0.6em 1.8em 1.8em 1.8em; /* Мінімальний верхній відступ */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5em; /* Проміжок між елементами */
    background: #ffffff; /* Явно білий фон */
}

.post-card-meta {
    display: flex;
    align-items: center;
    gap: 1.2em;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 0.5em;
    flex-wrap: wrap;
}

.post-card-meta > * {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.post-card .wp-block-post-date::before,
.post-card-meta .wp-block-post-date::before {
    content: "";
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23d4af37'><path d='M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l80 0 0 56-80 0 0-56zm0 104l80 0 0 64-80 0 0-64zm128 0l96 0 0 64-96 0 0-64zm144 0l80 0 0 64-80 0 0-64zm80-48l-80 0 0-56 80 0 0 56zm0 160l0 40c0 8.8-7.2 16-16 16l-64 0 0-56 80 0zm-128 0l0 56-96 0 0-56 96 0zm-144 0l0 56-64 0c-8.8 0-16-7.2-16-16l0-40 80 0zM272 248l-96 0 0-56 96 0 0 56z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.2em;
}

.post-card .wp-block-post-author::before,
.post-card-meta .wp-block-post-author::before {
    content: "";
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23d4af37'><path d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.2em;
}

.post-card .read-time-shortcode::before,
.post-card-meta .read-time-shortcode::before {
    content: "";
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23d4af37'><path d='M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.2em;
    margin-right: 0.3em;
}

/* Заголовок картки - Playfair Display */
.post-card-title,
.post-card h3,
.post-card h3 a {
    font-family: 'Playfair Display', serif;
    font-size: 1.5em; /* Трохи більший */
    margin: 0;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a; /* Темний колір */
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Видаляємо стрілку перед заголовком */
.post-card-title::before {
    content: none;
    display: none;
}

.post-card-title a {
    color: #1a1a1a;
    text-decoration: none;
    background-image: none; /* Прибираємо лінійний градієнт */
}

.post-card:hover .post-card-title,
.post-card:hover h3,
.post-card:hover h3 a,
.post-card-title a:hover {
    color: var(--wp--preset--color--accent); /* Золотий при наведенні */
}

.post-card-excerpt {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95em;
    color: #555;
    flex-grow: 1;
    line-height: 1.6;
    margin: 0.5em 0 1.5em 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Етап E (2026-08-24): стилі .read-more-btn переїхали в components/button.css.
 *
 * Тут стояло color: #1a1a1a, тобто задум був темний текст із золотим підкресленням.
 * Фактично текст рендерився золотим #d4af37 на білому — контраст 2.1:1 — бо
 * styles.elements.link з theme.json нешарований і перебивав це правило.
 * У компоненті це виправлено: текст — чорнило, hover і стрілка — accent-ink (4.7:1). */

/* ТЕГИ - приховані в картках для чистого вигляду (див. кінець файлу) */

.post-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 175, 55, 0.1),
        transparent
    );
    transition: left 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.post-card:hover::before {
    left: 100%;
}

/* ============================================