.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.news-page { width: auto; max-width: none; margin: 0; }.news-page-header, .news-search-form, .news-filter-section, .news-status, .news-grid, .news-pages { width: min(100%, 1180px); margin-right: auto; margin-left: auto; }.news-page-header { max-width: 720px; margin-bottom: var(--space-6); }.news-page-header h1 { margin: 0; }.news-page-header > p:last-child { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: 1.05rem; }
.news-search-form { display: grid; grid-template-columns: minmax(0, 440px); gap: var(--space-2); margin: 0 0 var(--space-6); }.news-search-form > div { display: flex; gap: var(--space-2); }.news-search-form input { min-width: 0; }.news-search-form button { flex: 0 0 auto; padding: 10px 16px; color: #fff; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-primary); font-weight: 800; }
.news-filter-section { margin-bottom: var(--space-4); }.news-page .filter-row { display: flex; width: 100%; gap: var(--space-2); padding: var(--space-1); border-radius: var(--radius-md); background: var(--color-surface-muted); }.news-page .filter-row .pill { flex: 0 0 auto; min-height: 40px; border: 1px solid transparent; }.news-page .filter-row .pill[aria-pressed="true"] { color: #fff; border-color: var(--color-primary); background: var(--color-primary); box-shadow: none; }.news-status { min-height: 1.5em; margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: .9rem; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }.news-grid .news-card { display: grid; min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }.news-grid .news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }.news-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-muted); }.news-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }.news-card:hover .news-card-media img { transform: scale(1.03); }.news-card-body { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-4); }.news-card-body .category { width: fit-content; }.news-card-body h3 { margin: 0; font-size: 1.15rem; }.news-card-body h3 a { color: var(--color-text); text-decoration: none; }.news-card-body h3 a:hover { color: var(--color-primary); text-decoration: underline; }.news-card-body .news-summary { display: -webkit-box; margin: 0; overflow: hidden; color: var(--color-text-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.news-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0; color: var(--color-text-muted); font-size: .8rem; }.news-card-meta a { color: inherit; text-decoration: none; }.news-card-meta a:hover { color: var(--color-primary); text-decoration: underline; }.news-card-meta time::before { margin-right: 5px; content: "◷"; }.news-fallback { display: grid; width: 100%; height: 100%; min-height: 180px; place-items: center; padding: var(--space-5); background: linear-gradient(135deg, #dceee3, #f0f6f1); color: var(--color-primary-hover); font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; text-align: center; }.news-empty, .news-error { grid-column: 1 / -1; display: grid; min-height: 180px; place-items: center; padding: var(--space-8); color: var(--color-text-muted); border: 1px dashed #b9cbc0; border-radius: var(--radius-lg); background: var(--color-surface-muted); text-align: center; }.news-pages { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }.news-pages a { display: inline-grid; min-width: 44px; min-height: 44px; place-items: center; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-primary); background: var(--color-surface); font-weight: 800; text-decoration: none; }.news-pages a[aria-current="page"] { color: #fff; border-color: var(--color-primary); background: var(--color-primary); }
@media (max-width: 1100px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .news-page-header { margin-bottom: var(--space-5); }.news-search-form { grid-template-columns: 1fr; }.news-search-form > div { display: grid; grid-template-columns: 1fr; }.news-search-form button { width: 100%; }.news-page .filter-row { border-radius: var(--radius-sm); }.news-grid { grid-template-columns: 1fr; gap: var(--space-4); } }

/* Nieuws reference layout: keeps the existing API-driven list and filters, with the compact portal composition from the supplied view. */
body.news-reference { --sidebar-width: 252px; overflow-x: hidden; background: #fff; }
body.news-reference .site-sidebar { display: flex; flex-direction: column; padding: 10px 8px 14px; background: #fff; }
body.news-reference .site-brand { min-height: 48px; margin: 0 10px 24px; font-size: 0; }
body.news-reference .site-brand-mark { width: 38px; height: 34px; border-radius: 0; background: transparent; color: #628075; font-size: 1rem; }
body.news-reference .site-brand::after { color: #587268; content: "Schoonoord.info"; font: 700 8px/1.1 var(--font-body); letter-spacing: -.03em; }
body.news-reference .site-nav { gap: 3px; }
body.news-reference .site-nav a { min-height: 40px; gap: 11px; padding: 8px 12px; color: #55766a; font-size: .9rem; font-weight: 600; }
body.news-reference .site-nav a[aria-current="page"], body.news-reference .site-nav a:hover { background: #277353; color: #fff; }
body.news-reference .site-nav-label { margin: 24px 12px 8px; color: #8b9c95; font-size: .64rem; }
body.news-reference .site-sidebar-footer { margin-top: auto; padding: 14px 4px 0; }
body.news-reference .site-sidebar-footer a { font-size: .68rem; }
body.news-reference .site-topbar { min-height: 55px; padding: 7px 16px; background: rgba(255,255,255,.98); }
body.news-reference .site-topbar .search { width: min(322px, 45vw); min-height: 38px; padding-inline: 11px; border-radius: 8px; background: #f7f8f5; }
body.news-reference .site-topbar .search input { min-height: 34px; font-size: .84rem; }
body.news-reference .shell-icon-button { width: 36px; min-width: 36px; min-height: 36px; font-size: .92rem; }
body.news-reference .app-main { width: auto !important; margin-left: var(--sidebar-width); padding: 79px 25px 72px; background: #fff; }
body.news-reference .news-page { width: auto !important; max-width: none; }
body.news-reference .news-page-header, body.news-reference .news-filter-section, body.news-reference .news-grid, body.news-reference .news-pages { width: min(100%, 1230px); max-width: none; }
body.news-reference .news-page-header { margin: 0 auto 25px; }
body.news-reference .news-page-header h1 { font-size: clamp(2rem, 3.25vw, 2.35rem); letter-spacing: -.025em; }
body.news-reference .news-page-header > p:last-child { margin-top: 4px; color: #66877b; font-size: .95rem; }
/* The global top-bar search remains visible; this page-local form is retained for keyboard and assistive-technology search. */
body.news-reference .news-search-form { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
body.news-reference .news-filter-section { margin: 0 auto 24px; }
body.news-reference .news-page .filter-row { width: fit-content; max-width: 100%; gap: 2px; padding: 3px; border-radius: 10px; background: #f6f7f4; }
body.news-reference .news-page .filter-row .pill { min-height: 29px; padding: 5px 11px; border-radius: 8px; color: #5c7b70; font-size: .72rem; font-weight: 650; }
body.news-reference .news-page .filter-row .pill[aria-pressed="true"] { color: #16392b; border-color: #e3e7e1; background: #fff; box-shadow: 0 1px 3px rgba(25,55,42,.12); }
body.news-reference .news-status { position: absolute; inset-inline-start: 0; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; }
body.news-reference .news-grid { gap: 16px; }
body.news-reference .news-grid .news-card { border-radius: 10px; box-shadow: none; }
body.news-reference .news-card-media { aspect-ratio: 1.88 / 1; }
body.news-reference .news-card-body { gap: 8px; padding: 14px 16px 15px; }
body.news-reference .news-card-body .category { min-height: 24px; padding: 4px 10px; font-size: .68rem; }
/*
 * The summary needs an exact two-line row.  Its own 0.82rem type scale differs
 * from the card body's scale; calculating it from the latter exposed a sliver
 * of a third line in some browsers.  The title remains content-sized so a
 * two-line heading does not leave a gap before the description.
 */
body.news-reference .news-card-body { grid-template-rows: 24px auto 2.46rem auto; }
body.news-reference .news-card-body h3 { display: -webkit-box; margin: 0; overflow: hidden; font-family: var(--font-body); font-size: .95rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
body.news-reference .news-card-body .news-summary { height: 2.46rem; min-height: 2.46rem; max-height: 2.46rem; font-size: .82rem; line-height: 1.5; -webkit-line-clamp: 2; }
body.news-reference .news-card-meta { align-self: start; gap: 5px 10px; font-size: .68rem; }
body.news-reference .news-pages { margin-top: 28px; }
@media (max-width: 900px) { body.news-reference .app-main { width: 100%; margin-left: 0; padding: 78px 16px 88px; } }
@media (max-width: 620px) { body.news-reference .news-page-header { margin-bottom: 20px; } body.news-reference .news-page-header h1 { font-size: 2rem; } body.news-reference .news-grid { gap: 14px; } }

/* Shared search-and-category panel, matching Marktplaats and Evenementen. */
body.news-reference .news-filter-panel{display:grid;width:min(100%,1230px);grid-template-columns:minmax(0,1fr) auto;gap:12px;margin:0 auto 24px;padding:12px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}
body.news-reference .news-filter-panel>label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
body.news-reference .news-filter-panel>div{display:contents}
body.news-reference .news-filter-panel input{min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font:inherit}
body.news-reference .news-filter-panel button[type="submit"]{min-height:44px;padding:10px 16px;color:#fff;border:1px solid var(--color-primary);border-radius:var(--radius-sm);background:var(--color-primary);font-weight:800}
body.news-reference .news-filter-panel .news-filter-section{grid-column:1/-1;margin:0}
body.news-reference .news-filter-panel .filter-row{display:flex;width:fit-content;max-width:100%;flex-wrap:wrap;gap:2px;padding:3px;border-radius:10px;background:#f6f7f4}
@media(max-width:620px){body.news-reference .news-filter-panel{grid-template-columns:1fr}body.news-reference .news-filter-panel button[type="submit"]{width:100%}}

/* Compact filter row: same composition as Evenementen. */
body.news-reference .news-search-form{position:static;width:min(100%,1230px);height:auto;display:grid;grid-template-columns:minmax(220px,1fr) minmax(170px,.55fr) auto;gap:12px;margin:0 auto 24px;overflow:visible;clip:auto;white-space:normal}
body.news-reference .news-search-form input,body.news-reference .news-search-form select{min-width:0;min-height:37px;padding:7px 12px;border:1px solid #e1e4de;border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(23,48,37,.08);color:#234338;font:inherit;font-size:.8rem}
body.news-reference .news-search-form button{min-height:37px;padding:7px 12px;border-radius:8px;color:#fff;background:#277353;font-size:.8rem}
@media(max-width:620px){body.news-reference .news-search-form{grid-template-columns:1fr}body.news-reference .news-search-form button{width:100%}}