/* public/css/post.css */

/* ------------------------------------ */
/* Utilities & Public View Styles */
/* ------------------------------------ */

.blog-main {
    padding: 0 !important;
}

/* Blog Admin Pages (Create/Edit) */
.blog-main.section {
    padding-top: 80px !important;
    min-height: 100vh;
    background-color: var(--clr-bg-page);
}

.blog-main .section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
}

.post-banner-wrapper {
    width: 100%;
    position: relative;
    left: 0;
    right: 0;
}

/* Estilos para Títulos e Conteúdo (Visualização Pública) */
.post-title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
    color: var(--clr-text-primary);
}

.post-content { 
    line-height: 1.8; 
    font-size: var(--font-size-lg); 
    color: var(--clr-text-secondary);
    margin-top: var(--spacing-lg);
}

.post-content p, .post-content ul, .post-content ol {
    margin-bottom: var(--spacing-md);
}

/* Estilos do editor no view-post */
.post-content strong { font-weight: var(--font-weight-bold); color: var(--clr-text-primary); }
.post-content em { font-style: italic; }
.post-content u { text-decoration: underline; }
.post-content s, .post-content strike { text-decoration: line-through; }

.post-content h1, .post-content h2, .post-content h3 {
    font-weight: var(--font-weight-bold);
    color: var(--clr-text-primary);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}
.post-content h1 { font-size: 2rem; }
.post-content h2 { font-size: 1.6rem; }
.post-content h3 { font-size: 1.3rem; }

.post-content ul, .post-content ol {
    padding-left: 2em;
    margin-bottom: var(--spacing-md);
}
.post-content ul { list-style-type: disc; }
.post-content ol { list-style-type: decimal; }
.post-content li { margin-bottom: 0.5em; }

.post-content a {
    color: var(--clr-accent-m);
    text-decoration: underline;
    transition: color 0.2s;
}
.post-content a:hover { color: var(--clr-accent-l); }

.post-content hr {
    border: 0;
    border-top: 2px solid var(--clr-border);
    margin: var(--spacing-lg) 0;
}

.post-content blockquote {
    border-left: 3px solid var(--clr-accent-m);
    padding: 10px 16px;
    margin: 1.5em 0;
    background: var(--clr-bg-light);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--clr-text-secondary);
    font-style: italic;
}

.post-content pre {
    background: var(--clr-bg-dark);
    padding: 16px;
    border-radius: var(--radius-default);
    overflow-x: auto;
    margin: 1.5em 0;
}

.post-content pre code {
    background: transparent;
    padding: 0;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    color: var(--clr-text-primary);
    line-height: 1.5;
}

.post-content code {
    background: var(--clr-bg-light);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
}

.post-content img, .post-content video, .post-content iframe {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 1.5em auto;
    display: block;
}

.post-content iframe {
    aspect-ratio: 16/9;
    width: 100%;
}

/* Banner de Mídia (Largura Total/Full Bleed) */
.post-banner {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 35%;
    overflow: hidden;
    background-color: var(--clr-bg-base);
    box-shadow: var(--shadow-lg);
}

.post-banner-media, .post-banner-video {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* Gradientes */
.post-gradient-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, hsla(var(--clr-black-pure), 0.5) 0%, hsla(var(--clr-black-pure), 0) 100%);
    z-index: 2;
}

.post-navbar-gradient-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 3;
    background: linear-gradient(to bottom, var(--clr-bg-page) 0%, hsla(var(--clr-black-pure), 0.0) 50%);
}


/* Meta-informações do Post (Autor/Data) */
.post-meta-container {
    display: flex; align-items: center; gap: var(--spacing-md);
    margin-top: var(--spacing-md); color: var(--clr-text-tertiary);
    font-size: var(--font-size-sm);
}

.post-author-avatar {
    width: 40px; height: 40px; border-radius: var(--radius-full);
    object-fit: cover; border: 2px solid var(--clr-accent-m);
}

.post-meta-details { display: flex; flex-direction: column; }
.meta-detail-item { display: flex; gap: var(--spacing-xs); align-items: center; font-weight: var(--font-weight-regular); }
.meta-detail-item strong { color: var(--clr-text-secondary); font-weight: var(--font-weight-semibold); }
.meta-separator { color: var(--clr-gray-600); }


