/* Start:/bitrix/templates/mastersluh_new/css/page-sitemap.css?17881654129299*/
/*
 * Страница «Карта сайта» — блок Content (2 колонки ссылок).
 * Источники: docs/SITEMAP_PAGE_FIGMA_ANALYSIS.md; docs/SITEMAP_PAGE_IMPLEMENTATION_PLAN.md.
 * Header/Footer/Main-Banner/Sidebar сюда не входят — уже реализованы на сайте.
 * Для Sidebar в разметке оставлен пустой слот `.sitemap__sidebar` — только
 * резервирует ширину (324px) в сетке desktop, содержимое не верстается.
 *
 * Общие стили дизайн-системы сюда не дублируются — на сайте подключены
 * отдельно, глобально для всех страниц (шрифты, reset, .container,
 * переменные и классы типографики .text-*, см. ../../main_styles.css).
 *
 * Все селекторы (включая токены) намеренно скоуплены под .page-sitemap —
 * класс на <main> (см. index.html), не глобальный :root/голые имена —
 * на реальном сайте одна общая таблица стилей на много страниц.
 *
 * Брейкпоинты сетки — min-width: 767px / 1024px (не 768px!). Это намеренно
 * подогнано под .container из main_styles.css: там мобильный паддинг 20px
 * действует только до max-width:766px, а с 767px уже включается табличный
 * паддинг 40px. Если использовать 768px, ровно на 767px колонки схлопнутся
 * в 1, пока контейнер уже визуально «планшетный» — проверено вручную (см.
 * codex-context.md).
 */

/* -----------------------------------------
   1. Токены страницы
   Источник: mastersluh-figma-design-system-audit.md (§1 Цвета).
   ----------------------------------------- */

.page-sitemap {
  --color-primary-dark: #1c294a;
  --color-secondary-dark: #515e7e;
  --color-tertiary-dark: #697486;
  --color-pale: #e8eef3;
  --color-hover: #0065c7; /* Interactive/Hover, mastersluh-figma-design-system-audit.md §1 */

  /* Ширина зарезервированного места под Sidebar (см. анализ, раздел 3) */
  --sidebar-width: 324px;
}

/* -----------------------------------------
   2. Секция + вертикальные отступы
   Верх/низ секции: 60/80 desktop, 40/60 tablet, 40/40 mobile
   (раздел 7 анализа — дистанция Main-Banner→Content и Content→Footer).
   ----------------------------------------- */

.page-sitemap .sitemap {
  padding: 40px 0;
}

@media (min-width: 767px) {
  .page-sitemap .sitemap {
    padding: 40px 0 60px;
  }
}

@media (min-width: 1024px) {
  .page-sitemap .sitemap {
    padding: 60px 0 80px;
  }
}

/* -----------------------------------------
   3. Content: колонки ссылок + зарезервированное место под Sidebar
   ----------------------------------------- */

.page-sitemap .sitemap__content {
  display: block;
}

@media (min-width: 1441px) {
  .page-sitemap .sitemap__content {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    column-gap: 40px;
    align-items: start;
  }
}

/* Пустой слот под уже готовый Sidebar (не верстаем, только резервируем
   ширину). Скрыт на tablet/mobile — там Sidebar не показывается и на
   проде. Рамка/подпись видны только пока слот пустой (:empty) — как
   только сюда вставят реальную разметку Sidebar с прода, заглушка сама
   перестанет применяться, ничего вручную чистить не нужно. */
.page-sitemap .sitemap__sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .page-sitemap .sitemap__sidebar {
    display: block;
  }

  .page-sitemap .sitemap__sidebar:empty {
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px dashed var(--color-pale);
    border-radius: 24px;
    color: var(--color-tertiary-dark);
    font-size: 13px;
    text-align: center;
  }
}

/* -----------------------------------------
   4. Колонки ссылок (Container → Column × 2)
   Desktop: 2 колонки, gap 20px, паддинг колонки 40px (гуттер 100px).
   Tablet: 2 колонки, gap 0, паддинг колонки 28px (гуттер 56px).
   Mobile: 1 колонка, паддинг 28px, колонки друг под другом.
   ----------------------------------------- */

.page-sitemap .sitemap__categories {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 767px) {
  .page-sitemap .sitemap__categories {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0;
  }
}

@media (min-width: 1024px) {
  .page-sitemap .sitemap__categories {
    column-gap: 20px;
  }
}

.page-sitemap .sitemap__column {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 28px;
}

@media (min-width: 767px) {
  .page-sitemap .sitemap__column {
    gap: 48px;
  }
}

@media (min-width: 1024px) {
  .page-sitemap .sitemap__column {
    gap: 60px;
    padding: 0 40px;
  }
}

/* -----------------------------------------
   5. Категория (List-2-lvl): заголовок-ссылка + список
   ----------------------------------------- */

