/* ============================================================
   GVRB ledenportal – stijl in lijn met www.reddingsbrigade.com
   Dit is de VOLLEDIGE inhoud voor het Custom CSS-veld:
   vervang alles wat er nu staat door dit bestand.
   De @import-regel moet bovenaan blijven staan.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;800;900&display=swap');

:root {
    --gvrb-navy:   #114183;   /* tekstkleur hoofdsite */
    --gvrb-blue:   #0085ce;   /* links en blauwe vlakken */
    --gvrb-orange: #fe5000;   /* koppen en knoppen */
    --gvrb-light:  #f2f9fc;   /* lichte achtergrond */
}

/* ---------- Basis ---------- */
html { zoom: .9; }                /* hele site standaard op 90% */

/* Copyrightbalk altijd onderaan het scherm, ook op pagina's met weinig inhoud */
body {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh / .9);  /* 100vh gecorrigeerd voor de 90% zoom */
}
body > * { width: 100%; }
body > #content { flex: 1 0 auto; }   /* inhoud vult de lege ruimte op */
body {
    background: var(--gvrb-light);
    color: var(--gvrb-navy);
    font-family: 'Montserrat', 'Inter', sans-serif;
}
#content p, #content td, #content li, #content dd { color: var(--gvrb-navy); }
a { color: var(--gvrb-blue); }   /* geen aparte kleur voor al bezochte links */
a:hover, a:focus { color: var(--gvrb-orange); text-decoration: none; }

/* Links in lopende tekst (zoals "klik hier" en e-mailadressen) in het oranje */
#content .paragraph-text p a:not(.btn),
#content .paragraph-text li a:not(.btn),
#content .paragraph-text p a:not(.btn):visited,
#content .paragraph-text li a:not(.btn):visited {
    color: var(--gvrb-orange) !important;
    font-weight: 600;
}
#content .paragraph-text p a:not(.btn):hover,
#content .paragraph-text li a:not(.btn):hover {
    color: var(--gvrb-navy) !important;
    text-decoration: underline;
}
#content .text-muted { color: rgba(17, 65, 131, .6) !important; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', 'Inter', sans-serif;
    color: var(--gvrb-navy);
}

/* ---------- Spoedbalk + header ---------- */
header .header-nav-top {
    background: var(--gvrb-blue);
    padding: 4px 0;
    /* balk over de volle breedte, zonder dat de pagina breder wordt */
    box-shadow: 0 0 0 100vmax var(--gvrb-blue);
    clip-path: inset(0 -100vmax);
}
header .header-nav-top .login p,
header .header-nav-top .login a {
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .03em;
}
header .header-nav-top .login a:hover { color: var(--gvrb-navy) !important; }

header { background: #fff; box-shadow: 0 2px 12px rgba(17, 65, 131, .08); }

/* Logo kleiner, netjes binnen de witte balk */
header .header-logo {
    margin: 14px 20px 10px 0 !important;
    width: auto !important;
    height: auto !important;
}
header .navbar-brand,
header .navbar-brand h1.text-hide {
    width: 200px !important;
    height: 64px !important;
    margin: 0 !important;
    background-position: left center;
}

/* Menu: dik, hoofdletters, oranje bij actief/hover */
#menu > li > a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--gvrb-navy) !important;
    letter-spacing: .02em;
}
#menu > li.active > a,
#menu > li > a:hover {
    color: var(--gvrb-orange) !important;
}
#menu > li.active > a { box-shadow: inset 0 -3px 0 var(--gvrb-orange); }
#menu ul {
    border-top: 3px solid var(--gvrb-orange);
    box-shadow: 0 8px 24px rgba(17, 65, 131, .15);
}
#menu ul li a {
    color: var(--gvrb-navy) !important;
    font-weight: 500;
}
#menu ul li a:hover {
    background: var(--gvrb-light) !important;
    color: var(--gvrb-orange) !important;
}

/* ---------- Blauwe schuine rand onder de slider ---------- */
#carousel-homepage { position: relative; }
#carousel-homepage::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 70px;
    background: var(--gvrb-blue);
    clip-path: polygon(0 100%, 100% 10%, 100% 100%);
    pointer-events: none;
    z-index: 2;
}
#carousel-homepage .carousel-indicators { z-index: 3; }

/* ---------- Koppen in de stijl van de hoofdsite ---------- */
.paragraph-text h2 {
    color: var(--gvrb-orange);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 32px;
    margin-top: 40px;
}
.paragraph-news > h3,
.paragraph-events > h3,
.paragraph-blogs > h3 {
    color: var(--gvrb-navy);
    font-weight: 900 !important;
    font-size: 24px !important;
    text-transform: uppercase;
    margin: 0 0 18px !important;
    padding-left: 12px !important;
    border-left: 5px solid var(--gvrb-orange);
    line-height: 1.2 !important;
}

