/**
 * Страница объявления /podryad/{slug}/ — брендовый визуальный язык.
 *
 * Потребляет токены из podryad-tokens.css. Всё scoped под
 * .pc-contact-panel и .podryad-listing-single — старая палитра --pc-*
 * и стили /lk/ не затрагиваются (design §9).
 */

/* ----- Типографика страницы -----
   Грабля темы (та же, что описана ниже у .podryad-listing__content p):
   main.css темы задаёт `*, p, li.div { font-family: "Manrope" }` — правило
   бьёт в КАЖДЫЙ элемент напрямую, поэтому `--font-body` на контейнере
   проигрывает наследованием, и Onest не рисовался нигде (шрифт грузился и
   не участвовал в отрисовке). Форсируем семейство селектором со
   специфичностью выше `*`; заголовки, кнопка и титул CTA перебивают это
   своим `--font-heading` — у них специфичность выше (0,2,0 / 0,1,1). */
.podryad-listing-single,
.podryad-listing-single * {
    font-family: var(--font-body);
}

/* ----- Панель контактов ----- */
.pc-contact-panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-card);
    padding: 20px;
    /* Панель шириной ровно под свою кнопку (решение владельца 2026-08-20):
       456 = 414 + 2 × 20 паддинга + 2 × 1 рамки, box-sizing border-box.
       414 — ширина главной кнопки экрана входа (`.pc-auth-card` 480 минус
       паддинги 32+32, замерено), то есть установившийся в продукте размер
       главного действия.

       ⚠️ Число живёт ЗДЕСЬ и только здесь. У кнопки ниже стоит `width: 100%`
       без собственного потолка — иначе пришлось бы держать два числа, обязанных
       совпадать, и они бы разошлись. Панель — единственный источник ширины.

       ⚠️ До 2026-08-20 панель шла во всю полосу раздела, и с переходом на 1348
       её кнопка растянулась до 1306px при надписи «Открыть контакты» шириной
       около 150 — карточка читалась баннером. Решение 2026-08-12 «три кнопки из
       четырёх суть главное действие экрана, поэтому во всю ширину» этим не
       отменено: кнопка по-прежнему занимает всю ширину панели, просто панель
       перестала занимать всю полосу.

       Медиа-запроса нет намеренно: на телефоне полосы меньше 456, потолок не
       срабатывает, и мобайл (97% трафика) остаётся нетронутым по построению. */
    max-width: 456px;
    font-family: var(--font-body);
    color: var(--c-text);
}

/* Легаси-оформление .pc-contact-block из listing.css (голубая заливка,
   рамка, радиус 15px, внешние отступы) внутри панели даёт «ящик в ящике» —
   зануляем, панель сама является карточкой. Тот же приём применён ниже к
   .pc-inactive-cta. Класс НЕ переименовываем: на него завязан
   RevealFeature.applyReveal (form.closest) как legacy-фолбэк подмены. */
.pc-contact-panel .pc-contact-block {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

/* Состояние «контакты открыты»: заливка и фиксированная ширина 440px были
   нужны, пока блок сам изображал карточку. Внутри панели зелёный фон стал бы
   вторым зелёным слоем под уже зелёной рамкой панели (правило
   [data-state='opened'] ниже), а ширину задаёт панель. */
.pc-contact-panel .pc-contact-block--revealed {
    width: auto;
}

.pc-contact-panel .pc-contact-block__row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-divider);
}

.pc-contact-panel .pc-contact-block__row:last-child {
    border-bottom: 0;
}

.pc-contact-panel .pc-contact-block__label {
    color: var(--c-text-soft);
    font-size: 0.9375rem;
}

.pc-contact-panel .pc-contact-block__value {
    color: var(--c-ink-strong);
    font-weight: 600;
}

/* Маска телефона/email обязана остаться моноширинной — так было в
   listing.css (.pc-contact-block__masked, специфичность 0,1,0). Бланкетное
   правило Onest выше по файлу (.podryad-listing-single *, тоже 0,1,0)
   перебивает его порядком подключения (podryad-single.css грузится после
   listing.css). Здесь специфичность выше (0,2,0), поэтому побеждает
   независимо от порядка — дублируем то же семейство, что и в listing.css,
   а не придумываем своё. */
