/* ============================================================
   Блог Студии CRM — лента, фильтры, карточки, одиночная статья
   Палитра наследует бренд: синий #1765e5→#3d86ff, CTA #ffb329.
   ============================================================ */
.blogx{
  --bx-blue:#1765e5; --bx-blue2:#3d86ff; --bx-deep:#0048a2; --bx-ink:#0f2444;
  --bx-text:#161616; --bx-muted:#4a5b74; --bx-amber:#ffb329;
  --bx-surf:#fff; --bx-surf2:#f4f8ff; --bx-line:#dde9ff; --bx-chip:#eef4ff;
  --bx-shadow:0 8px 30px rgba(15,36,68,.08); --bx-radius:18px;
  color:var(--bx-text);
}
.blogx *{box-sizing:border-box}

/* --- HERO --- */
.blogx-hero{
  position:relative; overflow:hidden; border-radius:26px; margin:10px 0 8px; color:#fff;
  background:linear-gradient(180deg,#1765e5 0%,#2a75f2 50%,#3d85ff 100%);
  padding:48px; box-shadow:var(--bx-shadow);
  display:flex; align-items:center; gap:44px;
}
.blogx-hero__left{flex:1 1 540px; min-width:0; max-width:620px}
.blogx-hero__feat{flex:0 1 380px; align-self:center; text-decoration:none; display:block}
.blogx-hero::after{content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 60%); pointer-events:none; z-index:0}
.blogx-hero__left,.blogx-hero__feat{position:relative; z-index:1}

