/* custom_v18.css */
/* Brutalist black and white with 1 accent */
/* Works with html[data-theme="dark|light"] */

:root{
  --bg:#0b0b0b;
  --fg:#f2f2f2;
  --muted:#bdbdbd;
  --line:#2a2a2a;
  --card:#0b0b0b;
  --accent:#0054ff; /* 1 flashy accent */

  --wrap:1200px;
  --g:16px;
  --b:1px; /* borders 1px */
}

html[data-theme="light"]{
  --bg:#f6f6f6;
  --fg:#0b0b0b;
  --muted:#444;
  --line:#cfcfcf;
  --card:#f6f6f6;
  --accent:#0054ff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.4;
}




/* ----------------------------------
   Fixed side ads
---------------------------------- */

.side-ad {
  position: fixed;
  top: 50%;
  transform: translateY(-55%);
  width: 120px;
  z-index: 50;
  pointer-events: auto;
}

/* afstand t.o.v. wrap (1200px) + ademruimte */
.side-ad--left {
  left: calc(50% - 600px - 120px - 20px);
}

.side-ad--right {
  right: calc(50% - 600px - 120px - 20px);
}

/* pas tonen vanaf brede schermen */
@media (max-width: 1519px) {
  .side-ad {
    display: none;
  }
}

@media (min-width: 721px){
      .ad-desktop{display:block!important;}
      .ad-mobile{display:none!important;}
    }



img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
button,input{ font:inherit; }


/* Zorgt dat anchors niet tegen de top plakken */
#story-content {
  scroll-margin-top: 90px; /* pas aan naar je nav hoogte */
}

/* layout */
.wrap{
  max-width:var(--wrap);
  margin: 0 auto;
  padding: 0 var(--g);
}

/* topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg);
  /* geen border-bottom meer */
}

/* header row */
.header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 0;
	justify-content: space-evenly;
}

/* brand */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  flex:0 0 auto;
}
.brand .logo{
  width: 180px;
  height:auto;
}
.logo--dark{ display:block; }
.logo--light{ display:none; }
html[data-theme="light"] .logo--dark{ display:none; }
html[data-theme="light"] .logo--light{ display:block; }

/* nav */
.nav{
  display:flex;
  gap:10px;
  flex:0 0 auto;
}
.nav a{
  display:inline-flex;
  align-items:center;
  padding:10px 10px;
  border:var(--b) solid transparent;
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:800;
  font-size:13px;
}
.nav a:hover{
  border-color:var(--line);
  text-decoration:none;
}
.nav a:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* search */

.searchForm{
  display:flex;
  align-items:stretch;
  width:100%;
  border-bottom: 1px solid var(--accent);
}

/* input */
.searchInput{
  flex:1;
  height:var(--field-h);
  padding:0 16px;
  margin:0;
  border:2px solid var(--field-border);
  border-right:0;
  border-radius:var(--radius) 0 0 var(--radius);

  background:var(--field-bg);
  color:var(--accent);
  font-size:16px;
  outline:none;
}

.searchInput::placeholder{
  color:var(--placeholder);
}

/* button */
.searchBtn{
  width:64px;
  height:var(--field-h);
  border:2px solid var(--field-border);
  border-left:0;
  border-radius:0 var(--radius) var(--radius) 0;

  background:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:10px;
}

.searchIcon{
  width:20px;
  height:20px;
  stroke:#fff;
  fill:none;
  stroke-width:2;
  opacity:0.9;
}

/* focus */
.searchInput:focus-visible{
  border-color:var(--accent);
}
.searchInput:focus-visible + .searchBtn{
  border-color:var(--accent);
}


.btn, .button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
	text-align: center;
}

.btn, .button{
  padding:14px 22px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:13px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
}
.btn:hover, .button:hover{
  background:transparent;
  color:var(--accent);
  text-decoration:none;
}

/* social and menu */
.social{
  display:flex;
  align-items:center;
  gap:1px;
  flex:0 0 auto;
}

/* icons: geen border */
.iconbtn{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  padding:0;
  opacity:0.9;
}
.iconbtn img{
  width:28px;
  height:28px;
}
.iconbtn:hover{
  opacity:1;
}

/* hamburger: desktop verborgen */
.menuToggle{
  display:none; /* alleen op mobile zichtbaar */
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  border: none;
  background:transparent;
}
.menuToggle img{ width:28px; height:28px; }
.menuToggle:hover{
  background: none;
}
.menuToggle:hover img{
  filter:invert(1);
}