.pc-contact-panel .pc-contact-block__masked {
    font-family: 'Courier New', Courier, monospace;
    color: var(--c-text-faint);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Длинный адрес БЕЗ дефисов (например,
   aleksandrkonstantinovich@stroybazanizhnynovgorod.ru) на 375px без этого
   правила вылезает за правый край панели (замер: ~179px за кромку; с
   правилом — вписывается, ~38px запаса). Горизонтальной прокрутки страницы
   при этом не возникает ни с правилом, ни без него — предок `section`
   получает `overflow: hidden` из общего правила темы (main.css), хвост
   адреса просто обрезается и теряется, а не скроллится. Пример из более
   ранней формулировки этой находки, aleksandr.petrov@stroybaza-nn.ru, тут
   не годится: дефис — законная точка переноса, браузер переносит строку
   сам, ширина идентична и с правилом, и без него. Прецедент — cabinet.css
   (.pc-support-msg__body): именно `anywhere`, а не `break-word` — только
   `anywhere` уменьшает min-content ширину, а строка контакта — flex-
   элемент. */
.pc-contact-panel a {
    overflow-wrap: anywhere;
}

/* ----- Кнопка ----- */
.pc-contact-panel .pc-btn--primary {
    display: block;
    /* Во всю ширину панели — решение 2026-08-12: три кнопки панели из четырёх
       суть главное действие экрана. Собственного потолка у кнопки НЕТ
       намеренно: ширину задаёт панель (`max-width: 456px` выше), и второе
       число здесь было бы обязано с ним совпадать, а значит однажды разошлось
       бы. Исключение для кнопки мёртвой карточки — ниже по файлу
       (`.pc-inactive-cta__action`, ширина по содержимому). */
    width: 100%;
    margin-top: 14px;
    padding: 16px 20px;
    background: var(--c-primary);
    border-color: var(--c-primary);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-btn);
    /* Семейство и вес — как у .btn--primary ленты (globals.css:80-100):
       Onest 600, а не Manrope 700. Кнопка по обе стороны стыка
       «лента → карточка» должна читаться одинаково. */
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
}

.pc-contact-panel .pc-btn--primary:hover:not(:disabled) {
    /* Лента осветляет фильтром, а не подменяет цвет (globals.css:92-94) —
       повторяем, чтобы hover совпадал. Фон и рамку переобъявляем явно:
       без них сработало бы правило .pc-btn--primary:hover из
       podryad-common.css (--c-navy-raise), и фильтр лёг бы на другой цвет. */
    background: var(--c-primary);
    border-color: var(--c-primary);
    filter: brightness(1.08);
}

/* ----- Подсказки состояния ----- */
.pc-contact-panel__hint {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--c-surface-muted);
    color: var(--c-text-muted);
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* Бесплатное открытие — зелёный акцент светофора. */
.pc-contact-panel[data-state='ready_limited'] .pc-contact-panel__hint,
.pc-contact-panel[data-state='ready_free_quota'] .pc-contact-panel__hint {
    background: var(--c-badge-green-bg);
    color: var(--c-badge-green-fg);
}

/* По подписке — фирменный «свежий» акцент, не тревожный. */
.pc-contact-panel[data-state='ready_subscription'] .pc-contact-panel__hint {
    background: var(--c-badge-fresh-bg);
    color: var(--c-badge-fresh-fg);
}

/* Платная свежая заявка — янтарный: внимание, но не ошибка. */
.pc-contact-panel[data-state='locked_paywall'] .pc-contact-panel__hint {
    background: var(--c-badge-orange-bg);
    color: var(--c-badge-orange-fg);
    font-weight: 600;
}

/* Обещание подарка гостю — тон полоски ленты «Первые 3 контакта — бесплатно»
   (--c-badge-fresh-*), а не зелёный. Зелёный остаётся сигналом «контакт можно
   открыть прямо сейчас» (ready_limited / ready_free_quota выше): раньше оба
   сообщения были зелёными, и обещание будущего подарка не отличалось от
   готовности к действию. */
.pc-contact-panel__hint--gift {
    background: var(--c-badge-fresh-bg);
    color: var(--c-badge-fresh-fg);
    font-weight: 600;
}

