/* Sectie 8: call to action (halve pagina, geel) + footer (halve pagina, zwart).
   Gebruikt op index.html (CTA + footer) en contact.html (alleen footer). */

/* ---------- Einde van de homepagina: CTA (boven) + footer (onder) = precies één scherm ---------- */
.end { display: grid; grid-template-rows: 1fr 1fr; height: 100vh; height: 100svh; }
.end .cta, .end .site-foot { min-height: 0; }

/* ---------- CTA ---------- */
.cta {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto;
  /* Kruisjes: minstens 40 px van de bovenrand (op groot scherm de helft van de marge). De labels staan 40 px onder de kruisjes. */
  --cta-k: max(40px, calc(var(--margin) * 0.5));
  min-height: max(50vh, 380px); padding: max(clamp(24px, 5vh, 72px), calc(var(--cta-k) + 40px)) var(--margin) clamp(24px, 5vh, 72px);
  background: var(--yellow); color: var(--black); overflow: hidden;
}
.cta__label { grid-column: 1; grid-row: 1; }
.cta__where { grid-column: 2; grid-row: 1; text-align: right; }
.cta__title {
  grid-column: 1; grid-row: 3; align-self: end;
  font-size: clamp(36px, min(7vw, 9vh), 128px); font-weight: 600; line-height: 0.95; letter-spacing: 0;   /* schaalt ook mee met de schermhoogte */
}
.cta__title span { display: block; }
.cta__btn {
  grid-column: 2; grid-row: 3; align-self: end; justify-self: end;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px; padding: 18px 24px; background: var(--black); color: var(--white);
}
/* Hover: de knop vult zich wit van links naar rechts, de tekst wordt zwart */
.cta__btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white);
  transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.cta:hover .cta__btn::before { transform: scaleX(1); transform-origin: left; }
.cta__btn { transition: color 0.3s cubic-bezier(0.65, 0, 0.35, 1); }
.cta:hover .cta__btn { color: var(--black); }
.cta__btn i { width: 8px; height: 8px; background: var(--yellow); }
/* De titel schuift bij hover een fractie op, regel per regel (100 ms na elkaar) */
.cta__title span { transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
.cta__title span + span { transition-delay: 0.1s; }
.cta:hover .cta__title span { transform: translateX(16px); }
/* Zwarte kruisjes in de hoeken (op geel) */
.cta .k { position: absolute; width: 13px; height: 13px; margin: -6px 0 0 -6px; }
.cta .k::before, .cta .k::after { content: ""; position: absolute; background: var(--black); }
.cta .k::before { left: 0; right: 0; top: 6px; height: 1px; }
.cta .k::after { top: 0; bottom: 0; left: 6px; width: 1px; }
/* Op geel is de gele cursor onzichtbaar: daar wordt hij zwart */
.xh.dark::before, .xh.dark::after { background: var(--black); }

/* ---------- Footer ---------- */
.site-foot {
  position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto 1fr auto; column-gap: 24px;
  min-height: max(50vh, 380px); padding: clamp(24px, 5vh, 72px) var(--margin) clamp(16px, 3vh, 32px);
  background: var(--black); color: var(--white); font-size: 13px; line-height: 1.6;
}
.site-foot .mono { font-size: 11px; line-height: 1.7; }
.site-foot a { transition: color 0.2s; }
.site-foot a:hover { color: var(--yellow); }
.site-foot__logo { grid-column: 1; grid-row: 1; }
.site-foot__logo img { height: 44px; width: auto; }
.site-foot__col { grid-row: 1; display: grid; align-content: start; gap: 2px; }
.site-foot__col h3 { margin: 0 0 10px; font-weight: 400; color: #8A8A86; }
/* Vaste kolom per blok (niet via nth-of-type: het menu is een <nav>, de rest <div>) */
.site-foot__col--1 { grid-column: 3; }
.site-foot__col--2 { grid-column: 4; }
.site-foot__col--3 { grid-column: 5; }
.site-foot__col--4 { grid-column: 6; justify-self: end; text-align: right; }
.site-foot__bottom {
  grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-top: 20px; border-top: 1px solid #2a2a2a;
}
.site-foot__top { color: var(--white); }

@media (max-width: 900px) {
  .end { height: auto; grid-template-rows: auto auto; }
  .end .cta, .end .site-foot { min-height: max(50vh, 380px); }
  .cta { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto auto; row-gap: 24px; }
  .cta__where { grid-column: 1; grid-row: 2; text-align: left; }
  .cta__title { grid-row: 4; }
  .cta__btn { grid-column: 1; grid-row: 5; justify-self: start; }
  .site-foot { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .site-foot__logo { grid-column: 1 / -1; }
  .site-foot__col { grid-column: auto !important; grid-row: auto; justify-self: start !important; text-align: left !important; }
  .site-foot__bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .cta *, .cta *::before { transition: none !important; } }