/* Разделы блога (ТЗ 13.11.2026): «Все статьи» и разделы по группам над лентой статей */
.blog-sections{margin:0 0 32px}
.blog-sections-all{margin-bottom:16px}
.blog-sections-group{margin-bottom:14px}
.blog-sections-group-title{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8458BD;margin-bottom:8px}
.blog-sections-list{display:flex;flex-wrap:wrap;gap:8px}
.content .blog-section-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid #E3DDF0;border-radius:20px;background:#fff;color:#333;font-size:15px;line-height:1.3;text-decoration:none;transition:border-color .15s,color .15s,background .15s}
.content .blog-section-chip:hover{border-color:#F50882;color:#F50882;text-decoration:none}
.content .blog-section-chip.active{background:#F50882;border-color:#F50882;color:#fff}
.blog-section-chip .count{font-size:12px;color:#999}
.blog-section-chip.active .count{color:rgba(255,255,255,.8)}
.blog-empty-language{padding:24px 0 40px}
.content .blog-empty-language h2{margin-top:0}
.blog-empty-language p{font-size:18px;margin-bottom:24px}
@media (max-width:767px){
  .blog-sections{margin-bottom:24px}
  .content .blog-section-chip{font-size:14px;padding:6px 12px;white-space:nowrap;flex:none}
  /* на телефоне разделы группы - одной строкой с прокруткой вбок, чтобы статьи начинались выше */
  .blog-sections-list{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-right:-15px;padding-right:15px}
  .blog-sections-list::-webkit-scrollbar{display:none}
}
.post-text-header .blog-post-section{margin-bottom:12px}

/* 13.11: шапка ленты блога компактнее (была 600px + два отступа по 64px), меню разделов на компьютере - в правой колонке */
.content.blog.index .header:not(.newYearFormat){min-height:340px;background-size:auto 94%, 100% 100%;background-position:right bottom, left center}
.content.blog.index .header h1{margin-top:56px}
.content.blog.index .blog-top-gap{height:40px}
.blog-sections-block{padding-top:20px;padding-bottom:8px}
.blog-sections-side .blog-sections-list{flex-direction:column;gap:2px}
.content .blog-sections-side .blog-section-chip{display:flex;justify-content:space-between;border:0;border-radius:10px;padding:7px 10px;margin:0 -10px;font-size:15px}
.content .blog-sections-side .blog-section-chip:hover{background:#FDF0F7}
.content .blog-sections-side .blog-sections-all .blog-section-chip{font-weight:700}
.content .blog-sections-side .blog-section-chip.active{background:none;color:#F50882;font-weight:700}
.content .blog-sections-side .blog-section-chip.active .count{color:#F50882}
.content .blog-sections-side .blog-section-chip.active:hover{background:#FDF0F7}
.blog-sections-side .blog-sections-group{margin-bottom:16px}
@media (max-width:767px){
  .content.blog.index .header:not(.newYearFormat){min-height:auto;padding-bottom:150px;background-size:auto 150px, 100% 100%}
  .content.blog.index .header h1{margin-top:28px}
  .content.blog.index .blog-top-gap{height:24px}
}
.content .filters .block.blog-sections-block{padding-bottom:22px}

/* 13.11: карточки ленты — длинные заголовки занимали всю карточку. Заголовок мельче и не больше 3 строк, анонс — 3 строки */
.content.blog.index .post-card .text-wrapper{padding:22px 28px 24px}
.content.blog.index .post-card .content-wrapper{height:auto;overflow:visible}
.content.blog.index .post-card h3{font-size:20px;line-height:1.3;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.content.blog.index .post-card .content-wrapper p{font-size:15px;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.content.blog.index .post-card .post-card-footer{box-shadow:none;margin-top:16px}
.content.blog.index .post-card{height:auto;min-height:0}
@media (max-width:767px){
  .content.blog.index .post-card .text-wrapper{padding:16px 18px 18px}
  .content.blog.index .post-card h3{font-size:18px}
}
@media (min-width:768px){
  .content.blog.index #content .col-lg-8 > .row{display:flex;flex-wrap:wrap}
  .content.blog.index #content .col-lg-8 > .row > [class*=col-]{display:flex}
  .content.blog.index .post-card{width:100%}
  .content.blog.index .post-card > a{display:flex;flex-direction:column;height:100%}
  .content.blog.index .post-card .text-wrapper{flex:1;display:flex;flex-direction:column}
  .content.blog.index .post-card .post-card-footer{margin-top:auto;padding-top:16px}
}
