/* FORMS-FOTOS-20260930 — foto-veld in de aanvraagformulieren + blok "List your home with photos".
   Gebruikt de tokens uit syoh.css. ANIMATIE-VAL: geen opacity:0 / visibility:hidden; alleen .rv
   (ontwerpsysteem) verbergt, en alleen onder html.js-anim:not(.anim-safe). */

/* ---------- foto-veld ---------- */
.f-fotos{margin:4px 0 18px;padding-top:16px;border-top:1px solid var(--line)}
.f-fotos .lbl{display:block;font:600 .86rem/1.3 var(--sans);color:var(--navy);margin:0 0 4px}
.f-fotos .opt{font-weight:400;color:var(--muted)}
.f-fotos-d{margin:0 0 10px;font-size:.86rem;line-height:1.45;color:var(--muted)}
.f-fotos .syoh-up{margin-bottom:0}
/* compacter in de smalle kaart op land- en regiopagina's */
.lp-form .f-fotos .su-drop{padding:16px 12px 14px;gap:4px}
.lp-form .f-fotos .su-hint{font-size:.78rem}
.lp-form .f-fotos .su-list{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
/* met foto's erin wordt de kaart hoger dan het scherm: dan niet meer plakken, anders valt de knop weg */
@media (min-width:1100px){.lp-side:has(.su-item){position:relative;top:auto}}

/* ---------- blok "List your home with photos" ---------- */
.plaats-sec{background:var(--sand);padding:var(--sec) 0}
.plaats{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,56px);align-items:center;
  background:#fff;color:var(--ink);border-radius:var(--r-card);padding:clamp(24px,4vw,52px);box-shadow:var(--sh-card),inset 0 0 0 1px var(--line);overflow:hidden;isolation:isolate}
.plaats .label{margin:0 0 12px}
.plaats h2{margin:0 0 14px;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.08;max-width:16ch;text-wrap:balance}
.plaats-p{margin:0 0 22px;max-width:54ch;color:var(--ink)}
.plaats-pts{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px}
.plaats-pts li{display:flex;gap:14px;align-items:flex-start}
.plaats-ic{flex:0 0 44px;width:44px;height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:var(--cream);color:var(--terra-ink);box-shadow:inset 0 0 0 1px var(--line)}
.plaats-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.plaats-pts strong{display:block;font:600 1rem/1.35 var(--sans);color:var(--navy)}
.plaats-pts div>span{display:block;font-size:.93rem;line-height:1.5;color:var(--muted)}
.plaats-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.plaats-cta .text-link{min-height:44px;display:inline-flex;align-items:center}

/* beeld: drie foto's als een stapel + camera + portaalnamen (decoratie, aria-hidden) */
.plaats-art{position:relative;min-height:340px;height:100%}
.pa-foto{position:absolute;display:block;border-radius:var(--r-img);overflow:hidden;background:var(--sand);border:6px solid #fff;box-shadow:0 24px 48px -24px rgba(15,23,42,.45);transition:transform .6s var(--ease)}
.pa-foto img{display:block;width:100%;height:100%;object-fit:cover}
.pa-1{width:72%;aspect-ratio:4/3;right:0;top:4%;transform:rotate(3deg);z-index:1}
.pa-2{width:54%;aspect-ratio:4/3;left:0;top:30%;transform:rotate(-5deg);z-index:2}
.pa-3{width:46%;aspect-ratio:4/3;right:6%;bottom:6%;transform:rotate(2deg);z-index:3}
.plaats:hover .pa-1{transform:rotate(5deg) translateY(-4px)}
.plaats:hover .pa-2{transform:rotate(-7deg) translateX(-4px)}
.pa-cam{position:absolute;left:44%;top:16%;z-index:4;width:56px;height:56px;border-radius:50%;background:var(--terra);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px -10px rgba(204,74,34,.8)}
.pa-cam svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.pa-port{position:absolute;left:0;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:78%;padding:10px 12px;border-radius:14px;background:var(--navy);color:#fff;box-shadow:0 18px 36px -18px rgba(15,23,42,.6)}
.pa-k{font:600 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#FFB08F;margin-right:4px}
.pa-chip{font:600 .8rem/1 var(--sans);padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff}

/* in een gids of checklist (smalle leeskolom) en in de hoofdkolom van een landpagina */
.art-main .plaats,.lp-main .plaats{grid-template-columns:1fr;margin:clamp(40px,5vw,64px) 0 0}
.art-main .plaats-art,.lp-main .plaats-art{min-height:0;height:260px;order:-1}
.art-main .plaats h2,.lp-main .plaats h2{font-size:clamp(1.7rem,2.8vw,2.3rem);max-width:20ch}
.lp-main .plaats{margin:0}
/* één kolom: beeldstrook van vaste hoogte, foto's begrensd zodat ze niet over de tekst vallen */
.art-main .pa-1,.lp-main .pa-1{width:min(72%,300px)}
.art-main .pa-2,.lp-main .pa-2{width:min(54%,240px)}
.art-main .pa-3,.lp-main .pa-3{width:min(46%,200px)}
.art-main .pa-cam,.lp-main .pa-cam{left:auto;right:min(52%,250px)}

@media (max-width:899.98px){
  .plaats{grid-template-columns:1fr}
  .plaats-art{min-height:0;height:250px;order:-1}
  .pa-1{width:min(72%,300px)} .pa-2{width:min(54%,240px)} .pa-3{width:min(46%,200px)}
  .pa-cam{left:auto;right:min(52%,250px)}
}
@media (max-width:479.98px){
  .plaats{padding:22px 18px 26px}
  .plaats-art,.art-main .plaats-art,.lp-main .plaats-art{height:210px}
  .pa-foto{border-width:4px}
  .pa-cam{width:48px;height:48px;left:40%}
  .pa-port{max-width:100%;padding:8px 10px;gap:5px}
  .pa-chip{font-size:.72rem;padding:5px 8px}
  .pa-k{font-size:.62rem}
  .plaats-cta .btn{width:100%;justify-content:center}
}

/* bedankpagina: link naar de eigen foto's (alleen als er foto's meekwamen, via JS) */
.thx-fotos{margin:26px auto 0;display:flex;flex-direction:column;align-items:center;gap:10px}
.thx-fotos span{font-size:.9rem;color:var(--muted);max-width:44ch}

@media (prefers-reduced-motion:reduce){.pa-foto{transition:none}.plaats:hover .pa-1,.plaats:hover .pa-2{transform:none}}
@media print{.plaats,.plaats-sec,.f-fotos{display:none}}