/* =========================================================
   NIKOOSEN — BLOG DETAIL
   Main article box + sticky, independently-scrollable sidebar.
   ========================================================= */

.bd{
  position:relative;background:var(--bg);color:var(--text);
  --acc:#4F7CFF;--acc-soft:rgba(79,124,255,.12);--acc-line:rgba(79,124,255,.35);
}
.bd .en{font-family:ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:.12em}
.bd.acc-blue  {--acc:#4F7CFF;--acc-soft:rgba(79,124,255,.13);--acc-line:rgba(79,124,255,.38)}
.bd.acc-cyan  {--acc:#55D6FF;--acc-soft:rgba(85,214,255,.12);--acc-line:rgba(85,214,255,.38)}
.bd.acc-violet{--acc:#8B7CFF;--acc-soft:rgba(139,124,255,.15);--acc-line:rgba(139,124,255,.42)}
.bd.acc-pink  {--acc:#FF8AB7;--acc-soft:rgba(255,138,183,.12);--acc-line:rgba(255,138,183,.38)}
.bd.acc-mint  {--acc:#4AFFD4;--acc-soft:rgba(74,255,212,.10);--acc-line:rgba(74,255,212,.34)}
.bd .reveal{opacity:0;transform:translateY(28px)}

/* ---------- layout ---------- */
.bd-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(10px,3.4vw,15px);align-items:start;padding:100px 24px 50px}

/* ---------- main article box ---------- */
.bd-main{border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.28);min-width:0}

/* breadcrumb + centered title + meta */
.bd-head{padding-top:45px; padding-bottom: 25px; padding-inline: 10px; text-align:center}
.bd-crumb{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:.8rem;color:var(--muted);margin-bottom:20px; padding-block: 5px;}
.bd-crumb a{color:var(--muted);transition:color .25s}
.bd-crumb a:hover{color:var(--acc)}
.bd-crumb__sep{opacity:.45}
.bd-crumb__cur{color:var(--acc);font-weight:700}
.bd-title{font-size:clamp(0.9rem,3vw,1.4rem);font-weight:900;line-height:1.8;letter-spacing:-.01em;margin:0 auto;}
.bd-head__meta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
.bd-meta__item{display:inline-flex;align-items:center;gap:7px}
.bd-meta__item svg{color:var(--acc);opacity:.85}
.bd-dot{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.6}
.bd-cover{position:relative;min-height:400px;display:block;padding:0 10px;overflow:hidden}
.bd-cover::after{content:'';position:absolute;inset:0;}
/* the article image is shown whole: full width, natural height, small side gutters */
.bd-cover>.shot-img{position:relative;inset:auto;width:100%;height:auto;border-radius:5px}
.bd-cover__cat{position:absolute;z-index:1;inset-inline-start:38px;bottom:22px;font-size:.8rem;font-weight:700;color:#eaf2ff;background:rgba(6,13,24,.5);border:1px solid rgba(255,255,255,.18);border-radius:30px;padding:5px 14px;backdrop-filter:blur(6px)}
.bd-body{padding:34px clamp(10px,4vw,5px)}
.bd-body p{color:#c4d2e2;font-size:1rem;line-height:2.25;margin-bottom:18px}
.bd-body h2{font-size:1.3rem;font-weight:900;line-height:1.6;margin:32px 0 14px;position:relative;padding-inline-start:16px}
.bd-body h2::before{content:'';position:absolute;inset-inline-start:0;top:6px;bottom:6px;width:4px;border-radius:4px;background:var(--acc)}
.bd-body h2:first-child{margin-top:0}
.bd-body h3{font-size:1.08rem;font-weight:800;line-height:1.7;margin:26px 0 12px;color:var(--text)}
.bd-body a{color:var(--acc);text-decoration:none;border-bottom:1px solid var(--acc-line);transition:opacity .25s}
.bd-body a:hover{opacity:.8}
.bd-body strong{color:var(--text);font-weight:800}
.bd-body ul:not(.bd-list),.bd-body ol{margin:0 0 20px;padding-inline-start:24px;color:#c4d2e2;line-height:2.1}
.bd-body ul:not(.bd-list){list-style:disc}
.bd-body ol{list-style:decimal}
.bd-body li{margin-bottom:8px}
.bd-body li::marker{color:var(--acc)}
.bd-body img{max-width:100%;height:auto;border-radius:14px;margin:10px 0 20px}
.bd-body figure{margin:0 0 20px}
.bd-body figcaption{font-size:.8rem;color:var(--muted);margin-top:8px}
.bd-body code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.86em;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.bd-body pre{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:16px 18px;overflow:auto;margin:0 0 20px}
.bd-body pre code{background:none;border:0;padding:0}
.bd-body hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.bd-body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:.92rem}
.bd-body th,.bd-body td{border:1px solid var(--line);padding:10px 14px;text-align:start;color:#c4d2e2}
.bd-body th{background:var(--acc-soft);color:var(--text);font-weight:800}
.bd-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:12px}
.bd-list li{position:relative;padding-inline-start:30px;color:#c4d2e2;font-size:.96rem;line-height:1.95}
.bd-list li::before{content:'✓';position:absolute;inset-inline-start:0;top:0;color:var(--acc);font-weight:900}
.bd-body blockquote{
  margin:26px 0;padding:20px 24px;border-radius:14px;font-size:1.02rem;line-height:2;font-weight:700;color:var(--text);
  border-inline-start:3px solid var(--acc);background:var(--acc-soft);
}
.bd-tags{display:flex;flex-wrap:wrap;gap:10px;padding:0 clamp(22px,4vw,44px) 30px}
.bd-tags span{font-size:.78rem;color:var(--muted);border:1px solid var(--line);border-radius:30px;padding:6px 14px;background:rgba(255,255,255,.03)}

/* ---------- sidebar: pinned, moves down with the article ---------- */
.bd-side{position:sticky;top:96px;align-self:start}
.bd-side__inner{display:flex;flex-direction:column;gap:22px;padding-bottom:8px}

.bd-widget{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:22px;overflow:hidden}
.bd-widget__title{font-size:1rem;font-weight:900;margin-bottom:18px;position:relative;padding-inline-start:14px}
.bd-widget__title::before{content:'';position:absolute;inset-inline-start:0;top:3px;bottom:3px;width:4px;border-radius:4px;background:var(--acc)}

/* related posts */
.bd-related__list{display:flex;flex-direction:column}
.bd-rel{text-decoration:none;color:inherit;display:block;padding:18px 0;transition:.3s}
.bd-rel:first-child{padding-top:0}
.bd-rel:last-child{padding-bottom:0}
.bd-rel + .bd-rel{border-top:1px solid var(--line)}
.bd-rel__img{position:relative;height:130px;border-radius:5px;overflow:hidden;display:flex;align-items:flex-start;padding:10px;transition:transform .4s}
.bd-rel__img::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 120% at 100% 0%,rgba(255,255,255,.16),transparent 55%);opacity:.7;transition:.4s}
.bd-rel__cat{position:relative;z-index:1;font-size:.66rem;font-weight:700;color:#eaf2ff;background:rgba(6,13,24,.55);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:3px 10px}
.bd-rel h4{font-size:.85rem;font-weight:400;line-height:1.8;margin-top:14px;color:#d6e2f0;transition:transform .35s,color .3s;transform-origin:top right; text-align: center;}
.bd-rel:hover .bd-rel__img{transform:scale(.95)}
.bd-rel:hover .bd-rel__img::after{opacity:1}
.bd-rel:hover h4{color:var(--acc);transform:scale(.96)}

/* services */
.bd-services__list{display:flex;flex-direction:column;gap:10px}
.bd-srv{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.02);transition:.3s;
  --acc:#4F7CFF;--acc-soft:rgba(79,124,255,.12);--acc-line:rgba(79,124,255,.35);
}
.bd-srv.acc-blue  {--acc:#4F7CFF;--acc-soft:rgba(79,124,255,.13);--acc-line:rgba(79,124,255,.38)}
.bd-srv.acc-cyan  {--acc:#55D6FF;--acc-soft:rgba(85,214,255,.12);--acc-line:rgba(85,214,255,.38)}
.bd-srv.acc-violet{--acc:#8B7CFF;--acc-soft:rgba(139,124,255,.15);--acc-line:rgba(139,124,255,.42)}
.bd-srv.acc-pink  {--acc:#FF8AB7;--acc-soft:rgba(255,138,183,.12);--acc-line:rgba(255,138,183,.38)}
.bd-srv.acc-mint  {--acc:#4AFFD4;--acc-soft:rgba(74,255,212,.10);--acc-line:rgba(74,255,212,.34)}
.bd-srv:hover{border-color:var(--acc-line);background:var(--acc-soft);transform:translateX(-4px)}
.bd-srv__thumb{flex-shrink:0;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--acc);background:var(--acc-soft);border:1px solid var(--acc-line)}
.bd-srv__name{font-size:.86rem;font-weight:700;color:#d6e2f0}
.bd-srv:hover .bd-srv__name{color:var(--text)}

/* ---------- responsive: sidebar goes below content ---------- */
@media (max-width:980px){
  .bd-layout{grid-template-columns:1fr;padding-top:112px}
  .bd-side{position:static;order:2;margin-top:34px}
  .bd-main{order:1}
  .bd-related__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .bd-rel{padding:0}
  .bd-rel + .bd-rel{border-top:none}
  .bd-services__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .bd-layout{padding:104px 18px 72px}
  .bd-cover{min-height:170px}
  .bd-related__list,.bd-services__list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .bd *,.bd *::before,.bd *::after{animation:none!important;transition:none!important}
  .bd .reveal{opacity:1;transform:none}
}