/* Карточка «Читают сейчас» */
.blogx-hero__feat-tag{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:rgba(255,255,255,.85); margin-bottom:11px; display:flex; align-items:center; gap:8px}
.blogx-hero__feat-tag::before{content:"●"; color:var(--bx-amber); font-size:9px}
.blogx-hero__feat-card{background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 22px 50px rgba(0,18,54,.30); transition:transform .2s, box-shadow .2s}
.blogx-hero__feat:hover .blogx-hero__feat-card{transform:translateY(-5px); box-shadow:0 28px 60px rgba(0,18,54,.38)}
.blogx-hero__feat-thumb{height:116px; display:flex; align-items:center; justify-content:center; color:#fff; position:relative}
.blogx-hero__feat-thumb span{font-size:50px; opacity:.5; font-weight:800; line-height:1}
.blogx-hero__feat-body{padding:16px 20px 20px; display:flex; flex-direction:column; gap:9px}
.blogx-hero__feat-title{font-size:18px; line-height:1.26; color:var(--bx-ink); font-weight:750; margin:0; text-wrap:balance}
.blogx-hero__feat-ex{font-size:13px; line-height:1.5; color:var(--bx-muted); margin:0}
.blogx-hero__feat-meta{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--bx-muted); margin-top:2px}
.blogx-hero__feat-read{color:var(--bx-blue); font-weight:700}
.blogx-hero__eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; background:rgba(255,255,255,.16); padding:7px 14px; border-radius:100px; font-weight:600}
.blogx-hero__title{font-size:clamp(24px,3vw,34px); line-height:1.14; margin:16px 0 12px; max-width:24ch;
  font-weight:800; letter-spacing:-.01em; color:#fff; text-wrap:balance}
.blogx-hero__lead{max-width:56ch; font-size:17px; color:rgba(255,255,255,.9); margin:0 0 26px}
.blogx-search{display:flex; gap:10px; max-width:560px; background:#fff; border-radius:14px; padding:7px;
  box-shadow:0 12px 30px rgba(0,32,90,.28)}
.blogx-search input{flex:1; border:0; outline:0; font-size:15px; padding:12px 14px; color:#161616; background:transparent; font-family:inherit}
.blogx-search button{border:0; background:var(--bx-amber); color:#3a2600; font-weight:700; font-size:15px;
  padding:0 24px; border-radius:10px; cursor:pointer; font-family:inherit}
.blogx-hero__stats{display:flex; gap:30px; margin-top:26px; flex-wrap:wrap}
.blogx-hero__stats div{font-size:13px; color:rgba(255,255,255,.82)}
.blogx-hero__stats b{display:block; font-size:24px; font-weight:800; color:#fff}

/* --- FILTER BAR --- */
.blogx-filterbar{position:sticky; top:0; z-index:20; background:var(--bx-surf2);
  padding:16px 0; margin-top:22px; border-bottom:1px solid var(--bx-line)}
.blogx-pills{display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.blogx-pill{border:1px solid var(--bx-line); background:#fff; color:var(--bx-muted); font-size:14px; font-weight:600;
  padding:9px 18px; border-radius:100px; cursor:pointer; transition:.15s; white-space:nowrap; font-family:inherit}
.blogx-pill:hover{border-color:var(--bx-blue2); color:var(--bx-blue)}
.blogx-pill.is-active{background:linear-gradient(180deg,#1765e5,#3d85ff); color:#fff; border-color:transparent;
  box-shadow:0 6px 16px rgba(23,101,229,.32)}
.blogx-pill .n{opacity:.6; font-weight:600; margin-left:5px; font-size:12px}
.blogx-filter-row2{display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; align-items:center}
.blogx-selects{display:flex; gap:10px; flex-wrap:wrap}
.blogx-sel{position:relative; display:inline-block}
.blogx-sel select{appearance:none; -webkit-appearance:none; border:1px solid var(--bx-line); background:#fff; color:var(--bx-text);
  font-size:13.5px; font-weight:600; padding:9px 36px 9px 14px; border-radius:10px; cursor:pointer; font-family:inherit}
.blogx-sel::after{content:"▾"; position:absolute; right:13px; top:50%; transform:translateY(-50%);
  color:var(--bx-muted); pointer-events:none; font-size:11px}
.blogx-filter-meta{margin-left:auto; font-size:13px; color:var(--bx-muted)}

/* --- GRID + CARDS --- */
.blogx-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:26px 0 10px; position:relative; min-height:120px}
.blogx-grid.is-loading{opacity:.5; pointer-events:none}
.blogx-card{background:#fff; border:1px solid var(--bx-line); border-radius:var(--bx-radius); overflow:hidden;
  display:flex; flex-direction:column; transition:.18s; box-shadow:0 2px 10px rgba(15,36,68,.04)}
.blogx-card:hover{transform:translateY(-4px); box-shadow:var(--bx-shadow); border-color:var(--bx-blue2)}
.blogx-card__img{height:150px; position:relative; color:#fff; display:flex; align-items:flex-end; padding:16px; text-decoration:none}
.blogx-card__img.has-cover, .blogx-hero__feat-thumb.has-cover{background-size:cover; background-position:center; background-repeat:no-repeat}
.blogx-card__glyph{position:absolute; top:14px; right:16px; font-size:34px; opacity:.4; font-weight:800; line-height:1}
.blogx-card__sys{font-size:11px; font-weight:700; background:rgba(255,255,255,.2); padding:5px 10px; border-radius:100px}
.blogx-card__body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:11px; flex:1}
.blogx-badge{display:inline-block; font-size:11.5px; font-weight:700; color:var(--bx-blue); background:var(--bx-chip);
  padding:5px 10px; border-radius:100px; width:max-content}
.blogx-card__title{font-size:17.5px; line-height:1.28; margin:0; font-weight:700}
.blogx-card__title a{color:var(--bx-ink); text-decoration:none}
.blogx-card__title a:hover{color:var(--bx-blue)}
.blogx-card__excerpt{font-size:13.5px; color:var(--bx-muted); margin:0; flex:1}
.blogx-meta{display:flex; gap:10px; align-items:center; color:var(--bx-muted); font-size:12px; margin-top:2px}
.blogx-dot{width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.5}
.blogx-empty{grid-column:1/-1; text-align:center; color:var(--bx-muted); padding:40px 0}

/* Плашки-градиенты по рубрикам */
.blogx-card__img.r-cases,.blogx-hero__feat-thumb.r-cases{background:linear-gradient(135deg,#0f2444,#0048a2)}
.blogx-card__img.r-integr,.blogx-hero__feat-thumb.r-integr{background:linear-gradient(135deg,#0048a2,#2a75f2)}
.blogx-card__img.r-guide,.blogx-hero__feat-thumb.r-guide{background:linear-gradient(135deg,#1765e5,#3d86ff)}
.blogx-card__img.r-review,.blogx-hero__feat-thumb.r-review{background:linear-gradient(135deg,#123a7a,#1765e5)}
.blogx-card__img.r-loyal,.blogx-hero__feat-thumb.r-loyal{background:linear-gradient(135deg,#2a75f2,#6aa6ff)}
.blogx-card__img.r-kassa,.blogx-hero__feat-thumb.r-kassa{background:linear-gradient(135deg,#0f2444,#3d85ff)}
.blogx-card__img.r-uchet,.blogx-hero__feat-thumb.r-uchet{background:linear-gradient(135deg,#0a3d2e,#1fa876)}
.blogx-card__img.r-praktika,.blogx-hero__feat-thumb.r-praktika{background:linear-gradient(135deg,#3a1f5c,#8b4fd6)}
.blogx-card__img.r-market,.blogx-hero__feat-thumb.r-market{background:linear-gradient(135deg,#5c2c0a,#e07b2a)}
.blogx-card__img.r-ai,.blogx-hero__feat-thumb.r-ai{background:linear-gradient(135deg,#1a1f3d,#5b6fd6)}
.blogx-card__img.r-def,.blogx-hero__feat-thumb.r-def{background:linear-gradient(135deg,#33455f,#4a5b74)}

/* --- «Показать ещё» --- */
.blogx-more{display:flex; justify-content:center; margin:32px 0 8px}
.blogx-more button{border:1px solid var(--bx-blue); color:var(--bx-blue); background:#fff; font-weight:700; font-size:15px;
  padding:14px 42px; border-radius:12px; cursor:pointer; transition:.15s; font-family:inherit}
.blogx-more button:hover{background:var(--bx-blue); color:#fff}
.blogx-more button:disabled{opacity:.5; cursor:default}

/* --- CTA --- */
.blogx-cta{margin:50px 0 40px; background:linear-gradient(135deg,#0f2444,#0048a2); border-radius:26px;
  padding:44px 48px; color:#fff; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap}
.blogx-cta h2, .blogx-cta .blogx-cta__title{font-size:27px; margin:0 0 10px; font-weight:800; color:#fff}
.blogx-cta p{margin:0; color:rgba(255,255,255,.82); max-width:46ch}
.blogx-cta button, .blogx-cta button.btn-open{border:0 !important; background:var(--bx-amber) !important; color:#3a2600 !important;
  font-weight:800; font-size:16px; padding:16px 34px; border-radius:12px; cursor:pointer; white-space:nowrap; font-family:inherit;
  transition:transform .15s, box-shadow .15s; box-shadow:0 8px 22px rgba(255,179,41,.28)}
.blogx-cta button:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,179,41,.4)}

@media(max-width:900px){
  .blogx-hero{padding:34px 26px; flex-direction:column; align-items:stretch; gap:26px}
  .blogx-hero__left{max-width:none}
  .blogx-hero__feat{flex:1 1 auto; max-width:440px}
  .blogx-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .blogx-grid{grid-template-columns:1fr}
  .blogx-filter-meta{display:none}
  .blogx-cta{padding:32px 26px}
}

/* ============================================================
   Одиночная статья блога (single.php)
   ============================================================ */
.blogx-single{
  --bx-blue:#1765e5; --bx-ink:#0f2444; --bx-muted:#4a5b74; --bx-line:#dde9ff; --bx-chip:#eef4ff;
  max-width:820px; margin:0 auto;
}
.blogx-single .breadcrumbs{margin-bottom:6px}
.blogx-single__head{padding:22px 0 8px}
.blogx-single__cover{margin:20px 0 6px; border-radius:18px; overflow:hidden; line-height:0; box-shadow:0 12px 34px rgba(15,36,68,.14)}
.blogx-single__cover img{width:100%; height:auto; display:block}
.blogx-single__badge{display:inline-block; font-size:12px; font-weight:700; color:var(--bx-blue); background:var(--bx-chip);
  padding:6px 12px; border-radius:100px; margin-bottom:14px}
.blogx-single__title{font-size:clamp(26px,3.4vw,38px); line-height:1.14; font-weight:800; color:var(--bx-ink); margin:0 0 14px; letter-spacing:-.01em}
.blogx-single__meta{display:flex; gap:12px; align-items:center; color:var(--bx-muted); font-size:14px; flex-wrap:wrap}
.blogx-single__meta .blogx-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}
.blogx-single__sys{display:inline-flex; gap:6px}
.blogx-single__sys span{font-size:12px; font-weight:700; color:var(--bx-blue); background:var(--bx-chip); padding:4px 10px; border-radius:100px}
.blogx-article{font-size:17px; line-height:1.7; color:#23324a; padding:20px 0 10px}
.blogx-article h2{font-size:26px; font-weight:800; color:var(--bx-ink); margin:34px 0 12px; line-height:1.2}
.blogx-article h3{font-size:21px; font-weight:700; color:var(--bx-ink); margin:26px 0 10px}
.blogx-article p{margin:0 0 18px}
.blogx-article img{max-width:100%; height:auto; border-radius:14px; margin:10px 0}
.blogx-article ul,.blogx-article ol{margin:0 0 18px; padding-left:22px}
.blogx-article li{margin:0 0 8px}
.blogx-article a{color:var(--bx-blue); text-decoration:underline}
.blogx-article blockquote{border-left:4px solid var(--bx-blue); background:#f4f8ff; margin:20px 0; padding:14px 20px; border-radius:0 12px 12px 0; color:var(--bx-ink)}
.blogx-article table{width:100%; border-collapse:collapse; margin:18px 0; font-size:15px}
.blogx-article th,.blogx-article td{border:1px solid var(--bx-line); padding:10px 12px; text-align:left}
.blogx-article th{background:#eef4ff; font-weight:700; color:var(--bx-ink)}
.blogx-related{margin:40px 0 10px}
.blogx-related h2, .blogx-related__title{font-size:22px; font-weight:800; color:var(--bx-ink); margin:0 0 18px}
.blogx-related__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:760px){.blogx-related__grid{grid-template-columns:1fr}}

/* --- fix: обложка внутри статьи на всю ширину контейнера --- */
.blogx-single__cover{margin:20px 0 12px;border-radius:18px;overflow:hidden;line-height:0;box-shadow:0 12px 34px rgba(15,36,68,.14);background:transparent}
.blogx-single__cover img{width:100%!important;max-width:100%!important;height:auto!important;margin:0!important;display:block;border-radius:0!important}