/* ——— Blog (Новости, статьи и события) ——— */
:root{ --blog-w:1240px; }

body.blog-page{ background:var(--iw-cloud); }

/* ——— hero ——— */
.blog-hero{
  padding:calc(var(--iw-nav-h) + clamp(40px,7vh,86px)) clamp(18px,5vw,72px) clamp(30px,5vh,56px);
  background:var(--iw-cloud);
}
.blog-hero-inner{ max-width:var(--blog-w); margin:0 auto; }
.blog-hero h1{
  font-weight:800; font-size:clamp(36px,6vw,72px); line-height:1.02;
  letter-spacing:-0.035em; color:var(--iw-ink); text-wrap:balance;
}
.blog-hero p{
  margin-top:clamp(16px,2.4vh,26px); max-width:52ch;
  font-size:clamp(15px,1.5vw,17px); line-height:1.6; color:var(--iw-body);
}

/* ——— list ——— */
.blog-list-section{
  padding:clamp(20px,3vh,40px) clamp(18px,5vw,72px) clamp(72px,11vh,128px);
  background:var(--iw-cloud);
}
.blog-list{
  max-width:var(--blog-w); margin:0 auto;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,3vw,52px); row-gap:0;
}

.blog-row{
  display:flex; flex-direction:column;
  padding-top:clamp(40px,4.4vw,60px);
  padding-bottom:clamp(20px,2.1vw,28px);
  border-top:1px solid var(--iw-border);
  cursor:pointer;
}

/* media — wide banner: only the TOP slice of the cover is shown (object-position:top),
   keeping the rectangular proportions from the mockup */
.blog-media{
  position:relative; display:block;
}
.blog-frame{
  display:block; overflow:hidden;
  background:var(--iw-media);
  /* Width-driven ratio only. A min-height here is transferred through the
     aspect-ratio into a minimum WIDTH (3 × min-height), so any min-height makes
     the cover wider than its grid column: the covers overlap the column gap,
     the right-hand card runs past the page padding, and the row's border-top
     (the separator) ends up narrower than the card. */
  aspect-ratio:3 / 1;
}
.blog-media img{
  width:100%; height:100%; object-fit:cover; object-position:top;
  transition:transform .8s var(--iw-ease);
}
.blog-row:hover .blog-media img{ transform:scale(1.035); }

/* date plate — anchored flush into the bottom-right corner of the cover,
   light card from the token library with a clearly visible drop shadow */
.blog-date{
  position:absolute; right:0; bottom:0; z-index:4;
  display:flex; align-items:baseline; gap:10px;
  padding:11px 17px; background:var(--iw-white);
}
.blog-date b{
  font-weight:800; font-size:clamp(24px,2.4vw,32px); line-height:1;
  letter-spacing:-0.02em; color:var(--iw-ink);
}
.blog-my{ display:flex; align-items:baseline; gap:6px; }
.blog-my i{
  font-style:normal; font-family:'IBM Plex Mono',monospace;
  font-size:11.5px; letter-spacing:var(--iw-eyebrow-track); text-transform:uppercase;
  color:var(--iw-accent);
}

/* title */
.blog-title{
  margin-top:clamp(24px,2.4vw,34px);
  font-weight:800; font-size:clamp(20px,1.9vw,27px); line-height:1.16;
  letter-spacing:-0.02em; color:var(--iw-ink);
  transition:color .3s ease;
}
.blog-row:hover .blog-title{ color:var(--iw-accent); }

.blog-row-text{
  margin-top:clamp(13px,1.4vw,18px);
  font-size:15.5px; line-height:1.58; color:var(--iw-body);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* foot: read link only — no divider (the next card's top rule is the separator).
   Pinned to the bottom so «Читать» aligns across a row. */
.blog-row-foot{
  margin-top:auto; padding-top:clamp(26px,2.8vw,36px);
  display:flex; justify-content:flex-end;
}

.blog-read{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; font-size:14.5px; color:var(--iw-accent);
}
.blog-read [data-arrow]{
  font-family:'IBM Plex Mono',monospace; font-size:15px;
  display:inline-block; transition:transform .5s var(--iw-ease);
}
.blog-row:hover .blog-read [data-arrow]{ transform:rotate(-45deg); }

/* hidden overflow rows revealed by «Показать ещё» */
.blog-row[hidden]{ display:none; }

/* ——— list footer ——— */
.blog-list-foot{
  max-width:var(--blog-w); margin:0 auto;
  padding-top:clamp(40px,5vh,64px); text-align:center;
}
.blog-count{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:var(--iw-eyebrow-track);
  color:var(--iw-label); text-transform:uppercase; margin-bottom:22px;
}
.blog-more[hidden]{ display:none; }

@media (max-width:720px){
  .blog-list{ grid-template-columns:1fr; }
  .blog-date b{ font-size:26px; }
}