/* Witte kaarten met oranje linkerrand, zoals de blokken op de hoofdsite */
.paragraph-news,
.paragraph-events,
.paragraph-blogs,
.paragraph-media {
    background: #fff;
    background-clip: content-box;
    margin-bottom: 30px;
}
.paragraph-news > *,
.paragraph-events > *,
.paragraph-blogs > *,
.paragraph-media > * {
    margin-left: 20px;
    margin-right: 20px;
}
.paragraph-news > :first-child,
.paragraph-events > :first-child,
.paragraph-blogs > :first-child,
.paragraph-media > :first-child { margin-top: 24px !important; }
.paragraph-news > :last-child,
.paragraph-events > :last-child,
.paragraph-blogs > :last-child,
.paragraph-media > :last-child { margin-bottom: 24px !important; }

/* Titels van nieuws/blogs */
.publication-item h4 a {
    color: var(--gvrb-orange);
    font-weight: 800;
}

/* Agenda: titels en datumtegels */
dl.headlines dd > a {
    color: var(--gvrb-navy);
    font-weight: 700;
}
dl.headlines dd > a:hover { color: var(--gvrb-orange); }
dl.headlines dt.date a {
    border-radius: 6px;
    font-weight: 800;
}

/* "Meer evenementen", "Nieuwsarchief", "Meer blogs" als knop */
#content .clearfix.margin-bottom-10 > a {
    display: inline-block;
    background: var(--gvrb-orange);
    color: #fff !important;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px;
    padding: 8px 16px;
    margin-top: 6px;
    transition: background .15s;
}
#content .clearfix.margin-bottom-10 > a:hover { background: var(--gvrb-navy); }

/* Vacaturetabel */
.paragraph-media .table { background: transparent; }
.paragraph-media .table > thead > tr > th {
    border-bottom: 2px solid var(--gvrb-blue);
    color: var(--gvrb-navy);
    text-transform: uppercase;
    font-size: 12px;
}
.paragraph-media .table-striped > tbody > tr:nth-of-type(odd) { background: var(--gvrb-light); }
.paragraph-media .table td a { color: var(--gvrb-blue); font-weight: 500; }

/* ---------- Footer in het blauw van de hoofdsite ---------- */
footer { background: var(--gvrb-blue); color: #fff; }
footer a { color: #fff !important; }
#copyright {
    background: var(--gvrb-blue) !important;          /* onderste balk in het blauw */
    color: #fff !important;
}
#copyright * { color: #fff !important; }
/* Lege footer (blauwe balk boven de copyrightregel) verbergen.
   Zet je later iets in de footer, dan verschijnt hij vanzelf weer. */
footer:not(:has(.row > div > *)) { display: none; }

/* ---------- Bestaande regels: afbeeldingen nieuws/evenementen ---------- */
.module-news .paragraphs .img-responsive,
.module-events .paragraphs .img-responsive {
    object-fit: contain !important;
    object-position: center left;
    width: 100%;
    height: 100%;
    display: block;
}
.heading-image {
    position: relative;
    height: auto;
    margin-bottom: 1rem;
}

/* ---------- Wie is wie: tekst + foto als één kaart ----------
   Werkt op elk blok "tekst (1/4 breedte) gevolgd door foto (1/4 breedte)". */
@media (min-width: 992px) {
    .paragraphs > .row:has(> .paragraph-text.col-md-3 + .paragraph-image.col-md-3) {
        display: flex;
        flex-wrap: wrap;
    }
    .paragraphs > .row:has(> .paragraph-text.col-md-3 + .paragraph-image.col-md-3)::before,
    .paragraphs > .row:has(> .paragraph-text.col-md-3 + .paragraph-image.col-md-3)::after {
        display: none;
    }
    .paragraph-text.col-md-3:has(+ .paragraph-image.col-md-3) {
        flex: 0 0 calc(29% - 15px);   /* tekst iets breder... */
        width: auto;
        margin: 0 0 30px 15px;
    }
    .paragraph-text.col-md-3 + .paragraph-image.col-md-3 {
        flex: 0 0 calc(21% - 15px);   /* ...foto iets smaller */
        width: auto;
        margin: 0 15px 30px 0;
        padding: 0;
    }
}
.paragraph-text.col-md-3:has(+ .paragraph-image.col-md-3) {
    background: #fff;
    border-left: 5px solid var(--gvrb-orange);
    padding: 20px 20px 16px;
    box-shadow: 0 4px 18px rgba(17, 65, 131, .08);
    overflow-wrap: break-word;
    min-width: 0;                   /* lange woorden duwen de foto niet meer naar beneden */
}
.paragraph-text.col-md-3:has(+ .paragraph-image.col-md-3) h3 {
    margin-top: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--gvrb-navy);
}
.paragraph-text.col-md-3:has(+ .paragraph-image.col-md-3) p:empty { display: none; }
.paragraph-text.col-md-3:has(+ .paragraph-image.col-md-3) ul { padding-left: 18px; margin-bottom: 8px; }
.paragraph-text.col-md-3:has(+ .paragraph-image.col-md-3) a[href^="mailto"] { font-size: 12px; }
.paragraph-text.col-md-3 + .paragraph-image.col-md-3 {
    box-shadow: 0 4px 18px rgba(17, 65, 131, .08);
}
.paragraph-text.col-md-3 + .paragraph-image.col-md-3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;              /* foto vult de kaart, wordt niet uitgerekt */
    object-position: center top;    /* gezichten blijven in beeld */
    display: block;
}

