/**
 * Мета-блоки single-поста: автор + шаринг.
 *
 * @package NDC
 */

/* ---------- Обгортка «автор ліворуч + шаринг праворуч» ---------- */
.article-meta {
    display: flex;
    align-items: center;
    justify-content: space-between; /* автор до лівого краю, шаринг — до правого */
    flex-wrap: wrap;
    gap: 16px 24px;
    margin: 20px 0 32px;
}

/* ---------- Автор ---------- */
.article-author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

/* Аватар: жорсткий розмір, щоб глобальні стилі теми не перекривали. */
.article-author__avatar,
img.article-author__avatar,
.article-author img.avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    max-width: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    background: #ebedf5;
    padding: 0;
    margin: 0;
}

.article-author__text {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: #232438;
}

.article-author__name {
    font-weight: 600;
    color: #232438;
}

.article-author__sep {
    color: #cfd3e0;
}

.article-author__reading {
    /* Іконка — background-image, а не вкладений <svg>. Причина: */
    /* .article-author__text — flex з align-items: baseline. Коли всередині */
    /* <time> лежить mixed inline (SVG + текст), baseline flex-item рахується */
    /* від першої inline-line, і bbox SVG «підіймає» весь <time> над сусідами */
    /* («Денис Апекін», «Поділитися:»). Якщо в <time> лише текст — baseline */
    /* item == baseline тексту, все стоїть рівно. */
    /* */
    /* Колір іконки задан хардкодом (#666f8d) у data-URI — SVG як background */
    /* не наслідує currentColor. При зміні кольору тексту синхронізувати */
    /* й колір stroke у url() нижче. */
    color: #666f8d;
    font-size: 0.875rem;
    white-space: nowrap;
    padding-left: 20px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666f8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 14px 14px;
}

/* ---------- Шаринг ---------- */
.article-share {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

.article-share__label {
    /* Явна висота 36px + inline-flex центрування — так текст label */
    /* потрапляє в оптичний центр рядка іконок, а не «сідає» на baseline. */
    display: inline-flex;
    align-items: center;
    height: 36px;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1;
    color: #666f8d;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
}

.article-share__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* .article-share__item — жорстка висота 36px, центр по grid — так <a> та */
/* <button> опиняються рівно на одній лінії незалежно від їх UA-стилів. */
.article-share__item {
    display: grid;
    place-items: center;
    height: 36px;
    width: 36px;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0; /* прибираємо будь-який baseline від текстового контексту */
}

/* content-pages.css задає всім .article ul li:not(:last-child) margin-bottom:16px */
/* (специфіка 0,2,2). Для наших пунктів шарингу цей margin ламає вертикальне */
/* вирівнювання — останній <li> (copy) сідає нижче за інших. Перебиваємо */
/* вищою специфікою через 3 класи (0,3,0). */
.article .article-share__list .article-share__item,
.article .article-share__list .article-share__item:not(:last-child) {
    margin: 0;
}

/* Перебиваємо .article__content ul li::before із article.css — */
/* маркерів (крапок) всередині цього списку бути не має. */
.single-post .article__content .article-share__item::before,
.article-share__item::before {
    display: none !important;
    content: none !important;
}

/* База: темна графітова іконка на світло-сірому фоні. */
.article-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ebedf5;
    border: 0 !important;
    color: #232438;
    text-decoration: none;
    cursor: pointer;
    padding: 0 !important;
    margin: 0;
    /* Скидаємо UA-стилі <button> — без цього Chrome/Safari додає прихований */
    /* padding + border, і кнопка «Скопіювати» сідає на кілька пікселів нижче. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 1;
    vertical-align: middle;
    font-family: inherit;
    font-size: inherit;
    box-sizing: border-box;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* SVG всередині — рівно по центру круга. */
.article-share__link svg {
    display: block;
    flex-shrink: 0;
}

/* Hover: іконка біла, лёгка левітація. Заливка — індивідуально */
/* по бренду нижче (щоб мережі впізнавались по кольору). */
.article-share__link:hover {
    color: #ffffff;
    transform: translateY(-2px);
    text-decoration: none;
}

/* Бренд-кольори при hover — офіційні гайдлайни мереж. Box-shadow */
/* побудований від того самого кольору з альфою, щоб «підсвічування» */
/* під кнопкою жило в тон іконці. */
.article-share__link--telegram:hover { background: #229ED9; box-shadow: 0 8px 18px -6px rgba(34, 158, 217, 0.5); }
.article-share__link--facebook:hover { background: #1877F2; box-shadow: 0 8px 18px -6px rgba(24, 119, 242, 0.5); }
.article-share__link--linkedin:hover { background: #0A66C2; box-shadow: 0 8px 18px -6px rgba(10, 102, 194, 0.5); }
.article-share__link--whatsapp:hover { background: #25D366; box-shadow: 0 8px 18px -6px rgba(37, 211, 102, 0.5); }
.article-share__link--x:hover        { background: #000000; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.5); }
.article-share__link--threads:hover  { background: #000000; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.5); }
.article-share__link--viber:hover    { background: #7360F2; box-shadow: 0 8px 18px -6px rgba(115, 96, 242, 0.5); }

/* Copy — не соцмережа, тому залишає фірмовий градієнт NDC. */
.article-share__link--copy:hover {
    background: linear-gradient(124.79deg, #3b0944 33.09%, #b11237 100%);
    box-shadow: 0 8px 18px -6px rgba(59, 9, 68, 0.45);
}

/* Стан «скопійовано» — короткий фідбек від JS. */
.article-share__link--copy.is-copied {
    background: linear-gradient(124.79deg, #3b0944 33.09%, #b11237 100%);
    color: #ffffff;
}

/* ---------- Другий блок шарингу — після статті ---------- */
/* Розмір іконок такий самий, як у верхнього блока (36×36), — єдиний */
/* стиль по всій сторінці; відрізняємо лише відступами і підписом. */
.article-share--bottom {
    margin: 40px 0 24px;
    padding-top: 24px;
    border-top: 1px solid #ebedf5;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.article-share--bottom .article-share__label {
    font-size: 0.9375rem;
    color: #666f8d;
    font-weight: 400;
}

/* ---------- Мобільне ---------- */
@media (max-width: 767.98px) {
    /* content-pages.css задає .content-template.content-template--blog padding-top:64px */
    /* (специфіка 0,2,0). У порядку завантаження content-pages.css йде після article-meta.css, */
    /* тому при однаковій специфіці програвали ми. Перебиваємо через body.single-post — */
    /* даємо специфіку 0,2,1. */
    body.single-post .content-template--blog {
        padding-top: 32px;
    }

    .article-meta {
        gap: 8px 20px;
        margin: 8px 0 16px; /* тісніше під H1 і до тексту */
    }

    /* Верхній шаринг на мобільному ховаємо повністю: */
    /* залишаємо тільки нижній блок після статті — так і на Medium/Substack. */
    .article-share--top {
        display: none;
    }

    .article-share--bottom {
        margin: 32px 0 16px;
    }
}