/* Элементы страниц, порождённых tools/gen_site.py из живых страниц leimu.ru: категории, товары, статьи, документы.
   Та же безрамочная подача: ни линий, ни плашек — номер, заголовок и текст на общей подложке, разделённые воздухом. */

/* в заголовках живого сайта часть слов выделена <b> — в макете заголовки одного начертания */
.h1 b, .h2 b, .h3 b, .lot-name b, .kat-h1 b { font-weight: inherit; }

/* текстовые карточки (преимущества, виды продукта, направления) */
.g-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(30px, 5vh, 56px) clamp(20px, 3vw, 54px); }
.g-cards-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-card { display: flex; flex-direction: column; gap: 10px; color: var(--brown); transition: transform .35s var(--ease-out); }
a.g-card:hover { transform: translateX(6px); }
a.g-card:hover .lot-name { color: var(--accent); }
.g-num { font-family: var(--mono); font-style: normal; font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.g-card .lot-name { font-size: clamp(1.05rem, 1.5vw, 1.45rem); transition: color .25s var(--ease-out); }
.g-card .lot-text { font-size: 0.95rem; line-height: 1.6; max-width: 46ch; }
.g-card .props { margin-top: 2px; }
.g-inline { display: block; margin-top: 6px; }
.g-small { font-size: 0.8rem; color: var(--ink-soft); }
.g-note { max-width: 46ch; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); }
/* дозировка словами («на 1 кг смеси 0,4–0,6 кг воды») — не крупная цифра, а строка: ей нужен перенос и умеренный кегль */
.dose, .prow-side { min-width: 0; max-width: 100%; }
.dose .g-dose-text { font-size: clamp(0.95rem, 1.15vw, 1.1rem) !important; line-height: 1.3 !important; letter-spacing: 0 !important; white-space: normal !important; overflow-wrap: anywhere; }

/* перечни применения, примеры, теги */
.g-chips { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: clamp(18px, 3vh, 30px); }
.g-chips li { padding: 9px 14px; background: var(--tint); font-size: 0.86rem; line-height: 1.35; color: var(--brown); }
.g-chips li a { color: inherit; }

/* «где применяется» и похожие текстовые блоки: заголовок слева, текст справа */
.g-app .prose { max-width: 62ch; }
.g-app .prose > * + * { margin-top: 0.9em; }

/* сравнительная таблица */
.g-table { font-size: 0.86rem; min-width: 880px; }
.g-table th { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6rem; line-height: 1.4; color: var(--ink-soft); vertical-align: bottom; }
.g-table td:first-child { font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brown); white-space: nowrap; }
.g-legend { margin-top: 18px; font-size: 0.82rem; color: var(--ink-soft); }
.g-legend p { display: inline; margin-right: 18px; }

/* статьи и документы: узкая колонка крупного текста */
.g-text-head .h1 { max-width: 22ch; font-size: clamp(1.9rem, 4.4vw, 4rem); }
.g-head-prose { margin-top: clamp(16px, 3vh, 28px); }
.g-text-head + .sec, .g-text-head ~ .sec { padding-top: clamp(20px, 4vh, 48px); }
.sec > .prose { margin: 0 auto; max-width: 74ch; }
.sec > .prose + .prose { margin-top: 1em; }
.prose .pic { margin: 1.4em 0; max-height: 72vh; width: auto; max-width: 100%; }
.prose blockquote { padding-left: 22px; font-size: 1.15em; line-height: 1.5; color: var(--brown); }
.prose .cta { margin-top: 1.2em; }

