/* =========================================================
   40 – Components (forms, impact, news cards, home buttons, gallery)
   ========================================================= */

/* Forms */
.forms-opmerkingen textarea{
  padding: 12px 14px;
}

/* -------------------------
   FIXbrigade Impact section
   ------------------------- */
#fixbrigade-impact.alignfull{
  background: var(--fb-section-bg);
  padding: 60px 0;
  margin: 0;
  box-sizing: border-box;
}

#fixbrigade-impact .impact-header{
  max-width: var(--fb-impact-w);
  margin: 0 auto 36px;
  padding: 0 16px;
  text-align: center;
}

#fixbrigade-impact .impact-title{
  margin: 0 0 8px;
  font-size: 2rem;
  font-weight: 600;
}

#fixbrigade-impact .impact-subtitle{
  margin: 0;
  font-size: 1.05rem;
  color: #555;
}

#fixbrigade-impact .my-horizontal-gallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;

  max-width: var(--fb-impact-w);
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

#fixbrigade-impact .gallery-item{ text-align: center; }

#fixbrigade-impact .gallery-item img{
  max-width: 80px;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

#fixbrigade-impact .gallery-item p{
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: #333;
}

#fixbrigade-impact .gallery-item p b{
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fb-black);
}

#fixbrigade-impact .impact-footnote{
  max-width: var(--fb-impact-w);
  margin: 36px auto 0;
  padding: 0 16px;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #666;
}

@media (max-width: 900px){
  #fixbrigade-impact .my-horizontal-gallery{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px){
  #fixbrigade-impact .impact-title{ font-size: 1.6rem; }
  #fixbrigade-impact .impact-subtitle{ font-size: 1rem; }
  #fixbrigade-impact .my-horizontal-gallery{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* -------------------------
   News cards (fb-news)
   ------------------------- */
.fb-news{
  background: transparent; /* body does the full-width bg */
  padding: 48px clamp(16px, 4vw, 48px) 64px;
  margin: 0;
  box-sizing: border-box;
}

/* Grid */
.fb-news .wp-block-post-template{
  max-width: var(--fb-max-w);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;

  padding: 0;
  list-style: none;
}

.fb-news .wp-block-post,
.fb-news .fb-news-card{
  min-width: 0;
}

/* Card */
.fb-news .fb-news-card{
  background: #fff;
  border-radius: var(--fb-radius-card);
  padding: 18px 18px 22px;

  display: flex;
  flex-direction: column;
  height: 100%;

  box-shadow: var(--fb-shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}

.fb-news .fb-news-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--fb-shadow-card-hover);
}

/* Stable vertical spacing inside cards */
.wp-block-post-template .fb-news-card{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Featured image */
.fb-news .fb-news-card .wp-block-post-featured-image{
  margin: 8px 0; /* image ↔ title & image ↔ date */
}

.fb-news .fb-news-card .wp-block-post-featured-image img{
  display: block;
  width: 100%;
  height: 180px;
  border-radius: var(--fb-radius-media);
  object-fit: cover;
}

/* Remove theme margins that create weird gaps */
.wp-block-post-template .fb-news-card > *{
  margin: 0 !important;
}

/* Date + title */
.fb-news .fb-news-card .wp-block-post-title{
  margin: 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 600;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.fb-news .fb-news-card .wp-block-post-title{
  margin-bottom: 16px;
}

.fb-news .fb-news-card .wp-block-post-title a{
  color: var(--fb-black);
  text-decoration: none;
}
.fb-news .fb-news-card .wp-block-post-title a:hover{
  text-decoration: underline;
}

.fb-news .fb-news-card .wp-block-post-date{
  font-size: .95rem;
  text-align: center;
  color: rgba(0,0,0,.75);
  margin-top: auto; /* consistent bottom alignment */
}

/* Remove empty background p block (your "lightgreen sliver") */
.fb-news-card p.has-background:empty{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* -------------------------
   Home buttons: keep text 1 line
   ------------------------- */
.fb-home-card .wp-block-button__link{
  white-space: nowrap !important;
}

/* ensure buttons can expand */
.fb-home-card .wp-block-button{
  width: 100%;
}

/* Home buttons: fix left overflow */
.fb-home-card .wp-block-button{
  width: 100%;
}

.fb-home-card .wp-block-button__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  box-sizing: border-box;

  /* extra binnenruimte zodat tekst nooit tegen rand hangt */
  padding: 14px 22px;

  /* zorg dat tekst netjes in het midden blijft */
  text-align: center;

  /* voorkom rare baseline/lineheight issues */
  line-height: 1.15;

  /* 1 regel houden */
  white-space: nowrap !important;

  /* heel belangrijk: geen text-indent of theme offset */
  text-indent: 0 !important;
}

@media (max-width: 480px){
  .fb-home-card .wp-block-button__link{
    font-size: 0.95rem;
  }
}

/* prevent nowrap leak into other text inside the card */
.fb-home-card :is(h1,h2,h3,h4,h5,h6,p){
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* -------------------------
   Horizontal gallery (your swipe gallery)
   ------------------------- */
.horizontal-gallery{
  display: flex;
  overflow-x: auto;
  gap: 1.5rem;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.horizontal-gallery .wp-block-image{
  flex: 0 0 520px;   /* adjust 600–700px if you want bigger */
  max-width: none;
  scroll-snap-align: center;
}

.horizontal-gallery img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--fb-radius-media);
}

/* Full-width bleed variant when inside an alignfull group OR when you add alignfull */
.wp-block-group.alignfull > .horizontal-gallery,
.wp-block-group.alignfull.horizontal-gallery{
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
}

/* If you use the gallery outside alignfull but still want bleed:
   add class 'alignfull' on the gallery block itself and this will kick in */
.horizontal-gallery.alignfull{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Desktop: 1 regel */
.fb-home-card .wp-block-button .wp-block-button__link{
  white-space: nowrap !important;
}

/* Mobiel: mag wrappen zodat niets over de rand loopt */
@media (max-width: 520px){
  .fb-home-card .wp-block-button .wp-block-button__link{
    white-space: normal !important;
    text-wrap: balance;
  }
}

/* FB container: override Gutenberg constrained width */
.fb-container{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Belangrijk: de inner wrapper bepaalt de echte breedte */
.fb-container > .wp-block-group__inner-container,
.fb-container.is-layout-constrained > *{
  max-width: var(--fb-container-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
  box-sizing: border-box;
}

/* =========================================================
   FOOTER (global)
   ========================================================= */

/* Pak zowel template-part footer als wp-site-footer */
body footer.wp-block-template-part,
body .wp-site-footer{
  background-color: var(--fb-footer-bg) !important;
  color: var(--fb-footer-text) !important;
}

/* Inner Gutenberg groups mogen niet hun eigen bg tonen */
body footer.wp-block-template-part .wp-block-group,
body .wp-site-footer .wp-block-group{
  background: transparent !important;
}

/* Tekst + links */
body footer.wp-block-template-part,
body footer.wp-block-template-part * ,
body .wp-site-footer,
body .wp-site-footer *{
  color: var(--fb-footer-text) !important;
}

body footer.wp-block-template-part a,
body .wp-site-footer a{
  color: var(--fb-footer-text) !important;
  text-decoration: underline;
}

body footer.wp-block-template-part a:hover,
body .wp-site-footer a:hover{
  opacity: 0.85;
}