/* Persoon zonder foto (geen afbeeldingsblok erachter): zelfde kaart, over de breedte van tekst + foto */
.paragraphs > .row:has(> .paragraph-text.col-md-3 + .paragraph-image.col-md-3) > .paragraph-text.col-md-3:not(:has(+ .paragraph-image)) {
    background: #fff;
    border-left: 5px solid var(--gvrb-orange);
    padding: 20px 20px 16px;
    box-shadow: 0 4px 18px rgba(17, 65, 131, .08);
    overflow-wrap: break-word;
    min-width: 0;
}
.paragraphs > .row:has(> .paragraph-text.col-md-3 + .paragraph-image.col-md-3) > .paragraph-text.col-md-3:not(:has(+ .paragraph-image)) h3 {
    margin-top: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--gvrb-navy);
}
.paragraphs > .row:has(> .paragraph-text.col-md-3 + .paragraph-image.col-md-3) > .paragraph-text.col-md-3:not(:has(+ .paragraph-image)) p:empty { display: none; }
@media (min-width: 992px) {
    .paragraphs > .row:has(> .paragraph-text.col-md-3 + .paragraph-image.col-md-3) > .paragraph-text.col-md-3:not(:has(+ .paragraph-image)) {
        flex: 0 0 calc(50% - 30px);
        width: auto;
        margin: 0 15px 30px;
    }
}
@media (max-width: 767px) {
    .paragraphs > .row:has(> .paragraph-text.col-md-3 + .paragraph-image.col-md-3) > .paragraph-text.col-md-3:not(:has(+ .paragraph-image)) {
        width: auto;
        margin: 0 15px 30px !important;
    }
}

/* ---------- Agenda: elk evenement als kaart ---------- */
.module-events .paragraphs > .row:has(> div > .event-header) {
    display: grid;
    grid-template-columns: 200px 1fr;   /* foto | tekst */
    column-gap: 0;
    row-gap: 20px;
    margin: 0;
}
.module-events .paragraphs > .row:has(> div > .event-header)::before,
.module-events .paragraphs > .row:has(> div > .event-header)::after,
.module-events .paragraphs > .row:has(> div > .event-header) > .col-md-12:has(> hr) {
    display: none;                      /* scheidingslijnen niet meer nodig */
}
.module-events .paragraphs > .row:has(> div > .event-header) > div {
    width: auto;
    float: none;
    padding: 0;
}
.module-events .paragraphs > .row:has(> div > .event-header) > .col-md-4  { grid-column: 1; }
.module-events .paragraphs > .row:has(> div > .event-header) > .col-md-8  { grid-column: 2; }
.module-events .paragraphs > .row:has(> div > .event-header) > .col-md-10 { grid-column: 1 / -1; } /* zonder foto: volle breedte */

/* Tekstdeel */
.module-events .paragraphs > .row > div:has(> .event-header) {
    background: #fff;
    padding: 18px 22px !important;
    box-shadow: 0 4px 18px rgba(17, 65, 131, .08);
    display: flex;
    flex-direction: column;
}
.module-events .paragraphs > .row > .col-md-10:has(> .event-header) {
    border-left: 5px solid var(--gvrb-orange);
}
.module-events .paragraphs > .row > div:has(> .event-header) > p:last-child { margin: auto 0 0; }

/* Fotodeel: altijd even hoog als de tekst, netjes bijgesneden */
.module-events .paragraphs > .row > .col-md-4:has(.img-headline) {
    position: relative;
    min-height: 150px;
    overflow: hidden;
    background: #fff;
    border-left: 5px solid var(--gvrb-orange);
    box-shadow: 0 4px 18px rgba(17, 65, 131, .08);
}
.module-events .paragraphs > .row > .col-md-4 .img-headline {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    margin: 0;
}
.module-events .paragraphs > .row > .col-md-4 .img-headline img {
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top;
    transform: none !important;
}

/* Titel, datum en knop */
.module-events .event-header h3 { margin: 0 0 6px; font-size: 21px; font-weight: 800; }
.module-events .event-header h3 a { color: var(--gvrb-navy); }
.module-events .event-header h3 a:hover { color: var(--gvrb-orange); }
.module-events .event-header .meta-list { margin-bottom: 10px; }
.module-events .event-header .meta-list li:first-child { color: var(--gvrb-orange) !important; font-weight: 800; }
.module-events .paragraphs > .row > div:has(> .event-header) .btn-link,
.module-events .paragraphs > .row > div:has(> .event-header) .btn-link:visited {
    color: var(--gvrb-orange);
}
.module-events .paragraphs > .row > div:has(> .event-header) .btn-link:hover { color: var(--gvrb-navy); }
.module-events .paragraphs > .row > div:has(> .event-header) .btn-link {
    padding: 0;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
}

