/* ============================================================
   VIA Derm — Блог (список статей + сторінка статті + конверсія)
   Палітра: золото #c6ac73, темний #11141a / #181d25, світлий #f6f6f6
   ============================================================ */

:root {
    --blog-gold: #c6ac73;
    --blog-dark: #181d25;
    --blog-ink: #2a2f38;
    --blog-muted: #6b7280;
    --blog-line: #e7e4dc;
    --blog-bg-soft: #f7f5f0;
}

/* ---------- Hero ---------- */
.blog-hero__sub {
    color: var(--blog-gold);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 10px;
}
.blog-hero__lead {
    color: rgba(255, 255, 255, .85);
    max-width: 720px;
    margin: 18px auto 0;
    font-size: 17px;
}

/* ---------- Grid of cards ---------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--blog-line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(24, 29, 37, .12);
}
.blog-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.blog-card__media img,
.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__cat {
    position: absolute;
    left: 14px;
    top: 14px;
    background: rgba(17, 20, 26, .82);
    color: #fff;
    font-size: 12px;
    letter-spacing: .04em;
    padding: 6px 12px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 24px;
}
.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--blog-muted);
    margin-bottom: 12px;
}
.blog-card__verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #2e7d5b;
    font-weight: 500;
}
.blog-card__verified svg { width: 15px; height: 15px; fill: currentColor; }
.blog-card__title {
    font-family: "Philosopher", sans-serif;
    font-size: 22px;
    line-height: 1.3;
    margin: 0 0 12px;
}
.blog-card__title a { color: var(--blog-dark); transition: color .2s; }
.blog-card__title a:hover { color: var(--blog-gold); }
.blog-card__excerpt {
    color: #565b64;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 18px;
}
.blog-card__more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blog-gold);
    font-weight: 600;
    font-family: "Philosopher", sans-serif;
}
.blog-card__more svg { width: 18px; height: 18px; fill: currentColor; transition: transform .25s; }
.blog-card__more:hover { color: var(--blog-dark); }
.blog-card__more:hover svg { transform: translateX(4px); }

/* ---------- Pagination ---------- */
.blog-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 50px;
}
.blog-pagination__item {
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--blog-line);
    color: var(--blog-dark);
    font-weight: 600;
    transition: all .2s;
}
.blog-pagination__item:hover { border-color: var(--blog-gold); color: var(--blog-gold); }
.blog-pagination__item.is-active {
    background: var(--blog-gold);
    border-color: var(--blog-gold);
    color: #fff;
}

/* ---------- Breadcrumbs ---------- */
.blog-breadcrumbs {
    background: var(--blog-bg-soft);
    border-bottom: 1px solid var(--blog-line);
    padding: 16px 0;
}
.blog-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--blog-muted);
}
.blog-breadcrumbs li { display: flex; align-items: center; gap: 8px; }
.blog-breadcrumbs li:not(:last-child)::after { content: "›"; color: var(--blog-gold); }
.blog-breadcrumbs a { color: var(--blog-ink); }
.blog-breadcrumbs a:hover { color: var(--blog-gold); }
.blog-breadcrumbs li[aria-current] { color: var(--blog-muted); }

/* ---------- Article ---------- */
.blog-article__cat {
    display: inline-block;
    background: var(--blog-gold);
    color: #fff;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.blog-article__title {
    font-family: "Philosopher", sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.2;
    color: var(--blog-dark);
    margin: 0 0 18px;
}
.blog-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    color: var(--blog-muted);
    font-size: 14px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--blog-line);
}
.blog-article__meta > * { display: inline-flex; align-items: center; gap: 7px; }
.blog-article__meta svg { width: 17px; height: 17px; fill: var(--blog-gold); }
.blog-article__verified { color: #2e7d5b; font-weight: 600; }
.blog-article__verified svg { fill: #2e7d5b; }
.blog-article__hero {
    margin: 26px 0 30px;
    border-radius: 18px;
    overflow: hidden;
}
.blog-article__hero img,
.blog-article__hero-img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
}

/* ---------- Article typography ---------- */
.blog-article__content { color: var(--blog-ink); font-size: 17px; line-height: 1.75; }
.blog-article__content p { margin: 0 0 20px; }
.blog-article__content h2 {
    font-family: "Philosopher", sans-serif;
    font-size: 28px;
    color: var(--blog-dark);
    margin: 38px 0 16px;
    padding-left: 16px;
    border-left: 4px solid var(--blog-gold);
}
.blog-article__content h3 {
    font-family: "Philosopher", sans-serif;
    font-size: 22px;
    color: var(--blog-dark);
    margin: 28px 0 12px;
}
.blog-article__content ul,
.blog-article__content ol { margin: 0 0 22px; padding-left: 0; list-style: none; }
.blog-article__content ol { counter-reset: blogol; }
.blog-article__content li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.blog-article__content ul li::before {
    content: "";
    position: absolute;
    left: 6px; top: 11px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--blog-gold);
}
.blog-article__content ol li { counter-increment: blogol; }
.blog-article__content ol li::before {
    content: counter(blogol);
    position: absolute;
    left: 0; top: 1px;
    width: 22px; height: 22px;
    font-size: 13px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: var(--blog-gold); border-radius: 50%;
}
.blog-article__content img { max-width: 100%; height: auto; border-radius: 12px; margin: 10px 0 24px; }
.blog-article__content a { color: var(--blog-gold); text-decoration: underline; }
.blog-article__content blockquote {
    margin: 24px 0;
    padding: 18px 24px;
    background: var(--blog-bg-soft);
    border-left: 4px solid var(--blog-gold);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--blog-dark);
}
.blog-article__content table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.blog-article__content th,
.blog-article__content td { border: 1px solid var(--blog-line); padding: 10px 14px; text-align: left; }
.blog-article__content th { background: var(--blog-bg-soft); }

