/* Technische gegevens: leest als een technisch etiket (designsysteem §1, §4).
   Indeling (Ruud 30-09-2026): links (4/12) kop, drie kerngetallen groot, bron en documenten; rechts (8/12) de specs in twee
   kolommen naast elkaar, "Lucht" en "Uitvoering". De bron staat klein achter de waarde. De container (max. 1320 px) komt
   van het thema (.peek-main--product); dit blok vult hem. */
.peek-ingr{ position:relative; z-index:3; display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:24px clamp(24px, 4vw, 56px); align-items:start;
  padding:clamp(64px, 9vw, 144px) var(--peek-m, 56px); background:var(--wp--preset--color--studio, #040506); color:var(--wp--preset--color--ink, #ECEBE7);
  border-top:1px solid var(--wp--preset--color--line, rgba(236,235,231,.14)); }
.pi-head{ min-width:0; }
.pi-kicker{ margin:0; font:500 12px/1.3 var(--wp--preset--font-family--mono, monospace); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--ink-2, #A4A7AA); }
.pi-code{ display:block; margin-top:10px; font:400 clamp(44px, 5vw, 80px)/.95 var(--wp--preset--font-family--display, serif); letter-spacing:-.02em; text-transform:none; color:var(--wp--preset--color--ink, #ECEBE7); }

/* Kerngetallen: mono-label, grote serif-waarde, bronpagina klein eronder. */
.pi-kern{ margin:28px 0 0; padding:0; display:grid; gap:18px; }
.pi-kern__item{ padding-top:14px; border-top:1px solid var(--wp--preset--color--line, rgba(236,235,231,.14)); }
.pi-kern dt{ margin:0 0 6px; font:500 12px/1.3 var(--wp--preset--font-family--mono, monospace); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--ink-3, #7E8286); }
.pi-kern dd{ margin:0; display:flex; flex-direction:column; gap:4px; }
.pi-kern__val{ font:400 clamp(30px, 2.6vw, 42px)/1.05 var(--wp--preset--font-family--display, serif); letter-spacing:-.01em; color:var(--wp--preset--color--ink, #ECEBE7); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.pi-kern__val.is-long{ font-size:clamp(22px, 1.7vw, 28px); }
.pi-kern dd small{ font:400 12px/1.4 var(--wp--preset--font-family--mono, monospace); color:var(--wp--preset--color--ink-3, #7E8286); letter-spacing:.04em; }

/* Twee spectabellen naast elkaar. */
.pi-body{ min-width:0; width:100%; display:grid; grid-template-columns:minmax(0, 1fr); gap:28px clamp(24px, 3vw, 48px); align-items:start; }
.pi-body--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.pi-col{ min-width:0; }
.pi-col-h{ margin:0 0 6px; font:500 12px/1.3 var(--wp--preset--font-family--mono, monospace); letter-spacing:.14em; text-transform:uppercase; color:#8FD8FF; }
.pi-table{ width:100%; border-collapse:collapse; font:400 13.5px/1.45 var(--wp--preset--font-family--mono, monospace); font-variant-numeric:tabular-nums; table-layout:fixed; }
.pi-table tbody th, .pi-table td{ text-align:left; vertical-align:baseline; padding:10px 10px 10px 0; border-bottom:1px solid var(--wp--preset--color--line, rgba(236,235,231,.14)); overflow-wrap:anywhere; }
.pi-table tbody th{ font-weight:400; color:var(--wp--preset--color--ink-2, #A4A7AA); width:38%; }
.pi-table td{ color:var(--wp--preset--color--ink, #ECEBE7); padding-right:0; }
.pi-table .pi-src{ display:inline; color:var(--wp--preset--color--ink-3, #7E8286); font-size:12px; letter-spacing:.02em; white-space:normal; margin-left:6px; }   /* lange bronnoten ([TE BEVESTIGEN …]) mogen omlopen: geen horizontale scroll */
.pi-bron, .pi-note{ margin:14px 0 0; font:400 12px/1.5 var(--wp--preset--font-family--mono, monospace); color:var(--wp--preset--color--ink-3, #7E8286); }
.pi-kern + .pi-bron, .pi-kern + .pi-note{ margin-top:24px; }
.pi-note{ margin-top:4px; }

/* Documenten (links, onder de kerngetallen). */
.pi-docs-h{ margin:28px 0 8px; font:500 12px/1.3 var(--wp--preset--font-family--mono, monospace); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--ink-2, #A4A7AA); }
.pi-docs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--wp--preset--color--line, rgba(236,235,231,.14)); }
.pi-docs li{ display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--wp--preset--color--line, rgba(236,235,231,.14)); font-size:15px; }
.pi-docs a{ color:var(--wp--preset--color--ink, #ECEBE7); text-decoration:none; border-bottom:1px solid rgba(239,146,33,.6); }
.pi-docs a:hover{ border-bottom-color:var(--wp--preset--color--orange, #EF9221); }
.pi-docs small{ color:var(--wp--preset--color--ink-3, #7E8286); font-size:12px; }
.peek-tbc{ font:400 12px/1.4 var(--wp--preset--font-family--mono, monospace); color:var(--wp--preset--color--ink-3, #7E8286); letter-spacing:.02em; font-style:normal; }

.pi-bestek{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; }
.pi-copy{ appearance:none; min-height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--wp--preset--color--line, rgba(236,235,231,.2)); background:transparent; color:inherit; font:500 12px/1 var(--wp--preset--font-family--mono, monospace); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.pi-copy.is-done{ border-color:#009AD7; color:#8FD8FF; }
.pi-orig{ opacity:.8; }

@media (max-width:1099px){
  .pi-body--2{ grid-template-columns:minmax(0, 1fr); }   /* smallere desktop: Lucht boven Uitvoering, naast de kop */
}
@media (max-width:899px){
  /* Mobiel: alles onder elkaar (kerngetallen, Lucht, Uitvoering, documenten). */
  .peek-ingr{ grid-template-columns:1fr; padding:64px 16px; }
  .pi-head{ display:contents; }
  .pi-kicker{ order:1; }
  .pi-kern{ order:2; margin-top:0; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:14px; }
  .pi-body{ order:3; }
  .pi-bron, .pi-note, .pi-docs-h, .pi-docs, .pi-head script{ order:4; }
  .pi-bron{ margin-top:0; }
  .pi-docs-h{ margin-top:12px; }
  .pi-table{ font-size:13px; }
  .pi-table tr{ display:grid; grid-template-columns:1fr; gap:2px; padding:10px 0; border-bottom:1px solid var(--wp--preset--color--line, rgba(236,235,231,.14)); }
  .pi-table tbody th, .pi-table td{ border:0; padding:0; width:auto; }
  .pi-table tbody th{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--wp--preset--color--ink-3, #7E8286); }
}