/* ==========================================================================
   BLOG  —  css/panel/ethical/blog.css
   Uses the panel's own --nv-* tokens, so accent colour + dark mode follow the site.
   Mobile first; breakpoints: 640 / 900 / 1180.
   ========================================================================== */

.bl{
  --bl-gap:20px;
  max-width:1180px;margin:0 auto;
  padding:4px 0 72px;
  color:var(--nv-text);
  font-size:15px;line-height:1.6;
  overflow-wrap:anywhere;
}
.bl *,.bl *::before,.bl *::after{box-sizing:border-box;}
.bl a{text-decoration:none;}
.bl :focus-visible{outline:2px solid var(--nv-accent);outline-offset:2px;border-radius:6px;}

/* ── breadcrumbs ── */
.bl-crumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:13px;color:var(--nv-muted);margin:2px 0 18px;
}
.bl-crumbs a{color:var(--nv-muted);}
.bl-crumbs a:hover{color:var(--nv-accent);}
.bl-crumbs i{font-size:9px;opacity:.6;}
.bl-crumbs span{color:var(--nv-text-soft);}

/* ── header + search ── */
.bl-head{display:flex;flex-direction:column;gap:16px;margin-bottom:20px;}
.bl-title{
  margin:0;font-size:clamp(28px,5vw,42px);font-weight:800;line-height:1.1;
  letter-spacing:-.03em;color:var(--nv-text);text-transform:none;
}
.bl-lead{margin:10px 0 0;max-width:62ch;font-size:clamp(15px,2vw,17px);color:var(--nv-text-soft);line-height:1.55;}

.bl-search{
  position:relative;display:flex;align-items:center;width:100%;
  background:var(--nv-surface);border:1px solid var(--nv-border-2);
  border-radius:999px;transition:border-color .15s,box-shadow .15s;
}
.bl-search:focus-within{border-color:var(--nv-accent);box-shadow:0 0 0 4px var(--nv-accent-soft);}
.bl-search > i{position:absolute;left:16px;color:var(--nv-muted);font-size:14px;pointer-events:none;}
.bl-search input[type=search]{
  flex:1;min-width:0;height:46px;border:0;background:transparent;outline:0;
  padding:0 44px 0 42px;font:inherit;font-size:15px;color:var(--nv-text);
  -webkit-appearance:none;appearance:none;
}
.bl-search input::placeholder{color:var(--nv-muted);}
.bl-search input[type=search]::-webkit-search-cancel-button{display:none;}
.bl-search__x{
  position:absolute;right:8px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;color:var(--nv-muted);
}
.bl-search__x:hover{background:var(--nv-surface-2);color:var(--nv-text);}

