/*
 * Сторінка поста (блог)
 *
 * Зібрана з готового: .phero--flat (main.css), .prose, .chip, .btn,
 * .entry-nav (ui.css) і глобальна CTA-final. Своє тут — метарядок героя,
 * тіло статті й типографіка коментарів (WordPress віддає їх фіксованою
 * розміткою — .comment-list, .comment-form тощо — БЕМ під неї не підвести,
 * тому це другий свідомий виняток після .prose: тег+клас там, де свій клас
 * додати нема куди).
 *
 * Чергування фонів: герой (subtle) → тіло canvas → навігація subtle →
 * коментарі canvas → CTA elevated.
 */

/* ── Метарядок героя ────────────────────────────────────────────────────── */
.post-hero__meta { margin: 6px 0 0; }
.post-hero__sep  { margin: 0 8px; }
/* Рядок-посилання за макетом лишається 21px — зона натискання доростає
   до 44px невидимим ::after, той самий прийом, що на «Контактах». */
.post-hero__author {
    position:        relative;
    color:           inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition:      color var(--transition);
}
.post-hero__author::after {
    content:  "";
    position: absolute;
    inset:    -12px 0;
}
.post-hero__author:hover { color: var(--gold-text); }

/* ── Тіло статті ────────────────────────────────────────────────────────── */
.post-body {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}
.post-body__inner {
    max-width: 860px;
    margin:    0 auto;
}
.post-body__media { margin: 0 0 40px; }
.post-body__image {
    display: block;
    width:   100%;
    height:  auto;
}

.post-body__tags {
    display:     flex;
    flex-wrap:   wrap;
    gap:         10px;
    margin-top:  40px;
    padding-top: 32px;
    border-top:  1px solid var(--gold-line-soft);
}

/* ── Коментарі ──────────────────────────────────────────────────────────── */
/* Розмітку тут друкує ядро WordPress (comments.php), власних класів на
   елементах немає — той самий випадок, що в .prose: тег+клас замість
   вкладеності, бо іншого гачка для стилю нема. */
.post-comments {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}
.post-comments .comments-area { max-width: 860px; margin: 0 auto; }
.post-comments .comments-title,
.post-comments #reply-title {
    margin:         0 0 32px;
    color:          var(--text-primary);
    font-size:      28px;
    font-weight:    600;
    line-height:    36px;
}
.post-comments .comment-list {
    margin:     0 0 40px;
    padding:    0;
    list-style: none;
}
.post-comments .comment-list .children {
    margin:  24px 0 0 40px;
    padding: 0;
    list-style: none;
}
.post-comments .comment-body {
    padding:       24px;
    margin-bottom: 20px;
    background:    var(--bg-elevated);
    border:        1px solid var(--gold-line-soft);
    border-radius: 4px;
}
.post-comments .comment-author .fn {
    color:       var(--text-primary);
    font-weight: 600;
    font-style:  normal;
}
.post-comments .comment-metadata {
    margin-bottom: 12px;
    color:         var(--text-muted);
    font-size:     13px;
}
/* Автор коментаря — посилання ядра WordPress (.url.fn.n), клас додати
   нема куди; та сама розширена зона натискання, що в .post-hero__author. */
/* Автор і мітка часу стоять впритул одне до одного (0px між ними в ядрі
   WordPress) — розширювати обидві зони однаковим інсетом небезпечно: вони
   перекриються, і клік потрапить не в той елемент (перевірено кліком,
   а не bbox: без відступу зона автора зʼїдалась метаданими знизу).
   Реальний відступ між ними — власний, під половину кожного інсету. */
.post-comments .comment-author { margin-bottom: 10px; }
.post-comments .comment-author a {
    position: relative;
    color:    inherit;
}
.post-comments .comment-author a::after {
    content:  "";
    position: absolute;
    inset:    -10px -10px -4px;
}
/* Мітка часу — посилання на коментар (permalink), а не текст усередині
   речення: та сама розширена зона, що на інших посиланнях сторінки. */
.post-comments .comment-metadata a {
    position: relative;
    color:    inherit;
}
/* Верх — лише -4px (див. коментар біля .comment-author, до нього тепер
   10px реального відступу); низ — у 12px реального проміжку до тексту. */
.post-comments .comment-metadata a::after {
    content:  "";
    position: absolute;
    inset:    -4px 0 -10px;
}
.post-comments .comment-content p { margin: 0 0 12px; color: var(--text-secondary); }
.post-comments .comment-content p:last-child { margin: 0; }
.post-comments .comment-reply-link {
    position:        relative;
    display:         inline-block;
    margin-top:      12px;
    color:           var(--gold-text);
    font-size:       13px;
    font-weight:     600;
    text-decoration: none;
}
.post-comments .comment-reply-link::after {
    content:  "";
    position: absolute;
    inset:    -12px -6px;
}
.post-comments .comment-reply-link:hover { color: var(--text-primary); }
.post-comments .no-comments {
    margin: 0 0 32px;
    color:  var(--text-muted);
}

.post-comments .comment-form { display: flex; flex-direction: column; gap: 18px; }
.post-comments .comment-form p { margin: 0; }
.post-comments .comment-form label {
    display:        block;
    margin-bottom:  8px;
    color:          var(--text-secondary);
    font-size:      14px;
}
.post-comments .comment-form input[type="text"],
.post-comments .comment-form input[type="email"],
.post-comments .comment-form input[type="url"],
.post-comments .comment-form textarea {
    width:         100%;
    padding:       0 22px;
    height:        60px;
    color:         var(--text-primary);
    font-family:   inherit;
    font-size:     16px;
    background:    var(--bg-field);
    border:        1px solid var(--border-field);
    border-radius: var(--radius);
    transition:    border-color var(--transition), background-color var(--transition);
}
.post-comments .comment-form textarea {
    height:     auto;
    min-height: 140px;
    padding:    16px 22px;
    resize:     vertical;
}
.post-comments .comment-form input:hover,
.post-comments .comment-form textarea:hover {
    background:   var(--bg-field-alt);
    border-color: var(--border-field-hover);
}
.post-comments .comment-form input:focus,
.post-comments .comment-form textarea:focus {
    outline:      none;
    background:   var(--bg-field-alt);
    border-color: var(--gold-solid);
}
.post-comments .comment-form .btn { align-self: flex-start; }
.post-comments .comment-notes,
.post-comments .logged-in-as { color: var(--text-muted); font-size: 14px; }
.post-comments .logged-in-as a { color: var(--gold-text); }

/* ── Адаптація ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .post-body    { padding: 80px 0; }
    .post-comments { padding: 80px 0; }
}

@media (max-width: 768px) {
    .post-body     { padding: 64px 0; }
    .post-comments { padding: 64px 0; }
    .post-body__media { margin-bottom: 28px; }
    .post-comments .comments-title,
    .post-comments #reply-title { font-size: 23px; line-height: 30px; }
}

@media (max-width: 480px) {
    .post-body     { padding: 48px 0; }
    .post-comments { padding: 48px 0; }
}