/* ==========================================================================
   Home — Vraag: smalle roze band met icoon, korte tekst, knop en belregel
   ========================================================================== */
.s-vraag__rij {
  display: grid;
  gap: 1.25rem;
}

/* Rond routepictogram: navy cirkel met witte lijn. De witte halo is een rand
   binnen het vak, zodat de buitenrand precies op de gutter uitlijnt. */
.s-vraag__icoon {
  display: grid;
  place-items: center;
  width: clamp(3.75rem, 3.2rem + 1.6vw, 4.75rem);
  aspect-ratio: 1;
  border: 6px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  background: var(--navy);
  background-clip: padding-box;
  color: var(--wit);
}
.s-vraag__icoon .icoon { width: 52%; height: 52%; }

/* Teamlid (klantwens): ronde foto met dezelfde witte halo als het pictogram */
.s-vraag__portret {
  width: clamp(5.25rem, 4.5rem + 2.2vw, 7rem);
  aspect-ratio: 1;
  border: 6px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  overflow: hidden;
  background: var(--grijs);
  background-clip: padding-box;
}
.s-vraag__portret picture { display: block; width: 100%; height: 100%; }
/* Iets ingezoomd op het gezicht */
.s-vraag__portret img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 52% 35%;
  transform: scale(1.18);
  transform-origin: 52% 38%;
}
.s-vraag__wie {
  margin-top: .6rem;
  font-size: var(--fs-small);
  color: var(--tekst-zacht);
}
.s-vraag__wie strong { color: var(--navy); font-weight: var(--fw-bold); }

.s-vraag__titel {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1.25;
}
.s-vraag__lead {
  margin-top: .5rem;
  max-width: 56ch;
  color: var(--tekst-zacht);
}

/* Acties: knop + belregel */
.s-vraag__acties {
  display: grid;
  justify-items: center;
  gap: .9rem;
  margin-top: .5rem;
}
.s-vraag__knop { width: 100%; }
/* Volle breedte tot 480px, net als .knoppen elders (components.css) */
@media (min-width: 480px) {
  .s-vraag__knop { width: auto; }
}

/* Icoon, "Of bel" en nummer zijn losse flex-items: de gap (8px) is groter dan
   de focusring (6px), zodat de ring nooit over "bel" valt. */
.s-vraag__bel {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-small);
  color: var(--tekst-zacht);
}
.s-vraag__bel-icoon { width: 1.05rem; height: 1.05rem; color: var(--blauw); }
.s-vraag__bel a {
  color: var(--navy);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 64, .3);
  text-underline-offset: .22em;
  white-space: nowrap;
  transition: text-decoration-color var(--dur) var(--ease);
}
.s-vraag__bel a:hover { text-decoration-color: currentColor; }

/* Vanaf 640: icoon naast de tekst, acties eronder op één regel (geen
   knop van 600px breed op grote telefoons/kleine tablets) */
@media (min-width: 640px) {
  .s-vraag__rij {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.5rem 1.75rem;
    align-items: start;
  }
  .s-vraag__acties {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    margin-top: 0;
  }
}

/* Desktop: één rij, acties rechts uitgelijnd op de wrap. Geen scheidingslijn:
   vanaf ~1200px zou die los in de witruimte tussen tekst en knop zweven. */
@media (min-width: 1024px) {
  .s-vraag__rij {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(1.75rem, 1rem + 1.5vw, 2.75rem);
  }
  .s-vraag__acties {
    grid-column: auto;
    display: grid;
    justify-items: center;
    gap: .85rem;
    /* Minimale afstand tot de tekst, bovenop de kolomafstand */
    margin-left: clamp(1.5rem, .5rem + 2vw, 3rem);
  }
}