/* xl - DESKTOP STYLES */ 
.kompaktni-vypis {
  display: none; /* Skryje kompaktní výpis při načtení stránky */
}

/* Rodičovský kontejner: Flexbox pro desktopové zobrazení */
.container-clanky-roky {
  display: flex;
  justify-content: space-between; /* .clanky-roky vlevo, .vypis-clanku vpravo */
  align-items: center;
  margin-bottom: 0px;
}

/* .clanky-roky a .vypis-clanku použijeme také jako flex kontejnery, 
   aby fungovalo gap pro mezery mezi tlačítky */
.clanky-roky,
.vypis-clanku {
  display: flex;
  gap: 5px; /* vzdálenost mezi jednotlivými odkazy/tlačítky */
}

/* Na desktopu chceme „Výpis“ (tlačítka) vpravo */
.vypis-clanku {
  justify-content: flex-end;
}

/* Společný styl pro všechna tlačítka/odkazy */
.tlacitko_clanky_roky {
  background-color: #ffffff;       /* barva pozadí */
  color: #000;                     /* barva textu */
  border: 1px solid #c6c6c6;       /* rámeček */
  padding: 4px 8px;                /* vnitřní okraj tlačítka */
  cursor: pointer;                 /* kurzor po najetí */
  border-radius: 3px;              /* lehce zaoblené rohy */
  transition: background-color 0.3s ease; /* plynulý přechod při hoveru */

  /* Odstranění podtržení a nastavení inline-blocku, aby padding fungoval i u <a> */
  text-decoration: none;
  display: inline-block;
}

/* Hover efekt */
.tlacitko_clanky_roky:hover {
  background-color: #92ff94;       /* barva pozadí po najetí */
}

/* ========== Mobilní zobrazení ========== */
@media (max-width: 600px) {
  /* Na mobilech zobrazit bloky pod sebou */
  .container-clanky-roky {
    display: block;
  }

  /* Výpis posunout pod články a zarovnat vlevo */
  .vypis-clanku {
    margin-top: 0.5rem;            /* odsazení shora */
    justify-content: flex-start;
  }
}