/* [faam_beweging_groei] — een schematisch kaartje met groeipagina's, en een zoekvoorbeeld. */
.fbw-gr { container: fbwgr / inline-size; margin: 0 auto; }

.fbw-gr-schakel { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }

.fbw-gr-veld { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@container fbwgr (min-width: 900px) {
  .fbw-gr-veld { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
}

/* ---------- Het kaartje ---------- */
.fbw-gr-kaart { position: relative; min-width: 0; }
.fbw-gr-vlak {
  position: relative;
  aspect-ratio: 16 / 9.6;
  border: 1px solid var(--fbw-lijn);
  border-radius: 18px;
  background-color: var(--fbw-ivoor);
  background-image: radial-gradient(circle, rgba(94, 91, 82, .16) 1px, transparent 1.5px);
  background-size: 18px 18px;
  background-position: 9px 9px;
  overflow: hidden;
}
.fbw-gr-grond, .fbw-gr-lijnen { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fbw-gr-grond { transition: opacity .5s; }
.fbw-gr-grond path { fill: none; stroke: #CFC8B8; stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fbw-gr[data-modus="doelgroepen"] .fbw-gr-grond { opacity: .35; }

.fbw-gr-lijn {
  stroke: var(--fbw-salie); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset .55s var(--fbw-zacht-in), stroke .3s, stroke-width .3s;
}
.fbw-gr-lijn.is-leeg { stroke-dashoffset: 1; }
.fbw-gr-lijn.is-actief { stroke: var(--fbw-groen); stroke-width: 2.25; }

/* Je zaak, in het midden. */
.fbw-gr-zaak {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  max-width: 46%;
  padding: .6rem 1rem .65rem;
  background: var(--fbw-bos); color: var(--fbw-ivoor);
  border-radius: 14px; text-align: center;
  box-shadow: 0 0 0 5px rgba(244, 241, 234, .9);
}
.fbw-gr-zaak strong { font-size: .9rem; font-weight: 700; line-height: 1.25; }
.fbw-gr-zaak span { font-size: .75rem; color: var(--fbw-salie); }

/* Speldjes op het kaartje zelf: enkel op een smal scherm (op een breed scherm zijn de tegels de speldjes). */
.fbw-gr-speld { position: absolute; display: none; transform: translate(-50%, -50%); }
.fbw-gr-speld i, .fbw-gr-pin {
  display: block; width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--fbw-groen); box-shadow: 0 0 0 3px var(--fbw-wit);
  transition: background .3s, transform .3s;
}
.fbw-gr-speld.is-links .fbw-gr-speld-naam { transform: translateX(-30%); }
.fbw-gr-speld.is-rechts .fbw-gr-speld-naam { transform: translateX(-78%); }
.fbw-gr-speld.is-actief i { background: var(--fbw-bos); transform: scale(1.3); }
.fbw-gr-speld-naam {
  position: absolute; left: 50%; top: calc(100% + .3rem); transform: translateX(-50%);
  white-space: nowrap; font-size: .6875rem; font-weight: 600; color: var(--fbw-grijs);
  background: rgba(244, 241, 234, .85); padding: 0 .2rem; border-radius: 4px;
}

/* ---------- De tegels: groeipagina's ---------- */
.fbw-gr-tegels { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.fbw-gr-plek { position: absolute; width: 0; height: 0; margin: 0; padding: 0; }
.fbw-gr-plek::before { content: none; }
.fbw-gr-tegel {
  appearance: none; cursor: pointer; pointer-events: auto;
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  width: 11.25rem; max-width: 28cqw;
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
  padding: .6rem .75rem .7rem;
  font: inherit; text-align: left; color: var(--fbw-inkt);
  background: var(--fbw-wit);
  border: 1px solid var(--fbw-lijn); border-radius: 14px;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .45s var(--fbw-zacht-in);
}
.fbw-gr-tegel:hover { border-color: var(--fbw-salie); }
.fbw-gr-tegel[aria-pressed="true"] { background: var(--fbw-mint); border-color: var(--fbw-groen); box-shadow: inset 0 0 0 1px var(--fbw-groen); }
.fbw-gr-titel { font-size: .84rem; font-weight: 700; line-height: 1.3; }
.fbw-gr-regels { display: flex; flex-direction: column; gap: .3rem; width: 100%; }
.fbw-gr-regels i { display: block; height: .3rem; border-radius: 3px; background: var(--fbw-zand); }
.fbw-gr-regels i:first-child { width: 88%; }
.fbw-gr-regels i:last-child { width: 58%; }
.fbw-gr-tegel[aria-pressed="true"] .fbw-gr-regels i { background: rgba(46, 91, 76, .16); }
.fbw-gr-pin, .fbw-gr-naam { display: none; }

/* Voor het in beeld komt: enkel een speldje met de naam. */
.fbw-gr-tegel.is-leeg {
  background: transparent; border-color: transparent; box-shadow: none;
  align-items: center; gap: .3rem; padding: 0;
  transform: translate(-50%, -.4rem);
}
.fbw-gr-tegel.is-leeg .fbw-gr-pin, .fbw-gr-tegel.is-leeg .fbw-gr-naam { display: block; }
.fbw-gr-tegel.is-leeg .fbw-gr-naam { font-size: .75rem; font-weight: 600; color: var(--fbw-grijs); text-align: center; line-height: 1.25; }
.fbw-gr-tegel.is-leeg .fbw-gr-regels { display: none; }
.fbw-gr-tegel.is-leeg .fbw-gr-titel { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* Het moment: een speldje wordt een pagina. */
.fbw-gr-tegel.is-nieuw { animation: fbw-gr-pop .5s var(--fbw-zacht-in) both; }
@keyframes fbw-gr-pop { from { opacity: .2; scale: .55; } to { opacity: 1; scale: 1; } }
.fbw-gr.is-wissel .fbw-gr-titel, .fbw-gr.is-wissel .fbw-gr-naam, .fbw-gr.is-wissel .fbw-gr-speld-naam { animation: fbw-gr-wissel .4s var(--fbw-zacht-in) both; }
@keyframes fbw-gr-wissel { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Het zoekvoorbeeld ---------- */
.fbw-gr-zoek {
  min-width: 0;
  background: var(--fbw-wit);
  border: 1px solid var(--fbw-lijn); border-radius: 18px;
  padding: 1rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.fbw-gr-balk {
  display: flex; align-items: center; gap: .6rem;
  min-height: 2.9rem; padding: .55rem 1rem;
  border: 1px solid var(--fbw-lijn); border-radius: 1.45rem;
  font-size: .95rem; font-weight: 500; line-height: 1.35; color: var(--fbw-inkt);
  background: var(--fbw-wit);
  min-width: 0;
}
.fbw-gr-loep { position: relative; flex: none; width: .95rem; height: .95rem; border: 2px solid var(--fbw-grijs); border-radius: 50%; margin-right: .15rem; }
.fbw-gr-loep::after { content: ""; position: absolute; width: 2px; height: .4rem; background: var(--fbw-grijs); right: -.2rem; bottom: -.33rem; transform: rotate(-45deg); border-radius: 1px; }
.fbw-gr-vraag { min-width: 0; overflow-wrap: anywhere; }
.fbw-gr-vraag:empty::before { content: "Zoeken"; color: var(--fbw-grijs); font-weight: 400; }
.fbw-gr-balk.is-typt .fbw-gr-vraag:empty::before { content: none; }
.fbw-gr-cursor { flex: none; align-self: flex-end; margin-bottom: .2em; width: 1.5px; height: 1.15em; margin-left: -.5rem; background: var(--fbw-inkt); opacity: 0; }
.fbw-gr-balk.is-typt .fbw-gr-cursor { opacity: 1; animation: fbw-gr-knipper 1s steps(1) infinite; }
@keyframes fbw-gr-knipper { 50% { opacity: 0; } }

.fbw-gr-uitkomst { display: flex; flex-direction: column; gap: .85rem; }
.fbw-gr-resultaat {
  display: flex; flex-direction: column; gap: .25rem; padding: 0 .3rem; min-height: 6.4rem;
  transition: opacity .35s, transform .35s var(--fbw-zacht-in);
}
.fbw-gr-uitkomst.is-weg .fbw-gr-resultaat { opacity: 0; transform: translateY(6px); }
.fbw-gr-adres { display: flex; align-items: center; gap: .45rem; min-width: 0; font-size: .78rem; color: var(--fbw-grijs); }
.fbw-gr-adres span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fbw-gr-adres i {
  flex: none; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--fbw-mint); color: var(--fbw-bos); font-style: normal; font-weight: 700; font-size: .7rem;
}
.fbw-gr-rtitel { font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: var(--fbw-groen); }
.fbw-gr-rtekst { font-size: .86rem; line-height: 1.5; color: var(--fbw-zacht); }
.fbw-gr-zin {
  margin: 0; padding: .85rem .3rem 0; border-top: 1px solid var(--fbw-lijn);
  font-size: .9rem; font-weight: 500; line-height: 1.5; color: var(--fbw-inkt);
  transition: opacity .35s;
}
.fbw-gr-uitkomst.is-weg .fbw-gr-zin { opacity: 0; }

.fbw-gr-uitleg { margin: 1rem 0 0; max-width: 46rem; }
.fbw-gr-uitleg span { display: block; margin-top: .15rem; }

/* ---------- Smal (gsm, smalle kolom): kleiner kaartje, de tegels eronder ---------- */
@container fbwgr (max-width: 599px) {
  .fbw-gr-vlak { aspect-ratio: 16 / 11; border-radius: 16px; }
  .fbw-gr-speld { display: block; }
  .fbw-gr[data-modus="doelgroepen"] .fbw-gr-speld-naam { display: none; }
  .fbw-gr-zaak { padding: .45rem .7rem .5rem; max-width: 52%; }
  .fbw-gr-zaak strong { font-size: .78rem; }
  .fbw-gr-zaak span { font-size: .6875rem; }
  .fbw-gr-tegels { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; pointer-events: auto; }
  .fbw-gr-plek { position: static; width: auto; height: auto; }
  .fbw-gr-tegel { position: relative; transform: none; width: 100%; max-width: none; height: 100%; padding: .6rem .7rem .65rem; }
  .fbw-gr-tegel.is-leeg {
    transform: none; flex-direction: row; justify-content: flex-start;
    padding: .6rem .7rem; border: 1px dashed var(--fbw-lijn); gap: .5rem;
  }
  .fbw-gr-tegel.is-leeg .fbw-gr-pin { flex: none; }
  .fbw-gr-tegel.is-leeg .fbw-gr-naam { text-align: left; }
  .fbw-gr-zoek { padding: .85rem; }
  .fbw-gr-balk { font-size: .9rem; padding: .5rem .85rem; }
  .fbw-gr-resultaat { min-height: 7.4rem; }
}