/* =========================================================================
   27 Moments portaal, de opmaak van het onderdeel fotomuur

   Drie kaarten: de link van het scherm, de instellingen, de eigen foto's.
   Het rooster van de foto's komt uit .fotorooster in portaal.css, net als
   bij de galerij en het moodboard; hieronder staat alleen wat eigen is aan
   dit onderdeel. Alles via de --m27-tokens.
   ========================================================================= */

/* De link van het scherm: het veld rekt mee, de twee knoppen staan ernaast
   en vallen op een smal scherm onder het veld. */
.fm-linkrij{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fm-linkrij input{flex:1 1 240px;min-width:0;min-height:44px;padding:0 12px;border:1px solid #dad5cd;border-radius:var(--m27-radius-kaart);background:var(--m27-creme);font:inherit;font-size:13.5px;color:var(--m27-tekst)}
.fm-linkrij input:focus-visible{outline:3px solid var(--m27-lila);outline-offset:2px}

/* De bronnen staan in groepjes: wat van de gasten komt, wat de booth maakt,
   wat het koppel zelf oplaadt, en daaronder de volgorde. Zonder die koppen
   is het een rij van acht vinkjes waarin niets bij elkaar hoort. */
.fm-groep{margin-bottom:14px}
.fm-groep__kop{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#7c776f;margin:0 0 2px 10px}

/* Een bron of een schakelaar: het vinkje links, de naam en een regel uitleg
   rechts. De hele regel is het tikdoel, minstens 48 px hoog. */
.fm-bronnen{display:grid;gap:4px}
.fm-bron{display:flex;align-items:flex-start;gap:12px;min-height:48px;padding:8px 10px;border-radius:var(--m27-radius-kaart);cursor:pointer}
.fm-bron:hover{background:var(--m27-creme)}
.fm-bron input{width:20px;height:20px;margin:3px 0 0;flex:none;accent-color:var(--m27-donkergroen)}
.fm-bron span{display:flex;flex-direction:column;gap:2px}
.fm-bron strong{font-weight:600;color:var(--m27-donkergroen)}
.fm-bron small{font-size:12.5px;line-height:1.4;color:#7c776f}

/* De schakelaar die het goedkeuren overslaat, hoort BIJ de gastenbronnen en
   niet ertussen: hij zegt niet welke beelden er zijn maar wanneer ze op de tv
   komen. Vandaar de lijn ervoor en de regel eronder, die zegt wat het koppel
   dan nog in de hand heeft. De regel staat op 32px: dat is de breedte van het
   vinkje plus de tussenruimte in .fm-bron, zodat hij onder de tekst uitkomt
   en niet onder het vinkje. */
.fm-nakijken{margin:6px 0 0 10px;padding-left:12px;border-left:2px solid #e6e1d9}
.fm-nakijken .fm-bron{padding-left:0}
.fm-nakijken__let{font-size:12.5px;line-height:1.5;color:#7c776f;margin:2px 0 0 32px}

.fm-uur{max-width:260px}
.fm-uur input{min-height:44px}
.fm-wachten textarea{min-height:64px;resize:vertical}
.fm-wachten .fm-bron{margin:0 0 6px}

.fm-acties{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}

/* De kop van de fotokaart: titel links, de knop rechts. */
.fm-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.fm-kop h3{margin-bottom:0}

.fm-item{position:relative;margin:0}
.fm-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--m27-radius-kaart);display:block;background:var(--m27-creme)}

/* Verwijderen per foto: een icoonknop in de tegel, 44 px zoals de
   bedieningsstandaard dat toelaat in een dichte lijst, en rood bij het
   aanwijzen omdat het onomkeerbaar is. */
.fm-item__weg{position:absolute;top:6px;right:6px;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);background:rgba(44,44,43,.55);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background-color .15s ease}
.fm-item__weg:hover{background:var(--m27-rood,#a4432f)}
.fm-item__weg:focus-visible{outline:3px solid var(--m27-lila);outline-offset:2px}

/* Op telefoon is elk tikdoel met tekst 48 px hoog, zoals de bedieningsstandaard
   vraagt; op een desktop mogen de kleine pilknoppen hun eigen maat houden. */
@media (max-width:768px){
  .fm-linkrij .m27-btn,.fm-acties .m27-btn,.fm-kop .m27-btn{min-height:48px}
  .fm-uur input,.fm-linkrij input{min-height:48px}
}

@media (max-width:480px){
  .fm-rooster{grid-template-columns:repeat(2,1fr);gap:10px}
}