/*
 * Шим сетки для контента django-cms.
 * Bootstrap снят, но 49 плагинов djangocms_frontend (Grid, Card, Link) в базе
 * продолжают отдавать классы row / col-* / card. Здесь ровно столько правил,
 * сколько нужно этому контенту, и ни одного лишнего.
 *
 * ВАЖНО: в дизайн-системе v2 класс .row занят строкой таблицы рейтинга, поэтому
 * шим ограничен областью CMS-контента (.cms-content), а строки рейтинга носят
 * собственный класс .rt-row.
 */

.cms-content .container,
.cms-content .container-fluid,
.cms-content .container-lg { width: 100%; margin: 0 auto; }

/* Колонки повторяют каскад Bootstrap 5: сначала телефон, дальше брейкпоинты
   sm 576, md 768, lg 992, xl 1200. Порядок правил важен: .col идет раньше
   .col-12, иначе у колонки «col col-12» побеждает .col и она сжимается. */
.cms-content .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
}
.cms-content .row > * {
  flex-shrink: 0; width: 100%; max-width: 100%; min-width: 0;
  padding-left: 12px; padding-right: 12px;
}
.cms-content .col { flex: 1 0 0%; }
.cms-content .col-auto { flex: 0 0 auto; width: auto; }
.cms-content .col-1 { flex: 0 0 auto; width: 8.3333%; }
.cms-content .col-2 { flex: 0 0 auto; width: 16.6667%; }
.cms-content .col-3 { flex: 0 0 auto; width: 25%; }
.cms-content .col-4 { flex: 0 0 auto; width: 33.3333%; }
.cms-content .col-5 { flex: 0 0 auto; width: 41.6667%; }
.cms-content .col-6 { flex: 0 0 auto; width: 50%; }
.cms-content .col-7 { flex: 0 0 auto; width: 58.3333%; }
.cms-content .col-8 { flex: 0 0 auto; width: 66.6667%; }
.cms-content .col-9 { flex: 0 0 auto; width: 75%; }
.cms-content .col-10 { flex: 0 0 auto; width: 83.3333%; }
.cms-content .col-11 { flex: 0 0 auto; width: 91.6667%; }
.cms-content .col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
.cms-content .col-sm { flex: 1 0 0%; }
.cms-content .col-sm-1 { flex: 0 0 auto; width: 8.3333%; }
.cms-content .col-sm-2 { flex: 0 0 auto; width: 16.6667%; }
.cms-content .col-sm-3 { flex: 0 0 auto; width: 25%; }
.cms-content .col-sm-4 { flex: 0 0 auto; width: 33.3333%; }
.cms-content .col-sm-5 { flex: 0 0 auto; width: 41.6667%; }
.cms-content .col-sm-6 { flex: 0 0 auto; width: 50%; }
.cms-content .col-sm-7 { flex: 0 0 auto; width: 58.3333%; }
.cms-content .col-sm-8 { flex: 0 0 auto; width: 66.6667%; }
.cms-content .col-sm-9 { flex: 0 0 auto; width: 75%; }
.cms-content .col-sm-10 { flex: 0 0 auto; width: 83.3333%; }
.cms-content .col-sm-11 { flex: 0 0 auto; width: 91.6667%; }
.cms-content .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
.cms-content .col-md { flex: 1 0 0%; }
.cms-content .col-md-1 { flex: 0 0 auto; width: 8.3333%; }
.cms-content .col-md-2 { flex: 0 0 auto; width: 16.6667%; }
.cms-content .col-md-3 { flex: 0 0 auto; width: 25%; }
.cms-content .col-md-4 { flex: 0 0 auto; width: 33.3333%; }
.cms-content .col-md-5 { flex: 0 0 auto; width: 41.6667%; }
.cms-content .col-md-6 { flex: 0 0 auto; width: 50%; }
.cms-content .col-md-7 { flex: 0 0 auto; width: 58.3333%; }
.cms-content .col-md-8 { flex: 0 0 auto; width: 66.6667%; }
.cms-content .col-md-9 { flex: 0 0 auto; width: 75%; }
.cms-content .col-md-10 { flex: 0 0 auto; width: 83.3333%; }
.cms-content .col-md-11 { flex: 0 0 auto; width: 91.6667%; }
.cms-content .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
.cms-content .col-lg { flex: 1 0 0%; }
.cms-content .col-lg-1 { flex: 0 0 auto; width: 8.3333%; }
.cms-content .col-lg-2 { flex: 0 0 auto; width: 16.6667%; }
.cms-content .col-lg-3 { flex: 0 0 auto; width: 25%; }
.cms-content .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
.cms-content .col-lg-5 { flex: 0 0 auto; width: 41.6667%; }
.cms-content .col-lg-6 { flex: 0 0 auto; width: 50%; }
.cms-content .col-lg-7 { flex: 0 0 auto; width: 58.3333%; }
.cms-content .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
.cms-content .col-lg-9 { flex: 0 0 auto; width: 75%; }
.cms-content .col-lg-10 { flex: 0 0 auto; width: 83.3333%; }
.cms-content .col-lg-11 { flex: 0 0 auto; width: 91.6667%; }
.cms-content .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
.cms-content .col-xl { flex: 1 0 0%; }
.cms-content .col-xl-1 { flex: 0 0 auto; width: 8.3333%; }
.cms-content .col-xl-2 { flex: 0 0 auto; width: 16.6667%; }
.cms-content .col-xl-3 { flex: 0 0 auto; width: 25%; }
.cms-content .col-xl-4 { flex: 0 0 auto; width: 33.3333%; }
.cms-content .col-xl-5 { flex: 0 0 auto; width: 41.6667%; }
.cms-content .col-xl-6 { flex: 0 0 auto; width: 50%; }
.cms-content .col-xl-7 { flex: 0 0 auto; width: 58.3333%; }
.cms-content .col-xl-8 { flex: 0 0 auto; width: 66.6667%; }
.cms-content .col-xl-9 { flex: 0 0 auto; width: 75%; }
.cms-content .col-xl-10 { flex: 0 0 auto; width: 83.3333%; }
.cms-content .col-xl-11 { flex: 0 0 auto; width: 91.6667%; }
.cms-content .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

