/* ══════════════════════════════════════════════════════════════════════════
   UITGELICHT EVENT — slide-in

   Deze opmaak ontbrak volledig. De markup staat in de footer en de JS zet er
   alleen de klasse "active" op; zonder CSS stond het paneel dus altijd als
   gewoon blok in beeld. Vandaar het witte vlak op de homepage en het event
   dat onder de footer verscheen.
   ══════════════════════════════════════════════════════════════════════════ */

.tns-featured-slidein {
    --sl-navy: #102F49;
    --sl-goud: #BFA46A;
    --sl-creme: #F4F2EE;

    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: clamp(16px, 4vw, 40px);
    background: rgba(16, 47, 73, 0);
    /* Verborgen tot de JS hem opent */
    visibility: hidden;
    pointer-events: none;
    transition: background .35s ease, visibility 0s linear .35s;
    font-family: 'Helvetica Now Display', 'Helvetica Neue', Arial, sans-serif;
    box-sizing: border-box;
}
.tns-featured-slidein *,
.tns-featured-slidein *::before,
.tns-featured-slidein *::after { box-sizing: border-box; }

.tns-featured-slidein.active {
    visibility: visible;
    pointer-events: auto;
    background: rgba(16, 47, 73, .55);
    transition: background .35s ease, visibility 0s;
}

/* ── Paneel ── */
.tns-slidein-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - clamp(32px, 8vw, 80px));
    overflow-y: auto;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    transform: translateX(110%);
    opacity: 0;
    transition: transform .45s cubic-bezier(.25, .46, .45, .94), opacity .35s ease;
}
.tns-featured-slidein.active .tns-slidein-panel {
    transform: translateX(0);
    opacity: 1;
}

/* ── Sluitknop ── */
.tns-slidein-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--sl-navy);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    transition: background .2s ease, transform .2s ease;
    padding: 0;
}
.tns-slidein-close:hover { background: #fff; transform: scale(1.06); }
.tns-slidein-close svg { width: 18px; height: 18px; }

/* ── Afbeelding ── */
.tns-slidein-image {
    position: relative;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    line-height: 0;
}
.tns-slidein-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.tns-slidein-category {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--sl-goud);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* ── Inhoud ── */
.tns-slidein-content { padding: 20px 22px 24px; }

.tns-slidein-title {
    font-family: 'Hind', sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--sl-navy);
    margin: 0 0 14px;
}

.tns-slidein-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px 0;
    border-top: 1px solid rgba(16, 47, 73, .1);
    border-bottom: 1px solid rgba(16, 47, 73, .1);
    margin-bottom: 14px;
}
.tns-slidein-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--sl-navy);
}
.tns-slidein-meta-item svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--sl-goud);
}
.tns-slidein-spots { font-weight: 700; }

.tns-slidein-excerpt {
    font-size: 14px;
    line-height: 1.65;
    color: #414246;
    margin-bottom: 18px;
}

/* ── Knop ── */
.tns-slidein-actions { display: flex; }
.tns-slidein-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 13px 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .22s ease, transform .2s ease;
}
.tns-slidein-btn:hover { transform: translateY(-2px); }
.tns-slidein-btn svg { width: 15px; height: 15px; }

.tns-slidein-btn-blue,
.tns-slidein-btn-blauw  { background: var(--sl-navy); color: #fff; }
.tns-slidein-btn-blue:hover,
.tns-slidein-btn-blauw:hover { background: #1a4060; color: #fff; }

.tns-slidein-btn-gold,
.tns-slidein-btn-goud   { background: var(--sl-goud); color: #fff; }
.tns-slidein-btn-gold:hover,
.tns-slidein-btn-goud:hover { background: #cfb47a; color: #fff; }

.tns-slidein-btn-green,
.tns-slidein-btn-groen  { background: #828673; color: #fff; }
.tns-slidein-btn-green:hover,
.tns-slidein-btn-groen:hover { background: #949884; color: #fff; }

.tns-slidein-btn-grey,
.tns-slidein-btn-grijs  { background: #414246; color: #fff; }
.tns-slidein-btn-grey:hover,
.tns-slidein-btn-grijs:hover { background: #55565b; color: #fff; }

/* ── Mobiel: van onderen omhoog in plaats van van rechts ── */
@media (max-width: 600px) {
    .tns-featured-slidein {
        align-items: flex-end;
        justify-content: center;
        padding: 0;
    }
    .tns-slidein-panel {
        max-width: none;
        max-height: 88vh;
        border-radius: 14px 14px 0 0;
        transform: translateY(110%);
    }
    .tns-featured-slidein.active .tns-slidein-panel { transform: translateY(0); }
    .tns-slidein-image img { height: 150px; }
    .tns-slidein-content { padding: 18px 18px 26px; }
    .tns-slidein-title { font-size: 19px; }
}

/* ── Minder beweging voor wie daarom vraagt ── */
@media (prefers-reduced-motion: reduce) {
    .tns-slidein-panel { transition: opacity .2s ease; transform: none; }
    .tns-featured-slidein.active .tns-slidein-panel { transform: none; }
}