/* Odvetvia, mestá a poradňa (8. 11. 2026, docs/navstevnost-plan.md).
   Len rozloženie obsahu: karty, body, kroky, text článku a súvisiace odkazy.
   Hlavička (hlava--kompakt), karty projektov (.ponuka .projekty), FAQ
   (.otazka) a výzva (.vyzvaW4) sú zo spoločného balíka. Bez 3D, bez obrázkov
   na pozadí, aby sa stránky načítali rýchlo. Načíta ho každá z týchto šablón
   (views/pages/odvetvia|odvetvie|mesta|mesto|poradna|clanok.ejs). */

.sekcia.obsahSk,
.sekcia.obsahSk-projekty,
.sekcia.obsahSk-faq {
  padding-block: clamp(24px, 3.5vw, 48px);
}
/* Úzky stĺpec textu zarovnaný vľavo s nadpismi, nie na stred. */
.obsahSk__uzky > * {
  max-width: 860px;
}
.obsahSk__perex {
  margin: 0 0 18px;
  font-size: clamp(1.08rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--text);
}
.obsahSk__odsek,
.obsahSk-odrazky li {
  margin: 0 0 14px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted);
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.obsahSk__h2 {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  color: var(--text);
}
.obsahSk__h3 {
  margin: 0 0 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6fc3f5;
}
.obsahSk__pod {
  margin: 22px 0 0;
  color: var(--text-muted);
}
/* :where() drží špecifickosť nízko, aby karty a čipy nižšie prebili podčiarknutie. */
.obsahSk :where(a:not(.tlacidlo, .sipka, .projekt__nahlad)),
.obsahSk-faq .otazka__odpoved a,
.obsahSk__odkaz {
  color: #8fd1f7;
  text-decoration: underline;
  text-decoration-color: rgba(143, 209, 247, 0.4);
  text-underline-offset: 3px;
}
.obsahSk :where(a:not(.tlacidlo, .sipka, .projekt__nahlad)):hover,
.obsahSk__odkaz:hover {
  color: #ffffff;
  text-decoration-color: currentColor;
}

