/* ════════════════════════════════════════════════════════════════
   poradna-article-plus.css · v6
   Doplňkové prvky pro články poradny VykupyOstrava.cz
   Navazuje na poradna-article.css a proměnné ze style.css.
   Žádné zásahy do globálních stylů.

   Obsah:
   01 · art-steps        — editorial postup krok za krokem (v5)
   02 · art-hero__grid   — hero se dvěma sloupci
   03 · art-facts        — pravý informační panel v heru
   04 · art-triage       — editorial průvodce čtením (v5)
   05 · art-disclaimer--strong — výraznější právní upozornění
   06 · art-flow         — editorial proces na lince (v5)
   07 · art-cta--slim    — štíhlý tmavý CTA pás
   08 · art-mistakes     — editorial rejstřík chyb (v5)
   09 · art-sources--v2  — zvýrazněné zdroje a odpovědnost
   10 · art-related-grid--3 — vyrovnaný grid souvisejících článků
   11 · art-img-ph        — čistý media slot pro budoucí fotografie
   12 · art-toc is-active — jasnější aktivní položka obsahu
   13 · art-box--info     — neutrální informační box (odlišení od tipu)
   14 · art-related-grid--4 — rozcestník se 4 kartami
   ════════════════════════════════════════════════════════════════ */


/* ── 01 · Postup krok za krokem — editorial svislý seznam (v5) ──
   Stejný jazyk jako art-flow: linky, malá smaragdová čísla,
   žádné karty, kolečka ani stíny. */
.art-content ol.art-steps {
  list-style: none;
  counter-reset: art-step;
  margin: 1.6rem 0 1.7rem;
  padding: 0;
  border-top: 1px solid var(--line-s);
  display: grid;
  gap: 0;
}

.art-content ol.art-steps > li {
  counter-increment: art-step;
  position: relative;
  margin: 0;
  display: grid;
  grid-template-columns: 2.3rem 1fr;
  column-gap: 1rem;
  row-gap: .15rem;
  align-items: start;
  padding: .95rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.art-content ol.art-steps > li:last-child { border-bottom-color: var(--line-s); }

.art-content ol.art-steps > li::before {
  content: counter(art-step, decimal-leading-zero);
  position: static;
  grid-row: 1 / span 2;
  display: block;
  width: auto;
  height: auto;
  padding-top: 4px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.art-content ol.art-steps > li strong {
  grid-column: 2;
  display: block;
  margin-bottom: .1rem;
  font-size: .98rem;
  font-weight: 740;
  letter-spacing: -.015em;
  line-height: 1.35;
  color: var(--ink);
}

.art-content ol.art-steps > li span {
  grid-column: 2;
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 600px) {
  .art-content ol.art-steps > li {
    grid-template-columns: 2rem 1fr;
    column-gap: .8rem;
    padding: .85rem 0;
  }
  .art-content ol.art-steps > li span { font-size: 13.5px; }
}


/* ── 02 · Hero se dvěma sloupci ───────────────────────────────── */
.art-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.art-hero__main { min-width: 0; }


/* ── 03 · Informační panel v heru ─────────────────────────────── */
.art-facts {
  position: relative;
  padding: 1.25rem 1.3rem 1.15rem;
  border-radius: var(--rl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  backdrop-filter: blur(4px);
}
.art-facts::before {
  content: "";
  position: absolute;
  top: 0; left: 1.3rem; right: 1.3rem;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--accent-glow), rgba(52,211,153,.15));
}
.art-facts__head {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-glow);
  margin-bottom: .85rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.art-facts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.art-facts__list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}
.art-facts__list svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent-glow);
  opacity: .85;
}
.art-facts__list span {
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(255,255,255,.66);
}
.art-facts__list strong {
  display: block;
  font-size: .82rem;
  font-weight: 720;
  color: rgba(255,255,255,.94);
  margin-bottom: 1px;
}
.art-facts__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.09);
  width: 100%;
  font-size: .8rem;
  font-weight: 720;
  color: var(--accent-glow);
  text-decoration: none;
  transition: color .2s, gap .2s;
}
.art-facts__link svg {
  width: 13px; height: 13px;
  flex-shrink: 0;
  transition: transform .25s;
}
.art-facts__link:hover { color: #fff; gap: 10px; }
.art-facts__link:hover svg { transform: translateY(2px); color: var(--accent-glow); }


/* ════════════════════════════════════════════════════════════════
   04 · TRIAGE — editorial průvodce čtením (v5)
   Figura rámovaná tenkými linkami, tři textové sloupce.
   Žádné karty, stíny ani ukazatele — afordance jen na odkazu.
   ════════════════════════════════════════════════════════════════ */
.art-triage {
  margin: 0 0 2.2rem;
  padding: 1.35rem 0 1.45rem;
  border-top: 1px solid var(--line-s);
  border-bottom: 1px solid var(--line-s);
}

.art-triage__head { margin-bottom: 1.3rem; }
.art-triage__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: .5rem;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}
.art-triage__kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.art-triage__title {
  /* záměrně mimo styl běžných h2 — uvozuje navigační blok, ne kapitolu */
  font-size: clamp(1.14rem, 1.7vw, 1.32rem) !important;
  font-weight: 740;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 .35rem !important;
  padding: 0 !important;
  scroll-margin-top: 100px;
}
.art-triage__title::after { display: none !important; }
.art-triage__desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 62ch;
}

