/* PAGES1 — SEO stránky „podľa projektu" (lib/pages/render.ts). DESIGNSYS2-F (7. 10. 2026): vzhľad domova v2 cez dizajn systém —
 * načíta sa za tokens + chrome + components (lib/ui pageHead). Tmavý úvod = components .sp-dtop (Ihličie + zrno, omrvinka),
 * FAQ = components .faq. Tu len to, čo je vlastné týmto stránkam: čísla v úvode, tabuľky, kalkulačka, obrázky, súvisiace.
 * Pravidlá ako components.css: len var(--…) z tokens.css, systémové písmo, ⛔ var(--mono), ⛔ verzálky, ⛔ :is() so zoznamom,
 * selektory na 1 riadku (critical-css). CLS: obrázky majú width/height, výsledky kalkulačky sú vyrenderované od začiatku (pomlčka). */
.pg h2 { font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--track-head); margin: 0 0 18px; text-wrap: balance; }
.pg h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.pg p { margin: 0 0 14px; max-width: var(--measure); }
.pg-small { font-size: var(--fs-caption); line-height: 1.6; color: var(--muted); }

/* ── úvod: tmavý (components .sp-dtop), H1 obsahovej stránky, tlačidlá, dátum, čísla stránky */
.pg-head { display: grid; gap: 18px; max-width: 900px; }
.pg-top h1 { color: var(--on-dark); font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--w-display); max-width: var(--mw-h1-20); margin: 0; text-wrap: balance; }
.pg .pg-top .lead { color: var(--on-dark-muted); max-width: 41.29em; }
.pg-ctas { margin-top: 2px; }
.pg-top .pg-upd { margin: 0; }
.pg-stats { margin: var(--s-7) 0 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.pg-stats div { padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 6px; align-content: start; border-radius: var(--r-card); background: rgb(244 241 234 / .06); border: 1px solid rgb(244 241 234 / .14); }
.pg-stats dt { font-family: var(--font-display); font-size: clamp(26px, 18px + 2vw, 40px); font-weight: var(--w-display); letter-spacing: var(--track-display); line-height: var(--lh-display); color: var(--on-dark); font-variant-numeric: tabular-nums; }
.pg-stats div:first-child dt { color: var(--sun); }
.pg-stats dd { margin: 0; font-size: var(--fs-small); color: var(--on-dark-muted); }

/* ── sekcie: rytmus krátkeho domova (components .sp .sec), striedanie paper / surface ako bloky domova */
.pg-sec + .pg-sec { border-top: 1px solid var(--line); }
.pg-sec--faq { background: var(--surface); border-top: 0 !important; }
.pg-sec--rel { border-top: 0 !important; }
.pg-2 { display: grid; gap: var(--s-6); align-items: start; }
.pg-2 > *, .pg-cols > *, .pg-calc, .pg-calc__f, .pg-f { min-width: 0; }
.pg-cols { display: grid; gap: 16px; }
.pg-cols > div { padding: clamp(22px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.pg-cols h2 { font-size: var(--fs-h3); letter-spacing: var(--track-head); }
.pg-cols p:last-child { margin-bottom: 0; }

/* ── obrázky: rám ako fotky domova (zaoblenie karty, tieň), izometria na javisku --mist */
.pg-fig { margin: 0; position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--mist); box-shadow: var(--sh-2); }
.pg-fig img { display: block; width: 100%; height: auto; }
.pg-fig .gg-chip { position: absolute; left: 12px; top: 12px; }
.pg-iso { padding: clamp(16px, 3vw, 32px); }
.pg-iso svg { display: block; width: 100%; height: auto; }

/* ── tabuľky v svetlej karte */
.pg-tw { overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); margin: 8px 0 14px; }
.pg-tw:focus-visible { outline: 2px solid var(--leaf-deep); outline-offset: 2px; }
.pg-t { width: 100%; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.pg-t caption { text-align: left; padding: 12px 16px; font-size: var(--fs-caption); color: var(--muted); caption-side: bottom; border-top: 1px solid var(--line); }
.pg-t th, .pg-t td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pg-t tbody tr:last-child th, .pg-t tbody tr:last-child td { border-bottom: 0; }
.pg-t thead th { font: 600 13px/1.3 var(--font); letter-spacing: -.01em; text-transform: none; color: var(--muted); background: var(--paper); white-space: nowrap; }
.pg-t tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.pg-t--cmp tbody th { white-space: normal; min-width: 9em; }
.pg-t--cmp tbody tr:first-child th, .pg-t--cmp tbody tr:first-child td { background: var(--leaf-mist); color: var(--leaf-deep); }

/* ── kalkulačka: svetlá karta s tieňom, výsledky v zelenom poli */
.pg-calc { border-radius: calc(var(--r-card) + 4px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); padding: clamp(20px, 3vw, 36px); display: grid; gap: 18px; margin-top: var(--s-5); }
.pg-calc h2 { margin: 0; font-size: var(--fs-h3); letter-spacing: var(--track-head); }
.pg-calc__f { display: grid; gap: 14px; }
.pg-fr { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.pg-f { display: grid; gap: 6px; font-size: var(--fs-small); color: var(--body); align-content: start; }
.pg-f span { font-weight: 600; color: var(--ink); }
.pg-f small, .pg-ls small { font-size: var(--fs-caption); color: var(--muted); }
.pg-f select { text-overflow: ellipsis; }
.pg-f input, .pg-f select { font: 600 17px/1.2 var(--font); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); min-height: 48px; padding: 0 12px; width: 100%; box-sizing: border-box; font-variant-numeric: tabular-nums; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.pg-f input:focus, .pg-f select:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-mist); }
.pg-chk input:focus-visible { outline: 2px solid var(--leaf-deep); outline-offset: 2px; }
.pg-chk { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); min-height: 44px; }
.pg-chk input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--leaf); flex: none; }
.pg-ls { border: 1px dashed var(--line-strong); border-radius: var(--r-ctl); padding: 12px 14px 14px; margin: 0; display: grid; gap: 10px; }
.pg-ls legend { font: 600 13px/1 var(--font); letter-spacing: -.01em; text-transform: none; color: var(--muted); padding: 0 6px; }
.pg-calc__o { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--r-ctl); background: var(--leaf-mist); color: var(--leaf-deep); min-height: 88px; }
.pg-o { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; max-width: none; font-size: var(--fs-small); }
.pg-o output { font-size: clamp(20px, 16px + 1vw, 26px); font-weight: var(--w-display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.pg-lo { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-small); }
.pg-lo:empty { display: none; }
.pg-lo li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgb(6 95 70 / .18); padding-top: 4px; }
.pg-calc__cta { justify-self: start; }
@media (max-width: 559px) { .pg-calc__cta { justify-self: stretch; } }
.pg-ol { margin: 0 0 14px; padding-left: 1.3em; display: grid; gap: 8px; max-width: var(--measure); }

