/* [faam_beweging_assistent] — gesprek links (donker), website rechts. */
.fbw-as {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: stretch;
  margin: 0 auto;
}
.fbw-as-gesprek { grid-column: 1; grid-row: 1; }
.fbw-as-gesprek > p { margin: 0; } /* wpautop zet in een template soms een alinea rond de knop Opnieuw beginnen */
.fbw-as-site { grid-column: 2; grid-row: 1; }

/* ---------- Het gesprek ---------- */
.fbw-as-gesprek {
  display: flex; flex-direction: column;
  background: var(--fbw-bos); color: var(--fbw-ivoor);
  border-radius: 18px;
  padding: 1.1rem;
  min-height: 30rem;
}
.fbw-as-kop { display: flex; align-items: center; gap: .7rem; padding: .2rem .25rem 1rem; border-bottom: 1px solid rgba(244, 241, 234, .12); }
.fbw-as-kop strong { display: block; font-size: .95rem; }
.fbw-as-kop-sub { display: block; font-size: .75rem; color: var(--fbw-salie); }
.fbw-as-ai {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, var(--fbw-mint), var(--fbw-salie) 55%, var(--fbw-bos-licht) 100%);
  box-shadow: inset 0 0 0 2px rgba(244, 241, 234, .25);
}
.fbw-as.is-bezig .fbw-as-ai { animation: fbw-as-adem 1.2s ease-in-out infinite; }
@keyframes fbw-as-adem { 50% { transform: scale(.9); } }

