/* Цветная полоса под сеткой (параметр BG_COLOR), как section gray в вёрстке: фон на всю ширину окна и отступы сверху и снизу.
   Фон за пределы блока выводится тенью (box-shadow) и обрезается по вертикали, поэтому горизонтальной прокрутки нет. */
.prm-grid-bg {
    background: var(--grid-bg);
    box-shadow: 0 0 0 100vmax var(--grid-bg);
    clip-path: inset(0 -100vmax);
    padding: 70px 0;
}
.prm-grid-bg > .container:last-child,
.prm-grid-bg > div:last-child {
    margin-bottom: 0;
}
@media (max-width: 599px) {
    .prm-grid-bg {
        padding: 44px 0;
    }
}

/* Фоновый рисунок сетки (параметры BG_IMAGE, BG_IMAGE_POS, BG_IMAGE_SIZE). Рисунок лежит на псевдоэлементе на всю ширину окна
   под содержимым полосы; цвет полосы (BG_COLOR) остаётся под ним. --grid-img - url рисунка, --grid-img-size - ширина (необязательно). */
.prm-grid-bg--img {
    position: relative;
    isolation: isolate;
}
.prm-grid-bg--img::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    z-index: -1;
    pointer-events: none;
    background-image: var(--grid-img);
    background-size: var(--grid-img-size, auto);
    background-repeat: no-repeat;
    background-position: 0 0;
}
/* Полоса шире контейнера на ширину полосы прокрутки: без этого появилась бы горизонтальная прокрутка */
html:has(.prm-grid-bg--img) {
    overflow-x: clip;
}
.prm-grid-bg--tile::before { background-repeat: repeat; background-position: 0 0; }
.prm-grid-bg--top-repeat::before { background-repeat: repeat-x; background-position: left top; }
.prm-grid-bg--bottom-repeat::before { background-repeat: repeat-x; background-position: left bottom; }
.prm-grid-bg--left-repeat::before { background-repeat: repeat-y; background-position: left top; }
.prm-grid-bg--right-repeat::before { background-repeat: repeat-y; background-position: right top; }
.prm-grid-bg--left::before { background-position: left center; }
.prm-grid-bg--right::before { background-position: right center; }
.prm-grid-bg--top::before { background-position: center top; }
.prm-grid-bg--bottom::before { background-position: center bottom; }
.prm-grid-bg--center::before { background-position: center center; }
.prm-grid-bg--cover::before { background-size: cover; background-position: center center; }

/* Скрытие сетки по размеру экрана (параметры MOBILE_HIDDEN, DESKTOP_HIDDEN, VIS_BREAKPOINT).
   Внешняя сетка из одной ячейки, в которой скрытая сетка единственная, тоже скрывается, чтобы не оставался промежуток space-y;
   в технологической строке скрывается и сама ячейка (остальные ячейки строки остаются). */
@media (max-width: 767px) {
    .prm-hide-m-768,
    .grid:has(> div:only-child > div > .prm-hide-m-768:only-child),
    .prm-techrow .grid > div:has(> div > .prm-hide-m-768:only-child) { display: none !important; }
}
@media (max-width: 1023px) {
    .prm-hide-m-1024,
    .grid:has(> div:only-child > div > .prm-hide-m-1024:only-child),
    .prm-techrow .grid > div:has(> div > .prm-hide-m-1024:only-child) { display: none !important; }
}
@media (min-width: 768px) {
    .prm-hide-d-768,
    .grid:has(> div:only-child > div > .prm-hide-d-768:only-child),
    .prm-techrow .grid > div:has(> div > .prm-hide-d-768:only-child) { display: none !important; }
}
@media (min-width: 1024px) {
    .prm-hide-d-1024,
    .grid:has(> div:only-child > div > .prm-hide-d-1024:only-child),
    .prm-techrow .grid > div:has(> div > .prm-hide-d-1024:only-child) { display: none !important; }
}
/* Пометка для редактора: блок виден всегда, подпись говорит, для какого экрана он предназначен */
.prm-grid-flag {
    position: relative;
    outline: 2px dashed #E0A800;
    outline-offset: -2px;
}
.prm-grid-flag::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 2px 8px;
    border-radius: 0 0 6px 0;
    background: #E0A800;
    color: #1E1E1E;
    font: 700 11px/1.4 sans-serif;
    pointer-events: none;
}
.prm-grid-flag--desktop::before { content: "только компьютер (скрыт на мобильном)"; }
.prm-grid-flag--mobile::before { content: "только мобильный (скрыт на компьютере)"; }
.prm-grid-flag--none::before { content: "скрыт на всех экранах"; }

