/* vextro.nl/partners, ontwerp B: brede rijen met banner links en knoppen rechts. Bouwt op home.css (.vxh). */
.vxh > .in { min-width: 0; width: 100%; }
.vxh .pt-top { padding: 56px 0 0; }
.vxh .pt-top h1.big { max-width: none; margin-bottom: 12px; }
.vxh .pt-top .lead { margin: 0; max-width: 56ch; }
.vxh .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.vxh .pt-list { list-style: none; margin: 0; padding: 32px 0 0; display: grid; gap: 12px; }
.vxh .pt-row { position: relative; display: grid; grid-template-columns: 260px minmax(0, 1fr) auto; border: 1px solid var(--d-line); border-radius: 10px; background: var(--d-card); overflow: hidden; scroll-margin-top: 100px; }
.vxh .pt-ban { position: relative; min-height: 130px; background-size: cover; }
.vxh .pt-ban > img:not(.pt-logo) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vxh .pt-logo { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #0b0d12; border: 3px solid var(--d-card); font: 700 24px var(--f-display); color: var(--d-blue); object-fit: cover; }
.vxh .pt-mid { padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.vxh .pt-mid h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.vxh .pt-mid p { margin: 0; color: var(--d-mut); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.vxh .pt-side { position: relative; padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; gap: 8px; border-left: 1px solid var(--d-line); min-width: 190px; }
.vxh .pt-side form { margin: 0; display: flex; }
.vxh .pt-side .btn, .vxh .pt-like { justify-content: center; }
.vxh .btn.sm { padding: 10px 16px; font-size: 14px; }
.vxh .pt-like { flex: 1; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--d-line); border-radius: 9px; background: none; color: var(--d-mut); font: 600 13.5px var(--f-body); cursor: pointer; text-decoration: none; }
.vxh .pt-like:hover { color: var(--d-ink); border-color: var(--d-strong); }
.vxh .pt-like:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 2px; }
.vxh .pt-heart { font-size: 16px; line-height: 1; color: #ff7a90; }
.vxh .pt-like.is-on { border-color: rgba(255, 122, 144, .5); color: var(--d-ink); background: rgba(255, 122, 144, .08); }

.vxh .pt-empty { margin-top: 32px; padding: 28px; border: 1px dashed var(--d-strong); border-radius: 10px; }
.vxh .pt-empty h2 { margin: 0 0 6px; font-size: 20px; }
.vxh .pt-empty p { margin: 0; color: var(--d-mut); }
.vxh .pt-join { margin: 48px 0 72px; padding: 26px 28px; border: 1px solid var(--d-line); border-radius: 10px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.vxh .pt-join h2 { margin: 0 0 4px; font-size: 22px; }
.vxh .pt-join p { margin: 0; color: var(--d-mut); }

@media (max-width: 860px) {
    .vxh .pt-row { grid-template-columns: 1fr; }
    .vxh .pt-ban { min-height: 110px; }
    .vxh .pt-side { border-left: 0; border-top: 1px solid var(--d-line); flex-direction: row; align-items: stretch; }
    .vxh .pt-side .btn { flex: 1; }
    .vxh .pt-side form, .vxh .pt-side > .pt-like { flex: 0 0 auto; }
}