/* Типографика и блоки статьи блога.
   Палитра берётся из blog-cabinet-redesign.css (--portal-*), здесь только
   контентная часть: .portal-article — контейнер тела статьи. */

:root {
    --art-ink: #14304d;
    --art-text: #2c3f52;
    --art-muted: #6b7f92;
    --art-line: #e3edf6;
    --art-soft: #f4f9fd;
    --art-green: #1d8b41;
    --art-green-soft: #eaf7ef;
    --art-warn: #b8791a;
    --art-warn-soft: #fff6e6;
}

/* ---------- Базовая типографика ---------- */
.portal-article {
    font-size: 17px;
    line-height: 1.75;
    color: var(--art-text);
}
.portal-article > *:first-child { margin-top: 0 }
.portal-article p { margin: 0 0 18px }
.portal-article h2,
.portal-article h3,
.portal-article h4 {
    color: var(--art-ink);
    font-weight: 700;
    line-height: 1.25;
    scroll-margin-top: 90px; /* якорь не уезжает под шапку */
}
.portal-article h2 { font-size: 27px; margin: 38px 0 14px }
.portal-article h3 { font-size: 21px; margin: 28px 0 12px }
.portal-article h4 { font-size: 18px; margin: 22px 0 10px }
.portal-article h2 + h3 { margin-top: 16px }

