/* =============================================================================
   PrintPont — NYOMDAI ÚTMUTATÓK (/utmutatok, /utmutatok/<slug>).
   Oldalankénti stíluslap (a nézet @section Fej-e tölti), a far360-tokenekre épül.
   A hosszú szöveg alapját a jogi.css `.f-jogi-szoveg`-je adja; itt a kártyák, a
   kétoszlopos keret, az ábrák, a táblázatok és a GYIK.
   ============================================================================= */

/* --- Lista ---------------------------------------------------------------- */
.pp-ut-kategoria { margin-bottom: 2rem; }
.pp-ut-kategoria h2 { margin: 0 0 0.9rem; font-size: 1.35rem; letter-spacing: -0.02em; }
.pp-ut-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.pp-ut-kartya { position: relative; display: flex; flex-direction: column; gap: 0.55rem; }
.pp-ut-kartya h3 { margin: 0; font-size: 1.1rem; letter-spacing: -0.02em; }
.pp-ut-kartya h3 a { color: var(--f-ink); text-decoration: none; }
.pp-ut-kartya h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* az egész kártya kattintható */
.pp-ut-kartya h3 a:hover, .pp-ut-kartya h3 a:focus-visible { color: var(--f-primary); }
.pp-ut-kartya p { margin: 0; color: var(--f-ink-soft); }
.pp-ut-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; color: var(--f-grey); font-size: 0.875rem; }
.pp-ut-meta svg { width: 1em; height: 1em; flex: none; }
.pp-ut-kartya .pp-ut-meta { margin-top: auto; }
.pp-ut-segitseg { margin-top: 1rem; }
.pp-ut-segitseg h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.pp-ut-segitseg p { margin: 0; }

/* --- Cikk: kétoszlopos keret, mobilon egy oszlop ------------------------------ */
.pp-ut-fej p.pp-ut-meta { margin-top: 0.75rem; }
.pp-ut-keret { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.pp-ut-oldal { display: flex; flex-direction: column; gap: 1rem; }
.pp-ut-toc h2, .pp-ut-cta h2 { margin: 0 0 0.6rem; font-size: 1rem; letter-spacing: -0.015em; }
.pp-ut-toc ol { margin: 0; padding: 0; list-style: none; } /* a lépéses útmutatók fejléceiben már van sorszám */
.pp-ut-toc li { margin-bottom: 0.35rem; }
.pp-ut-cta p { margin: 0 0 0.85rem; color: var(--f-ink-soft); font-size: 0.95rem; }
@media (min-width: 1000px) {
    .pp-ut-keret { grid-template-columns: 280px minmax(0, 1fr); gap: 2.25rem; }
    .pp-ut-oldal { position: sticky; top: 6.5rem; }
}

/* --- A Markdown-törzs ---------------------------------------------------------- */
.pp-ut-torzs { min-width: 0; max-width: 78ch; }
.pp-ut-torzs h2 { scroll-margin-top: 6.5rem; }
.pp-ut-torzs ol { margin: 0 0 0.9rem 1.25rem; padding: 0; }
.pp-ut-torzs blockquote { margin: 0 0 1rem; padding: 0.75rem 1rem; border-left: 4px solid var(--f-primary); background: var(--f-primary-soft); border-radius: 0 var(--f-radius-md) var(--f-radius-md) 0; }
.pp-ut-torzs blockquote p:last-child { margin-bottom: 0; }
.pp-ut-torzs a { color: var(--f-primary); text-decoration: underline; text-underline-offset: 2px; }
.pp-ut-torzs table { display: block; max-width: 100%; margin: 0 0 1.1rem; overflow-x: auto; border-collapse: collapse; font-size: 0.95rem; }
.pp-ut-torzs th, .pp-ut-torzs td { padding: 0.5rem 0.75rem; border: 1px solid var(--f-border); text-align: left; vertical-align: top; }
.pp-ut-torzs th { background: var(--f-light); font-weight: 600; }

/* Ábra (önálló kép + a rá következő dőlt felirat) */
.pp-ut-torzs p.pp-ut-abra { margin: 1.25rem 0 0.35rem; text-align: center; }
.pp-ut-torzs p.pp-ut-abra img { max-width: 100%; height: auto; background: var(--f-white); border: 1px solid var(--f-border); border-radius: var(--f-radius-md); }
.pp-ut-torzs p.pp-ut-felirat { margin: 0 0 1.25rem; text-align: center; color: var(--f-grey); font-size: 0.9rem; }

/* --- GYIK, kapcsolódó termékek, további útmutatók -------------------------------- */
.pp-ut-gyik, .pp-ut-termekek, .pp-ut-tovabbi { margin-top: 2.25rem; scroll-margin-top: 6.5rem; }
.pp-ut-gyik details { margin-bottom: 0.6rem; background: var(--f-white); border: 1px solid var(--f-border); border-radius: var(--f-radius-md); }
.pp-ut-gyik summary { padding: 0.8rem 1rem; font-weight: 600; cursor: pointer; }
.pp-ut-gyik summary:focus-visible { outline: 2px solid var(--f-primary); outline-offset: 2px; }
.pp-ut-gyik details[open] summary { border-bottom: 1px solid var(--f-border); }
.pp-ut-gyik details p { margin: 0; padding: 0.8rem 1rem; }
.pp-ut-chipek { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.pp-ut-chipek li { margin: 0; }
.pp-ut-chipek a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; background: var(--f-white); border: 1px solid var(--f-border); border-radius: 999px; color: var(--f-ink); text-decoration: none; }
.pp-ut-chipek a:hover, .pp-ut-chipek a:focus-visible { border-color: var(--f-primary); color: var(--f-primary); }
.pp-ut-chipek svg { width: 1em; height: 1em; }