/*
 * Action Text overrides and gallery styles for Trix editor
 * Note: Trix base styles are loaded via CDN in layouts
*/

/*
 * We need to override trix.css's image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

trix-editor {
  min-height: 200px;
}

@media (min-width: 1024px) {
  trix-editor {
    min-height: 400px;
  }
}

/* Code blocks inside Trix / Action Text */
.trix-content pre,
trix-editor pre {
  background: #0f172a;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  padding: 1.25rem 1.5rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  white-space: pre;
  margin: 1rem 0;
}

/* Full-width responsive video embeds inside Trix / Action Text */
.trix-content iframe,
.trix-content video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
}

.trix-content .attachment--video,
.trix-content .attachment--preview {
  width: 100%;
  max-width: 100%;
}