/* Aanvullingen voor de freelance-site van Borgland, op de huisstijl in style.css (zelfde tokens). */
.hero-klein { padding-block: clamp(2.5rem, 5vw, 4rem); }
.hero-klein h1 { max-width: 44rem; }
.hero-klein .lead { margin-top: 1rem; }
.hero-klein .actions { margin-top: 1.5rem; }

.portret { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sheet); box-shadow: 0 0 0 1px var(--line); margin-bottom: 1rem; display: block; }
.kaart-persoon h3, .register h3 { padding-right: 0; }
.portret-groot { width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.over-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.cell h3 { font-size: var(--step-1); }
.cell-cta { background: var(--borg-soft); }

.dienst-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.dienst-grid .prose h2:first-child { margin-top: 0; }
.vinklijst { list-style: none; padding-left: 0 !important; display: grid; gap: .55rem; }
.vinklijst li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .6rem; align-items: start; margin: 0 !important; }
.vinklijst svg { width: 20px; height: 20px; color: var(--ok, var(--borg)); margin-top: .15rem; }
.tags { list-style: none; padding-left: 0 !important; display: flex; flex-wrap: wrap; gap: .45rem; }
.tags li { margin: 0 !important; font-family: var(--font-data); font-size: var(--step--1); background: var(--borg-soft); color: var(--ink); border-radius: 999px; padding: .3rem .75rem; }
.andere { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.andere a { font-weight: 600; text-decoration: none; }
.andere a::after { content: " →"; }

.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.pf-grid.pf-klein { grid-template-columns: repeat(auto-fill, minmax(260px, 340px)); }
.pf-kaart { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 1rem; align-items: start; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.pf-kaart:hover { border-color: var(--borg); transform: translateY(-2px); }
.pf-kaart img { width: 110px; height: auto; border-radius: 4px; border: 1px solid var(--line); background: #fff; }
.pf-tekst { display: grid; gap: .3rem; }
.pf-tekst .eyebrow { color: var(--seal-text, var(--muted)); }
.pf-link { font-weight: 600; color: var(--borg); font-size: .95rem; margin-top: .25rem; }
.pf-link::after { content: " →"; }

.band-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.band-grid p { margin-top: .5rem; max-width: 36rem; }

@media (max-width: 900px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .dienst-grid, .over-grid, .band-grid { grid-template-columns: minmax(0, 1fr); }
  .portret-groot { max-width: 220px; }
}
@media (min-width: 901px) { .grid.cols-3 .cell-cta { grid-column: span 2; } }
/* logo in de voet: .footer-grid a (inline-block) overschreef .brand (inline-flex) */
.footer-grid a.brand { display: inline-flex; align-items: center; gap: .6rem; padding-block: 0; }
.kb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.kb-kaart { display: grid; gap: .5rem; align-content: start; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.kb-kaart:hover { border-color: var(--borg); transform: translateY(-2px); }
.kb-kaart strong { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; }
@media (max-width: 900px) { .kb-grid { grid-template-columns: minmax(0, 1fr); } }