/* =====================================================
   Basis — de pagina is precies één scherm hoog
   ===================================================== */

:root {
    --nacht:  #0D0D10;
    --krijt:  #F3F0EA;
    --grijs:  #9C978D;
    --accent: #FFB020;                 /* komt uit config.php */
    --lijn:   rgba(243, 240, 234, .14);
    --sluier: rgba(13, 13, 16, .82);   /* donkerte over de achtergrondfoto */

    --display: 'Syne', 'Trebuchet MS', sans-serif;
    --tekst:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

    --wrap: 720px;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;                  /* de pagina zelf scrolt niet */
}

body {
    color: var(--krijt);
    font-family: var(--tekst);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;

    /* De enige achtergrond: de foto, met een sluier erover voor leesbaarheid. */
    background:
        linear-gradient(var(--sluier), var(--sluier)),
        url('../images/background.png') center / cover no-repeat fixed,
        var(--nacht);
}

img { max-width: 100%; display: block; }
a   { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.scherm {
    height: 100svh;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}

/* =====================================================
   Taalschakelaar
   ===================================================== */

.taal {
    position: absolute;
    top: 14px;
    right: 20px;
    z-index: 5;
    padding: 5px 12px;
    border: 1px solid var(--lijn);
    border-radius: 20px;
    background: rgba(20, 20, 25, .6);
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--grijs);
    transition: color .2s ease, border-color .2s ease;
}

.taal:hover {
    color: var(--krijt);
    border-color: rgba(243, 240, 234, .35);
}

/* =====================================================
   Introtekst
   ===================================================== */

.intro {
    max-width: 62ch;
    margin: clamp(12px, 1.8vh, 18px) auto 0;
    font-size: .85rem;
    line-height: 1.5;
    color: rgba(243, 240, 234, .74);
}

.intro p { margin: 0; }
.intro p + p { margin-top: .6em; }

/* =====================================================
   Logo
   ===================================================== */

.kop {
    flex: 0 0 auto;
    text-align: center;
    padding: clamp(20px, 3.5vh, 42px) 0 clamp(16px, 2.5vh, 26px);
}

/* Het logo krijgt een gouden lichtstreep die van links naar rechts loopt.
   De gloed is met een masker uitgesneden op de vorm van het logo, dus hij
   volgt de letters en niet het rechthoekige kader eromheen. */
.kop__merk {
    position: relative;
    display: inline-block;
    filter: drop-shadow(0 0 22px rgba(255, 176, 32, .22));
}

.kop__glans {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
    -webkit-mask: url('../images/logo.png') center / contain no-repeat;
    mask: url('../images/logo.png') center / contain no-repeat;
}

.kop__glans::before {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 42%;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 214, 138, .35) 30%,
        rgba(255, 246, 224, .95) 50%,
        rgba(255, 214, 138, .35) 70%,
        transparent 100%);
    filter: blur(7px);
    transform: translateX(-170%);
    animation: glans 4s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes glans {
    0%        { transform: translateX(-170%); }
    72%, 100% { transform: translateX(340%); }
}

/* Zonder mask-ondersteuning zou de gloed als blok over het logo lopen. */
@supports not ((-webkit-mask: url('')) or (mask: url(''))) {
    .kop__glans { display: none; }
}

.kop__logo {
    width: min(690px, 92vw);
    max-height: 26vh;
    object-fit: contain;
    height: auto;
    margin: 0 auto;
}

.kop__tagline {
    margin: 12px auto 0;
    max-width: 36ch;
    font-size: .95rem;
    color: rgba(243, 240, 234, .78);
}

/* =====================================================
   Agenda — vult de rest van het scherm
   ===================================================== */

.agenda {
    flex: 1 1 auto;
    min-height: 0;                     /* nodig, anders groeit hij buiten beeld */
    display: flex;
    flex-direction: column;
}

.lijst {
    list-style: none;
    margin: 0;
    padding: 0 2px 2px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;                  /* nergens scrollen, ook niet in de lijst */
}

.leeg {
    padding: 26px 0;
    color: var(--grijs);
    text-align: center;
}

/* Kaartje bij de deur: geperforeerde rand tussen datum en tekst */
.evt {
    --stub: 78px;
    display: grid;
    grid-template-columns: var(--stub) 1fr auto;
    align-items: center;
    gap: 0 18px;
    background: rgba(20, 20, 25, .78);
    border: 1px solid var(--lijn);
    border-radius: 10px;
    padding-right: 20px;
    transition: background .2s ease, border-color .2s ease;
}

