@layer djb.reset,djb.base,djb.theme,djb.elements,djb.classes,djb.global,djb.nodes,djb.custom;@layer djb.base{.djb-button:where(:not(.djb-button--plain)){display:inline-flex;align-items:center;justify-content:center;gap:.5em;cursor:pointer;text-decoration:none;border:0;font:inherit;line-height:1.2}.djb-button--sm{padding:.5em 1em;font-size:.875em}.djb-button--md{padding:.75em 1.5em}.djb-button--lg{padding:1em 2em;font-size:1.125em}
.djb-button__icon{flex-shrink:0;width:1em;height:1em}.djb-image{display:block;max-width:100%;height:auto}figure.djb-image{margin:0}figure.djb-image img{display:block;width:100%;height:auto}
figure.djb-image img,a.djb-image img{border-radius:inherit;aspect-ratio:inherit;object-fit:inherit;object-position:inherit}.djb-svg{max-width:100%}
.djb-svg:where(svg):not([height]),.djb-svg__svg:not([height]){height:auto}
.djb-svg--link{display:inline-block;line-height:0;color:inherit}
.djb-svg--link:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.djb-svg--empty{display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:8px;background:repeating-linear-gradient(45deg,#f3f1f7,#f3f1f7 10px,#eeebf4 10px,#eeebf4 20px);color:#9a93ad}}@layer djb.global{/* ==========================================================================
   PAGE: blog-koliko-kosta-sajt  →  Bricks Page settings → Custom CSS
   ========================================================================== */
/* TEMPLATE: blog-post  →  Bricks template (single) → Custom CSS, shared by every page of this type */
/* @template:start blog-post */
/* --- Single blog post (shared by every /blog/<slug>/ page) — hero + clip-revealed cover + sticky contents + one Rich Text body --- */

/* reading progress: thin green line across the very top */
.post-progress { position: fixed; inset: 0 0 auto; z-index: 60; height: 3px; pointer-events: none; }
.post-progress__bar { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary-line), var(--color-primary-hover)); transform: scaleX(var(--post-p, 0)); transform-origin: left; }

/* back button: takes over when the header slides away (same as project pages) */
.post-back { position: fixed; z-index: 45; top: 14px; left: 20px; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-dark); color: var(--color-white); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(-140%); pointer-events: none; transition: opacity .5s var(--ease-io), transform .6s var(--ease-io), background var(--transition-base); }
@media (min-width: 1024px) { .post-back { left: 5.55vw; } }
@media (min-width: 1622px) { .post-back { left: 90px; } }
.post-back--on { opacity: 1; transform: none; pointer-events: auto; }
.post-back:hover { background: var(--color-primary); color: var(--color-dark); }
.post-back__icon { font-size: 1.35rem; transform: rotate(180deg); }

/* --- Hero --- */
.post-hero { position: relative; isolation: isolate; overflow: hidden; padding-top: calc(var(--header-bar-height) + 40px); padding-bottom: clamp(28px, 3.4vw, 64px); }
@media (min-width: 1024px) { .post-hero { padding-top: calc(var(--header-bar-height) + 26.25px + 4.4vw); } }
.post-hero__wave { position: absolute; z-index: -1; right: -32vw; top: -58vw; width: 80vw; height: 80vw; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(3,226,156,.5) 0, rgba(3,226,156,.22) 30%, rgba(228,243,234,.35) 46%, transparent 64%); filter: blur(8px); pointer-events: none; animation: postWave 12s ease-in-out infinite alternate; }
@keyframes postWave { from { transform: rotate(0) scale(1); } to { transform: rotate(6deg) scale(1.08) translate(-2vw, 1vw); } }
@media (max-width: 767px) { .post-hero__wave { right: -70vw; top: -80vw; width: 150vw; height: 150vw; } }
.post-hero__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: clamp(15px, 13px + .26vw, 18px); }
.post-hero__crumb { color: var(--color-text-muted); transition: color var(--transition-base); }
.post-hero__crumb:hover { color: var(--color-text); }
.post-hero__crumb--cat { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-border); background: rgba(255,255,255,.7); color: var(--color-text); font-weight: 500; }
.post-hero__crumb--cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-dark); }
.post-hero__crumb--cat:hover { box-shadow: inset 0 0 0 1px var(--color-text); }
.post-hero__sep { color: var(--color-text-faint); }
.post-hero__title { max-width: 15em; margin-top: clamp(20px, 2.2vw, 40px); font-size: clamp(2.375rem, 5.2vw, 7rem); line-height: 1.1; letter-spacing: -.03em; }
@media (max-width: 600px) { .post-hero__title { font-size: clamp(2.1rem, 9.4vw, 2.6rem); line-height: 1.15; } }
.post-hero__row { display: grid; gap: 28px; margin-top: clamp(24px, 2.6vw, 48px); }
@media (min-width: 1024px) { .post-hero__row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 60px; } }
.post-hero__lede { max-width: 38rem; font-size: clamp(18px, 14px + .6vw, 26px); line-height: 1.45; color: var(--color-text-secondary); }
.post-hero__facts { display: flex; flex-wrap: wrap; gap: 0; }
.post-hero__fact { padding: 0 clamp(16px, 1.6vw, 28px); border-left: 1px solid var(--color-border); }
.post-hero__fact:first-child { padding-left: 0; border-left: 0; }
.post-hero__fact dt { font-size: 14px; color: var(--color-text-muted); }
.post-hero__fact dd { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: clamp(16px, 14px + .26vw, 19px); font-weight: 500; white-space: nowrap; }
.post-hero__avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-dark); color: var(--color-primary-hover); font-size: 13px; font-weight: 600; }
.post-hero__clock { font-size: 18px; color: var(--color-primary-dark); }
@media (max-width: 480px) { .post-hero__fact { padding: 0 14px; } .post-hero__fact dd { font-size: 15px; } }

