/*
 * CevicheHTML Blog — blog-style.css
 * Only blog-specific styles. 
 * The main /assets/style.css handles nav, footer, body, buttons, and variables.
 * ─────────────────────────────────────────────────────────────
 * Sections:
 *  1. Blog-only overrides (non-conflicting)
 *  2. Blog Listing Page
 *  3. Blog Post (Single Article)
 *  4. Admin — Shared
 *  5. Admin — Login
 *  6. Admin — Dashboard
 *  7. Admin — Editor
 *  8. Responsive
 * ─────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════
   1. BLOG-ONLY VARIABLES (non-conflicting, additive only)
══════════════════════════════════════════════════════════════ */
:root {
    /* Copied from main site stylesheet — admin pages don't load it,
       so without these the purple/gradients were broken. Same values, no conflict. */
    --purple:     #7c3aed;
    --purple2:    #9d5cf5;
    --pink:       #e040a0;
    --dark2:      #1a1830;
    --gray:       #6b7280;
    --grad-main:  linear-gradient(135deg, #7c3aed 0%, #e040a0 100%);
    --r:          10px;
    --r2:         20px;

    --blog-border:       #e5e7eb;
    --blog-radius:       10px;
    --blog-radius-sm:    6px;
    --blog-shadow:       0 2px 12px rgba(0,0,0,0.08);
    --blog-shadow-lg:    0 8px 32px rgba(0,0,0,0.12);
    --blog-max-w:        1200px;
    --blog-max-w-post:   1100px;
    --blog-text:         #111827;
    --blog-text-muted:   #6b7280;
    --blog-bg-off:       #f8f9fb;
    --blog-accent:       #e040a0;
}

/* ══════════════════════════════════════════════════════════════
   2. BLOG LISTING PAGE
══════════════════════════════════════════════════════════════ */

/* Hero — matches main site purple gradient */
.blog-hero {
    background: linear-gradient(135deg, #7c3aed 0%, #e040a0 100%);
    position: relative;
    overflow: hidden;
    padding: 9rem 0 5rem;
    text-align: center;
}

.blog-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 2rem;
}

.blog-hero::before {
    content: '';
    position: absolute; width: 600px; height: 600px; border-radius: 50%;
    background: rgba(124,58,237,.2); filter: blur(90px);
    top: -150px; right: -150px; pointer-events: none;
}
.blog-hero::after {
    content: '';
    position: absolute; width: 500px; height: 500px; border-radius: 50%;
    background: rgba(224,64,160,.15); filter: blur(90px);
    bottom: -100px; left: -100px; pointer-events: none;
}
.blog-hero .container { position: relative; z-index: 1; }
.blog-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -.03em;
    margin-bottom: 1rem;
    line-height: 1.05;
}
.blog-hero p {
    color: rgba(255,255,255,.8);
    font-size: 1.05rem;
    max-width: 500px;
    margin: 0 auto;
    font-weight: 400;
}

/* Blog grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Blog card */
.blog-card {
    background: #fff;
    border: 1px solid var(--blog-border);
    border-radius: var(--r2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--trans);
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(124,58,237,.14);
    border-color: rgba(124,58,237,.2);
}
.blog-card__img {
    width: 100%; height: 220px;
    object-fit: cover; object-position: center;
    transition: transform .3s;
    display: block;
}
.blog-card:hover .blog-card__img { transform: scale(1.04); }
.blog-card__img--placeholder {
    height: 220px;
    background: linear-gradient(135deg, #ede9fe 0%, #fce7f3 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
}
.blog-card__body {
    padding: 1.75rem;
    display: flex; flex-direction: column;
    flex: 1; gap: .6rem;
}
.blog-card__meta {
    display: flex; align-items: center;
    gap: .4rem; font-size: .75rem;
}
.blog-card__cat {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: var(--purple);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .2rem .7rem;
    border-radius: 100px;
    font-size: .7rem;
}
.blog-card__sep  { color: var(--blog-text-muted); }
.blog-card__date { color: var(--blog-text-muted); }
.blog-card__title {
    font-size: 1.1rem; font-weight: 700;
    line-height: 1.35; margin: 0;
    color: var(--dark2);
}
.blog-card__title a { color: inherit; }
.blog-card__title a:hover { color: var(--purple); }
.blog-card__excerpt {
    font-size: .875rem;
    color: var(--blog-text-muted);
    flex: 1; line-height: 1.65; margin: 0;
}
.blog-card__btn {
    margin-top: .5rem; align-self: flex-start;
    font-size: .8rem; font-weight: 700;
    color: var(--purple);
    display: inline-flex; align-items: center; gap: .3rem;
    transition: gap .2s;
    text-decoration: none;
}
.blog-card__btn::after { content: '→'; }
.blog-card__btn:hover { gap: .5rem; color: var(--pink); }

/* Pagination */
.blog-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 1.25rem; margin-top: 3.5rem;
}
.blog-pagination__info { color: var(--blog-text-muted); font-size: .875rem; }

