/* Вертикальные миниатюры и превью в модальных окнах */
/* Подключение: <link rel="stylesheet" href="./modal-portrait.css"> после основных стилей */

:root{ --portrait-aspect: 3/4; } /* можно поменять на 3/4 или 4/5 */

/* ====== Сетка пресетов в модалке «Контейнер» ====== */
dialog .thumb-grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
}

dialog .thumb-option{
  position:relative; overflow:hidden; border-radius:10px;
  border:1px solid var(--border); background:var(--chip-bg);
  width:100%; aspect-ratio:var(--portrait-aspect);
  padding:0; cursor:pointer;
  transition:transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}

dialog .thumb-option img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}

dialog .thumb-option:hover{ transform:translateY(-1px); }

dialog .thumb-option.active,
dialog .thumb-option:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
  border-color:transparent; box-shadow:0 0 0 4px color-mix(in oklab, var(--accent), transparent 70%);
}

/* ====== Превью выбранной миниатюры ====== */
dialog .thumb-preview{ width:160px; aspect-ratio:var(--portrait-aspect); border-radius:12px; overflow:hidden; }
#thumb-preview{ width:100% !important; height:100% !important; object-fit:cover; display:block; }

/* ====== Универсально: любые .thumb в модалках делаем вертикальными ====== */
dialog .thumb{ aspect-ratio:var(--portrait-aspect) !important; }

/* Компакт на очень узких экранах */
@media (max-width:420px){ dialog .thumb-grid{ grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); } }