.cms-content .card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule-soft);
  padding: 20px;
}
.cms-content .card-body { padding: 0; }
.cms-content .card-title { font-family: "Source Serif 4", Georgia, serif; font-size: 20px; margin: 0 0 8px; }

/* Типографика содержимого CKEditor */
.cms-content p:not([class]) { margin: 0 0 16px; line-height: 1.65; }
.cms-content h2:not([class]) { font-family: "Source Serif 4", Georgia, serif; font-size: 30px; line-height: 1.15; margin: 36px 0 12px; }
.cms-content h3:not([class]) { font-family: "Source Serif 4", Georgia, serif; font-size: 22px; line-height: 1.2; margin: 28px 0 10px; }
.cms-content h4:not([class]) { font-size: 17px; margin: 22px 0 8px; }
.cms-content a:not([class]) { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.cms-content ul, .cms-content ol { padding-left: 22px; margin: 0 0 16px; }
.cms-content li { margin: 4px 0; }
.cms-content img { max-width: 100%; height: auto; }
.cms-content figure { margin: 24px 0; }

/* Таблицы внутри статей: 22 текста в базе содержат table */
.cms-content table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 20px 0; display: block; overflow-x: auto; }
.cms-content th {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: left; background: var(--blue-pale);
  padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); white-space: nowrap;
}
.cms-content td { padding: 9px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }

/* ------------------------------------------------------------------
   Выключаем выключку по формату.
   В контенте CKEditor почти у каждого абзаца стоит inline-стиль
   text-align: justify. В узких колонках дизайн-системы это дает рваные
   межсловные пробелы, поэтому перебиваем — единственное место во всем
   проекте, где нужен !important, иначе inline-стиль не перекрыть.
   ------------------------------------------------------------------ */
.cms-content p[style*="justify"],
.prose p[style*="justify"],
.cms-content div[style*="justify"],
.cms-content li[style*="justify"] { text-align: left !important; }