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

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

   Соотношения заданы переменными: поменять формат везде = поменять две строки здесь
   и две константы в app/media.py (LOGO_CANVAS, PORTRAIT_BOX). */

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

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

/* Плашка держит формат, логотип вписывается внутрь с полем.
   Поле задано размером самой картинки, а НЕ padding'ом у плашки: процент в padding
   считается от ширины РОДИТЕЛЯ, и там, где плашка уже своего контейнера, поле
   раздувалось на всю плашку и логотип пропадал (поймано 06.10 на карточке галереи ARCOO).
   В max-width/max-height проценты считаются от самой плашки — поле всегда ровно 8 %,
   по ширине от её ширины, по высоте от её высоты, как в logo_std.PAD_RATIO.
   width/height: auto, а не 100% — иначе узкий логотип растянулся бы и потерял пропорции. */
.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; }

/* --- окно выбора видимой области при загрузке фото ---------------------- */

.ag-crop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center;
  justify-content: center; padding: 16px; background: rgba(12, 12, 12, .82); }
.ag-crop__box { display: flex; flex-direction: column; gap: 14px; width: min(560px, 100%);
  max-height: 92vh; padding: 20px; background: #fff; color: #14181f; border-radius: 4px; }
.ag-crop__hint { margin: 0; font-size: .86rem; line-height: 1.45; opacity: .75; }
.ag-crop__stage { flex: 1 1 auto; min-height: 0; max-height: 62vh; background: #f1efe9; }
.ag-crop__stage img { display: block; max-width: 100%; }
.ag-crop__actions { display: flex; gap: 10px; justify-content: flex-end; }
.ag-crop__actions button { min-height: 40px; padding: 0 18px; border: 2px solid #14181f;
  background: #fff; font: 700 11px/1 inherit; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.ag-crop__actions button[data-ok] { background: #14181f; color: #fff; }
/* рамка выбора сама держит формат — пропорции меняться не должны */
.ag-crop .cropper-view-box, .ag-crop .cropper-face { outline-color: #14181f; }