/* ── category chips (one scrolling row on phones) ── */
.bl-chips{
  display:flex;gap:8px;margin:0 -4px 22px;padding:2px 4px 6px;
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.bl-chips::-webkit-scrollbar{display:none;}
.bl-chip{
  flex:0 0 auto;scroll-snap-align:start;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--nv-text-soft);background:var(--nv-surface);border:1px solid var(--nv-border);
  white-space:nowrap;transition:border-color .15s,color .15s,background .15s;
}
.bl-chip b{font-weight:700;font-size:11px;color:var(--nv-muted);}
.bl-chip:hover{border-color:var(--nv-accent);color:var(--nv-accent);}
.bl-chip.is-on{background:var(--nv-accent);border-color:var(--nv-accent);color:#fff;}
.bl-chip.is-on b{color:rgba(255,255,255,.8);}

.bl-result{margin:0 0 18px;font-size:14px;color:var(--nv-text-soft);}
.bl-result a{margin-left:10px;font-weight:600;color:var(--nv-accent);}

/* ── auto thumbnail (posts without a cover image) ── */
.bl-gen{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(14px,3vw,22px);color:#fff;overflow:hidden;
  background:
    radial-gradient(120% 95% at 100% 0%,hsl(var(--h) 82% 46% / .60),transparent 62%),
    radial-gradient(90% 80% at 0% 100%,hsl(var(--h) 70% 38% / .30),transparent 65%),
    linear-gradient(160deg,#171923,#0b0c12);
}
.bl-gen__cat{
  align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);
  backdrop-filter:blur(4px);
}
.bl-gen__title{
  font-size:clamp(17px,2.4vw,22px);font-weight:800;line-height:1.2;letter-spacing:-.02em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.bl-gen__site{font-size:12px;font-weight:600;opacity:.75;}

.bl-thumb__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* ── meta line ── */
.bl-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:12.5px;color:var(--nv-muted);}
.bl-cat{font-weight:700;color:var(--nv-accent);}
.bl-tag{
  display:inline-flex;align-items:center;font-size:12px;font-weight:700;
  padding:4px 11px;border-radius:999px;background:var(--nv-accent-soft);color:var(--nv-accent);
}
a.bl-tag:hover{background:var(--nv-accent);color:#fff;}

.bl-more{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--nv-accent);margin-left:auto;}
.bl-more i{font-size:11px;transition:transform .15s;}
.bl-more:hover i{transform:translateX(3px);}

/* ── featured hero ── */
.bl-hero{
  display:grid;grid-template-columns:1fr;margin-bottom:var(--bl-gap);
  background:var(--nv-card);border:1px solid var(--nv-border);border-radius:var(--nv-r-lg);
  box-shadow:var(--nv-sh);overflow:hidden;
}
.bl-hero__media{position:relative;display:block;aspect-ratio:16/9;background:var(--nv-surface-2);}
.bl-hero__body{display:flex;flex-direction:column;gap:12px;padding:20px;}
.bl-hero__title{margin:0;font-size:clamp(21px,3.4vw,30px);font-weight:800;line-height:1.2;letter-spacing:-.025em;}
.bl-hero__title a{color:var(--nv-text);}
.bl-hero__title a:hover{color:var(--nv-accent);}
.bl-hero__excerpt{margin:0;color:var(--nv-text-soft);font-size:15px;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.bl-meta--foot{margin-top:auto;padding-top:6px;}

/* ── card grid ── */
.bl-grid{display:grid;grid-template-columns:1fr;gap:var(--bl-gap);}
.bl-card{
  display:flex;flex-direction:column;min-width:0;
  background:var(--nv-card);border:1px solid var(--nv-border);border-radius:var(--nv-r);
  box-shadow:var(--nv-sh);overflow:hidden;
  transition:border-color .18s,box-shadow .18s;
}
.bl-card:hover{border-color:var(--nv-border-2);box-shadow:var(--nv-sh-lg);}
.bl-card__media{position:relative;display:block;aspect-ratio:16/9;background:var(--nv-surface-2);overflow:hidden;}
.bl-card__body{display:flex;flex-direction:column;gap:9px;padding:16px 16px 14px;flex:1;}
.bl-card__title{margin:0;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.015em;text-transform:none;}
.bl-card__title a{color:var(--nv-text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.bl-card__title a:hover{color:var(--nv-accent);}
.bl-card__excerpt{margin:0;font-size:14px;line-height:1.6;color:var(--nv-text-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.bl-card__foot{
  display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:12px;
  border-top:1px solid var(--nv-border);
}
.bl-time{font-size:12.5px;color:var(--nv-muted);white-space:nowrap;}
.bl-time i{margin-right:4px;}

/* ── pagination ── */
.bl-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:32px;}
.bl-pager a{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-width:40px;height:40px;padding:0 12px;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--nv-text-soft);
  background:var(--nv-surface);border:1px solid var(--nv-border);
}
.bl-pager a:hover{border-color:var(--nv-accent);color:var(--nv-accent);}
.bl-pager a.is-on{background:var(--nv-accent);border-color:var(--nv-accent);color:#fff;}
.bl-pager__nums{display:flex;gap:6px;}

/* ── empty state ── */
.bl-empty{text-align:center;padding:56px 20px;background:var(--nv-card);border:1px dashed var(--nv-border-2);border-radius:var(--nv-r-lg);}
.bl-empty > i{font-size:32px;color:var(--nv-accent);opacity:.6;}
.bl-empty h1,.bl-empty h2{margin:14px 0 6px;font-size:20px;font-weight:800;}
.bl-empty p{margin:0 0 18px;color:var(--nv-text-soft);}

/* ==========================================================================
   POST PAGE
   ========================================================================== */
.bl-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:900;pointer-events:none;background:transparent;}
.bl-progress span{display:block;height:100%;width:0;background:var(--nv-accent);transition:width .08s linear;}

.bl-article__head{max-width:800px;margin:0 auto 22px;}
.bl-article__title{
  margin:14px 0 0;font-size:clamp(26px,5.2vw,44px);font-weight:800;
  line-height:1.15;letter-spacing:-.03em;color:var(--nv-text);text-transform:none;
}
.bl-article__lead{margin:14px 0 0;font-size:clamp(16px,2.2vw,19px);line-height:1.55;color:var(--nv-text-soft);}
.bl-byline{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:13px;color:var(--nv-muted);}
.bl-byline i{margin-right:6px;}
.bl-byline__by{font-weight:700;color:var(--nv-text-soft);}

.bl-cover{
  max-width:960px;margin:0 auto 32px;border-radius:var(--nv-r-lg);overflow:hidden;
  aspect-ratio:16/9;background:var(--nv-surface-2);border:1px solid var(--nv-border);
}
.bl-cover img{width:100%;height:100%;object-fit:cover;display:block;}

.bl-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;max-width:760px;margin:0 auto;}
.bl-main{min-width:0;}

/* table of contents */
.bl-toc ol{list-style:none;margin:0;padding:0;}
.bl-toc a{display:block;color:var(--nv-text-soft);font-size:14px;line-height:1.4;padding:7px 0 7px 14px;border-left:2px solid var(--nv-border);}
.bl-toc a:hover{color:var(--nv-accent);}
.bl-toc a.is-on{color:var(--nv-accent);border-left-color:var(--nv-accent);font-weight:600;}
.bl-toc .lv3 a{padding-left:28px;font-size:13px;}
.bl-toc--inline{
  margin:0 0 26px;background:var(--nv-card);border:1px solid var(--nv-border);
  border-radius:var(--nv-r);overflow:hidden;
}
.bl-toc--inline summary{
  display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:700;color:var(--nv-text);
}
.bl-toc--inline summary::-webkit-details-marker{display:none;}
.bl-toc--inline summary i{color:var(--nv-accent);}
.bl-toc--inline summary span{margin-left:auto;font-size:12px;font-weight:600;color:var(--nv-muted);}
.bl-toc--inline summary::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:11px;color:var(--nv-muted);transition:transform .2s;}
.bl-toc--inline[open] summary::after{transform:rotate(180deg);}
.bl-toc--inline ol{padding:0 16px 14px;}
.bl-side{display:none;}

/* article body typography */
.bl-content{font-size:17px;line-height:1.85;color:var(--nv-text-soft);}
.bl-content > *:first-child{margin-top:0;}
.bl-content p{margin:0 0 1.25em;}
.bl-content h2,.bl-content h3,.bl-content h4{
  color:var(--nv-text);font-weight:800;letter-spacing:-.02em;line-height:1.25;
  text-transform:none;scroll-margin-top:84px;
}
.bl-content h2{font-size:clamp(22px,3.4vw,28px);margin:2em 0 .6em;padding-top:.2em;}
.bl-content h3{font-size:clamp(18px,2.6vw,21px);margin:1.7em 0 .5em;}
.bl-content h4{font-size:17px;margin:1.5em 0 .4em;}
.bl-content a{color:var(--nv-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.bl-content a:hover{text-decoration-thickness:2px;}
.bl-content strong,.bl-content b{color:var(--nv-text);font-weight:700;}
.bl-content ul,.bl-content ol{margin:0 0 1.3em;padding-left:1.4em;}
.bl-content li{margin:.45em 0;padding-left:.25em;}
.bl-content li::marker{color:var(--nv-accent);}
.bl-content img{max-width:100%;height:auto !important;border-radius:var(--nv-r);margin:.4em auto;display:block;}
.bl-content figure{margin:1.6em 0;}
.bl-content figcaption{margin-top:8px;text-align:center;font-size:13px;color:var(--nv-muted);}
.bl-content blockquote{
  margin:1.6em 0;padding:16px 20px;border-left:4px solid var(--nv-accent);
  background:var(--nv-accent-soft);border-radius:0 var(--nv-r-sm) var(--nv-r-sm) 0;
  color:var(--nv-text);font-size:1.02em;
}
.bl-content blockquote p:last-child{margin-bottom:0;}
.bl-content hr{border:0;border-top:1px solid var(--nv-border);margin:2.2em 0;}
.bl-content code{padding:2px 6px;border-radius:6px;background:var(--nv-surface-2);color:var(--nv-text);font-size:.9em;}
.bl-content pre{margin:1.5em 0;padding:16px;overflow-x:auto;border-radius:var(--nv-r-sm);background:var(--nv-surface-2);border:1px solid var(--nv-border);font-size:14px;line-height:1.6;}
.bl-content pre code{padding:0;background:none;}
.bl-content > div[style*="gradient"],.bl-content > p[style*="gradient"],.bl-content > div[style*="background"]{
  padding:18px 20px;border-radius:var(--nv-r);margin:1.6em 0;line-height:1.6;
}
.bl-content div[style*="gradient"] a,.bl-content div[style*="background"] a{color:inherit;}

.bl-table-wrap{margin:1.6em 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--nv-border);border-radius:var(--nv-r-sm);}
.bl-table-wrap table{width:100% !important;min-width:520px;border-collapse:collapse;font-size:14.5px;line-height:1.5;margin:0;}
.bl-table-wrap th,.bl-table-wrap td{padding:11px 14px;border-bottom:1px solid var(--nv-border);border-right:1px solid var(--nv-border);text-align:left;vertical-align:top;}
.bl-table-wrap th:last-child,.bl-table-wrap td:last-child{border-right:0;}
.bl-table-wrap tr:last-child td{border-bottom:0;}
.bl-table-wrap th{background:var(--nv-surface-2);color:var(--nv-text);font-weight:700;}
.bl-embed{position:relative;margin:1.6em 0;aspect-ratio:16/9;border-radius:var(--nv-r);overflow:hidden;background:#000;}
.bl-embed iframe,.bl-embed video{position:absolute;inset:0;width:100% !important;height:100% !important;border:0;}

/* call to action */
.bl-cta{
  display:flex;flex-direction:column;gap:18px;margin:40px 0 26px;padding:22px;
  border-radius:var(--nv-r-lg);color:#fff;
  background:
    radial-gradient(90% 140% at 100% 0%,rgba(255,255,255,.18),transparent 60%),
    linear-gradient(135deg,var(--nv-accent),var(--nv-accent-press));
}
.bl-cta h2{margin:0 0 6px;font-size:clamp(19px,3vw,24px);font-weight:800;letter-spacing:-.02em;color:#fff;text-transform:none;}
.bl-cta p{margin:0;color:rgba(255,255,255,.88);font-size:15px;line-height:1.55;}
.bl-cta__btns{display:flex;flex-wrap:wrap;gap:10px;}
.bl-cta .nv-btn{flex:1 1 150px;justify-content:center;}
.bl-cta .nv-btn-primary{background:#fff;color:var(--nv-accent-press);border-color:#fff;}
.bl-cta .nv-btn-primary:hover{background:rgba(255,255,255,.9);color:var(--nv-accent-press);}
.bl-cta .nv-btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.bl-cta .nv-btn-outline:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff;}

/* share */
.bl-share{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:18px 0;border-top:1px solid var(--nv-border);border-bottom:1px solid var(--nv-border);}
.bl-share__label{font-size:13px;font-weight:700;color:var(--nv-text);margin-right:6px;}
.bl-share__b{
  position:relative;display:inline-grid;place-items:center;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--nv-border-2);background:var(--nv-surface);
  color:var(--nv-text-soft);font-size:16px;cursor:pointer;padding:0;transition:all .15s;
}
.bl-share__b:hover{color:#fff;border-color:transparent;}
.bl-share__b.wa:hover{background:#25D366;}
.bl-share__b.tg:hover{background:#229ED9;}
.bl-share__b.x:hover{background:#000;}
.bl-share__b.fb:hover{background:#1877F2;}
.bl-share__b.in:hover{background:#0A66C2;}
.bl-share__b.copy:hover,.bl-share__b.native:hover{background:var(--nv-accent);}
.bl-share__b[hidden]{display:none;}
.bl-share__tip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  padding:5px 10px;border-radius:8px;background:var(--nv-text);color:var(--nv-surface);
  font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:all .18s;
}
.bl-share__b.is-copied .bl-share__tip{opacity:1;transform:translateX(-50%);}

/* prev / next */
.bl-steps{display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px;}
.bl-step{
  display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:0;
  background:var(--nv-card);border:1px solid var(--nv-border);border-radius:var(--nv-r);
  transition:border-color .15s;
}
.bl-step:hover{border-color:var(--nv-accent);}
.bl-step small{font-size:12px;font-weight:600;color:var(--nv-muted);}
.bl-step strong{font-size:14.5px;font-weight:700;line-height:1.35;color:var(--nv-text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.bl-step--next{text-align:right;}

/* related */
.bl-related{max-width:1180px;margin:56px auto 0;}
.bl-related > h2{margin:0 0 18px;font-size:clamp(20px,3vw,26px);font-weight:800;letter-spacing:-.02em;text-transform:none;}

/* back to top */
.bl-top{
  position:fixed;right:16px;bottom:calc(var(--nv-mobnav-h,0px) + 18px);z-index:300;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:var(--nv-accent);color:#fff;font-size:15px;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.4);
  display:grid;place-items:center;transition:opacity .2s,transform .2s;
}
.bl-top[hidden]{display:none;}
.bl-top:hover{transform:translateY(-2px);}

/* ── ≥640px ── */
@media (min-width:640px){
  .bl-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:28px;}
  .bl-search{max-width:340px;}
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bl-hero__body{padding:26px;}
  .bl-cta{flex-direction:row;align-items:center;justify-content:space-between;padding:26px 28px;}
  .bl-cta__btns{flex:0 0 auto;flex-wrap:nowrap;}
  .bl-cta .nv-btn{flex:0 0 auto;}
  .bl-steps{grid-template-columns:1fr 1fr;}
  .bl-steps > span{display:block;}
  .bl-top{right:24px;bottom:24px;}
}

/* ── ≥900px ── */
@media (min-width:900px){
  .bl-hero{grid-template-columns:1.15fr 1fr;}
  .bl-hero__media{aspect-ratio:auto;min-height:100%;}
  .bl-hero__body{padding:32px;justify-content:center;}
  .bl-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .bl-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ── ≥1100px: sticky table of contents beside the article ── */
@media (min-width:1100px){
  .bl-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .bl-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .bl-layout.has-side{max-width:1080px;grid-template-columns:minmax(0,760px) 260px;justify-content:center;gap:56px;}
  .bl-side{display:block;}
  .bl-toc--side{position:sticky;top:20px;max-height:calc(100vh - 120px);overflow:auto;padding-right:6px;}
  .bl-toc--side h2{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--nv-text);text-transform:none;letter-spacing:0;}
  .bl-toc--side h2 i{margin-right:8px;color:var(--nv-accent);}
  .bl-toc--inline{display:none;}
}

/* tighter phones */
@media (max-width:420px){
  .bl-content{font-size:16.5px;line-height:1.8;}
  .bl-card__body{padding:14px;}
  .bl-share__b{width:38px;height:38px;}
}
/* keep the floating chat button (bottom-left) from covering content on phones */
@media (max-width:639px){
  .bl{padding-bottom:110px;}
}

@media (prefers-reduced-motion:reduce){
  .bl *,.bl-progress span,.bl-top{transition:none !important;scroll-behavior:auto !important;}
}
@media print{
  .bl-progress,.bl-top,.bl-share,.bl-cta,.bl-side,.bl-toc--inline,.bl-related,.bl-steps,.bl-crumbs{display:none !important;}
}