/* ══════════════════════════════════════════════════════════════════════════
   content.css — контентные страницы: лента новостей, страница новости,
   контакты.

   Подключается ШЕСТОЙ, после пяти общих таблиц стилей. Всё, что уже есть в
   общем словаре (карточка новости, фото-слот, строка «название — значение»,
   слот карты, сетка новостей, ритм секций), переиспользуется, а не
   объявляется заново. Здесь живёт только то, чего в каркасе нет:

     • хлебные крошки и пагинация — их нет в утверждённом варианте вовсе;
     • текстовая колонка статьи с мерой ~70ch;
     • пары «название — значение» без иконки (руководство и отделы);
     • пустое состояние ленты.

   Ни одного литерала цвета, размера, отступа и радиуса — только токены
   из tokens.css. Исполняется tools/audit-tokens.py.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ ХЛЕБНЫЕ КРОШКИ ═══════════════════════════════════════════════════════
   В утверждённом варианте одностраничного превью крошек нет — компонент
   собран из общего словаря: приглушённый текст, акцент только на ссылке. */

.breadcrumbs{
  padding:var(--space-5) 0 0;
  font-size:var(--text-label);
  color:var(--color-text-muted);
}
.breadcrumbs ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2);
}
.breadcrumbs li{ display:flex; align-items:center; gap:var(--space-2); }
/* Разделитель рисуется стилями, а не лежит в разметке: скринридер не должен
   зачитывать «косая черта» между пунктами. */
.breadcrumbs li + li::before{
  content:"/";
  color:var(--color-text-muted);
}
.breadcrumbs a{ text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }
.breadcrumbs [aria-current]{ color:var(--color-text); }


/* ══ ЛЕНТА НОВОСТЕЙ ═══════════════════════════════════════════════════════
   Сетка берётся из layout.css: .grid-news — одна колонка на mobile, две от
   768px, три с модификатором .grid-news--3. Число колонок объявлено явно, а
   не автоподбором, поэтому при одной или двух записях пустых ячеек не
   возникает — единственная карточка не растягивается на всю ширину.

   Правило для Twig Фазы 5: у записи без фотографии медиа-блок НЕ
   рендерится вовсе. Ни пустой рамки, ни плейсхолдера «нет фото» здесь не
   появляется — карточка просто становится текстовой. Тот же путь
   отрабатывает и недоступное изображение. */

.news-feed{ margin-top:var(--space-6); }

/* Медиа-блок карточки. Пропорция фиксирована, чтобы карточки в ряду не
   разъезжались по высоте; реальное фото Фазы 5 кадрируется с заполнением,
   а не сжимается — иначе горизонтальный снимок в вертикальном слоте даёт
   поля по бокам. */
.card-news__media{
  aspect-ratio:16/10;
  overflow:hidden;
}
.card-news__media img,
.card-news__media .photo-slot{
  width:100%;
  height:100%;
}
.card-news__media img{ object-fit:cover; }

/* Заголовок карточки в ленте — <h2>, а не <h3>: на этой странице над ним
   стоит только <h1> «Новости завода», и пропуск уровня заголовка был бы
   ошибкой валидатора. На главной та же карточка идёт третьим уровнем, потому
   что там над ней есть <h2> «Новости завода» — поэтому размер и начертание
   объявлены здесь классом, а не тегом.

   Кламп в две строки: пара свойств повторена намеренно, правило ленты обязано
   быть самодостаточным, если в шаблоне Фазы 5 утилиту .clamp-2 с заголовка
   снимут. min-height резервирует место под две строки, поэтому браузер без
   поддержки клампа покажет третью строку некрасиво, но высоту ряда не
   сломает. */
.news-feed .card-news__title{
  font-size:var(--text-lead);
  font-weight:var(--weight-bold);
  line-height:1.4;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  min-height:2.8em;
}

/* Карточка без фотографии. Отдельных правил не требует — медиа-блока в
   разметке просто нет, и текстовая часть занимает карточку целиком.
   Класс объявлен, чтобы шаблон Фазы 5 мог на него опереться. */
.card-news--text .card-news__body{ padding-top:var(--space-6); }


/* ══ ПУСТОЕ СОСТОЯНИЕ ЛЕНТЫ ═══════════════════════════════════════════════
   Формулировка задана контрактом копирайтинга. Ссылка следующего шага
   добавлена по рекомендации чекера дизайн-контракта: пустое состояние без
   следующего шага оставляет посетителя в тупике. Пагинация здесь не
   выводится — нечего листать. */