/* --- Cover: opens from a smaller rounded window as it scrolls in (clip + scale) --- */
.post-cover { padding-bottom: clamp(36px, 4.6vw, 90px); }
.post-cover__frame { --cp: 1; position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); background: var(--color-gray); clip-path: inset(calc((1 - var(--cp)) * 10%) calc((1 - var(--cp)) * 7%) 0 round var(--radius-xl)); }
@media (min-width: 768px) { .post-cover__frame { aspect-ratio: 16 / 7.4; } }
.post-cover__image { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1 + (1 - var(--cp)) * .14)); }

/* --- Body: contents (sticky) | article | breathing room --- */
.post-body { padding-bottom: clamp(60px, 6vw, 120px); }
.post-body__grid { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1024px) {
  .post-body__grid { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 2.4fr); gap: clamp(40px, 4.2vw, 80px); align-items: start; }
  .post-aside { position: sticky; top: var(--post-sticky, 28px); display: grid; gap: 20px; transition: top .45s var(--ease-out); }
}
@media (min-width: 1280px) { .post-body__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 46rem) minmax(0, .45fr); } }
@media (min-width: 1700px) { .post-body__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 48rem) minmax(0, .55fr); } }
@media (max-width: 1023px) {
  .post-aside { display: contents; }
  .post-share { order: 3; }
}

