/* Homepage (front-page.php). Maten: 390-design als ondergrens, 1440-design als bovengrens. */
.tpl-home {
  .label { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; }
  h2 { font-size: clamp(2.5rem, 1.943rem + 2.286vw, 4rem); }
  .link { display: inline-block; font-size: 0.75rem; }

  /* ---------- Hero ---------- */
  .hero {
    height: min(calc(var(--diag) + clamp(637px, 526.7px + 28.29vw, 934px)), calc(100svh - 64px));
    min-height: 480px;
    padding: 0;
    background: var(--coal);
  }
  .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(15 16 17 / 0.9) 0%, rgb(15 16 17 / 0.5) 55%, rgb(15 16 17 / 0.15) 100%);
  }
  .hero__content { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: calc(var(--diag) * 0.4 + 24px); }
  h1 {
    margin-bottom: clamp(16px, 7.1px + 2.286vw, 40px);
    font-size: min(clamp(2.375rem, 0.657rem + 7.048vw, 7rem), calc(36svh - 178px));
  }
  .hero p { max-width: 560px; margin-bottom: 24px; font-size: clamp(1rem, 0.907rem + 0.381vw, 1.25rem); line-height: 1.55; }
  .hero .btn { padding: 16px 22px; font-size: 0.75rem; }

  /* ---------- Branchebanen ---------- */
  .baan { display: block; height: calc(var(--diag) * 2 + 394px); padding: calc(var(--diag) + 37px) var(--gutter) 0; }
  .baan:hover { text-decoration: none; }
  .baan:focus-visible { outline: none; }
  .baan:focus-visible .baan__text { outline: 2px solid var(--ink); outline-offset: 12px; }
  .baan__photo { overflow: hidden; position: absolute; inset: calc(var(--diag) + 227px) 0 0; background: rgb(15 16 17 / 0.15); }
  .baan__photo::after { content: ''; position: absolute; inset: 0; background: var(--accent); mix-blend-mode: multiply; opacity: 0; }
  .baan__photo img { width: 100%; height: 100%; object-fit: cover; }
  .baan__text { display: block; position: relative; }
  .baan .label { margin-bottom: 16px; }
  .baan h3 { margin-bottom: 16px; font-size: clamp(2.875rem, 7.22vw, 6.5rem); }
  .baan p { max-width: 300px; font-size: clamp(1rem, 0.93rem + 0.286vw, 1.1875rem); line-height: 1.45; text-wrap: pretty; }
  .baan__arrow { font-family: var(--font-mono); font-size: 0.875rem; }
  .baan:hover .baan__photo img, .baan:focus-visible .baan__photo img { filter: grayscale(1) contrast(1.1); }
  .baan:hover .baan__photo::after, .baan:focus-visible .baan__photo::after { opacity: 1; }
  .baan:hover h3, .baan:focus-visible h3 { color: var(--paper); }

  /* ---------- Over KKD + kerncijfers ---------- */
  .over { padding-bottom: calc(var(--diag) + 76px); }
  .over .label { margin-bottom: 16px; color: var(--mute-ink); }
  .over h2 { margin-bottom: clamp(24px, 18px + 1.524vw, 40px); text-wrap: pretty; }
  .over__p { max-width: 65ch; margin-bottom: 28px; font-size: clamp(1rem, 0.93rem + 0.286vw, 1.1875rem); line-height: 1.7; }
  .over__p--desktop { display: none; }
  .stats { list-style: none; margin: 40px 0 0; padding: 0; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
  .stats li { padding: clamp(18px, 15.8px + 0.571vw, 24px) 0; border-top: 1px solid rgb(15 16 17 / 0.2); }
  .stats li:first-child { border-top: 2px solid var(--ink); }
  .stats li:last-child { border-bottom: 2px solid var(--ink); }
  .stats strong {
    display: block;
    margin-bottom: clamp(8px, 6.5px + 0.381vw, 12px);
    font-size: clamp(2.75rem, 2.286rem + 1.905vw, 4rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .stats span { font-size: 0.6875rem; color: var(--mute-ink); }

  /* ---------- Portfolio ---------- */
  .pf { padding-top: calc(var(--diag) + clamp(57px, 43.3px + 3.52vw, 94px)); }
  .pf .label { margin-bottom: 16px; color: var(--mute); }
  .pf__mosaic { margin: 32px 0; }

  @media (min-width: 640px) {
    .label { font-size: 0.75rem; }
    .link { font-size: 0.8125rem; }
    .hero::after { background: linear-gradient(to top, rgb(15 16 17 / 0.9) 0%, rgb(15 16 17 / 0.55) 55%, rgb(15 16 17 / 0.2) 100%); }
    .hero p { margin-bottom: 32px; line-height: 1.5; }
    .hero .btn { padding: 20px 32px; font-size: 0.8125rem; }

    .baan { height: calc(var(--diag) * 2 + 148px); padding-top: calc(var(--diag) + 34px); }
    .baan__photo { inset: 0 0 0 52%; }
    .baan:hover .baan__photo, .baan:focus-visible .baan__photo { left: 44%; }
    .baan__text { width: 46%; }
    .baan .label, .baan h3 { margin-bottom: 24px; }
    .baan p { max-width: 440px; }
    .baan__arrow { opacity: 0; }
    .baan:hover .baan__arrow, .baan:focus-visible .baan__arrow { opacity: 1; }

    .over .label { margin-bottom: 32px; }
    .over__p { margin-bottom: 24px; }
    .over__p--desktop { display: block; margin-bottom: 40px; }
    .stats span { font-size: 0.75rem; }

    .pf { display: grid; grid-template-columns: 1fr auto; align-items: end; }
    .pf .label { margin-bottom: 24px; }
    .pf__mosaic { grid-column: 1 / -1; grid-row: 2; margin: 48px 0 0; }
  }

  @media (min-width: 900px) {
    .hero { height: min(calc(var(--diag) + clamp(637px, 526.7px + 28.29vw, 934px)), calc(100svh - 128px)); }
    .over { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(48px, 6.667vw, 96px); }
    .stats { margin-top: 0; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .baan__photo { transition: left 0.5s var(--ease); }
    .baan__photo img { transition: filter var(--t) var(--ease), scale 0.9s var(--ease); }
    .baan__photo::after { transition: opacity var(--t) var(--ease); }
    .baan__arrow { display: inline-block; translate: -8px 0; transition: opacity var(--t) var(--ease), translate var(--t) var(--ease); }
    .baan:hover .baan__arrow, .baan:focus-visible .baan__arrow { translate: 0 0; }
    .baan:hover .baan__photo img, .baan:focus-visible .baan__photo img { scale: 1.03; }
    .baan h3 { transition: color var(--t) var(--ease); }
  }
}