/* «Образ 2×2» (look2x2-27, доски 20-24 страницы «06 · Правки 27.09»): одна сетка образа на все экраны (js/look-grid.js).
   Подключается после styles.css и кладёт правила в те же пласты. Проміжок, радиус клетки и поле вещи растут вместе
   с сеткой (единицы контейнера): 6 / 14 / 9 при 288 px, 4 / 10 / 5 при 179, 2 / 4 / 1 при 44. Размер и пропорцию
   сетки задаёт экран, где она стоит (его CSS); здесь только сама сетка. */

/* поле вещи и радиус клетки считаются один раз на сетку (от её размера) и наследуются клетками как длина */
@property --lg-p { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --lg-r { syntax: '<length>'; inherits: true; initial-value: 0px; }

/* ========================================================================== tokens */
@layer tokens {
  :root {
    --lg-cell: #F4EFE8;            /* клетка на светлой поверхности карточки (доска 20) */
    --lg-cell-glass: #F7F4EF;      /* клетка в стекле зеркала «Сьогодні» (доска 21) */
    --lg-gap-min: 2px;             /* проміжок: 0,7 + 1,84 % стороны (4 при 179, 6 при 288), от 2 до 6 */
    --lg-gap-base: 0.7px;
    --lg-gap-k: 1.84;
    --lg-gap-max: 6px;
    --lg-r-min: 4px;               /* радиус клетки: 3,4 + 3,67 % стороны (10 при 179, 14 при 288), от 4 до 14 */
    --lg-r-base: 3.4px;
    --lg-r-k: 3.67;
    --lg-r-max: 14px;
    --lg-p-min: 1px;               /* поле вокруг вещи: 3 % стороны, от 1 до 11 */
    --lg-p-k: 3;
    --lg-p-max: 11px;
    --lg-pair: 62%;                /* две вещи в одной клетке (куртка и верх): каждая в 62 % ширины, чуть внахлёст */
    --lg-trio: 46%;
    --lg-fade: 34px;               /* лямка сумки гаснет у верхнего края: не выше 34 px и 28 % клетки */
    --lg-fade-k: 28;
    --lg-body-room: 3.2;           /* тело сумки по высоте: клетка минус 3,2 поля (над телом место под лямку) */
    --lg-badge-at: 6px;            /* значки «1 з 10» и «твоя сумка» от угла клетки */
    --lg-shadow: drop-shadow(1px 2px 4px rgb(var(--shadow-rgb) / .14));
    --lg-shadow-s: drop-shadow(0 1px 1.5px rgb(var(--shadow-rgb) / .14));
    --lg-sel: 2px;                 /* рамка вещи, которую сейчас меняют */
  }
}

/* ========================================================================== components */
@layer components {
  .k-lg {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    container-type: size;
  }
  .k-lg__g {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--lg-gap-min), calc(var(--lg-gap-base) + var(--lg-gap-k) * 1cqmin), var(--lg-gap-max));
    --lg-p: clamp(var(--lg-p-min), calc(var(--lg-p-k) * 1cqmin), var(--lg-p-max));
    --lg-r: clamp(var(--lg-r-min), calc(var(--lg-r-base) + var(--lg-r-k) * 1cqmin), var(--lg-r-max));
  }
  .k-lg__cell {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--lg-r);
    background: var(--lg-cell);
  }
  .k-lg--glass .k-lg__cell { background: var(--lg-cell-glass); }
  .k-lg__cell[data-area="tl"] { grid-area: 1 / 1; }
  .k-lg__cell[data-area="tr"] { grid-area: 1 / 2; }
  .k-lg__cell[data-area="bl"] { grid-area: 2 / 1; }
  .k-lg__cell[data-area="br"] { grid-area: 2 / 2; }
  .k-lg__cell[data-area="l"] { grid-area: 1 / 1 / 3 / 2; }
  .k-lg__cell[data-area="r"] { grid-area: 1 / 2 / 3 / 3; }
  .k-lg__cell[data-area="all"] { grid-area: 1 / 1 / 3 / 3; }

  /* вещь: коробка во всю клетку (или в её долю, если вещей в клетке две-три), картинка целиком с полем */
  .k-lg__it {
    position: absolute;
    inset: 0;
    display: block;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: var(--lg-r);
    background: none;
    color: inherit;
    container-type: size;
  }
  .k-lg__cell[data-k="2"] > .k-lg__it:nth-child(1) { right: calc(100% - var(--lg-pair)); }
  .k-lg__cell[data-k="2"] > .k-lg__it:nth-child(2) { left: calc(100% - var(--lg-pair)); }
  .k-lg__cell[data-k="3"] > .k-lg__it:nth-child(1) { right: calc(100% - var(--lg-trio)); }
  .k-lg__cell[data-k="3"] > .k-lg__it:nth-child(2) { left: calc((100% - var(--lg-trio)) / 2); right: calc((100% - var(--lg-trio)) / 2); }
  .k-lg__cell[data-k="3"] > .k-lg__it:nth-child(3) { left: calc(100% - var(--lg-trio)); }
  button.k-lg__it.is-sel { box-shadow: inset 0 0 0 var(--lg-sel) var(--acc); }
  :root[data-kbd] button.k-lg__it:focus-visible { outline: var(--lg-sel) solid var(--acc); outline-offset: calc(-1 * var(--lg-sel)); }
  .k-lg__img {
    position: absolute;
    left: var(--lg-p);
    top: var(--lg-p);
    width: calc(100% - 2 * var(--lg-p));
    height: calc(100% - 2 * var(--lg-p));
    object-fit: contain;
    object-position: 50% 50%;
    filter: var(--lg-shadow);
    -webkit-user-drag: none;
    pointer-events: none;
  }
  .k-lg__img--photo { filter: none; }
  @container (max-width: 40px) {
    .k-lg__img { filter: var(--lg-shadow-s); }
  }

  /* сумка с лямкой длиннее самой сумки (доска 24): тело на всю клетку, прижато к низу с полем, лямка уходит
     за верхний край и гаснет; масштаб по телу: min((клетка - 2 поля) / тело, (высота - 3,2 поля) / тело) */
  .k-lg__crop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black min(var(--lg-fade), calc(var(--lg-fade-k) * 1cqh)));
    mask-image: linear-gradient(to bottom, transparent, black min(var(--lg-fade), calc(var(--lg-fade-k) * 1cqh)));
  }
  .k-lg__img--body {
    --iw: min((100cqw - 2 * var(--lg-p)) / var(--bw), (100cqh - var(--lg-body-room) * var(--lg-p)) * var(--ar) / var(--bh));
    left: calc(50cqw - (var(--bx) + var(--bw) / 2) * var(--iw));
    top: calc(100cqh - var(--lg-p) - (var(--by) + var(--bh)) * var(--iw) / var(--ar));
    width: var(--iw);
    height: calc(var(--iw) / var(--ar));
    object-fit: fill;
  }

  /* значки: «1 з 10» в левом верхнем углу сетки, «твоя сумка» в углу клетки её вещи */
  .k-lg__count, .k-lg__anchor { position: absolute; top: var(--lg-badge-at); left: var(--lg-badge-at); z-index: 1; pointer-events: none; }
  .k-lg__anchor--end { left: auto; right: var(--lg-badge-at); }

  /* образ, от которого она отказалась: вещи бледнее */
  .is-rejected .k-lg__img { opacity: .45; }
}