/*
 * Content — стили для контента страниц
 * 
 * .entry-content — обёртка для всего что выводит the_content()
 * Блоки Gutenberg рендерятся внутри неё.
 * 
 * Важно: не ограничиваем ширину тут — 
 * каждый блок сам решает свою ширину.
 */

/* Базовая обёртка */
.entry-content {
    width: 100%;
}

/* ============================================================
   СТИЛИ ДЛЯ СТАНДАРТНЫХ GUTENBERG БЛОКОВ
   Текст, заголовки, списки, картинки — то что идёт "из коробки"
   ============================================================ */

/* Контейнер для стандартных текстовых блоков */
.entry-content > p,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > pre,
.entry-content > table,
.entry-content > hr,
.entry-content > .wp-block-separator {
    font-family: var(--font-sans);
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Spacing между элементами */
.entry-content > * + * {
    margin-top: 1.75rem;
}

/* Заголовки */
.entry-content > h1 {
    font-size: 2.65rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-top: 3rem;
    margin-bottom: 0.75rem;
    color: var(--accent-text);

    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.entry-content > h2 {
    font-size: 2.2rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--text-header);
}

.entry-content > h3 {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    color: var(--text-header);
}

.entry-content > h4 {
    font-size: 1.4rem;
    line-height: 1.4;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-header);
}

/* Параграфы */
.entry-content > p {
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--text-main);
}

.entry-content strong {
    color: var(--text-main);
    font-weight: 600;
}

/* Ссылки в контенте */
.entry-content a {
    color: var(--bio-accent);
    text-underline-offset: 3px;
    text-decoration-color: var(--bio-accent);
    transition:  var(--transition-slow);
}

.entry-content a:hover {
    text-decoration: underline;
    transition: var(--transition-fast);
    color: var(--bio-accent-hover);
    text-decoration-color: var(--bio-accent-hover);
}

/* Списки */
.entry-content ul,
.entry-content ol {
    padding-left: 1.5rem;
}

.entry-content ul {
    list-style: disc;
}

.entry-content ol {
    list-style: decimal;
}

.entry-content li {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-size: 1.0625rem;
    line-height: 1.75;
}

.entry-content li::marker {
    color: var(--primary);
}

/* Картинки */
.entry-content img {
    border-radius: var(--r-md);
}

.entry-content figure {
    margin: 2rem auto;
}

.entry-content figcaption {
    font-size: 0.8125rem;
    color: var(--text-hint);
    text-align: center;
    margin-top: 0.5rem;
}

/* Separator */
.entry-content hr,
.entry-content .wp-block-separator {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2.5rem auto;
    max-width: 100px;
}


/* ============================================================
   GUTENBERG ALIGNMENT CLASSES
   
   .alignwide  — шире текста, но не на весь экран
   .alignfull  — на весь экран
   .aligncenter — по центру
   
   Наши кастомные блоки тоже могут использовать эти классы
   ============================================================ */

.entry-content .alignwide {
    max-width: var(--wide-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.entry-content .alignfull {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.entry-content .aligncenter {
    text-align: center;
}

/* Ограничиваем ширину контейнера картинки шириной текста */
.entry-content .wp-block-image,
.post-content .wp-block-image {
    max-width: var(--content-width-normal, 850px); /* Та же ширина, что и у текста/промо-блока */
    margin: 2.5rem auto; /* Центрируем и даем отступы сверху/снизу */
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрируем саму картинку внутри */
    clear: both; /* Запрещаем тексту обтекать картинку по бокам */
}

/* Стилизуем саму картинку, чтобы она не теряла качество */
.entry-content .wp-block-image img,
.post-content .wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md, 12px); /* Добавляем скругление, чтобы фотки смотрелись в едином стиле с нашими кастомными блоками */
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); /* Легкая тень, чтобы оторвать картинку от фона */
    /* Если картинка меньше 850px, она не будет растягиваться и мылиться */
    width: fit-content; 
}

/* Стили для подписи под картинкой (Caption), если ты ее добавишь */
.entry-content .wp-block-image figcaption,
.post-content .wp-block-image figcaption {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}