/* Nahrávání fotografií v přihlášce — dropzóna, náhled, akce.
   Jen tokeny ze style.css, takže světlý i tmavý motiv se vyřeší sám. */

.foto-slots{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1.1rem}
@media (min-width:560px){.foto-slots{grid-template-columns:1fr 1fr}}

.foto-slot{position:relative;min-width:0}

.foto-dropzona{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:8.5rem;padding:1rem;border:1.5px dashed var(--line-strong);border-radius:var(--radius);
  background:var(--surface-2);cursor:pointer;transition:border-color .2s ease,background .2s ease}
.foto-dropzona:hover,.foto-dropzona:focus-within,.foto-dropzona.is-nad{
  border-color:var(--brass);background:color-mix(in srgb,var(--brass) 8%,var(--surface-2))}

.foto-dropzona-popis{display:flex;flex-direction:column;align-items:center;gap:.35rem;
  font-size:.95rem;color:var(--ink);line-height:1.35}
.foto-dropzona-popis svg{width:26px;height:26px;color:var(--brass)}
.foto-dropzona-popis b{font-weight:600}
.foto-dropzona-popis .hint{font-size:.82rem;color:var(--muted)}
.foto-vyzva{font-size:.82rem;color:var(--muted)}

/* Vizuálně skryté, ale fokusovatelné — display:none by pole vyhodilo z pořadí tabulátoru. */
.foto-input{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}

.foto-nahled{display:flex;flex-direction:column;gap:.5rem}
/* Čtverec otočený o 90° kolem středu zabere přesně totéž místo — otočený náhled
   tak nepřečnívá přes text okolo. Fotografie je v rámu celá (contain). */
.foto-nahled img{display:block;width:100%;max-width:20rem;height:auto;aspect-ratio:1/1;
  object-fit:contain;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.foto-meta{font-size:.82rem;color:var(--muted);margin:0;overflow-wrap:anywhere}
.foto-akce{display:flex;flex-wrap:wrap;gap:.5rem}
.foto-akce .btn{min-height:44px;padding:.6rem 1rem;font-size:.9rem}

.foto-chyba{font-size:.85rem;color:var(--ink);margin:.5rem 0 0;
  background:color-mix(in srgb,var(--blush) 16%,var(--surface));border:1px solid var(--blush);
  border-radius:10px;padding:.6rem .8rem}

/* Musí stát ZA pravidly s display: výše a mít aspoň jejich specificitu — jinak
   atribut hidden prohraje s autorským display a prázdný náhled svítí i bez JS. */
.foto-slot [hidden]{display:none}