/* GENEROVANO z weby\_design\linky.css skriptem weby\_design\synchronizuj.ps1. Negenerovat rucne, needitovat: zmenu udelej v _design a spust synchronizuj.ps1. */
/* Aureality: linky a karty (manuál 0.96, výběr z grafika/LINKY.html: C, D, G a volitelně pohyb).
   Hodnoty řídí proměnné v tokens.css (--au-linka-*, --au-karta-*); každá má tady i výchozí hodnotu, takže soubor funguje i samostatně.
   Zatím jen zdroj: žádný web ho nenačítá a synchronizuj.ps1 ho nekopíruje.

   Použití:
   <div class="au-karta au-linka--silna">…</div>   D, zvýraznit: kóta vlevo, silná u nadpisu, schodem do tenké
   <div class="au-karta au-linka--slaba">…</div>   C, upozadit: nedotažená linka nahoře, schodem do tenké, nedojde do kraje
   <div class="au-par"><div class="au-karta">…</div><div class="au-karta">…</div></div>   G, dvě karty v jednom rámu
   <div class="au-linka"></div>                    samostatné oddělení sekcí (jako C)
   <div class="au-linka au-linka--pohyb"></div>    volitelně: dvě modré přes sebe, pomalý pohyb, nejvýš jeden na stránce
   Modifikátor .au-linka--do-kraje: linka C dojde až do kraje. */

/* Rohy: rovné (--au-karta-roh, výchozí 3 px) jsou pravidlo, ne dogma. Oblouk (.au-oblouk, --au-karta-oblouk) jen výjimečně,
   když dává smysl: maskot, bublina průvodce, kulaté tlačítko ikony. */
.au-oblouk { border-radius: var(--au-karta-oblouk, 14px); }

.au-karta {
  position: relative;
  background: var(--au-karta-pozadi, #11161C);
  border: 1px solid var(--au-karta-ramecek, #262C36);
  border-radius: var(--au-karta-roh, 3px);
  padding: 18px 20px;
}

/* D: kóta vlevo, silná část u nadpisu, pak schodem tenká */
.au-linka--silna { border-left: 0; }
.au-linka--silna::before,
.au-linka--silna::after { content: ""; position: absolute; left: 0; pointer-events: none; background: var(--au-linka-barva, #8DBBFF); }
.au-linka--silna::before { top: 0; width: var(--au-linka-silna, 3px); height: var(--au-linka-schod, 58%); }
.au-linka--silna::after { top: var(--au-linka-schod, 58%); left: calc((var(--au-linka-silna, 3px) - var(--au-linka-tenka, 1px)) / 2); width: var(--au-linka-tenka, 1px); bottom: 0; opacity: var(--au-linka-slaba-kryti, .5); }

/* C: nedotažená linka nahoře, začne u textu, schodem zeslábne a vyzní před krajem */
.au-linka--slaba::before,
.au-linka--slaba::after,
.au-linka::before,
.au-linka::after { content: ""; position: absolute; pointer-events: none; background: var(--au-linka-barva, #8DBBFF); }
.au-linka--slaba::before { left: var(--au-linka-odsazeni, 20px); top: -1px; width: var(--au-linka-delka, 42%); height: var(--au-linka-stredni, 2px); }
.au-linka--slaba::after { left: calc(var(--au-linka-odsazeni, 20px) + var(--au-linka-delka, 42%)); top: -1px; width: var(--au-linka-dobeh, 28%); height: var(--au-linka-tenka, 1px); opacity: var(--au-linka-slaba-kryti, .55); }
.au-linka--slaba.au-linka--do-kraje::after { right: 0; width: auto; }

/* Samostatná linka mezi sekcemi (tvar C bez karty) */
.au-linka { position: relative; display: block; height: var(--au-linka-stredni, 2px); margin: 32px 0; }
.au-linka::before { left: 0; top: 0; width: var(--au-linka-delka, 42%); height: var(--au-linka-stredni, 2px); }
.au-linka::after { left: var(--au-linka-delka, 42%); top: 0; width: var(--au-linka-dobeh, 28%); height: var(--au-linka-tenka, 1px); opacity: var(--au-linka-slaba-kryti, .55); }
.au-linka.au-linka--do-kraje::after { right: 0; width: auto; }

/* G: dvě karty vedle sebe v jednom rámu, mezi nimi drážka a krátký modrý spoj */
.au-par {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--au-karta-pozadi, #11161C);
  border: 1px solid var(--au-karta-ramecek, #262C36);
  border-radius: var(--au-karta-roh, 3px);
}
.au-par > .au-karta { background: transparent; border: 0; border-radius: 0; }
.au-par > .au-karta + .au-karta { box-shadow: inset 1px 0 0 var(--au-karta-ramecek, #262C36), inset 2px 0 0 #000; }
.au-par > .au-karta:first-child::after { content: ""; position: absolute; right: -1px; top: 18px; width: var(--au-linka-tenka, 1px); height: 36px; background: var(--au-linka-barva, #8DBBFF); }
@media (max-width: 640px) {
  .au-par { grid-template-columns: 1fr; }
  .au-par > .au-karta + .au-karta { box-shadow: inset 0 1px 0 var(--au-karta-ramecek, #262C36), inset 0 2px 0 #000; }
  .au-par > .au-karta:first-child::after { right: auto; top: auto; left: 20px; bottom: -1px; width: 36px; height: var(--au-linka-tenka, 1px); }
}

/* Volitelně: dvě modré přes sebe, pomalý pohyb. Jen jeden na stránce, při omezeném pohybu stojí. */
.au-linka--pohyb { height: 8px; }
.au-linka--pohyb::before { top: 2px; left: 0; width: 62%; height: var(--au-linka-stredni, 2px); background: var(--au-linka-barva-2, #2563EB); opacity: 1; }
.au-linka--pohyb::after { top: 4px; left: 22%; width: 48%; height: var(--au-linka-stredni, 2px); background: var(--au-linka-barva, #8DBBFF); opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  .au-linka--pohyb::before { animation: au-linka-plyn 7s ease-in-out infinite alternate; }
  .au-linka--pohyb::after { animation: au-linka-plyn 7s ease-in-out -3s infinite alternate; }
  @keyframes au-linka-plyn { from { transform: translateX(0); } to { transform: translateX(18%); } }
}