/* mobile nav */
.mobileNav{
  display:none;
  border-top:var(--b) solid var(--line);
  padding:10px 0 14px;
}
.mobileNav a{
  display:block;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:900;
}
.mobileNav a:last-child{ border-bottom:0; }

/* cards and sections */
.sectionTitle{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:18px 0 10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:13px;
}
.sectionTitle span{
  font-weight:800;
  color:var(--muted);
  letter-spacing:0.04em;
}

.card{
  background:var(--card);
  border:var(--b) solid var(--line);
	margin-bottom: 12px;
	position: relative;
}
.cardPad{ padding:14px; }

/* section title als label */
.card .sectionTitle{
  position:absolute;
  top:2px;
  left:12px;
  background:#000000;
  color:#fff;
  padding:6px 10px;
  font-size:12px;
  font-weight:950;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border:none;
	border-radius: 999px;
  z-index:2;
}

/* subtitel (span) verbergen */
.card .sectionTitle span{
  display:none;
}

.thumb{
  transition:transform 180ms ease, filter 180ms ease;
	opacity: .9;
}

a:hover .thumb{
	opacity: 1;
  filter:contrast(1.05);
}



.kicker{
  display:inline-block;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:12px;
  color:var(--accent);
}

.h1{
  margin:10px 0 10px;
  font-size:34px;
  line-height:1.05;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:0.02em;
}

@media screen and (max-width: 600px) {
	.h1{
 font-size: 28px;
}
}

.lead{
  margin:0;
  color:var(--muted);
  font-size:15px;
}

/* hero */
.hero{
  padding:22px 0 10px;
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:var(--g);
}

/* featured images: 16/9 and taller */
.thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}