.page-sitemap .sitemap__category {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-sitemap .sitemap__category-title {
  color: var(--color-primary-dark);
}

.page-sitemap .sitemap__category-title:hover {
  color: var(--color-hover, #0065c7);
}

/* -----------------------------------------
   6. Список ссылок категории (List-2-level)
   Gap между пунктами: 12px desktop, 8px tablet/mobile.
   ----------------------------------------- */

.page-sitemap .sitemap__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-sitemap .sitemap__list .with-undergroup {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 1024px) {
  .page-sitemap .sitemap__list {
    gap: 12px;
  }
}

.page-sitemap .sitemap__link {
  display: block;
  color: var(--color-secondary-dark);
}

.page-sitemap a.sitemap__link:hover {
  color: var(--color-hover, #0065c7);
}

/* -----------------------------------------
   7. Составная ссылка (Link + вложенный подсписок)
   Gap заголовок→подсписок: 4px (все брейкпоинты).
   ----------------------------------------- */

.page-sitemap .sitemap__link-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-sitemap .sitemap__sublist {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
}

/* 7a. Подсписок-адреса (List-3-level под «Контакты»): некликабельный
   текст, gap 8px (все брейкпоинты), цвет tertiary-dark. */
.page-sitemap .sitemap__sublist--address {
  gap: 8px;
}

.page-sitemap .sitemap__sublist--address li {
  color: var(--color-tertiary-dark);
}

/* 7b. Подсписок-ссылки (List-3-level под «Оториноларингология»/
   «Сурдология»): такие же ссылки, как в основном списке, только с
   отступом. Gap 12px desktop, 8px tablet/mobile — как у .sitemap__list. */
.page-sitemap .sitemap__sublist--links {
  gap: 8px;
}

@media (min-width: 1024px) {
  .page-sitemap .sitemap__sublist--links {
    gap: 12px;
  }
}

.page-sitemap .sitemap__sublist--links a {
  color: var(--color-secondary-dark);
}

.page-sitemap .sitemap__sublist--links a:hover {
  color: var(--color-hover, #0065c7);
}

/* -----------------------------------------
   8. Заглушки Header/Footer/Main-Banner — ТОЛЬКО для локального
   превью index.html. На реальном сайте не переносить: все три уже
   реализованы, этот блок нужен только чтобы проверить Content в
   контексте страницы. Заглушки лежат вне <main class="page-sitemap">,
   поэтому цвета заданы напрямую, а не через токены из .page-sitemap.
   ----------------------------------------- */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f4f9;
  color: #697486;
  font-size: 13px;
  text-align: center;
  border: 1px dashed #e8eef3;
  padding: 8px;
}
.placeholder--header {
  height: 113px;
}
.placeholder--main-banner {
  height: 174px;
  margin: 20px;
}
.placeholder--footer {
  height: 160px;
}

@media (max-width: 1023px) {
  .page-sitemap .sitemap__list .with-undergroup {
    gap: 8px;
  }
}
@media (max-width: 766px) {
  .page-sitemap .sitemap__categories {
    gap: 40px;
  }
}



/* End */


/* Start:/bitrix/templates/mastersluh_new/components/bitrix/news.list/redesign/banners_v2/style.css?17872232161607*/
.common_sidebar_banner--with-actions {
    flex-direction: column;
    gap: 28px;
}

.common_sidebar_banner--with-actions #slider_banner {
    width: 100%;
}

.sidebar-promotions-link {
    position: relative;
    display: flex;
    width: 100%;
    height: 120px;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    padding: 24px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--Color-Light-Substrate, #F1F4F9);
    color: var(--Color-Dark-Primary-dark, #1C294A);
}

.sidebar-promotions-link > span:first-child {
    position: relative;
    z-index: 1;
    align-self: flex-start;
}

.sidebar-promotions-link__image {
    position: absolute;
    top: -46px;
    left: 115px;
    display: block;
    width: 223px;
    height: 223px;
    max-width: none;
    object-fit: cover;
    opacity: 0.75;
}

.sidebar-promotions-link__arrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--Color-Light-White, #FFF);
    color: var(--Color-Blue-Light-blue-4, #2F79C1);
}

.sidebar-promotions-link:focus-visible {
    outline: 2px solid var(--Color-Blue-Accent, #035CB2);
    outline-offset: 2px;
}

.sidebar-promotions-link--hearing-test {
    height: auto;
    min-height: 120px;
}

.sidebar-promotions-link--hearing-test .sidebar-promotions-link__image {
    top: auto;
    left: auto;
    right: -10px;
    bottom: -12px;
    width: 210px;
    height: 115px;
    opacity: 1;
}

/* End */
/* /bitrix/templates/mastersluh_new/css/page-sitemap.css?17881654129299 */
/* /bitrix/templates/mastersluh_new/components/bitrix/news.list/redesign/banners_v2/style.css?17872232161607 */