.state-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-4);
  margin-top:var(--space-6);
  padding:var(--space-8) var(--space-5);
  border:1px solid var(--color-hairline);
  border-radius:var(--radius-card);
  background:var(--color-surface-alt);
  text-align:center;
}
.state-empty__ic{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--icon-tile);
  height:var(--icon-tile);
  border-radius:var(--radius-pill);
  background:var(--color-surface);
  color:var(--color-surface-brand);
  box-shadow:var(--shadow);
}
.state-empty p{ font-size:var(--text-lead); color:var(--color-text-muted); }
.state-empty__next{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  min-height:var(--tap-min);
  font-weight:var(--weight-semibold);
  text-decoration:none;
}
.state-empty__next:hover{ text-decoration:underline; }


/* ══ ПАГИНАЦИЯ ════════════════════════════════════════════════════════════
   Аналога в утверждённом варианте нет. Минимальный набор правил объявлен
   здесь, чтобы контентные страницы не зависели от таблицы стилей каталога:
   они её не подключают.

   ИМЯ БЛОКА — .pager, А НЕ .pagination. Отгруженный общий шаблон
   templates/partials/pager.html.twig печатает class="pager" и
   class="pager__gap" — и с прежним именем лента новостей вышла бы голым
   списком ссылок. Прецедент сведения двух имён к одному — крошки,
   приведённые к .breadcrumbs решением 03-03.

   Второе объявление того же имени живёт в catalog.css, и конфликта между
   ними нет: каталожные страницы подключают catalog.css, контентные —
   content.css, и НИ ОДНА страница не подключает обе. Зато значения в двух
   объявлениях обязаны совпадать: одна и та же пагинация не может выглядеть
   по-разному в каталоге и в ленте новостей, если её печатает ОДИН шаблон.
   Поэтому блок выровнен по каталожному значение в значение (05-02).

   Селекторы берут И ссылку, И span: шаблон печатает текущую страницу
   и многоточие не ссылками, а <span> — листать на себя самого некуда.
   Текущая страница помечена атрибутом состояния aria-current, а не одним
   лишь цветом: подложка и начертание 700 идут вместе с ним, а не вместо. */

.pager{ margin-top:var(--space-6); }
.pager ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-2);
}
.pager a,
.pager span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:var(--tap-min);
  min-height:var(--tap-min);
  padding:0 var(--space-3);
  border:1px solid var(--color-hairline);
  border-radius:var(--radius-sm);
  text-decoration:none;
}
.pager a:hover{ background:var(--color-accent-surface); }
.pager [aria-current]{
  background:var(--color-surface-brand);
  border-color:transparent;
  color:var(--color-text-on-brand);
  font-weight:var(--weight-bold);
}
.pager__gap{ border-color:transparent; color:var(--color-text-muted); }


/* ══ СТРАНИЦА НОВОСТИ ═════════════════════════════════════════════════════
   Текстовая колонка ограничена мерой ~70ch утилитой .prose из base.css:
   длинная строка читается плохо независимо от ширины экрана. Заголовок
   переносится на любое число строк — клампа здесь нет и быть не должно. */

.article{ margin-top:var(--space-5); }
.article__head{ margin-bottom:var(--space-6); }
.article__date{
  margin-top:var(--space-3);
  font-size:var(--text-label);
  color:var(--color-text-muted);
}

/* Ведущее фото — тот же слот, что и в карточке ленты. Правило для Фазы 5:
   недоступное изображение скрывается вместе со своей рамкой, остаётся
   альтернативный текст — пустой рамки не возникает.

   ПОТОЛОК ШИРИНЫ РАВЕН МЕРЕ ЧТЕНИЯ, И ЭТО ОДНА МЕРА НА ОБЕ СТРАНИЦЫ.
   Страница новости собрана <article class="article prose">, то есть её
   ведущий кадр УЖЕ стоял ровно в 70ch — так его нарисовал утверждённый
   макет design/news-item.html, и здесь для новостей не меняется ничего.
   Страница услуги собрана <article class="article"> БЕЗ prose, и снимок
   занимал всю колонку контейнера (1152 px: 1200 минус два поля по 24) при тексте под ним в ≈707 px:
   фотография была в полтора раза шире абзаца, который иллюстрирует, и
   вдобавок растягивалась выше собственного разрешения — у всех семи
   ведущих кадров услуг ровно 600 px по ширине.

   ЧИСЛО 70ch НЕ ПОВТОРЕНО НАУГАД: это мера .prose из base.css. Прогон
   ArticleLeadPhotoTest сравнивает ДВА значения между собой, а не с
   литералом, — разъедутся, и он покраснеет. */
.article__lead{
  margin-bottom:var(--space-6);
  max-width:70ch;
  overflow:hidden;
  border-radius:var(--radius-card);
}
.article__lead .photo-slot,
.article__lead img{
  aspect-ratio:16/10;
  width:100%;
}
.article__lead img{ object-fit:cover; }

