/* =========================================================
   Culemborg van Nu — Header + Tegelmenu (Cassiopeia)
   CLEAN & STABLE
   ========================================================= */

/* ---------- Variabelen ---------- */
:root{
  /* Hoogte logo + tegels */
  --tileHeight: 140px;

  /* Vaste kolombreedte van de logokolom (menu schuift mee als je deze wijzigt) */
  --logoWidth: 360px;

  /* Aantal tegels rechts van het logo */
  --tiles: 4;

  /* Ruimte-ritme */
  --gap: 24px;                         /* afstand tussen tegels */
  --betweenLogoMenu: var(--gap);       /* ruimte tussen logo en eerste tegel */
  --headerPadX: var(--gap);            /* linker/rechter padding header */
  --headerPadY: 0px;                   /* boven/onder padding header */

  /* Tegel-breedtegrenzen */
  --tileMin: 180px;
  --tileMax: 520px;

  /* Bleed van het logo (over de oranje rand heen, zonder layout te verschuiven) */
  --logoBleedLeft: 16px;
  --logoBleedRight: 8px;               /* meer = logo dichter op eerste tegel */
  --logoBleedTop: 0px;
  --logoBleedBottom: 0px;
}
/* ---------- Header basis ---------- */
.container-header{
  background:#f08a00 !important;
  border-bottom:none !important;
  padding: var(--headerPadY) var(--headerPadX);
  position: relative;
  isolation: isolate; /* voorspelbare z-index-hiërarchie */
}
.container-header::before{ content:none !important; }

/* Grid: [ logo | menu ] — geen column-gap; spacing sturen we zelf */
.container-header,
.container-header > .container,
.container-header > .container-fluid{
  display:grid !important;
  grid-template-columns: var(--logoWidth) 1fr;
  align-items:center;
}

/* Cassiopeia wrappers: juiste kolom + geen extra spacing */
.container-header .container-brand{
  grid-column:1;
  margin:0 !important; padding:0 !important;
  position: relative; z-index: 2; /* logo boven menu */
}
.container-header .container-nav{
  grid-column:2;
  margin:0 !important; padding:0 !important;
  position: relative; z-index: 1;
}

/* Nav binnenin: grid regelt de layout */
.container-header .navbar,
.container-header .container-nav .navbar,
.container-header .navbar-collapse{
  display:contents !important;
  justify-content:flex-start !important;
  margin:0 !important;
}

/* ---------- Logo (brand) ---------- */
.container-header .navbar-brand{
  position: relative;            /* anker voor absolute img */
  height: var(--tileHeight);     /* bepaalt headerhoogte */
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
  overflow:visible;
  display:flex; align-items:center; width:100%;
}
.container-header .navbar-brand img{
  position:absolute; z-index:2; pointer-events:none;
  display:block; max-width:none; object-fit:cover;

  /* Vul kolom + gecontroleerde bleed */
  left:  calc(-1 * var(--logoBleedLeft));
  top:   calc(-1 * var(--logoBleedTop));
  width:  calc(100% + var(--logoBleedLeft) + var(--logoBleedRight));
  height: calc(100% + var(--logoBleedTop) + var(--logoBleedBottom));
}

/* ---------- Menu als tegels ----------
   (Joomla menumodule → Geavanceerd → “Menu class” = menu-tiles) */
.container-header ul.menu-tiles{
  margin:0; padding:0; list-style:none;
  display:flex !important; flex-wrap:nowrap; gap:var(--gap);

  /* expliciete ruimte tussen logo en eerste tegel */
  margin-left: var(--betweenLogoMenu);

  /* tegelbreedte = beschikbare ruimte eerlijk verdelen */
 --tileWidth: clamp(
    var(--tileMin),
    calc((100% - (var(--gap) * (var(--tiles) - 1))) / var(--tiles)),
    var(--tileMax)
    );
}
/* niets mag het menu naar rechts duwen */
.container-header .ms-auto,
.container-header .mod-menu{ margin-left:0 !important; }

.container-header ul.menu-tiles > li{
  list-style:none; margin:0; padding:0; flex:0 0 var(--tileWidth);
}
.container-header ul.menu-tiles > li > a{
  display:flex !important; align-items:center; justify-content:center;
  width:100%; height:var(--tileHeight);
  padding:0 !important; line-height:1; text-align:center; text-decoration:none;
  border:2px solid #fff; border-radius:8px;
  background:rgba(255,255,255,0.12);
  color:#fff !important; font-weight:700; text-transform:uppercase;
  box-sizing:border-box;
}
.container-header ul.menu-tiles > li > a:hover{
  background:#fff; color:#d97300 !important;
}

