/* ============================================================
   BLOG PAGE — PREMIUM (переливающиеся стили как в портфолио)
   ============================================================ */

/* ---- HERO блога: орбы + переливающийся заголовок ---- */
.blog-hero { position: relative; overflow: hidden; }
.blog-hero .gold-shine {
  background: linear-gradient(110deg,#D4AF37 20%,#fff5cc 45%,#D4AF37 70%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 200% auto; animation: goldShine 4s linear infinite;
}
@keyframes goldShine { to { background-position: 200% center; } }
.blog-hero-orbs span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; pointer-events: none; }
.blog-hero-orbs span:nth-child(1){ width:320px;height:320px;background:#D4AF37;top:-80px;right:-60px;animation:floatOrb 9s ease-in-out infinite; }
.blog-hero-orbs span:nth-child(2){ width:240px;height:240px;background:#1B6CA8;bottom:-60px;left:10%;animation:floatOrb 11s ease-in-out infinite reverse; }
.blog-hero-orbs span:nth-child(3){ width:180px;height:180px;background:#D4AF37;top:40%;left:45%;opacity:.2;animation:floatOrb 13s ease-in-out infinite; }
@keyframes floatOrb { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-30px)} }

/* ---- Верхняя панель: фильтр (в стиле filter-lux) + поиск ---- */
.blog-topbar { display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; margin-bottom:40px; }
.blog-filter { display:flex; flex-wrap:wrap; gap:12px; }
.blog-filter button {
  position:relative; padding:11px 22px; border-radius:50px; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid rgba(212,175,55,.2);
  color:rgba(255,255,255,.75); font-family:inherit; font-size:14px; font-weight:500;
  overflow:hidden; isolation:isolate;                 /* ← добавили isolation */
  transition:color .35s ease, border-color .35s ease, transform .25s ease;
}
.blog-filter button::before {
  content:""; position:absolute; inset:0; z-index:-1;  /* ← было 0, стало -1 */
  background:linear-gradient(135deg,#F0D48A,#D4AF37);
  transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.blog-filter button:hover { color:#fff; border-color:rgba(212,175,55,.5); transform:translateY(-2px); }
.blog-filter button.active { color:#0D1B2A; border-color:transparent; }
.blog-filter button.active::before { transform:scaleX(1); }

.blog-search { position:relative; min-width:250px; flex:0 0 auto; }
.blog-search input {
  width:100%; padding:12px 42px 12px 18px; border-radius:50px;
  background:rgba(255,255,255,.03); border:1px solid rgba(212,175,55,.2);
  color:#fff; font-family:inherit; font-size:14px; transition:.3s;
}
.blog-search input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.1); }
.blog-search input::placeholder { color:#5a6472; }
.blog-search svg { position:absolute; right:16px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--gold); }

/* ---- Раскладка: контент + сайдбар ---- */
.blog-layout { display:grid; grid-template-columns:1fr 320px; gap:40px; align-items:start; }

/* ---- FEATURED (главная статья) с бликом и градиент-рамкой ---- */
.blog-featured {
  position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  border:1px solid rgba(212,175,55,.18); border-radius:22px; overflow:hidden;
  background:rgba(255,255,255,.03); margin-bottom:28px; text-decoration:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease;
}
.blog-featured::before {
  content:''; position:absolute; inset:0; border-radius:22px; padding:1px; z-index:5;
  background:linear-gradient(135deg,rgba(212,175,55,.6),transparent 40%,transparent 60%,rgba(212,175,55,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.blog-featured:hover { transform:translateY(-6px); border-color:rgba(212,175,55,.5); box-shadow:0 30px 60px rgba(0,0,0,.5), 0 0 40px rgba(212,175,55,.12); }
.blog-featured:hover::before { opacity:1; }
.bf-thumb { min-height:280px; position:relative; display:flex; align-items:center; justify-content:center; font-size:80px; overflow:hidden;
  background:linear-gradient(135deg,#2a1a3e,#1B6CA8); }
.bf-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(13,27,42,.4)); }
.bf-thumb .p-ic { position:relative; z-index:1; transition:transform .6s ease; filter:drop-shadow(0 8px 20px rgba(0,0,0,.4)); }
.blog-featured:hover .bf-thumb .p-ic { transform:scale(1.15) rotate(-4deg); }
/* блик-полоса */
.bf-thumb .p-shine {
  position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:2;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-20deg); transition:left .7s ease;
}
.blog-featured:hover .bf-thumb .p-shine { left:120%; }
.bf-body { padding:36px; display:flex; flex-direction:column; }
.bf-badge { align-self:flex-start; padding:6px 15px; border-radius:30px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--navy); background:linear-gradient(135deg,#F0D48A,#D4AF37); margin-bottom:18px; box-shadow:0 4px 14px rgba(212,175,55,.35); }
.bf-body h2 { font-size:27px; font-weight:700; line-height:1.25; margin-bottom:14px; color:#fff; transition:color .3s; }
.blog-featured:hover .bf-body h2 { color:var(--gold); }
.bf-body p { color:rgba(255,255,255,.68); font-size:15px; margin-bottom:22px; }
.bf-meta { display:flex; gap:14px; align-items:center; color:var(--gray); font-size:13px; margin-top:auto; flex-wrap:wrap; }
.bf-meta .dot { width:4px; height:4px; border-radius:50%; background:var(--gold); }

/* ---- Сетка карточек с блик-эффектом ---- */
.blog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.blog-card {
  position:relative; display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  border:1px solid rgba(212,175,55,.15); background:var(--card); text-decoration:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease;
}
.blog-card::before {
  content:''; position:absolute; inset:0; border-radius:18px; padding:1px; z-index:5;
  background:linear-gradient(135deg,rgba(212,175,55,.6),transparent 40%,transparent 60%,rgba(212,175,55,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.blog-card:hover { transform:translateY(-8px); border-color:rgba(212,175,55,.5); box-shadow:0 30px 60px rgba(0,0,0,.5), 0 0 40px rgba(212,175,55,.12); }
.blog-card:hover::before { opacity:1; }
.bc-thumb { position:relative; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:46px; overflow:hidden; }
.bc-thumb .bc-ic { position:relative; z-index:1; filter:drop-shadow(0 6px 16px rgba(0,0,0,.4)); transition:transform .5s ease; }
.blog-card:hover .bc-thumb .bc-ic { transform:scale(1.15) rotate(-4deg); }
.bc-thumb.g1 { background:linear-gradient(135deg,#2a1a3e,#1B6CA8); }
.bc-thumb.g2 { background:linear-gradient(135deg,#0D1B2A,#1B6CA8); }
.bc-thumb.g3 { background:linear-gradient(135deg,#3a2a1a,#8a6a2a); }
.bc-thumb.g4 { background:radial-gradient(ellipse at 40% 40%,rgba(212,175,55,.35),#0f1e30 70%); }
.bc-thumb .p-shine {
  position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:2;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-20deg); transition:left .7s ease;
}
.blog-card:hover .bc-thumb .p-shine { left:120%; }
.bc-cat { position:absolute; top:12px; left:12px; z-index:3; padding:5px 13px; border-radius:30px; font-size:10.5px; font-weight:700;
  letter-spacing:.8px; text-transform:uppercase; color:var(--navy); background:linear-gradient(135deg,#F0D48A,#D4AF37); box-shadow:0 4px 12px rgba(212,175,55,.3); }
.bc-body { padding:22px 24px; display:flex; flex-direction:column; flex:1; }
.bc-body h3 { font-size:18px; font-weight:600; line-height:1.35; margin-bottom:10px; color:#fff; transition:color .3s; }
.blog-card:hover h3 { color:var(--gold); }
.bc-body p { color:rgba(255,255,255,.6); font-size:13.5px; margin-bottom:16px; flex:1; }
.bc-meta { display:flex; align-items:center; gap:10px; color:var(--gray); font-size:12px; margin-top:auto;
  padding-top:14px; border-top:1px solid rgba(255,255,255,.06); }
.bc-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--gold); }
.bc-more { color:var(--gold); font-weight:600; margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.bc-more span { transition:transform .3s; }
.blog-card:hover .bc-more span { transform:translateX(4px); }

/* reveal для карточек (как в port-lux) */
.blog-card.reveal, .blog-featured.reveal { opacity:0; transform:translateY(40px); transition:opacity .6s ease, transform .6s ease; }
.blog-card.reveal.visible, .blog-featured.reveal.visible { opacity:1; transform:translateY(0); }

/* Пустое состояние */
.blog-empty { text-align:center; padding:50px 0; color:var(--gray); display:none; }
.blog-empty.show { display:block; }

/* ---- Сайдбар с переливами ---- */
.blog-sidebar { position:sticky; top:120px; display:flex; flex-direction:column; gap:22px; }
.side-card { position:relative; border:1px solid rgba(212,175,55,.16); border-radius:18px; padding:26px; background:rgba(255,255,255,.03); overflow:hidden; transition:border-color .4s, box-shadow .4s; }
.side-card:hover { border-color:rgba(212,175,55,.35); box-shadow:0 20px 44px -24px rgba(0,0,0,.7); }
.side-card h4 { font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.side-pop a { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); transition:.3s; }
.side-pop a:last-child { border-bottom:none; }
.side-pop a:hover .sp-title { color:var(--gold); }
.sp-ic { width:46px; height:46px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px;
  background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(212,175,55,.04)); border:1px solid rgba(212,175,55,.2); transition:transform .4s, background .4s; }
.side-pop a:hover .sp-ic { transform:rotate(-8deg) scale(1.08); background:linear-gradient(135deg,rgba(212,175,55,.3),rgba(212,175,55,.08)); }
.sp-title { font-size:13.5px; font-weight:600; line-height:1.35; color:#fff; transition:color .3s; }
.sp-date { font-size:11.5px; color:var(--gray); margin-top:4px; }

.side-tags { display:flex; flex-wrap:wrap; gap:8px; }
.side-tags button { padding:7px 14px; border-radius:30px; font-size:12px; cursor:pointer; font-family:inherit;
  background:rgba(212,175,55,.08); border:1px solid rgba(212,175,55,.18); color:rgba(212,175,55,.9); transition:.3s; }
.side-tags button:hover { background:linear-gradient(135deg,#F0D48A,#D4AF37); color:var(--navy); transform:translateY(-2px); }

.side-sub { background:linear-gradient(160deg,rgba(212,175,55,.12),rgba(255,255,255,.02)); }
.side-sub p { color:rgba(255,255,255,.7); font-size:13px; margin:8px 0 16px; }
.side-sub input { width:100%; padding:12px 14px; border-radius:8px; margin-bottom:12px;
  background:var(--navy); border:1px solid rgba(255,255,255,.1); color:#fff; font-family:inherit; font-size:13px; }
.side-sub input:focus { border-color:var(--gold); }
.side-sub .btn { width:100%; justify-content:center; }

/* ---- Адаптив ---- */
@media (max-width:992px){ .blog-layout { grid-template-columns:1fr; } .blog-sidebar { position:static; } }
@media (max-width:768px){
  .blog-featured { grid-template-columns:1fr; }
  .bf-thumb { min-height:190px; font-size:60px; }
  .blog-grid { grid-template-columns:1fr; }
  .blog-search { width:100%; }
}