/* Homepage (layouts/index.html) — BCDKC-stijl, alleen geladen op de homepage */
.home-page {
  --home-accent: #2a3e92;
  --home-accent-dark: #1f2f6f;
  --home-tint: #f7f9ff;
  --home-line: #d6dff7;
  --home-muted: #5f6782;
  --home-header: 92px;      /* hoogte vaste header tot 1100px */
}
@media screen and (min-width: 1101px) {
  .home-page { --home-header: 153px; }
}
.home-page *, .home-page *::before, .home-page *::after { box-sizing: border-box; }
/* Theme-standaarden (img-marge, p-padding) neutraliseren binnen de homepage-blokken; sidebar blijft ongemoeid */
.home-hero img, .home-offers img, .home-news img { margin: 0; max-width: 100%; }
.home-hero p, .home-offers p, .home-steps p, .home-news p, .home-usps p { padding: 0; }
.home-hero ul, .home-usps ul { margin: 0; padding: 0; list-style: none; }
.home-hero li, .home-usps li { margin: 0; padding: 0; }

/* ---------- Knoppen ---------- */
.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.4rem;
  border: 2px solid transparent;
  border-radius: .4rem;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  touch-action: manipulation;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.home-btn:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
.home-btn--light { background: #fff; color: var(--home-accent); }
.home-btn--light:hover { background: #eef2ff; color: var(--home-accent-dark); }
.home-btn--outline { border-color: #fff; color: #fff; background: transparent; }
.home-btn--outline:hover { background: rgba(255,255,255,.14); }
.home-btn--primary { background: var(--home-accent); color: #fff; }
.home-btn--primary:hover { background: var(--home-accent-dark); color: #fff; }

/* ---------- Hero ---------- */
.home-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-top: var(--home-header);
  min-height: clamp(30rem, calc(100svh - var(--home-header)), 44rem);
  overflow: hidden;
  background: var(--home-accent-dark);
  color: #fff;
  isolation: isolate;
}
.home-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none !important;
  object-fit: cover;
  object-position: 62% 25%;
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(22,33,82,.96) 0%, rgba(31,47,111,.88) 38%, rgba(42,62,146,.35) 68%, rgba(42,62,146,0) 100%);
}
.home-hero__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 2rem 1.25rem 2.75rem;
}
.home-hero__content { max-width: 38rem; }
.home-hero__eyebrow {
  margin: 0 0 .6rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #dbe3ff;
}
.home-page .home-hero__title {
  margin: 0 0 .9rem;
  padding: 0;
  color: #fff;
  font-size: clamp(2.15rem, 5.2vw, 3.75rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.01em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.home-hero__text {
  margin: 0 0 1.5rem;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: #eef2ff;
}
.home-hero__text p { margin: 0; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.home-hero__badge { margin: 1.25rem 0 0; font-size: .95rem; }
.home-hero__badge a, .home-hero__badge {
  color: #fff;
}
.home-hero__badge a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 40px;
  padding: .45rem .95rem;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-weight: 700;
  text-decoration: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.home-hero__badge a:hover { background: rgba(255,255,255,.24); }
.home-hero__credit {
  position: absolute;
  right: .75rem;
  bottom: .4rem;
  margin: 0;
  font-size: .7rem;
  color: rgba(255,255,255,.75);
}
@media screen and (max-width: 520px) {
  .home-hero__actions .home-btn { flex: 1 1 100%; }
}
@media screen and (min-width: 769px) {
  .home-hero { align-items: center; }
  .home-hero::after {
    background: linear-gradient(90deg, rgba(22,33,82,.94) 0%, rgba(31,47,111,.86) 34%, rgba(42,62,146,.35) 62%, rgba(42,62,146,0) 82%);
  }
  .home-hero__img { object-position: 70% 30%; }
  .home-hero__inner { padding: 3rem 2rem; }
}
@media screen and (min-width: 1441px) {
  .home-hero__inner { padding-left: 0; padding-right: 0; }
}

/* ---------- Secties ---------- */
.home-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 3rem 1.25rem 3.25rem;
}
@media screen and (min-width: 769px) { .home-section { padding: 4rem 2rem; } }
@media screen and (min-width: 1441px) { .home-section { padding-left: 0; padding-right: 0; } }
.home-section__head { max-width: 46rem; margin-bottom: 1.75rem; }
.home-page .home-section__title {
  margin: 0 0 .5rem;
  padding: 0;
  color: var(--home-accent);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
}
.home-section__intro { margin: 0; color: var(--home-muted); font-size: 1.08rem; line-height: 1.55; }
.home-section__intro p { margin: 0; }

/* Aanbod-kaarten */
.home-offers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  gap: 1.25rem;
}
.home-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: .65rem;
  background: #fff;
  box-shadow: 0 6px 24px rgba(31,47,111,.07);
}
.home-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--home-tint); }
.home-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.25rem 1.25rem; }
.home-page .home-card__title { margin: 0 0 .5rem; padding: 0; color: var(--home-accent); font-size: 1.3rem; font-weight: 800; }
.home-card__text { margin: 0 0 1rem; line-height: 1.55; }
.home-card__text p { margin: 0; }
.home-card__links { display: flex; flex-wrap: wrap; gap: .5rem; margin: auto 0 0; }
.home-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  padding: .5rem .95rem;
  border: 1px solid var(--home-line);
  border-radius: 999px;
  background: var(--home-tint);
  color: var(--home-accent);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none !important;
  touch-action: manipulation;
}
.home-chip:hover, .home-chip:focus-visible { border-color: var(--home-accent); background: var(--home-accent); color: #fff; }
.home-card__credit { margin: .75rem 0 0; font-size: .72rem; color: var(--home-muted); }
/* Tablet: 2 kolommen; een losse laatste kaart wordt breed met foto naast de tekst */
@media screen and (min-width: 640px) and (max-width: 1023px) {
  .home-offers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-card:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
  .home-card:last-child:nth-child(odd) .home-card__media { flex: 0 0 48%; aspect-ratio: auto; min-height: 15rem; }
}


/* Zo begin je */
.home-steps { background: var(--home-accent); color: #fff; }
.home-steps__inner { max-width: 1440px; margin: 0 auto; padding: 3rem 1.25rem; }
@media screen and (min-width: 769px) { .home-steps__inner { padding: 4rem 2rem; } }
@media screen and (min-width: 1441px) { .home-steps__inner { padding-left: 0; padding-right: 0; } }
.home-page .home-steps__title { color: #fff; margin-bottom: 1.5rem; }
.home-steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem 2rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.home-step { display: flex; gap: 1rem; align-items: flex-start; padding: 0; }
.home-step__num {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #fff;
  color: var(--home-accent);
  font-size: 1.2rem;
  font-weight: 800;
}
.home-page .home-step__title { margin: .2rem 0 .35rem; padding: 0; color: #fff; font-size: 1.2rem; font-weight: 800; }
.home-step__text { margin: 0; color: #e3e9ff; line-height: 1.55; }
.home-step__text p { margin: 0; }
.home-steps a:not(.home-btn) { color: #fff; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.home-steps__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.home-steps__location { display: flex; gap: .5rem; margin: 0; color: #e3e9ff; line-height: 1.45; }
.home-steps__location p { display: inline; margin: 0; }

/* Laatste nieuws (+ sidebar) */
.home-page .home-bottom.content { padding-top: 3rem; }
.home-news { min-width: 0; }
.home-news__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.home-news__all-top { color: var(--home-accent); font-weight: 700; }
.home-news__all-top:hover { text-decoration: underline; }
.home-news__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.home-news__grid > li { padding: 0; }
.home-news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: .65rem;
  background: #fff;
  text-decoration: none !important;
  box-shadow: 0 6px 24px rgba(31,47,111,.06);
  transition: box-shadow .15s ease, transform .15s ease;
}
.home-news-card:hover, .home-news-card:focus-visible { box-shadow: 0 10px 30px rgba(31,47,111,.16); }
@media (hover: hover) { .home-news-card:hover { transform: translateY(-2px); } }
.home-news-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--home-tint); }
.home-news-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-news-card__media--empty { display: flex; align-items: center; justify-content: center; background: var(--home-accent); }
.home-news-card__media--empty img.home-news-card__logo { width: 55%; height: auto; object-fit: contain; }
.home-news-card__body { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem 1.1rem; }
.home-news-card__date { color: var(--home-muted); font-size: .85rem; }
.home-news-card__title { color: var(--home-accent); font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.home-news__footer { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: 0; }
.home-news__archive { color: var(--home-accent); font-weight: 700; }
.home-news__archive:hover { text-decoration: underline; }

/* Telefoon: compacte nieuwskaarten (foto links, tekst rechts) */
@media screen and (max-width: 559px) {
  .home-news__grid { gap: .85rem; }
  .home-news-card { flex-direction: row; }
  .home-news-card__media { flex: 0 0 38%; aspect-ratio: auto; min-height: 6.75rem; }
  .home-news-card__body { justify-content: center; padding: .75rem .9rem; }
  .home-news-card__title { font-size: 1rem; }
}

/* Tablet: stappen in 3 kolommen, hero-tekst in het donkere deel houden */
@media screen and (min-width: 640px) and (max-width: 1023px) {
  .home-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .home-step { flex-direction: column; gap: .6rem; }
}
@media screen and (min-width: 769px) and (max-width: 1100px) {
  .home-hero__content { max-width: 34rem; }
  .home-hero::after {
    background: linear-gradient(90deg, rgba(22,33,82,.95) 0%, rgba(31,47,111,.88) 45%, rgba(42,62,146,.45) 72%, rgba(42,62,146,.1) 100%);
  }
}

/* ---------- Hero: grote CTA, tekstlink en praktische info ---------- */
.home-btn--lg { min-height: 54px; padding: .85rem 1.6rem; font-size: 1.15rem; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.home-hero__actions { align-items: center; gap: .75rem 1.25rem; }
.home-hero__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home-hero__link:hover { color: #dbe3ff; }
.home-hero__facts { display: grid; gap: .45rem; margin-top: 1.4rem !important; font-size: .98rem; }
.home-hero__facts li { display: flex; align-items: flex-start; gap: .55rem; line-height: 1.4; color: #eef2ff; }
.home-hero__facts a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); }
.home-hero__facts a:hover { border-bottom-color: #fff; }
.home-hero__fact-icon { flex: 0 0 auto; width: 1.3em; text-align: center; }
@media screen and (max-width: 520px) {
  .home-hero__actions { gap: .5rem; }
  .home-hero__link { width: 100%; justify-content: center; }
}

/* ---------- Waarom DKC ---------- */
.home-usps { background: #fff; border-top: 1px solid var(--home-line); border-bottom: 1px solid var(--home-line); }
.home-usps__inner { max-width: 1440px; margin: 0 auto; padding: 2rem 1.25rem; }
@media screen and (min-width: 769px) { .home-usps__inner { padding: 2.5rem 2rem; } }
@media screen and (min-width: 1441px) { .home-usps__inner { padding-left: 0; padding-right: 0; } }
.home-page .home-usps__title { margin: 0 0 1rem; padding: 0; color: var(--home-accent); font-size: 1.35rem; font-weight: 800; }
.home-usps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .75rem; }
.home-usp {
  display: flex;
  align-items: center;
  gap: .7rem;
  height: 100%;
  min-height: 56px;
  padding: .7rem .9rem;
  border: 1px solid var(--home-line);
  border-radius: .55rem;
  background: var(--home-tint);
  color: var(--home-accent-dark);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none !important;
  touch-action: manipulation;
}
a.home-usp:hover, a.home-usp:focus-visible { border-color: var(--home-accent); background: #eef2ff; }
.home-usp__icon { flex: 0 0 auto; font-size: 1.45rem; line-height: 1; }
@media screen and (max-width: 559px) {
  .home-usps__list { grid-template-columns: 1fr; gap: .5rem; }
}

/* Contactregel onder de stappen */
.home-steps__contact { margin: 1.25rem 0 0; color: #e3e9ff; }

/* Pijltjes los van het label (minifier haalt de spatie weg) en fotocredit uit de buurt van de 'naar boven'-knop */
.home-hero__actions span[aria-hidden="true"], .home-news__all-top span[aria-hidden="true"], .home-news__archive span[aria-hidden="true"], .home-chip span[aria-hidden="true"] { margin-left: .3em; }
.home-page .home-hero__credit { top: .5rem; bottom: auto; right: .75rem; }

/* ---------- v2: homepage zonder sidebar ---------- */
.home-section__head, .home-sponsors__head, .home-news__head { max-width: none; }
.home-sponsors { padding-bottom: 1rem; }
@media screen and (min-width: 769px) { .home-sponsors { padding-bottom: 1.5rem; } }
.home-sponsors__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.25rem; }

/* Sponsorlogo's naast elkaar in witte tegels; loopt door op kleinere schermen */
.home-sponsors__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}
.home-sponsors__row > a {
  display: flex;
  flex: 0 1 calc((100% - 6 * .75rem) / 7);
  align-items: center;
  justify-content: center;
  min-width: 9rem;
  height: 5.75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--home-line);
  border-radius: .65rem;
  background: #fff;
  box-shadow: 0 .2rem .8rem rgba(42,62,146,.08);
  touch-action: manipulation;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.home-sponsors__row > a:hover, .home-sponsors__row > a:focus-visible { border-color: var(--home-accent); box-shadow: 0 .35rem 1rem rgba(42,62,146,.14); }
@media (hover: hover) { .home-sponsors__row > a:hover { transform: translateY(-1px); } }
.home-sponsors__row img { display: block; width: auto; max-width: 100%; max-height: 3.6rem; margin: 0; object-fit: contain; }
@media screen and (max-width: 1100px) {
  .home-sponsors__row > a { flex-basis: calc((100% - 3 * .75rem) / 4); min-width: 0; }
}
@media screen and (max-width: 559px) {
  .home-sponsors__row { gap: .5rem; }
  .home-sponsors__row > a { flex-basis: calc((100% - 2 * .5rem) / 3); height: 4.75rem; padding: .5rem .6rem; }
  .home-sponsors__row img { max-height: 2.9rem; }
}

/* Nieuws: volle breedte, 3 kaarten naast elkaar */
.home-news { padding-top: 1.5rem; }
@media screen and (min-width: 769px) { .home-news { padding-top: 2rem; } }
@media screen and (min-width: 900px) { .home-news__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Volg ons */
.home-social { padding-top: 0; }
.home-social .home-section__title { margin-bottom: 1rem; }
.home-social__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.home-social__list > li { margin: 0; padding: 0; }
.home-social__btn {
  display: flex;
  align-items: center;
  gap: .8rem;
  height: 100%;
  min-height: 60px;
  padding: .7rem .9rem;
  border: 1px solid var(--home-line);
  border-radius: .65rem;
  background: #fff;
  color: var(--home-accent-dark);
  text-decoration: none !important;
  touch-action: manipulation;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.home-social__btn:hover, .home-social__btn:focus-visible { border-color: var(--home-accent); box-shadow: 0 .35rem 1rem rgba(42,62,146,.12); }
.home-social__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(42,62,146,.1);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
.home-social__icon svg, .home-social__icon .icon { width: 1.3rem; height: 1.3rem; margin: 0; fill: currentColor; }
.home-social__btn--instagram .home-social__icon { color: #c13584; }
.home-social__btn--facebook .home-social__icon { color: #1877f2; }
.home-social__btn--flickr .home-social__icon { color: #ff0084; }
.home-social__btn--sponsorkliks .home-social__icon { color: #2a8f2a; }
.home-social__label { display: flex; flex-direction: column; gap: .1rem; line-height: 1.25; }
.home-social__label strong { font-size: 1rem; }
.home-social__label small { color: var(--home-muted); font-size: .82rem; }
@media screen and (max-width: 559px) {
  .home-social__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .home-social__btn { gap: .55rem; padding: .6rem .65rem; }
  .home-social__icon { width: 2.2rem; height: 2.2rem; }
}
@media screen and (max-width: 559px) {
  .home-social__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Zeer smalle telefoons: logo is iets kleiner (zie _custom.sass), header ~79px hoog */
@media screen and (max-width: 389px) {
  .home-page { --home-header: 79px; }
}

/* Ooievaarspas-logo in de 'Waarom DKC?'-strook (in plaats van een emoji-icoon) */
.home-usp__logo { flex: 0 0 auto; width: 6.5rem; }
.home-usp__logo img { display: block; width: 100%; height: auto; margin: 0; }
@media screen and (max-width: 559px) { .home-usp__logo { width: 5.75rem; } }
/* Tablet: 'Waarom DKC?' in 3 kolommen; de 5e tegel (Ooievaarspas) vult de tweede rij */
@media screen and (min-width: 560px) and (max-width: 1100px) {
  .home-usps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-usps__list > li:last-child:nth-child(3n+2) { grid-column: span 2; }
}