/* ============================================================
   Bestand: public_html/assets/modules/prikbord/publiek.css
   ============================================================

   Het publieke prikbord: de foto op een briefje en de knop naar het CMS. Eén blad voor elk thema:
   het algemene sjabloon (stad-*) en de vier dorpen (fr-*). Kleuren komen uit de --fr-variabelen
   van het thema, met een neutrale terugval. Oproepen plaatsen gebeurt in het CMS.
   ============================================================ */

/* De foto op een briefje: over de hele breedte, niet hoger dan het briefje breed is, met de hoeken van het thema. */
.prik-foto {
    margin: 0.55rem 0 0.2rem;
    padding: 0;
}

.prik-foto picture {
    display: block;
}

.prik-foto-beeld {
    display: block;
    width: 100%;
    height: auto;
    max-height: 22rem;
    object-fit: cover;
    border-radius: var(--fr-hoek-klein, 6px);
    border: 1px solid var(--fr-rand, rgba(0, 0, 0, 0.12));
    background-color: var(--fr-tint, #f4f2ec);
}

.prik-kaart { align-items: start; }
.prik-kaart-zonder-foto { grid-template-columns: minmax(0, 1fr); }
.prik-kaart picture { display: block; width: 100%; height: 100%; }

.prik-plaatsen {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 28px;
    padding: 22px;
    border: 1px solid var(--fr-rand, var(--portal-border, #e5e7eb));
    border-radius: var(--fr-hoek-knop, 10px);
    background: var(--fr-kaart, var(--portal-surface, #fff));
    color: var(--fr-tekst, var(--portal-text, #374151));
    font: 400 0.875rem/1.65 var(--fr-sans, system-ui, sans-serif);
}
.prik-plaatsen-icoon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    height: 40px;
    border: 1px solid var(--fr-rand, var(--portal-border, #e5e7eb));
    border-radius: var(--fr-hoek-klein, 8px);
    font-size: 1.25rem;
}
.prik-plaatsen-inhoud { min-width: 0; }
.prik-plaatsen h2,
#fr-main .prik-plaatsen h2 { margin: 0 0 8px; color: inherit; font: 700 1rem/1.4 var(--fr-sans, system-ui, sans-serif); }
.prik-plaatsen p { margin: 0; overflow-wrap: anywhere; }
.prik-plaatsen-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
.prik-plaatsen-acties > a:not(.kh-knop):not(.prik-plaatsen-knop) { color: inherit; text-underline-offset: 3px; }
.prik-plaatsen .prik-plaatsen-zonder { margin-top: 12px; font-size: 0.9rem; }
.prik-plaatsen-zonder a { color: inherit; text-underline-offset: 3px; }
.prik-plaatsen-knop { display: inline-block; padding: 12px 20px; border-radius: var(--fr-hoek-klein, 6px); background: var(--fr-blauw, #1f4f8a); color: #fff; font-weight: 600; text-decoration: none; }
.prik-plaatsen-knop:hover { color: #fff; background: var(--fr-ink, #17385f); }

/* Het standaardsjabloon heeft geen eigen donkere portalkleuren. */
html[data-thema="donker"] .site-theme-default .prik-plaatsen {
    --portal-surface: #16223a;
    --portal-text: #e8eefb;
    --portal-border: rgba(146, 166, 204, 0.22);
}

@media (max-width: 480px) {
    .prik-plaatsen { flex-direction: column; gap: 12px; padding: 18px; }
    .prik-plaatsen-icoon { flex-basis: auto; width: 40px; }
}

/* ── Het bord naar Theo's ontwerp (C587): één kolom, groepen per dag, foto rechts, datum, prijs en knop. ── */
.prik-bord { display: flex; flex-direction: column; gap: 0.9rem; }
.prik-groep { display: flex; align-items: baseline; gap: 0.5rem; margin: 1.1rem 0 0.1rem; font: 700 1.25rem/1.3 var(--fr-serif, Georgia, serif); color: var(--fr-kop, var(--fr-tekst, inherit)); }
.prik-groep:first-child { margin-top: 0.2rem; }
.prik-groep span { font: 500 0.8rem/1 var(--fr-sans, system-ui, sans-serif); color: var(--fr-stil, var(--fr-tekst2, #66706d)); }
.prik-briefje { padding: 1.1rem 1.2rem 0.9rem; transform: none; }
.prik-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.prik-kop .prik-soort { margin: 0; }
.prik-nieuw { display: inline-flex; align-items: center; gap: 0.3rem; font: 700 0.72rem/1 var(--fr-sans, system-ui, sans-serif); color: var(--fr-amber, #a66b12); }
.prik-nieuw::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.prik-waar { margin-left: auto; font: 400 0.85rem/1.3 var(--fr-sans, system-ui, sans-serif); color: var(--fr-stil, var(--fr-tekst2, #66706d)); }
.prik-lijf { display: grid; gap: 0.75rem; margin-top: 0.35rem; }
.prik-lijf.heeft-foto { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .prik-lijf.heeft-foto { grid-template-columns: minmax(0, 1fr) minmax(150px, 34%); align-items: start; } }
.prik-lijf .prik-foto { margin: 0.3rem 0 0; }
.prik-lijf .prik-foto .prik-foto-beeld { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prik-titel { margin: 0.35rem 0 0; }
.prik-titel a { color: inherit; text-decoration: none; }
.prik-titel a:hover, .prik-titel a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.prik-tekst { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.prik-feiten { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0; }
.prik-datum { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.35rem 0.7rem; border-radius: 8px; background: color-mix(in srgb, var(--fr-rand, #d6dedb) 45%, transparent); font: 400 0.82rem/1.3 var(--fr-sans, system-ui, sans-serif); }
.prik-datum-dag { font-size: 0.78rem; text-transform: lowercase; }
.prik-datum-dag strong { font: 700 1rem/1 var(--fr-serif, Georgia, serif); margin-right: 0.15rem; }
.prik-datum.is-voorbij { opacity: 0.7; }
.prik-prijs { display: inline-block; padding: 0.3rem 0.65rem; border-radius: 6px; border: 1px solid var(--fr-rand, #d6dedb); font: 600 0.8rem/1.2 var(--fr-sans, system-ui, sans-serif); }
.prik-opgelost { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.6rem 0 0; padding: 0.35rem 0.7rem; border-radius: 8px; background: color-mix(in srgb, var(--fr-open-t, #287448) 13%, transparent); color: var(--fr-open-t, #287448); font: 400 0.82rem/1.4 var(--fr-sans, system-ui, sans-serif); }
.prik-briefje.is-opgelost .prik-titel, .prik-briefje.is-opgelost .prik-tekst { opacity: 0.75; }
.prik-verloopt { margin: 0.55rem 0 0; font: 600 0.85rem/1.3 var(--fr-sans, system-ui, sans-serif); color: var(--fr-amber, #a66b12); }
.prik-voet { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--fr-rand, #d6dedb); align-items: center; }
.prik-wie { font-weight: 600; color: var(--fr-tekst, inherit); }
.prik-actie { font: 600 0.84rem/1.3 var(--fr-sans, system-ui, sans-serif); color: var(--fr-link, var(--fr-blauw, #1d4e79)); text-decoration: none; }
.prik-actie:hover, .prik-actie:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.prik-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 1rem 0 0.4rem; }
.prik-ophangen { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.55rem 1.1rem; border-radius: 999px; background: var(--fr-link, var(--fr-blauw, #1d4e79)); color: var(--fr-kaart, #fff); font: 700 0.9rem/1.2 var(--fr-sans, system-ui, sans-serif); text-decoration: none; }
.prik-ophangen:hover, .prik-ophangen:focus-visible { filter: brightness(1.08); }
.prik-telling { margin: 0 0 0 auto; font: 400 0.84rem/1.3 var(--fr-sans, system-ui, sans-serif); color: var(--fr-stil, var(--fr-tekst2, #66706d)); }
.prik-volgorde { display: inline-flex; gap: 0.25rem; padding: 0.2rem; border-radius: 999px; border: 1px solid var(--fr-rand, #d6dedb); }
.prik-volgorde a { display: inline-flex; align-items: center; min-height: 36px; padding: 0.3rem 0.8rem; border-radius: 999px; font: 600 0.8rem/1.2 var(--fr-sans, system-ui, sans-serif); color: var(--fr-tekst, inherit); text-decoration: none; }
.prik-volgorde a.is-aan { background: var(--fr-kop, var(--fr-tekst, #193f35)); color: var(--fr-kaart, #fff); }
@media (max-width: 640px) { .prik-telling { margin-left: 0; flex-basis: 100%; } .prik-ophangen { flex: 1 1 auto; justify-content: center; } .prik-waar { margin-left: 0; flex-basis: 100%; } }

/* Het venster van één briefje. */
.prik-venster { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--fr-rand, #d6dedb); border-radius: 14px; background: var(--fr-kaart, #fff); color: var(--fr-tekst, #202c29); overflow: auto; overscroll-behavior: contain; }
.prik-venster::backdrop { background: rgb(12 24 30 / 0.6); }
.prik-venster-open { overflow: hidden; }
.prik-venster-kop { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem 0.9rem; border-bottom: 1px solid var(--fr-rand, #d6dedb); background: var(--fr-kaart, #fff); }
.prik-venster-boven { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0 0 0.4rem; font: 400 0.8rem/1.3 var(--fr-sans, system-ui, sans-serif); color: var(--fr-stil, var(--fr-tekst2, #66706d)); }
.prik-venster-kop h2 { margin: 0; font: 700 1.5rem/1.2 var(--fr-serif, Georgia, serif); color: var(--fr-kop, var(--fr-tekst, inherit)); overflow-wrap: break-word; }
.prik-venster[open]:not(:modal) { position: fixed; inset: 4vh 0 auto; z-index: 1000; max-height: 92vh; margin: 0 auto; box-shadow: 0 12px 40px rgb(0 0 0 / 0.3); }
.prik-sluit { text-decoration: none; display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--fr-rand, #d6dedb); border-radius: 50%; background: var(--fr-kaart, #fff); color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.prik-venster-lijf { display: grid; gap: 1rem; padding: 1.1rem 1.3rem 1.4rem; }
.prik-venster-foto { margin: 0; }
.prik-venster-foto .prik-foto-beeld { width: 100%; max-height: 420px; object-fit: contain; border-radius: 10px; background: color-mix(in srgb, var(--fr-rand, #d6dedb) 35%, transparent); }
.prik-venster-tekst { margin: 0; white-space: pre-line; font: 400 1rem/1.65 var(--fr-sans, system-ui, sans-serif); overflow-wrap: break-word; }
.prik-wanneer { display: flex; gap: 1rem; align-items: flex-start; padding: 0.8rem 1rem; border-radius: 10px; background: color-mix(in srgb, var(--fr-rand, #d6dedb) 40%, transparent); }
.prik-wanneer p { margin: 0; font: 400 0.9rem/1.5 var(--fr-sans, system-ui, sans-serif); }
.prik-wanneer-dag { display: grid; justify-items: center; min-width: 3.2rem; }
.prik-wanneer-dag strong { font: 700 1.6rem/1 var(--fr-serif, Georgia, serif); }
.prik-wanneer-dag span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.prik-wanneer-tijd { font-weight: 700 !important; }
.prik-agenda { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; font: 600 0.85rem/1.3 var(--fr-sans, system-ui, sans-serif); color: var(--fr-link, var(--fr-blauw, #1d4e79)); }
.prik-wanneer.is-voorbij { opacity: 0.75; }
.prik-hoofdknop { justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 46px; padding: 0.6rem 1.3rem; border-radius: 999px; background: var(--fr-link, var(--fr-blauw, #1d4e79)); color: var(--fr-kaart, #fff); font: 700 0.92rem/1.2 var(--fr-sans, system-ui, sans-serif); text-decoration: none; }
.prik-venster-blokken { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.prik-blok { padding: 0.9rem 1rem; border: 1px solid var(--fr-rand, #d6dedb); border-radius: 10px; }
.prik-blok h3 { margin: 0 0 0.45rem; font: 700 0.72rem/1.2 var(--fr-sans, system-ui, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fr-stil, var(--fr-tekst2, #66706d)); }
.prik-blok p { margin: 0.25rem 0 0; }
.prik-blok-naam { font: 700 1rem/1.3 var(--fr-serif, Georgia, serif); }
.prik-blok-klein { font: 400 0.8rem/1.45 var(--fr-sans, system-ui, sans-serif); color: var(--fr-stil, var(--fr-tekst2, #66706d)); }
.prik-blok-klein:empty { display: none; }
.prik-delen { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.prik-delen a, .prik-delen button { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0; border: 0; background: none; color: var(--fr-link, var(--fr-blauw, #1d4e79)); font: 600 0.88rem/1.3 var(--fr-sans, system-ui, sans-serif); text-decoration: none; cursor: pointer; }
.prik-delen a:hover, .prik-delen button:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
    .prik-venster { width: 100%; max-width: none; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: 16px 16px 0 0; }
    .prik-venster-kop h2 { font-size: 1.25rem; }
    .prik-venster-lijf { padding-bottom: calc(1.4rem + var(--veilige-onderrand, env(safe-area-inset-bottom, 0px))); }
}
@media print {
    html.prik-print body * { visibility: hidden; }
    html.prik-print dialog.is-print, html.prik-print dialog.is-print * { visibility: visible; }
    html.prik-print dialog.is-print { position: absolute; inset: 0; width: auto; max-width: none; max-height: none; margin: 0; overflow: visible; border: 0; box-shadow: none; }
    html.prik-print dialog.is-print .prik-sluit, html.prik-print dialog.is-print .prik-delen, html.prik-print dialog.is-print .prik-agenda,
    html.prik-print dialog.is-print .prik-video, html.prik-print dialog.is-print audio { display: none; }
}

.prik-dag { display: flex; flex-direction: column; gap: 0.9rem; }
.prik-dag[hidden] { display: none; }

/* Reageren op een briefje (C588). */
.prik-reacties { font-weight: 400; color: var(--fr-stil, var(--fr-tekst2, #66706d)); }
.prik-reageer-blok { padding: 0.9rem 1rem; border: 1px solid var(--fr-rand, #d6dedb); border-radius: 10px; }
.prik-reageer-blok h3 { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.6rem; font: 700 1rem/1.3 var(--fr-serif, Georgia, serif); }
.prik-reageer-blok h3 span { font: 400 0.8rem/1 var(--fr-sans, system-ui, sans-serif); color: var(--fr-stil, var(--fr-tekst2, #66706d)); }
.prik-reageer-knop { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; font: 600 0.9rem/1.3 var(--fr-sans, system-ui, sans-serif); color: var(--fr-link, var(--fr-blauw, #1d4e79)); }
.prik-reageer-formulier { display: grid; gap: 0.5rem; }
.prik-reageer-formulier label { display: grid; gap: 0.25rem; font: 600 0.85rem/1.3 var(--fr-sans, system-ui, sans-serif); }
.prik-reageer-formulier textarea, .prik-reageer-formulier input:not([type="hidden"]) { width: 100%; min-height: 44px; padding: 0.55rem 0.7rem; border: 1px solid var(--fr-rand, #c9d2cf); border-radius: 8px; background: var(--fr-kaart, #fff); color: var(--fr-tekst, inherit); font: 400 max(16px, 0.95rem)/1.45 var(--fr-sans, system-ui, sans-serif); }
.prik-reageer-rij { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.prik-reageer-uitleg { margin: 0; font: 400 0.85rem/1.45 var(--fr-sans, system-ui, sans-serif); color: var(--fr-stil, var(--fr-tekst2, #66706d)); }
.prik-reageer-fout { margin: 0; padding: 0.5rem 0.7rem; border-radius: 8px; background: color-mix(in srgb, var(--fr-rood, #af3438) 12%, transparent); color: var(--fr-rood, #af3438); font-size: 0.86rem; }
.prik-reageer-klaar { margin: 0; padding: 0.6rem 0.8rem; border-radius: 8px; background: color-mix(in srgb, var(--fr-open-t, #287448) 13%, transparent); color: var(--fr-open-t, #287448); }
.prik-reageer-verstopt { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.prik-reageer-pagina { display: grid; gap: 1rem; max-width: 46rem; }
.prik-reageer-pagina h1 { margin: 0; font: 700 1.6rem/1.25 var(--fr-serif, Georgia, serif); }
.prik-reageer-briefje { margin: 0; padding: 0.8rem 1rem; border-left: 3px solid var(--fr-rand, #d6dedb); font-size: 0.95rem; white-space: pre-line; }
.prik-terug { margin: 0; }

/* Bijlagen en video bij een briefje (C589). De speler laadt pas na een klik. */
.prik-bijlage-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.55rem 0 0; }
.prik-bijlage-tags span { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--fr-link, var(--fr-blauw, #1d4e79)) 10%, transparent); font: 600 0.82rem/1.3 var(--fr-sans, system-ui, sans-serif); color: var(--fr-link, var(--fr-blauw, #1d4e79)); }
.prik-bijlagen h3 { margin: 0 0 0.6rem; font: 700 0.72rem/1.2 var(--fr-sans, system-ui, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fr-stil, var(--fr-tekst2, #66706d)); }
.prik-bijlage-lijst { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.prik-bijlage { padding: 0.75rem 0.9rem; border: 1px solid var(--fr-rand, #d6dedb); border-radius: 10px; }
.prik-bijlage-kop { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.prik-bijlage-soort { flex: 0 0 auto; text-transform: uppercase; padding: 0.2rem 0.45rem; border-radius: 6px; background: var(--fr-link, var(--fr-blauw, #1d4e79)); color: var(--fr-kaart, #fff); font: 700 0.68rem/1.2 var(--fr-sans, system-ui, sans-serif); letter-spacing: 0.06em; }
.prik-bijlage-naam { flex: 1 1 auto; min-width: 0; font: 600 0.92rem/1.35 var(--fr-sans, system-ui, sans-serif); overflow-wrap: anywhere; }
.prik-bijlage-naam small { font-weight: 400; color: var(--fr-stil, var(--fr-tekst2, #66706d)); white-space: nowrap; }
.prik-bijlage-open { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; font: 700 0.88rem/1.2 var(--fr-sans, system-ui, sans-serif); color: var(--fr-link, var(--fr-blauw, #1d4e79)); white-space: nowrap; }
.prik-bijlage audio { display: block; width: 100%; margin-top: 0.6rem; }
.prik-video { margin: 0 0 0.6rem; }
.prik-video-start { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #1b2a3a; color: #fff; font: 700 0.95rem/1.2 var(--fr-sans, system-ui, sans-serif); cursor: pointer; }
.prik-video-start[hidden] { display: none; }
.prik-video-knop { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); font-size: 2rem; }
.prik-video-start:hover .prik-video-knop, .prik-video-start:focus-visible .prik-video-knop { background: rgba(255, 255, 255, 0.28); }
.prik-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; }
.prik-video-uitleg { margin: 0.45rem 0 0; font: 400 0.8rem/1.45 var(--fr-sans, system-ui, sans-serif); color: var(--fr-stil, var(--fr-tekst2, #66706d)); }
.prik-video.is-geladen .prik-video-uitleg { display: none; }