/* Начертание Roboto Condensed 700 подключается <link>-ом рядом с самим блоком
   (в src/fragments/solutions-command-center.html): так шрифт грузится параллельно с CSS,
   а не вторым запросом после него, как было бы с @import. */

/* ===========================================================================
   pw-wordcloud — «облако слов» (word cloud) для /solutions/command-center
   ---------------------------------------------------------------------------
   Живая вёрстка вместо растровой картинки из макета.
   Ничего от Tilda не наследует, все классы с префиксом pw-wc-.

   Устройство:
   - .pw-wordcloud — сам список (ul). Он же container-query контейнер:
     все кегли заданы в cqw, то есть в процентах от ШИРИНЫ БЛОКА, а не окна.
     Поэтому композиция сохраняет пропорции макета в любой колонке и при
     любой ширине секции, а не только при полноэкранной раскладке.
   - Раскладка — CSS Grid по именованным областям (grid-template-areas),
     без абсолютного позиционирования: на планшете/мобильном области просто
     переопределяются в медиа-запросах.
   - Вертикальные слова — writing-mode: vertical-rl + rotate(180deg)
     (снизу вверх), на мобильном разворачиваются в обычные горизонтальные.

   ⚠️ Раскладка переключается по ширине ОКНА (медиа-запросы), а кегль — по
   ширине БЛОКА (cqw). Штатное применение — блок во всю ширину контентной
   колонки (или в колонке шириной от ~600px). В колонке уже 600px при широком
   окне композиция остаётся десктопной и может на пару процентов вылезти
   за края контейнера — там ставьте блок в контейнер пошире.

   Шрифт — Roboto Condensed 700 (@import в самом начале файла; та же
   суперсемья, что основной Roboto сайта, поэтому сочетается с остальной
   типографикой). В макете буквы узкие и высокие — обычный Roboto с
   отрицательным трекингом эту фактуру не давал: слова получались шире и
   «воздушнее». С condensed-начертанием трекинг не нужен (letter-spacing: 0),
   а кегли пропорционально увеличены — condensed уже примерно на 13%, и при
   старых размерах композиция стала бы заметно уже эталона.
   Фолбэк — обычный Roboto: если Google Fonts недоступен, блок просто станет
   чуть шире, но не развалится.
   =========================================================================== */

.pw-wordcloud {
  /* Цвета сняты пипеткой с эталонной картинки макета. */
  --pw-wc-red: #c4000f;
  --pw-wc-black: #0a0a0a;
  --pw-wc-dark: #333333;
  --pw-wc-grey: #636363;
  --pw-wc-light: #808080;

  /* Кегли: доля от ширины блока (cqw). Клампы страхуют крайние ширины.
     Нижние границы намеренно небольшие: раскладка переключается по ширине
     ОКНА, а кегль считается от ширины БЛОКА, и если блок стоит в узкой
     колонке широкого окна, размеры должны честно ужаться, а не упереться
     в минимум и распереть сетку. На реальном мобильном действует свой
     медиа-запрос со своими (крупными) минимумами — см. ниже. */
  --pw-wc-size-xl: clamp(26px, 5.5cqw, 101px);
  --pw-wc-size-l: clamp(18px, 3.71cqw, 68px);
  --pw-wc-size-m: clamp(12px, 2.31cqw, 42px);
  --pw-wc-size-s: clamp(11px, 1.83cqw, 34px);
  --pw-wc-size-xs: clamp(10px, 1.64cqw, 30px);

  container-type: inline-size;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-template-areas:
    '.      .      .     inter  exec   exec'
    'gov    gov    gov   gov    crisis crisis'
    'safety emerg  situ  situ   situ   admin'
    'transp emerg  util  util   monit  multi';
  justify-content: center;
  align-content: center;
  column-gap: 1.1cqw;
  /* воздух между строками: у condensed-начертания строки визуально уже, и без
     этого зазора композиция становится площе эталона по пропорции */
  row-gap: 1.2cqw;

  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Roboto Condensed', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-align: left;
}

.pw-wc__item {
  margin: 0;
  padding: 0;
  font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
  font-weight: 700;
  font-size: var(--pw-wc-size-m);
  line-height: 1;
  /* condensed-начертание уже узкое — отрицательный трекинг ему только вредит */
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pw-wc-grey);
}

/* ---- размеры ------------------------------------------------------------ */
.pw-wc__item--xl {
  font-size: var(--pw-wc-size-xl);
}
.pw-wc__item--l {
  font-size: var(--pw-wc-size-l);
}
.pw-wc__item--m {
  font-size: var(--pw-wc-size-m);
}
.pw-wc__item--s {
  font-size: var(--pw-wc-size-s);
}
.pw-wc__item--xs {
  font-size: var(--pw-wc-size-xs);
}

/* ---- цвета -------------------------------------------------------------- */
.pw-wc__item--red {
  color: var(--pw-wc-red);
}
.pw-wc__item--black {
  color: var(--pw-wc-black);
}
.pw-wc__item--dark {
  color: var(--pw-wc-dark);
}
.pw-wc__item--grey {
  color: var(--pw-wc-grey);
}
.pw-wc__item--light {
  color: var(--pw-wc-light);
}

/* Необязательный «тихий» вариант — начертание 500 вместо 700. */
.pw-wc__item--regular {
  font-weight: 500;
}