/* Основной текст: размер тела, межстрочный интервал 1.5 (UI-SPEC §Type). */
.article__body{ line-height:1.5; }
.article__body p + p{ margin-top:var(--space-4); }
.article__body h2{ margin-top:var(--space-7); margin-bottom:var(--space-4); }
.article__body ul{
  margin-top:var(--space-4);
  padding-left:var(--space-5);
  list-style:disc;
}
.article__body li + li{ margin-top:var(--space-2); }
/* Изображение внутри текста не выходит за ширину колонки. */
/* Кадр галереи держит ТУ ЖЕ меру, что и ведущий: ограничь только первый —
   и второй кадр услуги оказался бы ШИРЕ него. Галерей у услуг сегодня нет
   ни одной (форма админки принимает одно фото), поэтому глазами такую
   ловушку не поймать: она сработала бы при первом переносе содержимого. */
.article__figure{
  margin-top:var(--space-5);
  margin-bottom:var(--space-5);
  max-width:70ch;
}
.article__figure .photo-slot,
.article__figure img{
  width:100%;
  border-radius:var(--radius-sm);
}
.article__figure img{ object-fit:cover; }
.article__figure figcaption{
  margin-top:var(--space-2);
  font-size:var(--text-label);
  color:var(--color-text-muted);
}


/* ══ КОНТАКТЫ ═════════════════════════════════════════════════════════════
   Пары «название — значение» размечены списком определений и раскладываются
   сеткой. Перестраиваемая таблица здесь запрещена: смена типа отображения у
   табличных элементов вычищает табличные роли из дерева доступности, и
   восстанавливать их пришлось бы вручную на каждой ячейке. Список
   определений меняет раскладку ОДНОЙ строкой сетки и семантику не теряет.

   Отсутствующее поле опускается вместе со своей парой — пустых ячеек не
   возникает, потому что ячейку создаёт наличие пары, а не разметка таблицы. */

.contact-lead{
  max-width:70ch;
  margin-top:var(--space-4);
  color:var(--color-text-muted);
}
.contact-card{ margin-top:var(--space-6); }

/* Пара без иконки — руководство и отделы. Композиция та же, что у .crow из
   components.css, но без иконочной плитки: справочная строка не нуждается в
   картинке у каждого поля. */
.pairs > div{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  padding:var(--space-1) 0;
}
/* ОДНА СЕТКА НА ВЕСЬ СПИСОК ПАР — тот же довод, что у .specs в product.css.
   Пока сеткой была каждая пара, `max-content` считался для неё отдельно, и
   значения не выстраивались в столбец: на странице контактов разброс 19
   пикселей, у дилеров — до 63, на вакансии два блока начинались с 242 и 310.
   Пара отдаёт свой бокс, обе её ячейки становятся потомками сетки списка, и
   колонка подписей у всех пар общая. Обёртка <div> роли не несёт — терять
   её боксу нечего. Отступ пары переезжает на ячейки. */
@media (min-width:576px){
  .pairs{
    display:grid;
    grid-template-columns:max-content 1fr;
    column-gap:var(--space-4);
    align-items:baseline;
  }
  .pairs > div{
    display:contents;
  }
  .pairs > div > dt,
  .pairs > div > dd{
    padding:var(--space-1) 0;
  }
}
.pairs dt{
  font-size:var(--text-label);
  font-weight:var(--weight-regular);
  color:var(--color-text-muted);
}
/* Длинное значение переносится внутри своей ячейки, а адрес электронной
   почты — по символам: иначе одна длинная строка расширяет колонку и ломает
   сетку на узких экранах. */
.pairs dd{ overflow-wrap:anywhere; word-break:break-word; }
.pairs dd a{
  color:var(--color-text);
  font-weight:var(--weight-semibold);
  text-decoration:none;
}
.pairs dd a:hover{ color:var(--color-accent); }

