/* ============================================================
   Портал адаптации · главная-пульт
   Зависит от tokens.css (все значения — оттуда), base.css (.card, .btn,
   .progress, .next-link) и layout.css (.sec, .auto-grid). Собственных
   цветов и кеглей здесь нет: только раскладка и состояния.

   Правила, которым подчинён весь файл:
     1. Ни одной фиксированной высоты — длинное юрлицо и длинный лид
        должны переноситься, а не вылезать за экран.
     2. --accent-fill только как декор (заливка полосы, волосок, сетка):
        к белому у него 2.87:1. Любой акцентный ТЕКСТ и любая заливка
        под белым текстом — только --accent-ink.
     3. Кегль нигде не ниже --fs-label (13px), тап-зона не меньше 48px.
     4. Ни одного внешнего адреса и ни одного inline-обработчика:
        иконка поиска — свой <svg>, декор hero — градиенты и границы.
   ============================================================ */

/* ==================== HERO ====================
   Тёмная плашка-обложка в духе исходного макета: чертёжная сетка,
   угловые метки, размерная линейка слева и призрак кода организации.
   Весь декор — aria-hidden, под pointer-events: none и вне потока,
   поэтому на высоту и на перенос текста он не влияет. */

/* Надпись-eyebrow оболочки на главной пуста (её роль играет hero).
   Прячем контейнер целиком, иначе между шапкой и hero остаётся
   пустая полоса в --sec-gap высотой. */
.page:has(> #hero) > .page__head,
.page:has(> #root-hero) > .page__head { display: none; }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 5.5vw, 64px) clamp(20px, 4.5vw, 56px);
  background: var(--bg-dark);
  color: var(--on-dark);
  border-radius: var(--r-lg);
  /* обводка фокуса на navy — белая; само правило фокуса по-прежнему одно */
  --focus: #FFFFFF;
}

/* ---- Фирменный графический язык ----
   Брендбук (с.14–16): наклонные полосы-параллелограммы под углом знака
   «///» — примерно 54° к горизонтали, пачками по три-четыре, с одним
   красным акцентом малой площади. Прежняя «чертёжная сетка» и угловые
   метки в брендбуке отсутствуют — это была выдумка автора макета.

   Полосы наследуют угол логотипа: skewX(-36deg) = наклон 54° от
   горизонтали, ровно как штрихи в знаке. */
.hero__bars {
  position: absolute;
  z-index: 0;
  top: -30%;
  right: -6%;
  width: 46%;
  height: 160%;
  pointer-events: none;
  transform: skewX(-36deg);
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, .07) 0 clamp(14px, 2.4vw, 30px),
    transparent clamp(14px, 2.4vw, 30px) clamp(34px, 5.4vw, 66px)
  );
  /* пачка, а не обои: к левому краю полосы гаснут */
  -webkit-mask-image: linear-gradient(to left, #000 18%, transparent 92%);
  mask-image: linear-gradient(to left, #000 18%, transparent 92%);
}

/* Красный акцент — одна короткая полоса того же наклона.
   Брендбук держит красный «малой площадью», поэтому она одна и тонкая. */
.hero__bars-accent {
  position: absolute;
  z-index: 0;
  top: clamp(18px, 4vw, 40px);
  right: clamp(26px, 6vw, 92px);
  width: clamp(8px, 1.2vw, 14px);
  height: clamp(54px, 9vw, 120px);
  pointer-events: none;
  transform: skewX(-36deg);
  background: var(--brand-red);
  opacity: .9;
}

@media (max-width: 560px) {
  /* На телефоне пачка уходит: она отнимает место у текста и мешает
     читать заголовок. Остаётся один акцент. */
  .hero__bars { width: 62%; right: -22%; opacity: .7; }
  .hero__bars-accent { height: 44px; width: 7px; top: 14px; right: 18px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Никакой анимации: декор статичен. Блок оставлен пустым намеренно,
     чтобы следующий дизайнер не искал, где спрятано движение. */
}

/* --- Содержимое hero --- */
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 16px;
  justify-items: start;
}

.hero__tag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  min-height: 40px;
  margin: 0;
}
.hero__logo {
  /* Полный знак «//НАЦПРОЕКТ СТРОЙ», пропорции 408:54.
     Высота 34px → ширина ~257px. Сжимать по одной оси брендбук запрещает,
     поэтому width: auto и никаких фиксированных рамок. */
  height: clamp(28px, 4.4vw, 38px);
  width: auto;
  flex-shrink: 0;
  /* Охранное поле: один модуль (высота знака) до соседнего текста. */
  margin-right: clamp(14px, 2vw, 22px);
}
/* Заглушка логотипа: аккуратный знак из короткого кода организации.
   Белый текст стоит на --accent-ink (7.24:1), не на --accent-fill. */