/* ---------- Responsief ---------- */
@media (max-width: 1200px){
  :root{ --tileMin: 180px; }
}
@media (max-width: 992px){
  :root{ --tileHeight: 120px; }
  .container-header ul.menu-tiles{ flex-wrap:wrap; }
  .container-header ul.menu-tiles > li{ flex:0 0 calc(50% - var(--gap)/2); }
}
@media (max-width: 576px){
  :root{ --tileHeight: 100px; }
  .container-header,
  .container-header > .container,
  .container-header > .container-fluid{
    grid-template-columns: 1fr;
    row-gap: var(--betweenLogoMenu);
  }
  .container-header ul.menu-tiles{ flex-wrap:wrap; margin-left:0; }
  .container-header ul.menu-tiles > li{ flex:0 0 100%; }
}
:root{ --logoBleedRight: 4px; } /* bv. 2–10px; kleiner = meer ruimte rechts */
/* Actueel – maak alle blogfoto's even hoog en kolombreed */
.actueel .blog-items .item .item-image,
.actueel .com-content-category-blog__items .item .item-image,
.actueel .com-content-blog__items .item .item-image {
  height: 220px;      /* pas aan naar smaak */
  overflow: hidden;
}

.actueel .blog-items .item .item-image img,
.actueel .com-content-category-blog__items .item .item-image img,
.actueel .com-content-blog__items .item .item-image img {
  width: 100%;
  height: 100% !important;  /* overschrijft height:auto */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Optioneel: iets lager op tablet/mobiel */
@media (max-width: 992px){
  .actueel .blog-items .item .item-image,
  .actueel .com-content-category-blog__items .item .item-image,
  .actueel .com-content-blog__items .item .item-image { height: 180px; }
}
@media (max-width: 576px){
  .actueel .blog-items .item .item-image,
  .actueel .com-content-category-blog__items .item .item-image,
  .actueel .com-content-blog__items .item .item-image { height: 160px; }
}
/* Fallback: eerste afbeelding in de introtekst */
.actueel .blog-items .item .intro img:first-of-type { 
  width:100%; height:220px !important; object-fit:cover; display:block;
}
 /* Actueel – Variant B: exact 8 cm hoog, cropt vanuit het midden */
:root { --artikel-foto-h: 8cm; }

body.actueel .blog-items .item .item-image,
body.actueel .com-content-category-blog__items .item .item-image,
body.actueel .com-content-blog__items .item .item-image{
  height: var(--artikel-foto-h) !important;
  overflow: hidden;
}

body.actueel .blog-items .item .item-image img,
body.actueel .com-content-category-blog__items .item .item-image img,
body.actueel .com-content-blog__items .item .item-image img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Fallback: eerste image in intro ook gelijk trekken */
body.actueel .blog-items .item .intro img:first-of-type{
  width: 100%;
  height: var(--artikel-foto-h) !important;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Actueel – Variant B (J5-proof): exact 8 cm, crop vanuit midden */
:root { --artikel-foto-h: 8cm; }

/* Containers: vaste hoogte + overflow verbergen */
.actueel .blog-items .item-image,
.actueel .com-content-category-blog__items .item-image,
.actueel .com-content-blog__items .item-image{
  height: var(--artikel-foto-h) !important;
  overflow: hidden;
}

/* Afbeelding vult container en wordt gecropt */
.actueel .blog-items .item-image img,
.actueel .com-content-category-blog__items .item-image img,
.actueel .com-content-blog__items .item-image img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Fallback: als de eerste foto in de introtekst staat */
.actueel .blog-items .intro img:first-of-type,
.actueel .com-content-category-blog__items .intro img:first-of-type,
.actueel .com-content-blog__items .intro img:first-of-type{
  width: 100%;
  height: var(--artikel-foto-h) !important;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* basis voor de tegels met foto */
.mod-menu.menu-tiles > li > a{
  display:flex; align-items:center; justify-content:center;
  height: var(--tileHeight);
  border:2px solid #fff; border-radius:8px;
  text-decoration:none; text-transform:uppercase; font-weight:700; color:#fff;
  background-size:cover; background-position:center;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* Mensen van Nu (ID 488) → winnaars.png */
.mod-menu.menu-tiles > li.item-488 > a{
  background-image:url('/images/algemeen/winnaars.png');
}

/* (optioneel) Actueel & Standpunten als je bestanden hebt */
.mod-menu.menu-tiles > li.item-489 > a{ background-image:url('/images/algemeen/actueel.png'); }
.mod-menu.menu-tiles > li.item-671 > a{ background-image:url('/images/algemeen/standpunten.jpg'); }
.mod-menu.menu-tiles > li.item-823 > a{ background-image:url('/images/algemeen/agenda.png'); }

/* 0% = top, 50% = midden, 100% = onderkant */
.mod-menu.menu-tiles > li.item-488 > a{
  background-position: center 24%; /* laat wat meer van de onderkant zien */
  background-repeat: no-repeat;
}
/* 0% = top, 50% = midden, 100% = onderkant */
.mod-menu.menu-tiles > li.item-489 > a{
  background-position: center 24%; /* laat wat meer van de onderkant zien */
  background-repeat: no-repeat;
}
/* 0% = top, 50% = midden, 100% = onderkant */
.mod-menu.menu-tiles > li.item-671 > a{
  background-position: center 50%; /* laat wat meer van de onderkant zien */
  background-repeat: no-repeat;
}
/* 0% = top, 50% = midden, 100% = onderkant */
.mod-menu.menu-tiles > li.item-823 > a{
  background-position: center 15%; /* laat wat meer van de onderkant zien */
  background-repeat: no-repeat;
}
/* geld voor alle tegels */
.mod-menu.menu-tiles > li > a{
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.35);
}
/* --- MOBIEL FIX (<576px) ------------------------------------- */
@media (max-width: 576px){
  /* 1 kolom grid + ruimte tussen logo en menu */
  .container-header,
  .container-header > .container,
  .container-header > .container-fluid{
    grid-template-columns: 1fr;
    row-gap: var(--betweenLogoMenu);
    align-items: start;
  }

  /* Nav niet meer in kolom 2 */
  .container-header .container-brand{ grid-column: 1 / -1 !important; }
  .container-header .container-nav{   grid-column: 1 / -1 !important; margin-left:0 !important; }

  /* iOS/Safari: vermijd display:contents-glitch */
  .container-header .navbar,
  .container-header .container-nav .navbar,
  .container-header .navbar-collapse{
    display:block !important; width:100%;
  }

  /* Tegels onder elkaar, 100% breed */
  .container-header ul.menu-tiles{
    flex-wrap:wrap !important; margin-left:0 !important;
  }
  .container-header ul.menu-tiles > li{
    flex:0 0 100% !important;
  }
}

/* === MOBIEL FIX (<576px) =================================== */
@media (max-width: 576px){
  /* 1 kolom grid; beide blokken over volle breedte */
  .container-header,
  .container-header > .container,
  .container-header > .container-fluid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    row-gap: var(--betweenLogoMenu);
    align-items: start;
  }
  .container-header .container-brand{ grid-column: 1 / -1 !important; }
  .container-header .container-nav{   grid-column: 1 / -1 !important; margin-left:0 !important; }

  /* iOS/Safari: niet 'display:contents' */
  .container-header .navbar,
  .container-header .container-nav .navbar,
  .container-header .navbar-collapse{
    display: block !important;
    width: 100%;
  }

  /* Tegels onder elkaar, 100% breed */
  .container-header ul.menu-tiles{
    display:flex !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
  }
  .container-header ul.menu-tiles > li{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* (optioneel maar vaak nodig op iPhone) – logo zonder 'bleed' */
  :root{
    --logoBleedLeft: 0px;
    --logoBleedRight: 0px;
  }
  .container-header .navbar-brand{ height: var(--tileHeight); }
  .container-header .navbar-brand img{
    position: static;  /* of: static; als je 'bleed' helemaal wilt uitzetten */
    left: 0; top: 0; width: 100%; height: auto; object-fit: cover;
  }
}
/* --- MOBIEL: header + tegels stapelen (<576px) --- */
@media (max-width: 576px){
  /* 1 kolom header */
  .container-header,
  .container-header > .container,
  .container-header > .container-fluid{
    grid-template-columns: 1fr !important;
    row-gap: var(--betweenLogoMenu);
  }
  .container-header .container-brand,
  .container-header .container-nav{
    grid-column: 1 / -1 !important;
    margin-left: 0 !important;
  }

  /* iOS/Safari: geen display:contents */
  .container-header .navbar,
  .container-header .container-nav .navbar,
  .container-header .navbar-collapse{
    display: block !important;
    width: 100%;
  }

  /* >>> FORCEER STAPELEN: gebruik grid i.p.v. flex <<< */
  .container-header ul.menu-tiles,
  .container-header .mod-menu.menu-tiles{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--gap);
    margin-left: 0 !important;
  }
  .container-header ul.menu-tiles > li,
  .container-header .mod-menu.menu-tiles > li{
    width: 100% !important;
  }
}
@media (max-width: 576px){
  .container-header{
    padding-bottom: calc(var(--gap) * 0.8); /* bv. ~14px; speel met de factor */
  }
}