.portal-article a {
    color: var(--portal-primary, #0a72ce);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    transition: color .15s linear;
}
.portal-article a:hover { color: #0959a1 }

/* Акценты: жирное — маркером, курсив — смысловой */
.portal-article strong, .portal-article b {
    background: linear-gradient(transparent 62%, #ffe9a8 62%);
    padding: 0 2px;
    font-weight: 700;
    color: var(--art-ink);
}
.portal-article em, .portal-article i { color: var(--portal-primary, #0a72ce); font-style: italic }

/* ---------- Списки ---------- */
.portal-article ul, .portal-article ol { margin: 0 0 18px; padding-left: 0 }
.portal-article ol { padding-left: 22px }
.portal-article li { margin-bottom: 9px }
.portal-article ul { list-style: none }
.portal-article ul > li {
    position: relative;
    padding-left: 30px;
}
.portal-article ul > li::before {
    content: '✓';
    position: absolute;
    left: 4px;
    top: 0;
    color: var(--art-green);
    font-weight: 700;
}
.portal-article ul ul { margin: 9px 0 0 }

/* ---------- Таблицы ---------- */
.article-table__wrap {
    margin: 22px 0;
    overflow-x: auto;              /* широкие таблицы скроллятся, а не ломают вёрстку */
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid var(--art-line);
}
.portal-article table.article-table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    margin: 0;
    font-size: 15.5px;
    background: #fff;
}
.portal-article table.article-table th {
    background: var(--art-soft);
    color: var(--art-ink);
    font-weight: 700;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 2px solid var(--art-line);
    white-space: nowrap;
}
.portal-article table.article-table td {
    padding: 11px 14px;
    border-top: 1px solid var(--art-line);
    vertical-align: top;
}
.portal-article table.article-table tbody tr:nth-child(even) { background: #fafcfe }
.portal-article table.article-table tbody tr:hover { background: var(--art-soft) }

/* ---------- Врезки ---------- */
.art-callout {
    position: relative;
    margin: 24px 0;
    padding: 18px 20px 18px 56px;
    border-radius: 12px;
    background: var(--art-soft);
    border: 1px solid var(--art-line);
    font-size: 16px;
    line-height: 1.65;
}
.art-callout::before {
    content: 'i';
    position: absolute;
    left: 18px; top: 18px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--portal-primary, #0a72ce);
    color: #fff;
    font-weight: 700; font-style: normal;
    display: flex; align-items: center; justify-content: center;
}
.art-callout > *:last-child { margin-bottom: 0 }
.art-callout__title { display: block; font-weight: 700; color: var(--art-ink); margin-bottom: 6px }

.art-callout_tip { background: var(--art-green-soft); border-color: #cbe9d6 }
.art-callout_tip::before { content: '✓'; background: var(--art-green) }
.art-callout_warn { background: var(--art-warn-soft); border-color: #f2e0bd }
.art-callout_warn::before { content: '!'; background: var(--art-warn) }

/* Цитата-акцент во всю ширину */
.portal-article blockquote {
    margin: 26px 0;
    padding: 24px 26px;
    border-radius: 14px;
    background: linear-gradient(92deg, #0a72ce 0%, #23a783 130%);
    color: #fff;
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
    border: 0;
}
.portal-article blockquote > *:last-child { margin-bottom: 0 }
.portal-article blockquote cite { display: block; margin-top: 10px; font-size: 14px; opacity: .85; font-style: normal }

/* Тихая цитата с полосой — для пояснений врача/эксперта */
.portal-article blockquote.art-quote_soft {
    background: none;
    color: var(--art-text);
    border-left: 5px solid var(--portal-accent, #23a783);
    border-radius: 0;
    text-align: left;
    padding: 6px 0 6px 20px;
    font-size: 17px;
}

/* ---------- Плюсы / минусы ---------- */
.art-pros-cons {
    display: flex;
    gap: 18px;
    margin: 24px 0;
    flex-wrap: wrap;
}
.art-pros-cons__col {
    flex: 1 1 260px;
    background: #fff;
    border: 1px solid var(--art-line);
    border-radius: 12px;
    padding: 16px 18px;
}
.art-pros-cons__title { font-weight: 700; color: var(--art-ink); margin-bottom: 10px; font-size: 16px }
.portal-article .art-pros-cons ul { margin: 0 }
.portal-article .art-pros-cons li { padding-left: 26px; margin-bottom: 8px; font-size: 15.5px }
.portal-article .art-pros-cons__col_plus li::before { content: '+'; color: var(--art-green); left: 2px }
.portal-article .art-pros-cons__col_minus li::before { content: '–'; color: #c2543f; left: 2px }

/* ---------- Карточка санатория внутри текста ---------- */
.art-san-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 24px 0;
    padding: 16px;
    border: 1px solid var(--art-line);
    border-radius: 14px;
    background: #fff;
    transition: box-shadow .15s linear;
}
.art-san-card:hover { box-shadow: 0 6px 22px rgba(10, 114, 206, .09) }
.art-san-card__img {
    width: 132px; min-width: 132px; height: 96px;
    border-radius: 10px; object-fit: cover; background: var(--art-soft);
}
.art-san-card__body { flex: 1 1 auto; min-width: 0 }
.portal-article .art-san-card__name {
    display: block; font-size: 17px; font-weight: 700;
    color: var(--art-ink); text-decoration: none; margin-bottom: 4px;
}
.portal-article .art-san-card__name:hover { color: var(--portal-primary, #0a72ce) }
.art-san-card__meta { font-size: 14px; color: var(--art-muted); margin-bottom: 8px }
.art-san-card__price { font-weight: 700; color: var(--art-ink) }
.art-san-card__price span { font-weight: 400; color: var(--art-muted); font-size: 14px }

/* ---------- Изображения ---------- */
.portal-article img { max-width: 100%; height: auto; border-radius: 12px }
.portal-article figure { margin: 26px 0 }
.portal-article figure img { width: 100%; display: block }
.portal-article figcaption {
    margin-top: 8px; padding: 10px 14px;
    background: var(--art-soft); border-radius: 0 0 10px 10px;
    color: var(--art-muted); font-size: 14px;
}

/* ---------- Оглавление ---------- */
.art-toc {
    border: 1px solid var(--art-line);
    border-radius: 14px;
    background: #fff;
    margin: 0 0 28px;
    overflow: hidden;
}
.art-toc__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 15px 18px; cursor: pointer;
    background: var(--art-soft);
}
.art-toc__title { font-weight: 700; color: var(--art-ink); font-size: 17px }
.art-toc__toggle {
    border: 0; background: none; cursor: pointer;
    color: var(--portal-primary, #0a72ce); font-size: 14px; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
}
.art-toc__toggle::after {
    content: ''; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s linear;
}
.art-toc.is-open .art-toc__toggle::after { transform: rotate(-135deg) translate(-2px, -2px) }
.art-toc__body { display: none; padding: 14px 18px 18px }
.art-toc.is-open .art-toc__body { display: block }
.art-toc__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 26px }
.art-toc__item { break-inside: avoid; margin-bottom: 4px }
.art-toc__item_sub { padding-left: 16px }
.portal-article .art-toc__link,
.art-toc__link {
    display: block; padding: 5px 0;
    color: var(--portal-primary, #0a72ce);
    text-decoration: none; font-size: 15px; line-height: 1.4;
    border-left: 2px solid transparent; padding-left: 10px;
    transition: color .15s linear, border-color .15s linear;
}
.art-toc__link:hover { color: #0959a1 }
.art-toc__item_sub .art-toc__link { font-size: 14px; color: var(--art-muted) }
.art-toc__link.is-active { border-left-color: var(--portal-accent, #23a783); color: var(--art-ink); font-weight: 600 }

/* Sticky-оглавление в сайдбаре (десктоп) */
.art-toc_side { position: sticky; top: 16px; margin-bottom: 18px }
.art-toc_side .art-toc__list { columns: 1 }
.art-toc_side .art-toc__body { display: block; max-height: 62vh; overflow-y: auto }

/* ---------- Прогресс чтения ---------- */
.art-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--portal-primary, #0a72ce), var(--portal-accent, #23a783));
    z-index: 9999; transition: width .1s linear;
}

/* ---------- Мобильный ---------- */
@media (max-width: 768px) {
    .portal-article { font-size: 16px; line-height: 1.7 }
    .portal-article h2 { font-size: 22px; margin: 30px 0 12px }
    .portal-article h3 { font-size: 18.5px; margin: 22px 0 10px }
    .portal-article blockquote { padding: 18px; font-size: 16.5px }
    .art-callout { padding: 15px 16px 15px 50px }
    .art-toc__list { columns: 1 }
    .art-san-card { gap: 12px; padding: 12px }
    .art-san-card__img { width: 92px; min-width: 92px; height: 72px }
}