@media (max-width: 1100px) {
  .g-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .g-cards, .g-cards-wide { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .g-card .lot-text { font-size: 1rem; max-width: none; }
  .g-chips li { font-size: 0.92rem; padding: 11px 14px; }
  .g-text-head .h1 { font-size: clamp(1.7rem, 7.6vw, 2.4rem); }
}

/* шапка порождённой страницы с надзаголовком и/или длинным именем: раскладка kategoriya.css рассчитана на три ряда и короткое имя */
.g-head-kicker { grid-column: 1 / -1; display: block; margin-bottom: 14px; max-width: 70ch; }
.kat-head.has-kicker .kat-head-text, .kat-head.has-kicker .kat-head-pic { grid-row: 4; }
/* кегль имени подобран генератором под его строки: последняя строка стоит рядом с фото и не должна под него уйти */
@media (min-width: 981px) { .kat-head[style*="--kat-h1-d"] { --kat-h1: clamp(2.2rem, var(--kat-h1-d), 8.6rem); } }
/* разбивка на строки рассчитана под компьютер; на узких экранах имя переносится само */
@media (max-width: 980px) { .kat-h1 span { display: inline; } }
@media (max-width: 760px) { .kat-head.wide-word { --kat-h1: 6.6vw; } }
.kat-head.long { --kat-h1: clamp(1.9rem, 4.4vw, 4.8rem); }
.kat-head.long .kat-h1 { line-height: 0.98; max-width: 20ch; }
.kat-head.long .kat-head-pic { margin-top: clamp(20px, 3.6vh, 40px); }
@media (max-width: 760px) { .kat-head.long { --kat-h1: 8vw; } .kat-head.has-kicker .kat-head-text, .kat-head.has-kicker .kat-head-pic { grid-row: auto; } }

/* страница поиска */
.g-search-h1 { font-size: clamp(2.6rem, 9vw, 9rem); line-height: 0.9; }
.g-search-form { margin-top: clamp(24px, 5vh, 50px); display: flex; gap: 10px; max-width: 900px; }
.g-search-form input { flex: 1 1 auto; min-width: 0; background: var(--tint); border: 0; border-radius: 0; font: inherit; font-size: clamp(1.1rem, 2vw, 1.8rem); color: var(--brown); padding: 18px 22px; }
.g-search-form input:focus { outline: 2px solid var(--accent); outline-offset: 0; background: var(--tint-strong); }
.g-search-form input::placeholder { color: var(--ink-soft); }
@media (max-width: 760px) {
  .g-search-h1 { font-size: clamp(2.4rem, 13vw, 3.6rem); }
  .g-search-form { flex-direction: column; }
  .g-search-form input { font-size: 1.1rem; padding: 16px 18px; }
  .g-search-form .req { justify-content: center; min-height: 52px; }
}

/* снимок на белом фоне: белое смешивается с бежевой подложкой, тень и тонировка фото снимаются — иначе виден белый прямоугольник */
img.g-flat, .g-flat-box img, .prow-pic:has(img.g-flat) img { mix-blend-mode: multiply; filter: none; box-shadow: none; }
/* шапка категории — изолированный слой (isolation), а смешиванию нужен непрозрачный фон под картинкой: даём ей цвет подложки */
.kat-head:has(.g-flat) { background: var(--paper); }
.kat-head-pic.g-flat { box-shadow: none; object-fit: contain; }
.g-flat-box, .prow-pic:has(img.g-flat) { background: none; }
.g-flat-box.lot-pic > img, .prow-pic:has(img.g-flat) > img { object-fit: contain; }

/* подпись под заголовком текстовой страницы: автор, дата, время чтения */
.g-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.62rem; color: var(--ink-soft); }
.g-head-prose > * + * { margin-top: 18px; }
/* фото над текстом — в колонке текста, без ограничения по высоте */
.prose .pic.g-cover { margin: 0 0 1.6em; max-height: none; width: 100%; }

/* витрина документов: подпись формата у карточки */
.g-card .lot-meta + .lot-meta { color: var(--ink-soft); }
.g-qr { width: 150px; height: 150px; justify-self: end; }
@media (max-width: 760px) { .g-qr { justify-self: start; } }

/* форма анонимного обращения на странице о противодействии коррупции: разметка приходит из кабинета, оформляем по элементам */
.report-form { margin-top: 1.6em; padding: clamp(20px, 3vw, 34px); background: var(--tint); }
.report-form p { margin: 0; }
.report-form p + p { margin-top: 16px; }
.report-form label { display: block; font-size: 0.92rem; color: var(--brown); }
.report-form input[type="text"], .report-form textarea { display: block; width: 100%; margin-top: 8px; background: var(--paper); border: 0; border-radius: 0; color: var(--ink); font: inherit; font-size: 16px; padding: 13px 14px; }
.report-form textarea { min-height: 180px; resize: vertical; }
.report-form input:focus, .report-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.report-form em { font-size: 0.82rem; color: var(--ink-soft); }
.report-form input[type="submit"] { display: inline-flex; align-items: center; min-height: 44px; background: var(--flame); color: #fff; border: 0; border-radius: 0; padding: 13px 18px; font: inherit; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.report-form input[type="submit"]:hover { background: var(--flame-hover); }
.report-done { margin-top: 1.6em; padding: clamp(20px, 3vw, 34px); background: var(--tint); }
.report-done h3 { margin-top: 0; }
.report-error { padding: 14px 18px; background: rgba(217, 97, 26, 0.12); color: #b3431d; }

/* выдача поиска: записи одна под другой, листалка общая */
.g-results { display: flex; flex-direction: column; max-width: 900px; }
.g-result { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2.6vh, 26px) 0; border-top: 1px solid var(--line); transition: padding-left .3s var(--ease-out); }
.g-result:last-child { border-bottom: 1px solid var(--line); }
.g-result:hover { padding-left: 8px; }
.g-result:hover .lot-name { color: var(--accent); }
.g-result .lot-text { max-width: 70ch; }
.pager .nums { display: inline-flex; flex-wrap: wrap; gap: 6px; min-width: 0; height: auto; padding: 0; background: none; }
.pager .step { padding: 0 14px; text-transform: uppercase; letter-spacing: 0.1em; }
.pager .gap { background: none; color: var(--ink-soft); }
.g-btns { display: flex; flex-wrap: wrap; gap: 10px; }