/* =========================================================================
   content.css – izgled teksta objava
   Isti stil koristi i javna stranica (.prose) i CMS uređivač (TinyMCE),
   pa ono što urednik vidi dok piše izgleda kao na stranici.
   ========================================================================= */

.prose {
  --p-ink: #0D1B33;
  --p-soft: #4A5870;
  --p-navy: var(--navy, #001B4D);
  --p-gold: var(--gold, #F5B72E);
  --p-mist: #EEF2F8;
  --p-line: #D9E0EB;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 1.1875rem;
  line-height: 1.72;
  color: var(--p-ink);
  font-optical-sizing: auto;
  overflow-wrap: break-word;
}
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }

.prose p { margin: 0 0 1.15em; }
.prose a { color: var(--p-navy); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--p-navy) 35%, transparent); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
.prose a:hover { text-decoration-color: var(--p-navy); }
.prose strong, .prose b { font-weight: 650; }

.prose h2, .prose h3, .prose h4 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  color: var(--p-navy);
  line-height: 1.18;
  letter-spacing: -0.015em;
  scroll-margin-top: 96px;
  text-wrap: balance;
}
.prose h2 { font-size: 1.85rem; font-weight: 700; margin: 2.1em 0 .6em; }
.prose h3 { font-size: 1.3rem; font-weight: 650; margin: 1.7em 0 .5em; }
.prose h4 { font-size: 1.08rem; font-weight: 650; margin: 1.4em 0 .4em; }
.prose h2 + h3 { margin-top: .6em; }

/* Uvodni odlomak */
.prose p.lead { font-size: 1.28em; line-height: 1.55; color: var(--p-soft); }
.prose h2 + p.lead { margin-top: -.1em; }

/* Inicijal (veliko prvo slovo) */
.prose p.dropcap::first-letter {
  float: left;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: 3.6em;
  line-height: .84;
  margin: .08em .1em 0 0;
  color: var(--p-navy);
}

/* Napomena i sitni tekst */
.prose p.note { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: .82em; line-height: 1.55; color: var(--p-soft); }
.prose p.eyebrow {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: .8em; font-weight: 650; color: var(--p-soft);
  margin-bottom: .4em;
}
.prose p.eyebrow + h2, .prose p.eyebrow + h3 { margin-top: 0; }

/* Liste */
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.prose li { margin: .35em 0; padding-left: .2em; }
.prose li::marker { color: var(--p-navy); }

.prose ul.check-list { list-style: none; padding-left: 0; }
.prose ul.check-list li { position: relative; padding-left: 2em; }
.prose ul.check-list li::before,
.prose ul.check-grid li::before {
  content: "";
  position: absolute; left: 0; top: .32em;
  width: 1.2em; height: 1.2em; border-radius: 50%;
  background: var(--p-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.7 11 12 5.4' fill='none' stroke='%23F5B72E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.prose ul.check-grid {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6em 1.4em;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: .9em; line-height: 1.4;
}
.prose ul.check-grid li { position: relative; margin: 0; padding: .15em 0 .15em 2em; }
.prose ul.check-grid li::before { top: .12em; }

.prose ul.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5em; }
.prose ul.chips li {
  margin: 0; padding: .35em .85em; border-radius: 999px;
  background: var(--p-mist); color: var(--p-navy);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: .8em; font-weight: 600;
}

/* Koraci (numerirani postupak) */
.prose ol.steps { list-style: none; padding: 0; counter-reset: step; }
.prose ol.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 1.3em 3.4em; margin: 0;
  border-left: 2px solid var(--p-line); margin-left: 1.05em;
}
.prose ol.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.prose ol.steps > li::before {
  content: counter(step);
  position: absolute; left: -1.1em; top: -.1em;
  width: 2.1em; height: 2.1em; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--p-navy); color: #fff;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: .95em;
}
.prose ol.steps > li > h3, .prose ol.steps > li > h4 { margin: 0 0 .25em; font-size: 1.12rem; }
.prose ol.steps > li > p { margin-bottom: 0; }