.fbw-as-log {
  flex: 1 1 0; min-height: 12rem; display: flex; flex-direction: column; gap: .6rem;
  padding: 1rem .15rem; overflow-y: auto; scroll-behavior: smooth;
}
.fbw-as-leeg { margin: auto 0; color: var(--fbw-salie); font-size: .9rem; line-height: 1.5; }
.fbw-as-bel {
  max-width: 88%; padding: .65rem .85rem; border-radius: 16px;
  font-size: .9rem; line-height: 1.45; margin: 0;
  animation: fbw-as-in .45s var(--fbw-zacht-in) both;
}
.fbw-as-bel.is-jij { align-self: flex-end; background: var(--fbw-ivoor); color: var(--fbw-inkt); border-bottom-right-radius: 5px; }
.fbw-as-bel.is-ai { align-self: flex-start; background: var(--fbw-bos-licht); color: var(--fbw-ivoor); border-bottom-left-radius: 5px; }
.fbw-as-bijlage {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem;
  font-size: .75rem; color: var(--fbw-grijs);
}
.fbw-as-bijlage i { width: 2.6rem; height: 2rem; border-radius: 6px; background: linear-gradient(135deg, #C9864A, #8E4F27 60%, #E2B07A); }
.fbw-as-status { display: flex; align-items: center; gap: .35rem; margin-top: .45rem; font-size: .72rem; color: var(--fbw-salie); }
.fbw-as-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--fbw-oker); }
.fbw-as-typt { align-self: flex-start; display: inline-flex; gap: .3rem; padding: .7rem .85rem; background: var(--fbw-bos-licht); border-radius: 16px; border-bottom-left-radius: 5px; }
.fbw-as-typt i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--fbw-salie); animation: fbw-as-punt 1s infinite; }
.fbw-as-typt i:nth-child(2) { animation-delay: .15s; }
.fbw-as-typt i:nth-child(3) { animation-delay: .3s; }
@keyframes fbw-as-punt { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes fbw-as-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.fbw-as-keuzes { display: flex; flex-direction: column; gap: .5rem; padding-top: .9rem; border-top: 1px solid rgba(244, 241, 234, .12); }
.fbw-as .fbw-as-keuze {
  justify-content: flex-start; text-align: left; width: 100%;
  background: rgba(244, 241, 234, .06); color: var(--fbw-ivoor);
  border-color: rgba(244, 241, 234, .2); border-radius: 14px; padding: .65rem .8rem;
  font-weight: 500;
}
.fbw-as .fbw-as-keuze:hover { border-color: var(--fbw-salie); background: rgba(244, 241, 234, .1); }
.fbw-as .fbw-as-keuze[aria-pressed="true"] { background: transparent; color: var(--fbw-salie); border-color: rgba(167, 196, 184, .35); box-shadow: none; }
.fbw-as .fbw-as-keuze:disabled { cursor: default; }
.fbw-as-vink { width: 1.1rem; height: 1.1rem; flex: none; border-radius: 50%; border: 1.5px solid currentColor; opacity: .7; position: relative; }
.fbw-as-keuze[aria-pressed="true"] .fbw-as-vink { background: var(--fbw-salie); border-color: var(--fbw-salie); opacity: 1; }
.fbw-as-keuze[aria-pressed="true"] .fbw-as-vink::after { content: ""; position: absolute; left: .32rem; top: .14rem; width: .28rem; height: .55rem; border: solid var(--fbw-bos); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fbw-as-opnieuw { align-self: flex-start; margin-top: .7rem; background: none; border: 0; padding: .2rem 0; color: var(--fbw-salie); font: 600 .85rem/1.2 var(--fbw-sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- De website ---------- */
.fbw-as-site { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.fbw-as-site .fbw-kader { flex: 1; }
.fbw-as-pagina { --as-accent: #8E3B5A; font-size: .8rem; color: #2B2A27; background: #FBF8F4; }
.fbw-as-melding {
  display: block; overflow: hidden; max-height: 0; padding: 0 1rem;
  background: #F6E7C8; color: #4A3412; font-size: .78rem; line-height: 1.4;
  transition: max-height .6s var(--fbw-zacht-in), padding .6s var(--fbw-zacht-in);
}
.fbw-as-melding strong { margin-right: .35rem; }
.fbw-as.is-vakantie .fbw-as-melding { max-height: 6rem; padding: .6rem 1rem; }
.fbw-as-nav { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid #EEE6DC; }
.fbw-as-logo { font-family: var(--fbw-serif); font-size: 1.15rem; color: var(--as-accent); white-space: nowrap; }
.fbw-as-menu { display: flex; gap: .8rem; margin-left: auto; color: #6B655C; white-space: nowrap; }
.fbw-as-cta { background: var(--as-accent); color: #fff; border-radius: 999px; padding: .35rem .7rem; font-weight: 600; font-size: .72rem; white-space: nowrap; }
.fbw-as-held { display: block; padding: 1.1rem 1rem .9rem; }
.fbw-as-titel { display: block; font-family: var(--fbw-serif); font-size: 1.7rem; line-height: 1.05; color: #2B2A27; }
.fbw-as-lead { display: block; margin-top: .3rem; color: #6B655C; }
.fbw-as-rij { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; padding: 0 1rem; }
.fbw-as-blok { background: #fff; border: 1px solid #EEE6DC; border-radius: 10px; padding: .7rem .8rem; transition: box-shadow .3s; }
.fbw-as-blok-kop { display: block; font-weight: 700; font-size: .78rem; margin-bottom: .4rem; color: #2B2A27; }
.fbw-as-uren, .fbw-as-prijzen { list-style: none; margin: 0; padding: 0; }
.fbw-as-uren li, .fbw-as-prijzen li { display: flex; justify-content: space-between; gap: .5rem; padding: .18rem 0; color: #57514A; font-size: .74rem; border-radius: 4px; }
.fbw-as-uren li > span:first-child, .fbw-as-prijzen li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbw-as-uren li > span:last-child, .fbw-as-prijzen li > span:last-child { white-space: nowrap; flex: none; }
.fbw-as-uitz { max-height: 0; overflow: hidden; padding: 0 !important; opacity: 0; color: #8A5A12 !important; font-weight: 700; transition: max-height .5s .25s, opacity .5s .25s, padding .5s .25s; }
.fbw-as.is-vakantie .fbw-as-uitz { max-height: 2rem; opacity: 1; padding: .18rem .3rem !important; margin: .1rem -.3rem 0; background: #F6E7C8; }
.fbw-as-bedrag { position: relative; display: inline-grid; text-align: right; }
.fbw-as-oud, .fbw-as-nieuw { grid-area: 1 / 1; transition: transform .5s var(--fbw-zacht-in), opacity .4s; }
.fbw-as-nieuw { opacity: 0; transform: translateY(70%); font-weight: 700; color: #2B2A27; }
.fbw-as.is-prijs .fbw-as-oud { opacity: 0; transform: translateY(-70%); }
.fbw-as.is-prijs .fbw-as-nieuw { opacity: 1; transform: none; }
.fbw-as-prijzen li[data-doel="prijs"] { margin: 0 -.3rem; padding: .18rem .3rem; }

.fbw-as-werk { padding: .9rem 1rem 1.1rem; }
.fbw-as-fotos { display: flex; gap: .5rem; }
.fbw-as-foto { margin: 0; flex: 1 1 0; min-width: 0; transition: flex .7s var(--fbw-zacht-in), opacity .5s .2s, margin .7s; border-radius: 8px; }
.fbw-as-foto figcaption { font-size: .66rem; color: #6B655C; margin-top: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbw-as-beeld { display: block; aspect-ratio: 4 / 5; border-radius: 8px; }
.fbw-as-foto.is-nieuw { flex: 0 0 0; opacity: 0; margin-right: -.5rem; }
.fbw-as.is-werk .fbw-as-foto.is-nieuw { flex: 1 1 0; opacity: 1; margin-right: 0; }
.fbw-as.is-werk .fbw-as-foto:last-child { flex: 0 0 0; opacity: 0; margin-left: -.5rem; }
/* De foto's: zachte vlakken in haarkleuren, geen echte personen. */
.is-koper { background: radial-gradient(120% 80% at 30% 20%, #F0C08A, #C9864A 45%, #7A3E1C 100%); }
.is-bob { background: radial-gradient(110% 90% at 60% 25%, #6B5444, #3B2C22 60%, #1F1712); }
.is-krul { background: radial-gradient(circle at 30% 30%, #A8754E 0 18%, transparent 19%), radial-gradient(circle at 65% 45%, #8B5B3A 0 20%, transparent 21%), radial-gradient(circle at 45% 70%, #9C6843 0 22%, transparent 23%), #5E3B25; }
.is-kort { background: linear-gradient(180deg, #2A2724 0 38%, #8C8478 38% 41%, #D9CFC2 41%); }

.fbw-as-noot { margin: 0; }
.fbw-as [data-doel].fbw-gezien { position: relative; z-index: 1; }

/* ---------- gsm: eerst het gesprek (kort), dan een compacte website ---------- */
@media (max-width: 820px) {
  .fbw-as { grid-template-columns: 1fr; gap: .9rem; }
  .fbw-as-gesprek, .fbw-as-site { grid-column: 1; grid-row: auto; }
  .fbw-as-gesprek { min-height: 0; padding: .9rem; }
  .fbw-as-kop { padding-bottom: .7rem; }
  .fbw-as-log { flex: none; max-height: 11rem; min-height: 5.5rem; padding: .7rem .1rem; }
  .fbw-as-bel { font-size: .85rem; }
  .fbw-as-keuzes { padding-top: .7rem; gap: .4rem; }
  .fbw-as .fbw-as-keuze { padding: .55rem .7rem; font-size: .82rem; }
  .fbw-as-menu { display: none; }
  .fbw-as-held { padding: .8rem .8rem .6rem; }
  .fbw-as-titel { font-size: 1.25rem; }
  .fbw-as-lead { font-size: .72rem; }
  .fbw-as-rij { gap: .45rem; padding: 0 .8rem; }
  .fbw-as-blok { padding: .5rem .55rem; }
  .fbw-as-uren li, .fbw-as-prijzen li { font-size: .64rem; padding: .1rem 0; }
  .fbw-as-blok-kop { font-size: .7rem; margin-bottom: .25rem; }
  .fbw-as-werk { padding: .7rem .8rem .8rem; }
  .fbw-as-beeld { aspect-ratio: 1 / 1; }
  .fbw-as-foto figcaption { display: none; }
  .fbw-as-melding { font-size: .7rem; }
  .fbw-as.is-vakantie .fbw-as-melding { padding: .45rem .8rem; }
}