/* ── FAQ (components .faq) — odpoveď je jeden odsek */
.pg .faq__a p { margin: 0; }

/* ── súvisiace stránky: karty s šípkou (ako dvere domova, bez fotky) */
.pg-rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
.pg-rel a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 14px 20px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); color: var(--ink) !important; text-decoration: none !important; font-weight: 600; letter-spacing: -.01em; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast), border-color var(--t-fast); }
.pg-rel a:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--leaf); }
.pg-rel__go { flex: none; font-size: 20px; color: var(--leaf); transition: transform var(--t-fast) var(--ease-out); }
.pg-rel a:hover .pg-rel__go { transform: translateX(4px); }

@media (min-width: 720px) {
  .pg-stats { grid-template-columns: repeat(3, 1fr); }
  .pg-rel { grid-template-columns: repeat(2, 1fr); }
  .pg-cols { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (min-width: 1100px) { .pg-rel { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) {
  .pg-2 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-8); }
}
/* NAVODY1 — návody (lib/pages/navody): odrážky, odkazy pod tabuľkou, kroky montáže s výkresmi návodu */
.nv-ul { list-style: disc; }
.nv-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; }
.nv-steps { list-style: none; counter-reset: nv; margin: 0; padding: 0; display: grid; gap: 20px; }
.nv-step { counter-increment: nv; display: grid; gap: 16px; padding: clamp(18px, 3vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.nv-step__t h3 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; font-size: var(--fs-h3); letter-spacing: var(--track-head); }
.nv-step__t h3::before { content: counter(nv); flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--leaf); color: var(--on-dark); font-size: 16px; }
.nv-step__t p { margin: 0; max-width: var(--measure); }
.nv-step__figs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.nv-step__fig { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.nv-step__fig img { display: block; width: 100%; height: auto; }
.nv-step__fig figcaption { padding: 8px 12px; font-size: var(--fs-caption); color: var(--muted); }
@media (min-width: 1024px) { .nv-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }

/* ── KONCEPTA-OBSAH (8. 10. 2026): spoločný blok konceptu A pre obsahové stránky — ROVNAKÝ v blog.css, pages.css, faq.css
 * (stránka smie mať ≤ 4 CSS súbory, preto kópia namiesto ďalšieho súboru; zmena = vo všetkých troch).
 * Svetlý úvod (a-clanok/a-navod/a-faq): omrvinka, nadtitulok, veľký H1, úvod, riadok údajov pod čiarou; otázky = A (+/−, čiary). */
.oa-top { padding: calc(var(--hdr-h) + clamp(40px, 6vw, 96px)) 0 clamp(40px, 6vw, 88px); }
.oa-top__head { display: grid; gap: 18px; max-width: 1060px; }
.oa-top .sp-crumbs ol { margin: 0 0 clamp(12px, 3vw, 36px); font-size: 13px; color: var(--body); }
.oa-top .gg-eyebrow { margin-top: 4px; }
.oa-top h1 { margin: 0; color: var(--ink); font-size: clamp(46px, 7vw, 98px); line-height: .94; letter-spacing: -.062em; font-weight: var(--w-display); max-width: 15em; text-wrap: balance; }
.oa-top .lead { margin: 6px 0 0; max-width: 760px; color: var(--body); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.oa-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 8px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font: 500 13px/1.4 var(--font); letter-spacing: -.01em; color: var(--body); font-variant-numeric: tabular-nums; }
@media (max-width: 699px) { .oa-meta { flex-direction: column; gap: 5px; } }
.oa-top h1, .faqhub h2, .art-page .prose h2, .oa-main h2, .bl .sp-dtop h1 { hyphens: manual; -webkit-hyphens: manual; }
.sp .faq details { border-top: 1px solid var(--line); border-bottom: 0; }
.sp .faq details:last-child { border-bottom: 1px solid var(--line); }
.sp .faq summary { min-height: 66px; padding: 12px 0; gap: 20px; }
.sp .faq summary h3 { font-size: 17px; font-weight: 750; letter-spacing: -.018em; }
.sp .faq__pm { width: 24px; height: 24px; border: 0; border-radius: 0; background: transparent; }
.sp .faq__pm::before, .sp .faq__pm::after { width: 15px; height: 2px; background: var(--leaf); }
.sp .faq details[open] .faq__pm { transform: none; background: transparent; }
.sp .faq details[open] .faq__pm::before { background: var(--leaf); }
.sp .faq__a { padding: 0 46px 20px 0; }

/* ── KONCEPTA-OBSAH: SEO stránky a návody podľa a-navod — svetlý úvod s číslami vpravo (čiara 2 px), skoky na kapitoly,
 * obsah 210 px vľavo, kapitoly v jednom stĺpci oddelené čiarou, kroky montáže ako číslovaný zoznam s čiarami */
.oa-top__grid { display: grid; gap: 32px; }
@media (min-width: 1000px) { .oa-top__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 7vw, 110px); align-items: end; } }
.pg .pg-top .lead { color: var(--body); max-width: 760px; }
.pg-top .pg-head { gap: 18px; max-width: none; }
.pg-facts { border-top: 2px solid var(--ink); }
.pg-top .pg-stats { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.pg-top .pg-stats div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 15px; align-items: baseline; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.pg-top .pg-stats dt { order: 2; font: 750 17px/1.3 var(--font); letter-spacing: -.018em; color: var(--ink); }
.pg-top .pg-stats div:first-child dt { color: var(--ink); }
.pg-top .pg-stats dd { order: 1; font-size: 15px; line-height: 1.4; color: var(--body); }
.pg-top .pg-upd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--body); font-variant-numeric: tabular-nums; }
.oa-jump { display: flex; gap: 7px; overflow-x: auto; margin-top: clamp(28px, 4vw, 40px); padding-top: 25px; border-top: 1px solid var(--line); scrollbar-width: none; }
.oa-jump::-webkit-scrollbar { display: none; }
.oa-jump .pill { border-color: var(--line); font-weight: 500; white-space: nowrap; }
.oa-layout { display: grid; gap: 0; padding-bottom: clamp(56px, 8vw, 120px); }
.oa-toc { display: none; }
@media (min-width: 1100px) {
  .oa-layout { grid-template-columns: 210px minmax(0, 860px); justify-content: center; gap: clamp(40px, 6vw, 96px); align-items: start; }
  .oa-toc { position: sticky; top: calc(var(--hdr-h) + 28px); display: grid; border-top: 2px solid var(--ink); }
  .oa-toc b { padding: 14px 0; font-size: 15px; color: var(--ink); }
  .oa-toc a { min-height: 44px; display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--body) !important; text-decoration: none !important; font-size: 15px; line-height: 1.3; }
  .oa-toc a:hover { color: var(--leaf-deep) !important; }
}
.oa-main { min-width: 0; }
.oa-main .wrap { max-width: none; padding: 0; }
.sp .oa-main .sec { padding: clamp(44px, 6vw, 74px) 0; background: transparent; }
.oa-main .pg-sec + .pg-sec { border-top: 1px solid var(--line); }
.oa-main > .pg-sec:first-child { padding-top: clamp(24px, 3vw, 40px); }
.oa-main h2 { scroll-margin-top: calc(var(--hdr-h) + 16px); }
.oa-main .pg-2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.oa-main .faq__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.oa-main .faq__h { position: static; }
.pg .oa-main p { font-size: 18px; line-height: 1.7; }
.pg .oa-main .pg-small { font-size: var(--fs-caption); line-height: 1.6; }
.pg-tw { border-radius: 18px; }
.pg-t thead th { background: var(--card-tint); color: var(--body); }
.pg-fig { border-radius: 28px; box-shadow: none; }
.pg-cols > div { border-radius: 22px; }
.pg-calc { border-radius: 28px; }
.nv-step { padding: 22px 0; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.nv-steps { gap: 0; }
.nv-steps .nv-step:last-child { border-bottom: 1px solid var(--line); }
.nv-step__t h3::before { content: counter(nv, decimal-leading-zero); width: 40px; height: auto; border-radius: 0; background: transparent; color: var(--larch-ink); font: 750 15px/1.4 var(--font); }
.nv-step__fig { border-radius: 18px; }
@media (min-width: 1024px) { .oa-main .nv-step { grid-template-columns: minmax(0, 1fr); } }
.nv-pdf { display: grid; gap: 8px; justify-items: start; margin: 22px 0 0; }
.nv-pdf small { font-size: var(--fs-caption); color: var(--muted); }
.pg-sec--rel { border-top: 1px solid var(--line) !important; }
/* FAKTY1-stránka (koncept A a-navod#fakty): tabuľka údaj → hodnota bez hlavičky, zoznam krajín, profily */
.fk-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fk-t tbody th { white-space: normal; width: 34%; color: var(--muted); font-weight: 500; }
.fk-t tbody td { color: var(--ink); font-weight: 600; }
.fk-cc { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
.fk-cc li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.fk-prof { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 20px 0 0; }

/* ── HEROKOMPAKT1 (owner 13. 10.): stránka s kalkulačkou (zemina, piesok; lib/pages/render.ts oaPage calc) — kompaktný úvod:
 * omrvinka, H1 --fs-pagehead a hneď kalkulačka; úvodný text a čísla stránky pod ňou (vpravo na desktope). Bez scrollu 1440×900 / 390×844. */
.pg-top--calc { padding: calc(var(--hdr-h) + var(--pagehead-pad)) 0 var(--pagehead-pad); }
.pg-top--calc .sp-crumbs ol { margin-bottom: 8px; }
.pg-top--calc h1 { font-size: var(--fs-pagehead); line-height: 1.05; letter-spacing: -.04em; max-width: none; }
.pg-top--calc .pg-head { gap: 12px; }
.pg-top--calc .pg-calc { margin-top: 0; }
.pg .pg-top--calc .lead { font-size: var(--fs-small); line-height: 1.5; }
.pg-top--calc .oa-jump { margin-top: 20px; padding-top: 16px; }
@media (min-width: 1000px) { .pg-top--calc .oa-top__grid { align-items: start; } }