/* ==========================================================================
   CLANKY_SOUVISEJICI.CSS
   Související články - sdílené komponenty modulu článků.
   Načítá se v modulu článků, na stránce kategorie zboží a na detailu zboží.
   Vyžaduje global.css (proměnné, .defaultText).

   1) .souvisejiciClankyListBox - jednoduchý seznam odkazů (kategorie zboží,
      doplněk k popisu). PHP: print_souvisejici_clanky_list()
   2) .clankyList - seznam článků (název + popis). Sdílí ho výpis rubriky
      (clanky.css má jen jeho nadpis .clankyListNadpis) a sekce
      souvisejících článků.
   3) .souvisejiciClankySection - sekce souvisejících článků (detail zboží,
      konec článku). PHP: print_souvisejici_clanky_section()
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Jednoduchý seznam - malý tučný nadpis + odkazy oddělené <br>.
   Barvy odkazů a písmo řeší .defaultText (global.css).
   -------------------------------------------------------------------------- */
.souvisejiciClankyListBox {
  line-height: 1.5;
}

.souvisejiciClankyListNadpis {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
}

/* Odrážka jen vizuálně (není součástí textu odkazu).
   inline-block - podtržení odkazu při hoveru se na odrážku nepřenese. */
.souvisejiciClankyListBox a::before {
  content: '•';
  display: inline-block;
  margin-right: 0.3em;
}

/* --------------------------------------------------------------------------
   2) Seznam článků - název + krátký popis, hover s modrým proužkem.
   (Přesunuto z clanky.css.)
   .clankyList a:hover má stejnou specificitu jako .defaultText a:hover
   (0,2,1) - vyhrává pořadím načtení (tento soubor až po global.css),
   takže se odkaz uvnitř .defaultText nepodtrhne.
   -------------------------------------------------------------------------- */
.clankyList {
  display: flex;
  flex-direction: column;
}

.clankyList a {
  display: block;
  padding: var(--space-md) 0 var(--space-md) 12px;
  border-bottom: 1px solid var(--color-bg-light);
  text-decoration: none;
}

.clankyList a:hover {
  background-color: var(--color-bg-light);
  text-decoration: none;
  border-left: 4px solid var(--color-primary);
  padding-left: 8px;
}

/* Ovládání klávesnicí - obrys uvnitř položky (položka je přes celou šířku) */
.clankyList a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.clankyListName {
  display: block;
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.clankyList a:hover .clankyListName {
  color: var(--color-primary);
}

.clankyListDescr {
  display: block;
  font-size: var(--font-size-body);
  font-weight: 300;
  color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   3) Sekce souvisejících článků - nadpis .sekceNadpis (components.css)
   bez mezery pod sebou: položky mají vlastní horní padding a hover pozadí
   první položky navazuje přímo na linku nadpisu (stejně jako v rubrice).
   -------------------------------------------------------------------------- */
.souvisejiciClankySection .sekceNadpis {
  margin-bottom: 0;
}