/* ---------- Share ---------- */
.blog-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--blog-line);
}
.blog-share__label { font-weight: 600; color: var(--blog-dark); }
.blog-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    transition: opacity .2s, transform .2s;
}
.blog-share__btn:hover { opacity: .9; transform: translateY(-2px); color: #fff; }
.blog-share__btn img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.blog-share__btn svg { width: 18px; height: 18px; }
.blog-share__btn--tg { background: #2aabee; }
.blog-share__btn--vb { background: #7360f2; }
.blog-share__btn--fb { background: #1877f2; }

/* ---------- Related ---------- */
.blog-related { margin-top: 54px; }
.blog-related__title {
    font-family: "Philosopher", sans-serif;
    font-size: 26px;
    color: var(--blog-dark);
    margin-bottom: 22px;
}
.blog-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-related__media {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}
.blog-related__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-related__card:hover .blog-related__media img { transform: scale(1.06); }
.blog-related__card h3 { font-family: "Philosopher", sans-serif; font-size: 18px; line-height: 1.35; margin: 0; }
.blog-related__card h3 a { color: var(--blog-dark); }
.blog-related__card h3 a:hover { color: var(--blog-gold); }

/* ---------- Sidebar CTA ---------- */
.blog-article__sidebar { position: relative; }
.blog-cta { display: flex; flex-direction: column; gap: 20px; }
.blog-cta__card {
    background: #fff;
    border: 1px solid var(--blog-line);
    border-radius: 16px;
    padding: 26px 24px;
}
.blog-cta__card--offer {
    position: relative;
    background: linear-gradient(160deg, #1c222c 0%, #11141a 100%);
    border: none;
    color: #fff;
    overflow: hidden;
}
.blog-cta__badge {
    position: absolute;
    top: 18px; right: 18px;
    width: 58px; height: 58px;
    display: flex; align-items: center; justify-content: center;
    background: var(--blog-gold);
    color: #11141a;
    font-family: "Philosopher", sans-serif;
    font-weight: 700;
    font-size: 18px;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(198, 172, 115, .5);
}
.blog-cta__title {
    font-family: "Philosopher", sans-serif;
    font-size: 21px;
    line-height: 1.3;
    margin: 0 0 12px;
    padding-right: 60px;
}
.blog-cta__card--offer .blog-cta__title { color: #fff; }
.blog-cta__title--sm { font-size: 18px; padding-right: 0; color: var(--blog-dark); }
.blog-cta__lead { font-size: 14px; line-height: 1.6; margin: 0 0 18px; color: rgba(255,255,255,.82); }
.blog-cta__card--callback .blog-cta__lead,
.blog-cta__card--contact .blog-cta__lead { color: var(--blog-muted); }

.blog-lead-form__field { margin-bottom: 12px; }
.blog-lead-form__field label { display: block; font-size: 13px; margin-bottom: 6px; color: rgba(255,255,255,.85); }
.blog-lead-form__field label span { color: var(--blog-gold); }
.blog-lead-form input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: border-color .2s, background .2s;
}
.blog-lead-form input::placeholder { color: rgba(255,255,255,.4); }
.blog-lead-form input:focus { border-color: var(--blog-gold); background: rgba(255,255,255,.1); }
.blog-cta__card--callback .blog-lead-form input,
.blog-cta__card--contact .blog-lead-form input {
    border-color: var(--blog-line);
    background: var(--blog-bg-soft);
    color: var(--blog-ink);
}
.blog-cta__card--callback .blog-lead-form input::placeholder { color: var(--blog-muted); }

.blog-cta__btn {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 10px;
    background: var(--blog-gold);
    color: #11141a;
    font-family: "Philosopher", sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    margin-top: 6px;
    transition: filter .2s, transform .2s;
}
.blog-cta__btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.blog-cta__btn:disabled { opacity: .7; cursor: default; transform: none; }
.blog-cta__note { font-size: 12px; color: rgba(255,255,255,.55); margin: 12px 0 0; }
.blog-cta__card--callback .blog-cta__note { color: var(--blog-muted); }

.blog-lead-form__row { display: flex; flex-direction: column; gap: 10px; }
.blog-cta__btn--compact { height: 48px; font-size: 15px; margin-top: 0; }

.blog-cta__ok { display: block; margin-top: 12px; color: #2e7d5b; font-size: 14px; font-weight: 600; }
.blog-cta__err { display: block; margin-top: 12px; color: #d9534f; font-size: 14px; font-weight: 600; }

.blog-cta__call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    border-radius: 10px;
    background: var(--blog-dark);
    color: #fff;
    font-family: "Philosopher", sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .02em;
}
.blog-cta__call:hover { background: var(--blog-gold); color: #11141a; }
.blog-cta__call svg { width: 20px; height: 20px; fill: currentColor; }
.blog-cta__messengers { display: flex; gap: 10px; margin-top: 12px; }
.blog-cta__msg {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.blog-cta__msg img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.blog-cta__msg:hover { color: #fff; opacity: .92; }
.blog-cta__msg--viber { background: #7360f2; }
.blog-cta__msg--telegram { background: #2aabee; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .blog-article__sidebar { margin-top: 40px; }
    /* На планшеті/мобільному сайдбар — під статтею, не липкий */
    .blog-article__sidebar.theiaStickySidebar { position: static !important; transform: none !important; }
    .blog-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-related__grid { grid-template-columns: 1fr; }
    .blog-share { gap: 8px; }
    .blog-share__btn { padding: 8px 12px; font-size: 13px; }
    .blog-cta__card { padding: 22px 18px; }
}

/* ============================================================
   КОНТРАСТ: сайт має ТЕМНИЙ фон (body #181d25). Тому текст статті —
   світлий і крупний, заголовки білі. Картки списку мають власний
   світлий фон, тож там текст лишається темним.
   ============================================================ */

/* --- Стаття (світлий текст на темному фоні), крупніше --- */
.page-content .blog-article__content {
    color: #d9dde4;
    font-size: 19px;
    line-height: 1.85;
}
.page-content .blog-article__content p,
.page-content .blog-article__content li,
.page-content .blog-article__content span,
.page-content .blog-article__content td { color: #d9dde4; }
.page-content .blog-article__content strong,
.page-content .blog-article__content b { color: #ffffff; font-weight: 700; }
.page-content .blog-article__content em { color: #e8ebf0; }
.page-content .blog-article__content a { color: var(--blog-gold); }

.page-content .blog-article__content h2 {
    color: #ffffff;
    font-size: 32px;
    margin: 46px 0 18px;
}
.page-content .blog-article__content h3 {
    color: #ffffff;
    font-size: 25px;
    margin: 34px 0 14px;
}
.page-content .blog-article__content h4 { color: #ffffff; }

.page-content .blog-article__content ul li::before { top: 13px; }
.page-content .blog-article__content blockquote {
    color: #f0e9da;
    background: rgba(198, 172, 115, .10);
    border-left: 4px solid var(--blog-gold);
    font-size: 19px;
}
.page-content .blog-article__content th {
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
}
.page-content .blog-article__content th,
.page-content .blog-article__content td { border-color: rgba(255, 255, 255, .14); }

/* Мета-рядок статті (дата / автор / перевірено) на темному фоні */
.page-content .blog-article__head { margin-top: 0; }
.page-content .blog-article__meta { color: #b6bcc6; font-size: 15px; }
.page-content .blog-article__meta time,
.page-content .blog-article__meta .blog-article__author { color: #d9dde4; }
.page-content .blog-article__meta { border-bottom-color: rgba(255,255,255,.14); }

/* Поділитися / Читайте також — на темному фоні світлі */
.page-content .blog-share__label { color: #ffffff; }
.page-content .blog-related__title { color: #ffffff; }
.page-content .blog-related__card h3 a { color: #e7eaef; }
.page-content .blog-related__card h3 a:hover { color: var(--blog-gold); }

/* --- Картки списку: власний світлий фон → темний текст --- */
.page-content .blog-card__title a { color: #181d25; }
.page-content .blog-card__excerpt { color: #565b64; }
.page-content .blog-card__meta { color: #6b7280; }

/* Заголовки в темній шапці */
.pbmit-title-bar-wrapper .pbmit-tbar-title { color: #ffffff; }
.pbmit-title-bar-wrapper .pbmit-tbar-subtitle { color: var(--blog-gold); }

/* Банер статті з фото: власний градієнт замість подвійного оверлея теми */
.blog-title-bar { background-size: cover; background-position: center; background-repeat: no-repeat; }
.blog-title-bar:before { display: none !important; }
.blog-title-bar .pbmit-tbar-title { text-shadow: 0 2px 18px rgba(0,0,0,.45); max-width: 900px; }
.blog-title-bar .pbmit-tbar-subtitle { text-shadow: 0 1px 10px rgba(0,0,0,.5); }

/* Трохи крупніші тексти на світлих картках списку */
.blog-card__title { font-size: 23px; }
.blog-card__excerpt { font-size: 16px; }
.blog-hero__lead { font-size: 18px; }

/* Відступи: більше повітря між статтею і блоком «Читайте також» */
.blog-article__main { padding-bottom: 4px; }
.page-content .blog-related { margin-top: 60px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.12); }