/* Základ stránky. Farby, písma a mierky sú v tokens.css. Mobil je východisko, desktop sa dopĺňa cez min-width. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base);
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: .2em; font-weight: 600; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 9vw, 4rem); }
h2 { font-size: clamp(1.6rem, 5vw, 2.25rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.obal { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.obal--text { max-width: calc(var(--maxw-text) + 2 * var(--gutter)); }

/* ---------- pracovná lišta (pred schválením kňazom) ---------- */

/* ---------- hlavička ---------- */
.hlavicka { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.hlavicka__riadok { display: flex; align-items: center; justify-content: space-between; min-height: 3.75rem; gap: 1rem; }
.znacka { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.05rem, 4.8vw, 1.25rem); white-space: nowrap; letter-spacing: -.02em; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: .6rem; }
.znacka__ikona { width: 2.25rem; height: 2.25rem; flex: none; display: block; }
.znacka__ikona svg { display: block; width: 100%; height: 100%; }
.menu { position: relative; }
.menu__tlacidlo { cursor: pointer; min-height: 2.75rem; padding: 0 1.1rem; display: flex; align-items: center; border: 2px solid var(--ink); border-radius: var(--radius-pill); font: 700 1rem/1 var(--font-sans); background: var(--surface); color: var(--ink); }
.menu__zoznam { display: none; position: absolute; right: 0; top: calc(100% + .5rem); background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--tien-karta); padding: .4rem; flex-direction: column; min-width: 14rem; }
.menu.otvorene .menu__zoznam { display: flex; }
.menu__zoznam a { white-space: nowrap; padding: .75rem .95rem; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 700; }
.menu__zoznam a:hover { background: var(--accent-soft); }
.menu__zoznam a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
@media (min-width: 56rem) {  /* štyri položky sa na užšie okno nezmestia, pod touto šírkou je rozbaľovacie menu */
  .menu__tlacidlo { display: none; }
  .menu__zoznam { display: flex; position: static; flex-direction: row; border: 0; box-shadow: none; background: none; padding: 0; gap: .25rem; min-width: 0; }
}

/* ---------- tlačidlá ---------- */
.tlacidlo {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.5rem; padding: .75rem 1.9rem; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-ink); border: 2px solid var(--accent);
  font: 800 1.05rem/1.2 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.tlacidlo:hover { transform: translateY(-1px); box-shadow: var(--tien-karta); }
.tlacidlo[disabled], .tlacidlo[aria-disabled="true"] { background: var(--line); border-color: var(--line); color: var(--ink-soft); cursor: not-allowed; transform: none; box-shadow: none; }
.tlacidlo--ob { background: transparent; color: var(--accent); }
.tlacidlo--ob:hover { background: var(--accent-soft); box-shadow: none; }
/* --male je zachované len ako alias: všetky tlačidlá majú rovnakú veľkosť */
.tlacidlo--male { }

/* ---------- úvod: farebná plocha ---------- */
.uvod { margin: 1.25rem 0 0; padding: 2rem 1.5rem 4.25rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-lg); position: relative; overflow: hidden; }
.uvod { min-height: 17rem; }
.uvod > .uvod__art { position: absolute; z-index: 0; pointer-events: none; right: -4.5rem; top: 50%; transform: translateY(-50%); width: 19rem; height: 19rem; }
.uvod > :not(.uvod__art) { position: relative; z-index: 1; max-width: 47%; }
.uvod__stitok { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; margin: 0 0 .75rem; opacity: .9; }
.uvod h1 { margin-bottom: .35em; }
.o-ponuke { margin: 2.75rem 0 6.5rem; max-width: 40rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.o-ponuke h2 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--ink); }
.o-ponuke p { margin: 0; font-size: .98rem; line-height: 1.6; }
.uvod p:last-child { margin: 0; font-size: 1.15rem; }
@media (min-width: 48rem) { .uvod { padding: 3rem 3rem 3.75rem; } }
@media (max-width: 47.9rem) { .uvod { padding-bottom: 11rem; } .uvod > :not(.uvod__art) { max-width: none; } .uvod > .uvod__art { width: 15rem; height: 15rem; right: -2.5rem; top: auto; bottom: -2rem; transform: none; } }

