/* docfiles.css — стили раздела, файл под одну задачу (не смешивать с styles.css) */
/* ── Виджет «Бланк и образец» ─────────────────────────────────────────────────
Два бесплатных файла документа: пустой бланк и образец заполнения.
Прежняя версия (блок «ФАЙЛЫ») была карточкой во всю ширину с двумя крупными
строками-ссылками, цветными квадратами формата, стрелками справа, отдельной
строкой запасных форматов и подвалом с кнопкой. Владелец: «блок скачать
большой», «виджет кривоватый, надо иконки документов». Он занимал половину
первого экрана /blank и /sample ради двух ссылок.
Отсюда правила этой версии:
• две колонки рядом, а не строки одна под другой — по высоте это ровно вдвое
меньше при той же информации;
• ни рамки, ни тени: блок отделён одной волосяной чертой сверху. Карточка
вокруг двух ссылок добавляла 2 × 20 px полей и читалась как «отдельный
раздел», хотя это часть первого экрана;
• миниатюра листа вместо цветного квадрата с расширением: квадрат «DOCX»
называл формат, а вопрос у человека другой — чем бланк отличается от
образца. Прочерки против заполненных строк отвечают на него без слов.
Цвета — только смысловые роли из styles.css: зелёный --c-free («бесплатно»,
ссылки на бесплатные файлы) и бумажные --paper-* для листа. */
/* 14.09.2026. Блок стоял голым: одна волосяная черта сверху и дальше текст в общий фон.
Владелец: «блок Документов как-то не заметен». И правда — на странице, где всё остальное
в карточках с рамками, единственное бесплатное предложение было единственным, что рамки
не имело: глаз проходил мимо него к платной кнопке. При этом вернуться к прежней тяжёлой
карточке нельзя — её забраковали как «блок скачать большой».
Решение: панель на тёплой бумаге с зелёной чертой сверху. Зелёный — роль «бесплатно» из
палитры (--c-free), та же, что у цены «бесплатно» и у ссылок на файлы, поэтому черта не
украшение, а подпись цветом: «вот это можно взять даром». Тем же приёмом отмечен блок
комплекта в каталоге (.ed-catpack — янтарная черта сверху), так что для сайта это не
новая конструкция, а уже известная. Полей при этом столько же, сколько было у текста, —
блок стал заметнее, но не выше. */
.dfw{margin:0 0 20px;padding:18px 20px 20px;border-top:3px solid var(--c-free);
border-radius:0 0 var(--radius) var(--radius);background:var(--paper);scroll-margin-top:88px}
/* шапка липкая — якорь #files не должен уезжать под неё */
.dfw-hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-bottom:14px}
/* Значок «скачать» у заголовка. Строго говоря, повтор смысла слова «Скачать» — и именно
поэтому он здесь: заголовок ищут не читая, а узнавая, и стрелка вниз находится быстрее,
чем прочитывается строка. align-self, потому что шапка выровнена по базовой линии. */
.dfw-ic{flex:none;width:19px;height:19px;align-self:center;color:var(--c-free)}
.dfw-t{font-size:23px;line-height:1.15;margin:0}
/* «бесплатно» здесь про ФАЙЛ и уместно: он действительно бесплатен и не требует
регистрации. Рядом с ценой готового документа этого слова нет — там оно читалось
бы как «документ стоит ноль». */
.dfw-free{font-size:14px;color:var(--c-free)}
/* Две равные колонки. minmax(0,1fr) — иначе длинное название в ряду ссылок
растягивает колонку и ломает сетку. max-width: на широком экране контент
документа шире 1200 px, и две колонки по половине разъезжались по краям —
между листом и его подписью оставалась пустая полоса в пол-экрана. */
.dfw-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 44px;max-width:1040px}
.dfw-it{display:flex;align-items:stretch;gap:14px;min-width:0}
/* Миниатюра листа: рисунок, а не картинка — внешних файлов на странице нет.
flex:none, чтобы лист не сплющивался под длинным текстом справа. */
.dfw-sheet{flex:none;width:46px;height:62px;border-radius:3px;background:var(--paper)}
/* Колонка растянута на высоту ряда, ряд ссылок прижат книзу (margin-top:auto):
пояснения у бланка и образца разной длины, и без этого ссылки в двух колонках
стояли на разной высоте — глаз читал это как сбой вёрстки. */
.dfw-b{min-width:0;display:flex;flex-direction:column}
.dfw-n{font-size:16px;font-weight:700;line-height:1.25;color:var(--ink)}
.dfw-d{margin:3px 0 0;font-size:14px;line-height:1.4;color:var(--muted)}
/* Ряд форматов. Форматов четыре (у бланка-таблицы пять), и ряд одинаковых зелёных слов
подряд читался сплошной строкой — глазу не за что зацепиться, главный формат тонул среди
запасных. Чип с рамкой делает из каждого формата отдельный предмет: видно, сколько их и
что каждый берётся одним нажатием. Всё зелёное — все они ведут к бесплатному; главный
залит, остальные обведены. Настоящих кнопок (btn) здесь по-прежнему нет: кнопка на
странице одна, и она про платное действие. */
.dfw-a{display:flex;flex-wrap:wrap;align-items:center;gap:7px 9px;margin-top:auto;padding-top:9px;font-size:14px}
.dfw-lbl{color:var(--muted);font-size:13.5px}
.dfw-fmt{display:inline-block;padding:4px 10px;border:1px solid var(--c-free);border-radius:999px;
font-size:13px;font-weight:600;line-height:1.35;letter-spacing:.02em;color:var(--c-free);
background:#fff;white-space:nowrap;transition:background .12s ease,color .12s ease}
.dfw-fmt.is-main{background:var(--c-free);color:#fff}
.dfw-fmt:hover{background:var(--c-free);color:#fff}
.dfw-fmt.is-main:hover{background:var(--c-free-bg);color:var(--c-free)}
.dfw-fmt:focus-visible{outline:2px solid var(--c-free);outline-offset:2px}
/* «Смотреть на сайте» — не файл, а страница: посмотреть можно, не скачивая. Поэтому не чип
(читалось бы как пятый формат) и своей строкой НАД рядом форматов — почему именно над,
объяснено в разметке: ряд форматов прижат к низу колонки, чтобы стоять на одной высоте в
обеих, а этой ссылки в одной из колонок может не быть. */
.dfw-look{display:inline-block;margin-top:9px;font-size:13.5px;align-self:start;
color:var(--c-free);text-decoration:underline;text-underline-offset:2px}
.dfw-look:hover{color:var(--ink)}
.dfw-look:focus-visible{outline:2px solid var(--c-free);outline-offset:3px;border-radius:3px}
.dfw-hint{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--muted);max-width:82ch}
.dfw-hint a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.dfw-hint a:hover{color:var(--accent-ink)}
@media (max-width:720px){
/* Одна колонка: рядом две колонки по 46 px листа + текст не помещаются, и
название начинает переноситься по одному слову. */
.dfw{padding:14px 14px 16px}
.dfw-two{grid-template-columns:minmax(0,1fr);gap:18px}
.dfw-t{font-size:20px}
.dfw-sheet{width:40px;height:54px}
.dfw-a{gap:7px 8px}
/* Слово «Скачать» на телефоне съедает строку чипов: четыре чипа и так переносятся на две
строки, а с подписью — на три. Чипы говорят сами за себя рядом с заголовком блока. */
.dfw-lbl{display:none}
}
/* ── Карточка-ссылка целиком ──────────────────────────────────────────────────
Владелец: «можно сделать чтобы карточки были ссылками а не только заголовок на
который сложно попасть». Попасть действительно сложно: в карточке каталога
кликабельны были две строки заголовка, а остальные 120 px высоты — мёртвая
зона, и это заметнее всего на телефоне.
Приём — растянутая псевдо-ссылка: карточка получает position:relative, а её
ГЛАВНАЯ ссылка — ::after на всю площадь карточки. Вкладывать в нельзя
(браузер разбирает такую вложенность не так, как задумано), а обработчик клика
на div не даёт ни средней кнопки, ни «открыть в новой вкладке», ни фокуса с
клавиатуры. Здесь же в разметке остаётся ровно одна ссылка на карточку —
скринридер читает её один раз, Tab проходит по ней один раз.
Внутренние ссылки (подкатегории, кнопки файлов) поднимаются над накладкой
через position:relative;z-index:1 — иначе их перекрыл бы ::after.
Выделение текста накладка не ломает: pointer-events она перехватывает только
по клику, а выделять описание в карточке — не тот сценарий, ради которого
стоит отказываться от попадания пальцем. */
.stretch-card{position:relative}
.stretch-card .stretch-link::after{content:"";position:absolute;inset:0;z-index:0}
/* Фокус с клавиатуры: подсвечиваем всю карточку, а не невидимый текст ссылки. */
.stretch-card:has(.stretch-link:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
/* Всё, что должно остаться кликабельным поверх накладки. */
.stretch-card a:not(.stretch-link),
.stretch-card button,
.stretch-card .stretch-above{position:relative;z-index:1}
/* Ховер карточек, получивших накладку. Сами карточки описаны в styles.css; там
подсветка названия висела на :hover ССЫЛКИ, то есть срабатывала только над
текстом заголовка. С накладкой курсор бывает где угодно по карточке, поэтому
состояние переносим на карточку целиком. */
/* «Ещё N подкатегорий» в карточке раздела больше не ссылка (адрес тот же, что и у
всей карточки), но остаётся строкой того же списка — повторяем оформление
.ed-sublinks a из styles.css и снимаем черту у соседа сверху, который перестал
быть последним элементом списка. */
.ed-sublinks .more:not(a){display:flex;justify-content:space-between;gap:10px;padding:5px 0;
font-size:15px;font-weight:600;line-height:1.5;color:var(--ed-accent)}
.ed-sublinks a:has(+ .more:not(a)){border-bottom:0}
.ed-catcard.stretch-card:hover{border-color:var(--ed-accent)}
.ed-catcard.stretch-card:hover .hd h2 a{color:var(--ed-accent)}
.fbl-card.stretch-card:hover .fbl-nm span{color:var(--ed-accent)}
.pkg-item.stretch-card:hover{border-color:var(--accent)}
.pkg-item.stretch-card:hover .pi-t a{color:var(--accent)}
/* ── Раздел «Формы и бланки» (/forms) ────────────────────────────────────────
Витрина всех документов каталога в виде «бланк + образец». Префикс fbl- («формы
и бланки») — намеренно не fb-: короткий fb- уже занят виджетом отзывов (.fb-row,
.fb-title в styles.css), и совпадение имён однажды уже стоило бы чужой вёрстки.
Главное требование к этим правилам — ПЛОТНОСТЬ. Витрину дважды забраковали в виде
«огромная карточка, крошечное название и кнопка „Открыть →“ посреди пустоты»: в
списке из четырёхсот позиций человек сканирует названия, и каждый лишний пиксель
воздуха — это лишний экран прокрутки. Отсюда мелкая сетка, узкие отбивки и
размеры шрифта уровня каталога, а не главной страницы.
Переменные — общие (--ed-* редакционного слоя из styles.css): раздел живёт внутри
.ed-page и обязан совпадать с каталогом по границам, радиусам и типографике. */
/* Факты первого экрана: чем этот раздел отличается от каталога, тремя короткими
утверждениями вместо абзаца. */
.fbl-facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px;font-size:14.5px;color:var(--ed-ink2)}
.fbl-fact b{color:var(--ed-ink);font-weight:700}
.fbl-note{font-size:14.5px;line-height:1.5;color:var(--ed-ink2);max-width:78ch;margin:0 0 14px}
.fbl-note a{color:var(--ed-accent)}
/* ── Блок «Формы по номеру» ───────────────────────────────────────────────────
Колонки, а не сетка карточек: группы разной длины (в «Кадрах» пятнадцать форм, в
«Медицине» одна), и в сетке короткие группы оставляли бы пустые прямоугольники.
Многоколоночный поток укладывает их вплотную. */
.fbl-numgrid{column-count:3;column-gap:26px}
.fbl-numgroup{break-inside:avoid;margin:0 0 18px}
.fbl-numhd{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ed-ink2);
padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--ed-line)}
.fbl-num{display:flex;align-items:baseline;gap:9px;padding:4px 0;font-size:14px;line-height:1.35;color:var(--ed-ink);text-decoration:none}
.fbl-num:hover .fbl-numt{color:var(--ed-accent)}
/* Номер отдельной колонкой фиксированной ширины: по нему и сканируют список, а
«плавающий» номер внутри строки глазом не находится. */
.fbl-numb{flex:none;min-width:64px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--ed-accent)}
.fbl-numt{flex:1 1 auto;min-width:0;color:var(--ed-ink2)}
/* ── Оглавление витрины и вторая ось входа (вид документа) ── */
.fbl-jump{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.fbl-jump a{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--ed-line);
border-radius:var(--ed-rad);background:#fff;font-size:13.5px;line-height:1.2;color:var(--ed-ink);text-decoration:none}
.fbl-jump a:hover{border-color:var(--ed-accent);color:var(--ed-accent)}
.fbl-jump a .n,.fbl-kinds .ed-chip .n{color:var(--faint);font-size:12px;font-weight:600}
.fbl-kinds{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.fbl-kinds-l{font-size:13.5px;color:var(--faint)}
/* ── Раздел витрины ── */
.fbl-sec{margin-top:24px}
.fbl-sec:first-child{margin-top:0}
/* scroll-margin: шапка сайта липкая, без отступа якорь #razdel-… уезжает под неё. */
.fbl-sec,.fbl-alphagroup{scroll-margin-top:96px}
.fbl-sechd{display:flex;align-items:center;gap:10px;padding-bottom:8px;margin-bottom:12px;border-bottom:1px solid var(--ed-line)}
.fbl-secic{flex:none;width:28px;height:28px;border-radius:8px;background:var(--ed-accent-soft);display:flex;align-items:center;justify-content:center}
.fbl-secic .ic{width:16px;height:16px;color:var(--ed-accent)}
.fbl-sect{flex:1;min-width:0;font-size:19px}
.fbl-sect a{color:inherit;text-decoration:none}
.fbl-sect a:hover{color:var(--ed-accent)}
.fbl-secn{flex:none;font-size:13px;color:var(--faint)}
/* ── Карточка документа витрины ──────────────────────────────────────────────
Внутри три разных адреса (страница документа, бланк, образец), поэтому обернуть
карточку в один нельзя — вложенные ссылки браузер разбирает не так, как
задумано. Кликается она всё равно целиком: класс .stretch-card растягивает
название псевдо-элементом, а кнопки файлов лежат над накладкой (см. блок
«Карточка-ссылка целиком» выше). */
.fbl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.fbl-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px;background:#fff;
border:1px solid var(--ed-line);border-radius:var(--ed-rad)}
.fbl-card:hover{border-color:var(--ed-accent)}
.fbl-nm{display:flex;align-items:flex-start;gap:8px;font-size:15.5px;font-weight:600;line-height:1.3;
color:var(--ed-ink);text-decoration:none}
.fbl-nm .ic{width:16px;height:16px;margin-top:2px;color:var(--ed-accent);opacity:.9}
.fbl-nm:hover span{color:var(--ed-accent)}
.fbl-ds{margin:0;font-size:13px;line-height:1.4;color:var(--ed-ink2)}
/* margin-top:auto — в ряду карточки разной высоты (у части документов описания нет),
и строка с файлами должна стоять на одной линии, иначе ряд «рассыпается». */
.fbl-dl{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px;border-top:1px solid var(--ed-line-soft)}
.fbl-f{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid var(--ed-line);
border-radius:6px;font-size:13px;font-weight:600;line-height:1.2;color:var(--ed-accent);text-decoration:none;background:#fff}
.fbl-f .ic{width:14px;height:14px}
.fbl-f:hover{border-color:var(--ed-accent);background:var(--ed-accent-soft)}
/* Бланк подсвечен, образец нет: из двух файлов чаще скачивают пустой бланк — с ним
и пришли из поиска. Две одинаковые кнопки заставляли бы выбирать на пустом месте. */
.fbl-f-b{background:var(--ed-accent-soft);border-color:transparent}
/* Форматы подписью, а не значками: «DOCX · PDF» читается без легенды и занимает
одну строку, а три цветных плашки в карточке 300 px спорят с названием. */
.fbl-ext{margin-left:auto;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--faint);white-space:nowrap}
/* ── Алфавитный указатель ─────────────────────────────────────────────────────
Голые названия строками: указатель просматривают глазами, а не читают, поэтому
ни карточек, ни описаний — только имя документа и колонки под быстрый пробег. */
.fbl-alphagroup{margin-top:16px}
.fbl-alphahd{font-family:var(--ed-serif);font-size:21px;font-weight:700;line-height:1;color:var(--ed-accent);margin-bottom:6px}
.fbl-alphalist{columns:4 220px;column-gap:26px;list-style:none;margin:0;padding:0}
.fbl-alphalist li{break-inside:avoid}
.fbl-alphalist a{display:block;padding:3px 0;font-size:13.5px;line-height:1.4;color:var(--ed-ink2);text-decoration:none}
.fbl-alphalist a:hover{color:var(--ed-accent)}
/* ── «Чем бланк отличается от образца» ── */
.fbl-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fbl-expl{padding:14px 16px;border:1px solid var(--ed-line);border-radius:var(--ed-rad);background:var(--ed-panel)}
.fbl-expl b{display:block;font-size:15.5px;color:var(--ed-ink)}
.fbl-expl p{margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--ed-ink2)}
@media (max-width:940px){
.fbl-numgrid{column-count:2}
.fbl-two{grid-template-columns:1fr}
}
@media (max-width:640px){
.fbl-numgrid{column-count:1}
.fbl-grid{grid-template-columns:1fr}
.fbl-facts{gap:4px 16px;font-size:14px}
.fbl-alphalist{columns:2 150px;column-gap:18px}
.fbl-sect{font-size:17px}
/* На узком экране подпись форматов выдавливает кнопки на вторую строку — тогда уж
пусть переносится она сама, целиком, а не втискивается справа. */
.fbl-ext{margin-left:0;flex:1 0 100%}
}