.hero__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent-on-dark);
  color: #fff;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .04em;
}
.hero__tag-text {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  overflow-wrap: anywhere;
}

.hero__title {
  margin: 0;
  max-width: 16ch;
  color: var(--on-dark);
  /* длинное юрлицо переносится внутри слова, а не выезжает за экран */
  overflow-wrap: anywhere;
}
.hero__title-em {
  /* Имя компании — как в макете заказчика: белым основным начертанием и с
     голубой чертой под словом. Голубой курсив не подошёл (замечание рабочей
     группы 25.09): курсива у Eurostile нет, браузер наклонял шрифт сам, и
     название компании выглядело инородно рядом с прямым заголовком.
     Отдельной строкой — иначе длинное слово рвётся посередине. */
  display: block;
  /* Чуть мельче заголовка: «Трансстроймеханизации» — 21 знак, в полный
     размер оно не помещалось в строку и разрывалось посередине, а черта
     под ним распадалась на две. */
  font-size: 0.82em;
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: var(--accent-on-dark);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.14em;
  overflow-wrap: anywhere;
}

/* На телефоне длинное название всё равно переносится — там черта только
   мешала бы, разрезая заголовок пополам. */
@media (max-width: 620px) {
  .hero__title-em { text-decoration: none; }
}

.hero__place {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 2px 0 0;
  max-width: 100%;
}
.hero__place-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  white-space: nowrap;
}
.hero__place-label::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent-fill);   /* декор, не текст */
}
.hero__place-name {
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 900;
  letter-spacing: -.018em;
  color: var(--on-dark);
  overflow-wrap: anywhere;
}
.hero__place-region {
  font-size: var(--fs-sm);
  color: var(--on-dark-3);
}
/* Подразделение (например, «Мостоотряд-15») — мелкой строкой под названием городка. */
.hero__place-unit {
  flex-basis: 100%;
  font-size: var(--fs-sm);
  color: var(--on-dark-3);
}

.hero__lede {
  margin: 0;
  max-width: 56ch;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--on-dark-2);
}

/* ==================== ПЛИТКИ ПРОГРЕССА ====================
   Плитка — это ссылка-карточка: подпись, крупный счёт, полоса заполнения
   и строка состояния. Полоса собрана по контракту base.css:
   .progress__bar — дорожка, .progress__fill — заливка. */
