/* Marketarium — veřejný blog (blog.html, blog-clanek.html, teaser na index.html).
 * Staví na tokenech v8.css (--forest, --lime, --orange-ink, --surface-2, --mono …).
 * Pravidlo kontrastu z v8.css: lime/orange jen jako plocha s tmavým textem. */

/* ===== Hlavička stránky blogu ===== */
.blog-hero{padding:clamp(44px,6vh,72px) 48px 26px}
.blog-hero h1{margin:14px 0 0;font-size:clamp(34px,4.8vw,64px);font-weight:900;line-height:0.96;max-width:860px}
.blog-hero p{margin:18px 0 0;font-size:17px;line-height:1.55;color:rgba(15,42,31,0.72);max-width:640px}
.blog-main{padding:10px 48px 72px;min-height:340px}

/* ===== Mřížka karet ===== */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.post-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid rgba(15,42,31,0.1);border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(15,42,31,0.04),0 10px 26px -14px rgba(15,42,31,0.12);transition:transform .26s cubic-bezier(.2,.8,.3,1),border-color .26s,box-shadow .26s}
.post-card:hover{transform:translateY(-4px);border-color:rgba(15,42,31,0.28);box-shadow:0 22px 46px -16px rgba(15,42,31,0.18)}
.post-card:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
.post-cover{aspect-ratio:16/9;background:var(--surface-2);overflow:hidden;position:relative}
.post-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.post-card:hover .post-cover img{transform:scale(1.04)}
/* Článek bez obrázku: značková plocha, ne rozbitý obrázek */
.post-cover.is-empty{background:var(--forest);display:flex;align-items:flex-end;padding:20px}
.post-cover-mark{display:inline-block;width:22px;height:22px;background:var(--lime);border-radius:6px}
.post-card-body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px;flex:1}
.post-meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(15,42,31,0.64)}
.post-card-title{margin:0;font-size:21px;font-weight:900;line-height:1.12;letter-spacing:-0.02em}
.post-card-perex{margin:0;font-size:14.5px;line-height:1.6;color:rgba(15,42,31,0.74);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.post-card-more{margin-top:auto;padding-top:6px;font-weight:700;font-size:14px;color:var(--forest)}
.post-card:hover .post-card-more{color:var(--orange-ink)}

/* ===== Skeleton ===== */
.post-skel{height:360px}
.blog-main[aria-busy="true"]{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-skel-detail{height:420px;max-width:760px;margin:0 auto;width:100%}
.post-main[aria-busy="true"]{display:block}

/* ===== Stavy (prázdno, chyba, 404) ===== */
.blog-state{max-width:620px;margin:10px auto;background:var(--surface-2);border:1px solid rgba(15,42,31,0.1);border-radius:24px;padding:40px 36px;text-align:center}
.blog-state-mark{display:inline-block;width:14px;height:14px;background:var(--orange);margin-bottom:16px}
.blog-state-empty .blog-state-mark{background:var(--lime);box-shadow:inset 0 0 0 1.5px rgba(15,42,31,0.35)}
.blog-state-title{margin:0;font-size:clamp(22px,2.6vw,30px);font-weight:900;line-height:1.08}
.blog-state-text{margin:12px auto 0;font-size:15px;line-height:1.6;color:rgba(15,42,31,0.74);max-width:460px}
.blog-state-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}

/* ===== Detail článku ===== */
.post-main{padding:clamp(34px,5vh,60px) 48px 72px}
.post{max-width:760px;margin:0 auto}
.post-back{display:inline-flex;align-items:center;min-height:40px;font-size:11px;color:var(--orange-ink)}
.post-back:hover{color:var(--forest)}
.post-title{margin:10px 0 0;font-size:clamp(32px,4.6vw,56px);font-weight:900;line-height:1.0;letter-spacing:-0.035em}
.post-head .post-meta{margin-top:18px}
.post-perex{margin:20px 0 0;font-size:19px;line-height:1.55;color:rgba(15,42,31,0.8);font-weight:500}
.post-hero{margin:32px 0 0;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:var(--surface-2)}
.post-hero img{width:100%;height:100%;object-fit:cover;display:block}
.post-body{margin-top:34px;font-size:17px;line-height:1.75;color:rgba(15,42,31,0.84)}
.post-body h2{margin:40px 0 12px;font-size:clamp(22px,2.4vw,28px);font-weight:900;line-height:1.15;color:var(--forest)}
.post-body p{margin:0 0 18px}
.post-body ul{margin:0 0 20px;padding-left:22px}
.post-body li{margin-bottom:8px;padding-left:4px}
.post-body li::marker{color:var(--orange-ink)}
.post-body blockquote{margin:28px 0;padding:6px 0 6px 24px;border-left:4px solid var(--lime);font-size:21px;line-height:1.5;font-weight:700;color:var(--forest);letter-spacing:-0.01em}
.post-fig{margin:28px 0}
.post-fig img{width:100%;height:auto;display:block;border-radius:16px;background:var(--surface-2)}
.post-foot{margin-top:44px;padding-top:26px;border-top:1px solid rgba(15,42,31,0.12)}

/* ===== Teaser na homepage ===== */
.blog-teaser .post-grid{margin-top:26px}

/* ===== Responsive ===== */
@media(max-width:1000px){
  .post-grid,.blog-main[aria-busy="true"]{grid-template-columns:1fr 1fr}
  .blog-hero,.blog-main,.post-main{padding-left:24px;padding-right:24px}
}
@media(max-width:640px){
  .post-grid,.blog-main[aria-busy="true"]{grid-template-columns:1fr}
  .blog-hero,.blog-main,.post-main{padding-left:20px!important;padding-right:20px!important}
  .post-card-body{padding:18px 18px 20px}
  .blog-state{padding:30px 20px;border-radius:18px}
  .post-perex{font-size:17px}
  .post-body{font-size:16px}
  .post-body blockquote{font-size:18px;padding-left:18px}
}
@media(prefers-reduced-motion:reduce){
  .post-card,.post-cover img{transition:none}
  .post-card:hover{transform:none}
  .post-card:hover .post-cover img{transform:none}
}