/* Styles for view-post.ejs (Badges, dates, buttons) */
.post-banner-placeholder { width: 100%; height: 100%; background: var(--clr-bg-base); }
.post-header-meta { display: flex; gap: 15px; align-items: center; margin-bottom: 15px; font-size: 0.9rem; }
.post-category-badge {
    background: var(--clr-accent-m); color: white; padding: 4px 10px;
    border-radius: 20px; font-weight: bold; text-transform: uppercase;
    font-size: 0.75rem; letter-spacing: 0.5px;
}
.post-date { color: var(--clr-text-tertiary); }
.post-meta-wrapper { justify-content: space-between; flex-wrap: wrap; display: flex; }
.post-author-info { display: flex; align-items: center; gap: 15px; }
.post-avatar-placeholder {
    background: var(--clr-accent-m); display: flex; align-items: center; justify-content: center;
    color: white; font-weight: bold; width: 40px; height: 40px; border-radius: var(--radius-full);
}
.author-name { color: var(--clr-text-secondary); font-weight: bold; }
.author-label { color: var(--clr-text-tertiary); font-size: 0.8rem; }

.btn-edit-post {
    display: flex; align-items: center; gap: 8px;
    background: var(--clr-bg-light); border: 1px solid var(--clr-border);
    padding: 8px 16px; border-radius: var(--radius-default);
    color: var(--clr-text-primary); text-decoration: none;
    font-weight: 500; transition: 0.2s;
}
.btn-edit-post:hover { background: var(--clr-bg-medium); border-color: var(--clr-accent-m); }
.post-separator { border: 0; border-top: 1px solid var(--clr-border); margin: 30px 0; }


/* =========================================================
   ADMIN / EDIT PAGE STYLES (Create & Edit Post)
   (Movido do antigo editor.css)
   ========================================================= */

/* Grid Layout */
.editor-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--spacing-xl);
    align-items: start;
}
@media (max-width: 992px) {
    .editor-layout { grid-template-columns: 1fr; }
    .sidebar-column { order: 2; }
    .main-column { order: 1; }
}

/* Cards de Admin */
.editor-card {
    background-color: var(--clr-bg-base);
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-border);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
}

.editor-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.editor-card h4 {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
    color: var(--clr-text-primary);
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
}

.editor-card h4 i {
    color: var(--clr-accent-m);
    font-size: 1.2em;
}

/* Forms e Inputs */
.form-group label {
    display: block; margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-semibold); color: var(--clr-text-secondary);
    font-size: var(--font-size-sm);
}

.form-control {
    width: 100%; padding: var(--spacing-sm);
    background-color: var(--clr-bg-page); border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm); color: var(--clr-text-primary);
    font-family: var(--font-family-primary); transition: var(--transition-fast);
}
.form-control:focus { outline: none; border-color: var(--clr-accent-m); }

.label-lg { font-size: 1.2rem; }
.input-lg-bold { font-size: 1.5rem; font-weight: bold; padding: 15px; }

/* Page Header de Admin */
.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--clr-border);
}

@media (max-width: 768px) {
    .page-header-row {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }
}

.page-title {
    font-size: var(--font-size-h2);
    color: var(--clr-text-primary);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.page-title-icon {
    color: var(--clr-accent-m);
    font-size: 1.5em;
}

.btn-back {
    border: 1px solid var(--clr-border);
}

/* Alertas de Erro */
.alert-error {
    padding: 15px; background: rgba(255,0,0,0.1);
    border: 1px solid var(--clr-red-m); color: var(--clr-red-l);
    border-radius: var(--radius-sm); margin-bottom: 20px;
}

/* Botões de Ação */
.btn-submit-post {
    width: 100%; padding: 12px;
    background-color: var(--clr-accent-m); color: white;
    border: none; border-radius: var(--radius-sm);
    font-weight: bold; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: filter 0.2s;
}
.btn-submit-post:hover { filter: brightness(1.1); }

.delete-wrapper { margin-top: 10px; text-align: center; }
.btn-delete {
    background: none; border: none; color: var(--clr-red-l);
    cursor: pointer; font-size: 0.9rem; text-decoration: underline;
}

/* Checkboxes */
.checkbox-wrapper { display: flex; align-items: center; margin-bottom: 8px; }
.checkbox-accent { accent-color: var(--clr-accent-m); }
.checkbox-label { margin: 0 0 0 8px; cursor: pointer; }

/* Media Badges */
.media-saved-badge {
    background: var(--clr-bg-page); padding: 5px;
    border-radius: 4px; margin-bottom: 10px;
    display: flex; align-items: center; gap: 10px;
}
.media-saved-badge.success i { color: var(--clr-green-m); }
.media-saved-badge.video i { color: var(--clr-accent-l); }
.media-saved-text { font-size: 0.8rem; }
.media-saved-text-success { font-size: 0.8rem; color: var(--clr-green-l); margin-bottom: 5px; }

.media-help-text { color: var(--clr-text-tertiary); display: block; margin-top: 5px; }
.media-input-group { margin-top: 15px; }
.media-preview-placeholder { display: flex; justify-content: center; margin-bottom: 10px; color: var(--clr-text-tertiary); }
.media-icon-lg { font-size: 2rem; }

.editor-separator { border: 0; border-top: 1px solid var(--clr-border); margin: 15px 0; }