/* tři sloupce oddělené svislými linkami */
.art-triage__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.art-triage__grid > a + a { border-left: 1px solid var(--line); }

/* sloupec — textový, ne karta; oprava globálního podtržení odkazů */
.art-content a.art-triage__card,
.art-content a.art-triage__card:hover {
  text-decoration: none !important;
}
.art-triage__card {
  display: flex;
  flex-direction: column;
  padding: .15rem 1.5rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  min-height: 100%;
}
.art-triage__grid > a:first-child { padding-left: 0; }
.art-triage__grid > a:last-child { padding-right: 0; }

.art-triage__tag {
  margin-bottom: .55rem;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--light);
}
/* nejnaléhavější varianta — jen tlumený zlatý label, žádné drama */
.art-triage__card--hot .art-triage__tag { color: var(--gold); }

.art-triage__card strong {
  font-size: 1rem;
  font-weight: 740;
  letter-spacing: -.015em;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: .4rem;
  transition: color .2s ease;
}
.art-triage__card p {
  font-size: 13.75px;
  line-height: 1.62;
  color: var(--muted);
  margin: 0 0 .85rem;
  margin-bottom: 1rem;
}

/* odkaz na kapitolu — textový, jako odkaz v článku */
.art-triage__go {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.3;
  color: var(--accent);
}
.art-triage__go svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform .22s ease;
}
@media (hover: hover) {
  .art-triage__card:hover strong { color: var(--accent); }
  .art-triage__card:hover .art-triage__go svg { transform: translate(2px, -2px); }
}


/* ── 05 · Výraznější právní upozornění ────────────────────────── */
.art-disclaimer--strong {
  align-items: flex-start;
  padding: .95rem 1.1rem;
  border-radius: var(--rl);
  /*border-left-width: 3px;*/
  background:
    linear-gradient(135deg, rgba(161,98,7,.055), rgba(161,98,7,.015)),
    var(--white);
  box-shadow: 0 1px 2px rgba(9,13,26,.03);
}
.art-disclaimer--strong svg {
  width: 19px; height: 19px;
  margin-top: 2px;
}
.art-disclaimer--strong > div {
  font-size: .78rem;
  line-height: 1.6;
}
.art-disclaimer--strong strong {
  display: block;
  margin-bottom: .15rem;
  font-size: .8rem;
  font-weight: 740;
  letter-spacing: .01em;
  color: #783f04;
}


/* ════════════════════════════════════════════════════════════════
   06 · FLOW — editorial proces na lince (v5)
   Sdílená horní linka, smaragdový zářez nad každým krokem,
   malá čísla 01–05. Žádný panel, kolečka ani stíny.
   ════════════════════════════════════════════════════════════════ */
.art-content ol.art-flow {
  list-style: none;
  counter-reset: art-flow;
  margin: 1.6rem 0 1.7rem;
  padding: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line-s);
  border-radius: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 1.6rem;
}
.art-content ol.art-flow > li {
  counter-increment: art-flow;
  position: relative;
  margin: 0;
  padding: 1rem 0 0;
  text-align: left;
  font-size: 12.8px;
  line-height: 1.55;
}
/* smaragdový zářez na sdílené lince */
.art-content ol.art-flow > li::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 26px;
  height: 2px;
  background: var(--accent);
}
/* malé číslo kroku */
.art-content ol.art-flow > li::before {
  content: counter(art-flow, decimal-leading-zero);
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin-bottom: .4rem;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transform: none;
}
.art-content ol.art-flow > li strong {
  display: block;
  font-size: 13.5px;
  font-weight: 740;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: .25rem;
}
.art-content ol.art-flow > li span {
  display: block;
  font-size: 12.8px;
  line-height: 1.55;
  color: var(--muted);
}


