/* ════════════════════════════════════════════════════════════════════════
   Blokken — editor (ledengedeelte) en weergave (publieke website)

   Twee helften in één bestand, zodat wat je tijdens het schrijven ziet en
   wat de bezoeker krijgt niet uit elkaar kunnen groeien. De editorhelft
   wordt alleen in het ledengedeelte geladen.
   ════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 1. EDITOR ═══════════════ */

.blok-editor { display: flex; flex-direction: column; gap: 14px; }
.blok-rij    { display: flex; flex-direction: column; gap: 12px; }

.blok-leeg {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 46px 20px; border: 2px dashed var(--line-strong);
    border-radius: var(--radius); color: var(--ink-mute); text-align: center;
}
.blok-leeg p { margin: 0; font-size: 14px; }

.blok {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.blok.sleept { opacity: .45; }
.blok.doel   { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.blok-kop-balk {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px 8px 6px;
    background: var(--cream-soft);
    border-bottom: 1px solid var(--line);
}
.blok-kop-balk > .ico { color: var(--ink-mute); }
.blok-greep {
    display: inline-flex; padding: 5px; border-radius: 7px;
    color: var(--ink-mute); cursor: grab;
}
.blok-greep:active { cursor: grabbing; }
.blok-greep:hover  { background: var(--line); color: var(--ink); }
.blok-soort {
    flex: 1; font-size: 11px; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-soft);
}
.blok-knop {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 0; border-radius: 7px;
    background: none; color: var(--ink-soft); cursor: pointer;
    transition: background .15s, color .15s;
}
.blok-knop:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.blok-knop:disabled { opacity: .28; cursor: default; }
.blok-knop.gevaar:hover:not(:disabled) { background: var(--err-soft); color: var(--err); }

.blok-lijf { padding: 14px; display: flex; flex-direction: column; gap: 10px; }

.blok-invoer {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--line-strong); border-radius: 9px;
    background: var(--field-bg); color: var(--ink);
    font-family: inherit; font-size: 14.5px;
}
.blok-invoer:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.blok-kop-invoer {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.35rem; font-weight: 600;
}
.blok-bijschrift { font-size: 13px; }

