/* Vragen (2026-10-12, by hand): the operator: "The individual FAQ questions should be minimized on mobile, clicked to
   expxand". bouw.py makes each question a <details open> with the question as its <summary>; vouw/vragen.js shuts
   them where the questions stand in one column (760 px down, ../diensten/badkamer-renovatie/dienst.css), and keeps
   them open wider, where nothing changes. On a phone the list reads as the homepage's questions do (style.css .qa):
   a rule between the questions, his roof-shaped toggle on the right, the answer under its question. */
.vr__item > summary { display: block; list-style: none; cursor: default; }
.vr__item > summary::-webkit-details-marker { display: none; }

@media (max-width: 760px) {
  .vr { row-gap: 0; }
  .vr__item { padding-top: 0; }
  .vr__item:last-child { border-bottom: 2px solid var(--lood); }
  .vr__item > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; cursor: pointer; }
  .vr__item > summary .vr__q { margin: 0; }
  .vr__item > summary::after {
    content: ""; flex: none; width: 14px; height: 14px; background: var(--dakpan);
    clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%); transition: transform .2s;
  }
  .vr__item[open] > summary::after { transform: rotate(180deg); }
  .vr__item > p { margin: -4px 0 22px; padding-right: 30px; }
}