/* Gestel.nu – familieberichten: overzicht, kaart, detail en voorbeeld. Alleen design-tokens, geen eigen kleuren. */

/* Overzicht */
.gnp-familie-cta { margin: 1rem 0 0; }
.gnp-familie-filter { margin: 0 0 1.25rem; }
.gnp-familie-filter ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.gnp-familie-filter a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
	border: 1px solid var(--gn-border); border-radius: 999px;
	color: var(--gn-text); font-size: .9375rem; font-weight: 700; text-decoration: none;
}
.gnp-familie-filter a:hover { border-color: var(--gn-link); color: var(--gn-link); }
.gnp-familie-filter a[aria-current="page"] { background: var(--gn-brand); border-color: var(--gn-brand); color: var(--gn-on-brand); }
.gnp-familie-noot { margin: 0 0 1.25rem; color: var(--gn-muted); font-size: .9375rem; }

.gnp-familie-lijst { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .gnp-familie-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .gnp-familie-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Kaart: rustig, veel witruimte */
.gnp-familie {
	display: flex; flex-direction: column; overflow: hidden;
	border: 1px solid var(--gn-border); border-radius: var(--gn-radius);
	background: var(--gn-surface); color: var(--gn-text);
}
.gnp-familie__foto { margin: 0; background: var(--gn-surface-2); }
.gnp-familie__foto img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
.gnp-familie__foto[hidden] { display: none; }
.gnp-familie__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.25rem 1.5rem; }
.gnp-familie__soort { margin: 0; color: var(--gn-muted); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gnp-familie__namen { margin: 0; font-size: 1.375rem; line-height: 1.25; letter-spacing: -.01em; }
.gnp-familie__namen a { color: inherit; text-decoration: none; }
.gnp-familie__namen a:hover { color: var(--gn-link); text-decoration: underline; }
.gnp-familie__datums { margin: 0; color: var(--gn-muted); font-size: 1rem; }
.gnp-familie__tekst { font-size: 1rem; line-height: 1.6; }
.gnp-familie__tekst p { margin: 0 0 .75em; }
.gnp-familie__tekst p:last-child { margin-bottom: 0; }
.gnp-familie__tekst--voorbeeld { white-space: pre-line; }
.gnp-familie__tekst[hidden], .gnp-familie__datums[hidden], .gnp-familie__soort[hidden] { display: none; }
.gnp-familie__meer { margin: .25rem 0 0; font-size: .9375rem; font-weight: 700; }
.gnp-familie__meer a { color: var(--gn-link); }

/* Overlijden: grijze rouwrand en optioneel symbool */
.gnp-familie--overlijden { border: 2px solid var(--gn-muted); }
.gnp-familie--overlijden .gnp-familie__body { align-items: center; text-align: center; }
.gnp-familie--overlijden .gnp-familie__soort { letter-spacing: .12em; }
.gnp-familie--overlijden .gnp-familie__tekst { text-align: left; align-self: stretch; }
.gnp-familie__symbool { color: var(--gn-muted); line-height: 0; }
.gnp-familie__symbool[hidden] { display: none; }
.gnp-familie__symbool-svg { display: block; height: 2rem; width: auto; }

/* Detail */
.gnp-familie-detail { padding-top: 1.5rem; padding-bottom: 2rem; }
@media (min-width: 600px) { .gnp-familie-detail { padding-top: 2.5rem; } }
.gnp-familie-terug { margin: 0 0 1rem; font-size: .9375rem; font-weight: 700; }
.gnp-familie--volledig .gnp-familie__body { padding: 1.5rem; gap: .75rem; }
.gnp-familie--volledig .gnp-familie__namen { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); }
.gnp-familie--volledig .gnp-familie__tekst { font-size: 1.125rem; }
@media (min-width: 600px) { .gnp-familie--volledig .gnp-familie__body { padding: 2rem 2.25rem 2.5rem; } }

/* Oude berichten (categorie) in het overzicht: zelfde kaart, zonder soort */
.gnp-familie--oud .gnp-familie__soort:empty { display: none; }

/* Voorbeeld onder het formulier */
.gnp-voorbeeld { margin: 1.25rem 0; }
.gnp-voorbeeld__plek { margin-top: 1rem; max-width: 520px; }