.pc-contact-panel__countdown {
    margin: 10px 0 0;
    color: var(--c-text-soft);
    font-size: 0.875rem;
    text-align: center;
}

.pc-contact-panel__secondary {
    display: block;
    margin-top: 10px;
    color: var(--c-link);
    font-size: 0.9375rem;
    text-align: center;
}

.pc-contact-panel__secondary:hover {
    color: var(--c-link-hover);
}

/* ----- Открытые контакты ----- */
.pc-contact-panel[data-state='opened'],
.pc-contact-panel[data-state='opened_dead'] {
    border-color: var(--c-badge-green-fg);
}

.pc-contact-panel .pc-contact-block--revealed .pc-link {
    color: var(--c-link);
    font-weight: 700;
    font-size: 1.0625rem;
}

/* Плашка «объявление уже не актуально» над открытыми контактами (OPENED_DEAD).
   Скоуп `.pc-contact-panel` добавлен 2026-08-17: три правила были объявлены
   голым классом, в отличие от всех соседей по файлу. Сегодня они выигрывали —
   темовские селекторы, которые до узла достают (`*`, `*, p, li.div`,
   перечисление с `div`), все element-уровня и одноклассовому правилу проигрывают
   (проверено замером до правки: фон, цвет, паддинги и радиус совпадали с токенами).
   Но (0,1,0) — самая слабая классовая специфичность, а CSS плагина печатается ДО
   темы, значит ничья достаётся теме. В этом проекте на таком уже обжигались:
   `a[href^="tel"]{color:inherit}` (0,1,1) перебивал одноклассовое правило. У этого
   узла есть `role="status"` — темовское `div[role="status"]` (0,1,1) забрало бы
   плашку молча. Скоуп поднимает до (0,2,0) и заодно выравнивает файл: элемент
   рендерится ТОЛЬКО внутри панели (единственная точка вызова —
   ContactBlockRenderer::renderContactBlock, ветка OPENED_DEAD).

   Блок намеренно оставлен в секции «Открытые контакты», а не в «Мёртвом
   объявлении» ниже: та секция про `.pc-inactive-cta` состояний DEAD/GUEST_DEAD,
   а эта плашка живёт над РЕАЛЬНЫМИ контактами у того, кто их уже открыл. */
.pc-contact-panel .pc-contact-dead-notice {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--c-badge-dead-bg);
    color: var(--c-badge-dead-fg);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.pc-contact-panel .pc-contact-dead-notice strong {
    color: var(--c-ink-strong);
}

.pc-contact-panel .pc-contact-dead-notice__reason {
    display: block;
    margin-top: 2px;
    /* Цвет явно: <span> красится прямым правилом темы по `*`, а не
       наследует его от .pc-contact-dead-notice. */
    color: var(--c-badge-dead-fg);
    font-size: 0.875rem;
}

/* ----- Мёртвое объявление ----- */
/* Легаси-оформление .pc-inactive-cta из listing.css (голубая коробка с
   собственным отступом и скруглением) внутри панели даёт «ящик в ящике» —
   зануляем всё, панель сама является карточкой. */
.pc-contact-panel .pc-inactive-cta {
    margin: 0;
    padding: 8px 0;
    background: none;
    border-radius: 0;
    text-align: center;
}

/* Цвет задаётся и на обёртке, и на самой <svg>: тема красит `*` напрямую,
   поэтому currentColor иконки без явного правила берётся не из родителя. */
.pc-contact-panel .pc-inactive-cta__icon,
.pc-contact-panel .pc-inactive-cta__icon svg {
    color: var(--c-text-faint);
}

.pc-contact-panel .pc-inactive-cta__icon svg {
    width: 40px;
    height: 40px;
}

.pc-contact-panel .pc-inactive-cta__title {
    margin: 10px 0 4px;
    color: var(--c-ink);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
}

.pc-contact-panel .pc-inactive-cta__reason,
.pc-contact-panel .pc-inactive-cta__extra {
    margin: 0;
    color: var(--c-text-muted);
    font-size: 0.9375rem;
}

.pc-contact-panel .pc-inactive-cta__extra {
    margin-top: 6px;
    color: var(--c-text-soft);
}

