/* =========================================================
   09 EDITOR LAYOUT – FINAL CLEAN VERSION
========================================================= */

/* =========================
   BASE
========================= */

html,
body{
  height:100%;
}

body.view-editor{
  overflow:hidden;
}

/* =========================
   SHELL (MAIN GRID)
========================= */

.editor-meta {
  margin-top: 0!important;
}
.editor-shell{
  --editor-left: 900px;
  --editor-middle: 520px;
  --editor-right: 340px;

  display:grid;
  grid-template-columns:
    minmax(0, var(--editor-left))
    8px
    minmax(0, var(--editor-middle))
    8px
    minmax(260px, var(--editor-right));

  width:100%;
  max-width:100%;

  /* HEADER miatt levonunk */
  height:calc(100vh - 96px);

  overflow:hidden;
}

/* =========================
   PANELS
========================= */

.editor-panel{
  min-width:0;
  min-height:0;

  display:flex;
  flex-direction:column;

  overflow:auto;

  padding:20px;

  scrollbar-gutter: stable;
}

/* middle vizuális elválasztás */

.editor-panel-middle{
  border-left:1px solid var(--link-cyan);
  border-right:1px solid var(--link-cyan);
  background:rgba(255,255,255,0.01);
}

/* =========================
   RESIZER
========================= */

.editor-divider{
  width:8px;
  cursor:col-resize;

  background:
    linear-gradient(
      to right,
      transparent 0,
      transparent 2px,
      var(--accent-magenta) 2px,
      var(--accent-magenta) 6px,
      transparent 6px,
      transparent 100%
    );

  opacity:.55;
  user-select:none;
}

.editor-divider:hover{
  opacity:1;
}

.is-resizing,
.is-resizing *{
  cursor:col-resize !important;
  user-select:none !important;
}

/* =========================
   HERO FIX (EDITOR MODE)
========================= */

.view-editor .hero{
  width:100%;
  margin:0;
}

/* =========================
   TOOLBAR
========================= */

.editor-tools{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.editor-tools button{
  background:transparent;
  color:var(--accent-magenta);
  cursor:pointer;
  font-family:inherit;
}

/* =========================
   CONTENTEDITABLE
========================= */

[contenteditable="true"]:focus{
  outline:none;
}

/* =========================
   BUTTON
========================= */

.cp-btn{
  display:inline-block;
  padding:4px 7px;
  margin-top:8px;
  color:black;
  cursor:pointer;
  user-select:none;
  font-weight:700;
  letter-spacing:0.04em;
  background:var(--brand-yellow);
  text-align:center;
  transition:all 0.15s ease;
}

.cp-btn:hover{
  background:var(--accent-magenta);
  color:#000;
}

.cp-btn:active{
  transform:translateY(1px);
}

/* =========================
   BLOCK SYSTEM
========================= */

.block-item{
  margin:20px 0;
  font-family:inherit;
}

.block-frame{
  position:relative;
  border:1px solid var(--link-cyan);
  border-radius:2px;
  background:var(--bg);
  padding:14px 10px 10px;
}

.block-frame::before{
  content:"";
  position:absolute;
  top:3px;
  left:0;
  right:0;
  height:1px;
  background:var(--link-cyan);
  box-shadow:
    0 4px 0 var(--link-cyan),
    0 8px 0 var(--link-cyan);
}

/* =========================
   BLOCK HEADER
========================= */

.block-header{
  position:absolute;
  top:-5px;
  left:10px;
  right:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.block-title{
  padding:0 8px;
  background:var(--bg);
  color:var(--accent-magenta);
  letter-spacing:1px;
  font-size:18px;
}

/* =========================
   ACTIONS
========================= */

.block-actions{
  display:flex;
  gap:10px;
  padding:0 8px;
  background:#070b12;
  user-select:none;
  font-size:18px;
}

.block-action{
  cursor:pointer;
  color:var(--brand-yellow);
  font-weight:700;
}

/* =========================
   CREATE BUTTON
========================= */

.block-create{
  cursor:pointer;
  margin-bottom:0;
  color:var(--brand-yellow);
}

/* =========================
   INPUTS
========================= */

.block-input,
.block-variant,
.block-textarea,
.block-body input,
.block-body select{
  background:transparent !important;
  border:none;
  outline:none;
  box-shadow:none;
  color:var(--brand-yellow);
  font:inherit;
  font-size:18px;
}


/* =========================
   TEXTAREA
========================= */

.block-quote-textarea{
  width:100%;
  min-height:34px;
  resize:none;
  overflow:hidden;
  background:transparent;
  border:none;
  outline:none;
  color:var(--white);
  font:inherit;
  padding:0;
  line-height:1.3;
  white-space:pre-wrap;
}

/* =========================
   IMAGE
========================= */

.image-preview-container{
  display:flex;
  gap:10px;
  margin-top:6px;
}

.image-thumb{
  position:relative;
  width:90px;
  height:60px;
  overflow:hidden;
  border:1px solid var(--link-cyan);
}

.image-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.image-delete{
  position:absolute;
  top:2px;
  right:4px;
  color:red;
  font-weight:bold;
  cursor:pointer;
}

/* =========================
   TERMINAL LOG
========================= */

.cursor-terminal-log{
  margin-top:12px;
  font-size:22px;
  color:var(--C64_vilagos_kek);
  white-space:pre-wrap;
}

/* =========================
   ACTION
========================= */

.cursor-action{
  margin-top:10px;
  cursor:pointer;
  color:var(--accent-magenta);
  letter-spacing:1px;
}

.cursor-action:hover{
  color:#fff;
  text-shadow:0 0 8px var(--accent-magenta);
}

.view-editor .single-main .hero {
  display: flex;
  align-items: flex-end;
}

.view-editor .single-main .hero > .inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
}

/* =========================================================
   EDITOR HERO – ugyanaz a viselkedés, mint régen a single-main alatt
========================================================= */

.editor-panel-left .hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 60vh;
}

.editor-hero-upload-btn{
  position:absolute;
  top:16px;
  right:16px;
  z-index:5;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--brand-yellow);
  border-radius:2px;
  background:rgba(0,0,0,.62);
  color:var(--brand-yellow);
  font:inherit;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 18px rgba(255,224,102,.22);
}

.editor-hero-upload-btn:hover{
  color:#000;
  background:var(--brand-yellow);
  box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 0 22px rgba(255,224,102,.45);
}

.editor-panel-left .hero > .inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  padding-bottom: 18px;
}

/* EDITORBAN finomabb shadow */
#editor-hero.hero-text-shadow_30::before {
  background: linear-gradient(
      to bottom,
      rgba(0, 3, 20, 0.0) 0%,
      rgba(0, 3, 20, 0.3) 90%,
      rgba(0, 3, 20, 0.5) 94%,
      rgba(0, 3, 20, 0.6) 100%
  );
}

.articles-list {
  overflow: hidden;
}