.galthumb {
	width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

/* media list */
.list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.storyRow{
  display:grid;
  grid-template-columns: 96px 1fr;
  gap:12px;
  border:var(--b) solid var(--line);
  background:var(--card);
}
.storyRow img{
  width:96px;
  height:96px;
  object-fit:cover;
}
.storyRow .inner{
  padding:10px 10px 10px 0;
}
.storyRow h3{
  margin:0 0 6px;
  font-size:14px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.storyRow p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

a.storyRow {
	text-decoration:none;
}

a.storyRow:hover {
	text-decoration:none;
	opacity: .85;
}

a.storyRow p {
	text-decoration:none;
	border-bottom: none !important;
}

/* partners */
.partners{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
  justify-content:center;
}
.partnerLogo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  border:var(--b) solid var(--line);
  background:var(--card);
}
.partnerLogo img{
  aspect-ratio: 16 / 9;
	object-fit: contain;
  width:auto;
  opacity:0.9;
}
.partnerLogo:hover{
  border-color:var(--accent);
}
.partnerLogo:hover img{
  opacity:1;
}

/* footer */
.siteFooter{
  margin-top:40px;
  padding:36px 0 24px;
  border-top:1px solid var(--line);
  background:var(--bg);
}

.footerGridNew{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:24px;
}

/* columns */
.footerCol{
  font-size:14px;
}

/* brand column */
.footerCol--brand .brand{
  display:inline-flex;
  margin-bottom:12px;
}

.footerAbout{
  margin:0;
  max-width:360px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

/* titles */
.footerTitle{
  margin:0 0 12px;
  font-size:13px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

/* nav */
.footerNav{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footerNav a{
  font-weight:900;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:0.06em;
	display: inline;
}
.footerNav a:hover{
	opacity: .85;
  text-decoration:none;
}

/* socials */
.footerSocials{
  display:flex;
  gap:1px;
}
.footerSocials a{
  display:inline-flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  opacity:0.9;
}
.footerSocials img{
  width:28px;
  height:28px;
}
.footerSocials a:hover{
  opacity:1;
}

/* bottom bar */
.footerBottom{
  margin-top:26px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:var(--muted);
}

/* responsive */
@media (max-width: 900px){
  .footerGridNew{
    grid-template-columns:1fr;
    gap:28px;
  }

  .footerBottom{
    flex-direction:column;
    align-items:flex-start;
  }
}




/* theme toggle fixed bottom right */
.theme-toggle {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 999;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
	background: var(--accent);
	padding: .5em;
}

/* default: dark theme → toon maan */
.themeIcon {
    display: none;
    user-select: none;
}

/* dark mode */
html[data-theme="dark"] .themeIcon--moon {
    display: inline;
	color: #ffffff;
}

/* light mode */
html[data-theme="light"] .themeIcon--sun {
    display: inline;
	color: #ffffff;
}

/* responsive */
@media (max-width: 980px){
  .header{
    flex-wrap:wrap;
  }
  .brand .logo{ width:150px; }

  .nav{ display:none; }

  .search{
    order:3;
    width:100%;
  }
  .social{
    order:2;
    margin-left:auto;
  }

  .menuToggle{
    display:inline-flex; /* hamburger enkel op mobile */
  }

  .heroGrid{
    grid-template-columns: 1fr;
  }

  .partners{
    grid-template-columns: repeat(3, 1fr);
  }

  .footerGrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .brand .logo{ width:145px; }
  .searchInput{ padding:12px 10px; }
  .searchBtn{ padding:0 12px; }
  .partners{ grid-template-columns: repeat(2, 1fr); }
}


/* Partner logos theme handling */

/* standaard: dark mode → logo's zoals ze zijn */
html[data-theme="dark"] .partnerLogo img {
    filter: none;
}

/* light mode → invert + lichte contrast tweak */
html[data-theme="light"] .partnerLogo img {
    filter: invert(1) contrast(1.1);
}

/* optioneel: subtiele hover correctie */
.partnerLogo:hover img {
    filter: none;
}
html[data-theme="light"] .partnerLogo:hover img {
    filter: invert(1) contrast(1.2);
}






.weatherGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
  gap: 12px;
}

.weatherCard{
  border:1px solid var(--line);
  background:var(--card);
  padding:16px 12px;
  text-align:center; /* alles centreren */
}

/* titelblok */
.weatherTop{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* regio (West / Centraal / Oost) */
.weatherRegion{
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:12px;
  color:var(--accent);
}

/* plaatsnaam kleiner + tussen haakjes */
.weatherCity{
  font-size:11px;
  font-weight:400;
	font-size: .75em; 
  color:var(--muted);
}
.weatherCity::before{ content:""; }
.weatherCity::after{ content:""; }

/* icoon groter en onder locatie */
.weatherEmoji{
  font-size:36px;
  line-height:1;
  margin-top:4px;
}

/* temperatuur prominent */
.weatherTemp{
  font-size:36px;
  font-weight:950;
  margin:10px 0 6px;
}

@media screen and (max-width: 600px) {
	.weatherTemp{
  font-size:28px;
}
}

/* meta info gecentreerd */
.weatherMeta{
  display:grid;
  gap:6px;
  font-size:13px;
  color:var(--muted);
}

@media screen and (max-width: 600px) {
	.weatherMeta{

  font-size:10px;
}
}

.weatherMeta div{
  display:flex;
  justify-content:center;
  gap:6px;
}
.weatherMeta strong{
  color:var(--fg);
  font-weight:950;
}


/* CTA with latest user_content photo background */
.ctaSpotsPhoto{
  margin-top: 32px;
  padding:20vh 0 20px 0;

  background:
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.85)),
    var(--cta-bg);
  background-size: cover;
  background-position: center;
}

html[data-theme="light"] .ctaSpotsPhoto{
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.75)),
    var(--cta-bg);
  background-size: cover;
  background-position: center;
}

.ctaOverlay{
  position:relative;
  padding:26px 0;
}

.ctaCenter{
  text-align:center;
  max-width:760px;
  margin:0 auto;
}

.ctaCenter .ctaKicker{
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:12px;
  margin-bottom:6px;
}

.ctaCenter h2{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.05;
  font-weight:950;
  text-transform:uppercase;
}

.ctaCenter p{
  margin:0 auto 16px;
  color:var(--muted);
  font-size:15px;
  max-width:620px;
}

/* CTA button uses your .btn + extra look */
.btn--cta{
  padding:14px 22px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:13px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
}
.btn--cta:hover{
  background:transparent;
  color:var(--accent);
  text-decoration:none;
}

/* credits bottom */
.ctaCredits{
  margin-top:20vh;
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  justify-content:center;
  font-size:12px;
  color:var(--muted);
}

.ctaCredits a{
  border-bottom:1px solid var(--line);
  text-decoration:none;
}
.ctaCredits a:hover{
  border-bottom-color:var(--accent);
}

/* mobile */
@media (max-width: 820px){
  .ctaCenter h2{ font-size:24px; }
  .ctaSpotsPhoto{ padding:32px 0; }
}




/* Spots overview */

.spotsFilters{
  margin-top: 10px;
}