/* ── 07 · Štíhlý tmavý CTA pás ────────────────────────────────── */
.art-cta--slim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 2rem);
  text-align: left;
  margin: 2rem 0;
  padding: clamp(1.15rem, 1.8vw, 1.5rem) clamp(1.2rem, 2vw, 1.75rem);
}
.art-cta--slim__txt { min-width: 0; }
.art-cta--slim h3 { margin-bottom: .3rem; }
.art-cta--slim p {
  margin: 0;
  max-width: none;
  margin-inline: 0;
  font-size: 13.5px;
  color: rgba(255,255,255,.72);
}
.art-cta--slim .btn-m { flex-shrink: 0; white-space: nowrap; }


/* ════════════════════════════════════════════════════════════════
   08 · MISTAKES (v6)
   Bílé karty, jediné číslování: malý tmavý štítek uvnitř karty
   (::before, CSS counter). Ghost číslice (::after) zrušena.
   Přebíjí absolutně pozicovanou pilulku ze základního CSS.
   ════════════════════════════════════════════════════════════════ */
.art-mistakes {
  counter-reset: mistakeCounter;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin: 1.75rem 0 2rem;
}

.art-mistake {
  counter-increment: mistakeCounter;
  position: relative;
  padding: 1.2rem 1.25rem 1.2rem;
  border-radius: var(--rl);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(9,13,26,.03);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}

/* číselný štítek — uvnitř karty, v běžném toku */
.art-mistake::before {
  content: counter(mistakeCounter, decimal-leading-zero);
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 .5rem;
  margin-bottom: .75rem;
  border-radius: 9px;
  background: var(--ink);
  color: var(--accent-glow);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  transition: background .25s ease, color .25s ease;
}

/* žádné druhé číslo v pozadí */
.art-mistake::after {
  content: none !important;
  display: none !important;
}

.art-mistake strong {
  display: block;
  margin: 0 0 .38rem;
  font-size: clamp(.96rem, 1.1vw, 1.05rem);
  font-weight: 740;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
}

.art-mistake p {
  margin: 0;
  font-size: 13.75px;
  line-height: 1.62;
  color: var(--muted);
}

@media (hover: hover) {
  .art-mistake:hover {
    transform: translateY(-2px);
    border-color: rgba(16,185,129,.22);
    box-shadow: var(--sh-lift);
  }
  .art-mistake:hover::before {
    background: linear-gradient(135deg, var(--accent), var(--accent-h));
    color: #fff;
  }
}

@media (max-width: 767.98px) {
  .art-mistakes {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .art-mistake {
    padding: 1.05rem 1.1rem;
  }
}


/* ── 09 · Zdroje a odpovědnost — zvýraznění ───────────────────── */
.art-sources--v2 {
  position: relative;
  overflow: hidden;
  border-top: 3px solid transparent;
}
.art-sources--v2::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-glow) 45%, rgba(52,211,153,.1));
}
.art-sources--v2 .art-sources__title {
  font-size: 1.05rem;
  margin: 0 0 1.1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}
.art-sources--v2 .art-sources__title svg {
  width: 20px; height: 20px;
  padding: 0;
}


/* ── 10 · Related: vyrovnaný 3sloupcový grid ──────────────────── */
.art-related-grid--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 1080px;
  margin: 0 auto;
}
.art-related-grid--3 .art-rel {
  flex: none;
  min-width: 0;
  max-width: none;
}
.art-related-grid--3 .art-img-ph {
  aspect-ratio: 16/10;
  border: 0;
  border-radius: 0;
}


/* ════════════════════════════════════════════════════════════════
   11 · MEDIA SLOT — připravený prostor pro reálné fotografie
   Nahrazuje šrafovaný „rozpracovaný“ placeholder čistým slotem.
   ════════════════════════════════════════════════════════════════ */
