/* Web/assets/styles.css */
:root {
  --papir:   #f2e9d8;
  --plocha:  #fffdf7;
  --zelena:  #16391f;
  --rezava:  #b8562f;
  --linka:   #cbbda1;
  --text:    #33302a;
  --druhotny:#8a8071;
}

* { box-sizing: border-box; }

/* Prohlížeč dává [hidden] jen obyčejné display:none, takže ho přebije každé
   naše pravidlo se stejnou vahou — třeba `.formular input { display: block }`.
   Skryté pole pro výběr souborů se pak vykreslilo vedle tlačítka. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papir);
  color: var(--text);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, .hd { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; margin: 0; }

.zahlavi { text-align: center; padding: 30px 20px 22px; max-width: 720px; margin: 0 auto; }
.logo { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 16px; }
.motto { font-family: 'Lobster', cursive; font-size: 21px; color: var(--rezava); margin: 0 0 16px; }
.vlasova { border: 0; border-top: 1px solid var(--linka); margin: 0 0 16px; }
.o-nas { font-size: 16px; margin: 0 auto; max-width: 40ch; }

.sekce { max-width: 720px; margin: 0 auto; padding: 24px 20px 28px; border-top: 1px solid var(--linka); }
.sekce h2 { font-size: 24px; color: var(--zelena); }
.sekce .podnadpis { font-size: 13px; color: var(--druhotny); margin: 2px 0 16px; }

.udalosti { list-style: none; margin: 0; padding: 0; }
/* Svisle na střed, ne k hornímu okraji: lísteček je vyšší než dvouřádkový popis
   a zarovnání nahoru vypadalo rozsypaně. */
