.perks{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px}
.perk{display:flex;gap:9px;align-items:center;font-size:11.5px;font-weight:500}
.perk svg{width:20px;height:20px;flex:none}
.hero .wrap{min-height:250px}

.blog-sec{padding:22px 0 30px}
.blog-sec .wrap{display:grid;grid-template-columns:1fr 280px;gap:22px;align-items:start}
.toolbar{display:flex;gap:16px;align-items:center;margin-bottom:18px;grid-column:1/-1}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{font:inherit;font-size:11.5px;font-weight:600;background:var(--field);color:var(--text);border:0;border-radius:4px;padding:8px 11px;cursor:pointer}
.chip:hover{background:#e4e7ec}
.chip[aria-pressed="true"]{background:var(--red);color:#fff}
.srch{margin-left:auto;display:flex;background:var(--field);border-radius:4px;overflow:hidden;width:208px;flex:none}
.srch input{border:0;background:transparent;font:inherit;font-size:12.5px;padding:9px 12px;flex:1;min-width:0}
.srch input:focus{outline:none}
.srch:focus-within{outline:2px solid var(--red)}
.srch button{background:#e2e5ea;border:0;width:38px;cursor:pointer;display:grid;place-items:center}
.srch svg{width:16px;height:16px}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.post{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;display:flex;flex-direction:column;position:relative;transition:box-shadow .2s}
.post:hover{box-shadow:0 8px 24px rgba(15,20,30,.1)}
.post[hidden]{display:none}
.post .th{height:118px}
.post .cat{position:absolute;left:10px;top:92px;background:rgba(10,14,19,.9);color:#fff;border:1px solid #515a67;border-radius:3px;font-size:10px;font-weight:700;padding:2px 8px;z-index:2}
.post-body{padding:12px 12px 14px;display:flex;flex-direction:column;flex:1}
.meta{display:flex;gap:16px;font-size:10px;color:var(--muted);margin-bottom:8px}
.meta span{display:flex;gap:5px;align-items:center}
.meta svg{width:12px;height:12px}
.post h2{font-family:var(--display);font-weight:400;font-size:14px;line-height:1.25;margin-bottom:8px;color:var(--ink)}
.post h2 a::after{content:"";position:absolute;inset:0}
.post p{font-size:11.5px;color:#3d4452;margin-bottom:12px}
.more{margin-top:auto;font-size:11.5px;font-weight:600;color:var(--red);display:inline-flex;gap:6px;align-items:center}
.more svg{width:13px;height:13px}
.empty{display:none;text-align:center;padding:40px 0;color:var(--muted)}

.pager{display:flex;gap:10px;justify-content:center;margin-top:22px;list-style:none}
.pager a,.pager span{min-width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:3px;font-size:12px;font-weight:600;background:#fff}
.pager a[aria-current]{background:var(--red);border-color:var(--red);color:#fff}
.pager span{border:0;background:none}
.pager svg{width:12px;height:12px}

aside.side{display:grid;gap:14px}

@media (max-width:1000px){
  .blog-sec .wrap{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  .srch{margin-left:0;width:auto}
  .posts{grid-template-columns:repeat(2,1fr)}
  aside.side{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .posts,aside.side{grid-template-columns:1fr}
}
a.chip{display:inline-block}
.chip[aria-current="page"]{background:var(--red);color:#fff}
.post .th{display:grid}
.hero .lead p{margin:0}

/* v2.2: переваги в шапці блогу — в один ряд */
.hero .perks{flex-wrap:nowrap;gap:18px;width:max-content;max-width:calc(100% + 120px);position:relative;z-index:3}
.hero .perk{white-space:nowrap}
@media (max-width:1100px){.hero .perks{width:auto;max-width:none;display:grid;grid-template-columns:repeat(2,max-content);gap:12px 22px}}
@media (max-width:420px){.hero .perks{grid-template-columns:1fr 1fr}.hero .perk{white-space:normal}}