.evt:hover {
    background: rgba(28, 28, 34, .86);
    border-color: rgba(243, 240, 234, .28);
}

@supports (mask-composite: intersect) {
    .evt {
        border: 0;
        mask-image:
            radial-gradient(circle 8px at var(--stub) 0, transparent 98%, #000 100%),
            radial-gradient(circle 8px at var(--stub) 100%, transparent 98%, #000 100%);
        mask-composite: intersect;
    }
}

.evt__datum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    border-right: 1px dashed rgba(243, 240, 234, .22);
    text-align: center;
}

.evt__dag {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--accent);
}

.evt__maand {
    margin-top: 3px;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .18em;
}

.evt__body { padding: 13px 0; min-width: 0; }

.evt__titel {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.evt__meta {
    margin: 4px 0 0;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--grijs);
}

.evt__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--accent);
    color: var(--accent);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.evt__link span { transition: transform .2s ease; }
.evt__link:hover span { transform: translateX(3px); }

/* =====================================================
   Voettekst
   ===================================================== */

.voet {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 0 16px;
    font-size: .78rem;
    color: var(--grijs);
}

.voet a { text-decoration: none; }
.voet a:hover { color: var(--accent); }

/* =====================================================
   Klein scherm
   ===================================================== */

@media (max-width: 560px) {
    .evt {
        --stub: 64px;
        grid-template-columns: var(--stub) 1fr;
        padding-right: 16px;
    }
    .evt__link {
        grid-column: 2;
        margin: 0 0 13px;
    }
    .evt__body { padding-bottom: 6px; }
    .evt__dag { font-size: 1.45rem; }
    .kop__tagline { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
    .evt, .evt__link span { transition: none; }
    .kop__glans::before { animation: none; opacity: 0; }
}

/* =====================================================
   Twee frames naast elkaar, elk met een eigen film
   ===================================================== */

.posts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 460px;
    margin: clamp(14px, 2vh, 22px) auto 0;
}

.post {
    background: rgba(20, 20, 25, .82);
    border: 1px solid var(--lijn);
    border-radius: 10px;
    overflow: hidden;
    text-align: left;
}

.post__kop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}

.post__avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(from 0deg, #F9CE34, #EE2A7B, #6228D7, #F9CE34);
}

.post__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--nacht);
}

.post__naam {
    font-size: .78rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post__beeld {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #000;
}

.post__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post__acties {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 0;
}

.knopje {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
    color: var(--krijt);
    transition: transform .15s ease, color .2s ease;
}

.knopje svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .9;
}

.knopje:active { transform: scale(.86); }

/* Plop: drie keer opveren bij een klik */
.knopje.is-plop svg { animation: plop .72s cubic-bezier(.3, 1.6, .4, 1); }

@keyframes plop {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.5); }
    28%  { transform: scale(.82); }
    44%  { transform: scale(1.28); }
    58%  { transform: scale(.9); }
    74%  { transform: scale(1.13); }
    88%  { transform: scale(.97); }
    100% { transform: scale(1); }
}

.knopje.is-aan { color: #FF3B5C; }
.knopje.is-aan svg { fill: currentColor; opacity: 1; }

.knopje.duim.is-aan { color: var(--accent); }

.post__telling {
    margin-left: auto;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--grijs);
}

/* Het hart dat opbloeit bij een dubbelklik op het beeld */
.post__klap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
}

.post__klap svg {
    width: 72px;
    height: 72px;
    fill: #FFF;
    stroke: none;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5));
}

.post__klap.is-aan { animation: klap .9s ease-out; }

@keyframes klap {
    0%   { opacity: 0; transform: scale(.4); }
    18%  { opacity: 1; transform: scale(1.15); }
    32%  { transform: scale(.95); }
    45%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

.post__reacties {
    list-style: none;
    margin: 0;
    padding: 6px 10px 10px;
    font-size: .74rem;
    line-height: 1.45;
    color: rgba(243, 240, 234, .78);
}

.post__reacties li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post__reacties b {
    font-weight: 500;
    color: var(--krijt);
}

@media (max-width: 480px) {
    .posts { gap: 10px; }
    .post__kop { padding: 6px 8px; }
    .post__naam { font-size: .7rem; }
    .post__acties { padding: 6px 8px 0; gap: 6px; }
    .knopje svg { width: 17px; height: 17px; }
    .post__reacties { padding: 4px 8px 8px; font-size: .68rem; }
    .post__klap svg { width: 54px; height: 54px; }
}

@media (max-width: 480px) {
    .intro { font-size: .76rem; }
    .taal  { top: 10px; right: 14px; }
}