/* contents card */
.post-toc { padding: clamp(18px, 1.6vw, 28px); border-radius: 24px; background: var(--color-white); box-shadow: 0 0 0 1px var(--color-border); }
@media (min-width: 1024px) { .post-toc { max-width: 24rem; } }
.post-toc__head, .post-toc__toggle { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; }
.post-toc__toggle { display: none; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.post-toc__kicker { font-size: clamp(18px, 14px + .52vw, 22px); line-height: 1.3; }
.post-toc__pct { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.post-toc__plus { align-self: center; font-size: 22px; transition: transform .5s var(--ease-out); }
.post-toc__line { position: relative; display: block; height: 2px; margin: 14px 0 6px; border-radius: 2px; background: var(--color-gray); overflow: hidden; }
.post-toc__line-fill { position: absolute; inset: 0; background: var(--color-primary-dark); transform: scaleX(var(--post-p, 0)); transform-origin: left; }
.post-toc__nav { position: relative; }
.post-toc__list { list-style: none; }
.post-toc__item { border-top: 1px solid var(--color-border); }
.post-toc__item:first-child { border-top: 0; }
.post-toc__link { position: relative; display: flex; gap: 12px; padding: 12px 0 12px 16px; font-size: clamp(15px, 13.5px + .2vw, 17px); line-height: 1.4; color: var(--color-text-muted); transition: color var(--transition-base); }
.post-toc__link:hover { color: var(--color-text); }
.post-toc__link.is-active { color: var(--color-text); font-weight: 500; }
.post-toc__num { flex: none; min-width: 1.6em; font-size: 13px; line-height: 1.75; font-variant-numeric: tabular-nums; color: var(--color-text-faint); transition: color var(--transition-base); }
.post-toc__link.is-active .post-toc__num { color: var(--color-primary-ink); }
.post-toc__marker { position: absolute; left: 0; top: 0; width: 3px; height: var(--mh, 0px); border-radius: 3px; background: var(--color-primary-dark); transform: translateY(var(--my, 0px)); opacity: 0; transition: transform .6s var(--ease-out), height .6s var(--ease-out), opacity .3s; }
.post-toc__marker.is-on { opacity: 1; }
@media (max-width: 1023px) {
  .post-toc__head { display: none; }
  .post-toc__toggle { display: flex; align-items: center; }
  .post-toc__line { margin-bottom: 0; }
  .post-toc__nav { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
  .post-toc__list { min-height: 0; overflow: hidden; }
  .post-toc--open .post-toc__nav { grid-template-rows: 1fr; }
  .post-toc--open .post-toc__plus { transform: rotate(45deg); }
  .post-toc--open .post-toc__list { padding-top: 8px; }
}

/* share */
.post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
@media (min-width: 1024px) { .post-share { padding-left: clamp(18px, 1.6vw, 28px); } }
.post-share__label { font-size: 14px; color: var(--color-text-muted); }
.post-share__links { display: flex; flex-wrap: wrap; gap: 8px; }
.post-share__link { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text); font-size: 19px; cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.post-share__link:hover, .post-share__link:focus-visible { background: var(--color-dark); box-shadow: inset 0 0 0 1px var(--color-dark); color: var(--color-white); transform: translateY(-3px); }
.post-share__icon { stroke-width: 1.6; }
.post-share__tip { position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 6px 12px; border-radius: var(--radius-pill); background: var(--color-dark); color: var(--color-white); font-size: 13px; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease-out); }
.post-share__copy.is-copied .post-share__tip { opacity: 1; transform: translate(-50%, 0); }

/* --- Article (one Bricks Rich Text element: everything below is styled by tag) --- */
.post-main { min-width: 0; }
.post-content { font-size: clamp(17px, 15px + .26vw, 20px); line-height: 1.65; color: var(--color-text-secondary); }
.post-content > * + * { margin-top: 1.1em; }
.post-content h2 { margin-top: clamp(48px, 4.4vw, 84px); margin-bottom: -.1em; font-size: clamp(1.625rem, .95rem + 1.15vw, 2.6rem); font-weight: 600; line-height: 1.22; letter-spacing: -.025em; color: var(--color-text); scroll-margin-top: 120px; }
.post-content h2:first-child { margin-top: 0; }
.post-content h3 { margin-top: 1.8em; margin-bottom: -.35em; font-size: clamp(1.2rem, .95rem + .45vw, 1.6rem); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--color-text); }
.post-content strong { font-weight: 600; color: var(--color-text); }
.post-content a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-primary-dark); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color var(--transition-base), text-decoration-color var(--transition-base); }
.post-content a:hover { color: var(--color-primary-ink); text-decoration-color: var(--color-primary-ink); }
.post-content ul { list-style: none; }
.post-content ul > li { position: relative; padding-left: 1.5em; }
.post-content ul > li::before { content: ""; position: absolute; left: .25em; top: .68em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-dark); }
.post-content ol { padding-left: 1.6em; list-style: decimal; }
.post-content ol > li { padding-left: .35em; }
.post-content ol > li::marker { color: var(--color-primary-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.post-content li + li { margin-top: .55em; }
.post-content blockquote { position: relative; margin-block: 2em; padding: .2em 0 .2em clamp(20px, 2vw, 34px); border-left: 3px solid var(--color-primary); }
.post-content blockquote p { font-family: var(--font-accent); font-style: italic; font-size: clamp(1.6rem, 1rem + 1.25vw, 2.6rem); line-height: 1.2; letter-spacing: -.01em; color: var(--color-text); }
.post-content code { padding: .12em .4em; border-radius: 6px; background: var(--color-gray); color: var(--color-text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84em; letter-spacing: 0; }
.post-content pre { position: relative; overflow-x: auto; padding: 46px clamp(18px, 1.6vw, 26px) clamp(18px, 1.6vw, 24px); border-radius: 18px; background: var(--color-dark); color: var(--color-text-on-dark); font-size: clamp(13px, 12px + .2vw, 15px); line-height: 1.65; }
.post-content pre::before { content: ""; position: absolute; left: 20px; top: 18px; width: 44px; height: 10px; background: radial-gradient(circle, var(--color-primary) 4px, transparent 5px) 0 0 / 15px 10px repeat-x; opacity: .7; }
.post-content pre code { padding: 0; background: none; color: inherit; font-size: inherit; white-space: pre; }
.post-content figure { margin-block: 2.2em; }
.post-content figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.post-content figcaption { display: flex; gap: 10px; margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--color-text-muted); }
.post-content figcaption::before { content: ""; flex: none; width: 18px; height: 2px; margin-top: .7em; background: var(--color-primary-dark); }
.post-content table { width: 100%; margin-block: 1.8em; border-collapse: separate; border-spacing: 0; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--color-border); font-size: clamp(14px, 13px + .2vw, 16px); line-height: 1.45; }
.post-content th, .post-content td { padding: 14px clamp(12px, 1.2vw, 20px); text-align: left; vertical-align: top; }
.post-content th { white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-muted); }
.post-content td { border-top: 1px solid var(--color-border); }
.post-content tbody tr { transition: background-color var(--transition-base); }
.post-content tbody tr:hover { background: rgba(3,226,156,.06); }
.post-content .post-callout { margin-block: 2em; padding: clamp(20px, 2vw, 32px) clamp(20px, 2.2vw, 36px); border-radius: 22px; background: var(--color-primary-mist); color: var(--color-text); }
.post-content .post-callout p { margin: 0; }
.post-content .post-callout a { text-decoration-color: var(--color-text); }
@media (max-width: 600px) { .post-content table { display: block; overflow-x: auto; } }

