/* ============================================================
   PAGES — Shared styles for core pages (about, offer,
   privacy, blog-static, cases, contact).
   Loaded via wp_enqueue_scripts for core (non-blog) pages.
   Does NOT apply to homepage (has own inline CSS).
   ============================================================ */

/* ── PAGE HERO ───────────────────────────────────────────── */
.page-hero { background: var(--navy); padding: 80px 0; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(232,135,58,.07) 0%, transparent 60%); }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px); background-size: 60px 60px; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: white; margin-bottom: 16px; }
.page-hero p, .page-hero-desc { color: rgba(255,255,255,.65); font-size: 1.05rem; max-width: 640px; line-height: 1.7; }

/* ── BREADCRUMB ───────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: rgba(255,255,255,.4); margin-bottom: 20px; flex-wrap: wrap; }
.breadcrumb a { color: rgba(255,255,255,.65); transition: color .2s; }
.breadcrumb a:hover { color: var(--saffron); }
.breadcrumb svg { width: 12px; height: 12px; }

/* ── BLOG STATIC PAGE ────────────────────────────────────── */
.filter-bar { background:#fff; border-bottom:1px solid rgba(13,27,42,.10); padding:0; position:sticky; top:72px; z-index:90 }
.filter-bar .container { display:flex; align-items:center; gap:0; overflow-x:auto }
.filter-item { padding:16px 20px; font-size:.85rem; font-weight:600; color:#6B7280; white-space:nowrap; border-bottom:3px solid transparent; cursor:pointer; transition:all .2s; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; line-height:1.4; outline:none }
.filter-item:hover { color:#0D1B2A }
.filter-item.active { color:#E8873A; border-bottom-color:#E8873A }
.filter-item:focus-visible { outline:2px solid #E8873A; outline-offset:-2px }

.blog-section { background:var(--cream); padding:80px 0 }
.blog-layout { display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start }

.featured-post { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); margin-bottom:32px; transition:all .3s }
.featured-post:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.post-cover { height:280px; display:flex; align-items:flex-end; padding:28px; position:relative; overflow:hidden }
.cover-1 { background:linear-gradient(135deg,#0D1B2A 0%,#1a3a5c 60%,#0D1B2A 100%) }
.cover-2 { background:linear-gradient(135deg,#1a2a0a,#2d5a0e) }
.cover-3 { background:linear-gradient(135deg,#2a0a1a,#5c1a2a) }
.post-cover::before { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%) }
.cover-emoji { position:absolute; top:24px; right:24px; font-size:3rem; opacity:.3 }
.post-cover-content { position:relative; z-index:1 }
.post-tag { display:inline-block; background:rgba(232,135,58,.9); color:white; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:20px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px }
.post-cover h2 { color:white; font-size:clamp(1.2rem,2.5vw,1.6rem); line-height:1.25; margin-bottom:8px }
.post-cover-meta { color:rgba(255,255,255,.55); font-size:.8rem; display:flex; align-items:center; gap:12px }
.post-body { padding:28px }
.post-excerpt { color:var(--muted); line-height:1.7; margin-bottom:20px; font-size:.95rem }
.post-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.post-read-time { display:flex; align-items:center; gap:5px; font-size:.8rem; color:var(--muted) }
.post-read-time svg { width:14px; height:14px; color:var(--saffron) }
.read-more { display:flex; align-items:center; gap:6px; color:var(--saffron); font-weight:600; font-size:.875rem; transition:gap .2s }
.read-more:hover { gap:10px }
.read-more svg { width:16px; height:16px }

.posts-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px }
.post-card { background:var(--white); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; transition:all .3s }
.post-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.post-card-cover { height:140px; display:flex; align-items:flex-end; padding:16px; position:relative; overflow:hidden }
.post-card-cover::before { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 60%) }
.post-card-emoji { position:absolute; top:12px; right:12px; font-size:1.8rem; opacity:.3 }
.post-card-tag { position:relative; z-index:1; background:rgba(232,135,58,.9); color:white; font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:12px; text-transform:uppercase; letter-spacing:.05em }
.post-card-body { padding:18px }
.post-card-body h3 { color:var(--navy); font-size:.95rem; margin-bottom:8px; line-height:1.35 }
.post-card-body p { color:var(--muted); font-size:.82rem; line-height:1.55; margin-bottom:14px }
.post-card-meta { display:flex; justify-content:space-between; align-items:center; font-size:.75rem; color:var(--muted) }
.post-card-meta a { color:var(--saffron); font-weight:600 }

.sidebar { display:flex; flex-direction:column; gap:24px; position:sticky; top:96px }
.sidebar .sidebar-widget, .sidebar-widget { background:var(--white); border-radius:var(--radius-lg); padding:28px; border:1px solid var(--border) }
.sidebar .widget-title, .widget-title { font-family:var(--ff-head); font-weight:700; color:var(--navy); font-size:1.05rem; margin-bottom:18px; padding-bottom:14px; border-bottom:2px solid var(--cream2) }
.tg-promo { background:linear-gradient(135deg,#0088CC,#229ED9); border-radius:var(--radius-lg); padding:24px; text-align:center; color:white }
.tg-promo svg { width:36px; height:36px; margin:0 auto 12px }
.tg-promo h4 { font-size:1rem; margin-bottom:8px }
.tg-promo p { font-size:.82rem; opacity:.8; margin-bottom:16px; line-height:1.5 }
.tg-promo a { display:inline-flex; align-items:center; gap:6px; background:white; color:#229ED9; padding:10px 20px; border-radius:8px; font-weight:700; font-size:.875rem; transition:all .2s }
.tg-promo a:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.2) }
.popular-list { display:flex; flex-direction:column; gap:14px }
.popular-item { display:flex; gap:12px; cursor:pointer }
.popular-num { font-family:var(--ff-head); font-size:1.2rem; font-weight:900; color:var(--cream2); min-width:24px; line-height:1; margin-top:2px }
.popular-title { font-size:.875rem; font-weight:600; color:var(--navy); margin-bottom:4px; line-height:1.35; transition:color .2s }
.popular-item:hover .popular-title { color:var(--saffron) }
.popular-meta { font-size:.75rem; color:var(--muted) }
.cat-list { display:flex; flex-direction:column; gap:8px }
.cat-list .cat-item { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-radius:8px; cursor:pointer; transition:all .2s; font-size:.875rem }
.cat-list .cat-item:hover { background:var(--cream); color:var(--saffron) }
.cat-count { background:var(--cream2); color:var(--muted); font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:12px }

.newsletter { background:var(--navy); padding:64px 0 }
.newsletter .container { display:grid; grid-template-columns:1fr auto; gap:64px; align-items:center }
.newsletter h2 { color:white; margin-bottom:8px; font-size:clamp(1.4rem,2.5vw,2rem) }
.newsletter p { color:rgba(255,255,255,.6); font-size:.95rem }
.newsletter-form { display:flex; gap:10px; flex-shrink:0 }
.newsletter-form input { padding:13px 20px; border-radius:8px; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:white; font-family:var(--ff-body); font-size:.95rem; min-width:280px; outline:none; transition:border .2s }
.newsletter-form .btn { padding:13px 28px }
.newsletter-form input::placeholder { color:rgba(255,255,255,.35) }
.newsletter-form input:focus { border-color:var(--saffron) }
.nl-msg { margin-top:12px; font-weight:600; font-size:.9rem }
.nl-msg.success { color:#4ade80 }
.nl-msg.error { color:#f87171 }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap }

@media (max-width:1024px) {
  .blog-layout { grid-template-columns:1fr }
  .sidebar { position:static }
  .newsletter .container { grid-template-columns:1fr }
}
@media (max-width:768px) {
  .posts-grid { grid-template-columns:1fr }
  .newsletter-form { flex-direction:column }
  .newsletter-form input { min-width:auto }
}
@media (max-width:600px) {
  .posts-grid { grid-template-columns:1fr !important }
  .newsletter-form { flex-direction:column !important }
  .newsletter-form input { min-width:auto !important }
}

/* ── SERVICES HERO OVERRIDE ───────────────────────────────── */
/* Services page has a 2-col hero with price cards on the right */
.page-hero--services .container { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; }
@media (max-width: 1024px) {
  .page-hero--services .container { grid-template-columns: 1fr; }
}

/* ── RELATED CLUSTER LINKS ("Читайте также" / "Related Articles") ── */
/* Pillar-cluster internal linking blocks. Replaces inline styles.    */
.related-cluster {
  background: var(--cream2);
  padding: 28px 0 32px;
  border-top: 1px solid var(--cream2);
  border-bottom: 1px solid rgba(13,27,42,0.06);
}
.related-cluster .container { max-width: var(--max-width-content); }
.related-cluster__title {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--saffron);
  margin-bottom: 14px;
}
.related-cluster__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.related-cluster__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.related-cluster__item::before {
  content: '→';
  color: var(--saffron);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.related-cluster__item a {
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.related-cluster__item a:hover {
  color: var(--saffron);
  border-bottom-color: rgba(232,135,58,0.4);
}
@media (max-width: 768px) {
  .related-cluster { padding: 22px 0 24px; }
}

/* ── SEO BLOG INTRO SECTION (blog-static pages) ──────────────── */
.seo-blog-intro {
  background: var(--cream);
  padding: 48px 0 36px;
  border-bottom: 1px solid var(--cream2);
}
.seo-blog-intro .container { max-width: var(--max-width-content); }
.seo-blog-intro h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  color: var(--navy);
  margin-bottom: 18px;
  font-family: var(--ff-head);
  font-weight: 700;
}
.seo-blog-intro p {
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 14px;
}
.seo-blog-intro p:last-child { margin-bottom: 0; }
.seo-blog-intro p:first-of-type { color: var(--text); }
.seo-blog-intro p:not(:first-of-type) { color: var(--muted); font-size: .95rem; }

/* ── SEO H2 IN OFFER / PRIVACY PAGES ────────────────────────── */
.legal-seo-h2 {
  font-family: var(--ff-head);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  color: var(--navy);
  margin: 28px 0 14px;
  font-weight: 700;
}