/* Mobiel: foto boven de tekst */
@media (max-width: 767px) {
    .module-events .paragraphs > .row:has(> div > .event-header) { grid-template-columns: 1fr; }
    .module-events .paragraphs > .row:has(> div > .event-header) > div { grid-column: 1 !important; }
    .module-events .paragraphs > .row > .col-md-4:has(.img-headline) { min-height: 200px; }
}

/* ---------- Nieuws: elk bericht als kaart ---------- */
.module-news .paragraph-text > .clearfix:has(> hr) { display: none; }   /* scheidingslijnen weg */
.module-news .paragraph-text > .publication-item:not(.publication-item-condensed) {
    display: flex;
    margin: 0 0 20px;
    background: #fff;
    border-left: 5px solid var(--gvrb-orange);
    box-shadow: 0 4px 18px rgba(17, 65, 131, .08);
}
.module-news .paragraph-text > .publication-item::before,
.module-news .paragraph-text > .publication-item::after { display: none; }

/* Foto: vaste breedte, even hoog als de tekst */
.module-news .paragraph-text > .publication-item > .col-sm-5 {
    flex: 0 0 200px;
    width: 200px;
    padding: 0;
    position: relative;
    min-height: 150px;
    overflow: hidden;
}
.module-news .paragraph-text > .publication-item > .col-sm-5 .embed-responsive {
    position: absolute;
    inset: 0;
    padding: 0;
    height: auto;
}
.module-news .paragraph-text > .publication-item > .col-sm-5 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top;
}

/* Tekst: titel bovenaan, knop onderaan */
.module-news .paragraph-text > .publication-item > .col-sm-7,
.module-news .paragraph-text > .publication-item > .col-sm-12 {
    flex: 1;
    width: auto;
    min-width: 0;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
}
.module-news .publication-item h3 {
    order: -1;                          /* titel boven de datum */
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 800;
    white-space: normal;                /* hele titel tonen i.p.v. afkappen met ... */
    overflow: visible;
}
.module-news .publication-item h3 a { color: var(--gvrb-navy); }
.module-news .publication-item h3 a:hover { color: var(--gvrb-orange); }
.module-news .publication-item .text-muted.small { margin-bottom: 8px; }
.module-news .publication-item p:last-child { margin: auto 0 0; }
.module-news .publication-item .btn.pull-right {
    float: none !important;
    align-self: flex-start;
    background: var(--gvrb-orange);
    border: 0;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    padding: 6px 12px;
}
.module-news .publication-item .btn.pull-right:hover { background: var(--gvrb-navy); }

@media (max-width: 767px) {
    .module-news .paragraph-text > .publication-item:not(.publication-item-condensed) { flex-direction: column; }
    .module-news .paragraph-text > .publication-item > .col-sm-5 { flex: none; width: 100%; min-height: 200px; }
}

/* ---------- Kleine aanpassingen ---------- */

/* Knoppen (zoals "Aanmelden"): tekst altijd wit, ook bij hover en na klikken */
#content .btn-primary,
#content .btn-primary:visited,
#content .btn-primary:hover,
#content .btn-primary:focus,
#content .btn-primary:active {
    color: #fff !important;
}
#content .btn-primary:hover,
#content .btn-primary:focus {
    background: var(--gvrb-navy) !important;
    border-color: var(--gvrb-navy) !important;
}

/* "Aanmelding open": fel groen met witte tekst */
#content .meta-tag.is-success {
    background: #16b45a !important;
    color: #fff !important;
    font-weight: 700;
    border-radius: 3px;
}

/* "Vorige" en "Volgende": oranje met witte tekst */
#content .pager li > a,
#content .pager li > a:visited {
    background: var(--gvrb-orange);
    border-color: var(--gvrb-orange);
    color: #fff !important;
    font-weight: 700;
}
#content .pager li > a:hover,
#content .pager li > a:focus {
    background: var(--gvrb-navy);
    border-color: var(--gvrb-navy);
    color: #fff !important;
}
#content .pager .disabled > a,
#content .pager .disabled > span {
    background: var(--gvrb-orange);
    border-color: var(--gvrb-orange);
    color: #fff !important;
    opacity: .45;                   /* op de eerste/laatste pagina zichtbaar uitgeschakeld */
}

/* ---------- Bestandslijsten (Vacatures, Documenten, ...) ----------
   Geldt voor elke mediamap-module met een bestandstabel, op alle pagina's. */