/* topics + author */
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(40px, 3.6vw, 64px); padding-top: 28px; border-top: 1px solid var(--color-border); }
.post-tags__label { margin-right: 6px; font-size: 14px; color: var(--color-text-muted); }
.post-tags__link { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-border); font-size: 15px; font-weight: 500; transition: box-shadow .2s, background-color .2s; }
.post-tags__link:hover { box-shadow: inset 0 0 0 1px var(--color-text); }
.post-author { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 22px; align-items: start; margin-top: 28px; padding: clamp(20px, 2.2vw, 36px); border-radius: 24px; background: var(--color-gray); }
@media (min-width: 768px) { .post-author { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } }
.post-author__avatar { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-dark); color: var(--color-white); font-size: 24px; font-weight: 600; }
.post-author__dot { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--color-gray); background: var(--color-primary); }
.post-author__name { font-size: clamp(18px, 15px + .4vw, 22px); font-weight: 600; color: var(--color-text); }
.post-author__bio { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--color-text-muted); }
.post-author__button { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 768px) { .post-author__button { grid-column: auto; } }

/* --- Related posts --- */
.post-related { padding-top: 0; }
.post-related__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: clamp(28px, 3vw, 56px); }
.post-related__title { font-size: var(--fs-h2); line-height: 1.2; }
.post-related__grid { display: grid; gap: 44px 20px; }
@media (min-width: 640px) { .post-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .post-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px calc(8.75px + 1.95vw); } }
@media (min-width: 1600px) { .post-related__grid { column-gap: 2.5rem; } }
@media (max-width: 639px) {
  .post-related__grid { grid-auto-flow: column; grid-auto-columns: 84%; gap: 16px; margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .post-related__grid::-webkit-scrollbar { display: none; }
  .post-related__grid > .blog-card { scroll-snap-align: start; }
}
@media (min-width: 640px) and (max-width: 1023px) { .post-related__grid > .blog-card:nth-child(3) { display: none; } }

/* --- Post card (same component as the archive grid; markup and rules identical to pages/blog.css) --- */
.blog-card { position: relative; display: flex; flex-direction: column; color: var(--color-text); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.blog-card[hidden] { display: none; }
.blog-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--color-gray); transition: box-shadow .5s; }
.blog-card:hover .blog-card__media, .blog-card:focus-visible .blog-card__media { box-shadow: 0 0 0 4px var(--color-primary); }
.blog-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.blog-card:hover .blog-card__image { transform: scale(1.05); }
.blog-card__body { display: flex; flex-direction: column; flex: 1; padding-top: clamp(16px, 1.4vw, 26px); }
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; color: var(--color-text-muted); }
@media (min-width: 1024px) { .blog-card__meta { font-size: max(14px, .94vw); } }
.blog-card__cat { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text); font-weight: 500; }
.blog-card__date { font-variant-numeric: tabular-nums; }
.blog-card__title { margin-top: clamp(12px, 1vw, 18px); font-size: clamp(1.375rem, .6rem + 1.1vw, 2.1rem); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.blog-card__excerpt { display: -webkit-box; margin-top: 10px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 16px; line-height: 1.5; color: var(--color-text-muted); }
@media (min-width: 1024px) {
  .blog-card--wide .blog-card__media { aspect-ratio: 16 / 9; }
  .blog-card--wide .blog-card__title { font-size: clamp(1.375rem, .4rem + 1.65vw, 2.75rem); line-height: 1.2; }
  .blog-card--wide .blog-card__excerpt { max-width: 36rem; font-size: var(--fs-big); }
}
.blog-card__more { display: inline-flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; font-size: 15px; font-weight: 500; }
.blog-card__arrow { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--color-primary-line); font-size: 16px; transition: background-color .4s, box-shadow .4s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.blog-card:hover .blog-card__arrow { background: var(--color-primary-hover); box-shadow: inset 0 0 0 1px var(--color-primary-hover); transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) { .post-hero__wave { animation: none; } .post-cover__frame { clip-path: none; } .post-cover__image { transform: none; } }
/* @template:end */
/* @page:start blog-koliko-kosta-sajt */}@layer djb.nodes{.djb-eljsxz{display:contents}}