/* =========================================================================
   Запись блога (single.php). Контентные блоки — стили услуги
   (service-content.css / service-page.css), здесь только каркас статьи.
   ====================================================================== */
.blog-post { padding-bottom: 100px; background: #fff; }

/* ---------- Hero: фото слева, заголовок и даты справа ---------- */
.blog-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    margin: 8px 0 64px;
    background: var(--mikos-cream);
}

.blog-hero__media { min-height: 420px; background: var(--mikos-nude); }
.blog-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.blog-hero__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: clamp(32px, 4vw, 64px);
}

.blog-hero__tag {
    align-self: flex-start;
    padding: 6px 12px;
    border: 1px solid var(--mikos-gold);
    color: var(--mikos-ink);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.blog-post .blog-hero__title {
    margin: 0;
    color: #222;
    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.03em;
}

/* Запись без обложки: текст на всю ширину */
.blog-hero--text { grid-template-columns: minmax(0, 1fr); }
.blog-hero--text .blog-hero__info { padding: clamp(36px, 5vw, 72px); }
.blog-hero--text .blog-hero__title,
.blog-hero--text .blog-hero__lead { max-width: 920px; }

.blog-hero__lead { margin: 0; color: var(--mikos-muted); font-size: 17px; line-height: 1.5; }

.blog-meta { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 8px 0 0; padding-top: 20px; border-top: 1px solid rgb(35 38 73 / 12%); }
.blog-meta div { display: flex; flex-direction: column; gap: 4px; }
.blog-meta dt { color: var(--mikos-muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.blog-meta dd { margin: 0; color: var(--mikos-ink); font-size: 16px; }

/* ---------- Статья + липкий сайдбар ---------- */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 64px;
    align-items: start;
}

/* Блоки услуги внутри колонки статьи: без собственной ширины контейнера */
.single-service.mikos-blog-post .blog-layout .service-php__main,
.single-service.mikos-blog-post .blog-layout .service-php__main > *,
.single-service.mikos-blog-post .blog-layout .service-php__main :is(.service-prices, .service-results, .service-doctors) {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

@media (min-width: 992px) {
    .single-service.mikos-blog-post .blog-layout .service-php__main,
    .single-service.mikos-blog-post .blog-layout .service-php__main .content-spoilers:not([hidden]) { row-gap: 64px; }
}

.blog-layout__side { position: sticky; top: 112px; }
.has-overlay-header .blog-layout__side { top: 24px; }

.blog-side { display: flex; flex-direction: column; gap: 16px; }

.blog-author { padding: 24px; background: var(--mikos-cream); }
.blog-author__check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--mikos-blue);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.blog-author__card { display: flex; align-items: center; gap: 14px; color: var(--mikos-ink) !important; text-decoration: none !important; }
.blog-author__photo { flex-shrink: 0; width: 64px; height: 76px; overflow: hidden; background: linear-gradient(0deg, #fff, var(--mikos-nude)); }
.blog-author__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.blog-author__info { display: flex; flex-direction: column; gap: 4px; }
.blog-author__name { font-size: 16px; font-weight: 500; line-height: 1.3; transition: color .2s ease; }
.blog-author__card:hover .blog-author__name { color: var(--mikos-blue); }
.blog-author__position { color: var(--mikos-muted); font-size: 13px; line-height: 1.35; }

.blog-toc {
    max-height: calc(100vh - 330px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid var(--mikos-line);
    scrollbar-width: thin;
}

.blog-toc__title { margin: 0 0 14px; color: #222; font-size: 18px; font-weight: 500; }

.blog-post .blog-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.blog-post .blog-toc__list li { margin: 0; padding: 0; list-style: none; counter-increment: toc; }
.blog-post .blog-toc__list li::before { display: none; }

.blog-post .blog-toc__list a {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 9px 10px 9px 12px;
    border-left: 2px solid transparent;
    color: var(--mikos-ink) !important;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none !important;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.blog-post .blog-toc__list a::before {
    content: counter(toc, decimal-leading-zero);
    flex-shrink: 0;
    color: var(--mikos-gold);
    font-size: 12px;
    line-height: 1.7;
}

.blog-post .blog-toc__list a:hover { color: var(--mikos-blue) !important; }

/* Раздел, который сейчас читают */
.blog-post .blog-toc__list a.is-active {
    border-left-color: var(--mikos-blue);
    background: var(--mikos-cream);
    color: var(--mikos-blue) !important;
}

.blog-post .blog-side__cta { width: 100%; }

.blog-toc__toggle { display: none; }

/* ---------- Оценка статьи ---------- */
.blog-rating { margin-top: 64px; padding: 32px; border: 1px solid var(--mikos-line); }
.blog-post .blog-rating__title { margin: 0 0 16px; color: #222; font-size: 22px; font-weight: 400; }
.blog-rating__stars { display: flex; gap: 6px; }
.blog-post .blog-rating__star {
    display: inline-flex;
    padding: 2px;
    border: 0;
    background: none;
    color: var(--mikos-nude);
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}
.blog-post .blog-rating__star:hover { transform: scale(1.1); }
.blog-post .blog-rating__star.is-hover,
.blog-post .blog-rating__star.is-active { color: var(--mikos-gold); }
.blog-rating__stars.is-done { pointer-events: none; }
.blog-rating__msg { margin: 12px 0 0; color: var(--mikos-blue); font-size: 14px; }

/* ---------- Запись и другие статьи ---------- */
.blog-appointment { margin-top: 140px; }
.blog-more { margin-top: 100px; }
.blog-post .blog-more__title { margin: 0 0 32px; color: #222; font-size: clamp(30px, 3.3vw, 46px); font-weight: 400; letter-spacing: -.04em; }
.blog-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.blog-card { display: flex; flex-direction: column; border: 1px solid var(--mikos-line); color: var(--mikos-ink) !important; text-decoration: none !important; transition: border-color .2s ease; }
.blog-card:hover { border-color: var(--mikos-blue); }
.blog-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mikos-nude); }
.blog-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.blog-card__date { color: var(--mikos-muted); font-size: 13px; }
.blog-card__title { font-size: 17px; line-height: 1.35; }

/* ---------- Адаптив ---------- */
@media (max-width: 1199px) {
    .blog-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
}

@media (max-width: 991px) {
    .blog-hero { grid-template-columns: 1fr; margin-bottom: 40px; }
    .blog-hero__media { min-height: 0; aspect-ratio: 16 / 10; }
    /* Сайдбар уходит над статьёй: автор и содержание читаются первыми */
    .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .blog-layout__side { position: static; order: -1; }
    .blog-toc { max-height: none; padding: 0; }
    .blog-toc__title { display: none; }
    .blog-post .blog-toc__toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 18px 20px;
        border: 0;
        background: none;
        color: #222;
        font-family: var(--mikos-font);
        font-size: 17px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
    }
    .blog-toc__count { color: var(--mikos-muted); font-size: 13px; font-weight: 400; }
    .blog-post .blog-toc__toggle::after {
        content: '';
        width: 8px;
        height: 8px;
        margin-left: auto;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: transform .2s ease;
    }
    .blog-post .blog-toc__toggle[aria-expanded="true"]::after { transform: rotate(225deg); }
    .blog-post .blog-toc__list { display: none; padding: 0 12px 16px; }
    .blog-toc.is-open .blog-toc__list { display: block; }
    .blog-post .blog-side__cta { display: none; }
    /* Блоки услуги на мобильном сжаты на 20px под поля страницы — в статье поля уже есть */
    .single-service.mikos-blog-post .blog-layout .service-php__main { width: auto; }
    .blog-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .blog-post { padding-bottom: 50px; }
    .blog-hero__info { padding: 24px 20px 28px; gap: 14px; }
    .blog-rating { margin-top: 40px; padding: 24px 20px; }
    .blog-appointment { margin-top: 90px; }
    .blog-more { margin-top: 50px; }
    .blog-more__grid { grid-template-columns: minmax(0, 1fr); }
}