/* LEARN – Vzdelávacia stránka a Zoznam tém (W1). Mód A, len tokeny. */
.topics-main { --ink: var(--void); --ink-muted: color-mix(in srgb, var(--void) 80%, transparent); padding-block: calc(var(--nav-h) + var(--app-space-7) + var(--app-space-5)) calc(var(--app-space-7) * 1.5); color: var(--ink); }
.tp-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 20px; }
.tp-narrow { max-width: calc(720px + 40px); }
.tp-head { max-width: 720px; margin-bottom: var(--app-space-7); }
.tp-title { font-size: var(--app-display-size); line-height: var(--app-display-line); letter-spacing: var(--app-display-tracking); font-weight: var(--app-display-weight); color: var(--burgundy); margin: 0 0 var(--app-space-4); }
.tp-lead { font-size: var(--app-body-size); line-height: var(--app-body-line); color: var(--ink-muted); max-width: 66ch; margin: 0; }
.tp-lead p { margin: 0; }
.tp-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--app-space-3); border: 1px dashed var(--control-edge); border-radius: var(--radius-pill); font-size: var(--app-caption-size); font-weight: var(--app-label-weight); color: var(--ink-muted); vertical-align: middle; margin-bottom: var(--app-space-4); }
.tp-row-title .tp-badge { margin: 0 0 0 var(--app-space-2); }

.tp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--app-space-3); }
.tp-row { display: flex; align-items: center; gap: var(--app-space-4); min-height: var(--app-tap); padding: var(--app-space-5); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.tp-row:hover { transform: translateY(-1px); }
.tp-row-body { flex: 1; display: grid; gap: var(--app-space-1); }
.tp-row-title { font-size: var(--app-title-size); line-height: var(--app-title-line); font-weight: var(--app-title-weight); color: var(--burgundy); }
.tp-row-text { color: var(--ink-muted); max-width: 66ch; }
.tp-row-arrow { flex: none; width: 24px; height: 24px; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.tp-row:hover .tp-row-arrow { transform: translateX(3px); }
.tp-row:focus-visible, .tp-pill:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; box-shadow: 0 0 0 5px var(--focus-gap), 0 0 0 6px var(--focus-hair); }
.tp-cta { margin-top: var(--app-space-7); }

.tp-layout { display: grid; gap: var(--app-space-6); }
.tp-anchors { position: sticky; top: calc(var(--nav-h) + var(--app-space-4)); z-index: 2; background: var(--ground); margin-inline: -20px; padding: var(--app-space-2) 20px; overflow-x: auto; scrollbar-width: none; }
.tp-anchors::-webkit-scrollbar { display: none; }
.tp-anchors ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--app-space-2); white-space: nowrap; }
.tp-pill { display: inline-flex; align-items: center; gap: var(--app-space-2); min-height: 44px; padding: 0 var(--app-space-4); border: 1px solid var(--control-edge); border-radius: var(--radius-pill); background: var(--white); color: var(--ink); text-decoration: none; font-size: var(--app-body-sm-size); font-weight: var(--app-label-weight); transition: background-color .3s; }
.tp-pill:hover { background: color-mix(in srgb, var(--ink) 6%, var(--white)); }
.tp-pill .icon { width: 18px; height: 18px; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.tp-pill-arrow:hover .icon { transform: translateX(3px); }

.tp-body { max-width: 720px; min-width: 0; }
.tp-sec { padding-block: var(--app-space-6); scroll-margin-top: 72px; }
.tp-h2 { font-size: var(--app-title-size); line-height: var(--app-title-line); letter-spacing: var(--app-title-tracking); font-weight: var(--app-title-weight); color: var(--burgundy); margin: 0 0 var(--app-space-4); }
.tp-html { font-size: var(--app-body-size); line-height: var(--app-body-line); max-width: 38em; }
.tp-html > :first-child { margin-top: 0; } .tp-html > :last-child { margin-bottom: 0; }
.tp-html ul, .tp-html ol { padding-left: 1.2em; }
.tp-card { display: grid; grid-template-columns: 44px 1fr; gap: var(--app-space-4); align-items: start; padding: 20px; background: var(--white); border: 1px solid color-mix(in srgb, var(--void) 6%, transparent); border-radius: 20px; box-shadow: var(--shadow-card); }
.tp-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--void) 6%, transparent); color: var(--void); }
.tp-card-icon svg { width: 22px; height: 22px; }
.tp-warning { border-left: 4px solid var(--ember); padding-left: var(--app-space-5); background: var(--white); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-right: var(--app-space-5); margin-block: var(--app-space-4); }
.tp-related { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--app-space-2); }
.tp-cta .btn { width: 100%; }
.tp-note { margin-top: var(--app-space-6); font-size: var(--app-body-sm-size); color: var(--ink-muted); max-width: 66ch; }

@media (min-width: 768px) {
  .tp-wrap { padding-inline: 32px; }
  .tp-narrow { max-width: calc(720px + 64px); }
  .tp-cta .btn { width: auto; }
  .tp-detail { max-width: calc(720px + 64px); }
  .tp-anchors { margin-inline: -32px; padding-inline: 32px; }
}
@media (min-width: 1200px) {
  .tp-wrap, .tp-detail { padding-inline: 48px; max-width: calc(1120px + 96px); }
  .tp-narrow { max-width: calc(720px + 96px); }
  .tp-layout { grid-template-columns: 240px minmax(0, 720px); gap: var(--app-space-7); align-items: start; }
  .tp-anchors { top: calc(var(--nav-h) + var(--app-space-4)); margin: 0; padding: 0; background: none; overflow: visible; }
  .tp-anchors ul { flex-direction: column; white-space: normal; }
  .tp-anchors .tp-pill { background: none; border-color: transparent; padding-inline: var(--app-space-3); }
  .tp-anchors .tp-pill:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .tp-detail-head { margin-left: calc(240px + var(--app-space-7)); }
}
@media (prefers-reduced-motion: reduce) { .tp-row, .tp-row-arrow, .tp-pill .icon { transition: none; } .tp-row:hover, .tp-row:hover .tp-row-arrow, .tp-pill-arrow:hover .icon { transform: none; } }
.tp-cta-text { margin-bottom: var(--app-space-5); }

/* W2: odkazy na príbeh tela */
.tp-story { position: relative; overflow: hidden; display: grid; gap: var(--app-space-2); margin-bottom: var(--app-space-6); padding: 28px 24px; border-radius: 28px; background: var(--burgundy); color: var(--white); text-decoration: none; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.tp-story::after { content: "TVAR"; position: absolute; right: -6px; bottom: -14px; font-size: clamp(72px, 14vw, 140px); font-weight: 800; letter-spacing: -0.06em; line-height: .8; color: color-mix(in srgb, var(--white) 12%, transparent); pointer-events: none; }
.tp-story:hover { transform: translateY(-2px); }
.tp-story:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.tp-story-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--burgundy); position: relative; }
.tp-story-title { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; max-width: 20em; position: relative; }
.tp-story-go { display: inline-flex; align-items: center; gap: var(--app-space-2); font-weight: 600; color: color-mix(in srgb, var(--white) 86%, transparent); position: relative; }
.tp-story-go .icon { width: 18px; height: 18px; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.tp-story:hover .tp-story-go .icon { transform: translateX(3px); }
.tp-story-link { margin-top: var(--app-space-5); }