.spotsFilterRow{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
	justify-content: space-between;
}

.spotsLabel{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:400;
  color:var(--muted);
}

@media screen and (max-width: 678px) {
	.spotsLabel{
		width: 100%;
	}
}

@media screen and (min-width: 679px) and (max-width: 1023px) {
	.spotsLabel{
		width: 31%;
	}
}

@media screen and (min-width: 1024px) {
	.spotsLabel{
		width: 23%;
	}
}

.spotsSelect{
  min-width: 160px;
  height: 44px;
  padding: 0 12px;
  border:1px solid var(--line);
  background: transparent;
  color: var(--fg);
  font-weight:800;
  text-transform:none;
  letter-spacing:0;
}

/* smaller, subtieler show archived */
.spotsCheck{
  height:auto;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:8px;
	margin-top: 22px;
    align-self: center;
}
.spotsCheck input{ 
	transform: scale(1.0); 
	opacity: .35;
}

/* subtielere columns selector */
.spotsCols span{
  font-size:11px;
  color:var(--muted);
}
.spotsCols .spotsSelect{
  min-width: 76px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border:1px solid var(--line);
}

/* verberg kolommen-keuze op mobile */
@media (max-width: 700px){
  .spotsCols{ display:none; }
}

.spotsCheck input{ transform: scale(1.1); }

.spotsCols .spotsSelect{ min-width: 90px; }

.spotsCount{
  margin-top: 10px;
}


/* Columns picker (icons) */
.spotsColsPicker{
  display:flex;
  align-items:center;
  gap:8px;
	align-self: center;
    margin-top: 22px;
	padding-left: 20px;
    border-left: 1px solid var(--line);
}

.spotsColsLabel{
  font-weight:900;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--muted);
  margin-right:2px;
}

.colsBtn{
  border:1px solid var(--line);
  background:transparent;
  padding:8px 10px;
  cursor:pointer;
  opacity:0.85;
  border-radius:10px;
}

.colsBtn:hover{ opacity:1; border-color:var(--accent); }

.colsBtn.is-active{
  border-color:var(--accent);
  background:var(--accent);
  opacity:1;
}

.colsSvg{
  width:28px;
  height:16px;
  display:block;
}

.colsSvg rect{
  fill: var(--fg);
  opacity:0.85;
}

.colsBtn.is-active .colsSvg rect{
  fill:#fff;
  opacity:1;
}

/* hide on mobile */
@media (max-width: 1023px){
  .spotsColsPicker{ display:none; }
}



/* grid */
.spotsGrid{
  display:grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}

/* card link behavior */
.spotCard{
  text-decoration:none;
}
.spotCard:hover{
  text-decoration:none;
  border-color: var(--accent);
}

/* title inside card */
.spotTitle{
  font-weight:950;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin-bottom:8px;
}

/* button alignment */
.spotBtn{
  margin-top:12px;
}

@media screen and (max-width: 500px) {
	.spotTitle {
		font-size: 12px;
	}
	
	.spotBtn span.btn {
		font-size: 12px !important;
	}
	
	.meta {
		font-size: 11px;
	}
}

/* pagination */
.spotsPagerInner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.spotsPagerBtn{
  padding:12px 18px;
}

/* responsive: voorkom overflow op mobile */
@media screen and (max-width: 700px){
  .spotsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .spotsSelect{ min-width: 140px; }
}

/* Dropdown wrapper */
.spotsDrop{
  position:relative;
  width:100%;
}

.spotsDropTrigger{
  list-style:none;
  min-width:160px;
  height:44px;
  padding:0 12px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  font-weight:800;
  text-transform:none;
  letter-spacing:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
}

.spotsDropTrigger::-webkit-details-marker{ display:none; }

.spotsDropValue{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.spotsDropChevron{
  opacity:0.7;
  font-size:12px;
}

/* Menu */
.spotsDropMenu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:60;

  border:1px solid var(--line);
  background:var(--bg);
  padding:6px;
  max-height:320px;
  overflow:auto;
}

/* Items */
.spotsDropItem{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  font-weight:800;
  color:var(--fg);
}

.spotsDropItem:hover{
  background:rgba(12,58,255,0.12);
  text-decoration:none;
}

.spotsDropItem.is-active{
  background:var(--accent);
  color:#fff;
}

/* Search inside city dropdown */
.spotsDropSearch{
  width:100%;
  height:40px;
  padding:0 10px;
  margin:0 0 6px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  font-weight:800;
  outline:none;
}

