/* ==========================================================================
   COMPONENTS.CSS
   Sdílené komponenty používané napříč moduly (eshop, články, ...).
   Vyžaduje global.css (proměnné, reset).
   ========================================================================== */

/* --------------------------------------------------------------------------
   .chipList - mřížka odkazů (kategorie, rubriky) zobrazená jako "chips".
   Dříve .subKatList v eshop.css - přejmenováno a zobecněno, protože se
   používá jak pro kategorie eshopu, tak pro rubriky článků.

   CSS Grid s auto-fill: počet sloupců se počítá automaticky podle dostupné
   šířky, bez nutnosti definovat breakpointy. 1fr zajistí, že grid vždy
   vyplní celou dostupnou šířku beze zbytku.
   -------------------------------------------------------------------------- */
.chipList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
  margin: 0 0 var(--space-xl) 0;
}

.chipList a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 50px;
  padding: 6px 8px;
  text-align: center;
  white-space: normal; /* povolí zalomení dlouhého textu na víc řádků */
  font-size: var(--font-size-body);
  font-weight: 300;
  border: 1px solid var(--color-border);
  border-left: 8px solid var(--color-chip-border);
  box-shadow: none;
}

.chipList a:link,
.chipList a:visited,
.chipList a:active {
  color: var(--color-text);
  background-color: var(--color-white);
  text-decoration: none;
}

.chipList a:hover {
  color: var(--color-text);
  background-color: #fff3e6;
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

@media screen and (max-width: 969px) {
  .chipList a {
    min-height: 30px;
  }
}

/* --------------------------------------------------------------------------
   .strankovani2 - stránkování (číslování stránek), sdílené eshopem i články.
   "str" = zkratka pro "stránkování".

   Selektor .strankovani2 a (container + tag) má stejnou specificitu jako
   .defaultText a:hover - díky pořadí načítání souborů (components.css
   až po global.css) tak vyhrává nad .defaultText, pokud je stránkování
   vnořené v .defaultText bloku.

   Zobrazuje 9 tlačítek na širších obrazovkách (.strButtFar viditelné),
   5 tlačítek na užších (.strButtFar skryté pod 970px).
   .strHidden - krajová tlačítka (1/poslední, ‹/›) zachovaná v DOMu jako
   placeholder, ale vizuálně skrytá, aby ostatní tlačítka neposkakovala
   při pohybu mezi první/poslední stránkou.
   .strSpacer - mezera "…", stejná logika jako .strHidden.
   -------------------------------------------------------------------------- */
.strankovani2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: var(--space-xl) 0;
}

.strankovani2 a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: var(--font-size-body);
  text-decoration: none;
}

.strankovani2 a:link,
.strankovani2 a:visited,
.strankovani2 a:active {
  color: var(--color-text);
  background-color: var(--color-white);
  text-decoration: none;
}

.strankovani2 a:hover {
  color: var(--color-text);
  background-color: var(--color-bg-light);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

.strankovani2 a.strButtAct,
.strankovani2 a.strButtAct:link,
.strankovani2 a.strButtAct:visited,
.strankovani2 a.strButtAct:active {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 500;
}

.strankovani2 a.strButtAct:hover {
  color: var(--color-text);
  background-color: var(--color-bg-light);
  border-color: var(--color-border);
  box-shadow: var(--shadow-hover);
}

.strSpacer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: var(--color-text);
  visibility: hidden;
}

.strHidden {
  visibility: hidden;
}

@media screen and (max-width: 969px) {
  .strankovani2 a.strButtFar {
    display: none;
  }
  
  #strButtFarVisible {
	  visibility: visible;
  }
}

