/* editor.css - LiputanJatim Newsroom Editor */

:root{
    --lj-red:#e30613;
    --lj-dark:#071d33;
    --lj-navy:#061c32;
    --lj-text:#0f172a;
    --lj-muted:#64748b;
    --lj-border:#e5e7eb;
    --lj-bg:#f5f7fb;
    --lj-card:#ffffff;
}

/* =========================
   WRAPPER
========================= */

.lj-newsroom-page{
    width:100%;
    max-width:1240px;
    margin:34px auto 80px;
    padding:0 18px;
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    gap:28px;
    align-items:start;
}

/* =========================
   SIDEBAR
========================= */

.lj-newsroom-sidebar{
    position:sticky;
    top:94px;
    min-height:calc(100vh - 130px);
    border-radius:30px;
    padding:24px;
    background:
        radial-gradient(circle at top left, rgba(227,6,19,.18), transparent 28%),
        linear-gradient(180deg,#061c32,#031426);
    color:#fff;
    box-shadow:0 24px 60px rgba(3,20,38,.22);
}

.lj-newsroom-brand{
    padding-bottom:22px;
    border-bottom:1px solid rgba(255,255,255,.12);
    margin-bottom:18px;
}

.lj-newsroom-brand span{
    display:inline-flex;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    color:#fecaca;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:14px;
}

.lj-newsroom-brand strong{
    display:block;
    font-size:24px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-.03em;
    margin-bottom:12px;
}

.lj-newsroom-brand p{
    margin:0;
    color:#cbd5e1;
    font-size:14px;
    line-height:1.65;
}

.lj-newsroom-nav{
    display:grid;
    gap:8px;
}

.lj-newsroom-nav a{
    display:flex;
    align-items:center;
    min-height:44px;
    padding:11px 13px;
    border-radius:14px;
    color:#eaf2ff;
    font-size:14px;
    font-weight:650;
    text-decoration:none;
    transition:.18s ease;
}

.lj-newsroom-nav a:hover,
.lj-newsroom-nav a.active{
    background:rgba(255,255,255,.12);
    color:#fff;
    transform:translateX(3px);
}

/* =========================
   MAIN
========================= */

.lj-newsroom-main{
    min-width:0;
}

.lj-newsroom-hero{
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:flex-start;
    background:
        radial-gradient(circle at top right, rgba(227,6,19,.10), transparent 28%),
        linear-gradient(135deg,#ffffff,#f8fbff);
    border:1px solid var(--lj-border);
    border-radius:32px;
    padding:34px;
    box-shadow:0 22px 60px rgba(15,23,42,.07);
}

.lj-newsroom-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 13px;
    border-radius:999px;
    background:#fef2f2;
    color:var(--lj-red);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:16px;
}

.lj-newsroom-kicker::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--lj-red);
    box-shadow:0 0 0 5px rgba(227,6,19,.12);
}

.lj-newsroom-hero h1{
    margin:0 0 10px;
    font-size:38px;
    line-height:1.1;
    font-weight:780;
    letter-spacing:-.04em;
    color:var(--lj-dark);
}

.lj-newsroom-hero p{
    margin:0;
    max-width:660px;
    color:#334155;
    font-size:15.5px;
    line-height:1.7;
}

.lj-newsroom-date{
    min-width:96px;
    height:96px;
    border-radius:26px;
    background:var(--lj-dark);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:0 18px 40px rgba(7,29,51,.22);
}

.lj-newsroom-date strong{
    font-size:34px;
    line-height:1;
    font-weight:800;
}

.lj-newsroom-date span{
    margin-top:6px;
    font-size:13px;
    color:#cbd5e1;
}

/* =========================
   STATS
========================= */

.lj-newsroom-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin:18px 0;
}

.lj-newsroom-stat{
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--lj-border);
    border-radius:24px;
    padding:24px;
    box-shadow:0 12px 34px rgba(15,23,42,.05);
}

.lj-newsroom-stat::after{
    content:"";
    position:absolute;
    right:-34px;
    top:-34px;
    width:110px;
    height:110px;
    border-radius:50%;
    background:rgba(11,58,117,.07);
}

.lj-newsroom-stat.is-red::after{
    background:rgba(227,6,19,.08);
}

.lj-newsroom-stat.is-dark::after{
    background:rgba(7,29,51,.08);
}

.lj-newsroom-stat.is-green::after{
    background:rgba(22,163,74,.09);
}

.lj-newsroom-stat strong{
    display:block;
    font-size:34px;
    line-height:1;
    font-weight:800;
    color:var(--lj-dark);
    letter-spacing:-.04em;
    margin-bottom:10px;
}

.lj-newsroom-stat span{
    color:var(--lj-muted);
    font-size:14px;
    font-weight:500;
}

/* =========================
   GRID
========================= */

.lj-newsroom-grid{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);
    gap:18px;
}

.lj-newsroom-panel{
    background:#fff;
    border:1px solid var(--lj-border);
    border-radius:30px;
    padding:26px;
    box-shadow:0 22px 60px rgba(15,23,42,.07);
}

.lj-panel-wide{
    grid-row:span 3;
}

.lj-newsroom-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    margin-bottom:18px;
}

