/**
 * ESTILOS QUILL PARA POST PÚBLICO
 * Blog Tec Perifa
 * 
 * Este arquivo contém os estilos necessários para que o conteúdo
 * criado no editor Quill seja exibido corretamente na página pública.
 * 
 * SISTEMA DE NAMESPACES (CSS Architecture v2.0):
 * - .ql-*              → Classes nativas do Quill.js (MANTER)
 * - .ql-image-pro*     → Imagens customizadas (compartilhado admin/público)
 * - .ql-callout*       → Callouts (compartilhado admin/público)
 * - .ql-divider*       → Divisórias (compartilhado admin/público)
 * 
 * IMPORTANTE: Classes .ql-* são compartilhadas entre admin e público
 * intencionalmente, pois fazem parte do Render Engine comum.
 */

/* ========================================
   IMAGENS DO QUILL (ImageBlotPro)
   ======================================== */

.ql-image-pro {
    position: relative;
    margin: 1.5em auto;
    display: block;
    text-align: center;
    clear: both;
}

.ql-image-pro img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Centralizado (sem texto ao redor) */
.ql-image-pro.align-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 100%;
    clear: both;
}

.ql-image-pro.align-center img {
    max-width: 100%;
    height: auto;
}

/* Largura total (sem texto ao redor) */
.ql-image-pro.align-full {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    text-align: center;
    clear: both;
}

.ql-image-pro.align-full img {
    width: 100%;
    height: auto;
}

/* Float à esquerda (texto ao redor à direita) */
.ql-image-pro.align-float-left,
.ql-image-pro.float-left {
    float: left;
    margin: 0.5em 1.5em 1em 0;
    max-width: 50%;
    clear: left;
}

.ql-image-pro.align-float-left img,
.ql-image-pro.float-left img {
    max-width: 100%;
    height: auto;
}

/* Float à direita (texto ao redor à esquerda) */
.ql-image-pro.align-float-right,
.ql-image-pro.float-right {
    float: right;
    margin: 0.5em 0 1em 1.5em;
    max-width: 50%;
    clear: right;
}

.ql-image-pro.align-float-right img,
.ql-image-pro.float-right img {
    max-width: 100%;
    height: auto;
}

/* Caption */
.ql-image-pro figcaption {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #666;
    font-style: italic;
    text-align: center;
}

/* ========================================
   TEXTO EM DUAS COLUNAS
   ======================================== */

.text-columns,
.ql-text-columns,
p[data-columns="2"],
.post-content p[style*="columns"] {
    columns: 2;
    column-gap: 40px;
    text-align: justify;
    margin: 20px 0;
}

/* Responsividade - 1 coluna em mobile */
@media (max-width: 768px) {
    .text-columns,
    .ql-text-columns,
    p[data-columns="2"],
    .post-content p[style*="columns"] {
        columns: 1;
        column-gap: 0;
    }
    
    /* Imagens flutuantes em mobile */
    .ql-image-pro.align-float-left,
    .ql-image-pro.float-left,
    .ql-image-pro.align-float-right,
    .ql-image-pro.float-right {
        float: none;
        margin: 1em auto;
        max-width: 100%;
        clear: both;
    }
}

/* ========================================
   ALINHAMENTO DE TEXTO DO QUILL
   ======================================== */

.ql-align-left {
    text-align: left;
}

.ql-align-center {
    text-align: center;
}

.ql-align-right {
    text-align: right;
}

.ql-align-justify {
    text-align: justify;
}

/* ========================================
   OUTROS ELEMENTOS DO QUILL
   ======================================== */

/* Blockquote */
.ql-editor blockquote,
.post-content blockquote {
    border-left: 4px solid #ccc;
    padding-left: 16px;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    color: #666;
}

/* Listas */
.ql-editor ol,
.ql-editor ul,
.post-content ol,
.post-content ul {
    padding-left: 1.5em;
}

/* Links */
.ql-editor a,
.post-content a {
    color: #0066cc;
    text-decoration: underline;
}

.ql-editor a:hover,
.post-content a:hover {
    color: #004499;
}

