/**
 * @file
 * Widget Tailwind Styles for CKEditor 5 in Drupal.
 */

/* Two Column Layout */
.fire-tw-2-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 1rem 0;
}

@media (min-width: 768px) {
  .fire-tw-2-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Three Column Layout */
.fire-tw-3-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 1rem 0;
}

@media (min-width: 768px) {
  .fire-tw-3-col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Sidebar Layout */
.fire-tw-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 1rem 0;
}

@media (min-width: 1024px) {
  .fire-tw-sidebar {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Column Styles */
.fire-tw-col {
  padding: 1rem;
  min-height: 50px;
}

/* Sidebar specific column spans */
.fire-tw-sidebar .fire-tw-col-1 {
  grid-column: span 1;
}

.fire-tw-sidebar .fire-tw-col-sidebar {
  grid-column: span 1;
}

@media (min-width: 768px) {
  .fire-tw-sidebar .fire-tw-col-1 {
    grid-column: span 2;
  }
  
  .fire-tw-sidebar .fire-tw-col-sidebar {
    grid-column: span 1;
  }
}

/* Editor-specific styles (only visible in CKEditor editing view) */
.ck-editor__editable .fire-tw-col {
  border: 1px dashed #ccc;
  border-radius: 4px;
  transition: border-color 0.2s ease;
}

.ck-editor__editable .fire-tw-col:hover {
  border-color: #999;
}

.ck-editor__editable .fire-tw-col:focus-within {
  border-color: #1b8edc;
  border-style: solid;
}

/* Widget container in editor */
.ck-editor__editable .fire-tw-2-col,
.ck-editor__editable .fire-tw-3-col,
.ck-editor__editable .fire-tw-sidebar {
  border: 2px dashed #e0e0e0;
  padding: 0.5rem;
  border-radius: 4px;
  position: relative;
}

/* Ensure content is editable */
.ck-editor__editable .fire-tw-col p:first-child {
  margin-top: 0;
}

.ck-editor__editable .fire-tw-col p:last-child {
  margin-bottom: 0;
}

/* Front-end display - remove editor-specific borders */
.fire-tw-col {
  border: none;
}