.lj-newsroom-panel-head h2{
    margin:0 0 6px;
    font-size:23px;
    line-height:1.25;
    font-weight:760;
    letter-spacing:-.025em;
    color:var(--lj-dark);
}

.lj-newsroom-panel-head p{
    margin:0;
    color:var(--lj-muted);
    font-size:14px;
    line-height:1.55;
}

.lj-newsroom-panel-head a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    min-height:38px;
    padding:0 13px;
    border-radius:999px;
    background:#fef2f2;
    color:var(--lj-red);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

/* =========================
   REVIEW CARD
========================= */

.lj-newsroom-review-list{
    display:grid;
    gap:14px;
}

.lj-newsroom-review-card{
    display:grid;
    grid-template-columns:94px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:14px;
    border:1px solid var(--lj-border);
    border-radius:20px;
    transition:.18s ease;
}

.lj-newsroom-review-card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(15,23,42,.07);
}

.lj-newsroom-thumb,
.lj-newsroom-thumb img{
    width:94px;
    height:72px;
    border-radius:15px;
    object-fit:cover;
    overflow:hidden;
    background:#e5e7eb;
}

.lj-newsroom-thumb span{
    width:94px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#64748b;
    font-size:12px;
    font-weight:700;
}

.lj-newsroom-status{
    display:inline-flex;
    width:max-content;
    padding:5px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    margin-bottom:8px;
}

.status-pending{
    background:#fef2f2;
    color:var(--lj-red);
}

.lj-newsroom-review-content h3{
    margin:0 0 7px;
    font-size:15.5px;
    line-height:1.4;
    font-weight:680;
    color:var(--lj-dark);
}

.lj-newsroom-review-content p{
    margin:0;
    color:#64748b;
    font-size:13px;
}

.lj-newsroom-actions{
    display:grid;
    gap:8px;
}

.lj-newsroom-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 13px;
    border-radius:999px;
    background:#f8fafc;
    color:var(--lj-dark);
    border:1px solid var(--lj-border);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

.lj-newsroom-actions a.primary{
    background:var(--lj-red);
    border-color:var(--lj-red);
    color:#fff;
}

/* =========================
   SIMPLE LIST
========================= */

.lj-newsroom-simple-list,
.lj-newsroom-author-list{
    display:grid;
    gap:12px;
}

.lj-newsroom-simple-list a{
    display:grid;
    gap:6px;
    padding:14px;
    border-radius:18px;
    border:1px solid var(--lj-border);
    color:var(--lj-dark);
    text-decoration:none;
    transition:.18s ease;
}

.lj-newsroom-simple-list a:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(15,23,42,.06);
}

.lj-newsroom-simple-list strong{
    font-size:14.5px;
    line-height:1.38;
}

.lj-newsroom-simple-list small{
    color:#64748b;
    font-size:13px;
}

.lj-newsroom-author-item{
    display:grid;
    grid-template-columns:46px 1fr;
    gap:12px;
    align-items:center;
    padding:12px;
    border-radius:18px;
    border:1px solid var(--lj-border);
}

.lj-newsroom-author-avatar,
.lj-newsroom-author-avatar img{
    width:46px;
    height:46px;
    border-radius:15px;
    overflow:hidden;
}

.lj-newsroom-author-item strong{
    display:block;
    color:var(--lj-dark);
    font-size:14.5px;
    line-height:1.3;
}

.lj-newsroom-author-item span{
    display:block;
    margin-top:4px;
    color:#64748b;
    font-size:13px;
}

.lj-newsroom-empty{
    padding:18px;
    border-radius:18px;
    background:#f8fafc;
    color:#64748b;
    font-size:14px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1080px){
    .lj-newsroom-page{
        grid-template-columns:1fr;
    }

    .lj-newsroom-sidebar{
        position:static;
        min-height:auto;
    }

    .lj-newsroom-nav{
        display:flex;
        overflow-x:auto;
        gap:10px;
        scrollbar-width:none;
    }

    .lj-newsroom-nav::-webkit-scrollbar{
        display:none;
    }

    .lj-newsroom-nav a{
        flex:0 0 auto;
        background:rgba(255,255,255,.08);
    }

    .lj-newsroom-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .lj-newsroom-grid{
        grid-template-columns:1fr;
    }

    .lj-panel-wide{
        grid-row:auto;
    }
}

@media(max-width:640px){
    .lj-newsroom-page{
        margin:20px auto 50px;
        padding:0 14px;
    }

    .lj-newsroom-hero{
        flex-direction:column;
        padding:24px;
        border-radius:24px;
    }

    .lj-newsroom-hero h1{
        font-size:30px;
    }

    .lj-newsroom-date{
        display:none;
    }

    .lj-newsroom-stats{
        grid-template-columns:1fr;
    }

    .lj-newsroom-panel{
        padding:20px;
        border-radius:24px;
    }

    .lj-newsroom-review-card{
        grid-template-columns:76px 1fr;
    }

    .lj-newsroom-thumb,
    .lj-newsroom-thumb img,
    .lj-newsroom-thumb span{
        width:76px;
        height:60px;
    }

    .lj-newsroom-actions{
        grid-column:1 / -1;
        display:flex;
    }
}