/* Photo story test. Builds on /scan/scan.css (fonts, colours, buttons, header). */

.stappen { list-style: none; padding: 0; margin: 1.4em 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: stap; }
.stappen li { background: var(--papier); border: 1px solid var(--lijn); border-radius: 10px; padding: 14px 16px; counter-increment: stap; }
.stappen li::before { content: counter(stap); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--groen); color: #fff; font-family: "Lora", serif; margin-bottom: 8px; }
.stappen strong { display: block; color: var(--bos); }
.stappen span { font-size: .9rem; color: var(--grijs); }

.kies { display: block; text-align: center; border: 2px dashed var(--zand); border-radius: 12px; padding: 34px 20px; background: var(--papier); cursor: pointer; }
.kies:hover { border-color: var(--groen); }
.kies:focus-within { outline: 3px solid var(--zand); outline-offset: 2px; }
.kies strong { display: block; color: var(--bos); font-size: 1.1rem; margin-bottom: 4px; }
.kies input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.voorbeeld { display: block; width: 100%; max-height: 360px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--lijn); margin: 0 0 14px; }
.toestemming { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; margin: 6px 0 0; }
.toestemming input { margin-top: 4px; accent-color: var(--groen); }

.bezig { text-align: center; padding: 40px 0; }
.bezig .stip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--groen); margin: 0 4px; animation: stip 1.2s infinite ease-in-out; }
.bezig .stip:nth-child(2) { animation-delay: .15s; }
.bezig .stip:nth-child(3) { animation-delay: .3s; }
@keyframes stip { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-5px); } }