/* Технологическая строка шапки (параметр TECH_ROW), по макету .hdr-row0: высота 38px, виджеты по центру по вертикали,
   левая часть слева, правая справа, промежуток между виджетами 16px. Строка собирается из двух колонок: слева виджет
   (например, "Институты и подразделения"), справа вложенная сетка с остальными виджетами. Пустые ячейки не занимают места. */
.prm-techrow {
    margin-bottom: 0 !important;
}
/* Линии сверху и снизу у любой сетки (параметры LINE_TOP и LINE_BOTTOM) */
.prm-line-t {
    border-top: 1px solid var(--h-line, #E6E6E6);
}
.prm-line-b {
    border-bottom: 1px solid var(--h-line, #E6E6E6);
}
.prm-techrow [class*="space-y-"] > * {
    margin-top: 0 !important;
}
.prm-techrow .grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
}
.prm-techrow .grid > div {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    grid-column: auto;
}
.prm-techrow .grid > div:last-child {
    flex: 1 1 auto;
}
.prm-techrow .grid > div:has(> div:empty) {
    display: none;
}
.prm-techrow .grid .grid {
    justify-content: flex-end;
}
.prm-techrow .grid .grid > div:last-child {
    flex: 0 1 auto;
}
/* Иконки справа (поиск, версия для слабовидящих, язык): одинаковый зазор между значками, 16px.
   Кнопки-иконки шире значка на 8px с каждой стороны, поэтому их ячейки сдвигаются на -8px. */
.prm-techrow .grid .grid > div:has(.prm-srch--icon, .prm-a11y--icon) {
    margin-inline: -8px;
}
/* Вертикальная черта после «Приоритет-2030» (ромбик): по центру промежутка до иконок */
.prm-techrow .grid .grid > div:has(.prm-ddm--rhomb):not(:last-child) {
    position: relative;
}
.prm-techrow .grid .grid > div:has(.prm-ddm--rhomb):not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px;
    width: 1px;
    height: 16px;
    transform: translateY(-50%);
    background: var(--h-sep, #CFCFCF);
}

/* Высота и вертикальное выравнивание сетки (параметры ROW_HEIGHT и VALIGN): сетка внутри блока и ячейки внутри ряда
   выравниваются по центру или по нижнему краю. Минимальная высота задаётся стилем блока. */
.prm-rowbox {
    display: flex;
    flex-direction: column;
}
.prm-rowbox--center {
    justify-content: center;
}
.prm-rowbox--bottom {
    justify-content: flex-end;
}
.prm-rowbox--center > .grid {
    align-items: center;
}
.prm-rowbox--bottom > .grid {
    align-items: flex-end;
}

/* Без отступа сверху: убирает промежуток space-y между этой сеткой и предыдущей (параметр NO_GAP_TOP) */
.prm-gap-t0,
.grid:has(> div > div > .prm-gap-t0) {
    margin-top: 0 !important;
}

/* Закрепление шапки (параметр STICKY): script.js помечает шапку классом prm-header-pinned и сдвигает её вверх на высоту строк выше отмеченной сетки */
.site-header.prm-header-pinned {
    display: flow-root; /* нижний отступ контейнера остаётся внутри закреплённой шапки (иначе он схлопывается наружу и меню прилегает к краю) */
    position: sticky;
    top: var(--prm-pin-top, 0);
    z-index: 1000;
    background: var(--h-bg, #fff);
    box-shadow: 0 1px 8px rgba(0, 0, 0, .06);
}

/* Высота сетки на мобильном (параметр ROW_HEIGHT_MOBILE): переменная --row-h-m заменяет минимальную высоту на экранах до 767px */
@media (max-width: 767px) {
    .prm-rowbox[style*="--row-h-m"] {
        min-height: var(--row-h-m) !important;
    }
}