/* =========================================================================
   Radar povinností — Blog / Novinky (landing subpage)
   Builds on landing.css (same tokens, nav, footer, buttons, reveal, ambient).
   Adds the blog-specific surfaces: hero, category filter, featured post,
   post grid + cards, and the article reading layout.
   ========================================================================= */

/* ---------- Blog hero ---------- */
.blog-hero { text-align: center; padding: clamp(40px, 6vw, 76px) 0 0; }
.blog-hero h1 { font-size: clamp(38px, 6vw, 66px); font-weight: 800; line-height: 1.0; letter-spacing: -0.04em;
  color: var(--heading); max-width: 16ch; margin: var(--s-md) auto 0; }
.blog-hero .lead { margin: var(--s-lg) auto 0; font-size: clamp(16px,1.9vw,19px); color: var(--muted); max-width: 54ch; }
.blog-hero .eyebrow { justify-content: center; }

/* ---------- Category filter ---------- */
.blog-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: var(--s-xl) auto 0; }
.blog-chip { padding: 8px 16px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--text);
  background: rgba(255,255,255,0.04); border: 1px solid var(--border); cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.blog-chip:hover { color: var(--heading); border-color: var(--brand-border); }
.blog-chip.active { color: #04130f; background: linear-gradient(180deg, var(--brand-bright), var(--brand)); border-color: transparent; }

/* ---------- Featured post ---------- */
.featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  margin-top: var(--s-2xl); padding: clamp(20px,2.5vw,28px); border-radius: var(--r-lg);
  border: 1px solid var(--border); overflow: hidden; position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); }
.featured::after { content:''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(620px circle at 78% 0%, rgba(0,211,169,0.12), transparent 55%); }
.featured .feat-media { position: relative; z-index: 1; height: clamp(220px, 26vw, 300px); border-radius: var(--r);
  display: grid; place-items: center; overflow: hidden; border: 1px solid var(--hair);
  background: radial-gradient(130% 120% at 20% 0%, rgba(0,211,169,0.20), transparent 60%), rgba(7,11,15,0.6); }
.featured .feat-media svg { width: clamp(96px, 14vw, 128px); height: auto; }
.featured .feat-copy { position: relative; z-index: 1; }
.featured .feat-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand); }
.featured .feat-tag::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.featured h2 { margin: 12px 0 0; font-size: clamp(24px, 3.2vw, 36px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--heading); }
.featured p { margin: var(--s-md) 0 0; font-size: 16px; color: var(--muted); line-height: 1.62; max-width: 48ch; }
.post-meta { display: flex; align-items: center; gap: 9px; margin-top: var(--s-md); font-size: 13px; color: var(--muted); }
.post-meta .pm-cat { color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.post-meta .sep { opacity: .5; }
.featured .btn { margin-top: var(--s-lg); }

/* ---------- Post grid ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); margin-top: var(--s-2xl); }
.post { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.post:hover { transform: translateY(-5px); border-color: var(--brand-border); box-shadow: 0 28px 60px -30px rgba(0,0,0,0.8); }
.post-cover { position: relative; height: 150px; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--hair);
  background: radial-gradient(120% 110% at 22% 0%, rgba(0,211,169,0.16), transparent 60%), rgba(7,11,15,0.5); }
.post-cover.blue { background: radial-gradient(120% 110% at 22% 0%, rgba(59,129,245,0.18), transparent 60%), rgba(7,11,15,0.5); }
.post-cover.amber { background: radial-gradient(120% 110% at 22% 0%, rgba(245,177,59,0.18), transparent 60%), rgba(7,11,15,0.5); }
.post-cover svg { width: 60px; height: 60px; opacity: .92; }
.post-cover .pc-flag { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: var(--r-pill); background: rgba(5,8,12,0.66); border: 1px solid var(--border); color: var(--text); }
.post-body { display: flex; flex-direction: column; flex: 1; padding: var(--s-lg); }
.post-body h3 { margin: 9px 0 0; font-size: 18.5px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.25; color: var(--heading); }
.post-body p { margin: 9px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.post-readmore { margin-top: auto; padding-top: var(--s-md); display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 650; color: var(--brand); }
.post-readmore svg { width: 16px; height: 16px; }

/* ---------- Article (reading view) ---------- */
.article { max-width: 760px; margin: 0 auto; padding-top: clamp(20px, 4vw, 44px); }
.article .art-back { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--muted);
  transition: color .2s; }
.article .art-back:hover { color: var(--brand); }
.article .art-back svg { width: 16px; height: 16px; }
.article .post-meta { justify-content: flex-start; margin-top: var(--s-lg); }
.article h1 { margin: 12px 0 0; font-size: clamp(30px, 5vw, 50px); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; color: var(--heading); }
.article .art-lead { margin: var(--s-lg) 0 0; font-size: clamp(17px, 2vw, 20px); color: var(--text); line-height: 1.6; }
.article .art-cover { height: clamp(220px, 32vw, 360px); border-radius: var(--r-lg); margin: var(--s-xl) 0; display: grid; place-items: center;
  overflow: hidden; border: 1px solid var(--brand-border);
  background: radial-gradient(130% 120% at 25% 0%, rgba(0,211,169,0.22), transparent 60%), rgba(7,11,15,0.6); }
.article .art-cover svg { width: clamp(110px, 16vw, 150px); height: auto; }
.art-body p { margin: var(--s-lg) 0 0; font-size: 17px; color: var(--text); line-height: 1.78; }
.art-body h2 { margin: var(--s-2xl) 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--heading); }
.art-body ul { margin: var(--s-md) 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.art-body ul li { position: relative; padding-left: 28px; font-size: 16.5px; color: var(--text); line-height: 1.62; }
.art-body ul li::before { content:''; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.art-callout { display: flex; gap: 14px; margin: var(--s-xl) 0 0; padding: 18px 20px; border-radius: var(--r);
  background: var(--brand-dim); border: 1px solid var(--brand-border); }
.art-callout svg { flex: none; width: 22px; height: 22px; stroke: var(--brand); margin-top: 2px; }
.art-callout p { margin: 0; font-size: 15.5px; color: var(--heading); line-height: 1.6; }
.art-callout b { color: var(--heading); }
.art-source { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: var(--s-2xl);
  padding-top: var(--s-lg); border-top: 1px solid var(--border); font-size: 14px; color: var(--muted); }
.art-source a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .featured { grid-template-columns: 1fr; }
  .featured .feat-media { order: -1; }
  .post-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .post-grid { grid-template-columns: 1fr; }
}