.progress-tile {
  gap: 12px;
  padding: 22px 22px 20px;
}
.progress-tile__caption {
  /* место справа занято кружком-стрелкой */
  padding-right: 44px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.progress-tile__count {
  /* Счётчик меняется на месте — табличные цифры держат ширину. */
  font-variant-numeric: tabular-nums;
  font-family: var(--display);
  font-size: clamp(30px, 6.4vw, 40px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.progress-tile__meter {
  width: 100%;
  margin-top: 2px;
}
.progress-tile__state {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-muted);
}

/* Нулевое состояние. До запуска progress.js атрибута data-done нет —
   видна общая подпись; скрипт проставляет data-done="0", и подпись
   меняется на понятное «Ещё не начинали». */
.progress-tile__zero { display: none; }
.progress-tile[data-done="0"] .progress-tile__zero { display: inline; }
.progress-tile[data-done="0"] .progress-tile__hint { display: none; }

.progress-tile__go {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 17px;
  line-height: 1;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
@media (hover: hover) {
  .progress-tile:hover .progress-tile__go {
    background: var(--accent-ink);
    color: #fff;
    transform: translateX(2px);
  }
}

/* ==================== ПОИСК ====================
   Поле во всю ширину колонки: тап-зона 56px, кегль 16px (мельче —
   и Safari на iOS зумит страницу при фокусе). */
.search {
  display: grid;
  gap: 10px;
  max-width: 640px;
}
.search__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
}
.search__field {
  position: relative;
  display: block;
}
.search__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--ink-muted);
  pointer-events: none;
}
.search__input {
  width: 100%;
  min-height: 56px;
  padding: 14px 20px 14px 50px;
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search__input::placeholder { color: var(--ink-muted); opacity: 1; }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__input:hover { border-color: var(--line-2); }
.search__input:focus {
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search__hint {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* Результаты рисует search.js. Пока запроса нет, контейнер пуст —
   и не должен выглядеть как пустая рамка. */
.search__results { display: grid; gap: 8px; }
.search__results:empty { display: none; }

.search__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.search__link {
  display: grid;
  gap: 4px;
  min-height: 48px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.search__title {
  font-family: var(--display);
  font-size: var(--fs-h4);
  font-weight: 900;
  line-height: 1.2;
  color: var(--accent-ink);
}
.search__where {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.search__snippet {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
.search__empty {
  margin: 0;
  padding: 14px 18px;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  background: var(--surface-alt);
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
}
@media (hover: hover) {
  .search__link:hover { border-color: var(--accent-fill); background: var(--surface-alt); }
}

/* ==================== КАРТОЧКИ РАЗДЕЛОВ ====================
   Кликабельна вся карточка: ссылка сама и есть карточка, никаких
   растянутых псевдоэлементов и никакого JS. */
.sec-cards { list-style: none; }

.sec-card {
  display: block;
  padding: 0;
  overflow: hidden;
}
.sec-card__link {
  display: grid;
  grid-template-columns: 1fr 44px;
  grid-template-areas:
    "num   arrow"
    "title arrow"
    "text  arrow";
  align-items: start;
  column-gap: 14px;
  row-gap: 6px;
  min-height: 104px;
  padding: 20px;
  /* Ссылка — единственный ребёнок карточки и должна занимать её целиком.
     Иначе в ряду карточек одинаковой высоты (их равняет сетка) ссылка с
     более коротким описанием короче соседей, и стрелка висит выше. */
  width: 100%;
  height: 100%;
}
.sec-card__num {
  grid-area: num;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent-ink);
}
.sec-card__title {
  grid-area: title;
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 900;
  letter-spacing: -.018em;
  line-height: 1.15;
  color: var(--ink);
  overflow-wrap: break-word;
}
.sec-card__text {
  grid-area: text;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-muted);
  /* две строки: карточки в ряду остаются одной высоты без min-height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sec-card__arrow {
  grid-area: arrow;
  align-self: center;
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 19px;
  line-height: 1;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
@media (hover: hover) {
  .sec-card:hover .sec-card__arrow {
    background: var(--accent-ink);
    color: #fff;
    transform: translateX(2px);
  }
}

/* Ссылка «всё одной страницей» — примитив .next-link из layout.css;
   здесь только внутренняя стопка подписи и заголовка. */
.next-link__body { display: block; min-width: 0; }

/* ==================== КАРТОЧКИ ГЛАВНОЙ ==================== */
.home-card { gap: 14px; }
.home-card .btn { margin-top: 2px; }

/* ==================== ПЕЧАТЬ ====================
   Главную печатают редко, но если печатают — hero должен лечь
   чёрным по белому, без заливок и без поля поиска. */
@media print {
  .hero {
    background: #fff !important;
    color: #000 !important;
    border: 1pt solid #999;
    border-radius: 0;
    padding: 0 0 6mm;
  }
  .hero__bars, .hero__bars-accent,
  .hero__mark, .search, .progress-tile__go, .sec-card__arrow { display: none !important; }
  .hero__title, .hero__title-em, .hero__place-name { color: #000 !important; }
  .hero__tag-text, .hero__place-label, .hero__place-region, .hero__lede { color: #333 !important; }
  .sec-card__link { min-height: 0; padding: 8px 0; }
}


/* ---- Правки набора hero на узком экране ----
   Полный знак и подпись не помещаются в одну строку: подпись вставала
   в колонку шириной в три буквы и рвалась посреди слова. Разводим по
   строкам и запрещаем перенос внутри подписи. */
@media (max-width: 640px) {
  .hero__tag {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .hero__logo { margin-right: 0; }
  .hero__tag-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  /* Красный акцент уходит из-под подписи вниз, к краю блока. */
  .hero__bars-accent {
    top: auto;
    bottom: 18px;
    right: 16px;
    height: 52px;
    width: 7px;
  }
}

/* ============================================================
   Корневая страница — выбор объекта (templates/index.html.j2)
   Та же тёмная плашка с фирменными полосами, что и hero городка,
   но без прогресса: у человека ещё нет объекта.
   ============================================================ */
.root-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 5.5vw, 64px) clamp(20px, 4.5vw, 56px);
  background: var(--bg-dark);
  color: var(--on-dark);
  border-radius: var(--r-lg);
  --focus: #FFFFFF;
}
.root-hero__inner { position: relative; z-index: 1; max-width: 42rem; }
.root-hero__logo {
  height: clamp(28px, 4.4vw, 38px);
  width: auto;
  display: block;
  margin-bottom: clamp(18px, 3vw, 28px);
}
.root-hero__eyebrow {
  margin: 0 0 8px;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.root-hero__title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(28px, 5.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
/* Выделяем цветом, а не наклоном: курсивного начертания у Eurostile нет,
   браузер наклонял бы прямой шрифт сам — буквы плывут и рядом с прямым
   заголовком читаются как чужой шрифт. */
.root-hero__title em {
  font-style: normal;
  color: var(--accent-on-dark);
}
.root-hero__lede {
  margin: 0;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--on-dark-2);
}

.root-catalog { display: grid; gap: var(--sec-gap); }
.root-org__head { margin-bottom: 18px; }
.root-org__name {
  margin: 4px 0 4px;
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--ink);
}
.root-org__legal { margin: 0; color: var(--ink-muted); font-size: var(--fs-meta); }

.root-camps { list-style: none; margin: 0; padding: 0; }
.root-camp { padding: 0; }
.root-camp__link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name arrow" "region arrow" "meta arrow";
  gap: 4px 14px;
  align-items: center;
  min-height: 48px;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}
.root-camp__name {
  grid-area: name;
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--ink);
}
.root-camp__region { grid-area: region; color: var(--ink-2); font-size: var(--fs-sm); }
.root-camp__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.root-camp__arrow {
  grid-area: arrow;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 20px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.root-camp__link:hover .root-camp__arrow,
.root-camp__link:focus-visible .root-camp__arrow {
  background: var(--accent-ink);
  color: #FFFFFF;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Оглавление на странице «всё одной страницей» ----
   Ссылка занимала 26px по высоте внутри просторной карточки: пальцем
   в перчатке в такую не попасть. Теперь ссылка заполняет карточку
   целиком, а отступы переезжают на неё. */
.all-toc .card { padding: 0; }
.all-toc .card__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 20px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-radius: inherit;
}
.all-toc .card__link::after {
  content: '↓';
  margin-left: auto;
  color: var(--accent-ink);
}
@media (hover: hover) {
  .all-toc .card__link:hover { color: var(--accent-ink); }
}

/* ============================================================
   Корневая страница — дополнения: цифры в hero, полоса «что внутри»,
   карточки объектов с обложкой, подсказка внизу.
   ============================================================ */

/* --- Цифры в hero: тихая строка, как «5 шагов / 24/7» в макете --- */
.root-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin: clamp(22px, 3.4vw, 34px) 0 0;
  padding-top: clamp(18px, 2.6vw, 26px);
  border-top: 1px solid var(--line-dark-2);
}
.root-stats__item { display: grid; gap: 2px; }
.root-stats__value {
  order: -1;
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1;
  color: var(--on-dark);
}
.root-stats__label {
  margin: 0;
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}

/* --- Полоса «что внутри» --- */
/* --- Перечень «что внутри» ---
   Был рядом белых плашек с рамкой и иконкой — и читался как ряд кнопок:
   на тесте люди жали по ним и решали, что сайт не работает. Вести им некуда
   (разделы живут внутри объекта), поэтому блок сделан текстовым: никакой
   поверхности, рамки и тени — только иконка, строка и подпись под списком,
   которая говорит, что делать дальше. */
.root-inside { margin: clamp(22px, 3.4vw, 32px) 0 0; }
.root-inside__title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--fs-h4, 18px);
  line-height: 1.25;
  color: var(--ink);
}
.root-inside__list {
  display: grid;
  /* Колонки заданы ступенями, а не auto-fit: при auto-fit на средней ширине
     получалось три пункта в ряд и один под ними — ряд выглядел оборванным.
     Здесь всегда ровно: 1 / 2×2 / 4. */
  grid-template-columns: 1fr;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .root-inside__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1060px) {
  .root-inside__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.root-inside__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-2);
}
.root-inside__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.root-inside__text { min-width: 0; }
/* Обычный полужирный, не дисплейный шрифт: это фраза, а не заголовок плашки. */
.root-inside__text b { font-weight: 700; color: var(--ink); }
.root-inside__note {
  margin: 14px 0 0;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}

/* --- Карточка объекта с обложкой --- */
.root-camp--cover { padding: 0; overflow: hidden; }
.root-camp__link,
.all-toc .card__link {
  /* Карточка — флекс с align-items: flex-start, поэтому ссылка внутри
     сжимается до своего содержимого. У соседей содержимое разной длины,
     и карточки получались разной ширины с фото вразнобой. */
  width: 100%;
  align-self: stretch;
  /* И по высоте тоже: иначе у карточки с более коротким адресом строка
     «Открыть» поднимается выше, чем у соседа. */
  height: 100%;
}
.root-camp--cover .root-camp__link {
  display: grid;
  grid-template-columns: 1fr;
  /* Второй ряд забирает остаток высоты — на него опирается строка «Открыть». */
  grid-template-rows: auto 1fr;
  /* Гасим align-items: center, оставшийся от прежней текстовой карточки:
     он центрировал содержимое в своём ряду, и у карточки с более коротким
     адресом имя и кнопка оказывались на 26px ниже соседа. */
  align-items: stretch;
  justify-items: stretch;
  grid-template-areas: "media" "body";
  gap: 0;
  padding: 0;
}
.root-camp__media {
  grid-area: media;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--accent-soft);
}
.root-camp__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
@media (hover: hover) {
  .root-camp__link:hover .root-camp__img { transform: scale(1.03); }
}
.root-camp__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
}
.root-camp--cover .root-camp__name,
.root-camp--cover .root-camp__region,
.root-camp--cover .root-camp__meta { grid-area: auto; }
.root-camp__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* auto, а не фиксированный отступ: строка «Открыть» встаёт на одну линию
     у всех карточек ряда, сколько бы строк ни занял адрес. */
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--accent-ink);
}
.root-camp--cover .root-camp__arrow { grid-area: auto; }

/* --- Подсказка внизу --- */
.root-help__card { max-width: 46rem; }

/* Подпись компании на обложке карточки — плоская сетка объектов */
.root-catalog__head { margin-bottom: 18px; }
.root-catalog__head .sec__title em { font-style: normal; color: var(--accent-ink); }
.root-camp__media { position: relative; }
.root-camp__org {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  color: var(--accent-ink);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}
.root-camp__org--plain {
  position: static;
  display: inline-block;
  margin: 18px 20px 0;
  background: var(--accent-soft);
}