/* Единый стандарт вывода логотипов и фотографий людей — тот же, что на всех сайтах
   платформы AG (зеркало app/static/css/media-std.css).
   Распоряжение Антона 06.10.2026 (карточка 2026-10-06-023),
   описание — docs/стандарт-логотипов-и-фото.md в корне ag-praktiki.

   Два правила, других форматов нет:
   1. ЛОГОТИП — альбомная плашка 2:1 (как лента партнёров на air2026.ru) и object-fit:contain.
      Логотип никогда не обрезается: ни один символ не пропадает. Поля вокруг надписи
      убираются при загрузке (media_std.process_logo), а не рамкой на странице.
   2. ФОТО ЧЕЛОВЕКА — вертикальный кадр 3:4 и object-fit:cover с привязкой к верху:
      что бы ни случилось с пропорциями, голова остаётся в кадре.

   Соотношения заданы переменными: поменять формат везде = поменять две строки здесь
   и две константы в app/media_std.py (PRESETS["logo"], PRESETS["avatar"]). */

:root {
  --ag-logo-ar: 2 / 1;      /* плашка логотипа */
  --ag-portrait-ar: 3 / 4;  /* кадр фотографии человека */
  --ag-logo-air: 8%;        /* поле вокруг логотипа, доля стороны плашки */
  --ag-logo-fill: 55%;      /* «логотип занимает примерно треть плашки» — просьба Андрея (55 % × 55 %) */
}

/* --- логотип ------------------------------------------------------------ */

/* Плашка: сам элемент держит формат, логотип вписывается внутрь с полем.
   max-width/max-height в процентах от плашки, а не width:100% — иначе узкий
   логотип растянулся бы по ширине и потерял пропорции.

   Поле задано не padding’ом, а размером самой картинки. Процент в padding
   считается от ширины РОДИТЕЛЯ, а не от плашки: при padding:8% плашка внутри
   широкой секции получала поле в сотню точек и логотип пропадал совсем
   (поймано на /galleries/… 06.10.2026). У max-width/max-height процент
   считается от самой плашки, поэтому поле всегда ровно 8 % её стороны. */
.ag-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--ag-logo-ar);
  box-sizing: border-box;
  overflow: hidden;
}
.ag-logo > img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * var(--ag-logo-air));
  max-height: calc(100% - 2 * var(--ag-logo-air));
  object-fit: contain;
}

/* Версия с воздухом: логотип занимает примерно треть площади плашки
   (просьба Андрея 06.10.2026 про каталог организаторов d-fest). */
.ag-logo--air > img { max-width: var(--ag-logo-fill); max-height: var(--ag-logo-fill); }

/* --- фотография человека ------------------------------------------------ */

.ag-portrait {
  display: block;
  width: 100%;
  aspect-ratio: var(--ag-portrait-ar);
  object-fit: cover;
  object-position: center top;
}

/* Заглушка «фото нет» — того же формата, чтобы сетка не прыгала. */
.ag-portrait-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: var(--ag-portrait-ar);
}

/* Маленький портрет в списках и строках таблиц: тот же формат, фиксированная высота. */
.ag-portrait--xs { width: auto; height: 56px; }
.ag-portrait--sm { width: auto; height: 72px; }
.ag-portrait--md { width: auto; height: 96px; }