.paragraph-media:has(table) {
    background: #fff;
    background-clip: content-box;
    margin-bottom: 30px;
}
.paragraph-media:has(table) .headline {
    border-bottom: none !important;    /* stippellijn weg */
    margin: 24px 20px 0 !important;
}
.paragraph-media:has(table) .headline h4 {
    display: block;
    border-bottom: none !important;    /* oranje onderstreep weg */
    border-left: 5px solid var(--gvrb-orange);
    padding: 0 0 0 12px !important;
    margin: 0 0 10px !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    color: var(--gvrb-navy);
}
.paragraph-media:has(table) > .row { margin: 0 5px 24px !important; }   /* tabel gelijk met de titel */
.paragraph-media:has(table) table { margin-top: 0; }
.paragraph-media:has(table) table thead { display: none; }             /* "Bestandsnaam" weg */
.paragraph-media:has(table) table th:nth-child(2),
.paragraph-media:has(table) table td:nth-child(2) { display: none; }   /* bestandsgrootte weg */
.paragraph-media:has(table) .table > tbody > tr:first-child > td { border-top: 0; }

/* ---------- Paginatitelbalk (onder het menu, op alle pagina's) ---------- */
.content-header {
    position: relative;
    background: linear-gradient(100deg, var(--gvrb-navy) 0%, var(--gvrb-blue) 75%) !important;
    padding: 34px 0 58px;
    margin-bottom: 10px;
    border: 0;
    box-shadow: none;
}
.content-header::after {                       /* schuine onderrand, zoals op de hoofdsite */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 34px;
    background: var(--gvrb-light);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.content-header .container {
    display: flex;
    flex-direction: column;                    /* kruimelpad boven de titel */
    gap: 6px;
}
.content-header h2 {
    color: #fff !important;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 34px;
    margin: 0;
    letter-spacing: .01em;
}
.content-header h2::after {                    /* oranje accentstreepje onder de titel */
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 12px;
    background: var(--gvrb-orange);
}
.content-header .breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    float: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.content-header .breadcrumb > li,
.content-header .breadcrumb > li.active { color: rgba(255, 255, 255, .8) !important; }
.content-header .breadcrumb a { color: #fff !important; }
.content-header .breadcrumb a:hover { color: var(--gvrb-orange) !important; }
.content-header .breadcrumb > li + li::before { content: "›"; color: var(--gvrb-orange); padding: 0 8px; }

@media (max-width: 767px) {
    .content-header { padding: 22px 0 44px; }
    .content-header h2 { font-size: 26px; }
}

/* ---------- Mijn GVRB → Mijn groepen: elke groep als kaart ---------- */
.module-profile .paragraphs > .headline {
    border-bottom: none !important;
    margin: 10px 0 18px;
}
.module-profile .paragraphs > .headline h4 {
    display: block;
    border-bottom: none !important;
    border-left: 5px solid var(--gvrb-orange);
    padding: 0 0 0 12px;
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--gvrb-navy);
}
/* Twee kolommen; kaarten schuiven aan zodat er geen gaten ontstaan */
.module-profile .paragraph-text:has(> table) {
    column-count: 2;
    column-gap: 20px;
}
.module-profile .paragraph-text > table {
    display: table;
    break-inside: avoid;                /* kaart nooit over twee kolommen verdelen */
    width: 100%;
    table-layout: fixed;
    margin: 0 0 20px !important;
    background: #fff;
    border-left: 5px solid var(--gvrb-orange);
    box-shadow: 0 4px 18px rgba(17, 65, 131, .08);
}
.module-profile .paragraph-text > table th:nth-child(1) { width: 38% !important; }
.module-profile .paragraph-text > table th:nth-child(2) { width: 28% !important; }
.module-profile .paragraph-text > table th:nth-child(3),
.module-profile .paragraph-text > table th:nth-child(4) { width: 17% !important; }
.module-profile .paragraph-text > table td,
.module-profile .paragraph-text > table th { overflow-wrap: break-word; }

/* Kopregel: groepsnaam als kaarttitel, kolomnamen klein en licht */
.module-profile .paragraph-text > table > thead > tr > th {
    border-bottom: 2px solid #e3eef6;
    padding: 14px 12px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(17, 65, 131, .55);
    vertical-align: bottom;
}
.module-profile .paragraph-text > table > thead > tr > th:first-child {
    padding-left: 18px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .01em;
    color: var(--gvrb-navy);
}
.module-profile .paragraph-text > table > tbody > tr > td {
    padding: 9px 12px;
    border-top: 1px solid #eef3f8;
    color: var(--gvrb-navy);
}
.module-profile .paragraph-text > table > tbody > tr > td:first-child {
    padding-left: 18px;
    font-weight: 600;
}
.module-profile .paragraph-text > table > tbody > tr:hover > td { background: var(--gvrb-light); }

@media (max-width: 991px) {
    .module-profile .paragraph-text:has(> table) { column-count: 1; }   /* onder elkaar */
}

/* ============================================================
   MOBIEL (telefoon, tot 767px breed)
   ============================================================ */
@media (max-width: 767px) {

    /* Header: logo links, menuknop rechts in oranje */
    header .header-logo {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
        margin: 10px 0 !important;
        float: none;
    }
    header .navbar-brand,
    header .navbar-brand h1.text-hide {
        width: 170px !important;
        height: 54px !important;
    }
    header .header-logo .navbar-toggle {
        order: 2;
        float: none;
        margin: 0;
        padding: 9px 12px;
        background: var(--gvrb-orange);
        border: 0;
        border-radius: 4px;
        color: #fff;
    }
    header .header-logo .navbar-toggle .fa { color: #fff; font-size: 18px; }

    /* Submenu (links) onder de inhoud i.p.v. erboven */
    #content .container > .row:has(> .aside):has(> .paragraphs) {
        display: flex;
        flex-direction: column;
    }
    #content .container > .row > .paragraphs { order: 1; }
    #content .container > .row > .aside { order: 2; margin-top: 20px; }
    #content .container > .row:has(> .aside)::before,
    #content .container > .row:has(> .aside)::after { display: none; }

    /* Titelbalk iets compacter */
    .content-header h2::after { margin-top: 8px; }

    /* Kaarten op de homepage: tabel blijft binnen de kaart */
    .paragraph-media:has(table) table { table-layout: fixed; width: 100%; }
    .paragraph-media:has(table) table td { overflow-wrap: anywhere; }
    .paragraph-media:has(table) > .row { margin: 0 0 20px !important; }

    /* Wie is wie: foto direct onder de tekst, zelfde breedte, niet te hoog */
    .paragraph-text.col-md-3:has(+ .paragraph-image.col-md-3) {
        margin: 0 15px !important;
        width: auto;
    }
    .paragraph-text.col-md-3 + .paragraph-image.col-md-3 {
        margin: 0 15px 30px 15px !important;
        padding: 0 !important;
        width: auto;
        border-left: 5px solid var(--gvrb-orange);
        height: auto;
        overflow: hidden;
    }
    /* Hele foto tonen in de eigen verhouding, niet bijsnijden */
    .paragraph-text.col-md-3 + .paragraph-image.col-md-3 img {
        height: auto !important;
        object-fit: initial !important;
    }

    /* Agenda: foto en tekst aan elkaar vast, ruimte tussen de evenementen */
    .module-events .paragraphs > .row:has(> div > .event-header) { row-gap: 0; }
    .module-events .paragraphs > .row > div:has(> .event-header) { margin-bottom: 20px; }
    .module-events .paragraphs > .row > .col-md-8:has(> .event-header) {
        border-left: 5px solid var(--gvrb-orange);
    }

    /* Mijn groepen: per regel naam bovenaan, daaronder functie / vanaf / tot */
    .module-profile .paragraph-text > table,
    .module-profile .paragraph-text > table > thead,
    .module-profile .paragraph-text > table > tbody { display: block; width: 100%; }
    .module-profile .paragraph-text > table > thead > tr { display: block; }
    .module-profile .paragraph-text > table > thead > tr > th { display: none; }
    .module-profile .paragraph-text > table > thead > tr > th:first-child {
        display: block;
        width: auto !important;
        border-bottom: 2px solid #e3eef6;
    }
    .module-profile .paragraph-text > table > tbody > tr {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        column-gap: 10px;
        padding: 10px 14px 10px 18px;
        border-top: 1px solid #eef3f8;
    }
    .module-profile .paragraph-text > table > tbody > tr > td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        font-size: 13px;
    }
    .module-profile .paragraph-text > table > tbody > tr > td:first-child {
        grid-column: 1 / -1;
        font-size: 15px;
        margin-bottom: 4px;
    }
    .module-profile .paragraph-text > table > tbody > tr > td:nth-child(n+2)::before {
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: rgba(17, 65, 131, .5);
    }
    .module-profile .paragraph-text > table > tbody > tr > td:nth-child(2)::before { content: "Functie"; }
    .module-profile .paragraph-text > table > tbody > tr > td:nth-child(3)::before { content: "Vanaf"; }
    .module-profile .paragraph-text > table > tbody > tr > td:nth-child(4)::before { content: "Tot"; }

    /* Homepage-agenda: lange titels niet afkappen met ... */
    dl.headlines dd > a {
        display: block;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* ---------- Homepage: tekst + afbeelding (zoals "Verbouwing panden") als één witte kaart ----------
   Werkt op elk tekstblok (1/3 breedte) dat direct gevolgd wordt door een afbeelding (1/3 breedte). */
.template-home .paragraph-text.col-md-4:has(+ .paragraph-image.col-md-4),
.template-home .paragraph-text.col-md-4 + .paragraph-image.col-md-4 {
    background: #fff;
    background-clip: content-box;
}
.template-home .paragraph-text.col-md-4:has(+ .paragraph-image.col-md-4) > * {
    margin-left: 20px;
    margin-right: 20px;
}
.template-home .paragraph-text.col-md-4:has(+ .paragraph-image.col-md-4) {
    display: flow-root;                 /* marges blijven binnen de witte kaart */
}
.template-home .paragraph-text.col-md-4:has(+ .paragraph-image.col-md-4) > p:has(> br:only-child) { display: none; }  /* lege regels weg */
.template-home .paragraph-text.col-md-4:has(+ .paragraph-image.col-md-4) > p:last-of-type { margin-bottom: 0; padding-bottom: 14px; }
.template-home .paragraph-text.col-md-4:has(+ .paragraph-image.col-md-4) h3 {   /* titel zoals de andere blokken */
    margin: 0 20px 14px;
    padding: 0 0 0 12px;
    border-left: 5px solid var(--gvrb-orange);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--gvrb-navy);
}
.template-home .paragraph-text.col-md-4:has(+ .paragraph-image.col-md-4) > h3:first-of-type { margin-top: 24px !important; }
.template-home .paragraph-text.col-md-4 + .paragraph-image.col-md-4 { margin-bottom: 30px; }
.template-home .paragraph-text.col-md-4 + .paragraph-image.col-md-4 img {
    display: block;
    width: calc(100% - 40px);
    margin: 0 20px 24px;
}

/* ---------- Mijn GVRB → Mijn profiel ---------- */
/* Naam bovenaan als bloktitel */
.module-profile form > .headline {
    border-bottom: none !important;
    margin: 10px 0 18px;
}
.module-profile form > .headline h4 {
    display: block;
    border-bottom: none !important;
    border-left: 5px solid var(--gvrb-orange);
    padding: 0 0 0 12px;
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--gvrb-navy);
}

