@charset "UTF-8";
/* ==========================================================================
   clanek.css — doplňkové třídy pro stránku interního článku (clanek.html)
   --------------------------------------------------------------------------
   Načítá se AŽ ZA css/intranet.css a staví jen na jeho tokenech, takže se
   článek sám překlápí mezi světlým a tmavým režimem. Do jádra se nesahá.

   Obsah:
     1. Tělo článku (.clanek) — obrázek, perex, mezititulky, seznamy
     2. Tabulka v článku (.tabulka)
     3. Poznámka redakce (.clanek__poznamka) a štítky (.stitek)
     4. Pravý sloupec jako stoh karet
     5. Responzivita a tisk

   Drobečková navigace (.drobecky) i záhlaví stránky (.zahlavi-stranky) jsou
   sdílené komponenty a bydlí v css/intranet.css.
   ========================================================================== */


/* ==========================================================================
   1. Tělo článku
   ========================================================================== */

/* Stejný poměr 16:9 jako u vedoucího článku na rozcestníku — redakce dodává
   fotky v jednom poměru a obrázek se tak nikde neořízne. Dřívější max-height
   kompenzovala vyšší poměr 16:10; s pevným poměrem už není potřeba a jen by
   obrázek ořezávala. */
.clanek__obrazek {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-l);
  background: var(--povrch-3);
}

.clanek__popisek-obrazku {
  margin: 8px 0 var(--m-5);
  font-size: var(--fs-s);
  color: var(--text-jemny);
}

/* Perex — o stupeň větší než běžný text, ale pořád sazba na čtení */
.clanek__perex {
  margin: 0 0 var(--m-5);
  max-width: 68ch;
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.55;
  color: var(--text);
  font-weight: 500;
}

.clanek__nadpis {
  margin: var(--m-6) 0 var(--m-3);
  font-family: var(--pismo-nadpis);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.clanek__text {
  margin: 0 0 var(--m-4);
  max-width: 70ch;
  color: var(--text);
}

.clanek__seznam {
  margin: 0 0 var(--m-4);
  padding-left: 1.3em;
  max-width: 70ch;
  display: grid;
  gap: 7px;
}

.clanek__seznam--cisla { list-style: decimal; }

.clanek__seznam strong { color: var(--text); }


/* ==========================================================================
   2. Tabulka v článku
   --------------------------------------------------------------------------
   Na úzkém displeji se posouvá vodorovně ve vlastním obalu, aby článek
   nerozhodil rozvržení stránky.
   ========================================================================== */

.tabulka-obal {
  margin: 0 0 var(--m-5);
  overflow-x: auto;
}

.tabulka {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.tabulka__titulek {
  caption-side: top;
  text-align: left;
  padding-bottom: 8px;
  font-size: var(--fs-s);
  color: var(--text-tlumeny);
}

.tabulka th,
.tabulka td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ram-2);
}

.tabulka thead th {
  background: var(--povrch-3);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid var(--ram);
}

.tabulka tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.tabulka tbody tr:last-child th,
.tabulka tbody tr:last-child td { border-bottom: 0; }


/* ==========================================================================
   3. Poznámka redakce a štítky článku
   ========================================================================== */

.clanek__poznamka {
  display: flex;
  align-items: flex-start;
  gap: var(--m-3);
  margin: var(--m-5) 0 0;
  padding: var(--m-4);
  border: 1px solid var(--ram);
  border-left: 3px solid var(--akcent-text);
  border-radius: var(--r-m);
  background: var(--akcent-zavoj);
  color: var(--text);
}

.clanek__poznamka > .ikona {
  margin-top: 2px;
  color: var(--akcent-text);
}

.clanek__poznamka-text {
  margin: 0;
  font-size: var(--fs-sm);
}

.clanek__paticka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-3);
  margin-top: var(--m-5);
  padding-top: var(--m-4);
  border-top: 1px solid var(--ram-2);
}

.clanek__stitky {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* Štítek je odkaz — proto má plnou cílovou plochu 44 px na výšku */
.stitek {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-pilulka);
  background: var(--povrch-3);
  color: var(--text-tlumeny);
  font-size: var(--fs-s);
  font-weight: 600;
}

.stitek:hover {
  background: var(--akcent-zavoj);
  color: var(--akcent-text);
  text-decoration: none;
}

.clanek__vice { margin: var(--m-4) 0 0; }


/* ==========================================================================
   4. Pravý sloupec — několik karet pod sebou
   ========================================================================== */

.sloupec-vedlejsi--stoh {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
}


/* ==========================================================================
   5. Responzivita a tisk
   ========================================================================== */

@media (max-width: 575.98px) {
  .clanek__paticka { align-items: flex-start; }
}

@media print {
  .drobecky,
  .clanek__paticka,
  .sloupec-vedlejsi--stoh { display: none; }

  /* Na papíře výšku stropujeme, ať obrázek nesebere půl strany. */
  .clanek__obrazek { aspect-ratio: auto; max-height: 180px; }
}

/* Dotyková zařízení — cílové plochy nejméně 44 × 44 px
   (vyhláška č. 99/2023 Sb. / EN 301 549). */
@media (pointer: coarse) {
  .clanek-radek { min-height: 44px; }
}