/* Articles module styles.
   Moved from app.css to keep module-specific styles together. */

/* Article form editor and attachment uploader.
   Used in: app/Modules/Articles/Views/articles/form.php */
.article-form-editor {
  min-height: 300px;
}

.article-dropzone {
  cursor: pointer;
  transition: background 0.15s;
}

.article-dropzone-label-link {
  cursor: pointer;
}

.article-attachment-thumb-image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
}

.article-attachment-thumb-file {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  font-size: 1.5rem;
}

/* Article details: content typography and gallery.
   Used in: app/Modules/Articles/Views/articles/show.php */
.article-gallery-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.article-file-thumb-image {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.article-file-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.article-content .ql-align-center { text-align: center; }
.article-content .ql-align-right { text-align: right; }
.article-content .ql-align-justify { text-align: justify; }
.article-content .ql-direction-rtl { direction: rtl; }
.article-content {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #212529;
}

/* Prevent breaking words mid-word: prefer breaking between words only */
.card-body.article-content,
.article-content {
  /* Prefer breaking between words, but allow breaking anywhere if a token is too long */
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: none !important;
}

/* Force wrapping for any long tokens inside article content while keeping
   pre/code blocks intact. This helps when the editor outputs long tokens or
   unbreakable spans. */
.article-content, .article-content * {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.article-content pre,
.article-content code,
.article-content pre *,
.article-content code * {
  white-space: pre !important;
  overflow: auto !important;
}
.article-content h1, .article-content h2,
.article-content h3, .article-content h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.article-content p { margin-bottom: 1rem; }
.article-content ul,
.article-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
/* Ensure correct marker types for lists rendered from Quill/article content */
.article-content ul { list-style-type: disc; list-style-position: outside; }
.article-content ol { list-style-type: decimal; list-style-position: outside; }
.article-content li { margin-bottom: 0.25rem; }
.article-content blockquote {
  border-left: 4px solid #adb5bd;
  padding-left: 1rem;
  margin-left: 0;
  color: #6c757d;
  font-style: italic;
}
.article-content pre {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
  overflow-x: auto;
}
.article-content code {
  background: #f8f9fa;
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}
.article-content img {
  /* Allow inline images so multiple images can sit side-by-side when small.
     Keep responsiveness via max-width but do not force block layout. */
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin: 0.5rem;
  border-radius: 0.375rem;
  cursor: zoom-in;
}

/* Allow alignment classes from Quill to position images in rendered articles */
.article-content .ql-align-left img,
.article-content .ql-align-left > img { margin-left: 0; margin-right: auto; display: inline-block; }
.article-content .ql-align-center img,
.article-content .ql-align-center > img { margin-left: auto; margin-right: auto; display: inline-block; }
.article-content .ql-align-right img,
.article-content .ql-align-right > img { margin-left: auto; margin-right: 0; display: inline-block; }
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.article-content th,
.article-content td {
  border: 1px solid #dee2e6;
  padding: 0.5rem 0.75rem;
}
.article-content th { background: #f8f9fa; font-weight: 600; }
.article-content a { color: #0d6efd; }
.article-content a:hover { text-decoration: underline; }