.udalosti li { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
/* Lísteček s datem. Bez natočení — natočené papírky si drží kronika a dvakrát
   na jedné stránce by z toho byl vtip. */
.listek { flex: 0 0 56px; margin: 0; text-align: center; background: var(--plocha);
          border: 1px solid var(--linka); padding: 6px 0 5px; }
.listek .den { display: block; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700;
               font-size: 22px; line-height: 1.05; color: var(--zelena); }
/* line-height sražené ze zděděných 1.6 — bez toho by lísteček po zvětšení písma
   narostl o 4 px prázdna pod zkratkou. */
.listek .mesic { display: block; font-size: 15px; font-weight: 700; letter-spacing: .03em;
                 line-height: 1.15; color: var(--rezava); }
.udalosti .co h3 { font-size: 18px; line-height: 1.2; color: var(--zelena); }
.udalosti .meta { font-size: 13px; color: var(--druhotny); margin: 2px 0 0; }
/* Místo kurzívou a temnější, oddělovač naopak potichu v barvě linek — vedle dne
   a času splývalo všechno v jednu šedou řádku. */
.udalosti .misto { font-style: italic; color: #57503f; }
.udalosti .misto::before { content: "·"; margin: 0 6px; color: var(--linka); font-style: normal; }
.odber { margin: 18px 0 0; }
.odber a { color: var(--rezava); text-decoration: none; font-size: 13px; }

@media (max-width: 600px) {
  .listek { flex: 0 0 48px; }
  .listek .den { font-size: 19px; }
}

.paticka { background: var(--zelena); color: var(--linka); font-size: 13px; text-align: center; padding: 16px; margin-top: 24px; }

@media (max-width: 600px) {
  .logo { max-width: 240px; }
  .motto { font-size: 18px; }
}

.roky { display: flex; gap: 12px; align-items: baseline; margin-bottom: 18px; }
.roky a { color: var(--druhotny); text-decoration: none; font-size: 14px; }
.roky a.vybrany { font-family: 'Baloo 2', sans-serif; font-weight: 700; color: var(--rezava); font-size: 15px; }

/* Nahoru, ne stretch: papírek fotky má bílou plochu a stín, takže roztažený
   na výšku delšího popisu vedle nechal pod fotkou prázdno — obrázek uvnitř
   má pevnou výšku. Nejvíc na mobilu, kde se text láme na víc řádků. */
.polozka { display: flex; gap: 16px; margin-bottom: 22px; align-items: flex-start; }
.snimek { flex: 0 0 140px; background: var(--plocha); padding: 6px 6px 16px;
          box-shadow: 0 1px 7px rgba(0,0,0,.18); transform: rotate(-1.8deg); display: block; }
.polozka:nth-child(even) .snimek { transform: rotate(1.5deg); }
.snimek img { display: block; width: 100%; height: 96px; object-fit: cover; }
.popisek .kdy { font-size: 12px; color: var(--druhotny); margin: 2px 0; }
.popisek h3 { font-size: 18px; line-height: 1.15; margin: 0 0 5px; }
.popisek h3 a { color: var(--zelena); text-decoration: none; }
.popisek p { font-size: 14px; margin: 0; color: #57503f; }
.prazdno { color: var(--druhotny); font-style: italic; }

@media (max-width: 600px) {
  .snimek { flex: 0 0 104px; }
  .snimek img { height: 74px; }
}

.detail .zpet a { color: var(--rezava); text-decoration: none; font-size: 13px; }
.detail h2 { font-size: 28px; color: var(--zelena); }
.detail .kdy { font-size: 13px; color: var(--druhotny); margin: 2px 0 14px; }
.ucastnici { border-left: 3px solid var(--linka); padding: 2px 0 2px 12px; font-size: 14px; }
.ucastnici b { display: block; font-family: 'Baloo 2', sans-serif; font-size: 11px;
               text-transform: uppercase; letter-spacing: .1em; color: var(--druhotny); }

.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.galerie img { display: block; width: 100%; height: 120px; object-fit: cover;
               background: var(--plocha); padding: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
@media (max-width: 600px) { .galerie { grid-template-columns: repeat(2, 1fr); } }

.tlacitko { font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 14px;
            background: var(--zelena); color: var(--papir); border: 0;
            border-radius: 999px; padding: 8px 18px; cursor: pointer; }
.sdileni .adresa { font-size: 12px; color: var(--druhotny); margin-left: 10px; }

.lightbox { display: none; position: fixed; inset: 0; background: rgba(20,18,14,.94);
            align-items: center; justify-content: center; z-index: 50; }
.lightbox.otevreny { display: flex; }
.lightbox img { max-width: 94vw; max-height: 90vh; }
.lightbox button { position: absolute; background: none; border: 0; color: #f2e9d8;
                   font-size: 40px; cursor: pointer; padding: 10px 18px; }
.lightbox .zavrit { top: 4px; right: 8px; font-size: 34px; }
.lightbox .predchozi { left: 4px; }
.lightbox .dalsi { right: 4px; }

/* ---------- administrace ---------- */

.admin-lista { font-size: 13px; color: var(--druhotny); display: flex; gap: 14px; align-items: center;
               border-bottom: 1px solid var(--linka); padding-bottom: 9px; margin: 0 0 18px; }
.admin-lista b { color: var(--text); }
.admin-lista .odhlaseni { margin: 0 0 0 auto; }
.jako-odkaz { background: none; border: 0; color: var(--rezava); cursor: pointer;
              font: inherit; font-size: 13px; padding: 0; }

/* Bílá karta na papíře. Nese oddíl formuláře i jeden řádek seznamu akcí. */
.karta { background: var(--plocha); border: 1px solid #e0d5bd; border-radius: 10px;
         padding: 16px 18px; margin-bottom: 14px; }
.karta > :last-child { margin-bottom: 0; }
.oddil { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 11px;
         text-transform: uppercase; letter-spacing: .1em; color: var(--druhotny);
         border-bottom: 1px solid var(--linka); padding-bottom: 6px; margin: 0 0 16px; }

.hlava-seznamu { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hlava-seznamu .tlacitko { margin-left: auto; }
.rok-akci { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12px;
            letter-spacing: .12em; color: var(--druhotny);
            border-bottom: 1px solid var(--linka); padding-bottom: 4px; margin: 22px 0 10px; }
.hlava-seznamu + .rok-akci { margin-top: 0; }

/* Celý řádek je odkaz — kliknout jde kamkoliv, ne jen do slova „Upravit". */
.radek { background: var(--plocha); border: 1px solid #e0d5bd; border-radius: 10px;
         padding: 9px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px;
         text-decoration: none; color: var(--text); }
.radek:hover, .radek:focus-visible { border-color: var(--rezava); box-shadow: 0 1px 7px rgba(0,0,0,.10); }
.radek .nahled-akce { flex: 0 0 56px; width: 56px; height: 42px; border-radius: 5px; overflow: hidden; }
.radek .nahled-akce img { display: block; width: 100%; height: 100%; object-fit: cover; }
.radek .bez-fotky { display: block; width: 100%; height: 100%; border-radius: 5px;
                    border: 1px dashed var(--linka); background: #efe6d2; }
.radek .nazev { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 700;
                color: var(--zelena); font-size: 16px; }
.radek .meta { display: block; font-size: 12px; color: var(--druhotny); }
.radek .stitek { margin-left: auto; }
.radek .sipka { color: var(--linka); font-size: 20px; line-height: 1; }
.stitek { font-family: 'Baloo 2', sans-serif; font-size: 11px; border-radius: 999px; padding: 3px 9px;
          white-space: nowrap; }
.stitek.zverejnena { background: #dfe9d5; color: #33612f; }
.stitek.skryta { background: #f1ddb9; color: #8a5a12; }

.formular label { display: block; margin-bottom: 18px; font-family: 'Baloo 2', sans-serif;
                  font-weight: 600; font-size: 13px; color: #57503f; }
/* 16 px není estetika: pod tuhle hranici si Safari na iPhonu při kliknutí do
   pole samo přiblíží stránku a uživatel ji pak odjíždí zpátky prstem. */
.formular input, .formular textarea {
  display: block; width: 100%; margin-top: 7px; background: var(--plocha);
  border: 1px solid var(--linka); border-radius: 7px; padding: 11px 12px;
  font-family: 'Nunito', sans-serif; font-size: 16px; color: var(--text);
}
.formular input:focus, .formular textarea:focus {
  border-color: var(--rezava); outline: 2px solid rgba(184, 86, 47, .35); }
.formular textarea { min-height: 260px; line-height: 1.55; resize: vertical; }
.formular .uzke { max-width: 220px; }
.formular .dva { display: flex; gap: 14px; }
.formular .dva > label { flex: 1; }
.prihlaseni { max-width: 400px; margin: 0 auto; }
.prihlaseni h2 { margin-bottom: 14px; }
@media (max-width: 600px) { .formular .dva { display: block; } }
.nepovinne { font-weight: 400; color: var(--druhotny); }
.napoveda { font-size: 12px; color: var(--druhotny); margin: 0 0 16px; }
.formular label + .napoveda { margin-top: -12px; }
.tlacitka { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.je-admin .tlacitko { font-size: 15px; height: 40px; line-height: 40px; padding: 0 22px; }
.tlacitko.rezavy { background: var(--rezava); color: #fff8ee; }
/* Mazání je odsazené doprava, aby se do něj nešlo trefit setrvačností po Uložit. */
.tlacitko.cerveny { background: #9a3a2c; color: #fff2ee; margin-left: auto; }
a.tlacitko { text-decoration: none; display: inline-block; }
.chyba { color: #9a4a3a; }
.ok { color: #33612f; }

.mrizka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; }
.nahledovka { position: relative; border-radius: 6px; overflow: hidden; background: #efe6d2; }
.nahledovka img, .nahledovka .bez-posteru {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.nahledovka .bez-posteru { background: #2a2620; }
/* Ovládání na jedné čáře přes všechny dlaždice. V protilehlých rozích se rozjíždělo
   a na světlé fotce nebylo vidět. Klikací je celá polovina lišty, ne jen znak. */
.nahledovka .ovladani { position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  display: flex; align-items: center; justify-content: space-between; background: rgba(20,18,14,.66); }
.nahledovka .ovladani button { background: none; border: 0; cursor: pointer; color: #fff8ee;
  font-size: 15px; line-height: 28px; height: 28px; padding: 0 11px; }
/* Hvězdička je pořád táž značka, mění se jen barva — JavaScript tak přepíná
   jedinou třídu a nemusí sahat na text tlačítka. */
.nahledovka .titulni { opacity: .5; }
.nahledovka .titulni.je { opacity: 1; color: #ffd45e; }
.nahledovka .prehrat { position: absolute; left: 50%; top: 50%;
                       transform: translate(-50%, calc(-50% - 14px));
                       background: rgba(20,18,14,.62); color: #fff8ee; border-radius: 999px;
                       width: 34px; height: 34px; line-height: 34px; text-align: center;
                       font-size: 14px; pointer-events: none; }

.odkladiste { border: 2px dashed var(--linka); border-radius: 10px; text-align: center;
              padding: 20px 12px; font-size: 13px; color: var(--druhotny); background: #fbf6ea; }
.odkladiste .sipka { display: block; font-size: 26px; line-height: 1; color: var(--rezava);
                     margin-bottom: 8px; }
.odkladiste b { display: block; font-family: 'Baloo 2', sans-serif; color: #57503f;
                font-size: 15px; margin-bottom: 12px; }
/* Terčem přetažení je celá karta, ne jen tečkovaný obdélník uvnitř. */
.fotky.nad { border-color: var(--rezava); background: #f7efe0; }
.fotky.nad .odkladiste { border-color: var(--rezava); background: #fff8ee; }
/* Vypadá i chová se jako tlačítko, i když je to <label> nad skrytým polem.
   Vlastní pravidlo, ne .tlacitko — .formular label by ho jinak přebilo. */
.formular .odkladiste .vybrat {
  display: inline-block; margin: 0; cursor: pointer;
  font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 15px;
  background: var(--zelena); color: var(--papir); border-radius: 999px;
  height: 40px; line-height: 40px; padding: 0 22px; }
.prubeh { margin: 12px 0 0; font-size: 12px; }
@media (max-width: 600px) { .mrizka { grid-template-columns: repeat(2, 1fr); } }

.vysledek { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12px;
            background: var(--plocha); border: 1px solid var(--linka); border-radius: 7px; padding: 9px; }

.seznam-importu { font-size: 13px; color: #57503f; margin: 8px 0 16px; padding-left: 20px; }
.seznam-importu li { margin-bottom: 3px; }

.galerie a { position: relative; display: block; }
.galerie .prehrat { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
                    background: rgba(20,18,14,.62); color: #fff8ee; border-radius: 999px;
                    width: 34px; height: 34px; line-height: 34px; text-align: center;
                    font-size: 13px; pointer-events: none; }
.galerie .bez-posteru { display: block; width: 100%; height: 120px; border-radius: 2px;
                        background: #2a2620; }
.lightbox video { max-width: 94vw; max-height: 90vh; background: #000; }
@media (max-width: 600px) { .galerie .bez-posteru { height: 100px; } }