/* Blog. Magazin a odborny zapisnik v jednom: vpredu vyrazny clanok a mriezka
   kariet, vnutri clanku pokojna, dobre citatelna sadzba (Juraj, 7.8.2026).
   Stavia na premennych z brand.css, ziadne vlastne farby navyse. */

.blog-hero { padding: 40px 0 8px; }
.blog-hero .kicker {
  font-family: var(--fd); font-weight: 800; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-d); margin-bottom: 10px;
}
.blog-hero h1 { font-size: clamp(28px, 5vw, 40px); margin: 0 0 12px; }
.blog-hero p { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 60ch; margin: 0; }

/* Prvy clanok dostane celu sirku a tmavy podklad, aby bolo jasne, kde zacat. */
.blog-top {
  display: block; margin: 28px 0 32px; padding: 28px; border-radius: 18px;
  background: var(--dark); color: #fff; text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease;
}
.blog-top:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(15,23,42,.22); }
.blog-top .stitok {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #b9c2f5; margin-bottom: 12px;
}
.blog-top h2 { color: #fff; font-size: clamp(22px, 3.4vw, 30px); margin: 0 0 10px; }
.blog-top p { color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.6; margin: 0 0 14px; max-width: 62ch; }
.blog-top .meta { font-size: 13px; color: rgba(255,255,255,.55); }

.blog-mriezka { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .blog-mriezka { grid-template-columns: 1fr 1fr; } }

.blog-karta {
  display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--card); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .2s ease;
}
.blog-karta:hover { border-color: var(--softb); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,23,42,.07); }
.blog-karta .stitok {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-d); margin-bottom: 10px;
}
.blog-karta h2 { font-size: 19px; line-height: 1.3; margin: 0 0 8px; color: var(--ink); }
.blog-karta p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.blog-karta .meta { margin-top: auto; font-size: 13px; color: var(--faint); }

/* ---------- samotny clanok ---------- */
.post { max-width: 68ch; margin: 0 auto; padding: 32px 0 8px; }
.post .navrat { font-size: 13.5px; color: var(--muted); text-decoration: none; }
.post .navrat:hover { color: var(--accent-d); }
.post h1 { font-size: clamp(26px, 4.4vw, 36px); margin: 14px 0 14px; }
.post .lead { font-size: 18px; line-height: 1.65; color: var(--ink); margin: 0 0 14px; }
.post .meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px;
  color: var(--faint); padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 24px;
}
.post .meta .bod { width: 3px; height: 3px; border-radius: 50%; background: var(--line-soft, #d8dde6); }
.post p { font-size: 16.5px; line-height: 1.75; color: #2c3340; margin: 0 0 18px; }
.post h2 { font-size: 22px; line-height: 1.3; margin: 34px 0 12px; }
.post ul, .post ol { margin: 0 0 18px; padding-left: 22px; }
.post li { font-size: 16.5px; line-height: 1.75; color: #2c3340; margin-bottom: 8px; }
.post a { color: var(--accent-d); }

/* Zaver clanku: jedna pokojna vyzva, ziadny krik. */
.post-cta {
  margin: 36px 0 8px; padding: 24px; border-radius: 16px;
  background: var(--soft); border: 1px solid var(--line);
}
.post-cta p { font-size: 15.5px; line-height: 1.65; color: var(--ink); margin: 0 0 14px; }
.post-cta a.btn { text-decoration: none; }