/* Close menu when not open */
.spotsDrop:not([open]) .spotsDropMenu{ display:none; }



/* Pagination: subtiel, tekstlinks */
.spotsPagerNums{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.spotsPagerLink{
  display:inline-block;
  padding:2px 4px;
  border:0;
  background:transparent;
  color:var(--fg);
  font-weight:700;
  opacity:.75;
  text-decoration:none;
}

.spotsPagerLink:hover{
  opacity:1;
  color:var(--fg);
}

.spotsPagerLink.is-active{
  opacity:1;
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:4px;
}

.spotsPagerDots{
  color:var(--muted);
  opacity:.8;
  font-weight:700;
}



/* Subtiel Archived label op cards */
.spotCard .sectionTitle{
  
  padding:6px 10px;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--fg);
  background:var(--bg);
  border-radius:999px;
  backdrop-filter: blur(6px);
  opacity:.9;
  z-index:2;
}



/* meta wrapper */
.ucMeta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

/* pill met icon */
.pill-icon{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.pill-icon img{
  width:12px;
  height:12px;
  opacity:.85;
}

/* subtiele pill styling (light/dark) */
.pill.pill-subtle{
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  letter-spacing:.2px;
}

/* light mode */
:root[data-theme="light"] .pill.pill-subtle{
  background:#e6e6e6;
  color:#111;
}

/* dark mode */
:root[data-theme="dark"] .pill.pill-subtle{
  background:#2a2a2a;
  color:#fff;
}

/* link icon */
.ucLinkIcon{
  margin-left:auto;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  opacity:.8;
}

.ucLinkIcon img{
  width:16px;
  height:16px;
}

.ucLinkIcon:hover{
  opacity:1;
}


/* Media post row */
.post-wrapper{
  display:flex;
  align-items:stretch;
  gap:0;
}

/* 3 kolommen */
.post-wrapper > a{
  flex:0 0 30%;
  max-width:30%;
  display:block;
}

.post-wrapper > a img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.post-wrapper > div:nth-child(2){
  flex:0 0 50%;
  max-width:50%;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.post-wrapper > div:nth-child(3){
  flex:0 0 20%;
  max-width:20%;
  padding:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Mobile stack */
@media (max-width: 820px){
  .post-wrapper{
    flex-direction:column;
  }

  .post-wrapper > a,
  .post-wrapper > div:nth-child(2),
  .post-wrapper > div:nth-child(3){
    flex:0 0 auto;
    max-width:100%;
    width:100%;
  }

  .post-wrapper > div:nth-child(2),
  .post-wrapper > div:nth-child(3){
    padding:16px;
  }

  /* knop links uitlijnen op mobile */
  .post-wrapper > div:nth-child(3){
    justify-content:flex-start;
  }

  /* zorg dat de knop niet “mini” is */
  .post-wrapper > div:nth-child(3) .btn{
    display:inline-flex;
    width:auto;
  }
}



/* Responsive video container (16:9) */
.video-container {
	margin-top: 22px;
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio */
  overflow: hidden;
  background: #000;
  border-radius: 6px; /* optioneel, past bij cards */
}

/* Iframe perfect laten vullen */
.video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}





/* Legacy grid support: .row + .sm-XX (equal columns) */
.row{
  display:grid;
  grid-template-columns: 1fr;   /* default: 1 kolom */
  gap:16px;
  align-items:start;

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

  /* voorkomt dat grid children de viewport open duwen */
  overflow:hidden;
}

/* alle children mogen krimpen binnen grid */
.row > *{
  min-width:0;
}

/* target enkel directe kolommen met sm-xx */
.row > [class*="sm-"]{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* Als er 2 (of meer) sm-* kolommen zijn: gelijke kolommen */
.row > [class*="sm-"]:nth-child(2),
.row > [class*="sm-"]:nth-child(2) ~ [class*="sm-"]{
  /* zet dit op de parent via een truc: we herdefiniëren .row als multi-col */
}
.row:has(> [class*="sm-"]:nth-child(2)){
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Mobile: alles onder elkaar */
@media (max-width: 720px){
  .row{ grid-template-columns: 1fr; }
}

/* Sane defaults voor partner blokken */
.row.partner img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

/* Extra: lange woorden/urls mogen nooit overflowen */
.row p, .row a, .row h1, .row h2, .row h3, .row h4{
  overflow-wrap:anywhere;
  word-break:break-word;
}



#ft-floating-toolbar {
	bottom: 10px !important;
}