/* Руководство: блоки складываются в одну колонку на mobile. */
.people{
  display:grid;
  gap:var(--space-5);
  grid-template-columns:1fr;
  margin-top:var(--space-6);
}
@media (min-width:768px){ .people{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .people{ grid-template-columns:repeat(3,1fr); } }

/* Список-стек: вертикальная колонка одинаковых карточек при любом числе
   записей. Отдельного варианта «одна запись» не существует: один и много
   дают одну и ту же раскладку.

   ИМЯ ОБЩЕЕ, А НЕ ПРИВЯЗАННОЕ К ОТДЕЛАМ: тот же стек несут справочник
   отделов, перечень вакансий и перечень дилеров. Три одинаковых блока под
   тремя именами разошлись бы при первой же правке отступа; прецедент
   сведения к одному имени — крошки, приведённые к .breadcrumbs (03-03). */
.stack-list{
  display:grid;
  gap:var(--space-4);
  grid-template-columns:1fr;
  margin-top:var(--space-6);
}

.info-card{
  padding:var(--space-5);
  border:1px solid var(--color-hairline);
  border-radius:var(--radius-card);
  background:var(--color-surface);
}
.info-card__name{
  margin-bottom:var(--space-3);
  font-size:var(--text-lead);
  font-weight:var(--weight-bold);
  line-height:1.3;
}
.info-card__role{
  margin-bottom:var(--space-3);
  color:var(--color-text-muted);
}

/* Слот карты на отдельной странице контактов — тот же CSS-слот, что в
   утверждённом варианте. Внешнего виджета нет вовсе: ни стороннего скрипта,
   ни канала трекинга, ни состояния ошибки, которое нужно было бы
   проектировать. В Фазе 5 слот заменяется статичной картинкой. */
.map-slot__note{
  max-width:40ch;
  padding:0 var(--space-5);
  text-align:center;
}
/* Схему проезда нельзя кадрировать по краям: обрезанным окажется ровно то,
   зачем на неё смотрят, — поворот, номер дома, подпись улицы. Поэтому
   contain, а не cover: картинка вписывается целиком, высота идёт за
   пропорцией, и слот подстраивается под неё, а не наоборот. */
.map-slot img{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:var(--radius-card);
}


/* ══ СПИСОК ДОКУМЕНТОВ ════════════════════════════════════════════════════
   Строка списка — целая ссылка размером с палец: --tap-min берёт высоту,
   рамка отличает её не одним лишь цветом. Доступное имя ссылки собирается
   внутри неё целиком — название И тип И размер, — поэтому списка из
   тринадцати одинаковых «Скачать» здесь не бывает.

   СЕТКА, А НЕ ФЛЕКС, и это не вкус. Название документа обязано переноситься
   ЦЕЛИКОМ, а тип с размером — вставать отдельной строкой под ним. Прижать
   метку к правому краю той же строки (margin-left:auto, white-space:nowrap)
   значило бы обрезать длинное название многоточием, а именно хвостом даты
   один сертификат отличается от другого: «Сертификат соответствия СМК до
   14 марта 2027 года». Обрезание здесь стирает единственный различающий
   признак. Первая колонка держит иконку, вторая — текст.

   Список из одной записи выглядит так же, как из тринадцати: это сетка с
   зазором, и единственная строка не растягивается на высоту контейнера. */

.doc-list{
  display:grid;
  gap:var(--space-2);
}
.doc-list a{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  column-gap:var(--space-3);
  row-gap:var(--space-1);
  min-height:var(--tap-min);
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-hairline);
  border-radius:var(--radius-sm);
  text-decoration:none;
}
.doc-list a:hover{ background:var(--color-accent-surface); }
/* Тип и размер — вторая строка второй колонки: под названием, а не справа
   от него. Явный grid-column:2 нужен потому, что иконка занимает первую
   колонку только в первом ряду, и без него метка уехала бы под иконку. */
.doc-list__meta{
  grid-column:2;
  font-size:var(--text-label);
  color:var(--color-text-muted);
}


/* ══ СТРАНИЦА РЕМОНТА: МАРКИ И НАВИГАЦИЯ ПО НИМ ═══════════════════════════
   Шапка сайта липкая, и переход по внутренней ссылке-якорю уводит заголовок
   марки ПОД неё: браузер прокручивает к верхней границе цели, ничего не
   зная о полосе поверх страницы. Отступ прокрутки возвращает заголовок под
   шапку, а не за неё; высота берётся тем же токеном, которым нарисована
   сама шапка, — иначе два числа разошлись бы при первой правке шапки. */
.repair-brand{ scroll-margin-top:calc(var(--header-height) + var(--space-4)); }

/* Ряд ссылок-якорей формой НАМЕРЕННО повторяет пагинацию: это тот же жанр
   «ряд одинаковых целей», и два разных облика у одного жанра читались бы
   как два разных элемента управления. Отличие ровно одно и оно смысловое —
   скруглением-пилюлей: якорь ведёт внутрь этой же страницы, а не на
   следующую. Высота — --tap-min: по ним попадают пальцем. */
.anchor-nav{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-top:var(--space-4);
}
.anchor-nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:var(--tap-min);
  padding:0 var(--space-4);
  border:1px solid var(--color-hairline);
  border-radius:var(--radius-pill);
  text-decoration:none;
}
.anchor-nav a:hover{ background:var(--color-accent-surface); }