@media screen and (max-width: 969px) {
	.strSpacer {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   .sekceNadpis - sdílený nadpis samostatné sekce stránky (detail zboží:
   Popis, Související články, seznamy zboží; konec článku...).
   Nahrazuje dřívější .souvisejiciNadpis + .nadpisUnderlined - linka pod
   nadpisem je vždy. Malý nadpis jednoduchého seznamu souvisejících
   článků je .souvisejiciClankyListNadpis (clanky_souvisejici.css).
   -------------------------------------------------------------------------- */
.sekceNadpis {
  margin: 0 0 var(--space-md) 0;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-medium);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   .icoSwap - obecný vzor pro přepínání dvou ikon (výchozí/hover) na
   nadřazeném prvku. Nezávislé na tom, jaký element ikonu nese (a, button,
   div...) - stačí přidat .icoSwap na nadřazený prvek a dvojici .icoNormal
   / .icoHover na obrázky uvnitř.

   Aktivní stav (persistentní, ne hover) se neřeší zde - PHP pro aktivní
   odkaz rovnou vypíše obarvenou verzi jako .icoNormal, viz eshop.css
   (.viewToggle a.isActive).
   -------------------------------------------------------------------------- */
.icoSwap .icoHover {
  display: none;
}

.icoSwap:hover .icoNormal {
  display: none;
}

.icoSwap:hover .icoHover {
  display: block;
}












/* --------------------------------------------------------------------------
   MessageBox - systémové/kontextové zprávy (chyby, info, potvrzení...)
   Jedna komponenta pro samostatnou i sloučenou zprávu (víc zpráv stejné
   severity pohromadě, oddělené <hr>).
   Ikona (.messageBoxIco) je vždy stejná - buď severity ikonka (error/
   warning/ok/info/question), nebo vlastní ikonka (např. koš) doplněná
   o malý severity odznáček (.messageBoxIcoSub).
   -------------------------------------------------------------------------- */

.messageBox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: var(--color-white);
}

/* Severity varianty - okraj + pastelové pozadí (ok zůstává bílé) */
.messageBox--error {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

.messageBox--warning {
  border-color: var(--color-warning);
  background-color: var(--color-warning-bg);
}

.messageBox--ok {
  border-color: var(--color-ok);
  background-color: var(--color-ok-bg);
}

.messageBox--info {
  border-color: var(--color-info);
  background-color: var(--color-bg-light);
}

.messageBox--question {
  border-color: var(--color-question);
  background-color: var(--color-question-bg);
}

/* Ikona - stejná velikost/pozice vždy, ať je to severity ikonka,
   nebo vlastní ikonka (koš) + severity odznáček navíc */
.messageBoxIcoWrap {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: 2px;
}

.messageBoxIco {
  display: block;
  width: 30px;
  height: 30px;
}

.messageBoxIcoSub {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 16px;
  height: 16px;
}

/* Víc zpráv stejné severity pohromadě */
.messageBoxItems {
  display: flex;
  flex-direction: column;
  min-width: 0; /* ať dlouhý text/URL nerozbíjí flex layout */
  width: 100%;
}

.messageBoxItems hr {
  width: 100%;
  height: 1px;
  margin: var(--space-sm) 0;
  border: none;
  background-color: rgba(0, 0, 0, 0.08);
}

/* Text obsah */
.messageBoxText {
  font-size: var(--font-size-body);
  color: var(--color-text);
  line-height: 1.5;
  min-width: 0;
}

.messageBoxNadpis {
  font-weight: 700;
  color: var(--color-text);
}

.messageBoxText p {
  margin: 0 0 var(--space-sm) 0;
}

.messageBoxText p:last-child {
  margin-bottom: 0;
}

.messageBoxText ul,
.messageBoxText ol {
  margin: var(--space-xs) 0 0 0;
  padding-left: var(--space-lg);
}

.messageBoxText a:link,
.messageBoxText a:visited,
.messageBoxText a:active {
  color: var(--color-primary);
  text-decoration: none;
}

.messageBoxText a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   .tabBar - záložky v čistém CSS (radio uvnitř labelu + :has()).
   Komponenta řeší jen vzhled řádku a oušek. Co se po přepnutí zobrazí,
   řeší každá stránka ve vlastním CSS (párování záložka -> obsah).

   HTML:
   <div class='tabBar' role='radiogroup' aria-label='...'>
     <label class='tabBarItem'><input type='radio' name='...' class='tabBarInput' checked>Text</label>
     <label class='tabBarItem'><input type='radio' name='...' class='tabBarInput'>Text</label>
   </div>

   Modifikátory:
     .tabBar--center  záložky na střed (při přetečení se chová jako doleva)
     .tabBar--sticky  lepivý řádek; třídu .tabBarStuck (stín po přilepení)
                      přidává web-controls.js
   -------------------------------------------------------------------------- */

/* Řádek záložek - "ouška". Linka pod řádkem je inset box-shadow (kreslí se
   pod obsahem, takže ji bílé pozadí aktivního ouška překryje; border by
   navíc overflow-x ořízl). align-items: flex-end - ouška stojí na lince,
   vyšší aktivní ouško vystupuje nahoru. Na úzké šířce se řádek posouvá
   vodorovně, ouška se nezalamují. */
.tabBar {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: var(--space-lg);
  overflow-x: auto;
  scrollbar-width: thin;
  box-shadow: inset 0 -1px 0 var(--color-border);
}

/* Náznak posouvání - vyblednutí u pravého okraje (bez JS).
   sticky + right: 0 drží přechod u pravého okraje řádku, dokud je vpravo
   co posouvat. Na konci řádku (nebo když se záložky vejdou) stojí přechod
   ZA poslední záložkou nad prázdnem - bílá na bílé není vidět.
   Výška calc(100% - 1px) - nepřekryje linku pod záložkami.
   pointer-events: none - přes vyblednutí jde kliknout na záložku pod ním. */
.tabBar::after {
  content: '';
  position: sticky;
  right: 0;
  flex: 0 0 2rem;
  align-self: stretch;
  background: linear-gradient(to right, transparent, var(--color-white)) no-repeat top / 100% calc(100% - 1px);
  pointer-events: none;
}

/* Neaktivní ouško - plný rámeček včetně spodní hrany (leží na lince),
   šedé pozadí: působí zasunuté "pod stránkou". */
.tabBarItem {
  position: relative;
  flex-shrink: 0;
  padding: 7px var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 6px 6px 0 0;
  background-color: var(--color-bg-light);
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-text-light);
  white-space: nowrap;
  cursor: pointer;
}

.tabBarItem:hover {
  color: var(--color-primary);
}

/* Radio vizuálně skryté, ale dostupné z klávesnice (Tab + šipky) */
.tabBarInput {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Aktivní ouško - bílé, bez spodní hrany (splývá s obsahem), modrý horní
   okraj 3px. Padding je o 3px vyšší než u neaktivních (3 + 8 + 8 vs.
   1 + 7 + 7 + 1), takže ouško vystupuje nad ostatní. */
.tabBarItem:has(.tabBarInput:checked) {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-top: 3px solid var(--color-primary);
  border-bottom-color: var(--color-white);
  background-color: var(--color-white);
  color: var(--color-primary);
}

/* Focus dovnitř ouška - vnější obrys by overflow řádku ořízl */
.tabBarItem:has(.tabBarInput:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   .tabBar--center - záložky na střed.
   Ne justify-content: center - při přetečení by levá část utekla mimo
   a nešla by doscrollovat. Auto marginy se při nedostatku místa zruší
   a řádek se chová jako zarovnaný doleva.
   ::before = symetrický protějšek k ::after (vyblednutí, 2rem), aby
   skupina záložek stála opravdu uprostřed.
   -------------------------------------------------------------------------- */
.tabBar--center::before {
  content: '';
  flex: 0 0 2rem;
}

.tabBar--center > .tabBarItem:first-of-type {
  margin-left: auto;
}

.tabBar--center > .tabBarItem:last-of-type {
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   .tabBar--sticky - lepivý řádek. Při posouvání zůstává u horní hrany okna
   až do konce svého rodiče. --sticky-offset = výška budoucí lepivé
   hlavičky (zatím není, výchozí 0). Bílé pozadí + z-index, aby obsah pod
   řádkem neprosvítal; padding-top, aby ouška nebyla nalepená na hraně.
   -------------------------------------------------------------------------- */
.tabBar--sticky {
  position: sticky;
  top: var(--sticky-offset, 0px);
  z-index: 10;
  padding-top: var(--space-sm);
  background-color: var(--color-white);
}

/* Přilepený řádek - jemný stín pod linkou (obsah jede pod záložkami).
   Třídu přidává JS (web-controls.js) - CSS zatím neumí spolehlivě
   poznat, kdy je sticky prvek přilepený. */
.tabBar--sticky.tabBarStuck {
  box-shadow: inset 0 -1px 0 var(--color-border), 0 6px 6px -6px rgba(0, 0, 0, 0.2);
}