/* Code blocks */
.ql-editor pre,
.post-content pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.ql-editor code,
.post-content code {
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

/* ========================================
   CLEARFIX PARA FLOATS
   ======================================== */

.post-content::after {
    content: "";
    display: table;
    clear: both;
}

/* ========================================
   TAMANHOS DE IMAGEM PERSONALIZADOS
   ======================================== */

/* Preservar width inline definido no editor */
.ql-image-pro[data-width] img {
    width: attr(data-width);
}

/* Se tiver style inline, usar ele */
.ql-image-pro img[style*="width"] {
    /* O width inline será respeitado */
}

/* Mas sempre respeitar o max-width do container */
.ql-image-pro img {
    max-width: 100% !important;
}

/* ========================================
   CALLOUTS (NOTION-STYLE) - CRÍTICO!
   ======================================== */

.ql-callout {
    position: relative;
    margin: 1.5em 0;
    padding: 16px 16px 16px 52px;
    border-radius: 8px;
    border-left: 4px solid;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 60px;
}

.ql-callout .callout-icon {
    position: absolute;
    left: 16px;
    top: 16px;
    font-size: 24px;
    line-height: 1;
}

.ql-callout .callout-content {
    flex: 1;
    min-height: 1em;
}

/* Tipos de callout */
.ql-callout.callout-info {
    background: #eff6ff;
    border-left-color: #3b82f6;
    color: #1e40af;
}

.ql-callout.callout-warning {
    background: #fef3c7;
    border-left-color: #f59e0b;
    color: #92400e;
}

.ql-callout.callout-success {
    background: #d1fae5;
    border-left-color: #10b981;
    color: #065f46;
}

.ql-callout.callout-error {
    background: #fee2e2;
    border-left-color: #ef4444;
    color: #991b1b;
}

.ql-callout.callout-tip {
    background: #f3e8ff;
    border-left-color: #8b5cf6;
    color: #5b21b6;
}

/* ========================================
   DIVIDERS (DIVISÓRIAS) - CRÍTICO!
   ======================================== */

.ql-divider {
    margin: 2em 0;
    border: none;
    border-top: 2px solid #e5e7eb;
    height: 0;
}

.ql-divider.divider-dashed {
    border-top-style: dashed;
}

.ql-divider.divider-dotted {
    border-top-style: dotted;
}

.ql-divider.divider-stars::before {
    content: '✦ ✦ ✦';
    display: block;
    text-align: center;
    font-size: 24px;
    color: #9ca3af;
    letter-spacing: 12px;
    margin-top: -12px;
}

.ql-divider.divider-dots::before {
    content: '• • •';
    display: block;
    text-align: center;
    font-size: 24px;
    color: #9ca3af;
    letter-spacing: 12px;
    margin-top: -12px;
}

/* ========================================
   TIPOGRAFIA - Mesma do Editor
   ======================================== */

.post-content h1,
.ql-editor h1 {
    font-size: 2.5em;
    font-weight: 700;
    margin: 1.2em 0 0.6em;
    line-height: 1.3;
    color: #111827;
}

.post-content h2,
.ql-editor h2 {
    font-size: 2em;
    font-weight: 700;
    margin: 1em 0 0.5em;
    line-height: 1.4;
    color: #1f2937;
}

.post-content h3,
.ql-editor h3 {
    font-size: 1.5em;
    font-weight: 600;
    margin: 0.8em 0 0.4em;
    line-height: 1.5;
    color: #374151;
}

.post-content p,
.ql-editor p {
    margin: 1em 0;
    line-height: 1.8;
}

.post-content strong,
.ql-editor strong {
    font-weight: 700;
}

.post-content em,
.ql-editor em {
    font-style: italic;
}

/* ========================================
   ALINHAMENTOS DE IMAGEM - CORRIGIDOS
   ======================================== */

.ql-image-pro.align-left {
    text-align: left;
}

.ql-image-pro.align-right {
    text-align: right;
}

/* ========================================
   BLOCKQUOTE MELHORADO
   ======================================== */

.post-content blockquote,
.ql-editor blockquote {
    border-left: 4px solid #3b82f6;
    padding-left: 1.5em;
    margin: 1.5em 0;
    font-style: italic;
    color: #4b5563;
    background: #f9fafb;
    padding: 1em 1.5em;
    border-radius: 0 4px 4px 0;
}

/* ========================================
   CODE MELHORADO
   ======================================== */

.post-content code,
.ql-editor code {
    background: #f3f4f6;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
    color: #dc2626;
}

.post-content pre.ql-syntax,
.ql-editor pre.ql-syntax {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1.5em;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1.5em 0;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
    line-height: 1.6;
}

/* ========================================
   LISTAS MELHORADAS
   ======================================== */

.post-content ul,
.post-content ol,
.ql-editor ul,
.ql-editor ol {
    padding-left: 2em;
    margin: 1em 0;
}

.post-content li,
.ql-editor li {
    margin: 0.5em 0;
}

/* ========================================
   LINKS MELHORADOS
   ======================================== */

.post-content a,
.ql-editor a {
    color: #3b82f6;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.post-content a:hover,
.ql-editor a:hover {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

/* ========================================
   RESPONSIVO - Mobile
   ======================================== */

@media (max-width: 768px) {
    .ql-callout {
        padding: 12px 12px 12px 48px;
    }
    
    .ql-callout .callout-icon {
        left: 12px;
        top: 12px;
        font-size: 20px;
    }
    
    .post-content h1,
    .ql-editor h1 {
        font-size: 2em;
    }
    
    .post-content h2,
    .ql-editor h2 {
        font-size: 1.5em;
    }
    
    .post-content h3,
    .ql-editor h3 {
        font-size: 1.2em;
    }
    
    /* ========================================
       IMAGENS - Mobile (Centralizadas 90%)
       ======================================== */
    
    /* Todas as imagens do Quill em mobile */
    .ql-image-pro,
    .post-content .ql-image-pro,
    .materia .ql-image-pro {
        width: 90% !important;
        max-width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
        display: block !important;
        text-align: center !important;
    }
    
    .ql-image-pro img,
    .post-content .ql-image-pro img,
    .materia .ql-image-pro img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    
    /* Remover floats em mobile */
    .ql-image-pro.float-left,
    .ql-image-pro.float-right,
    .ql-image-pro.align-float-left,
    .ql-image-pro.align-float-right {
        float: none !important;
        margin: 1.5em auto !important;
        width: 90% !important;
        max-width: 90% !important;
    }
    
    /* Caption da imagem */
    .ql-image-pro figcaption {
        font-size: 0.85em !important;
        padding: 0 5% !important;
    }
}