/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Markdown styling for block content */

/* Ensure display and edit modes are perfectly aligned */
.block-content {
  min-height: 1.5rem;
  line-height: 1.5;
  font-size: 1rem;
}

.block-content p:first-child {
  margin-top: 0;
}

.block-content p:last-child {
  margin-bottom: 0;
}

.block-content h1 {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 2.25rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.block-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.block-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.block-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.block-content h5, .block-content h6 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.block-content p {
  margin: 0 !important;
  padding: 0 !important;
  display: inline !important;
  line-height: inherit !important;
}

/* Ensure no extra spacing from markdown-generated elements */
.block-content > p:only-child {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.block-content strong {
  font-weight: 600;
}

.block-content em {
  font-style: italic;
}

.block-content code {
  background-color: #f3f4f6;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
  color: #1f2937;
}

.block-content pre {
  background-color: #f3f4f6;
  color: #1f2937;
  padding: 1rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid #e5e7eb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.block-content pre code {
  background-color: transparent;
  padding: 0;
  color: #1f2937;
  font-size: 0.875rem;
  font-family: inherit;
}

.block-content ul, .block-content ol {
  margin-left: 1.5rem;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.block-content ul {
  list-style-type: disc;
}

.block-content ol {
  list-style-type: decimal;
}

.block-content li {
  margin-top: 0;
  margin-bottom: 0;
}

.block-content blockquote {
  border-left: 4px solid #e5e7eb;
  padding-left: 1rem;
  color: #6b7280;
  font-style: italic;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.block-content table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.block-content th, .block-content td {
  border: 1px solid #e5e7eb;
  padding: 0.5rem;
  text-align: left;
}

.block-content th {
  background-color: #f3f4f6;
  font-weight: 600;
}

.block-content hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* File attachment styles */
.block-attachments {
  margin-left: 0;
}

/* Drag-over state */
.drag-over {
  background-color: rgba(99, 102, 241, 0.1) !important;
  border-color: #6366f1 !important;
}

/* Drag and drop styles */
.drag-handle {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}

/* Prevent text selection during drag */
.sortable-drag {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Ghost element style */
.sortable-ghost {
  opacity: 0.4;
  background-color: #e0e7ff;
}

/* Element being dragged */
.sortable-drag {
  opacity: 0.8;
}

/* Image gallery styles */
.image-gallery.prominent {
  width: 100%;
}

/* Single image - full width */
.image-gallery .images-container.single-image {
  display: block;
  width: 100%;
}

.image-gallery .images-container.single-image .image-item {
  width: 100%;
}

.image-gallery .images-container.single-image img {
  width: 100%;
  height: auto;
  max-height: none;
}

/* Grid layout for multiple images */
.image-gallery.compact .images-container.grid {
  display: grid;
  gap: 0.5rem;
}

.image-gallery .images-container.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.image-gallery.prominent .images-container.grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media (max-width: 640px) {
  .image-gallery .images-container.grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .image-gallery .images-container.grid {
    grid-template-columns: repeat(2, 1fr);
  }
}