/* Profielhulp (fase 3b): uitleg met voorbeelden, layouts, vragenlijsten en de galerij. Het vlak zelf: profiel.css. */

/* ---------- Navigatie en startpagina ---------- */
.ph-nav-groepen { display: grid; gap: var(--space-xs); }
.ph-nav-kop { margin: 0; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.ph-stappen { display: grid; gap: var(--space-sm); margin: 0; padding-left: var(--space-lg); }
.ph-stappen li span { display: block; color: var(--color-text-muted); font-size: var(--text-sm); }
.ph-groepen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--space-md); }
.ph-groep-kop { margin: 0 0 var(--space-2xs); font-size: var(--text-sm); }
.ph-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs); }
.ph-lijst .icon { color: var(--color-text-muted); }

/* ---------- Artikelen: code en voorbeeld naast elkaar ---------- */
.ph-artikel > * + * { margin-top: var(--space-sm); }
.ph-artikel h2 { margin-top: var(--space-lg); }
.ph-vb { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-sm); margin: var(--space-sm) 0 0; }
.ph-vb-code { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.ph-vb-code pre { margin: 0; padding: var(--space-sm); overflow-x: auto; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
                  font-size: var(--text-sm); line-height: var(--leading-snug); white-space: pre-wrap; overflow-wrap: anywhere; }
.ph-vb-code .btn { justify-self: start; }
[data-ph-kopieer][hidden] { display: none; }   /* .btn zet display en wint anders van het hidden-attribuut */
.ph-breezer .ph-kopieer { justify-self: start; }
.ph-vb-uit { min-width: 0; padding: var(--space-sm); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); }
.ph-breezer { display: grid; gap: var(--space-xs); }
.ph-breezer output { display: block; min-height: 1.5em; font-weight: 700; overflow-wrap: anywhere; }

.ph-weg { margin: var(--space-sm) 0 0; display: grid; gap: var(--space-2xs); }
.ph-weg pre { margin: 0; padding: var(--space-sm); overflow-x: auto; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
              font-size: var(--text-sm); line-height: var(--leading-snug); white-space: pre-wrap; overflow-wrap: anywhere; text-decoration: line-through; text-decoration-color: var(--color-text-muted); }
.ph-weg figcaption { display: flex; gap: var(--space-2xs); align-items: center; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Layouts ---------- */
.ph-layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--gap-panels); }
.ph-layouts-klein { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: var(--space-sm); }
.ph-layout-kaart { padding: 0; overflow: clip; }
.ph-layout-plaatje img, .ph-layout-tegel img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; background: var(--color-surface-sunken); }
.ph-layout-tekst { padding: var(--space-sm) var(--space-md) var(--space-md); display: grid; gap: var(--space-2xs); }
.ph-layout-tekst h2 { margin: 0; font-size: var(--text-lg); }
.ph-layout-tekst p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.ph-layout-tegel { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; }
.ph-layout-tegel img { border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.ph-chip { justify-self: start; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-surface-muted); font-size: var(--text-xs); }
.ph-layout-detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gap-panels); align-items: start; }
@media (max-width: 59.99rem) { .ph-layout-detail { grid-template-columns: minmax(0, 1fr); } }
.ph-layout-kader { display: block; width: 100%; height: 40rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }
.ph-doelen { display: grid; gap: var(--space-xs); border: 0; margin: 0; padding: 0; }
.ph-doelen legend { font-weight: 600; margin-bottom: var(--space-2xs); padding: 0; }
.ph-doel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3xs) var(--space-xs); align-items: start; padding: var(--space-xs) var(--space-sm);
           border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
.ph-doel:has(input:checked) { border-color: var(--color-action); box-shadow: inset 0 0 0 1px var(--color-action); }
.ph-doel input { margin-top: var(--space-3xs); }
.ph-doel small { grid-column: 2; color: var(--color-text-muted); }

/* ---------- Vragenlijsten ---------- */
.ph-vraag { margin: 0; }
fieldset.ph-vraag { border: 0; padding: 0; display: grid; gap: var(--space-2xs); }
fieldset.ph-vraag legend { padding: 0; font-weight: 600; font-size: var(--text-sm); }
.ph-knopjes { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.ph-knopjes label { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--tap); padding: var(--space-3xs) var(--space-sm); border: 1px solid var(--color-border);
                    border-radius: var(--radius-pill); cursor: pointer; }
.ph-knopjes label:has(input:checked) { border-color: var(--color-action); background: var(--color-surface-muted); }
.ph-vraag-eigen { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.ph-vragen-lijst { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-3xs); }
.ph-leeg summary { cursor: pointer; font-weight: 600; }
.ph-leeg-tekst { display: block; width: 100%; margin: var(--space-xs) 0; }

/* ---------- Galerij ---------- */
.ph-gtabs { margin-bottom: var(--space-sm); }
.ph-ggrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--space-sm); }
.ph-gtegel { display: grid; gap: var(--space-2xs); align-content: start; min-width: 0; padding: var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.ph-gvb { display: grid; place-items: center; height: 5rem; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.ph-ggrid.is-wit .ph-gvb { background: var(--color-ink); color: var(--color-on-ink); }
.ph-gvb img { max-width: 100%; height: auto; image-rendering: pixelated; }
.ph-gvb-vlak { display: block; width: 100%; height: 100%; }
.ph-gvb-lijst { margin: 0; padding-left: var(--space-lg); font-size: var(--text-sm); justify-self: start; }
.ph-gvb-kader { display: inline-block; padding: var(--space-2xs) var(--space-sm); border-style: solid; font-weight: 700; }
.ph-gnaam { font-weight: 600; font-size: var(--text-sm); }
.ph-code { display: block; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--color-text-muted); overflow-wrap: anywhere; white-space: pre-wrap; user-select: all; }
.ph-gtegel .btn { justify-self: start; }
.ph-kleuren { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.ph-kleur { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; } /* tikvlak; de stip zelf is kleiner */
.ph-kleur::before { content: ""; box-sizing: border-box; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--k); border: 1px solid var(--color-border); }
.ph-kleur.is-wit::before { box-shadow: inset 0 0 0 1px var(--color-border); }
.ph-kleur[aria-current] { outline: 2px solid var(--color-action); outline-offset: -2px; }