/* ============================================
   Homepage, in-between variant: same structure, copy, font and colours
   as the original, with a fresher finish (rounder cards, softer shadows,
   lighter FAQ, cards for the status block and contact details).
   Loaded after tussen.css, only on the homepage.
   ============================================ */


/* --------------------------------------------
   Hero
   -------------------------------------------- */
.hero__title { font-weight: 700; letter-spacing: -0.01em; }

.hero__points ul { padding-left: 0; list-style: none; }

.hero__points li { position: relative; padding-left: 36px; }
.hero__points li + li { margin-top: 10px; }

.hero__points li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-white);
}

.hero__points li::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 6px;
  width: 12px;
  height: 12px;
  background-color: var(--color-primary-deep);
  -webkit-mask: var(--i-check) center / contain no-repeat;
  mask: var(--i-check) center / contain no-repeat;
}

.hero .carousel__viewport {
  border: 6px solid rgba(255, 255, 255, .22);
  border-radius: 5px;
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .45);
}

.hero .carousel__figure img { border-radius: 5px; }

/* --------------------------------------------
   Intro cards: white, rounded, icon instead of grey gradient
   -------------------------------------------- */
.intro-card {
  padding: 32px 28px 28px;
  border-radius: var(--r-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.intro-card__body { gap: 12px; }

.intro-card__body::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 5px;
  background-color: var(--tint);
}

/* Icon itself, drawn in orange on top of the tinted square */
.intro-card__body { position: relative; }
.intro-card__body::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 24px;
  height: 24px;
  background-color: var(--color-primary-deep);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.intro-card:nth-child(1) { --icon: var(--i-user); }
.intro-card:nth-child(2) { --icon: var(--i-chat); }
.intro-card:nth-child(3) { --icon: var(--i-search); }
.intro-card:nth-child(4) { --icon: var(--i-heart); }

.intro-card__body--center { justify-content: flex-start; }
.intro-card__title { font-size: 30px; }

/* "Lees meer" as a soft pill */
.acc--more .acc__title {
  display: inline-flex;
  width: fit-content;
  padding: 9px 16px 9px 18px;
  border-radius: 5px;
  background-color: var(--tint);
  transition: background-color .25s;
}

.acc--more .acc__text { font-size: 17px; }
.acc--more .acc__icon { --acc-icon: 20px; color: var(--color-primary-deep); }
.acc--more[open] > .acc__title { margin-bottom: 14px; background-color: var(--color-primary); color: var(--color-text); }
.acc--more[open] .acc__icon { color: var(--color-text); }

@media (hover: hover) {
  .acc--more:not([open]):hover > .acc__title { background-color: #FFE3CC; color: var(--color-text); }
  .intro-card__more > .acc:hover { transform: none; }
}

/* --------------------------------------------
   Wie zijn wij?
   -------------------------------------------- */
.about__image img {
  border-radius: var(--r-card);
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .45);
}

.about__links-title { margin-top: 28px; }

.about .link-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.about .link-list li { margin: 0 !important; padding: 0 !important; }

.about .link-list a {
  gap: 8px;
  width: auto;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .25s, color .25s;
}

.about .link-list__icon svg { margin: 0; }
.about .link-list__text { padding: 0; }

@media (hover: hover) {
  .about .link-list a:hover { background-color: var(--color-white); }
  .about .link-list a:hover .link-list__text { color: var(--color-text); }
  .about .link-list a:hover .link-list__icon svg { fill: var(--color-primary-deep); }
}

/* --------------------------------------------
   Location carousel
   -------------------------------------------- */
.carousel--location .carousel__figure img { border-radius: 5px; }
.carousel--location .carousel__dot { background: var(--color-primary); opacity: .3; }
.carousel--location .carousel__dot[aria-current="true"] { opacity: 1; }

/* --------------------------------------------
   Photo tiles: rounded, gradient from the bottom, text at the bottom
   -------------------------------------------- */
.tiles__inner { gap: 24px; }

.tile {
  justify-content: flex-end;
  min-height: 400px;
  padding: 32px;
  overflow: hidden;
  border-radius: var(--r-card);
}

.tile::before {
  border-radius: var(--r-card);
  background: linear-gradient(to top, rgba(30, 42, 49, .94) 0%, rgba(30, 42, 49, .72) 45%, rgba(30, 42, 49, .25) 100%);
  opacity: 1;
}

.tile__title { font-weight: 600; }
.tile__cta { margin-top: 8px; }

/* --------------------------------------------
   Contact band: two white cards on the orange band
   -------------------------------------------- */
.contact-band { align-items: stretch; }

.contact-band__col {
  padding: 36px;
  border-radius: var(--r-card);
  background-color: var(--color-white);
  box-shadow: 0 24px 44px -24px rgba(0, 0, 0, .35);
}

.contact-band__inner { gap: 14px; }

.contact-band__title {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--color-text);
  font-size: 30px;
}

.contact-band__title::before {
  content: "";
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 5px;
  background-color: var(--tint);
}

.contact-band__inner { position: relative; }
.contact-band__inner::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 24px;
  height: 24px;
  background-color: var(--color-primary-deep);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.contact-band__col--address { --icon: var(--i-pin); }
.contact-band__col:not(.contact-band__col--address) { --icon: var(--i-clock); }

.contact-band__text,
.contact-band__text a { color: var(--color-text); font-weight: 400; }
.contact-band .prose a { text-decoration-color: var(--color-primary); }
.contact-band__spacer { display: none; }

/* --------------------------------------------
   Tablet and mobile
   -------------------------------------------- */
@media (max-width: 1024px) {
  .contact-band { gap: 20px; }
}

@media (max-width: 767px) {
  .intro-card { padding: 24px 20px; }
  .intro-card__title { font-size: 26px; }

  .tile { min-height: 340px; padding: 24px 20px; }

  .contact-band__col { padding: 24px 20px; }
  .contact-band__title { font-size: 24px; }
}

/* Long e-mail addresses must wrap inside the cards */
.mededelingen__text a,
.contact-band__text a { overflow-wrap: anywhere; }

/* Larger hero slider */
@media (min-width: 1025px) {
  .hero__text { flex: 1 1 0; }
  .hero__media { flex: 1.2 1 0; }
  .hero__title { font-size: 42px; }
}

/* Intro cards: smaller body text under the title */
.intro-card__text { font-size: 16px; line-height: 1.55; }