/* Citat */
.prose blockquote {
  margin: 1.8em 0; padding: .2em 0 .2em 1.2em;
  border-left: 4px solid var(--p-gold);
  font-size: 1.2em; line-height: 1.5; font-style: italic; color: var(--p-navy);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Info okvir */
.prose .callout {
  margin: 1.8em 0; padding: 1.4em 1.6em;
  background: var(--p-mist); border-radius: 16px;
  border-left: 4px solid var(--p-navy);
}
.prose .callout > :first-child { margin-top: 0; }
.prose .callout > :last-child { margin-bottom: 0; }
.prose .callout h2 { font-size: 1.45rem; }
.prose .callout-dark { background: var(--p-navy); color: #E6ECF7; border-left-color: var(--p-gold); }
.prose .callout-dark h2, .prose .callout-dark h3, .prose .callout-dark h4, .prose .callout-dark strong, .prose .callout-dark b { color: #fff; }
.prose .callout-dark a:not(.btn) { color: #fff; }
.prose .callout-dark p.eyebrow, .prose .callout-dark p.note { color: #A9BCDD; }

/* Info lista (pojam: vrijednost) */
.prose dl.info-list {
  display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: .45em 1.2em;
  margin: 0 0 1.2em; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: .88em;
}
.prose dl.info-list dt { font-weight: 650; color: var(--p-navy); }
.prose dl.info-list dd { margin: 0; }
.prose .callout-dark dl.info-list dt { color: var(--p-gold); }

/* Kartice */
.prose .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1em; margin: 1.5em 0 2em; }
.prose .card-box {
  padding: 1.25em 1.35em; border: 1px solid var(--p-line); border-radius: 16px; background: #fff;
  font-size: .9em; line-height: 1.6;
}
.prose .card-box > :first-child { margin-top: 0; }
.prose .card-box > :last-child { margin-bottom: 0; }
.prose .card-box h3, .prose .card-box h4 { font-size: 1.1rem; margin: 0 0 .35em; }
.prose .card-box p.card-meta {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: .85em; font-weight: 600;
  color: var(--p-soft); margin-bottom: .6em;
}
.prose .card-box ul { padding-left: 1.1em; }

/* Statistika */
.prose .stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px;
  background: var(--p-line); border: 1px solid var(--p-line); border-radius: 16px; overflow: hidden;
  margin: 1.6em 0 2em;
}
.prose .stats > * {
  margin: 0; padding: 1em 1.1em; background: #fff;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: .85em; color: var(--p-soft);
}
.prose .stats b, .prose .stats strong { display: block; font-size: 1.9em; line-height: 1.1; font-weight: 750; color: var(--p-navy); letter-spacing: -.02em; }

/* Slika + tekst */
.prose .split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6em; align-items: center; margin: 2.2em 0; }
.prose .split > figure { margin: 0; }
.prose .split > figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.prose .split.split-reverse > figure { order: 2; }
.prose .split > div > :first-child { margin-top: 0; }
.prose .split > div > :last-child { margin-bottom: 0; }
.prose .split h2 { font-size: 1.5rem; }

/* FAQ */
.prose .faq { margin: 1em 0 2em; border-top: 1px solid var(--p-line); }
.prose details { border-bottom: 1px solid var(--p-line); }
.prose details > summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 1em; align-items: flex-start;
  padding: 1em 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 650; font-size: 1.02rem; color: var(--p-navy);
}
.prose details > summary::-webkit-details-marker { display: none; }
.prose details > summary::after {
  content: ""; flex: 0 0 auto; width: 1.35em; height: 1.35em; margin-top: .05em; border-radius: 50%;
  background: var(--p-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v8M4 8h8' stroke='%23001B4D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 60% no-repeat;
  transition: transform .2s ease;
}
.prose details[open] > summary::after { transform: rotate(45deg); }
.prose details > :not(summary) { padding: 0 2.2em 1em 0; font-size: .95em; }
.prose details > div > :last-child { margin-bottom: 0; }

/* Gumbi u tekstu */
.prose a.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .7em 1.3em; border-radius: 999px;
  background: var(--p-navy); color: #fff; text-decoration: none;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 650; font-size: .88rem; line-height: 1.2;
  border: 2px solid var(--p-navy);
}
.prose a.btn:hover { background: #0A2C6E; border-color: #0A2C6E; }
.prose a.btn.btn-outline { background: transparent; color: var(--p-navy); }
.prose a.btn.btn-outline:hover { background: var(--p-mist); }
.prose .callout-dark a.btn { background: var(--p-gold); border-color: var(--p-gold); color: var(--p-navy); }
.prose .callout-dark a.btn.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.prose p.btn-row { display: flex; flex-wrap: wrap; gap: .6em; }

/* Slike, figure, tablice */
.prose img { max-width: 100%; height: auto; border-radius: 14px; }
.prose figure { margin: 1.8em 0; }
.prose figure img { display: block; width: 100%; }
.prose figcaption { margin-top: .6em; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: .8rem; color: var(--p-soft); }
.prose hr { border: 0; height: 1px; background: var(--p-line); margin: 2.4em 0; }

.prose .table-wrap { overflow-x: auto; margin: 1.6em 0; }
.prose table { width: 100%; border-collapse: collapse; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: .88em; }
.prose th, .prose td { text-align: left; padding: .7em .9em; border-bottom: 1px solid var(--p-line); vertical-align: top; }
.prose thead th, .prose tr:first-child th { background: var(--p-navy); color: #fff; font-weight: 650; }
.prose tbody tr:nth-child(even) td { background: #F7F9FC; }
.prose td:last-child { white-space: nowrap; }

.prose iframe { max-width: 100%; border: 0; border-radius: 14px; }

@media (max-width: 720px) {
  .prose { font-size: 1.0625rem; }
  .prose h2 { font-size: 1.5rem; }
  .prose .split { grid-template-columns: 1fr; }
  .prose .split.split-reverse > figure { order: 0; }
  .prose td:last-child { white-space: normal; }
}