/* NOUSOOS blog — public styles, built on site tokens from styles.css */
.bl-body { background:var(--bg); color:var(--ink); min-height:100vh; display:flex; flex-direction:column; overflow-x:clip; }
.bl-body .foot { margin-top:auto; }

/* top nav (reuses .nav / .nav--minimal; just add logo + visible rule) */
.bl-topnav { border-bottom:1px solid var(--rule); }
.bl-brand { display:flex; align-items:center; }
.bl-brand img { height:20px; width:auto; }

/* ─── index ─── */
.bl-index { padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(72px,10vw,128px); }
.bl-index__head { max-width:760px; margin-bottom:clamp(40px,6vw,72px); }
.bl-kicker { font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 16px; }
.bl-index__title { font-size:clamp(40px,7vw,84px); font-weight:600; letter-spacing:-0.04em; line-height:0.98; margin:0 0 20px; text-transform:lowercase; }
.bl-index__tag { font-size:clamp(16px,2vw,20px); color:var(--ink-soft); margin:0; max-width:46ch; line-height:1.5; }

.bl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,48px) clamp(24px,2.4vw,40px); }
.bl-card { display:flex; flex-direction:column; }
.bl-card__img { display:block; aspect-ratio:3/2; overflow:hidden; background:var(--bg-deep); margin-bottom:20px; }
.bl-card__img img { width:100%; height:100%; object-fit:cover; }
.bl-card__meta { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 10px; }
.bl-card__title { font-size:clamp(19px,1.6vw,23px); font-weight:600; letter-spacing:-0.02em; line-height:1.18; margin:0 0 12px; }
.bl-card__title a:hover { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.bl-card__ex { font-size:15px; color:var(--ink-soft); margin:0 0 16px; line-height:1.55; }
.bl-card__more { font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin-top:auto; transition:gap .2s; display:inline-block; }
.bl-card__more:hover { padding-left:4px; }
.bl-empty { color:var(--ink-soft); font-size:18px; }

/* ─── article ───
   text sedí v čitateľnom stĺpci (--bl-col), médiá — obrázky, galérie, videá,
   embedy a cover — vybiehajú do širokého pásu (--bl-wide) */
.bl-article { padding-top:clamp(48px,7vw,88px); padding-bottom:clamp(72px,10vw,120px); --bl-col:800px; --bl-wide:1160px; }
.bl-article article { max-width:none; }
.bl-article .bl-kicker { margin-bottom:20px; }
.bl-article .bl-kicker--byline,
.bl-article .bl-title,
.bl-article .bl-author,
.bl-article .bl-back { max-width:var(--bl-col); margin-left:auto; margin-right:auto; }
.bl-title { font-size:clamp(30px,5vw,56px); font-weight:600; letter-spacing:-0.035em; line-height:1.04; margin:0 0 36px; }
.bl-cover { max-width:var(--bl-wide); margin:0 auto 44px; overflow:hidden; background:var(--bg-deep); }
.bl-cover img { width:100%; height:auto; display:block; }

.bl-content { font-size:clamp(17px,1.3vw,19px); line-height:1.72; color:#1a1a18; }
.bl-article .bl-content > * { max-width:var(--bl-col); margin-left:auto; margin-right:auto; }
.bl-article .bl-content > .bl-media { max-width:var(--bl-wide); }
.bl-content > *:first-child { margin-top:0; }
.bl-content p { margin:0 0 1.45em; }
.bl-content h2 { font-size:clamp(26px,2.6vw,33px); font-weight:600; letter-spacing:-0.025em; line-height:1.18; margin:1.9em 0 .6em; }
.bl-content h3 { font-size:clamp(21px,2vw,25px); font-weight:600; letter-spacing:-0.015em; margin:1.7em 0 .5em; }
.bl-content h4 { font-size:19px; font-weight:600; margin:1.5em 0 .4em; }
.bl-content a { text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.bl-content a:hover { color:var(--ink-soft); }
.bl-content ul, .bl-content ol { margin:0 0 1.45em; padding-left:1.3em; }
.bl-content li { margin:0 0 .55em; padding-left:.2em; }
.bl-content blockquote { margin:2em 0; padding:4px 0 4px 26px; border-left:2px solid var(--ink); font-size:clamp(20px,2.2vw,26px); line-height:1.4; letter-spacing:-0.02em; font-weight:500; }
.bl-content img { margin:2em 0; max-width:100%; height:auto; }
.bl-content figure { margin:2em 0; }
.bl-content figcaption { font-size:13px; color:var(--ink-soft); margin-top:10px; }
.bl-content pre { background:#1a1a18; color:#f1eeea; padding:20px 22px; overflow:auto; font-size:14px; margin:1.7em 0; }
.bl-content code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--bg-deep); padding:2px 6px; }
.bl-content pre code { background:none; padding:0; }
.bl-content hr { border:0; border-top:1px solid var(--rule); margin:2.6em 0; }

/* media blocks generated at render time (see decorate_body_html) */
.bl-content .bl-media { margin-top:2.6em; margin-bottom:2.6em; }
.bl-content .bl-media img { width:100%; height:auto; display:block; margin:0; }
.bl-media--grid { display:grid; gap:clamp(12px,1.5vw,20px); grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); }
.bl-content .bl-media--grid img { height:100%; object-fit:cover; }
/* width variants (set per image in the editor) */
.bl-article .bl-content > .bl-media--col { max-width:var(--bl-col); }
.bl-article .bl-content > .bl-media--bleed { max-width:none; width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.bl-embed { aspect-ratio:16/9; background:#000; }
.bl-embed iframe { width:100%; height:100%; border:0; display:block; }
.bl-content .bl-media video { width:100%; height:auto; display:block; background:#000; }

.bl-back { margin-top:64px; padding-top:30px; border-top:1px solid var(--rule); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.bl-back a:hover { text-decoration:underline; text-underline-offset:3px; }

/* ─── responsive ─── */
@media (max-width:880px){
  .bl-grid { grid-template-columns:repeat(2,1fr); }
  .bl-brand { display:none; }
}
@media (max-width:560px){
  .bl-grid { grid-template-columns:1fr; gap:36px; }
}

/* author byline avatar + card */
.bl-kicker--byline { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.bl-sep { color:var(--ink-soft); }
.bl-byauthor { display:inline-flex; align-items:center; gap:7px; }
.bl-av { border-radius:50%; object-fit:cover; display:inline-block; vertical-align:middle; background:var(--bg-deep); }
.bl-av--sm { width:22px; height:22px; }
.bl-av--md { width:54px; height:54px; }
.bl-av--ph { display:inline-grid; place-items:center; font-weight:600; text-transform:uppercase; color:#fff; background:linear-gradient(140deg,#2a2a2a,#0a0a0a); letter-spacing:0; }
.bl-av--sm.bl-av--ph { font-size:10px; }
.bl-av--md.bl-av--ph { font-size:19px; }
.bl-author { display:flex; align-items:center; gap:16px; margin:56px 0 0; padding-top:30px; border-top:1px solid var(--rule); }
.bl-author__meta { display:flex; flex-direction:column; gap:3px; }
.bl-author__label { font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.bl-author__name { font-size:18px; font-weight:600; letter-spacing:-0.01em; }
.bl-author__bio { margin:5px 0 0; font-size:14px; line-height:1.55; color:var(--ink-soft); max-width:56ch; }
.bl-article .bl-back { margin-top:40px; }

/* ─── author links + author page (/blog/autor/<uid>/) ─── */
a.bl-byauthor { color:inherit; }
a.bl-byauthor:hover,
a.bl-author__name:hover { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.bl-author__all { margin-top:8px; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); align-self:flex-start; }
.bl-author__all:hover { color:var(--ink); }
.bl-av--lg { width:96px; height:96px; flex:0 0 auto; }
.bl-av--lg.bl-av--ph { font-size:32px; }
.bl-authorhead { display:flex; align-items:center; gap:clamp(20px,3vw,32px); margin-bottom:clamp(40px,6vw,72px); }
.bl-authorhead .bl-kicker { margin-bottom:10px; }
.bl-authorhead h1 { font-size:clamp(30px,4.5vw,54px); font-weight:600; letter-spacing:-0.035em; line-height:1.02; margin:0 0 10px; }
.bl-authorhead__bio { font-size:clamp(15px,1.6vw,17px); color:var(--ink-soft); line-height:1.55; margin:0 0 10px; max-width:60ch; }
.bl-authorhead__count { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; margin:0; }
.bl-authorpage .bl-back { margin-top:clamp(40px,6vw,64px); }
@media (max-width:560px){
  .bl-authorhead { flex-direction:column; align-items:flex-start; gap:18px; }
}

/* ─── plynulé načítanie (základ; finálny variant vyberieme z /test-animacie.html) ─── */
.bl-content .bl-media img, .bl-cover img { background:var(--bg-deep); transition:opacity .55s ease; }
.bl-content img.is-loading, .bl-cover img.is-loading { opacity:0; }
@media (prefers-reduced-motion: no-preference){
  .bl-article article, .bl-index__head, .bl-authorhead, .bl-grid { animation:bl-in .55s cubic-bezier(.16,1,.3,1) both; }
  .bl-grid { animation-delay:.08s; }
}
@keyframes bl-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }