/*!
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */

.leden-overzicht {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.lid-item {
    width: 200px; /* Vastzetten op 300px breedte */
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}

.profielfoto-wrapper {
    position: relative;
    padding: 10px; /* Voor de zwarte rand */
    background-color: black; /* Zwarte rand rond de afbeelding */
    display: inline-block;
    border-radius: 12px; /* Ronde hoeken toevoegen aan de wrapper */
}

.profielfoto-wrapper img {
    width: 100%; /* Houd de afbeelding op 100% breedte van de wrapper (300px) */
    height: 400px; /* Zet de hoogte van de afbeelding vast op 600px */
    object-fit: cover; /* Zorgt ervoor dat de afbeelding wordt bijgesneden en geschaald om het frame te vullen */
    display: block;
    border-radius: 8px; /* Ronde hoeken voor de afbeelding binnen de wrapper */
}

.overlay-top,
.overlay-bottom {
    position: absolute;
    left: 10px; /* Uitlijnen met de padding van .profielfoto-wrapper */
    right: 10px; /* Uitlijnen met de padding van .profielfoto-wrapper */
    color: white; /* Witte tekst */
    background-color: rgba(0, 0, 0, 0.7); /* Donkere transparante balk */
    padding: 5px;
    text-align: center;
    font-weight: bold;
    border-radius: 6px; /* Ronde hoeken voor de overlays */
}

.overlay-top {
    top: 10px; /* Aan de bovenkant van de afbeelding */
}

.overlay-bottom {
    bottom: 10px; /* Aan de onderkant van de afbeelding */
}

/* Wikkel om het formulier: witte kaart met neon-groene rand + glow */
.ukf-form{
  --ukf-neon:#2dff3b;
  background:#fff;
  border:2px solid var(--ukf-neon);
  border-radius:10px;
  padding:24px;
  box-shadow:0 0 0 4px rgba(45,255,59,.25);
  max-width:820px; /* komt overeen met je screenshot-breedte */
  margin:0 auto;
}

/* Grid lay-out: 2 kolommen op desktop */
.ukf-form .cf7-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:22px 26px;
}
.ukf-form .cf7-col--full{ grid-column:1/-1; }
@media (min-width:768px){
  .ukf-form .cf7-grid{ grid-template-columns:1fr 1fr; }
}

/* Labels */
.ukf-form label{
  display:block;
  margin:0 0 6px;
  font-weight:700;
  color:#1f2937; /* donkergrijs */
  font-size:16px;
}

/* Velden */
.ukf-form input[type="text"],
.ukf-form input[type="email"],
.ukf-form input[type="tel"],
.ukf-form textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #d9e1ec;
  border-radius:8px;
  background:#fff;
  box-shadow:inset 0 1px 2px rgba(16,24,40,.04);
  outline:0;
  transition:border-color .18s, box-shadow .18s;
  font-size:15px;
}
.ukf-form ::placeholder{ color:#8a94a6; }
.ukf-form textarea{ min-height:120px; resize:vertical; }

/* Focus (blauwe rand zoals in de shot) */
.ukf-form input:focus,
.ukf-form textarea:focus{
/*  border-color:#3b82f6;*/
  border-color:#02ff04;
  box-shadow:0 0 0 3px rgba(59,130,246,.20);
}

/* Submit-knop: full width, felgroen, met potlood-icoon links */
.ukf-form .submit-wrap{ margin-top:14px; }
#ukf-submit{
  width:100%;
  padding:16px 20px;
  font-size:20px;
  font-weight:800;
  border:0;
  border-radius:8px;
  background:#02ff04;
  color:#001;
  cursor:pointer;
}
#ukf-submit:hover{ filter:brightness(.95); }
#ukf-submit::before{
  content:"✏";
  display:inline-block;
  margin-right:10px;
  transform:translateY(-1px);
}

.ukf-form .wpcf7-not-valid-tip{ color:#dc2626; font-size:13px; margin-top:6px; }
.ukf-form .wpcf7-response-output{
  margin-top:16px;
  border-radius:8px;
  border:1px solid #d9e1ec;
  padding:12px 14px;
}

/* --- Featured image: vaste hoogte via 16:9 aspect --- */

/* 0) basis */
.underkoffer-nieuws img { display:block; max-width:100%; }

/* 1) maak de WRAPPER de aspect-ratio box */
.underkoffer-nieuws :is(
  .wp-block-getwid-post-carousel__image,
  .getwid-post__thumbnail,
  .getwid-post-thumbnail,
  .wp-block-post-featured-image,
  .post-thumbnail,
  .post-thumb,
  figure.post-thumbnail
){
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px; /* optioneel */
  display: block;
}

/* 2) als de image in een link zit, laat de link het boxje vullen */
.underkoffer-nieuws :is(
  .wp-block-getwid-post-carousel__image a,
  .getwid-post__thumbnail a,
  .getwid-post-thumbnail a,
  .wp-block-post-featured-image a,
  .post-thumbnail a,
  .post-thumb a
){
  display: block;
  height: 100%;
}

/* 3) img vult altijd het boxje */
.underkoffer-nieuws :is(
  .wp-block-getwid-post-carousel__image img,
  .getwid-post__thumbnail img,
  .getwid-post-thumbnail img,
  .wp-block-post-featured-image img,
  .post-thumbnail img,
  .post-thumb img
){
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4) ultra-robuste vangnet: elk <a> dat direct een <img> bevat */
.underkoffer-nieuws a:has(> img){
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
  border-radius: 12px; /* optioneel */
}
.underkoffer-nieuws a:has(> img) > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 5) fallback voor heel oude browsers zonder aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .underkoffer-nieuws :is(
    .wp-block-getwid-post-carousel__image,
    .getwid-post__thumbnail,
    .getwid-post-thumbnail,
    .wp-block-post-featured-image,
    .post-thumbnail,
    .post-thumb,
    figure.post-thumbnail
  ){
    position: relative; height: 0; padding-top: 56.25%; /* 16:9 */
  }
  .underkoffer-nieuws :is(
    .wp-block-getwid-post-carousel__image img,
    .getwid-post__thumbnail img,
    .getwid-post-thumbnail img,
    .wp-block-post-featured-image img,
    .post-thumbnail img,
    .post-thumb img
  ){
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
}

#############################

/* 0) Slick met rust laten */
.underkoffer-nieuws .slick-track{ display:block !important; }
.underkoffer-nieuws .slick-slide{ height:auto; }

/* 1) Maak elke SLIDE (card) een flex-kolom */
.underkoffer-nieuws .wp-block-getwid-post-carousel__slide{
  display:flex;
  flex-direction:column;
  height:auto;
}

/* 2) Variabelen: regels + regelhoogte (pas aan naar smaak) */
.underkoffer-nieuws{
  --title-lines: 2;
  --title-lh: 1.2;
  --excerpt-lines: 6;
  --excerpt-lh: 1.45;
}

/* 3) Titel: clamp op de LINK (niet alleen op h3) */
.underkoffer-nieuws h3.wp-block-getwid-template-post-title{
  margin: .5rem 0;
}
.underkoffer-nieuws .wp-block-getwid-template-post-title__link{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--title-lines);
  overflow:hidden;
  line-height: var(--title-lh);
  min-height: calc(var(--title-lines) * 1em * var(--title-lh));
  text-decoration:none;
}

/* 4) Meta (datum): op 1 regel houden zodat de hoogte vast is */
.underkoffer-nieuws .wp-block-getwid-template-post-meta{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  min-height: 1.2em;
  margin-bottom: .25rem;
}

/* 5) Excerpt: clamp op de <p> binnen .is-excerpt */
.underkoffer-nieuws .wp-block-getwid-template-post-content.is-excerpt > p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: var(--excerpt-lines);
  overflow:hidden;
  line-height: var(--excerpt-lh);
  min-height: calc(var(--excerpt-lines) * 1em * var(--excerpt-lh));
  margin: 0 0 .75rem;
}

/* 6) Knop naar onderen in de card */
.underkoffer-nieuws .wp-block-getwid-template-post-button{ margin-top:auto; }

/* 7) Thumbnails op 16:9 (laat staan als je dit al had) */
.underkoffer-nieuws .wp-block-getwid-template-post-featured-image a{
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:12px; /* optioneel */
}
.underkoffer-nieuws .wp-block-getwid-template-post-featured-image img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* (optioneel) op mobiel een regeltje extra in excerpt */
@media (max-width: 781px){
  .underkoffer-nieuws{ --excerpt-lines: 4; }
}

/* Fallback voor héle oude browsers zonder aspect-ratio/line-clamp kun je toevoegen indien nodig */
#####################

/* === Consistent panel onder de foto (titel + datum + excerpt + knop) === */
.underkoffer-nieuws { --pad:16px; --radius:12px; }

/* Foto: geen extra spacing eronder */
.underkoffer-nieuws .wp-block-getwid-template-post-featured-image{ margin:0 !important; }

/* TITEL (bovenste paneel) */
.underkoffer-nieuws h3.wp-block-getwid-template-post-title{
  background:#fff !important;
  padding:12px var(--pad) 8px !important;  /* L/R padding vastgezet */
  margin:0 !important;
  border-radius: var(--radius) var(--radius) 0 0;
}
.underkoffer-nieuws .wp-block-getwid-template-post-title__link{
  display:block; text-decoration:none; color:inherit;
}

/* DATUM (zelfde inspringing als titel/excerpt) */
.underkoffer-nieuws .wp-block-getwid-template-post-meta,
.underkoffer-nieuws .wp-block-getwid-template-post-date,
.underkoffer-nieuws .wp-block-post-date{
  background:#fff !important;
  padding:0 var(--pad) 6px !important;     /* zelfde L/R padding */
  margin:0 !important;
  display:flex; align-items:center; gap:.4em;
}
.underkoffer-nieuws .wp-block-getwid-template-post-meta i,
.underkoffer-nieuws .wp-block-getwid-template-post-date i{ margin-right:.4em; }

/* EXCERPT (paneel midden) */
.underkoffer-nieuws .wp-block-getwid-template-post-content.is-excerpt{
  background:#fff !important;
  padding:0 var(--pad) 10px !important;    /* zelfde L/R padding */
  margin:0 !important;
  border-radius:0;
}
.underkoffer-nieuws .wp-block-getwid-template-post-content.is-excerpt > p{ margin:0 !important; }

/* KNOP (onderste paneel) */
.underkoffer-nieuws .wp-block-getwid-template-post-button,
.underkoffer-nieuws .wp-block-getwid-template-post-button.wp-block-button{
  background:#fff !important;
  padding:8px var(--pad) 16px !important;  /* zelfde L/R padding */
  margin:0 !important;
  border-radius:0 0 var(--radius) var(--radius);
  display:flex; align-items:center;
}

/* (De knop zelf blijft groen zoals eerder ingesteld) */
.underkoffer-nieuws .wp-block-getwid-template-post-button .wp-block-button__link{
  background:#02ff04; color:#111; border-radius:10px;
  padding:10px 16px; text-decoration:none; display:inline-block;
}

####################

/* Instellingen */
.underkoffer-nieuws{
  --pad:16px;     /* binnenruimte in het witte paneel */
  --inset:14px;   /* inspringen links/rechts tov de foto */
  --radius:12px;  /* hoekradius boven/onder */
}

/* Foto: full-bleed, geen marge eronder */
.underkoffer-nieuws .wp-block-getwid-template-post-featured-image{ margin:0 !important; }
.underkoffer-nieuws .wp-block-getwid-template-post-featured-image a{
  display:block; aspect-ratio:16/9; overflow:hidden;
}
.underkoffer-nieuws .wp-block-getwid-template-post-featured-image img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* TITEL — wit paneel met afgeronde bovenhoeken en INSPring */
.underkoffer-nieuws h3.wp-block-getwid-template-post-title{
  background:#fff !important;
  margin:0 var(--inset) 0 !important;         /* <-- inspringen */
  padding:12px var(--pad) 8px !important;
  border-radius: var(--radius) var(--radius) 0 0;
}
.underkoffer-nieuws .wp-block-getwid-template-post-title__link{
  display:block; text-decoration:none; color:inherit;
}

/* DATUM — zelfde inspring + wit */
.underkoffer-nieuws .wp-block-getwid-template-post-meta,
.underkoffer-nieuws .wp-block-getwid-template-post-date,
.underkoffer-nieuws .wp-block-post-date{
  background:#fff !important;
  margin:0 var(--inset) 0 !important;         /* <-- inspringen */
  padding:0 var(--pad) 6px !important;
  display:flex; align-items:center; gap:.4em;
}

/* EXCERPT — zelfde inspring + wit */
.underkoffer-nieuws .wp-block-getwid-template-post-content.is-excerpt{
  background:#fff !important;
  margin:0 var(--inset) 0 !important;         /* <-- inspringen */
  padding:0 var(--pad) 10px !important;
  border-radius:0;
}
.underkoffer-nieuws .wp-block-getwid-template-post-content.is-excerpt > p{ margin:0 !important; }

/* KNOP — onderpaneel met afgeronde onderhoeken + inspring */
.underkoffer-nieuws .wp-block-getwid-template-post-button,
.underkoffer-nieuws .wp-block-getwid-template-post-button.wp-block-button{
  background:#fff !important;
  margin:0 var(--inset) var(--inset) !important; /* onder ook wat ruimte */
  padding:8px var(--pad) 16px !important;
  border-radius:0 0 var(--radius) var(--radius);
  display:flex; align-items:center;
}

/* Knop zelf (groen) */
.underkoffer-nieuws .wp-block-getwid-template-post-button .wp-block-button__link{
  background:#02ff04; color:#111; border-radius:10px;
  padding:10px 16px; text-decoration:none; display:inline-block;
}

/* (optioneel) iets minder inspringen op smalle schermen */
@media (max-width: 781px){
  .underkoffer-nieuws{ --inset:10px; }
}

/* Wit paneel alleen achter tekst/knop */
.underkoffer-cardbody{
  background:#fff;
  margin:0 14px 14px;      /* inspring links/rechts + ruimte onder */
  padding:12px 16px 16px;  /* binnenruimte */
  border-radius:12px;
}

/* Consistente interne marges */
.underkoffer-cardbody > *{ margin:0; }
.underkoffer-cardbody h3{ margin:0 0 6px; }
.underkoffer-cardbody .wp-block-post-date,
.underkoffer-cardbody .wp-block-getwid-template-post-meta{ margin:0 0 6px; }

/* Knop centreren */
.underkoffer-cardbody .wp-block-button{ display:flex; justify-content:center; }
.underkoffer-cardbody .wp-block-button__link{
  background:#02ff04; color:#111; border-radius:10px; padding:10px 16px; text-decoration:none;
}

/* Foto full-bleed erboven */
.wp-block-getwid-template-post-featured-image{ margin:0; }
.wp-block-getwid-template-post-featured-image a{ display:block; aspect-ratio:16/9; overflow:hidden; }
.wp-block-getwid-template-post-featured-image img{ width:100%; height:100%; object-fit:cover; display:block; }