/* ══════════════════════════════════════════════════════════════
   3. BLOG POST (SINGLE ARTICLE)
══════════════════════════════════════════════════════════════ */

/* Post header — same purple gradient */
.post-header {
    background: linear-gradient(135deg, #7c3aed 0%, #e040a0 100%);
    padding: 9rem 0 4rem;
    position: relative; overflow: hidden;
}
.post-header::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,.1);
}
.post-header__inner {
    max-width: var(--blog-max-w-post);
    margin: 0 auto; padding: 0 1.5rem;
    position: relative; z-index: 1;
}
.post-cat-badge {
    display: inline-block;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em;
    padding: .3rem .9rem; border-radius: 100px;
    margin-bottom: 1.25rem; backdrop-filter: blur(8px);
}
.post-title {
    color: #fff;
    font-size: clamp(1.8rem, 5vw, 2.75rem);
    margin-bottom: 1.25rem; line-height: 1.15;
    font-weight: 900; letter-spacing: -.03em;
}
.post-subtitle {
    color: rgba(255,255,255,.78);
    font-size: 1.1rem; margin-bottom: 1.75rem;
    font-weight: 400; line-height: 1.65;
}
.post-meta {
    display: flex; align-items: center; gap: .5rem;
    font-size: .875rem; color: rgba(255,255,255,.6);
}
.post-meta__author { font-weight: 700; color: rgba(255,255,255,.9); }
.post-meta__sep    { opacity: .5; }

/* Featured image */
.post-featured-img {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
    transform: translateY(-2rem);
}
.post-featured-img img {
    width: 100%; max-height: 500px;
    object-fit: cover;
    border-radius: var(--r2);
    box-shadow: 0 24px 64px rgba(0,0,0,.25);
}

/* Post layout */
.post-container { max-width: 1500px; margin: 0 auto; padding: 0 1.5rem; }
.post-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    align-items: start;
    margin-bottom: 3.5rem;
}

/* Post body */
.post-body { min-width: 0; font-size: .97rem; line-height: 1.8; color: var(--blog-text); }
.post-body h2 { border-bottom: 2px solid var(--blog-border); padding-bottom: 1rem; padding-top: 1rem; color: var(--dark2); }
.post-body h3 { color: var(--dark2); }  
.post-body p { margin-top:1em; margin-bottom:2em;}
.post-body a  { color: var(--purple); font-weight: 600; text-decoration: underline; }
.post-body a:hover { color: var(--pink); }
.post-body strong { font-weight: 800; }
.post-body ul, .post-body ol { margin-bottom: 1.25rem; }
.post-body blockquote {
    border-left: 4px solid var(--purple);
    margin: 1.75rem 0; padding: .75rem 1.25rem;
    background: var(--blog-bg-off);
    border-radius: 0 var(--blog-radius-sm) var(--blog-radius-sm) 0;
    font-style: italic; color: var(--blog-text-muted); font-size: 1.05rem;
}
.post-body code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .85em; background: #f3f4f6;
    padding: 2px 5px; border-radius: 3px;
}