.art-img-ph {
  background: linear-gradient(160deg, #eef3f1, #e5ece9);
  border: 0;
  color: var(--light);
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* jemná značka media slotu — tenká linka nad popiskem */
.art-img-ph {
  flex-direction: column;
}
.art-img-ph::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  margin-bottom: 10px;
  background: rgba(12,108,64,.3);
}
.art-img-ph small {
  margin-top: 6px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  opacity: .75;
}

/* hlavní slot pod hero — drží 16:9, radius a stín dává obal .art-hero-img */
.art-hero-img .art-img-ph { aspect-ratio: 16/9; }

/* sloty v souvisejících kartách — 16:10 podle karty, bez vlastních rohů */
.art-rel__img .art-img-ph {
  aspect-ratio: 16/10;
  height: 100%;
  border-radius: 0;
}


/* ════════════════════════════════════════════════════════════════
   12 · TOC — jasnější aktivní položka
   Silnější zelené pozadí + decentní levý proužek. Beze změny šířky.
   ════════════════════════════════════════════════════════════════ */
.art-toc__link.is-active {
  color: var(--accent);
  background: rgba(16,185,129,.1);
  box-shadow: inset 3px 0 0 0 var(--accent);
}


/* ════════════════════════════════════════════════════════════════
   13 · ROZLIŠENÍ INFORMAČNÍCH BOXŮ
   info = neutrální bílý (dosud splýval s tipem),
   tip = lehce zelený, warn/ymyl = tlumeně zlaté, answer = prémiový.
   ════════════════════════════════════════════════════════════════ */
.art-box--info {
  background: var(--white);
  border: 1px solid var(--line-s);
  border-left: 3px solid rgba(9,13,26,.22);
}
.art-box--info svg { color: var(--accent-deep); }


/* ════════════════════════════════════════════════════════════════
   14 · RELATED — rozcestník se 4 kartami
   ════════════════════════════════════════════════════════════════ */
.art-related-grid--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  max-width: 1240px;
  margin: 0 auto;
}
.art-related-grid--4 .art-rel {
  flex: none;
  min-width: 0;
  max-width: none;
}
.art-related-grid--4 .art-rel h3 { font-size: clamp(.9rem, .95vw, .98rem); }
.art-related-grid--4 .art-rel p { -webkit-line-clamp: 4; }

@media (max-width: 1199px) {
  .art-related-grid--4 { grid-template-columns: 1fr 1fr; max-width: 760px; }
}
@media (max-width: 640px) {
  .art-related-grid--4 { grid-template-columns: 1fr; max-width: 460px; }
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — nové komponenty
   ════════════════════════════════════════════════════════════════ */

/* ── ≤ 1100 ── */
@media (max-width: 1100px) {
  .art-hero__grid { grid-template-columns: minmax(0, 1fr) 290px; }
}

/* ── ≤ 991 — hero panel pod text, flow svisle ── */
@media (max-width: 991px) {
  .art-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .art-facts { max-width: 560px; }
  .art-related-grid--3 { grid-template-columns: 1fr 1fr; }

  /* flow: svislý editorial seznam — číslo vlevo, text vpravo */
  .art-content ol.art-flow {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .art-content ol.art-flow > li {
    display: grid;
    grid-template-columns: 2.1rem 1fr;
    column-gap: .9rem;
    row-gap: .1rem;
    align-items: start;
    padding: .8rem 0;
  }
  .art-content ol.art-flow > li + li { border-top: 1px solid var(--line); }
  .art-content ol.art-flow > li::before {
    grid-row: 1 / span 2;
    margin: 0;
    padding-top: 3px;
  }
  .art-content ol.art-flow > li::after { width: 22px; }
  .art-content ol.art-flow > li strong { grid-column: 2; margin-bottom: .15rem; }
  .art-content ol.art-flow > li span { grid-column: 2; }
}

/* ── ≤ 767 ── */
@media (max-width: 767px) {
  .art-triage__grid { grid-template-columns: 1fr; }
  .art-triage__card,
  .art-triage__grid > a:first-child,
  .art-triage__grid > a:last-child { padding: 1.05rem 0; }
  .art-triage__grid > a:first-child { padding-top: .15rem; }
  .art-triage__grid > a:last-child { padding-bottom: .15rem; }
  .art-triage__grid > a + a { border-left: 0; border-top: 1px solid var(--line); }
  .art-triage__card p { margin-bottom: .7rem; }
  .art-cta--slim {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .art-cta--slim .btn-m { justify-content: center; white-space: normal; }
  .art-related-grid--3 { grid-template-columns: 1fr; }
}

/* ── ≤ 575 ── */
@media (max-width: 575px) {
  .art-facts { padding: 1.05rem 1rem .95rem; }
  .art-facts__list span { font-size: .76rem; }
  .art-triage__title { font-size: 1.14rem !important; }
  .art-triage__card strong { font-size: .96rem; }
  .art-triage__card p { font-size: 13.25px; }
  .art-disclaimer--strong { padding: .8rem .85rem; gap: .55rem; }
  .art-disclaimer--strong > div { font-size: .73rem; }
  .art-cta--slim { padding: 1.1rem 1rem; }
  .art-cta--slim h3 { font-size: .95rem; }
  .art-cta--slim p { font-size: 13px; }
  /* mistakes: přebít zmenšení ze základního CSS — čitelnost na mobilu */
  .art-mistake { padding: 1rem 1.05rem; }
  .art-mistake strong { font-size: .96rem; }
  .art-mistake p { font-size: 13.25px; }
}

/* ── ≤ 374 ── */
@media (max-width: 374px) {
  .art-facts__head { font-size: .6rem; }
  .art-triage__card strong { font-size: .92rem; }
  .art-triage__card p { font-size: 12.75px; }
}


/* ═══ END · poradna-article-plus.css v6 ═══ */