/* Task 1324 — show real media at its authored position in the continuous editor. */
.operator-topic-update-form .lesson-inline-media {
  margin: .45rem 0;
  max-width: 100%;
}

.operator-topic-update-form .lesson-inline-media-frame {
  align-items: flex-start;
  display: flex;
  gap: .45rem;
  max-width: 100%;
}

.operator-topic-update-form .lesson-inline-media-content {
  background: rgba(249, 245, 238, .72);
  border: 1px solid rgba(80, 47, 35, .14);
  border-radius: 10px;
  box-sizing: border-box;
  max-width: min(520px, calc(100% - 48px));
  min-width: 0;
  overflow: hidden;
  padding: .4rem;
  width: 100%;
}

.operator-topic-update-form .lesson-inline-media[data-alignment="left"] .lesson-inline-media-frame { justify-content: flex-start; }
.operator-topic-update-form .lesson-inline-media[data-alignment="center"] .lesson-inline-media-frame { justify-content: center; }
.operator-topic-update-form .lesson-inline-media[data-alignment="right"] .lesson-inline-media-frame { justify-content: flex-end; }

.operator-topic-update-form .lesson-inline-media :is(img, video, iframe) {
  border: 0;
  border-radius: 7px;
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

.operator-topic-update-form .lesson-inline-media iframe,
.operator-topic-update-form .lesson-inline-media video { aspect-ratio: 16 / 9; }
.operator-topic-update-form .lesson-inline-media audio { display: block; max-width: 100%; width: 100%; }
.operator-topic-update-form .lesson-inline-media-file { color: #4c3d32; display: block; overflow-wrap: anywhere; padding: .65rem; }

.operator-topic-update-form .lesson-inline-media-delete {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(139, 56, 38, .34);
  border-radius: 999px;
  color: #8b3826;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 40px;
  font: inherit;
  font-size: 1.25rem;
  height: 40px;
  justify-content: center;
  padding: 0;
  width: 40px;
}

.operator-topic-update-form .lesson-inline-media-delete:is(:hover, :focus-visible) {
  background: #fff4f0;
  outline: 2px solid rgba(139, 56, 38, .45);
  outline-offset: 2px;
}

.operator-topic-update-form .lesson-inline-alignment {
  display: flex;
  gap: .35rem;
  justify-content: center;
  margin-top: .4rem;
}

.operator-topic-update-form .lesson-inline-alignment button {
  background: #fff;
  border: 1px solid rgba(80, 47, 35, .22);
  border-radius: 7px;
  color: #4c3d32;
  cursor: pointer;
  font: inherit;
  min-height: 38px;
  padding: .35rem .65rem;
}

.operator-topic-update-form .lesson-inline-alignment button[aria-pressed="true"] {
  background: #704c38;
  border-color: #704c38;
  color: #fff;
}

/* Persistence controls stay in the DOM for multipart submission and remain
   visible when JavaScript is unavailable or server validation needs attention. */
.operator-topic-update-form .lesson-block-list .is-composer-media-source:not(.has-block-errors) {
  display: none;
}

.lesson-page .lesson-authored-figure.lesson-media-align-left { margin-left: 0; margin-right: auto; }
.lesson-page .lesson-authored-figure.lesson-media-align-center { margin-left: auto; margin-right: auto; }
.lesson-page .lesson-authored-figure.lesson-media-align-right { margin-left: auto; margin-right: 0; }
.lesson-page .lesson-media-align-left .lesson-inline-figure,
.lesson-page .yen-docx-figure.lesson-media-align-left { margin-left: 0; margin-right: auto; }
.lesson-page .lesson-media-align-center .lesson-inline-figure,
.lesson-page .yen-docx-figure.lesson-media-align-center { margin-left: auto; margin-right: auto; }
.lesson-page .lesson-media-align-right .lesson-inline-figure,
.lesson-page .yen-docx-figure.lesson-media-align-right { margin-left: auto; margin-right: 0; }

@media (max-width: 720px) {
  .operator-topic-update-form .lesson-inline-media-content { max-width: calc(100% - 44px); }
  .operator-topic-update-form .lesson-inline-media-delete { flex-basis: 40px; }
  .operator-topic-update-form .lesson-inline-alignment { flex-wrap: wrap; }
  .operator-topic-update-form .lesson-inline-alignment button { flex: 1 1 80px; }
}