/* ---------- výber ---------- */
.krok { margin: 2.25rem 0; }
.krok[hidden] { display: none; }
.krok__nadpis { display: flex; align-items: center; gap: .75rem; margin-bottom: .35rem; }
.krok__nadpis h2 { margin: 0; font-size: 1.6rem; }
.krok__cislo { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--gold); color: var(--gold-ink); font: 800 1rem/1 var(--font-head); flex: none; }
.krok__pomoc { color: var(--ink-soft); margin: 0 0 1rem; font-size: 1rem; }
.karty { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.karty--siroke { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .karty { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
  .karty--siroke { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.karta { position: relative; display: block; cursor: pointer; }
.karta input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.karta__telo {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .65rem;
  height: 100%; min-height: 9rem; padding: 1.1rem .75rem; background: var(--surface);
  border: 2px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--tien);
  transition: transform .12s, border-color .12s, background-color .12s, box-shadow .12s;
}
.karty--siroke .karta__telo { flex-direction: row; text-align: left; gap: 1rem; min-height: 6.5rem; padding: 1rem 1.25rem; }
.karta:hover .karta__telo { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--tien-karta); }
.karta input:focus-visible + .karta__telo { outline: var(--focus); outline-offset: 3px; }
.karta input:checked + .karta__telo { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--tien-karta); }
.karta__znacka { position: absolute; top: .65rem; right: .65rem; width: 1.6rem; height: 1.6rem; border: 2px solid var(--line); background: var(--surface); }
.karta input[type="radio"] ~ .karta__znacka { border-radius: 50%; }
.karta input[type="checkbox"] ~ .karta__znacka { border-radius: 9px; }
.karta input:checked ~ .karta__znacka { background: #fff; border-color: #fff; }
.karta input:checked ~ .karta__znacka::after { content: ""; position: absolute; left: 50%; top: 45%; width: .35rem; height: .7rem; border: solid var(--accent); border-width: 0 3px 3px 0; transform: translate(-50%, -50%) rotate(45deg); }
.karta__nazov { font-weight: 800; line-height: 1.2; font-size: 1.05rem; }
.karta__popis { display: block; color: var(--ink-soft); font-size: .92rem; font-weight: 500; margin-top: .2rem; line-height: 1.35; }
.karta input:checked + .karta__telo .karta__popis { color: color-mix(in srgb, var(--accent-ink) 88%, transparent); }

/* ikona / ilustrácia (assets/ilustracie/<id>.svg); preberá farbu cez currentColor, inak zástupný tvar */
.ilu { width: 4rem; height: 4rem; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; overflow: hidden; }
.ilu svg { width: 62%; height: 62%; }
.ilu img { width: 100%; height: 100%; object-fit: contain; }
.karta input:checked + .karta__telo .ilu { background: rgb(255 255 255 / .2); color: #fff; }
.ilu--zastupna::before { content: ""; width: 46%; height: 46%; background: currentColor; opacity: .85; border-radius: 50%; }
.ilu--zastupna[data-tvar="1"]::before { border-radius: 14%; }
.ilu--zastupna[data-tvar="2"]::before { border-radius: 50% 50% 50% 10%; }
.ilu--zastupna[data-tvar="3"]::before { border-radius: 50% 50% 8% 50%; transform: rotate(8deg); }
.ilu--zastupna[data-tvar="4"]::before { width: 50%; height: 30%; border-radius: 999px 999px 0 0; }
.ilu--zastupna[data-tvar="5"]::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; width: 48%; height: 44%; }

.lista { position: sticky; bottom: 0; z-index: 10; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom)); margin-top: 2rem; }
.lista__vnutro { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
.lista__sprava { color: var(--ink-soft); font-size: .95rem; margin: 0; min-height: 1.4em; font-weight: 600; }
@media (min-width: 48rem) { .lista__vnutro { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- spytovanie ---------- */
.shrnutie { padding: 1.5rem 0 .5rem; }
.shrnutie h1 { font-size: clamp(2rem, 7vw, 3rem); }
.shrnutie__chipy { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; padding: 0; list-style: none; }
.chip { background: var(--accent-soft); color: var(--ink); border-radius: var(--radius-pill); padding: .3rem 1rem; font-size: .95rem; font-weight: 700; }
.nastroje { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.skupina-volba { display: flex; align-items: center; gap: .5rem; font-size: 1rem; color: var(--ink-soft); font-weight: 600; }
.skupina-volba input { width: 1.4rem; height: 1.4rem; accent-color: var(--accent); }
/* modlitby: rovnaké písmo ako zvyšok webu, bez kurzívy; odlíšené len blokom */
.modlitba, .clanok blockquote.modlitba, .rozbal blockquote.modlitba-po, .rozbal .modlitba-po { font-family: var(--font-sans); font-style: normal; font-weight: 400; font-size: 1.2rem; line-height: 1.6; background: var(--accent-soft); border: 0; border-radius: var(--radius-lg); padding: 1.15rem 1.35rem; margin: 1rem 0 .5rem; color: var(--ink); }
.modlitba p, .modlitba-po p { margin: 0 0 .8rem; }
.modlitba p:last-child, .modlitba-po p:last-child, .modlitba > :last-child { margin-bottom: 0; }
.usmernenie { font-size: .95rem; color: var(--ink-soft); margin: .5rem 0 1.25rem; }
.stitok { margin: 1.75rem 0 0; font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.rozbal { border-radius: var(--radius); margin: .75rem 0 1.25rem; background: var(--second-soft); border: 2px solid color-mix(in srgb, var(--second) 30%, white); }
.rozbal--pomoc { background: var(--third-soft); border-color: color-mix(in srgb, var(--third) 30%, white); }
.rozbal > summary { cursor: pointer; font-weight: 800; min-height: 3.25rem; display: flex; align-items: center; padding: .5rem 1rem; list-style: none; gap: .6rem; }
.rozbal > summary::-webkit-details-marker { display: none; }
.rozbal > summary::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--gold); flex: none; }
.rozbal--pomoc > summary::before { background: var(--third); }
.rozbal > summary::after { content: "+"; margin-left: auto; font-size: 1.6rem; line-height: 1; font-weight: 700; }
.rozbal[open] > summary::after { content: "–"; }
.rozbal__telo { padding: 0 1rem 1rem; font-size: 1rem; }
.rozbal__telo p, .rozbal__telo ul { margin: 0 0 .75rem; }
.rozbal__telo ul { padding-left: 1.2rem; }
.rozbal blockquote { font-size: 1.1rem; margin: .75rem 0; padding-left: .9rem; border-left: 4px solid var(--gold); }
.rozbal .ref { font-family: var(--font-sans); font-size: .9rem; color: var(--ink-soft); white-space: nowrap; font-weight: 600; }

/* blok prikázania alebo sekcie Lásky: farebná hlavička, otázky na bielom */
.blok { --bc: var(--second); --bc-soft: var(--second-soft); --bc-ink: var(--second-ink); margin: 2rem 0; border-radius: var(--radius-lg); overflow: hidden; border: 2px solid var(--bk, var(--bc)); background: var(--surface); box-shadow: var(--tien); }
/* striedanie: nepárne bloky (1., 3., …) levanduľová hlavička a rámik, zlaté bodky; párne bloky pastelová zlatá hlavička, zlatý rámik, fialové bodky; text v hlavičke vždy tmavý */
.blok[data-farba="2"] { --bc: #F6DE9C; --bk: var(--gold); --bc-ink: var(--second-ink); }
.blok[data-farba="2"] .vety li::before { background: var(--accent); }
.blok__hlavicka { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: var(--bc); color: var(--bc-ink); }
.blok__hlavicka h2 { margin: 0; font-size: clamp(1.35rem, 4.5vw, 1.9rem); }
.blok__cislo { font-family: var(--font-head); font-size: clamp(3.25rem, 14vw, 5rem); line-height: .85; font-weight: 800; min-width: 1.05em; text-align: center; }
.blok__podnadpis { margin: .1rem 0 0; font-size: 1rem; opacity: .92; font-weight: 600; }
.blok .ilu { background: color-mix(in srgb, var(--bc-ink) 16%, transparent); color: var(--bc-ink); }
.blok__telo { padding: .35rem 1.25rem 1rem; }
.vety { list-style: none; margin: 0; padding: 0; max-width: 36em; font-size: var(--fs-otazka); }
.vety li { position: relative; font-size: var(--fs-otazka); line-height: 1.4; font-weight: 500; padding: .55rem 0 .55rem 1.6rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, var(--surface)); }
/* deliaca čiara je medzi všetkými otázkami; len za poslednou otázkou bloku nie */
.blok__telo > .vety:last-child li:last-child { border-bottom: 0; }
.vety li::before { content: ""; position: absolute; left: 0; top: calc(.55rem + (var(--fs-otazka) * 1.4 - .65rem) / 2); width: .65rem; height: .65rem; border-radius: 4px; background: var(--gold); transform: rotate(45deg); }
.blok .rozbal { margin: .75rem 0 1rem; }
/* poznámky s pomocou pod otázkami: v zbalenom stave nenápadné, zarovnané s textom otázok */
.blok .rozbal--pomoc { margin: .5rem 0 .6rem 1.6rem; max-width: calc(36 * var(--fs-otazka) - 1.6rem); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 12px; }
.rozbal--pomoc > summary { min-height: 2.6rem; padding: .3rem .8rem; font-size: .95rem; font-weight: 600; gap: .5rem; }
.rozbal--pomoc > summary::before { width: 1.15rem; height: 1.15rem; border-radius: 0; background: var(--accent); -webkit-mask: url(../assets/clanky-ikony/hand-heart.svg) center / contain no-repeat; mask: url(../assets/clanky-ikony/hand-heart.svg) center / contain no-repeat; }
.rozbal--pomoc > summary::after { font-size: 1.15rem; font-weight: 600; }
.rozbal--pomoc .rozbal__telo { padding: 0 .8rem .8rem; font-size: var(--fs-otazka); line-height: 1.5; }
.zaver { margin: 2rem 0; padding: 1.25rem 1.4rem; border-radius: var(--radius-lg); background: var(--third); color: var(--third-ink); border-bottom: .5rem solid var(--gold); font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; line-height: 1.3; }
.predsavzatie { margin: 0 0 .9rem; font-weight: 700; font-size: 1.15rem; }
.predsavzatie:first-child { margin-top: .7rem; }
.predsavzatie:last-child { margin-bottom: 0; }
.pata-spytovania { margin: 2rem 0 1rem; padding: 1.25rem; background: var(--second-soft); border-radius: var(--radius-lg); }
.pata-spytovania p:last-child { margin: 0; }

/* ---------- články a ostatné stránky ---------- */
.clanok { padding: 2.25rem 0 3rem; }
.clanok .predtext { color: var(--ink-soft); font-size: 1.2rem; }
.zoznam-clankov { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .75rem; }
.zoznam-clankov a { display: block; padding: 1.1rem 1.4rem; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; transition: transform .12s, border-color .12s; }
.zoznam-clankov a:hover { border-color: var(--accent); transform: translateY(-2px); }
.clanok h2 { margin-top: 2.25rem; font-size: clamp(1.4rem, 4vw, 1.75rem); }
.clanok p { line-height: 1.7; }
.clanok blockquote { margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--gold-soft); border-left: .35rem solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; line-height: 1.35; }
.clanok .rozbal p { line-height: 1.6; }
.clanok .rozbal sup { font-size: .75em; font-weight: 700; color: var(--ink-soft); margin-right: .15em; }
.zastup { background: var(--surface); border: 2px dashed var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; color: var(--ink-soft); }

/* ---------- pätička ---------- */
.pata { border-top: 1px solid var(--line); margin-top: 3rem; padding: 1.5rem 0 2rem; color: var(--ink-soft); font-size: .95rem; }
.pata a { color: var(--ink-soft); }
.pata__odkazy { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; list-style: none; margin: 0 0 .75rem; }

/* ---------- ladenie dizajnu (dizajn.html) ---------- */
.ukazka { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; margin: 1rem 0; font-family: var(--font-sans); }
.ukazka h3 { margin-top: 0; }
.vzorky { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.vzorka { width: 4.6rem; text-align: center; font-size: .75rem; color: var(--ink-soft); }
.vzorka span { display: block; height: 2.6rem; border-radius: 12px; border: 1px solid var(--line); margin-bottom: .2rem; }
.mriezka-3, .mriezka-2 { display: grid; gap: 1rem; }
@media (min-width: 60rem) { .mriezka-2 { grid-template-columns: repeat(2, 1fr); } .mriezka-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- tlač (A4) ---------- */
#tlacHlavicka, #tlacPata { display: none; }
/* ---------- tlač: formát A5 (brožúra), čiernobielo, čo najmenej strán ---------- */
@page { size: A5; margin: 11mm 11mm 14mm; }
.tlac-priebeh, .tlac-navod { }
.tlac-priebeh { display: none; }
.tlac-skupina-pozn { flex-basis: 100%; margin: -.2rem 0 .2rem 1.9rem; font-size: .95rem; color: var(--ink-soft); max-width: 36rem; }
.tlac-navod { flex-basis: 100%; margin: .6rem 0 0; font-size: .95rem; color: var(--ink-soft); max-width: 36rem; }
@media print {
  * { box-shadow: none !important; text-shadow: none !important; -webkit-print-color-adjust: economy; print-color-adjust: economy; }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 10pt; line-height: 1.28; display: block; }
  .hlavicka, .pata, .shrnutie, .rozbal, .nastroje, .lista, .ilu, .pata-spytovania, .usmernenie, .tlac-navod, .tlac-skupina-pozn { display: none !important; }
  .obal, .obal--text { max-width: none; padding: 0; margin: 0; }
  #tlacHlavicka { display: block; margin: 0 0 3mm; padding: 0 0 2mm; border-bottom: .5pt solid #000; }
  #tlacHlavicka .tlac-nadpis { font-weight: 700; font-family: var(--font-head); font-size: 14pt; margin: 0 0 1mm; line-height: 1.15; }
  #tlacHlavicka p { margin: 0; font-size: 9pt; line-height: 1.25; }
  .stitok { margin: 3.5mm 0 1mm; font-size: 10.5pt; font-weight: 700; letter-spacing: 0; text-transform: none; color: #000; break-after: avoid; page-break-after: avoid; }
  .modlitba { background: none !important; border: 0; border-radius: 0; padding: 0; margin: 0 0 1mm; font-size: 10pt; line-height: 1.28; color: #000; break-inside: avoid; }
  .modlitba p { margin: 0 0 1.5mm; }
  .blok { margin: 3mm 0 0; border: 0; border-radius: 0; background: none; overflow: visible; }
  .blok__hlavicka { display: block; padding: 0; margin: 0 0 .8mm; background: none !important; color: #000 !important; break-after: avoid; page-break-after: avoid; }
  .blok__hlavicka > div { display: inline; }
  .blok__hlavicka h2 { display: inline; font-size: 11.5pt; font-weight: 700; margin: 0; line-height: 1.2; color: #000; }
  .blok__cislo { display: inline; font-family: inherit; font-size: 11.5pt; line-height: 1.2; min-width: 0; font-weight: 700; margin-right: 1.2mm; color: #000; }
  .blok__podnadpis { display: none; }
  .blok__telo { padding: 0; }
  .blok__skupina { margin: 1.6mm 0 .2mm; max-width: none; font-family: inherit; font-size: 9.5pt; font-weight: 700; font-style: italic; color: #000; break-after: avoid; page-break-after: avoid; }
  .blok__skupina:first-child { margin-top: .6mm; }
  .vety { max-width: none; font-size: 10pt; }
  .vety li { font-size: 10pt; line-height: 1.28; padding: .45mm 0 .45mm 3.6mm; border: 0; break-inside: avoid; page-break-inside: avoid; }
  .vety li::before { top: calc(.45mm + .55em); width: 1.1mm; height: 1.1mm; background: #000 !important; border-radius: 50%; transform: none; }
  .zaver { background: none; color: #000; border: 0; padding: 0; font-family: inherit; font-size: 10pt; font-weight: 400; margin: 3mm 0 0; break-inside: avoid; }
  .predsavzatie { font-size: 10pt; font-weight: 400; margin: 0 0 1.2mm; break-inside: avoid; }
  .predsavzatie:first-child { margin-top: 0; }
  .kajucnik { font-weight: 700; color: #000; }
  .tlac-priebeh { display: none; }
  body.tlac-priebeh-on .tlac-priebeh { display: block; margin-top: 4mm; }
  .tlac-krok { margin: 0 0 1.6mm; font-size: 10pt; line-height: 1.3; break-inside: avoid; page-break-inside: avoid; }
  #tlacPata { display: block; position: fixed; bottom: -9mm; left: 0; right: 0; text-align: center; font-size: 8pt; color: #000; }
}
}

.clanok .rozbal ol, .clanok ul, .clanok ol { padding-left: 1.3rem; }
.rod-prepinac { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .95rem; color: var(--ink-soft, inherit); }
.rod-prepinac button { font: inherit; padding: .25rem .8rem; border: 1.5px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent); cursor: pointer; }
.rod-prepinac button[aria-pressed="true"] { background: var(--accent); color: #fff; }
@media print { .rod-prepinac { display: none; } }

.formular { display: grid; gap: .5rem; margin: 1.5rem 0; }
.formular label { font-weight: 600; margin-top: .75rem; }
.formular input[type="text"], .formular textarea { font: inherit; padding: .7rem .9rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); width: 100%; box-sizing: border-box; }
.formular input[type="text"]:focus, .formular textarea:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
.formular .tlacidlo { justify-self: end; margin-top: 1rem; }
#chyba { scroll-margin-top: 5rem; }
@media (max-width: 600px) { .formular .tlacidlo { justify-self: stretch; } }
.formular__poznamka { font-size: .95rem; color: var(--ink-soft); margin: .25rem 0 0; }
.pasca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.chyba-odkaz { font-size: .95rem; margin: 0 0 1.5rem; }
.chyba-odkaz a { color: var(--ink-soft); }
@media print { .chyba-odkaz { display: none !important; } }

.blok__skupina { font-family: var(--font-head); font-size: 1rem; font-weight: 700; margin: .85rem 0 .05rem; color: var(--ink); max-width: 36em; }
.blok__skupina:first-child { margin-top: .45rem; }

.kajucnik { font-weight: 700; color: var(--accent); }
.nastroje--koniec { margin: 2rem 0 1rem; }

/* Slovo o odpustení: úvod je oddelený od veršov */
.slovo__uvod { margin: 0 0 1.25rem; padding-bottom: 1.1rem; border-bottom: 1px solid color-mix(in srgb, var(--gold) 70%, transparent); }
.rozbal blockquote.slovo__verš { margin: 1rem 0; padding: .1rem 0 .1rem 1rem; border-left: 4px solid var(--gold); }
.slovo__verš .ref { display: block; font-style: normal; font-size: .85rem; margin-top: .3rem; white-space: normal; }

.clanok__podnadpis { margin: -.25rem 0 1.1rem; font-size: 1.15rem; font-weight: 600; color: var(--ink-soft); }

/* ---------- články: sekcie s ikonou, časová os, rámčeky, karty ---------- */
.clanok { --kruh: 3rem; }
.sekcia { margin: 2.25rem 0 0; }
.sekcia__hlava { display: flex; align-items: center; gap: .85rem; margin-bottom: .6rem; }
.sekcia__hlava h2 { margin: 0; }
.sekcia__ikona { position: relative; flex: 0 0 var(--kruh); width: var(--kruh); height: var(--kruh); display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.sekcia__ikona svg { width: 1.65rem; height: 1.65rem; }
.sekcia__cislo { position: absolute; top: -.4rem; right: -.45rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--gold-ink); font: 800 .85rem/1 var(--font-head); border: 2px solid var(--bg); }
.sekcia__telo > p:first-child { margin-top: 0; }
.sekcia__telo > :last-child { margin-bottom: 0; }

.casova-os { position: relative; }
.casova-os .sekcia { position: relative; padding-bottom: .4rem; }
.casova-os .sekcia:first-child { margin-top: 2.25rem; }
.casova-os .sekcia__ikona { position: absolute; left: 0; top: 0; z-index: 1; }
.casova-os .sekcia__hlava { min-height: var(--kruh); padding-left: calc(var(--kruh) + .95rem); }
.casova-os .sekcia__telo { padding-left: calc(var(--kruh) + .95rem); }
.casova-os .sekcia:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--kruh) / 2 - 2px); top: calc(var(--kruh) - .2rem); bottom: -2.4rem; width: 4px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 30%, white); }

.callout { display: flex; align-items: flex-start; gap: .9rem; margin: 1.1rem 0; padding: 1rem 1.15rem; border: 2px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); }
.callout__ikona { flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; }
.callout__ikona svg { width: 1.45rem; height: 1.45rem; }
.callout__telo { flex: 1; min-width: 0; }
.callout__telo p { margin: 0 0 .6rem; color: var(--ink); line-height: 1.6; }
.callout__telo p:last-child { margin-bottom: 0; }
.callout--fialovy { background: var(--accent-soft); border-color: var(--accent); }
.callout--fialovy .callout__ikona { background: var(--accent); color: var(--accent-ink); }
/* jemná zlatá: upozornenia (zlty) a kľúčový rámček článku (zlaty) */
.callout--zlty { background: color-mix(in srgb, var(--gold) 10%, white); border-color: color-mix(in srgb, var(--gold) 75%, white); }
.callout--zlty .callout__ikona { background: var(--gold); color: var(--gold-ink); }
.callout--zlaty { background: var(--gold-soft); border-color: var(--gold); }
.callout--zlaty .callout__ikona { background: var(--gold); color: var(--gold-ink); }
.callout--neutralny { background: var(--surface); border-color: var(--line); }
.callout--neutralny .callout__ikona { background: var(--ink-soft); color: #fff; }

.karty-clanok { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.karta-clanok { display: flex; gap: .85rem; align-items: flex-start; padding: 1.05rem 1.1rem; background: var(--surface); border: 2px solid var(--accent-soft); border-radius: var(--radius-lg); box-shadow: var(--tien-karta, none); }
.karta-clanok h3, .karta-clanok h2 { margin: 0 0 .3rem; font-size: 1.08rem; line-height: 1.3; }
.karta-clanok p { margin: 0; font-size: .98rem; line-height: 1.55; }
.ikona-kruh { flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--third); }
.ikona-kruh svg { width: 1.45rem; height: 1.45rem; }
.ikona-kruh--mala { flex-basis: 2.3rem; width: 2.3rem; height: 2.3rem; }
.ikona-kruh--mala svg { width: 1.3rem; height: 1.3rem; }
.zoznam-ikony { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .7rem; }
.zoznam-ikony li { display: flex; align-items: center; gap: .85rem; line-height: 1.5; }
.clanok__cta { margin: 1.4rem 0 0; display: flex; justify-content: flex-end; }

@media (max-width: 600px) {
  .clanok { --kruh: 2.6rem; }
  .sekcia__ikona svg { width: 1.4rem; height: 1.4rem; }
  .callout { padding: .9rem; gap: .75rem; }
  .callout__ikona { flex-basis: 2.3rem; width: 2.3rem; height: 2.3rem; }
  .clanok__cta .tlacidlo { width: 100%; }
}
@media print {
  .clanok, .clanok * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sekcia__hlava, .callout, .karta-clanok { break-inside: avoid; page-break-inside: avoid; }
  .sekcia__hlava { break-after: avoid; page-break-after: avoid; }
  .callout, .karta-clanok { border-width: 1.5px; }
  .clanok__cta .tlacidlo { border: 2px solid var(--accent); }
}
/* nepárna posledná karta sa nikdy neroztiahne na celú šírku */
.karty-clanok--odkazy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.karty-clanok--odkazy.karty-clanok--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
a.karta-clanok { color: inherit; text-decoration: none; transition: transform .12s, border-color .12s; }
a.karta-clanok:hover { transform: translateY(-1px); border-color: var(--accent); }
a.karta-clanok:hover h3, a.karta-clanok:hover h2 { text-decoration: underline; }
a.karta-clanok:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) { .karty-clanok--odkazy, .karty-clanok--odkazy.karty-clanok--3 { grid-template-columns: 1fr; } }
.sekcia:has(.karty-clanok--odkazy) + p { margin-top: 1.6rem; }

/* ---------- infografiky: Ťažký a ľahký hriech ---------- */
.podmienky { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: .6rem; align-items: stretch; margin: 1.1rem 0; }
.podmienka { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-content: start; padding: 1rem 1.05rem; background: var(--surface); border: 2px solid var(--accent-soft); border-radius: var(--radius-lg); box-shadow: var(--tien-karta, none); }
.podmienka .ikona-kruh { grid-row: 1; }
.podmienka h3 { margin: 0; align-self: center; font-size: 1.08rem; line-height: 1.3; }
.podmienka p { grid-column: 1 / -1; margin: .6rem 0 0; font-size: .98rem; line-height: 1.55; }
.podmienky__znak { align-self: center; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 800 1.3rem/1 var(--font-head); }
.podmienky__vysledok { grid-column: 1 / -1; margin: .2rem 0 0; padding: .8rem 1rem; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); text-align: center; font: 800 1.1rem/1.3 var(--font-head); }
.stitky { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.stitky li { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem 1rem .35rem .4rem; background: var(--surface); border: 2px solid var(--accent-soft); border-radius: var(--radius-pill); font-weight: 600; line-height: 1.3; }
.porovnanie { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.por-stlpec { display: grid; grid-row: span var(--n); grid-template-rows: subgrid; row-gap: 0; border: 2px solid var(--accent); border-radius: var(--radius-lg); overflow: hidden; }
.por-stlpec dl { display: contents; }
.por-stlpec h3 { margin: 0; padding: .8rem 1.1rem; font-size: 1.1rem; }
.por-stlpec dt { margin: 0; padding: .85rem 1.1rem 0; font-size: .85rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.por-stlpec dd { margin: 0; padding: .1rem 1.1rem .85rem; line-height: 1.5; }
.por-stlpec--tazky { background: var(--accent-soft); }
.por-stlpec--tazky h3 { background: var(--accent); color: var(--accent-ink); }
.por-stlpec--lahky { background: var(--gold-soft); border-color: var(--gold); }
.por-stlpec--lahky h3 { background: var(--gold); color: var(--gold-ink); }
.por-stlpec dt, .por-stlpec dd { color: var(--ink); }
@media (max-width: 600px) {
  .podmienky { grid-template-columns: 1fr; }
  .podmienky__znak { justify-self: center; }
  .porovnanie { grid-template-columns: 1fr; }
  .por-stlpec { grid-row: auto; grid-template-rows: none; }
  .por-stlpec dl { display: block; }
}
@media print { .podmienka, .por-stlpec, .stitky li { break-inside: avoid; page-break-inside: avoid; } }

/* ---------- Ako prebieha spoveď: prepínač obradu a kroky ---------- */
.obrad-prepinac { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1.1rem 0 .4rem; padding: .35rem; background: var(--accent-soft); border-radius: var(--radius-pill); }
.obrad-prepinac button { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.5rem; padding: .5rem 1rem; border: 2px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--accent); font: 800 1.05rem/1.2 var(--font-sans); cursor: pointer; transition: background .12s, color .12s; }
.obrad-prepinac button:hover { background: rgb(255 255 255 / .6); }
.obrad-prepinac button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.obrad-prepinac button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.obrad-prepinac__ikona svg { width: 1.7rem; height: 1.7rem; display: block; }
.priebeh-kroky { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .9rem; }
.priebeh-krok { display: flex; gap: .9rem; align-items: flex-start; padding: 1.05rem 1.1rem; background: var(--surface); border: 2px solid var(--accent-soft); border-radius: var(--radius-lg); box-shadow: var(--tien-karta, none); }
.priebeh-krok__cislo { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 800 1.1rem/1 var(--font-head); }
.priebeh-krok h3 { margin: .2rem 0 .35rem; font-size: 1.1rem; line-height: 1.3; }
.priebeh-krok p { margin: 0; line-height: 1.6; }
@media (max-width: 600px) {
  .obrad-prepinac { border-radius: var(--radius-lg); }
  .obrad-prepinac button { font-size: 1rem; padding: .5rem .5rem; gap: .4rem; flex-direction: column; }
  .priebeh-krok { padding: .9rem; gap: .7rem; }
}
@media print { .obrad-prepinac { display: none; } .priebeh-krok { break-inside: avoid; page-break-inside: avoid; } }


/* články: zlaté bodky v obyčajných zoznamoch */
.clanok ul:not(.zoznam-ikony):not(.stitky):not(.zoznam-clankov) li::marker, .clanok ol li::marker { color: var(--gold); }

/* ---------- tlač: vlastné stránkovanie (tlac.js): strany A5, rozloženie na A4 naležato alebo A5 ---------- */
.tlac-fieldset { }
.tlac-rezim { flex-basis: 100%; margin: .8rem 0 0; padding: 0; border: 0; display: grid; gap: .35rem; }
.tlac-rezim legend { padding: 0; font-weight: 700; margin-bottom: .25rem; }
.tlac-rezim label { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ink-soft); }
.tlac-rezim label span { font-weight: 400; }
.tlac-rezim input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); }

/* ovládanie tlače na konci spytovania: rozbaľovacia časť v štýle poznámok s pomocou */
.rozbal--tlac > summary::before { -webkit-mask: url(../assets/clanky-ikony/printer.svg) center / contain no-repeat; mask: url(../assets/clanky-ikony/printer.svg) center / contain no-repeat; }
.rozbal--tlac { margin: 2rem 0 1rem; }
.tlac-ovladanie { display: grid; gap: .6rem; justify-items: start; padding-top: .25rem; }
.tlac-ovladanie .skupina-volba { font-size: 1rem; }
.tlac-ovladanie .tlac-rezim { margin: .2rem 0 0; }
.tlac-ovladanie .tlac-navod { margin: .2rem 0 0; }
.tlac-ovladanie .tlacidlo { margin-top: .4rem; }
@media (max-width: 600px) { .tlac-ovladanie .tlacidlo { width: 100%; } }