/* Tabbladen: lichtblauw, actief tabblad wit met oranje bovenrand */
.module-profile form > .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    border-bottom: 0;
}
.module-profile form > .nav-tabs > li { float: none; margin: 0; }
.module-profile form > .nav-tabs > li > a {
    margin: 0;
    padding: 12px 18px;
    border: 0 !important;
    border-radius: 0;
    background: rgba(17, 65, 131, .06);
    color: var(--gvrb-navy) !important;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.module-profile form > .nav-tabs > li > a:hover { background: rgba(17, 65, 131, .12); }
.module-profile form > .nav-tabs > li.active > a,
.module-profile form > .nav-tabs > li.active > a:hover,
.module-profile form > .nav-tabs > li.active > a:focus {
    background: #fff !important;
    color: var(--gvrb-orange) !important;
    box-shadow: inset 0 3px 0 var(--gvrb-orange);
}

/* Inhoud van het tabblad als witte kaart */
.module-profile form > .tab-content {
    background: #fff;
    border-left: 5px solid var(--gvrb-orange);
    box-shadow: 0 4px 18px rgba(17, 65, 131, .08);
    padding: 26px 30px 14px;
}
.module-profile form > .tab-content fieldset + fieldset { margin-top: 26px; }
.module-profile form > .tab-content legend {           /* "Contactgegevens", "Bankrekening", ... */
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e3eef6;
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--gvrb-navy);
}
.module-profile form > .tab-content .form-group {
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid #eef3f8;
}
.module-profile form > .tab-content .form-group:last-of-type { border-bottom: 0; }
.module-profile form > .tab-content .control-label {   /* veldnaam klein en licht */
    padding-top: 3px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(17, 65, 131, .55);
}
.module-profile form > .tab-content .form-control-static {   /* waarde donker en dik */
    min-height: 0;
    padding: 0;
    font-weight: 600;
    color: var(--gvrb-navy);
}

/* Profielfoto rond met witte rand */
.module-profile form > .tab-content .profile-picture .img-rounded {
    width: auto;
    height: auto;
    background: none;
}
.module-profile form > .tab-content .profile-picture img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 4px 18px rgba(17, 65, 131, .18);
}

/* Knoppen onderaan */
.module-profile form > hr { margin: 16px 0; border: 0; }
.module-profile form > a.btn {
    margin-right: 8px;
    padding: 9px 16px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}
.module-profile form > a.btn-default {            /* "Wijzig wachtwoord" */
    background: #fff;
    border: 2px solid var(--gvrb-navy);
    color: var(--gvrb-navy) !important;
}
.module-profile form > a.btn-default:hover {
    background: var(--gvrb-navy);
    color: #fff !important;
}

@media (max-width: 767px) {
    .module-profile form > .tab-content { padding: 20px 18px 10px; }
    .module-profile form > .nav-tabs > li > a { padding: 10px 12px; font-size: 12px; }
    .module-profile form > .tab-content .profile-picture {
        float: none !important;
        margin-bottom: 10px;
        text-align: center;
    }
}

/* ---------- Blogbericht: schrijver onderaan als nette kaart ---------- */
.blog-content-author {
    display: grid !important;
    grid-template-columns: auto 1fr;          /* foto | naam + functie */
    grid-template-rows: auto auto;
    column-gap: 22px;
    align-items: center;                       /* verticaal gecentreerd in het witte vlak */
    padding: 24px 30px !important;
    border-left: 5px solid var(--gvrb-orange);
    box-shadow: 0 4px 18px rgba(17, 65, 131, .08);
}
.blog-content-author::before,
.blog-content-author::after { display: none !important; }
.blog-content-author .blog-content-author-image {
    grid-row: 1 / span 2;
    float: none !important;
    margin: 0 !important;
}
.blog-content-author .blog-content-author-image img {
    display: block;
    width: 84px !important;
    height: 84px !important;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 4px 14px rgba(17, 65, 131, .2);
}
.blog-content-author h4 {
    grid-column: 2;
    align-self: end;
    margin: 0 !important;
    font-size: 20px;
    font-weight: 800;
}
.blog-content-author h4::before {             /* klein label boven de naam */
    content: "Geschreven door";
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(17, 65, 131, .55);
}
.blog-content-author h4 a { color: var(--gvrb-navy) !important; }
.blog-content-author h4 a:hover { color: var(--gvrb-orange) !important; }
.blog-content-author > p {                    /* functie, bijv. "Voorzitter GVRB" */
    grid-column: 2;
    align-self: start;
    margin: 4px 0 0 !important;
    font-weight: 600;
    color: var(--gvrb-orange) !important;
}

/* ---------- Blogoverzicht (Van de voorzitter): alle blogs even groot, twee naast elkaar ----------
   (:not(:has(> hr)) = alleen het overzicht, niet de "vorige/volgende"-blogs onder een bericht) */
.module-blogs .blog-content-box:not(:has(> hr)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.module-blogs .blog-content-box:not(:has(> hr)) > .row { display: contents; }      /* rijen samenvoegen tot één raster */
.module-blogs .blog-content-box:not(:has(> hr)) > .row::before,
.module-blogs .blog-content-box:not(:has(> hr)) > .row::after { display: none; }
.module-blogs .blog-content-box:not(:has(> hr)) > .row > div {
    display: flex;
    min-width: 0;                       /* lange teksten duwen de kaart niet breder */
    max-width: 100%;
    width: auto;
    float: none;
    padding: 0;
}
.module-blogs .blog-content-box:not(:has(> hr)) .blog-teaser {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 0 20px;
    background: #fff;
    border-left: 5px solid var(--gvrb-orange) !important;
    box-shadow: 0 4px 18px rgba(17, 65, 131, .08);
}
.module-blogs .blog-content-box:not(:has(> hr)) .blog-teaser > *:not(.blog-teaser-image) {
    margin-left: 22px;
    margin-right: 22px;
}
/* Afbeelding: altijd dezelfde verhouding, netjes bijgesneden */
.module-blogs .blog-content-box:not(:has(> hr)) .blog-teaser-image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 16px;
    overflow: hidden;
}
.module-blogs .blog-content-box:not(:has(> hr)) .blog-teaser-image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center top;
}
.module-blogs .blog-content-box:not(:has(> hr)) .blog-teaser h4 { margin-top: 0; font-size: 21px; font-weight: 800; }
.module-blogs .blog-content-box:not(:has(> hr)) .blog-teaser h4 a { color: var(--gvrb-navy) !important; }
.module-blogs .blog-content-box:not(:has(> hr)) .blog-teaser h4 a:hover { color: var(--gvrb-orange) !important; }
.module-blogs .blog-content-box:not(:has(> hr)) .blog-teaser > p { width: auto; max-width: none; }

@media (max-width: 767px) {
    .module-blogs .blog-content-box:not(:has(> hr)) { grid-template-columns: 1fr; }   /* telefoon: onder elkaar */
}

/* Introductietekst boven de blogs (alleen op het blogoverzicht) */
.module-blogs .blog-content-box:not(:has(> hr))::before {
    content: "In \2018Van de voorzitter\2019  sta ik telkens stil bij een actueel onderwerp, een bijzondere gebeurtenis of een ontwikkeling die onze vereniging raakt of onze aandacht verdient. Vanuit mijn rol als voorzitter deel ik mijn persoonlijke kijk en blik ik terug of vooruit.\A\A Veel leesplezier!\A\A Patrick van Eijsden\A Voorzitter";
    grid-column: 1 / -1;                       /* over de volle breedte, boven de blogs */
    display: block;
    white-space: pre-line;                     /* \A = nieuwe regel */
    padding: 24px 30px;
    background: #fff;
    border-left: 5px solid var(--gvrb-orange);
    box-shadow: 0 4px 18px rgba(17, 65, 131, .08);
    font-size: 16px;
    line-height: 1.7;
    color: var(--gvrb-navy);
}