/* ==========================================================
   A42 Design System 2026 — типографика тела статьи.
   ЕДИНЫЙ источник правды: подключается и на сайте
   (landing/fuul_news.blade.php), и в редакторе
   (back/posts/add.blade.php), чтобы редактор показывал
   ровно то, что увидит читатель.

   Палитра строго: Milk #FBF4EE · Yellow #FFCE4D ·
   Pale Yellow #FFECB9 · White #FFF · Gray #464646 · Black #000

   Все правила навешаны на .a42-article, поэтому файл
   безопасно подключать поверх любой вёрстки.
   ========================================================== */

.a42-article {
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;

    --a42-milk:       #FBF4EE;
    --a42-brand:      #FFCE4D;
    --a42-brand-soft: #FFECB9;
    --a42-paper:      #FFFFFF;
    --a42-gray:       #464646;
    --a42-ink:        #000000;

    font-family: Inter, system-ui, sans-serif;
    text-align: left;
    font-size: clamp(1rem, 1.5vw, 1.125rem);   /* 16-18px */
    line-height: 1.75;
    color: var(--a42-gray);
}

/* ---------- Заголовки ---------- */
.a42-article h2,
.a42-article h3,
.a42-article h4 {
    color: var(--a42-ink);
    font-family: inherit;
}

.a42-article h2 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);   /* 28-36px */
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

.a42-article h3 {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.a42-article h4 {
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 600;
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

/* Первый заголовок в статье не отбивается сверху */
.a42-article > h2:first-child,
.a42-article > h3:first-child,
.a42-article > h4:first-child { margin-top: 0; }

/* ---------- Абзацы ---------- */
.a42-article p {
    text-align: left;
    margin-bottom: var(--space-md);
}
.a42-article p:last-child { margin-bottom: 0; }

.a42-article strong { color: var(--a42-ink); font-weight: 700; }

/* Italic запрещён дизайн-системой — гасим даже если редактор его вставил */
.a42-article em,
.a42-article i { font-style: normal; font-weight: 600; color: var(--a42-ink); }

/* ---------- Ссылки: подчёркивание жёлтым, никаких синих браузерных ---------- */
.a42-article a {
    color: var(--a42-ink);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--a42-brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.a42-article a:hover { text-decoration-color: var(--a42-ink); }

/* ---------- Нумерованные списки: жёлтые кружки ---------- */
.a42-article ol {
    counter-reset: item;
    list-style: none;
    padding-left: 0;
    margin: var(--space-xl) 0;
}

.a42-article ol li {
    counter-increment: item;
    margin-bottom: var(--space-md);
    padding-left: 3.5rem;
    position: relative;
    line-height: 1.75;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
}

.a42-article ol li:before {
    content: counter(item);
    position: absolute;
    left: 0;
    top: 0;
    background: var(--a42-brand);
    color: var(--a42-ink);
    font-weight: 700;
    font-size: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.a42-article ol ol {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

.a42-article ol ol li { padding-left: 3rem; font-size: 1rem; }

.a42-article ol ol li:before {
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
    background: var(--a42-brand-soft);
    color: var(--a42-ink);
}

/* ---------- Маркированные списки ---------- */
.a42-article ul {
    list-style: none;
    padding-left: 0;
    margin: var(--space-xl) 0;
}

.a42-article ul li {
    padding-left: 2rem;
    position: relative;
    margin-bottom: var(--space-sm);
    line-height: 1.75;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
}

.a42-article ul li:before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 0.7em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--a42-brand);
}

/* ---------- Цитата = highlight-callout ----------
   Фон pale yellow, рамка brand, БЕЗ italic, без полоски слева/сверху,
   без теней и без serif-кавычки. */
.a42-article blockquote {
    position: relative;
    margin: var(--space-2xl) 0;
    padding: var(--space-lg) var(--space-xl);
    background: var(--a42-brand-soft);
    border: 1px solid var(--a42-brand);
    border-left: 1px solid var(--a42-brand);
    border-radius: 0.75rem;
    font-style: normal;
    font-weight: 500;
    font-size: clamp(1.0625rem, 2vw, 1.1875rem);
    line-height: 1.75;
    color: var(--a42-ink);
}

.a42-article blockquote p {
    margin-bottom: var(--space-sm);
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}
.a42-article blockquote p:last-child { margin-bottom: 0; }

/* ---------- Картинки ---------- */
.a42-article img {
    max-width: 100%;
    height: auto;
    margin: var(--space-2xl) 0;
    border-radius: 0.75rem;
}
.a42-article img.image-meta { margin-top: 0; }

/* ---------- Адаптивность ---------- */
@media (max-width: 768px) {
    .a42-article blockquote {
        padding: var(--space-md);
        margin: var(--space-xl) 0;
    }

    .a42-article ol li,
    .a42-article ul li { margin-bottom: var(--space-sm); }
}

/* ==========================================================
   Перебивка дефолтов Quill (.ql-editor) в редакторе.
   Quill сбрасывает margin/padding у блоков и рисует свои
   маркеры списков селекторами вида `.ql-editor p` — это
   специфичность (0,2,0), поэтому одного `.a42-article p`
   не хватает. Ниже — те же правила с классом редактора.
   На сайте этот блок не действует: там нет .ql-editor.
   ========================================================== */
.a42-article .ql-editor {
    line-height: 1.75;
    white-space: normal;   /* иначе Quill схлопывает вёрстку иначе, чем сайт */
}

.a42-article .ql-editor h2 {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}
.a42-article .ql-editor h3 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}
.a42-article .ql-editor h4 {
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}
.a42-article .ql-editor p { margin-bottom: var(--space-md); }

.a42-article .ql-editor blockquote {
    margin: var(--space-2xl) 0;
    padding: var(--space-lg) var(--space-xl);
}

.a42-article .ql-editor ol,
.a42-article .ql-editor ul {
    margin: var(--space-xl) 0;
    padding-left: 0;
}

.a42-article .ql-editor ol > li { padding-left: 3.5rem; }
.a42-article .ql-editor ul > li { padding-left: 2rem; }

/* Quill задаёт li::before { width:1.2em; margin-left:-1.5em } — сбрасываем,
   чтобы жёлтые кружки совпали с сайтом. */
.a42-article .ql-editor li::before {
    display: flex;
    margin-left: 0;
    margin-right: 0;
    white-space: normal;
    text-align: center;
}

.a42-article .ql-editor ul > li::before {
    content: "";
    display: block;
    left: 0.5rem;
    top: 0.7em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--a42-brand);
}

/* Quill нумерует списки через counter list-0/list-1, а не item */
.a42-article .ql-editor ol > li {
    counter-increment: list-0;
}
.a42-article .ql-editor ol > li::before {
    content: counter(list-0);
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    background: var(--a42-brand);
    color: var(--a42-ink);
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50%;
}

/* Чек-листы Quill оставляем читаемыми, но в палитре */
.a42-article .ql-editor ul[data-checked=true] > li::before,
.a42-article .ql-editor ul[data-checked=false] > li::before {
    background: none;
    color: var(--a42-ink);
    width: 1.2em;
    height: auto;
    border-radius: 0;
    top: 0;
}