/* ════════════════════════════════════════════════════════════════
   SRP Blog Editor — Image Spacing  |  image-spacing-editor.css
   Gerencia espaçamento automático para imagens verticais no editor
   ════════════════════════════════════════════════════════════════ */

/* ── Imagens dentro do rich editor ────────────────────────────── */
.srp-ed__rich-editor img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12px 0;
}

/* ── Imagens Verticais (altura > largura) ────────────────────── */
.srp-ed__rich-editor .srp-blog-img-vertical {
  /* Espaçamento agressivo para separação clara */
  margin: 28px auto !important;
  padding: 0 !important;
  
  /* Garante que fica centrada */
  display: block;
  clear: both;
  
  /* Máximo de largura relativa para não ocupar toda página */
  max-width: 85%;
}

/* Espaçamento adicional quando há elementos de bloco adjacentes */
.srp-ed__rich-editor p + .srp-blog-img-vertical,
.srp-ed__rich-editor h2 + .srp-blog-img-vertical,
.srp-ed__rich-editor h3 + .srp-blog-img-vertical,
.srp-ed__rich-editor h4 + .srp-blog-img-vertical,
.srp-ed__rich-editor blockquote + .srp-blog-img-vertical {
  margin-top: 32px !important;
}

/* Espaçamento após imagem vertical */
.srp-ed__rich-editor .srp-blog-img-vertical + p,
.srp-ed__rich-editor .srp-blog-img-vertical + h2,
.srp-ed__rich-editor .srp-blog-img-vertical + h3,
.srp-ed__rich-editor .srp-blog-img-vertical + h4,
.srp-ed__rich-editor .srp-blog-img-vertical + blockquote {
  margin-top: 28px !important;
}

/* ── Imagens Horizontais (largura > altura) ───────────────────── */
.srp-ed__rich-editor .srp-blog-img-horizontal {
  margin: 16px 0 !important;
  padding: 0 !important;
  display: block;
  max-width: 100%;
}

/* ── Imagens em figura (quando envolvidas em <figure>) ────────── */
.srp-ed__rich-editor figure {
  margin: 24px auto !important;
  padding: 0;
  text-align: center;
}

.srp-ed__rich-editor figure img {
  margin: 0 auto !important;
  display: block;
  max-width: 100%;
}

.srp-ed__rich-editor figure figcaption {
  margin-top: 12px;
  font-size: 0.9em;
  color: #6b7280;
  font-style: italic;
  line-height: 1.5;
}

/* ── Indicadores visuais para seleção de imagem ───────────────── */
.srp-ed__rich-editor img:hover {
  opacity: 0.9;
}

/* Quando imagem está selecionada (com caret do editor) */
.srp-ed__rich-editor img::selection,
.srp-ed__rich-editor img::-moz-selection {
  outline: 2px dashed #1a3a1a;
  outline-offset: 2px;
}

/* ── Imagens com largura customizada (usando style inline) ──── */
.srp-ed__rich-editor img[style*="width"],
.srp-ed__rich-editor img[style*="max-width"] {
  /* Preserva espaçamento mesmo com inline styles */
  margin: inherit !important;
}

/* ── Imagens dentro de links ────────────────────────────────────  */
.srp-ed__rich-editor a img {
  display: inline-block;
  margin: 8px 0;
}

/* ── Proteção: Evita que imagens quebrem o layout ─────────────── */
.srp-ed__rich-editor img {
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ── Estado de carregamento ───────────────────────────────────── */
.srp-ed__rich-editor img[data-loading="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* ── Atributos de informação (não visíveis) ───────────────────── */
.srp-ed__rich-editor img[data-aspect-ratio],
.srp-ed__rich-editor img[data-height-width-ratio] {
  /* Mantém os atributos sem afetar o visual */
}

/* ── Responsividade ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .srp-ed__rich-editor .srp-blog-img-vertical {
    max-width: 90%;
  }
}

@media (max-width: 768px) {
  .srp-ed__rich-editor .srp-blog-img-vertical {
    margin: 20px auto !important;
    max-width: 95%;
  }
  
  .srp-ed__rich-editor p + .srp-blog-img-vertical,
  .srp-ed__rich-editor h2 + .srp-blog-img-vertical,
  .srp-ed__rich-editor h3 + .srp-blog-img-vertical,
  .srp-ed__rich-editor h4 + .srp-blog-img-vertical {
    margin-top: 24px !important;
  }
}

/* ── Estado de edição/hover ──────────────────────────────────── */
.srp-ed__rich-editor:focus-within .srp-blog-img-vertical {
  position: relative;
}

/* ════════════════════════════════════════════════════════════════
   A · ALINHAMENTO — espelho no editor
   ════════════════════════════════════════════════════════════════ */

.srp-ed__rich-editor .srp-img-align-left {
  float: left;
  clear: left;
  display: block;
  margin: 4px 24px 16px 0 !important;
}

.srp-ed__rich-editor .srp-img-align-right {
  float: right;
  clear: right;
  display: block;
  margin: 4px 0 16px 24px !important;
}

.srp-ed__rich-editor .srp-img-align-center {
  float: none;
  clear: both;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

.srp-ed__rich-editor .srp-img-clearfix {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   B · LARGURA — espelho no editor
   ════════════════════════════════════════════════════════════════ */

.srp-ed__rich-editor .srp-img-size-sm {
  max-width: 33% !important;
  width: 33% !important;
}

.srp-ed__rich-editor .srp-img-size-md {
  max-width: 50% !important;
  width: 50% !important;
}

.srp-ed__rich-editor .srp-img-size-full {
  max-width: 100% !important;
  width: 100% !important;
}

/* ════════════════════════════════════════════════════════════════
   E · BORDA DECORATIVA — espelho no editor
   ════════════════════════════════════════════════════════════════ */

.srp-ed__rich-editor .srp-img-border-none   { border: none !important; border-radius: 0 !important; }
.srp-ed__rich-editor .srp-img-border-thin   { border: 1px solid #d1d5db !important; border-radius: 4px !important; }
.srp-ed__rich-editor .srp-img-border-medium { border: 2px solid #9ca3af !important; border-radius: 6px !important; }
.srp-ed__rich-editor .srp-img-border-rounded { border: 1px solid #d1d5db !important; border-radius: 12px !important; }
.srp-ed__rich-editor .srp-img-border-srp    { border: 2px solid #1a3a1a !important; border-radius: 6px !important; }
.srp-ed__rich-editor .srp-img-border-gold   { border: 2px solid #c8a84b !important; border-radius: 6px !important; }