/* The two overview hubs: /dienst/ and /informatie/.
 *
 * Ported from Work/Website1/app/dienst/Dienst.module.css (prefix `hub-`) and
 * app/informatie/Informatie.module.css (prefix `hubinfo-`).
 *
 * Two prefixes, not one: the React build imports the Dienst module for both
 * pages and layers the Informatie module on top purely to override the hero
 * image's corner radius. Both modules define `.imageWindow`, so merging them
 * under one prefix would silently drop the override.
 *
 * The pages also reuse the breadcrumb, hero, kicker, process and CTA blocks
 * from dienst.css (`svc-`), which inc/assets.php enqueues alongside this file -
 * mirroring `import shared from '.../ServiceDetail.module.css'` in the sources.
 *
 * Regenerate rather than hand-edit:
 *
 *   node tools/port-css.mjs ../Website1/app/dienst/Dienst.module.css hub-
 *   node tools/port-css.mjs ../Website1/app/informatie/Informatie.module.css hubinfo-
 *
 * then check each with tools/check-css.mjs.
 */

/* --- shared hub layout (Dienst.module.css) --- */
.hub-page {
  --accent: var(--green-deep);
  --accent-soft: var(--green-soft);
  background: var(--paper);
}

.hub-page section[id] {
  scroll-margin-top: 1.5rem;
}
.hub-imageWindow {
  border-radius: 1rem 5.5rem 1rem 1rem;
}
.hub-imageWindow img {
  left: 0;
  width: 100%;
}
.hub-page section[tabindex]:focus {
  outline: none;
}
.hub-page section[tabindex]:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: -3px;
}

.hub-overview {
  background: var(--green-soft);
  padding: clamp(3.5rem, 6vw, 6rem) max(4.5vw, calc((100vw - 1260px) / 2));
}
.hub-sectionHeading {
  align-items: end;
  display: flex;
  gap: 3rem;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}
.hub-sectionHeading h2,
.hub-service h2 {
  font-size: clamp(2rem, 3.7vw, 3.5rem);
  font-weight: 550;
  letter-spacing: -0.052em;
  line-height: 1.05;
}
.hub-sectionHeading > p {
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 420px;
}
.hub-jumpGrid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hub-jumpLink,
.hub-service {
  --accent: var(--forest);
}
.hub-jumpLink[data-tone='lime'],
.hub-service[data-tone='lime'] {
  --accent: var(--lime);
}
.hub-jumpLink[data-tone='blue'],
.hub-service[data-tone='blue'] {
  --accent: var(--blue);
}
.hub-jumpLink[data-tone='orange'],
.hub-service[data-tone='orange'] {
  --accent: var(--orange);
}
.hub-jumpLink {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.5rem;
  transition:
    border-color 180ms ease,
    transform 180ms ease;
}
.hub-jumpLink:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.hub-jumpLink > svg {
  color: var(--accent);
  flex-shrink: 0;
}
.hub-jumpLink strong {
  font-size: 1.15rem;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.hub-jumpLink span {
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.hub-jumpLink > svg:last-child {
  margin-top: auto;
}
.hub-service {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: clamp(2.5rem, 7vw, 7rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  margin: 0 auto;
  max-width: 1390px;
  padding: clamp(4rem, 7vw, 7rem) 4.5vw;
}
.hub-serviceHeading {
  align-self: start;
  border-top: 3px solid var(--accent);
  padding-top: 1.5rem;
}
.hub-serviceHeading > p:first-child {
  color: var(--ink-muted);
  font-size: 0.68rem;
  line-height: 1.6;
}
.hub-serviceHeading > p:first-child svg {
  color: var(--accent);
  flex-shrink: 0;
}
.hub-summary {
  color: var(--ink-muted);
  line-height: 1.65;
  margin-top: 1.2rem;
}
.hub-infoLink {
  align-items: center;
  color: var(--green-deep);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 680;
  gap: 0.6rem;
  min-height: 44px;
  margin-top: 1rem;
}
.hub-infoLink:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.hub-work {
  min-width: 0;
}
.hub-offering {
  border-top: 1px solid var(--line);
  padding: 1.5rem 0 1.8rem;
}
.hub-offering h3,
.hub-result h3 {
  font-size: 1.18rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  margin-bottom: 0.65rem;
}
.hub-offering p {
  color: var(--ink-muted);
  line-height: 1.65;
}
.hub-result {
  background: var(--mist);
  border-left: 3px solid var(--accent);
  border-radius: 0 0.7rem 0.7rem 0;
  padding: 1.5rem;
}
.hub-result h3 {
  font-size: 0.86rem;
}
.hub-result ul {
  display: grid;
  gap: 0.7rem;
}
.hub-result li {
  align-items: start;
  color: var(--ink-muted);
  display: flex;
  font-size: 0.92rem;
  gap: 0.6rem;
  line-height: 1.55;
}
.hub-result svg {
  color: var(--green-deep);
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.hub-process {
  max-width: 1390px;
}
/* The step list itself is styled by ServiceDetail.hub-module.hub-css (.hub-process-list /
   .hub-step-bar). The accent comes from --accent on .hub-page, so nothing is
   overridden here. */
.hub-contactBubble {
  align-items: center;
  background: var(--ink);
  border: 1px solid #6b8a56;
  border-radius: 999px;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  box-shadow: 0 6px 24px rgba(19, 34, 28, 0.2);
  color: white;
  display: flex;
  font-size: 0.9rem;
  font-weight: 650;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.8rem 1.2rem;
  position: fixed;
  right: max(1.5rem, env(safe-area-inset-right));
  z-index: 15;
  transition: background 180ms ease;
}
.hub-contactBubble svg {
  color: #9bd347;
  flex-shrink: 0;
}
.hub-contactBubble:hover {
  background: var(--forest);
}
/* Reserve space only on this page so the fixed control cannot cover the footer's final row. */
body:has(.hub-page) footer {
  padding-bottom: calc(6rem + env(safe-area-inset-bottom));
}

@media (max-width: 1080px) {
  .hub-jumpGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .hub-imageWindow {
    border-radius: 0.8rem 3.5rem 0.8rem 0.8rem;
  }
  .hub-overview,
  .hub-service {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .hub-sectionHeading {
    align-items: start;
    flex-direction: column;
    gap: 1.2rem;
  }
  .hub-service {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .hub-jumpGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hub-jumpLink {
    display: grid;
    gap: 0.6rem 1rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 1.2rem;
  }
  .hub-jumpLink span {
    grid-column: 2;
  }
  .hub-jumpLink > svg:last-child {
    grid-column: 3;
    grid-row: 1 / 3;
    margin: auto;
  }
  .hub-service h2 {
    font-size: clamp(1.85rem, 9vw, 3rem);
    overflow-wrap: anywhere;
  }
  .hub-contactBubble {
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    font-size: 0.84rem;
    min-height: 48px;
    padding: 0.75rem 1rem;
    right: max(0.75rem, env(safe-area-inset-right));
  }
}
@media print {
  .hub-contactBubble {
    display: none;
  }
  body:has(.hub-page) footer {
    padding-bottom: 2rem;
  }
}

/* --- informatie hero override (Informatie.module.css) --- */
.hubinfo-imageWindow {
  border-radius: 1rem 5.5rem 1rem 1rem;
}

.hubinfo-imageWindow img {
  left: 0;
  width: 100%;
}

@media (max-width: 760px) {
  .hubinfo-imageWindow {
    border-radius: 0.8rem 3.5rem 0.8rem 0.8rem;
  }
}