/*
 * Pravne stranice (/privatnost, /uvjeti-koristenja, /kolacici, /pravne-informacije) u svijetlom
 * stilu naslovne (nalog 45). Osnova css/home.css, boje branda samo iz css/brand.css.
 * Dokumentarni izgled: čitljiv stupac do oko 820 px, jasni H2 i H3, sadržaj sa strane od 1100 px,
 * tablice bez kartica (na mobitelu se vodoravno pomiču unutar sebe, stranica ne).
 */
.lg-page { position: relative; padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 9vw, 112px); }
.lg-page::before { content: ''; position: absolute; inset: 0 0 auto; height: 360px; z-index: -1; pointer-events: none; background: radial-gradient(50% 80% at 85% 0%, var(--hm-glow-to), transparent 70%), radial-gradient(45% 70% at 10% 0%, color-mix(in srgb, var(--cj-brand-from) 10%, transparent), transparent 70%); }
.lg-grid { display: block; }
.lg-in { max-width: 820px; min-width: 0; }
.lg .hm-eyebrow { display: block; margin-bottom: 14px; }
.lg h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
.lg-lead { margin-top: 16px !important; color: var(--hm-ink-2); font-size: 19px !important; line-height: 1.55 !important; }
.lg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 18px !important; padding-bottom: 28px; border-bottom: 1px solid var(--hm-line); color: var(--hm-ink-3) !important; font-size: 15px !important; }
.lg-draft { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--cj-brand-soft); color: var(--cj-brand-ink); font-size: 13px; font-weight: 600; }
.lg h2 { margin-top: 48px; font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; color: var(--hm-ink); scroll-margin-top: 96px; }
.lg h3 { margin-top: 28px; font-size: 18px; line-height: 1.35; font-weight: 650; color: var(--hm-ink); }
.lg-in p, .lg-in li { margin-top: 12px; color: var(--hm-ink-2); font-size: 17px; line-height: 1.7; overflow-wrap: anywhere; }
.lg-in ul, .lg-in ol { margin-top: 12px; padding-left: 22px; }
.lg-in ul { list-style: disc; }
.lg-in ol { list-style: decimal; }
.lg-in li { margin-top: 6px; }
.lg-in li::marker { color: var(--cj-brand-ink); }
.lg-in strong { color: var(--hm-ink); font-weight: 650; }
.lg-in a { color: var(--cj-brand-ink); text-decoration: underline; text-underline-offset: 3px; border-radius: 3px; }
.lg-in a:focus-visible, .lg-toc a:focus-visible { outline: 2px solid var(--cj-brand-ink); outline-offset: 2px; }

/* Uvjeti: „Najvažnije ukratko“ na vrhu (jasno i lako uočljivo), bez dekoracija. */
.lg-summary { margin-top: 32px; padding: 20px 24px; border-left: 3px solid var(--cj-brand-ink); background: var(--cj-brand-soft); border-radius: 0 12px 12px 0; }
.lg-summary > p:first-child { margin-top: 0; color: var(--hm-ink); }
.lg-summary ul { margin-top: 8px; }

/* Tablice (svrhe obrade, rokovi, kolačići, podaci o pružatelju) */
.lg-table { margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lg-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.lg-table th, .lg-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hm-line); text-align: left; vertical-align: top; color: var(--hm-ink-2); }
.lg-table th { color: var(--hm-ink); font-weight: 650; white-space: nowrap; }
.lg-table td:first-child { color: var(--hm-ink); }
/* Nazivi kolačića i ključeva se ne lome usred riječi; tablica se na mobitelu pomiče unutar sebe, uz sjenu na rubu. */
.lg-table td:first-child code { white-space: nowrap; }
.lg-table { background: linear-gradient(to right, var(--hm-bg, #fff) 30%, transparent) left / 24px 100% no-repeat local, linear-gradient(to left, var(--hm-bg, #fff) 30%, transparent) right / 24px 100% no-repeat local, radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--hm-ink) 14%, transparent), transparent) right / 12px 100% no-repeat scroll; }
.lg-table code, .lg-in code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; overflow-wrap: anywhere; }
.lg-table.is-wide table { min-width: 640px; }
/* Nalog 85 (FRONTEND-04): široka tablica se pomiče tipkovnicom (tabindex na omotaču). */
.lg-table:focus-visible { outline: 2px solid var(--cj-brand-ink); outline-offset: 2px; }
.lg-facts { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 0; margin-top: 16px; border-top: 1px solid var(--hm-line); }
.lg-facts dt, .lg-facts dd { margin: 0; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hm-line); font-size: 17px; line-height: 1.5; }
.lg-facts dt { color: var(--hm-ink-3); }
.lg-facts dd { color: var(--hm-ink); overflow-wrap: anywhere; }
@media (max-width: 559px) {
    .lg-facts { grid-template-columns: minmax(0, 1fr); }
    .lg-facts dt { padding-bottom: 0; border-bottom: 0; font-size: 14px; }
}

/* Sadržaj dokumenta: na računalu ljepljiv stupac desno, na manjim ekranima se ne prikazuje (dokument ima jasne naslove) */
.lg-toc { display: none; }
@media (min-width: 1100px) {
    .lg-grid.has-toc { display: grid; grid-template-columns: minmax(0, 820px) 240px; justify-content: space-between; gap: 64px; }
    .lg-toc { display: block; position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; padding-left: 20px; border-left: 1px solid var(--hm-line); font-size: 14px; }
    .lg-toc-h { color: var(--hm-ink); font-weight: 650; }
    .lg-toc ol { margin-top: 10px; list-style: none; padding: 0; }
    .lg-toc li { margin-top: 6px; line-height: 1.4; }
    .lg-toc a { color: var(--hm-ink-3); text-decoration: none; border-radius: 3px; }
    .lg-toc a:hover { color: var(--cj-brand-ink); text-decoration: underline; text-underline-offset: 3px; }
}