.events{width:min(100%,1160px);margin:0 auto}
.has-app-shell .events.app-main{width:auto;max-width:none;margin:0 0 0 var(--sidebar-width);padding:calc(var(--topbar-height) + var(--space-8)) clamp(var(--space-4),4vw,64px) calc(96px + env(safe-area-inset-bottom))}
.events>*{width:min(100%,1160px);margin-inline:auto}
.events-hero,.page-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--space-5);padding:clamp(20px,4vw,38px);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:linear-gradient(125deg,#eef7f1 0%,#fff 72%);box-shadow:var(--shadow-sm)}
.events-hero h1,.page-heading h1,.form-heading h1{margin:0;letter-spacing:-.025em}
.events-hero p:not(.eyebrow),.page-heading p,.form-heading p{margin:var(--space-2) 0 0;color:var(--color-text-muted)}
.eyebrow{margin:0 0 var(--space-1);color:var(--color-primary);font-size:.78rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.events-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}
.events-filters{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,.7fr) auto;gap:var(--space-3);margin-top:var(--space-6);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}
.page-message{min-height:1.5em;margin-block:var(--space-4);color:var(--color-danger);font-weight:650}
.event-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.event-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm);text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
.event-card:hover{color:var(--color-text);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.event-card img,.event-image{display:block;width:100%;aspect-ratio:4/3;height:auto;background:linear-gradient(135deg,#dceee3,#f0f6f1);object-fit:cover}
.event-card>div{display:grid;gap:var(--space-2);padding:var(--space-4)}
.event-card h2{display:-webkit-box;margin:0;overflow:hidden;font-family:var(--font-body);font-size:1.06rem;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.event-meta{display:grid;gap:2px;color:var(--color-text-muted);font-size:.87rem}
.date{margin:0;color:var(--color-primary-hover);font-weight:850}
.status{display:inline-flex;width:fit-content;min-height:28px;align-items:center;padding:4px 9px;border:1px solid #d5dfd7;border-radius:999px;background:var(--color-surface-muted);color:#38574a;font-size:.76rem;font-weight:800}
.status[data-status="CANCELLED"]{border-color:#e6beb8;background:#fff0ee;color:#94382f}
.pagination{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.pagination button{min-width:44px;border:1px solid #b9d3c3;border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-primary);font-weight:800}
.pagination button[aria-current="page"]{color:#fff;border-color:var(--color-primary);background:var(--color-primary)}
.back-link{display:inline-flex;min-height:44px;align-items:center;margin-bottom:var(--space-5);font-weight:800;text-decoration:none}
.event-detail-page #event{display:grid;max-width:960px;gap:var(--space-6)}
.form-heading{margin-bottom:var(--space-5)}
.event-form{display:grid;max-width:800px;gap:var(--space-5)}
.event-form fieldset{display:grid;gap:var(--space-4);margin:0;padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}
.event-form legend{padding-inline:var(--space-2);color:var(--color-text);font-family:var(--font-display);font-size:1.25rem;font-weight:800}
.event-form label{display:grid}
.form-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.check-filter{display:inline-flex!important;min-height:44px;align-items:center;gap:var(--space-2);color:var(--color-text)!important;font-weight:700}
.check-filter input{width:18px;height:18px;accent-color:var(--color-primary)}
.form-help{margin:-4px 0 0;color:var(--color-text-muted);font-size:.88rem}
.empty-state{grid-column:1/-1}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1050px){.event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.event-card button{min-height:42px;margin-top:var(--space-2)}
@media(max-width:900px){.has-app-shell .events.app-main{margin-left:0;padding:calc(var(--topbar-height) + var(--space-5)) var(--space-4) calc(92px + env(safe-area-inset-bottom))}
.events-hero,.page-heading{align-items:flex-start;flex-direction:column}
.events-actions{justify-content:flex-start}
}
@media(max-width:620px){.events-filters{grid-template-columns:1fr}
.events-filters button{width:100%}
.event-grid{grid-template-columns:1fr}
.events-hero,.page-heading,.form-heading{padding:var(--space-5)}
.events-actions,.events-actions>a{width:100%}
.events-actions>a{justify-content:center}
.event-card img{aspect-ratio:16/10}
.form-columns{grid-template-columns:1fr}
}

/* Compact overview that matches the homepage portal rhythm. */
body.events-reference { --sidebar-width:252px; overflow-x:hidden; background:#fff; }
body.events-reference .site-sidebar { display:flex; flex-direction:column; padding:10px 8px 14px; background:#fff; }
body.events-reference .site-brand { min-height:48px; margin:0 10px 24px; font-size:0; }
body.events-reference .site-brand-mark { width:38px; height:34px; border-radius:0; background:transparent; color:#628075; font-size:1rem; }
body.events-reference .site-brand::after { color:#587268; content:"Schoonoord.info"; font:700 8px/1.1 var(--font-body); letter-spacing:-.03em; }
body.events-reference .site-nav { gap:3px; } body.events-reference .site-nav a { min-height:40px; gap:11px; padding:8px 12px; color:#55766a; font-size:.9rem; font-weight:600; }
body.events-reference .site-nav a[aria-current="page"],body.events-reference .site-nav a:hover { background:#277353; color:#fff; } body.events-reference .site-nav-label { margin:24px 12px 8px; color:#8b9c95; font-size:.64rem; } body.events-reference .site-sidebar-footer { margin-top:auto; padding:14px 4px 0; } body.events-reference .site-sidebar-footer a { font-size:.68rem; }
body.events-reference .site-topbar { min-height:55px; padding:7px 16px; background:rgba(255,255,255,.98); } body.events-reference .site-topbar .search { width:min(322px,45vw); min-height:38px; padding-inline:11px; border-radius:8px; background:#f7f8f5; } body.events-reference .site-topbar .search input { min-height:34px; font-size:.84rem; } body.events-reference .shell-icon-button { width:36px; min-width:36px; min-height:36px; font-size:.92rem; }
body.events-reference .events.app-main { width:auto!important; margin-left:var(--sidebar-width); padding:79px 25px 72px; background:#fff; } body.events-reference .events>* { width:min(100%,1230px); }
body.events-reference .events-hero { align-items:start; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; } body.events-reference .events-hero .eyebrow { display:none; } body.events-reference .events-hero h1 { font-size:clamp(2rem,3.25vw,2.35rem); letter-spacing:-.025em; } body.events-reference .events-hero p:not(.eyebrow) { margin-top:4px; color:#66877b; font-size:.95rem; }
body.events-reference .events-actions { align-self:center; } body.events-reference .events-actions .button { min-height:36px; padding:8px 15px; border-radius:8px; font-size:.78rem; } body.events-reference .events-actions .secondary { align-self:center; font-size:.78rem; }
body.events-reference .events-filters { grid-template-columns:minmax(0,1fr) 176px auto; gap:12px; margin-top:24px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; } body.events-reference .events-filters input,body.events-reference .events-filters select,body.events-reference .events-filters button { min-height:37px; padding:7px 12px; border-color:#e1e4de; border-radius:8px; background:#fff; box-shadow:0 1px 3px rgba(23,48,37,.08); color:#234338; font-size:.8rem; } body.events-reference .events-filters button { color:#fff; border-color:#277353; background:#277353; }
body.events-reference .page-message { min-height:0; margin:0; } body.events-reference .event-grid { gap:16px; margin-top:30px; } body.events-reference .event-card { border-radius:10px; box-shadow:none; } body.events-reference .event-card img { aspect-ratio:1.55/1; } body.events-reference .event-card>div { gap:7px; padding:14px 16px 15px; } body.events-reference .event-card h2 { font-size:.95rem; } body.events-reference .event-meta { font-size:.76rem; } body.events-reference .empty-state { display:grid; min-height:300px; place-items:center; color:#688277; }
body.events-reference .event-card button { width:100%; min-height:36px; margin-top:7px; border:1px solid #1d7654; border-radius:8px; background:#187653; color:#fff; font:700 .78rem var(--font-body); box-shadow:0 2px 4px rgba(21,91,62,.14); cursor:pointer; } body.events-reference .event-card button:hover { border-color:#126342; background:#126342; }
@media(max-width:900px){body.events-reference .events.app-main{width:100%;margin-left:0;padding:78px 16px 88px;}body.events-reference .events-filters{grid-template-columns:minmax(0,1fr) 156px;}.events-reference .events-filters button{grid-column:2;}}@media(max-width:620px){body.events-reference .events-actions{align-self:flex-start;margin-top:14px;}body.events-reference .events-filters{grid-template-columns:1fr;}.events-reference .events-filters button{grid-column:auto;}.events-reference .events-filters input,.events-reference .events-filters select,.events-reference .events-filters button{width:100%;}.events-reference .event-grid{gap:14px;}}

/* Public event detail — a dedicated reading surface that remains fully visible beside the site shell. */
body.event-detail-reference .event-detail-page { padding-top:82px; }
body.event-detail-reference .event-detail-page > .back-link,
body.event-detail-reference .event-detail-page > .page-message,
body.event-detail-reference .event-detail-page > #event { width:min(100%,960px); margin-right:auto; margin-left:auto; }
body.event-detail-reference .back-link { min-height:32px; margin-bottom:18px; color:#176b4b; font-size:.82rem; font-weight:700; }
body.event-detail-reference .page-message { margin-top:0; }
body.event-detail-reference .event-detail-intro { display:grid; gap:10px; margin-bottom:0; }
body.event-detail-reference .event-detail-intro .category { width:fit-content; min-height:24px; padding:4px 10px; font-size:.68rem; }
body.event-detail-reference .event-detail-intro h1 { max-width:18ch; margin:0; font-size:clamp(2rem,4.2vw,3.25rem); letter-spacing:-.035em; }
body.event-detail-date { margin:0; color:#58776b; font-size:1rem; font-weight:700; }
body.event-detail-date::before { margin-right:7px; color:#176b4b; content:"◷"; }
body.event-detail-cancelled { width:fit-content; padding:6px 10px; border:1px solid #efc3bd; border-radius:999px; background:#fff1ef; color:#a63e36; font-size:.8rem; font-weight:800; }
body.event-detail-reference .event-detail-cover { position:relative; display:grid; height:clamp(170px,19vw,250px); min-height:0; overflow:hidden; place-items:center; border:1px solid #d9e5dd; border-radius:18px; background:#e9f3ed; box-shadow:var(--shadow-sm); }
body.event-detail-reference .event-detail-cover::after { position:absolute; width:250px; height:250px; border:1px solid rgba(255,255,255,.46); border-radius:50%; background:rgba(255,255,255,.09); content:""; transform:translate(42%,-45%); }
body.event-detail-reference .event-detail-cover img { width:100%; height:100%; min-height:0; object-fit:cover; }
body.event-detail-reference .event-detail-cover-fallback { background:linear-gradient(128deg,#105b3e,#28765a); color:#fff; }
body.event-detail-reference .event-detail-cover-fallback::before { position:absolute; top:0; right:0; width:38%; height:100%; border-radius:0 18px 18px 70%; background:rgba(255,255,255,.08); content:""; }
body.event-detail-cover-fallback strong,
body.event-detail-cover-icon { position:relative; z-index:1; }
body.event-detail-cover-fallback strong { font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2.4rem); }
body.event-detail-cover-icon { display:grid; width:58px; height:58px; margin-bottom:-2px; place-items:center; border:1px solid rgba(255,255,255,.42); border-radius:16px; background:rgba(255,255,255,.12); font-size:1.7rem; }
body.event-detail-reference .event-detail-cover-fallback { align-content:center; gap:12px; }
body.event-detail-reference .event-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,.48fr); align-items:start; gap:24px; }
body.event-detail-reference .event-detail-content,
body.event-detail-reference .event-detail-sidebar { border:1px solid #dfe6e1; border-radius:14px; background:#fff; box-shadow:var(--shadow-sm); }
body.event-detail-reference .event-detail-content { padding:clamp(20px,4vw,32px); }
body.event-detail-reference .event-detail-content h2,
body.event-detail-reference .event-detail-sidebar h2 { margin:0 0 15px; font-family:var(--font-body); font-size:1.08rem; }
body.event-detail-reference .event-detail-content p { margin:0 0 1.15em; color:#294237; font-size:1rem; line-height:1.8; white-space:pre-wrap; }
body.event-detail-reference .event-detail-content p:last-child { margin-bottom:0; }
body.event-detail-reference .event-detail-sidebar { padding:20px; }
body.event-detail-reference .event-detail-countdown { display:grid; gap:4px; margin:0 0 16px; padding:13px 14px; border:1px solid #cbe2d4; border-radius:11px; background:linear-gradient(135deg,#edf8f1,#f7fbf8); }
.event-countdown-label { color:#5b796c; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.event-countdown-value { color:#176b4b; font-size:1rem; line-height:1.35; }
body.event-detail-reference .event-detail-info-item { display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; padding:14px 0; border-top:1px solid #edf0ed; }
body.event-detail-reference .event-detail-info-item:first-of-type { padding-top:0; border-top:0; }
body.event-detail-info-icon { display:grid; width:28px; height:28px; place-items:center; border-radius:8px; background:#eaf3ed; color:#176b4b; font-size:.88rem; }
body.event-detail-reference .event-detail-info-text { display:flex; flex-direction:column; gap:4px; min-width:0; color:#5c776c; font-size:.84rem; line-height:1.45; }
body.event-detail-reference .event-detail-info-text strong { display:block; color:#203b2f; font-size:.78rem; }
body.event-detail-reference .event-detail-info-text > span,
body.event-detail-reference .event-detail-info-text > a { display:block; }
body.event-detail-reference .event-detail-organizer { color:#176b4b; font-weight:750; text-decoration:none; }
body.event-detail-reference .event-detail-organizer:not([href]) { color:#5c776c; font-weight:600; }
body.event-detail-reference .event-detail-organizer[href]:hover { text-decoration:underline; }
body.event-detail-reference .event-detail-attendance { display:grid; gap:10px; margin-top:18px; padding-top:18px; border-top:1px solid #edf0ed; }
body.event-detail-reference .event-detail-attendance h2 { margin:0; }
.event-attendance-summary,.event-attendance-message { min-height:1.25em; margin:0; color:#5c776c; font-size:.82rem; line-height:1.45; }
.event-attendance-message { color:#176b4b; }
.event-attendance-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.event-attendance-button { min-height:34px; padding:7px 6px; border:1px solid #d7e1db; border-radius:8px; background:#fff; color:#315448; font-size:.75rem; font-weight:800; cursor:pointer; }
.event-attendance-button:hover:not(:disabled),.event-attendance-button.is-selected { border-color:#277353; background:#277353; color:#fff; }
.event-attendance-button:disabled { cursor:not-allowed; opacity:.56; }
@media(max-width:760px) {
  body.event-detail-reference .event-detail-page { padding-top:76px; }
  body.event-detail-reference .event-detail-layout { grid-template-columns:1fr; gap:16px; }
  body.event-detail-reference .event-detail-cover { height:190px; }
}
@media(max-width:620px) {
  body.event-detail-reference .event-detail-page { padding-right:16px; padding-left:16px; }
  body.event-detail-reference .event-detail-intro h1 { max-width:none; font-size:2rem; }
  body.event-detail-reference .event-detail-cover { height:165px; border-radius:14px; }
  body.event-detail-reference .event-detail-content,
  body.event-detail-reference .event-detail-sidebar { border-radius:12px; }
  body.event-detail-reference .event-detail-sidebar { padding:18px; }
}
.event-form,.event-form fieldset{min-width:0}

.event-grid.request-columns{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),420px));align-items:start}.event-grid .request-column{display:grid;gap:12px;min-width:0;padding:18px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-muted)}.event-grid .request-column h2{margin:0;font-family:var(--font-body);font-size:1rem}.event-grid .request-column>p{margin:0;color:var(--color-text-muted);font-size:.82rem;line-height:1.5}.event-grid .request-column[data-status="PENDING"]{border-color:#d8c996;background:#fffbef}.event-grid .request-column[data-status="REJECTED"]{border-color:#efc8c5;background:#fff6f5}@media(max-width:900px){.event-grid.request-columns{grid-template-columns:1fr}}

/* Public agenda cards never expose internal publication state. */
body.events-reference .events-page .event-card .status{display:none}

/* Gedeeld met de bedrijfs- en verenigingsdetailpagina's: claim-cta.js voegt
   uitsluitend markup toe, zodat de strikte CSP geen runtime-styles vereist. */
.claim-callout{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;margin-top:20px;padding:17px 16px;border:1px solid #bfd7c8;border-radius:16px;background:#f3f7f4;color:#173a2b}.claim-callout-icon{display:grid;width:36px;height:36px;place-items:center;border-radius:11px;background:#e3eee7;color:#17704d;font-size:1.15rem}.claim-callout-copy{min-width:0}.claim-callout h2{margin:0;color:#173326;font-family:var(--font-body,Arial,sans-serif);font-size:.9rem;line-height:1.3}.claim-callout p{margin:3px 0 0;color:#607d70;font-size:.78rem;line-height:1.45}.claim-callout a{display:inline-flex;align-items:center;gap:8px;margin-top:11px;color:#176b4b;font-size:.82rem;font-weight:750;text-decoration:none}.claim-callout a:hover{text-decoration:underline}.claim-callout a::after{content:'›';font-size:1.2rem;line-height:.7}@media(max-width:620px){.claim-callout{padding:14px;border-radius:13px}}