/* Blog: lista i artykuł. Szerszy układ redakcyjny, zdjęcia z realizacji. */

.post-cover{
  display:block;margin:0 0 1.2rem;background:#211f28;overflow:hidden;
}
.post-cover img{
  width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;object-position:top center;
  transition:transform .55s var(--ease);
}
.post-cover:hover img{transform:scale(1.03)}
.post--lead{
  display:grid;gap:1.4rem;padding:0;margin:clamp(1.2rem,2vw,1.8rem) 0 0;border:0;
}
.post--lead .post-cover{margin:0}
.post--lead h2{
  font-size:clamp(1.85rem,3vw,2.55rem);letter-spacing:-.03em;
  max-width:min(24ch,100%);
}
.post--lead p:not(.post-meta){font-size:1.12rem;max-width:min(62ch,100%)}
.post-grid{
  display:grid;gap:0;
  margin:2rem 0 0;padding-top:1.2rem;border-top:1px solid var(--rule);
}
.post--tile{
  padding:1.6rem 0;border-top:1px solid var(--rule);
}
.post--tile:first-child{border-top:0;padding-top:0}
.post--tile h2{max-width:min(28ch,100%)}
.post--tile p:not(.post-meta){max-width:min(54ch,100%)}

.article-hero{
  margin:clamp(1.2rem,2vw,1.8rem) 0 2.2rem;
}
.article-hero img{
  width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;object-position:top center;
  background:#211f28;
}
.article-hero figcaption,
.article-fig figcaption{
  margin:.7rem 0 0;font-size:.98rem;line-height:1.45;
  color:rgba(243,238,232,.58);max-width:min(62ch,100%);
}
.article-fig{
  margin:1.6rem 0 1.8rem;
}
.article-fig img{
  width:100%;height:auto;max-height:38rem;object-fit:cover;object-position:top center;
  background:#211f28;
}
.article-quote{
  margin:1.8rem 0;
  padding:0 0 0 1.2rem;
  border-left:2px solid var(--accent);
}
.article-quote p{
  margin:0;color:var(--text-primary);
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.25;letter-spacing:-.02em;
  max-width:min(28ch,100%);
}

.article-layout{display:grid;gap:2.4rem}
.article-rail{
  padding-top:1.4rem;border-top:1px solid var(--rule);
}
.article-rail-kicker{
  margin:0 0 1rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
}
.article-rail ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.article-rail li a{
  display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:.85rem;align-items:center;
  text-decoration:none;color:inherit;border:0;
}
.article-rail img{
  width:5.6rem;height:4rem;object-fit:cover;object-position:top center;background:#211f28;
}
.article-rail strong{
  display:block;font-family:var(--display);font-weight:500;
  font-size:1.08rem;line-height:1.25;color:var(--text-primary);
}
.article-rail a:hover strong{color:var(--accent)}
.article-rail .post-meta{margin:0 0 .25rem}
.article-rail-note{
  margin:1.4rem 0 .9rem;font-size:1.02rem;line-height:1.45;
  color:var(--text-secondary);max-width:min(36ch,100%);
}
.article-rail .btn{width:100%;text-align:center}

@media (min-width:800px){
  .post--lead{
    grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);
    gap:2rem 2.6rem;align-items:center;
    padding-bottom:2rem;border-bottom:1px solid var(--rule);
  }
  .post-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2rem 2.2rem;border-top:0;padding-top:2rem;
  }
  .post--tile{border-top:0;padding:0}
}

@media (min-width:1025px){
  .article-layout{
    grid-template-columns:minmax(0,1fr) minmax(16rem,20rem);
    gap:3rem 3.6rem;align-items:start;
  }
  .article-rail{
    position:sticky;top:6.5rem;
    margin:0;padding:0;border:0;
  }
  .article-hero{margin-bottom:2.6rem}
}

@media (prefers-reduced-motion:reduce){
  .post-cover img,.post-cover:hover img{transform:none;transition:none}
}