/* Čudlík „Zpět" — jeden pro celé Grilcentrum.

   Roman 19. 9. 2026 poslal předlohu z Uiverse (mrhyddenn): „musíme předělat
   čudlík zpět, musíš ho všude dát, ale decentně, aby nic nekryl ani nepřetýkal,
   někde bude větší, někde menší, ale bude všude, kde je potřeba… elegantně,
   barvu uprav vždy podle stránky."

   Tvar je z předlohy: dvě tenké linky nad a pod, tmavá plocha s textem a klín,
   který se po najetí přelije zleva doprava. Čudlík stojí v toku stránky pod
   hlavičkou, takže nic nepřekrývá.

   BARVA SE ŘÍDÍ STRÁNKOU. Každá stránka má svůj akcent — červená Grilcentra,
   žlutá půjčovny, petrolejová u chytrých grilů. Proměnné se berou z toho, co
   stránka sama definuje (--red, --akcent…), a když nic nemá, platí červená
   Grilcentra. Na tmavém podkladu skript přepne na světlou variantu. */

.cudlik-zpet {
  --zpet-linka: #7d8082;
  --zpet-plocha: #0f1923;
  --zpet-text: #fff;
  --zpet-klin: var(--zpet-akcent, var(--red, var(--akcent, #e30613)));
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: none;
  padding: 8px;
  margin: 0;
  color: var(--zpet-plocha);
  cursor: pointer;
  position: relative;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1;
  transition: all .15s ease;
}

/* Linky nad a pod textem. */
.cudlik-zpet::before,
.cudlik-zpet::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  height: calc(50% - 5px);
  border: 1px solid var(--zpet-linka);
  transition: all .15s ease;
  pointer-events: none;
}
.cudlik-zpet::before { top: 0; border-bottom-width: 0; }
.cudlik-zpet::after { bottom: 0; border-top-width: 0; }

.cudlik-zpet:active,
.cudlik-zpet:focus { outline: none; }
.cudlik-zpet:focus-visible { outline: 2px solid var(--zpet-klin); outline-offset: 3px; }

.cudlik-zpet:active::before,
.cudlik-zpet:active::after { right: 3px; left: 3px; }
.cudlik-zpet:active::before { top: 3px; }
.cudlik-zpet:active::after { bottom: 3px; }

.cudlik-zpet-plocha {
  position: relative;
  display: block;
  padding: 9px 18px;
  color: var(--zpet-text);
  background-color: var(--zpet-plocha);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px transparent;
}
.cudlik-zpet-plocha::before,
.cudlik-zpet-plocha::after {
  content: '';
  display: block;
  position: absolute;
  background-color: var(--zpet-plocha);
}
.cudlik-zpet-plocha::before { top: 0; left: 0; width: 2px; height: 2px; }
.cudlik-zpet-plocha::after { right: 0; bottom: 0; width: 4px; height: 4px; transition: all .2s ease; }

.cudlik-zpet-klin {
  display: block;
  position: absolute;
  top: 0;
  bottom: -1px;
  left: -8px;
  width: 0;
  background-color: var(--zpet-klin);
  transform: skew(-15deg);
  transition: all .2s ease;
}

.cudlik-zpet-text { position: relative; }
.cudlik-zpet-text .cudlik-zpet-sipka { margin-right: 7px; }

.cudlik-zpet:hover .cudlik-zpet-klin { width: calc(100% + 15px); }
.cudlik-zpet:hover .cudlik-zpet-plocha::after { background-color: var(--zpet-text); }

/* Na tmavém podkladu se obrací: světlá plocha, tmavý text. Třídu dosadí
   skript podle skutečné barvy místa, kam čudlík staví. */
.cudlik-zpet.je-tmavy {
  --zpet-linka: #6d7276;
  --zpet-plocha: #f2f2f2;
  --zpet-text: #0f1923;
}

/* Místo pod hlavičkou. Drží se šířky obsahu stránky, takže nikam nepřetéká. */
.cudlik-zpet-misto {
  width: min(1320px, calc(100% - 48px));
  margin: 18px auto 0;
  display: flex;
}
@media (max-width: 760px) {
  .cudlik-zpet-misto { width: calc(100% - 32px); margin-top: 12px; }
  .cudlik-zpet { font-size: 12px; }
  .cudlik-zpet-plocha { padding: 8px 14px; }
}

/* Větší na rozcestnících a přehledech, drobnější na podstránkách — Roman:
   „někde bude větší, někde menší". */
/* Roman 2. 10. 2026: „čudlík zpět je strašně velké, zmenšit" — větší
   podoba (řady a druhy zboží) je stejná jako běžná. */
.cudlik-zpet.je-vetsi { font-size: 13px; }
.cudlik-zpet.je-vetsi .cudlik-zpet-plocha { padding: 9px 18px; }
.cudlik-zpet.je-mensi { font-size: 12px; }
.cudlik-zpet.je-mensi .cudlik-zpet-plocha { padding: 7px 14px; }

@media (prefers-reduced-motion: reduce) {
  .cudlik-zpet, .cudlik-zpet::before, .cudlik-zpet::after,
  .cudlik-zpet-klin, .cudlik-zpet-plocha::after { transition: none; }
}

/* Roman 6. 10. 2026: „dej pryč rámeček v rámečku, zůstane jen ten černý
   a červený, ten kolem dej pryč — a tenhle design dej všude, kde je zpět."
   Tenké linky kolem plochy pryč; zůstává tmavá plocha s červeným klínem. */
.cudlik-zpet { padding: 0; }
.cudlik-zpet::before,
.cudlik-zpet::after { display: none; }