/* Кнопка мёртвой карточки НЕ растягивается на всю панель, в отличие от
   остальных кнопок панели.
   Причина растяжки: `.pc-contact-panel .pc-btn--primary` выше (строка ~108)
   даёт `display:block; width:100%` — и это верно для трёх кнопок из четырёх
   («Открыть контакты», «Получить контакты бесплатно», «Привязать
   мессенджер»): все три — главное действие экрана. Четвёртая,
   «Посмотреть другие объявления», — вспомогательная навигация с мёртвой
   карточки, и на полосе 1080 она растягивалась на 1040px, читаясь как
   главный призыв там, где призывать уже не к чему. Собственное
   `display:inline-block` из listing.css (0,1,0) проигрывало панельному
   правилу (0,2,0), поэтому исключение задаём с той же силой (0,2,0) и
   НИЖЕ по тексту файла — при равной специфичности выигрывает последнее.
   Ширину по содержимому центрирует `text-align:center` секции выше. */
.pc-contact-panel .pc-inactive-cta__action {
    display: inline-block;
    width: auto;
}

/* ----- Памятка «что сообщить заказчику» ----- */
.pc-contact-panel + .pc-contact-disclaimer,
.pc-contact-panel .pc-contact-disclaimer {
    margin-top: 14px;
    border-radius: var(--r-md);
}

/* Фиксированные 440px памятки в listing.css были подобраны «одной ширины с
   .pc-contact-block--revealed», а тот внутри панели больше ширину не задаёт
   (см. выше) — оставшись одна, эта ширина превращала памятку в обрубок на
   правом краю панели. Внутри панели ширину задаёт панель. */
.pc-contact-panel .pc-contact-disclaimer {
    width: auto;
}

/* ==========================================================================
   Страница объявления — каркас
   ========================================================================== */

/* Фон страницы. Лента идёт на --c-bg (светло-голубой), карточка была белой —
   на стыке «клик в ленте → страница объявления» фон менялся. Красим ТОЛЬКО
   страницу объявления (body.single-podryad, класс ставит ядро WP): /lk/
   получит фон вместе со своей композицией в заходе 6, а общий сброс
   body.podryad-section (Phase 10.1) не трогаем. Панель контактов остаётся
   белой — как карточки в ленте на том же фоне. */
body.single-podryad {
    background: var(--c-bg);
}

/* Ширину задаёт полоса раздела (обёртка .container, podryad-common.css), а не
   сама статья. Прежние 720px были колонкой для чтения — сняты решением
   владельца 2026-08-12 в пользу единой полосы 1080 на весь раздел.

   ⚠️ 2026-08-19, полоса 1348: решение ПОДТВЕРЖДЕНО владельцем повторно —
   страница остаётся во всю полосу, потолок не возвращаем. Возражение было
   заявлено и снято: на 1348 строка описания доходит до ~190 знаков при
   типографской норме 50–75. Это НЕ недосмотр — не «чинить». Тем же решением
   во всю полосу пущен и FAQ, так что узких страниц в разделе не осталось
   вовсе. Если когда-нибудь переиграют, точка правки одна: max-width ниже,
   приём — переопределение .container изнутри блока, как в
   podryad-web/components/kak-eto-rabotaet/StartSection.module.css. */
.podryad-listing-single {
    max-width: 100%;
    margin: 0 auto;
    padding: 8px 0 40px;
    font-family: var(--font-body);
    color: var(--c-text);
}

/* Шапка объявления. Раскладка (колонка, выравнивание влево) переехала из
   listing.css заходом 2026-08-11 — там она спорила с рамкой и отступами,
   заданными здесь. */
.podryad-listing-single .podryad-listing__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--c-divider);
}

.podryad-listing-single .podryad-listing__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.podryad-listing-single h1 {
    width: 100%;
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--c-ink);
}

.podryad-listing-single .podryad-listing__idline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--c-text-faint);
    font-size: 0.875rem;
}

.podryad-listing-single .pc-listing-id {
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--c-tag-bg);
    color: var(--c-tag-fg);
    font-weight: 600;
}