/* Sidebar */
.post-sidebar { position: sticky; top: 90px; }
.sidebar-card {
    background: var(--blog-bg-off);
    border: 1px solid var(--blog-border);
    border-radius: var(--r2);
    padding: 1.5rem; margin-bottom: 1.5rem;
    margin-top:2em;
}
.sidebar-card__title {
    font-size: 1rem; font-weight: 800;
    margin: 0 0 .75rem; color: var(--dark2);
}
.sidebar-card__text {
    font-size: .875rem; color: var(--blog-text-muted); margin-bottom: 1rem;
}
.sidebar-related { list-style: none; padding: 0; margin: 0; }
.sidebar-related__item {
    padding: .65rem 0; border-bottom: 1px solid var(--blog-border);
    display: flex; flex-direction: column; gap: 3px;
}
.sidebar-related__item:last-child { border-bottom: none; }
.sidebar-related__item a { font-size: .875rem; font-weight: 700; color: var(--dark2); }
.sidebar-related__item a:hover { color: var(--purple); }
.sidebar-related__date { font-size: .75rem; color: var(--blog-text-muted); }

/* Share bar */
.post-share {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.5rem 0; border-top: 1px solid var(--blog-border);
    flex-wrap: wrap;
}
.post-share__label { font-weight: 700; font-size: .875rem; color: var(--blog-text-muted); }
.post-share__btn {
    padding: .45rem 1rem; border-radius: 100px;
    font-size: .8rem; font-weight: 700; color: #fff;
    text-decoration: none; transition: opacity .15s;
}
.post-share__btn:hover { opacity: .85; color: #fff; }
.post-share__btn--twitter { background: #000; }
.post-share__btn--fb      { background: #1877F2; }
.post-share__btn--li      { background: #0A66C2; }

/* More articles */
.more-articles {
    background: var(--off);
    padding: 4rem 0; margin-top: 3.5rem;
    border-top: 1px solid var(--blog-border);
}
.more-articles__heading { font-size: 1.5rem; margin-bottom: 1.75rem; margin-top: 0; color: var(--dark2); }

/* Alerts */
.alert {
    padding: .875rem 1.1rem; border-radius: var(--blog-radius-sm);
    margin-bottom: 1.25rem; font-size: .9rem; font-weight: 500;
}
.alert--success { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.alert--error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.alert p { margin: 0; }

/* Forms (blog-specific, non-conflicting with main .btn) */
.blog-form-group {
    display: flex; flex-direction: column;
    gap: 6px; margin-bottom: 18px;
}
.blog-form-group label {
    font-size: .875rem; font-weight: 700;
    color: var(--blog-text); display: flex; align-items: center; gap: 8px;
}
.blog-form-group input[type="text"],
.blog-form-group input[type="url"],
.blog-form-group input[type="email"],
.blog-form-group input[type="password"],
.blog-form-group textarea,
.blog-form-group select,
.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid var(--blog-border);
    border-radius: var(--blog-radius-sm);
    font-size: .9rem; font-family: inherit;
    color: var(--blog-text); background: #fff;
    transition: border-color .15s, box-shadow .15s; outline: none;
}
.blog-form-group input:focus,
.blog-form-group textarea:focus,
.blog-form-group select:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.blog-form-group textarea,
.form-group textarea { resize: vertical; line-height: 1.6; }
.req  { color: var(--pink); }
.field-hint { font-size: .78rem; color: var(--blog-text-muted); font-weight: 400; }

/* ══════════════════════════════════════════════════════════════
   4. ADMIN — SHARED
══════════════════════════════════════════════════════════════ */
.admin-page { background: #f1f5f9;   font-family:'Plus Jakarta Sans', sans-serif;
 }

.admin-header {
    /*background: var(--dark2);*/
     background: #0f0e17;
    position: sticky; top: 0; z-index: 100;
}
.admin-header__inner {
    max-width: 1400px; margin: 0 auto;
    padding: 0 1.5rem; height: 60px;
    display: flex; align-items: center; justify-content: space-between;
}
.admin-header__logo {
    font-size: 1.2rem; font-weight: 900;
    color: #fff; letter-spacing: -.03em; text-decoration: none;
}
.admin-header__logo span { background: var(--grad-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.admin-header__nav { display: flex; align-items: center; gap: 18px; }
.admin-header__link {
    color: rgba(255,255,255,.7); font-size: .85rem;
    font-weight: 600; text-decoration: none;
}
.admin-header__link:hover { color: #fff; }

.admin-main { padding: 2.5rem 1.5rem 5rem; }
.admin-container { max-width: 1200px; margin: 0 auto; }
.admin-container--wide { max-width: 1300px; }

.admin-page-title {
    display: flex; align-items: center; gap: .875rem;
    margin-bottom: 1.75rem;
}
.admin-page-title h1 { font-size: 1.6rem; margin: 0; color: var(--dark2); }
.admin-page-heading  { font-size: 1.6rem; margin-bottom: 1.5rem; color: var(--dark2); }

.badge {
    background: var(--blog-border); color: var(--blog-text-muted);
    font-size: .75rem; font-weight: 700; padding: 3px 10px;
    border-radius: 100px;
}
.admin-empty {
    background: #fff; border: 1px solid var(--blog-border);
    border-radius: var(--r); padding: 2.5rem;
    text-align: center; color: var(--blog-text-muted);
}
.status-badge {
    font-size: .75rem; font-weight: 700;
    padding: 3px 10px; border-radius: 100px; text-transform: capitalize;
}
.status-badge--published { background: #d1fae5; color: #065f46; }
.status-badge--draft     { background: #fef9c3; color: #854d0e; }

/* Base button for admin pages only — main site css isn't loaded here,
   so without this, admin buttons rendered completely unstyled. */
.admin-page .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .4rem; padding: 10px 18px;
    border-radius: var(--blog-radius-sm);
    font-family: inherit; font-size: .875rem; font-weight: 700;
    text-decoration: none; cursor: pointer;
    border: 2px solid transparent; line-height: 1.2; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.admin-page .btn:hover { transform: translateY(-1px); }

/* Admin buttons (scoped, don't conflict with main .btn) */
.btn--primary  { background: var(--purple);  color: #fff; border: 2px solid var(--purple); }
.btn--primary:hover { background: #6d28d9; border-color: #6d28d9; }
.btn--outline  { background: transparent; color: var(--purple); border: 2px solid var(--purple); }
.btn--outline:hover { background: var(--purple); color: #fff; }
.btn--success  { background: #059669; color: #fff; border: 2px solid #059669; }
.btn--warning  { background: #d97706; color: #fff; border: 2px solid #d97706; }
.btn--danger   { background: #dc2626; color: #fff; border: 2px solid #dc2626; }
.btn--sm       { padding: 7px 14px !important; font-size: .8rem !important; border-radius: var(--blog-radius-sm) !important; }
.btn--full     { width: 100%; text-align: center; justify-content: center; }

/* ══════════════════════════════════════════════════════════════
   5. ADMIN — LOGIN
══════════════════════════════════════════════════════════════ */
.login-page {
    min-height: 100vh; display: flex; align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif; margin: 0;
    background: linear-gradient(135deg, #7c3aed 0%, #e040a0 100%);
}
.login-page .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 18px; border-radius: var(--blog-radius-sm);
    font-family: inherit; font-size: .875rem; font-weight: 700;
    text-decoration: none; cursor: pointer; border: 2px solid transparent;
    line-height: 1.2; transition: background .15s, transform .1s;
}
.login-page .btn:hover { transform: translateY(-1px); }
.login-wrap {
    background: #fff; border-radius: var(--r2);
    padding: 2.75rem 2.5rem; width: 100%; max-width: 420px;
    box-shadow: 0 24px 64px rgba(0,0,0,.25);
}
.login-logo {
    display: block; font-size: 1.4rem; font-weight: 900;
    letter-spacing: -.03em; text-align: center;
    margin-bottom: .5rem; text-decoration: none;
    background: var(--grad-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.login-heading {
    font-size: 1.1rem; text-align: center;
    color: var(--blog-text-muted); font-weight: 600; margin-bottom: 1.75rem;
}
.login-form  { display: flex; flex-direction: column; }
.login-hint  {
    margin-top: 1.25rem; font-size: .78rem;
    color: var(--blog-text-muted); text-align: center; line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   6. ADMIN — DASHBOARD TABLE
══════════════════════════════════════════════════════════════ */
.admin-table-wrap {
    background: #fff; border-radius: var(--r);
    border: 1px solid var(--blog-border); overflow: hidden;
}
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
    background: var(--blog-bg-off); padding: 12px 16px;
    text-align: left; font-size: .8rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--blog-text-muted); border-bottom: 1px solid var(--blog-border);
}
.admin-table td {
    padding: 14px 16px; border-bottom: 1px solid var(--blog-border);
    font-size: .875rem; vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: #f8f6ff; }
.admin-table__title a { font-weight: 700; color: var(--dark2); }
.admin-table__title a:hover { color: var(--purple); }
.admin-table__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   7. ADMIN — EDITOR
══════════════════════════════════════════════════════════════ */
.editor-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.75rem; align-items: start;
}
.editor-main, .editor-sidebar { display: flex; flex-direction: column; }

/* Left column gets the same white card treatment as the sidebar panels */
.editor-main {
    background: #fff; border: 1px solid var(--blog-border);
    border-radius: var(--r); padding: 1.75rem;
    align-self: start; width: 100%;
}

/* Breathing room between fields (there was none before) */
.editor-form .form-group { margin-bottom: 1.5rem; }
.editor-form .form-group:last-child { margin-bottom: 0; }
.editor-form .form-group label { margin-bottom: .5rem; }
.editor-panel .form-group { margin-bottom: 1.15rem; }

/* ── Live preview pane ── */
.body-preview {
    display: none;
    border: 1.5px solid var(--blog-border);
    border-radius: 0 0 var(--blog-radius-sm) var(--blog-radius-sm);
    padding: 1.5rem; min-height: 420px;
    background: #fff; font-size: 1rem; line-height: 1.75; color: var(--blog-text);
    overflow-wrap: break-word;
}
.body-preview.active { display: block; }
.body-preview h2 { font-size: 1.6rem; font-weight: 800; margin: 1.5rem 0 .6rem; color: var(--dark2); letter-spacing: -.02em; }
.body-preview h3 { font-size: 1.25rem; font-weight: 700; margin: 1.25rem 0 .5rem; color: var(--dark2); }
.body-preview h4 { font-size: 1.05rem; font-weight: 700; margin: 1rem 0 .4rem; color: var(--dark2); }
.body-preview p  { margin: 0 0 1rem; }
.body-preview ul { margin: 0 0 1rem 1.25rem; }
.body-preview li { margin-bottom: .35rem; }
.body-preview blockquote {
    border-left: 3px solid var(--purple); background: #f8f6ff;
    margin: 0 0 1rem; padding: .75rem 1.15rem;
    border-radius: 0 var(--blog-radius-sm) var(--blog-radius-sm) 0;
    font-style: italic; color: var(--gray);
}
.body-preview img { max-width: 100%; border-radius: var(--blog-radius-sm); margin: .5rem 0 1rem; display: block; }
.body-preview a { color: var(--purple); text-decoration: underline; }
.body-preview:empty::before,
.body-preview.is-empty::before { content: 'Nada que mostrar todavía — escribe algo primero.'; color: var(--blog-text-muted); font-style: italic; }

/* Preview toggle sits at the right end of the toolbar */
#previewBtn { margin-left: auto; }
#previewBtn.active { background: var(--purple); color: #fff; border-color: var(--purple); }
.editor-panel {
    background: #fff; border: 1px solid var(--blog-border);
    border-radius: var(--r); padding: 1.375rem; margin-bottom: 1.25rem;
}
.editor-panel__title {
    font-size: .95rem; font-weight: 800;
    margin: 0 0 1rem; padding-bottom: .75rem;
    border-bottom: 1px solid var(--blog-border); color: var(--dark2);
}
.editor-panel__desc { font-size: .8rem; color: var(--blog-text-muted); margin-bottom: .875rem; margin-top: -.5rem; }
.editor-panel__actions { display: flex; flex-direction: column; gap: .65rem; margin-top: .25rem; }
.editor-panel--seo { border-top: 3px solid var(--purple); }
#body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .875rem; line-height: 1.7;
    min-height: 420px;
}
.editor-toolbar {
    background: var(--blog-bg-off); border: 1.5px solid var(--blog-border);
    border-bottom: none; border-radius: var(--blog-radius-sm) var(--blog-radius-sm) 0 0;
    padding: 8px 12px;
    position: sticky; top: 60px; z-index: 10; /* stays visible below the admin header */
}
.editor-toolbar + textarea { border-radius: 0 0 var(--blog-radius-sm) var(--blog-radius-sm) !important; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.toolbar button {
    background: #fff; border: 1.5px solid var(--blog-border);
    border-radius: var(--blog-radius-sm); padding: 5px 11px;
    font-family: inherit; font-size: .8rem; font-weight: 700;
    color: var(--dark2); cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.toolbar button:hover {
    border-color: var(--purple); color: var(--purple); background: #f8f6ff;
}
.toolbar .sep { width: 1px; height: 20px; background: var(--blog-border); margin: 0 4px; }
#imgStatus { font-size: .75rem; color: var(--blog-text-muted); }

/* Black code-style textarea for per-post JSON-LD schema */
.form-group textarea.schema-input {
    background: #0f0e17; color: #86efac;
    font-family: 'Courier New', Consolas, monospace;
    font-size: .78rem; line-height: 1.6;
    border: 1.5px solid #2a2a3a; min-height: 150px;
}
.form-group textarea.schema-input::placeholder { color: #4b4b5e; }
.form-group textarea.schema-input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(124,58,237,.2);
}
.editor-toolbar + .form-group textarea { border-radius: 0 0 var(--blog-radius-sm) var(--blog-radius-sm); }
.img-preview {
    width: 100%; max-height: 140px; object-fit: cover;
    border-radius: var(--blog-radius-sm); margin-top: 8px;
    border: 1px solid var(--blog-border);
}
.char-count { font-size: .75rem; color: var(--blog-text-muted); font-weight: 400; margin-left: auto; }
.char-count--over { color: var(--pink); }

/* ══════════════════════════════════════════════════════════════
   8. RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .post-layout    { grid-template-columns: 1fr; }
    .post-sidebar   { position: static; }
    .editor-layout  { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .blog-grid          { grid-template-columns: 1fr; }
    
    .blog-hero          { padding: 7rem 0 3rem; }
    .post-header        { padding: 7rem 0 3rem; }
    .post-featured-img  { transform: none; margin-top: 1.5rem; }
    .admin-table__actions { flex-direction: column; gap: 6px; }
    .admin-header__inner  { height: auto; padding: 10px 1rem; flex-wrap: wrap; gap: 8px; }
    .admin-header__nav    { gap: 12px; flex-wrap: wrap; }
    .admin-main           { padding: 1.5rem 1rem 4rem; }
    .editor-panel         { padding: 1rem; }
    .editor-toolbar       { position: static; } /* sticky toolbar off on mobile */
    .toolbar button       { padding: 7px 12px; } /* bigger touch targets */
    .admin-table th,
    .admin-table td     { padding: 10px 12px; }
    .admin-table th:nth-child(3),
    .admin-table td:nth-child(3) { display: none; }
    .login-wrap         { padding: 2rem 1.5rem; }
}
@media (max-width: 480px) {
    .blog-hero  { padding: 6rem 0 2.5rem; }
    .more-articles { padding: 2.5rem 0; }
}