/* Statické stránky (témata, osobnosti, učitelé). Základ a barvy jsou v app.css. */
.pg-main { max-width: 860px; padding-bottom: 64px; }
.pg-crumbs { font-size: 14px; color: var(--ink-2); margin: 4px 0 18px; }
.pg-crumbs a { color: inherit; }
.pg-hero { margin: 8px 0 22px; }
.pg-hero h1 { font-size: clamp(32px, 6vw, 52px); letter-spacing: -0.03em; margin: 4px 0 12px; }
.pg-kicker { margin: 0; font-weight: 700; font-size: 14px; color: var(--moss); }
.pg-lead { font-size: 18px; line-height: 1.55; max-width: 62ch; margin: 0; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }
.pg-person { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; }
.pg-person-emoji { font-size: 60px; text-align: center; }
.pg-section { margin-top: 34px; }
.pg-section h2 { font-size: 26px; margin-bottom: 12px; }
.pg-section p { max-width: 68ch; line-height: 1.55; }
.pg-note { font-size: 14px; color: var(--ink-2); }
.pg-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pg-emoji { font-size: 22px; width: 28px; text-align: center; display: inline-block; }
.pg-flag { width: 28px; height: 21px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); vertical-align: middle; }

.pg-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: c; }
.pg-cards li { counter-increment: c; display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line); }
.pg-card-name { font-weight: 700; }
.pg-card-name small { font-weight: 400; color: var(--ink-2); }
.pg-card-value { font-family: var(--display); font-weight: 750; white-space: nowrap; }
.pg-card-fact { grid-column: 2 / -1; font-size: 14px; color: var(--ink-2); line-height: 1.45; }

.pg-facts, .pg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pg-facts li, .pg-steps li { display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); }
.pg-facts span, .pg-steps span { color: var(--ink-2); line-height: 1.45; }
.pg-traps li { border-style: dashed; }
.pg-traps b { text-decoration: line-through; text-decoration-color: var(--far); text-decoration-thickness: 2px; }
.pg-steps { counter-reset: s; }
.pg-steps li { counter-increment: s; padding-left: 56px; position: relative; }
.pg-steps li::before { content: counter(s); position: absolute; left: 16px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); font-weight: 800; display: grid; place-items: center; }

.pg-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pg-links a { display: inline-block; padding: 8px 12px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.pg-links a:hover { border-color: var(--ink-2); }
.pg-links small { font-weight: 400; color: var(--ink-2); }

.pg-themes, .pg-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pg-themes { grid-template-columns: 1fr 1fr; } .pg-people { grid-template-columns: repeat(3, 1fr); } }
.pg-themes a, .pg-people a { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; height: 100%; }
.pg-people a { grid-template-columns: 30px 1fr; font-size: 15px; }
.pg-themes a:hover, .pg-people a:hover { border-color: var(--ink-2); }
.pg-t-icon, .pg-people a > span:first-child { font-size: 28px; text-align: center; }
.pg-people a > span:first-child { font-size: 22px; }
.pg-themes a > span:last-child, .pg-people a > span:last-child { display: grid; }
.pg-themes a span span, .pg-people a span span { font-size: 14px; color: var(--ink-2); }

.pg-faq dt { font-weight: 700; margin-top: 14px; }
.pg-faq dd { margin: 4px 0 0; color: var(--ink-2); line-height: 1.5; max-width: 68ch; }
.pg-teach { padding: 20px; border-radius: 18px; background: var(--ok-bg); }
.pg-teach h2 { margin-top: 0; }
.pg-prose h2 { font-size: 20px; margin: 22px 0 6px; }
@media (max-width: 440px) { .pg .brand-word { display: none; } .pg .site-head nav { gap: 2px; } }