/* ---------- Karty rozcestníkov ---------- */
.obsahSk-karty {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 18px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.obsahSk-karta {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.obsahSk-karta__obr {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.obsahSk-karta__telo {
  padding: 18px 20px 22px;
}
.obsahSk-karta__nadpis {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.25;
}
.obsahSk .obsahSk-karta__nadpis a {
  color: var(--text);
  text-decoration: none;
}
/* Celá karta je klikateľná cez odkaz v nadpise. */
.obsahSk-karta {
  position: relative;
}
.obsahSk .obsahSk-karta__nadpis a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.obsahSk-karta:hover,
.obsahSk-karta:focus-within {
  border-color: rgba(111, 195, 245, 0.45);
}
.obsahSk-karta__text {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}
.obsahSk-karta__meta {
  margin: 10px 0 0;
  font-size: 13px;
  color: #8fa0b6;
}

/* ---------- Body (potreby, ako pracujeme) ---------- */
.obsahSk-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.obsahSk-bod {
  padding: 22px 22px 24px;
}
.obsahSk-bod__cislo {
  display: block;
  margin-bottom: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #6fc3f5;
}
.obsahSk-bod__nadpis,
.obsahSk-krok__nadpis {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--text);
}
.obsahSk-bod__text,
.obsahSk-krok__text {
  margin: 0;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ---------- Kroky (riešenie) ---------- */
.obsahSk-kroky {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: krok;
}
.obsahSk-krok {
  position: relative;
  padding: 18px 0 18px 46px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  counter-increment: krok;
}
.obsahSk-krok::before {
  content: counter(krok, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 20px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  color: #6fc3f5;
}
@media (max-width: 760px) {
  .obsahSk-kroky {
    grid-template-columns: 1fr;
  }
}

/* ---------- Karty projektov a FAQ ---------- */
.obsahSk-projekty .obsahSk__h2 {
  margin-bottom: 24px;
}
.obsahSk-faq .faq__otazky {
  max-width: none;
}

/* ---------- Súvisiace ---------- */
.obsahSk-suvis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 28px 48px;
}
.obsahSk-zoznam {
  margin: 0;
  padding: 0;
  list-style: none;
}
.obsahSk-zoznam li {
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.obsahSk-cipy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.obsahSk .obsahSk-cipy a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 14px;
  color: #cfd8e3;
  text-decoration: none;
}
.obsahSk .obsahSk-cipy a:hover {
  border-color: #6fc3f5;
  color: #ffffff;
}

/* ---------- Poradňa ---------- */
.obsahSk-clanky {
  display: grid;
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.obsahSk-clanok {
  position: relative;
  padding: 22px 24px 24px;
}
.obsahSk-clanok__meta,
.obsahSk-autor {
  margin: 0 0 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #8fa0b6;
}
.obsahSk-clanok__nadpis {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  line-height: 1.3;
}
.obsahSk .obsahSk-clanok__nadpis a {
  color: var(--text);
  text-decoration: none;
}
.obsahSk .obsahSk-clanok__nadpis a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.obsahSk-clanok:hover {
  border-color: rgba(111, 195, 245, 0.45);
}
.obsahSk-clanok__perex {
  margin: 0;
  line-height: 1.65;
  color: var(--text-muted);
}
.obsahSk-autor {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 22px;
}
.obsahSk-sekcia {
  margin-top: 34px;
}
.obsahSk-odrazky {
  margin: 0 0 14px;
  padding-left: 1.2em;
  list-style: disc;
}
.obsahSk-odrazky li::marker {
  color: #6fc3f5;
}
.obsahSk-odrazky li {
  margin-bottom: 8px;
}

/* ---------- Odkazy na odvetvia z /nasa-praca a /sluzby ----------
   Tieto stránky súbor načítajú len kvôli týmto dvom pravidlám (len SK). */
.filtre__odvetvia {
  margin: 4px 0 22px;
  font-size: 14px;
  line-height: 1.9;
  color: #8fa0b6;
}
.filtre__odvetvia span {
  margin-right: 6px;
}
.filtre__odvetvia a,
.ponuka-sub a {
  color: #8fd1f7;
  text-decoration: underline;
  text-decoration-color: rgba(143, 209, 247, 0.4);
  text-underline-offset: 3px;
}
/* Dotyková plocha aspoň 24 px (WCAG 2.2, 2.5.8). Inline odkaz mal 19 px,
   na iPhone Air a iPade sa ťažko trafoval (kontrola 8. 11. 2026). */
.filtre__odvetvia a {
  display: inline-block;
  padding: 5px 2px;
  line-height: 1.4;
}
.filtre__odvetvia a:hover,
.ponuka-sub a:hover {
  color: #ffffff;
}

/* ---------- Drobček s dlhým názvom ----------
   Drobček nad hlavičkou je vyňatý z toku (premium-ostatne.css), takže
   zalomený na dva riadky by na mobile prekryl štítok. Posledná položka sa
   preto skráti trojbodkou, celý názov je hneď pod ním v H1. */
main:has(.obsahSk-hlava) .drobcek__zoznam {
  flex-wrap: nowrap;
  white-space: nowrap;
}
main:has(.obsahSk-hlava) .drobcek__polozka {
  flex-shrink: 0;
  white-space: nowrap;
}
main:has(.obsahSk-hlava) .drobcek__polozka:last-child {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobil: Safari na iOS slovenčinu nedelí (hyphens nemá slovník), zarovnanie
   do bloku by v úzkom stĺpci roztiahlo medzery medzi slovami. Na úzkom
   displeji preto vľavo, od 601 px ostáva do bloku. Overené v Xcode iPhone Air. */
@media (max-width: 600px) {
  .obsahSk__odsek,
  .obsahSk-odrazky li {
    text-align: left;
  }
}