/*
 * Поле зображення з кадруванням.
 *
 * Дві колонки: запис і те, у що він перетвориться. Превʼю не малює власну версію картки — воно
 * бере production-класи (`fs-company-news--hero`, `fs-company-news-grid__card`), тому «як буде
 * виглядати» і «як виглядає» тримає один стилевий файл, а не дві копії, що розходяться.
 *
 * Права колонка має сталу ширину телефона: превʼю, звужене під колонку, показувало б не той
 * кадр, який побачить користувач, а «приблизно такий».
 */
/*
 * Діалог, який несе поле зображення, розширюється під нього: стандартні 680px лишають запису
 * колонку, у якій не поміщається навіть рядок вибору файлу, а звужувати превʼю не можна — саме
 * його ширина і є змістом превʼю.
 */
.fs-dialog:has(.fs-image-frame) {
  width: min(1020px, calc(100vw - (2 * var(--fs-space-4))));
}

.fs-image-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--fs-space-5);
  align-items: start;
  min-width: 0;
}

.fs-image-frame__fields {
  display: grid;
  align-content: start;
  gap: var(--fs-space-3);
  min-width: 0;
}

.fs-image-frame__control {
  display: flex;
  align-items: flex-end;
  gap: var(--fs-space-2);
  min-width: 0;
}

.fs-image-frame__control .fs-file-field {
  flex: 1 1 auto;
  min-width: 0;
}

.fs-image-frame__aside {
  min-width: 0;
}

/* У колонці превʼю стоять одне під одним; коли колонка зникає — рядком, що переноситься. */
.fs-image-frame__previews {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--fs-space-4);
}

/*
 * Превʼю не розтягується і не стискається під колонку: телефон, звужений до ширини форми, показує
 * не той кадр, який побачить користувач. Єдиний виняток — екран, вужчий за сам телефон, де інакше
 * сторінка поїхала б горизонтально.
 */
.fs-image-frame__preview {
  display: grid;
  flex: 0 1 auto;
  gap: var(--fs-space-2);
  margin: 0;
  width: min(340px, 100%);
}

.fs-image-frame__caption {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Телефон показано в його власній ширині. */
.fs-image-frame__phone {
  width: 100%;
  overflow: hidden;
  background: var(--fs-color-canvas);
  border: 1px solid var(--fs-color-border);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-sm);
}

/* Край аркуша головної заходить на низ фото — превʼю показує і цей зріз. */
.fs-image-frame__sheet {
  position: relative;
  z-index: 1;
  height: 26px;
  margin-top: -16px;
  background: var(--fs-color-canvas);
  border-radius: 22px 22px 0 0;
}

.fs-image-frame__tile {
  width: min(260px, 100%);
}

/*
 * Production-класи підпису задають `display`, тому атрибут `hidden` сам по собі їх не ховає:
 * у превʼю порожній підпис мусить зникати, а не займати рядок нульової висоти з відступом.
 */
[data-image-frame-preview-title][hidden],
[data-image-frame-preview-summary][hidden],
[data-image-frame-preview-copy][hidden] {
  display: none;
}

/* Сцена зʼявляється лише коли є що кадрувати: порожня рамка нічого не пояснює. */
.fs-image-frame__editor {
  display: grid;
  gap: var(--fs-space-3);
  min-width: 0;
}

.fs-image-frame__editor[hidden] {
  display: none;
}

/*
 * Сцена має пропорцію кадру, тому те, що видно тут, і є те, що піде на сервер: жодного
 * додаткового обрізання під час показу.
 */
.fs-image-frame__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fs-color-surface-subtle);
  border: 1px solid var(--fs-color-border);
  border-radius: var(--fs-radius-md);
  cursor: grab;
  touch-action: none;
}

.fs-image-frame__stage:active {
  cursor: grabbing;
}

.fs-image-frame__stage:focus-visible {
  outline: 0;
  border-color: var(--fs-color-primary);
  box-shadow: var(--fs-focus-ring);
}

.fs-image-frame__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Третини — підказка композиції, а не рамка: вони не мають перемагати саме фото. */
.fs-image-frame__stage::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent calc(33.33% - 1px), rgb(255 255 255 / 26%) calc(33.33% - 1px),
      rgb(255 255 255 / 26%) 33.33%, transparent 33.33%),
    linear-gradient(to right, transparent calc(66.66% - 1px), rgb(255 255 255 / 26%) calc(66.66% - 1px),
      rgb(255 255 255 / 26%) 66.66%, transparent 66.66%),
    linear-gradient(to bottom, transparent calc(33.33% - 1px), rgb(255 255 255 / 26%) calc(33.33% - 1px),
      rgb(255 255 255 / 26%) 33.33%, transparent 33.33%),
    linear-gradient(to bottom, transparent calc(66.66% - 1px), rgb(255 255 255 / 26%) calc(66.66% - 1px),
      rgb(255 255 255 / 26%) 66.66%, transparent 66.66%);
  content: "";
  pointer-events: none;
}

.fs-image-frame__zoom {
  display: flex;
  align-items: center;
  gap: var(--fs-space-3);
}

.fs-image-frame__zoom-slider {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.fs-image-frame__zoom-value {
  flex: 0 0 auto;
  min-width: 52px;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fs-image-frame__zoom input[type="range"] {
  display: block;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.fs-image-frame__zoom input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--fs-color-border);
  border-radius: 999px;
}

.fs-image-frame__zoom input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--fs-color-border);
  border-radius: 999px;
}

.fs-image-frame__zoom input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6px;
  background: var(--fs-color-primary);
  border: 0;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
}

.fs-image-frame__zoom input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--fs-color-primary);
  border: 0;
  border-radius: 999px;
}

.fs-image-frame__zoom input[type="range"]:focus-visible {
  outline: 0;
  border-radius: 999px;
  box-shadow: var(--fs-focus-ring);
}

.fs-image-frame__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
}

.fs-image-frame__note {
  margin: 0;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  line-height: 1.45;
}

/*
 * Вузьке вікно: превʼю стає рядом під записом, а не колонкою поруч. Телефон при цьому лишається
 * тієї самої ширини — саме вона є змістом превʼю. Поріг узятий від ширини діалогу, у якому поле
 * живе, а не від довільного breakpoint сторінки.
 */
@media (max-width: 1000px) {
  .fs-image-frame {
    grid-template-columns: minmax(0, 1fr);
  }

  .fs-image-frame__previews {
    flex-direction: row;
  }
}

@media (max-width: 560px) {
  .fs-image-frame__control {
    align-items: stretch;
    flex-direction: column;
  }

  .fs-image-frame__previews {
    gap: var(--fs-space-3);
  }
}