/*
 * Карточка записи реестра СДС. Подключается только на её страницах.
 * Все классы с приставкой nrp- — чтобы ничего не пересеклось с темой,
 * у которой стили карточки лежат прямо в её шаблоне.
 *
 * Обвязка (.reestr-title, .reestr-card, .text) остаётся темина: шаблон
 * плагина повторяет её один в один, и переопределять её здесь не нужно.
 */

.nrp-card {
    margin: 0;
}

/* Две колонки: подпись и значение. На узком экране — друг под другом,
   иначе подпись съедает половину строки и значение читать нечем. */
.nrp-card-row {
    display: grid;
    grid-template-columns: minmax(200px, 22%) 1fr;
    gap: 4px 24px;
    padding: 12px 0;
    border-bottom: 1px solid #ececf1;
}

.nrp-card-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.nrp-card-row:first-child {
    padding-top: 0;
}

.nrp-card-label {
    margin: 0;
    font-weight: 600;
    color: #6b6b76;
    line-height: 1.45;
}

.nrp-card-value {
    margin: 0;
    line-height: 1.45;
    /* Длинные адреса и номера без пробелов не должны распирать страницу. */
    overflow-wrap: anywhere;
}

/* Номер — моноширинным: в нём различают О и 0, и на глаз это видно
   только при одинаковой ширине знаков. */
.nrp-card-row--number .nrp-card-value {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.95em;
}

/* Область распространения бывает на полтора экрана — ей нужен воздух. */
.nrp-card-row--scope .nrp-card-value {
    white-space: pre-line;
}

.nrp-card-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 2px;
    background: #f0f0f3;
    color: #45454f;
    font-weight: 600;
    font-size: 0.95em;
}

.nrp-card-status--active {
    background: #e6f4ea;
    color: #1e6b34;
}

.nrp-card-status--archived {
    background: #f4ecec;
    color: #7a3a3a;
}

@media only screen and (max-width: 767px) {
    .nrp-card-row {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 10px 0;
    }

    .nrp-card-label {
        font-size: 0.92em;
    }
}

/*
 * Заголовок карточки со знаком соответствия.
 *
 * Разметку шаблон плагина повторяет за темой дословно, а вот стилей к ней
 * не наследует: у темы они лежали ИНЛАЙНОМ внутри её `single-reestr_sds.php`,
 * который плагин больше не подключает, и ни в один css-файл темы не попали.
 * Пока знака в карточке не было, это не бросалось в глаза; со знаком
 * 360 px без этих правил развалилась бы вся шапка страницы.
 *
 * Поэтому три правила темы (flex, слот 120 px, перенос на узком экране)
 * воспроизведены здесь. Стиль подключается только на страницах карточки,
 * поэтому на остальной сайт не влияет.
 */
.reestr-title {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

/*
 * Слот знака: у темы он был жёстко 120 px в ширину, и для квадратного знака
 * это правильно — такими сделаны 1 650 знаков из 2 483. Но в наборе есть
 * и полосы: 43 знака шире своей высоты вчетверо, а два — в пятнадцать раз
 * (800×53). В колонке 120 px такая полоса превращается в нечитаемую чёрточку
 * высотой восемь точек.
 *
 * Поэтому ширина слота не задаётся, а ограничивается: знак вписывается
 * по высоте, как раньше, а вширь ему разрешено разойтись до 260 px.
 * Квадратный знак от этого не меняется — он и был 100 px внутри отступов.
 */
.reestr-title .post-thumbnail {
    flex: 0 0 auto;
    min-width: 120px;
    max-width: 280px;
    padding: 10px;
    margin-right: 15px;
    box-sizing: border-box;
}

.reestr-title .post-thumbnail img {
    display: block;
    width: auto;
    height: auto;
    max-width: 260px;
    max-height: 100px;
    margin: 0 auto;
}

.reestr-title h1,
.reestr-title h1 span {
    overflow-wrap: anywhere;
    min-width: 0;
}

@media only screen and (max-width: 767px) {
    .reestr-title {
        flex-wrap: wrap;
    }
}