/* =========================================================
   Custom Rich Text Editor (Admin)
   ========================================================= */

.rte-wrapper{
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

/* Toolbar ------------------------------------------------ */
.rte-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px 8px;
  border-bottom:1px solid #e5e7eb;
  background:#f9fafb;
}

.rte-toolbar button{
  border:1px solid #d1d5db;
  background:#fff;
  border-radius:6px;
  padding:4px 8px;
  font-size:12px;
  cursor:pointer;
  line-height:1.2;
}

.rte-toolbar button:hover{ background:#f3f4f6; }
.rte-toolbar button.active{ background:#e5e7eb; }

/* Editor area ------------------------------------------- */
.rte-editor{
  padding:12px;
  min-height:180px;
  max-height:420px;
  overflow-y:auto;
  font-size:14px;
  line-height:1.6;
}

.rte-editor:focus{ outline:none; }

/* Lists */
.rte-editor ul,
.rte-editor ol{
  padding-left:1.25rem;
  margin:6px 0;
}

/* Blockquote */
.rte-editor blockquote{
  border-left:4px solid #e5e7eb;
  margin:8px 0;
  padding:6px 12px;
  color:#4b5563;
  background:#f9fafb;
  border-radius:8px;
  font-style:italic;
}

/* Headings ---------------------------------------------- */
.rte-editor h1{ font-size:1.5rem; font-weight:700; margin:.6rem 0; }
.rte-editor h2{ font-size:1.25rem; font-weight:700; margin:.55rem 0; }
.rte-editor h3{ font-size:1.1rem; font-weight:600; margin:.45rem 0; }
.rte-editor h4{ font-size:1rem; font-weight:600; margin:.4rem 0; }
.rte-editor h5{ font-size:.9rem; font-weight:600; margin:.35rem 0; }
.rte-editor h6{ font-size:.85rem; font-weight:600; color:#374151; margin:.3rem 0; }

/* Links */
.rte-editor a{
  color:#2563eb;
  text-decoration:underline;
}

/* Default images (for plain <img> not wrapped) */
.rte-editor img{
  max-width:100%;
  height:auto;
  border-radius:10px;
  margin:8px 0;
}

/* Code --------------------------------------------------- */
.rte-editor pre{
  padding:12px;
  border-radius:10px;
  background:#0b1020;
  color:#e5e7eb;
  overflow:auto;
  margin:10px 0;
}

.rte-editor code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,
               "Liberation Mono","Courier New",monospace;
  font-size:13px;
}

/* Inline code (non-pre) */
.rte-editor p code,
.rte-editor li code{
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  padding:2px 6px;
  border-radius:6px;
  color:#111827;
}

/* =========================================================
   RTE image blocks (EDITOR ONLY)
   IMPORTANT: scoped to .rte-editor so frontend can't resize
   ========================================================= */

.rte-editor .rte-img{
  display:inline-block;
  max-width:100%;
  border:1px dashed #e5e7eb;
  border-radius:10px;
  padding:6px;
  background:#fff;
  vertical-align:middle;

  /* ✅ resize handle in editor only */
  resize: both;
  overflow: auto;

  /* ✅ better UX */
  min-width: 120px;
  min-height: 80px;
}

.rte-editor .rte-img img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;

  /* override default .rte-editor img margin */
  margin: 0;

  pointer-events:none;
  user-select:none;
}

.rte-editor .rte-img.block{
  display:block;
  margin:10px 0;
}

.rte-editor .rte-img.inline{
  display:inline-block;
  margin:0 6px 6px 0;
}

.rte-editor .rte-img.is-selected{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.25);
}

/* =========================================================
   Multi-image row (2/3 columns)
   ========================================================= */

.rte-editor .rte-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0;
}

/* 2 columns */
.rte-editor .rte-row.cols-2 .rte-img{
  flex: 1 1 calc(50% - 10px);
}

/* 3 columns */
.rte-editor .rte-row.cols-3 .rte-img{
  flex: 1 1 calc(33.333% - 10px);
}

/* inside row: keep layout stable */
.rte-editor .rte-row .rte-img{
  width:auto !important;   /* row controls width */
  resize: none;            /* ✅ disable resize inside row */
  overflow: hidden;
}

/* prevent extra margin from default img rule */
.rte-editor .rte-row .rte-img img{
  margin: 0 !important;
}



/* ===== Render RTE (saved from public/backend/assets/js/richtext.js) ===== */
.rte-content .rte-row{
  display:grid !important;
  gap:10px !important;
  margin:10px 0 !important;
}
.rte-content .rte-row.cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
.rte-content .rte-row.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }

.rte-content .rte-img{
  border:1px solid transparent;
  border-radius:12px;
  overflow:hidden;
  margin:0 !important;          /* grid item -> margin off */
  width:100%;
}
.rte-content .rte-img img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}

/* inline/block toggles from editor */
.rte-content .rte-img.inline{
  display:inline-block !important;
  vertical-align:middle;
  width:auto;
}
.rte-content .rte-img.block{
  display:block !important;
}

/* When user clicks 50%/100% button in editor (it sets style="width:50%") */
.rte-content .rte-img[style*="width:"]{
  display:inline-block !important;
  vertical-align:top;
}

/* make sure prose doesn't force weird margins */
.rte-content .rte-row p{ margin:0 !important; }