.kaart { background: #fff; border: 1px solid var(--lijn); border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(28, 61, 44, .14); margin: 20px 0; }
.kaart img { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.kaart .tekst { padding: 22px 24px 24px; }
.kaart h2 { margin: 0 0 12px; }
.kaart p { margin: 0 0 10px; }
.kaart .waarom { font-family: "Lora", serif; font-style: italic; color: var(--bos); }
.kaart .thema { display: inline-block; margin-top: 8px; border-radius: 999px; padding: 5px 12px; font-size: .85rem; background: var(--mint); color: var(--bos); border: 1px solid #cdd8ca; }
.kaart .vsme { font-size: .82rem; color: var(--grijs); margin: 8px 0 0; }

.verder { background: var(--groen); color: #fff; border-radius: 12px; padding: 24px; margin: 24px 0; }
.verder h2 { color: #fff; margin: 0 0 8px; }
.verder p { color: #e7ecdf; }
.verder .knop { background: var(--zand); color: var(--bos); }
.verder .knop:hover { background: #e8c6a4; }
.verder a.licht { color: #fff; }

@media (max-width: 600px) {
  .stappen { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .bezig .stip { animation: none; opacity: .7; }
}

/* three to five photos */
.duimen { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 6px; }
.duimen img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; border: 1px solid var(--lijn); }
.linkknop { border: 0; background: none; padding: 0; color: var(--groen); text-decoration: underline; cursor: pointer; font-size: .88rem; }

/* the extra outputs under the card */
.uitkomst h2 { font-size: 1.25rem; }
.tekstvak { white-space: pre-wrap; background: #fff; border: 1px solid var(--lijn); border-radius: 8px; padding: 12px 14px; }
.film { display: block; width: 100%; max-width: 300px; border-radius: 12px; background: #000; margin: 6px 0 12px; }

/* example first: what you get, with a mini video that plays by itself */
.voorbeeld-blok { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; margin: 10px 0 28px; }
.telefoon { position: relative; width: 220px; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: var(--bos); border: 6px solid var(--bos); box-shadow: 0 14px 34px rgba(28, 61, 44, .2); }
.dia { position: absolute; inset: 0; opacity: 0; animation: dia 12s infinite; }
.dia:nth-child(2) { animation-delay: 4s; }
.dia:nth-child(3) { animation-delay: 8s; }
.dia img { width: 100%; height: 100%; object-fit: cover; animation: zoom 12s infinite linear; }
.onderschrift { position: absolute; left: 10px; right: 10px; bottom: 16px; background: rgba(250, 247, 239, .94); color: var(--bos); font-family: "Lora", serif; font-size: .95rem; line-height: 1.3; border-radius: 10px; padding: 8px 10px; }
.voorbeeld-label { position: absolute; top: 10px; left: 10px; background: var(--groen); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: 99px; padding: 3px 9px; }
@keyframes dia { 0% { opacity: 0; } 4% { opacity: 1; } 33% { opacity: 1; } 37% { opacity: 0; } 100% { opacity: 0; } }
@keyframes zoom { from { transform: scale(1.04); } to { transform: scale(1.14); } }
.krijg-blok h2 { margin: 0 0 12px; }
.krijg { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.krijg li { display: flex; gap: 12px; align-items: flex-start; }
.krijg strong { display: block; color: var(--bos); }
.krijg span { font-size: .9rem; color: var(--grijs); }
.ikoon { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: var(--mint); fill: none; stroke: var(--groen); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
  .voorbeeld-blok { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .krijg-blok { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dia, .dia img { animation: none; }
  .dia:first-child { opacity: 1; }
}
.taal[hidden] { display: none; }
.checks li .klein { display: block; margin-top: 2px; }

/* Laptop: offer to continue on the phone via QR, next to the first photo button. Hidden on small and touch screens. */
.naar-telefoon { display: none; }
@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  .intro.met-qr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
  .naar-telefoon { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: #fff; border: 1px dashed var(--zand); border-radius: 14px; padding: 14px 16px; }
  .naar-telefoon img { width: 132px; height: 132px; display: block; }
  .naar-telefoon p { margin: 0; font-size: .85rem; line-height: 1.35; color: #667781; max-width: 11em; }
  .naar-telefoon strong { display: block; color: var(--bos); font-weight: 600; }
}
/* Typing dots while Digna's question or reaction is on its way. */
.typen { display: flex; gap: 4px; padding: 4px 2px; }
.typen .stip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #8696a0; animation: stip 1.2s infinite ease-in-out; }
.typen .stip:nth-child(2) { animation-delay: .15s; }
.typen .stip:nth-child(3) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .typen .stip { animation: none; opacity: .7; } }

/* Example phone: each photo carries its voice and, above it, the figure for the report. */
.onder-blok { position: absolute; left: 10px; right: 10px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.onder-blok .onderschrift { position: static; }
.dia-getal { margin: 0; background: rgba(28, 61, 44, .94); color: #fff; border-radius: 10px; padding: 7px 10px; font-weight: 700; font-size: .84rem; line-height: 1.3; }
.dia-getal span { display: block; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; margin-bottom: 2px; }
.voorbeeld-noot { font-style: normal; color: var(--bos); font-weight: 600; }
.voorbeeld-label { white-space: nowrap; letter-spacing: .08em; right: auto; }
.telefoon.vier .dia { animation-name: dia4; animation-duration: 16s; }
.telefoon.vier .dia img { animation-duration: 16s; }
.telefoon.vier .dia:nth-child(2) { animation-delay: 4s; } .telefoon.vier .dia:nth-child(3) { animation-delay: 8s; } .telefoon.vier .dia:nth-child(4) { animation-delay: 12s; }
@keyframes dia4 { 0% { opacity: 0; } 3% { opacity: 1; } 25% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; } }
/* The hook: one photo with a few big words, like a social post. */
.hook-beeld { position: relative; border-radius: 12px; overflow: hidden; max-width: 420px; }
.hook-beeld img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hook-beeld p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 16px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); color: #fff; font: 700 1.5rem/1.2 system-ui, -apple-system, sans-serif; text-wrap: balance; }
/* Shot list: three clear photo prompts above the upload. */
.shotlist { margin: 6px 0 14px; }
.shotlist h2 { margin: 0 0 10px; font-size: 1.15rem; }
.shotlist ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.shotlist li { display: flex; gap: 10px; align-items: flex-start; background: var(--papier); border: 1px solid var(--zand); border-radius: 12px; padding: 12px; }
.shotlist .nr { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #a86b43; color: #fff; font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.shotlist strong { display: block; color: var(--bos); }
.shotlist li span:not(.nr) { font-size: .88rem; color: #5b665e; }
/* Three photo slots, each with its own prompt. */
.slots-titel { margin: 0 0 10px; font-size: 1.15rem; }
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.slot { position: relative; display: flex; flex-direction: column; border: 2px dashed var(--zand); border-radius: 12px; background: var(--papier); overflow: hidden; cursor: pointer; }
.slot:hover, .slot:focus-within { border-color: var(--groen); }
.slot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.slot .plus { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; font-size: 2.2rem; color: #a86b43; background: #efe4d0; }
.slot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.slot.vol { border-style: solid; border-color: var(--groen); }
.slot-tekst { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 10px 12px 12px; align-items: center; }
.slot-tekst .nr { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: #a86b43; color: #fff; font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.slot-tekst strong { color: var(--bos); line-height: 1.25; }
@media (max-width: 600px) {
  .slots { grid-template-columns: 1fr; }
  .slot { flex-direction: row; align-items: center; }
  .slot .plus, .slot img { flex: none; width: 96px; aspect-ratio: 1; }
}
/* Chat: like a WhatsApp conversation with Digna. */
.chat { margin: 10px 0 24px; border: 1px solid var(--zand); border-radius: 16px; overflow: hidden; background: #efeae2; max-width: 640px; }
.chat-kop { display: flex; align-items: center; gap: 10px; background: #f0f2f5; padding: 10px 14px; }
.chat-kop img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chat-kop strong { display: block; color: #111b21; }
.chat-kop span span { font-size: .8rem; color: #667781; }
.chat-berichten { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.bericht { max-width: 82%; border-radius: 8px; padding: 8px 10px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); font-family: system-ui, -apple-system, sans-serif; color: #111b21; }
.bericht p { margin: 0; line-height: 1.45; }
.bericht p + p { margin-top: 4px; }
.bericht.bot { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.bericht.ik { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.bericht.ik img { display: block; width: 220px; max-width: 100%; border-radius: 6px; }
.chat-invoer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; background: #f0f2f5; }
.chat-invoer.kolom { flex-direction: column; align-items: stretch; }
.chat-invoer input[type=text] { flex: 1 1 200px; min-width: 0; border: 0; border-radius: 20px; padding: 11px 14px; font: inherit; background: #fff; }
.chat-foto { position: relative; cursor: pointer; }
.chat-foto input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chat .opnieuw { margin: 0 14px 12px; }
.blik { background: #fbf8f1; border-left: 4px solid #a86b43; }
.blik p { font-family: "Lora", serif; font-size: 1.15rem; line-height: 1.45; color: var(--bos); margin: 0; }
.achter ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.achter li { padding-left: 22px; position: relative; font-size: 1.02rem; line-height: 1.45; }
.achter li::before { content: "→"; position: absolute; left: 0; color: #a86b43; font-weight: 700; }
.voor-org { margin: 18px 0; border: 1px solid var(--zand); border-radius: 12px; background: var(--papier); }
.voor-org summary { cursor: pointer; padding: 14px 16px; font-weight: 700; color: var(--bos); }
.voor-org > .blok { margin: 0 12px 12px; }
.chat-invoer:empty { display: none; }

/* Feedback chat (stem.js): steps under the intro, topic choices, "What you told me". */
.stappen-rij { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stappen-rij li { background: var(--papier); border: 1px solid var(--lijn); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; font-size: .9rem; color: #46514a; }
.stappen-rij .nr { width: 24px; height: 24px; border-radius: 50%; background: var(--mint); color: var(--bos); font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.stappen-rij strong { color: var(--bos); }
.stappen-noot { margin: 6px 0 18px; }
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.knop.klein-knop { padding: 8px 14px; font-size: .9rem; }
.bericht .reactie { color: #54656f; }
.verteld { background: #fff; border: 1px solid var(--lijn); border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(28, 61, 44, .14); margin: 20px 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.verteld img { display: block; width: 100%; height: 100%; max-height: 520px; object-fit: cover; }
.verteld .tekst { padding: 22px 24px 24px; min-width: 0; }
.verteld .label { margin: 0 0 6px; }
.verteld h2 { margin: 10px 0 14px; }
.verteld .thema { display: inline-block; border-radius: 999px; padding: 5px 12px; font-size: .85rem; background: var(--mint); color: var(--bos); border: 1px solid #cdd8ca; }
.verteld-rij { border-top: 1px solid var(--lijn); padding: 10px 0; }
.verteld-rij h3 { margin: 0 0 2px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); }
.verteld-rij p { margin: 0; }
.voorstel .tekstvak { font-family: "Lora", serif; font-size: 1.08rem; color: var(--bos); }
.vsme-label { margin: 0 16px 4px; font-size: .85rem; font-weight: 700; color: #a86b43; }
.voor-org blockquote { margin: 0; font-family: "Lora", serif; font-style: italic; font-size: 1.1rem; color: var(--bos); }
@media (max-width: 720px) { .verteld { grid-template-columns: 1fr; } .verteld img { max-height: 320px; } }