/* Tekstblok met opmaakbalk */
.blok-balk { display: flex; gap: 3px; flex-wrap: wrap; }
.blok-balk button {
    min-width: 32px; height: 30px; padding: 0 8px;
    border: 1px solid var(--line-strong); border-radius: 7px;
    background: var(--paper); color: var(--ink);
    font-family: inherit; font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.blok-balk button:hover { background: var(--cream-soft); border-color: var(--accent); color: var(--accent); }
.blok-tekstvak {
    min-height: 96px; padding: 12px 14px;
    border: 1px solid var(--line-strong); border-radius: 9px;
    background: var(--field-bg); color: var(--ink);
    font-size: 15px; line-height: 1.7;
}
.blok-tekstvak:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.blok-tekstvak:empty::before { content: attr(data-leeg); color: var(--ink-mute); }
.blok-tekstvak a { color: var(--accent); text-decoration: underline; }

/* Opsomming */
.blok-lijst-invoer { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.blok-lijst-invoer li { display: flex; align-items: center; gap: 6px; }
.blok-klein {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--paper); color: var(--ink-soft);
    font-family: inherit; font-size: 13px; cursor: pointer;
}
.blok-klein:hover { border-color: var(--accent); color: var(--accent); }

/* Foto en document */
.blok-neerzet {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 30px 20px; text-align: center; cursor: pointer;
    border: 2px dashed var(--line-strong); border-radius: 11px;
    color: var(--ink-mute); transition: border-color .15s, background .15s, color .15s;
}
.blok-neerzet:hover, .blok-neerzet:focus-visible, .blok-neerzet.over {
    border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
.blok-neerzet .titel { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.blok-neerzet .sub   { font-size: 12.5px; }

.blok-bestand {
    display: flex; align-items: center; gap: 12px;
    padding: 10px; border: 1px solid var(--line); border-radius: 11px;
    background: var(--cream-soft);
}
.blok-bestand img {
    width: 92px; height: 68px; object-fit: cover;
    border-radius: 7px; background: var(--line); flex-shrink: 0;
}
.blok-doc-ico { color: var(--accent); flex-shrink: 0; padding: 0 8px; }
.blok-bestandsnaam {
    flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-soft);
    word-break: break-all;
}
.blok-bestand.over { border-color: var(--accent); }

.blok-voortgang { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-soft); }
.blok-voortgang .balk {
    height: 4px; width: 0; border-radius: 2px; background: var(--accent);
    transition: width .3s; flex-shrink: 0; min-width: 4px;
}
.blok-voortgang.mislukt {
    padding: 10px 12px; border-radius: 9px;
    background: var(--err-soft); border: 1px solid var(--err);
    align-items: flex-start;
}
.blok-voortgang.mislukt .balk { display: none; }
.blok-voortgang.mislukt .tekst {
    color: var(--err-text, var(--err)); display: inline-flex; align-items: center;
    gap: 6px; flex-wrap: wrap; line-height: 1.5;
}
.blok-opnieuw {
    border: 0; background: none; padding: 0;
    color: var(--err); font-family: inherit; font-size: inherit;
    text-decoration: underline; cursor: pointer;
}

/* Video */
.blok-video-voorbeeld { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.blok-video-voorbeeld img { width: 120px; border-radius: 7px; }
.blok-ok   { color: var(--ok);  display: inline-flex; align-items: center; gap: 5px; }
.blok-fout { color: var(--err); display: inline-flex; align-items: center; gap: 5px; }

/* Toevoegbalk */
.blok-toevoegen {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.blok-toevoegen-lbl {
    font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--ink-mute); margin-right: 4px;
}
.blok-nieuw {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: 50px;
    background: var(--paper); color: var(--ink);
    font-family: inherit; font-size: 13px; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.blok-nieuw:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

@media (max-width: 560px) {
    .blok-lijf { padding: 11px; }
    .blok-bestand img { width: 64px; height: 50px; }
}


/* Sleep je een bestand over de editor, dan licht het hele gebied op: dat
   maakt zichtbaar dat je het overal mag loslaten en niet in één kadertje
   hoeft te mikken. */
.blok-editor.sleept-over {
    outline: 2px dashed var(--accent);
    outline-offset: 6px;
    border-radius: var(--radius);
    background: var(--accent-soft);
}
.blok-editor.sleept-over .blok-rij { pointer-events: none; }

/* Kader en speciale opmaak */
.blok-uitleg {
    margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-mute);
    display: flex; gap: 7px; align-items: flex-start;
}
.blok-uitleg .ico { flex-shrink: 0; margin-top: 2px; }
.blok-accent-vak {
    background: var(--gold-soft);
    border-color: var(--gold);
    font-weight: 600;
}
.blok-code {
    width: 100%; padding: 11px 13px; resize: vertical;
    border: 1px solid var(--line-strong); border-radius: 9px;
    background: var(--cream-soft); color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px; line-height: 1.6;
}
.blok-code:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Eén vast fotoveld (de hoofdfoto van een nieuwsbericht). Hergebruikt het
   fotoblok, maar zonder de omlijsting die bij een rij blokken hoort: je kunt
   hem niet verplaatsen, niet verwijderen en er komt er geen tweede bij. */
.blok-enkel .blok-bijschrift { display: none; }
.blok-enkel .blok { border: 0; box-shadow: none; background: none; }
.blok-enkel .blok-lijf { padding: 0; }
.blok-enkel .blok-neerzet { padding: 20px 16px; }

/* ═══════════════ 2. WEERGAVE (publieke website én voorvertoning) ═══════════════ */

.blok-kop {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.75rem; font-weight: 600; color: var(--accent);
    margin: 42px 0 16px; padding-bottom: 10px;
    border-bottom: 2px solid var(--gold);
}
.blok-kop:first-child { margin-top: 0; }

.blok-tekst { font-size: 1.02rem; line-height: 1.85; margin: 0 0 20px; color: var(--ink); }
.blok-tekst a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.blok-tekst strong { font-weight: 700; }

.blok-lijst { margin: 0 0 22px; padding-left: 22px; line-height: 1.85; }
.blok-lijst li { margin-bottom: 7px; }

.blok-foto, .blok-video { margin: 34px 0; }
.blok-foto img {
    display: block; width: 100%; height: auto;
    border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.blok-foto figcaption, .blok-video figcaption {
    margin-top: 10px; font-size: 13px; font-style: italic;
    color: var(--ink-mute); text-align: center;
}

.blok-document {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 18px; margin: 0 0 12px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); color: var(--ink);
    text-decoration: none; box-shadow: var(--shadow-sm);
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.blok-document:hover {
    border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.blok-document > .ico:first-child { color: var(--accent); }
.blok-document > .ico:last-child  { color: var(--ink-mute); margin-left: auto; }
.blok-document-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blok-document-tekst .naam { font-weight: 600; font-size: 15px; }
.blok-document-tekst .meta {
    font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-mute);
}