/* v35: лица, обложки и снимки в разделе упоминаний
   ==================================================================
   Владелец: «найди под каждую 520 статью о каком-либо упоминании — свою
   обложку этого человека, альбома, групповой снимок… сделай в общем этот
   раздел в калитке — красивым».

   Прежде раздел был перечнем строк: имя, тип, «нет на полке». Читать
   можно, смотреть нечего — 526 одинаковых строк подряд.

   ЧТО СДЕЛАНО

   ПЕРЕЧЕНЬ СТАЛ ПЛИТКАМИ. У каждой записи своё изображение: снимок
   человека или состава, либо обложка его диска из коллекции владельца.
   Плитки в сетке, которая сама подстраивается под ширину окна.

   ЧТО ЕСЛИ ИЗОБРАЖЕНИЯ НЕТ. Не пустое место и не заглушка, а инициалы
   на цветном поле. Цвет выведен из самого имени, поэтому у каждой записи
   он свой и постоянный — плитка узнаётся, даже когда снимка нет.
   Выдумывать изображение или подставлять чужое нельзя.

   ОТКУДА СНИМОК — ВИДНО. Свободные изображения из Викисклада требуют
   указания источника, поэтому под снимком в карточке стоит ссылка на
   его страницу, где названы автор и лицензия.

   ==================================================================
   v36: плитка стала пластинкой
   ==================================================================
   Владелец: «в виде виниловой пластинки круглой, названия групп разными
   шрифтами, и на яблоках пластинок какие-нибудь абстракции».

   Круг занимает всю ширину ячейки, название стоит ПОД ним, а не поверх
   изображения, как было. Так видно, что шрифт у каждого свой, — ради
   этого всё и затевалось. Заодно у круга свободны углы ячейки: туда
   переехали пометки «есть на полке» и «Летов говорил», и они больше не
   лежат на снимке.

   Шрифт и кегль задаются в разметке: они выведены из названия, см.
   fontOf и sizeFor в faces-v35.js.
*/

/* ---------- сетка плиток ---------- */

.fx-grid {
  display: grid;
  /* Плитка не уже 132 точек: меньше — и лицо не разобрать. Сколько
     войдёт в ряд, решает браузер. Зазор по вертикали больше, чем по
     горизонтали: между кругами нужен воздух под подпись. */
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 22px 16px;
  margin: 16px 0 8px;
}

.fx-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- сам диск ---------- */

.fx-disc {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #1a1a20 0 30%, #0d0d11 31% 100%);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, .55),
    inset 0 0 24px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
}

/* Дорожки. Шаг 3,5 точки: на глаз похоже на пластинку при размере плитки
   от 100 до 200 точек и не даёт муара на обычном экране. */
.fx-groove {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, .055) 0 1px, rgba(0, 0, 0, 0) 1px 3.5px);
}

/* Яблоко */
.fx-apple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52%;
  height: 52%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 -7px 16px rgba(0, 0, 0, .22);
}
/* Со снимком яблоко крупнее: при 52% лицо на плитке в 132 точки было бы
   69 точек — не разобрать. */
.fx-apple-pic { width: 66%; height: 66%; }

.fx-lbl { display: block; width: 100%; height: 100%; }

.fx-apple img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Снимки из разных источников разной яркости и насыщенности. Лёгкое
     приглушение сводит их к общему тону, иначе сетка рябит. */
  filter: saturate(.92) contrast(1.02);
  transition: filter .35s ease;
}
.fx-item:hover .fx-apple img,
.fx-item:focus-visible .fx-apple img {
  filter: saturate(1.05) contrast(1.04);
}

/* Блик. screen поверх дорожек даёт то самое отражение лампы. */
.fx-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, .11) 47%, rgba(255, 255, 255, 0) 60%);
}

.fx-hole {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6.5%;
  height: 6.5%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #08080b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10);
}

/* ---------- подписи ---------- */

.fx-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.16;
  color: #f2eef8;
  letter-spacing: .01em;
  /* Гарнитура задана в разметке, кегль приходит оттуда же переменной
     --fx-fs: и то и другое зависит от названия. Запасное значение на
     случай, если переменной почему-то нет. */
  font-size: calc(var(--fx-fs, .85) * 1rem);
}

/* Пометки. Круг освободил углы ячейки — ставим их туда, а не на
   изображение, как было до пластинок. Числа не показываем: владелец
   просил убрать счётчики в версии 31. */
.fx-shelf,
.fx-said {
  position: absolute;
  top: -2px;
  z-index: 4;
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #14151b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .6);
  line-height: 1;
}
.fx-shelf {
  right: -2px;
  color: rgba(201, 162, 39, .95);
  font-size: 11px;
  font-weight: 700;
}
.fx-said {
  left: -2px;
  font-family: 'PT Serif', Georgia, serif;
  font-size: 15px;
  color: rgba(201, 162, 39, .95);
  padding-bottom: 2px;
}

/* ---------- отклик ---------- */

.fx-item:hover .fx-disc,
.fx-item:focus-visible .fx-disc {
  transform: translateY(-3px) scale(1.035);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .65),
    inset 0 0 24px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(255, 255, 255, .12);
}
/* Крутится только та пластинка, на которую навели. */
.fx-item:hover .fx-apple,
.fx-item:focus-visible .fx-apple {
  animation: fx-spin 9s linear infinite;
}
@keyframes fx-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.fx-item:focus-visible { outline: none; }
.fx-item:focus-visible .fx-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .fx-disc { transition: none; }
  .fx-item:hover .fx-disc,
  .fx-item:focus-visible .fx-disc { transform: none; }
  .fx-item:hover .fx-apple,
  .fx-item:focus-visible .fx-apple { animation: none; }
}

/* ---------- снимок в карточке записи ---------- */

.fx-hero {
  position: relative;
  margin: 0 0 16px;
  border-radius: 9px;
  overflow: hidden;
  max-width: 420px;
  background: #17141f;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.fx-hero img {
  width: 100%;
  display: block;
  max-height: 340px;
  object-fit: cover;
}
.fx-hero-src {
  padding: 7px 12px 9px;
  font-size: .75rem;
  line-height: 1.4;
  color: #8f889f;
  background: rgba(12, 10, 17, .7);
}
.fx-hero-src a {
  color: #a9a2bb;
  text-decoration: none;
  border-bottom: 1px solid rgba(169, 162, 187, .35);
}
.fx-hero-src a:hover { color: #d8d2e6; }

@media (max-width: 700px) {
  .fx-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 18px 12px;
  }
  /* Кегль зависит от названия и приходит переменной, поэтому здесь
     умножаем его на 0,8, а не назначаем заново. */
  .fx-name { font-size: calc(var(--fx-fs, .85) * .8rem); }
  .fx-shelf, .fx-said { width: 16px; height: 16px; }
  .fx-shelf { font-size: 10px; }
  .fx-said { font-size: 13px; }
  .fx-hero { max-width: 100%; }
}

/* ---------- ширина раздела в калитке ---------- */

/* Замер показал беду: сетка плиток получала 164 точки ширины, и в ряд
   влезало три плитки, а справа зияло пустое поле. Виновата раскладка
   самой калитки — там «.app» оказался шириной 552 точки при окне 1340,
   и «.main» внутри него сжимался до 164, хотя правило «flex:1» у него
   есть.

   Задаём ширину прямо, и только внутри калитки: на остальных страницах
   раскладка работает как надо, и трогать её незачем. */
.balloons-view .app {
  width: 100%;
  max-width: 1300px;
  box-sizing: border-box;
}
.balloons-view .main {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}