/* ----- Мета объекта: регион и срок -----
   В ленте это текстовая строка «Регион · N назад · Осталось 18 часов»
   (FeedCard.module.css .meta: 13px, --c-text-soft, разделители «·»), а не
   чипы с заливкой. Разметка здесь общая с карточкой архива (renderCardFacts),
   поэтому чипы гасятся стилями, а не правкой шаблона: заливка, паддинг и
   радиус снимаются, иконки прячутся. Заливка меты конкурировала за внимание
   с бейджем мест — а носитель срочности в этой системе именно бейдж. */
.podryad-listing-single .pc-listing-card__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px 8px;
    margin-bottom: 10px;
    color: var(--c-text-soft);
    font-size: 13px;
}

.podryad-listing-single .pc-listing-card__region,
.podryad-listing-single .pc-listing-card__expiry {
    padding: 0;
    background: none;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    font-weight: 400;
}

/* Иконки меты — в ленте их нет; на странице они дублируют то, что и так
   написано словами («Московская область», «Осталось 18 часов»). */
.podryad-listing-single .pc-listing-card__region svg,
.podryad-listing-single .pc-listing-card__expiry svg,
.podryad-listing-single .pc-listing-card__published svg {
    display: none;
}

/* Разделитель «·»: в ленте он отдельным узлом разметки, здесь узлов два,
   поэтому рисуем перед вторым. */
.podryad-listing-single .pc-listing-card__expiry::before {
    content: '·';
    margin-right: 8px;
    color: var(--c-text-soft);
}

/* Градация срочности сохраняется, но текстом, а не заливкой: заливка была бы
   второй цветовой системой рядом со светофором бейджей. В ленте срочность
   вовсе нейтральна (дизайн podryad-web §3.1); здесь страница решения, поэтому
   сигнал оставляем, но приглушённым. */
.podryad-listing-single .pc-listing-card__expiry--soon,
.podryad-listing-single .pc-listing-card__expiry--soon time {
    color: var(--c-badge-orange-fg);
}

.podryad-listing-single .pc-listing-card__expiry--critical,
.podryad-listing-single .pc-listing-card__expiry--critical time {
    color: var(--c-badge-red-fg);
}

/* Правило размера и цвета иконок в строке фактов удалено заходом 2026-08-11:
   единственные svg внутри .pc-listing-card__facts — иконки региона и срока,
   а они теперь скрыты (display:none выше, мета приведена к текстовой строке
   ленты). Держать под ними размер и цвет значило бы оставить мёртвый код,
   который на ревью читается как действующий. */

.podryad-listing-single .podryad-listing__content {
    margin-bottom: 50px;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--c-text);
}

/* Списки в теле объявления — переехали из listing.css заходом 2026-08-11.
   list-style задаётся явно: тема сбрасывает маркеры глобально. */
.podryad-listing-single .podryad-listing__content ul,
.podryad-listing-single .podryad-listing__content ol {
    padding-left: 1em;
    margin-bottom: 2em;
}

.podryad-listing-single .podryad-listing__content ul { list-style: disc; }
.podryad-listing-single .podryad-listing__content ol { list-style: decimal; }

.podryad-listing-single .podryad-listing__content p {
    margin: 0 0 14px;
    /* Грабля темы (не из брифа, найдена в браузере): main.css темы задаёт
       `*, p, li.div { font-size: …; color: #01103A; }` — правило матчится
       на <p> НАПРЯМУЮ (специфичность 0,0,1), а не через наследование, и
       поэтому побеждает унаследованные font-size/color с обёртки
       .podryad-listing__content, хотя специфичность обёртки выше — сравнение
       идёт только между правилами, бьющими в один и тот же элемент.
       Тот же паттерн уже описан в CLAUDE.md как «Грабля темы» (Заход 12.3,
       10.4.3): каскад темы красит текст/SVG напрямую, унаследованное
       значение приходится форсировать явно. */
    font-size: inherit;
    color: inherit;
}

.podryad-listing-single .podryad-listing__content h2,
.podryad-listing-single .podryad-listing__content h3 {
    margin: 22px 0 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--c-ink-strong);
}

.podryad-listing-single .podryad-listing__contacts {
    margin-top: 26px;
}

.podryad-listing-single .podryad-listing__contacts h2 {
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-ink);
}

@media (min-width: 720px) {
    .podryad-listing-single {
        padding-top: 16px;
    }

    .podryad-listing-single h1 {
        font-size: 1.875rem;
    }
}