/* ---- вертикальные слова (снизу вверх) ----------------------------------- */
.pw-wc__item--vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  /* после поворота на 180° начало строки оказывается внизу — как в макете */
  text-align: left;
}

/* ---- позиции в композиции (десктоп) ------------------------------------- */
.pw-wc__item--situation {
  grid-area: situ;
  justify-self: start;
  align-self: center;
}
.pw-wc__item--government {
  grid-area: gov;
  justify-self: end;
  align-self: center;
}
.pw-wc__item--crisis {
  grid-area: crisis;
  justify-self: start;
  align-self: end;
}
.pw-wc__item--safety {
  grid-area: safety;
  justify-self: end;
  align-self: center;
}
.pw-wc__item--interagency {
  grid-area: inter;
  justify-self: start;
  align-self: end;
}
.pw-wc__item--emergency {
  grid-area: emerg;
  justify-self: center;
  align-self: end;
}
.pw-wc__item--executive {
  grid-area: exec;
  justify-self: start;
  align-self: end;
}
.pw-wc__item--administration {
  grid-area: admin;
  justify-self: start;
  align-self: center;
}
.pw-wc__item--monitoring {
  grid-area: monit;
  justify-self: start;
  align-self: start;
}
.pw-wc__item--utility {
  grid-area: util;
  justify-self: start;
  align-self: start;
}
.pw-wc__item--transport {
  grid-area: transp;
  justify-self: end;
  align-self: end;
}
.pw-wc__item--multipurpose {
  grid-area: multi;
  justify-self: start;
  align-self: start;
}

/* ===========================================================================
   >= 1200px — эталонная композиция (правила выше). Ниже — перестроения.
   =========================================================================== */

/* --- 960–1199: та же композиция, но чуть плотнее ------------------------- */
@media (max-width: 1199px) {
  .pw-wordcloud {
    column-gap: 1cqw;
  }
}

/* --- планшет (до 960): четыре колонки, вертикальные слова остаются -------
   Оба вертикальных слова собраны в «хребет» посередине и растянуты на все
   четыре нижние строки — иначе они распирали бы по две строки каждый и в
   боковых колонках зияли бы дыры.                                          */
@media (max-width: 959px) {
  .pw-wordcloud {
    --pw-wc-size-xl: clamp(27px, 7.2cqw, 79px);
    --pw-wc-size-l: clamp(18px, 4.6cqw, 52px);
    --pw-wc-size-m: clamp(12px, 3.2cqw, 34px);
    --pw-wc-size-s: clamp(11px, 2.63cqw, 28px);
    --pw-wc-size-xs: clamp(10px, 2.4cqw, 26px);

    grid-template-columns: repeat(4, auto);
    grid-template-areas:
      'gov    gov   gov   gov'
      'situ   situ  situ  situ'
      'safety emerg inter crisis'
      'exec   emerg inter admin'
      'util   emerg inter monit'
      'transp emerg inter multi';
    column-gap: 2.2cqw;
    row-gap: 1.4cqw;
  }

  .pw-wc__item--situation,
  .pw-wc__item--government {
    justify-self: center;
  }
  .pw-wc__item--safety,
  .pw-wc__item--executive,
  .pw-wc__item--utility,
  .pw-wc__item--transport {
    justify-self: end;
    align-self: center;
  }
  .pw-wc__item--crisis,
  .pw-wc__item--administration,
  .pw-wc__item--monitoring,
  .pw-wc__item--multipurpose {
    justify-self: start;
    align-self: center;
  }
  .pw-wc__item--emergency,
  .pw-wc__item--interagency {
    justify-self: center;
    align-self: center;
  }
}

/* --- 640–959: чуть больше воздуха между колонками ------------------------ */
@media (max-width: 767px) {
  .pw-wordcloud {
    column-gap: 2.6cqw;
  }
}

/* ===========================================================================
   Мобильный (до 600px): сетка не нужна — «облако» складывается в поток.
   Вертикальные слова разворачиваются в горизонтальные.
   =========================================================================== */
@media (max-width: 599px) {
  .pw-wordcloud {
    --pw-wc-size-xl: clamp(29px, 11.2cqw, 58px);
    --pw-wc-size-l: clamp(21px, 7.8cqw, 40px);
    --pw-wc-size-m: clamp(17px, 5.4cqw, 28px);
    --pw-wc-size-s: clamp(15px, 4.5cqw, 24px);
    --pw-wc-size-xs: clamp(15px, 4.5cqw, 24px);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 3.2cqw;
    row-gap: 2.4cqw;
    text-align: center;
  }

  /* области больше не действуют, порядок берётся из разметки */
  .pw-wc__item {
    grid-area: auto;
    justify-self: auto;
    align-self: auto;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.05;
  }

  .pw-wc__item--vertical {
    writing-mode: horizontal-tb;
    transform: none;
  }
}

/* --- 320: самые узкие экраны --------------------------------------------
   Колонка шире, чтобы длинные пары слов не слипались с краями, а честно
   уходили на следующую строку.                                            */
@media (max-width: 400px) {
  .pw-wordcloud {
    column-gap: 5cqw;
    row-gap: 3.2cqw;
  }
}

/* ---- уважаем настройку «меньше движения» (на будущее, если добавят анимацию) */
@media (prefers-reduced-motion: reduce) {
  .pw-wc__item {
    transition: none !important;
    animation: none !important;
  }
}