/* ============ Blog: hub + article, built on top of main.css tokens ============ */

.blog-hero{padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,40px)}
.blog-hero-eyebrow{font-size:14px;font-weight:700;color:var(--blue);letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.blog-hero h1{font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.15;max-width:760px}
.blog-hero p{font-size:clamp(15px,1.4vw,18px);color:var(--text-grey);max-width:640px;margin-top:14px}

/* ---- hub grid ---- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;padding:8px 0 60px}
.blog-card{display:flex;flex-direction:column;gap:16px;padding:26px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--white);transition:box-shadow .2s,transform .2s}
.blog-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.blog-card-tag{align-self:flex-start;font-size:12px;font-weight:700;color:var(--blue);background:var(--blue-light);padding:5px 12px;border-radius:20px;letter-spacing:.02em}
.blog-card h3{font-size:20px;font-weight:700;line-height:1.3}
.blog-card p{font-size:15px;color:var(--text-grey);line-height:1.55}
.blog-card-meta{margin-top:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-grey)}
.blog-card-arrow{font-size:15px;font-weight:600;color:var(--blue)}
.blog-empty-note{padding:40px;border-radius:var(--r-lg);background:var(--bg);color:var(--text-grey);font-size:15px;text-align:center}

/* ---- article shell ---- */
.article-wrap{max-width:100%;margin:0 auto;padding:clamp(28px,5vw,48px) 0 80px}
.article-eyebrow{font-size:13px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}
.article-title{font-size:clamp(28px,4vw,42px);font-weight:700;line-height:1.16;margin-bottom:18px}
.article-lede{font-size:clamp(17px,1.8vw,20px);color:var(--text-grey);line-height:1.6;margin-bottom:28px}

.article-meta-row{display:flex;align-items:center;gap:14px;padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:36px}
.article-meta-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.article-meta-text{display:flex;flex-direction:column;gap:2px;font-size:14px}
.article-meta-name{font-weight:700;color:var(--text)}
.article-meta-sub{color:var(--text-grey)}

.article-body{font-size:18px;line-height:1.75;color:var(--text)}
.article-body h2{font-size:clamp(22px,2.6vw,28px);font-weight:700;margin:44px 0 18px;line-height:1.28}
.article-body h2:first-child{margin-top:0}
.article-body p{margin-bottom:20px}
.article-body ul{margin:0 0 24px;padding-left:0;display:flex;flex-direction:column;gap:10px}
.article-body ul li{list-style:none;padding-left:26px;position:relative}
.article-body ul li::before{content:'';position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.article-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.article-body strong{font-weight:700}

.article-figure{margin:32px 0}
.article-figure svg{width:100%;height:auto;display:block;border-radius:var(--r-lg);background:var(--bg)}
.article-figure figcaption{margin-top:10px;font-size:14px;color:var(--text-grey);text-align:center}

.article-callout{background:var(--blue-light);border-radius:var(--r-lg);padding:24px 28px;margin:32px 0;font-size:16px;line-height:1.6}
.article-callout b{color:var(--blue-dark)}

.article-cta{margin-top:48px;padding:32px;border-radius:var(--r-lg);background:var(--text);color:var(--white);display:flex;flex-direction:column;gap:16px}
.article-cta h3{font-size:22px;font-weight:700}
.article-cta p{color:#C7CBE0;font-size:15px}
.article-cta-btns{display:flex;gap:14px;flex-wrap:wrap}

.article-related{display:block;margin-top:20px;font-size:16px;text-align:right}

/* ---- author block ---- */
.author-card{margin-top:52px;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.author-card-head{display:flex;align-items:center;gap:16px;padding:22px 26px;cursor:pointer;background:var(--bg);user-select:none}
.author-card-head img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.author-card-head-text{display:flex;flex-direction:column;gap:2px}
.author-card-head-name{font-weight:700;font-size:16px}
.author-card-head-role{font-size:14px;color:var(--text-grey)}
.author-card-chevron{margin-left:auto;transition:transform .25s;color:var(--text-grey)}
.author-card.open .author-card-chevron{transform:rotate(180deg)}
.author-card-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.author-card.open .author-card-body{max-height:600px}
.author-card-body-inner{padding:24px 26px 28px;display:flex;gap:20px;font-size:15px;line-height:1.6;color:var(--text-grey)}
.author-card-photo{width:120px;flex-shrink:0;border-radius:var(--r);overflow:hidden}
.author-card-photo img{width:100%;height:100%;object-fit:cover}
.author-card-body-inner p{margin-bottom:10px}
.author-card-body-inner p:last-child{margin-bottom:0}

/* ---- split feature blocks (full-width photo + text sections) ---- */
.split-feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;margin:clamp(48px,6vw,80px) 0}
.split-feature-media,.split-feature-text{min-width:0}
.split-feature-media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-sm)}
.split-feature-media img{width:100%;height:100%;object-fit:cover;display:block}
.split-feature-text h2{font-size:clamp(22px,2.6vw,28px);font-weight:700;margin-bottom:16px;line-height:1.28}
.split-feature-text p{font-size:18px;line-height:1.75;color:var(--text);margin-bottom:16px}
.split-feature-text ul{margin:0 0 16px;padding-left:0;display:flex;flex-direction:column;gap:10px}
.split-feature-text ul li{list-style:none;padding-left:26px;position:relative;font-size:16px;line-height:1.55}
.split-feature-text ul li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.split-feature-caption{font-size:14px;color:var(--text-grey);border-left:3px solid var(--blue);padding-left:14px;margin-top:20px}
.split-feature-media-wrap{display:flex;flex-direction:column;min-width:0}
.split-feature-demo-link{width:100%;margin-top:14px;box-shadow:var(--shadow-sm)}
.split-feature-demo-link svg{flex-shrink:0}

.footer .footer-links {white-space:nowrap;}
@media (max-width:680px){
  .split-feature{grid-template-columns:1fr;gap:20px;margin:36px 0}
  .split-feature-media{order:1;aspect-ratio:16/10}
  .split-feature-text{order:2}
}

@media (max-width:600px){
  .author-card-body-inner{flex-direction:column}
  .author-card-photo{width:100%;height:180px}
}

/* Breadcrumbs on narrow screens: keep Главная/Блог fully visible and never wrap —
   only the current (usually long) page title truncates with an ellipsis.
   Horizontal scroll stays as a safety net for extreme cases. */
@media (max-width:600px){
  .breadcrumbs .container{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .breadcrumbs .container::-webkit-scrollbar{display:none}
  .breadcrumb-link,.breadcrumb-sep{white-space:nowrap;flex-shrink:0}
  .breadcrumb-current{
    white-space:nowrap;
    flex-shrink:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* Footer on blog pages isn't centered on mobile like the rest of the site —
   the main-site (BEM) footer centers its columns and bottom bar below 768px,
   this blog footer (.footer .footer-top / .footer-cols / .footer-bottom) didn't. */
@media (max-width:768px){
  .footer .footer-top{align-items:center;text-align:center}
  .footer .footer-brand{align-items:center}
  .footer .footer-cols{align-items:center;justify-content:center;text-align:center;width:100%}
  .footer .footer-col{align-items:center}
  .footer .footer-links{align-items:center;text-align:center}
  .footer .footer-contacts{align-items:center;text-align:center}
  .footer .footer-bottom{align-items:center;justify-content:center;text-align:center;flex-direction:column;gap:10px}
  .footer .footer-bottom .footer-policy{display:flex;justify-content:center;width:100%;flex-wrap:wrap}
}

/* Services list in the footer: 2 columns on desktop instead of one long list */
@media (min-width:769px){
  .footer .footer-col{width:280px;min-width:280px}
  .footer .footer-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:20px;
    row-gap:16px;
  }
}

/* Footer bottom-bar links (privacy policy + public offer) */
.footer .footer-policy{display:flex;gap:20px;flex-wrap:wrap}
.footer .footer-policy a{font-size:17px;color:var(--blue);text-decoration:underline}


/* ---- toolbar: category filters + search (blog hub) ---- */
.blog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 20px;margin:4px 0 32px;border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--border)}
.blog-filters{display:flex;gap:8px;flex-wrap:wrap}
.blog-filter{appearance:none;-webkit-appearance:none;-moz-appearance:none;font-family:inherit;line-height:1.2;padding:10px 22px;border-radius:999px;border:1px solid var(--border);background:var(--white);font-size:14px;font-weight:600;color:var(--text-grey);cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s;white-space:nowrap}
.blog-filter:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
.blog-filter:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.blog-filter--active{background:var(--blue);border-color:var(--blue);color:var(--white);box-shadow:0 4px 14px rgba(59,91,219,.28)}
.blog-filter--active:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:var(--white)}
.blog-search{position:relative;flex-shrink:0;width:300px;max-width:100%}
.blog-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-grey)}
.blog-search input{box-sizing:border-box;width:100%;height:44px;padding:0 16px 0 44px;border-radius:999px;border:1px solid var(--border);background:var(--white);font-family:inherit;font-size:14px;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s}
.blog-search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light)}
.blog-search input::placeholder{color:var(--text-grey)}

/* second tag color, so Frontend visually differs from Вёрстка */
.blog-card-tag--frontend{color:#0F9D58;background:#E6F6EC}
.blog-card-tag--wordpress{color:#21759B;background:#E5F1F5}
.blog-card-tag--seo{color:#B45309;background:#FEF3E0}

@media (max-width:768px){
  .blog-toolbar{flex-direction:column;align-items:stretch;gap:14px;padding:14px 16px}
  .blog-search{width:100%}
  .blog-filters{flex-wrap:wrap}
}
@media (max-width:480px){
  .blog-toolbar{padding:12px 14px;border-radius:16px}
  .blog-filters{gap:6px}
  .blog-filter{padding:8px 14px;font-size:13px}
  .blog-search input{height:42px;font-size:13px;padding-left:40px}
  .blog-search svg{left:14px;width:16px;height:16px}
}