/* ============================================================
   S J LOGISTICS — blog.css · editorial list + article pages
   ============================================================ */
/* featured card */
.bl-feat { display: grid; grid-template-columns: 1.15fr .85fr; border-radius: 24px; overflow: hidden; margin-top: clamp(30px, 4vw, 44px);
  background: linear-gradient(165deg, #2a2140, #180f2c); color: #fff; border: 1px solid rgba(196,181,253,.22);
  box-shadow: 0 44px 90px -40px rgba(20,12,36,.7); transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.bl-feat:hover { transform: translateY(-5px); box-shadow: 0 54px 100px -40px rgba(99,53,153,.6); }
.bl-feat-media { position: relative; min-height: 300px; overflow: hidden; }
.bl-feat-media img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.bl-feat-media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, transparent 60%, rgba(24,15,44,.55)); }
/* branded cover — sits behind the photo, shows through when there is none */
.bl-cover { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; overflow: hidden; }
.bl-cover::before { content: ""; position: absolute; inset: -20%;
  background-image: linear-gradient(to right, rgba(255,255,255,.09) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 34px 34px; transform: rotate(-8deg); }
.bl-cover-mark { position: relative; font-family: "Space Grotesk"; font-weight: 700; font-size: 96px; line-height: 1;
  color: rgba(255,255,255,.17); text-transform: uppercase; }
.bl-card-media .bl-cover-mark { font-size: 66px; }
/* six deterministic tones so image-less cards never look identical */
.bl-tone-0 { background: linear-gradient(150deg, #3c2b5d, #8b5cf6); }
.bl-tone-1 { background: linear-gradient(150deg, #2a2140, #a855f7); }
.bl-tone-2 { background: linear-gradient(150deg, #4a2a72, #d946ef); }
.bl-tone-3 { background: linear-gradient(150deg, #241a38, #7c4dbf); }
.bl-tone-4 { background: linear-gradient(150deg, #633599, #c084fc); }
.bl-tone-5 { background: linear-gradient(150deg, #1f1730, #9b6bd8); }
/* tags */
.bl-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.bl-tags span { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #d6c4ff; background: rgba(196,181,253,.12); border: 1px solid rgba(196,181,253,.28); border-radius: 999px; padding: 5px 11px; }
.bl-card-tag { position: absolute; z-index: 3; left: 12px; top: 12px; font-family: "JetBrains Mono", monospace; font-size: 9.5px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(20,14,33,.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(196,181,253,.3);
  border-radius: 999px; padding: 5px 11px; }
.bl-feat-body { padding: clamp(24px, 3.4vw, 40px); display: flex; flex-direction: column; }
.bl-kicker { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: "JetBrains Mono", monospace; font-size: 10px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #c4a5ff; border: 1px solid rgba(196,181,253,.35); border-radius: 999px; padding: 5px 11px; }
.bl-feat-body h2 { font-family: "Space Grotesk"; font-weight: 700; letter-spacing: -.015em; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; margin: 16px 0 0; color: #fff; }
.bl-feat-body p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: rgba(225,216,250,.75); flex: 1; }
.bl-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(225,216,250,.55); }
.bl-read { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 700; font-size: 14px; color: #fff; }
.bl-read svg { width: 16px; height: 16px; transition: transform .25s ease; }
.bl-feat:hover .bl-read svg, .bl-card:hover .bl-read svg { transform: translateX(4px); }
@media (max-width: 820px) { .bl-feat { grid-template-columns: 1fr; } .bl-feat-media { min-height: 210px; } }
/* grid cards */
.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.bl-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--border);
  box-shadow: 0 16px 36px -28px rgba(60,43,93,.4); transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease; }
[data-theme="dark"] .bl-card { background: rgba(255,255,255,.04); }
.bl-card:hover { transform: translateY(-6px); border-color: rgba(139,92,246,.45); box-shadow: 0 30px 56px -30px rgba(99,53,153,.5); }
.bl-card-media { position: relative; height: 168px; overflow: hidden; }
.bl-card-media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.bl-card:hover .bl-card-media img { transform: scale(1.07); }
.bl-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.bl-card-body h3 { font-family: "Space Grotesk"; font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.bl-card-body p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card .bl-meta { color: var(--faint); margin-top: 12px; }
.bl-card .bl-read { color: #7c46c9; font-size: 13.5px; margin-top: 12px; }
[data-theme="dark"] .bl-card .bl-read { color: #c4a5ff; }
@media (max-width: 940px) { .bl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .bl-grid { grid-template-columns: 1fr; } }
/* ===== article page ===== */
.bl-art { padding: var(--sec-pad) var(--gut); background: linear-gradient(180deg, #ffffff, #f6f3fc); }
[data-theme="dark"] .bl-art { background: linear-gradient(180deg, #0d0719, #160f28); }
.bl-art-inner { max-width: 760px; margin: 0 auto; }
.bl-hero-img { border-radius: 22px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 34px 70px -38px rgba(60,43,93,.5);
  margin-bottom: clamp(28px, 4vw, 40px); background: linear-gradient(150deg, #3c2b5d, #8b5cf6); }
.bl-hero-img img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.bl-prose { font-size: 16.5px; line-height: 1.8; color: var(--ink); }
.bl-prose p { margin: 0 0 18px; color: color-mix(in srgb, var(--ink) 84%, transparent); }
[data-theme="dark"] .bl-prose p { color: rgba(231,224,250,.84); }
.bl-prose h2 { font-family: "Space Grotesk"; font-weight: 700; letter-spacing: -.015em; font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.2; margin: 34px 0 14px; color: var(--ink); }
.bl-prose h3 { font-family: "Space Grotesk"; font-weight: 700; font-size: 19px; margin: 28px 0 12px; color: var(--ink); }
.bl-prose ul, .bl-prose ol { margin: 0 0 18px; padding-left: 4px; list-style: none; }
.bl-prose li { position: relative; padding-left: 26px; margin-bottom: 10px; color: color-mix(in srgb, var(--ink) 84%, transparent); }
[data-theme="dark"] .bl-prose li { color: rgba(231,224,250,.84); }
.bl-prose li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c4a5ff, #8b5cf6); box-shadow: 0 0 7px rgba(139,92,246,.5); }
.bl-prose strong { color: var(--ink); font-weight: 700; }
[data-theme="dark"] .bl-prose strong { color: #fff; }
.bl-prose a { color: #7c46c9; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(139,92,246,.4); text-underline-offset: 3px; }
[data-theme="dark"] .bl-prose a { color: #c4a5ff; }
.bl-prose blockquote { margin: 0 0 18px; padding: 14px 20px; border-left: 3px solid #8b5cf6; border-radius: 0 12px 12px 0;
  background: rgba(139,92,246,.07); font-family: "Space Grotesk"; font-size: 17.5px; }
/* ===== rich article components ===== */
/* reading progress */
.bl-progress { position: fixed; left: 0; top: 0; height: 3px; z-index: 55; width: 0%;
  background: linear-gradient(90deg, #633599, #8b5cf6, #d946ef); transition: width .12s linear; }
/* key takeaways */
.bl-key { margin: 0 0 28px; padding: 22px 24px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(139,92,246,.09), rgba(217,70,239,.05));
  border: 1px solid rgba(139,92,246,.28); }
[data-theme="dark"] .bl-key { background: linear-gradient(150deg, rgba(139,92,246,.16), rgba(217,70,239,.08)); }
.bl-key .k { display: flex; align-items: center; gap: 9px; font-family: "JetBrains Mono", monospace; font-size: 10px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7c46c9; margin-bottom: 14px; }
[data-theme="dark"] .bl-key .k { color: #c4a5ff; }
.bl-key .k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8b5cf6; }
.bl-key ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bl-key li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.6; color: var(--ink); }
[data-theme="dark"] .bl-key li { color: rgba(231,224,250,.9); }
.bl-key li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 11px; height: 11px; border-radius: 3px;
  background: linear-gradient(140deg, #633599, #8b5cf6); }
/* table of contents */
.bl-toc { margin: 0 0 30px; padding: 20px 22px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--border); }
[data-theme="dark"] .bl-toc { background: rgba(255,255,255,.04); border-color: rgba(196,181,253,.16); }
.bl-toc .k { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.bl-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.bl-toc li::marker { color: #8b5cf6; font-family: "JetBrains Mono", monospace; font-size: 11px; }
.bl-toc a { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.bl-toc a:hover { color: #7c46c9; } [data-theme="dark"] .bl-toc a:hover { color: #c4a5ff; }
/* callouts */
.bl-callout { display: flex; gap: 14px; margin: 0 0 22px; padding: 18px 20px; border-radius: 16px;
  background: rgba(139,92,246,.06); border: 1px solid rgba(139,92,246,.24); border-left-width: 3px; }
[data-theme="dark"] .bl-callout { background: rgba(139,92,246,.11); }
.bl-callout.warn { background: rgba(217,70,239,.06); border-color: rgba(217,70,239,.28); }
[data-theme="dark"] .bl-callout.warn { background: rgba(217,70,239,.12); }
.bl-callout .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(140deg, #633599, #8b5cf6); }
.bl-callout.warn .ic { background: linear-gradient(140deg, #a21caf, #d946ef); }
.bl-callout .ic svg { width: 17px; height: 17px; }
.bl-callout b { display: block; font-family: "Space Grotesk"; font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.bl-callout p { margin: 0 !important; font-size: 14.5px; line-height: 1.65; }
/* data table */
.bl-table-wrap { margin: 0 0 24px; overflow-x: auto; border-radius: 16px; border: 1px solid var(--border); }
[data-theme="dark"] .bl-table-wrap { border-color: rgba(196,181,253,.18); }
.bl-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; min-width: 480px; }
[data-theme="dark"] .bl-table { background: rgba(255,255,255,.03); }
.bl-table th { text-align: left; padding: 13px 16px; font-family: "JetBrains Mono", monospace; font-size: 10px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7c46c9;
  background: rgba(139,92,246,.07); border-bottom: 1px solid var(--border); }
[data-theme="dark"] .bl-table th { color: #c4a5ff; }
.bl-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--muted); line-height: 1.55; vertical-align: top; }
[data-theme="dark"] .bl-table td { border-color: rgba(196,181,253,.12); }
.bl-table tr:last-child td { border-bottom: none; }
.bl-table td:first-child { font-weight: 600; color: var(--ink); }
.bl-table tr:hover td { background: rgba(139,92,246,.04); }
/* figures with inline SVG diagrams */
.bl-fig { margin: 0 0 26px; padding: 22px; border-radius: 18px; background: linear-gradient(160deg, #241b3d, #150e26);
  border: 1px solid rgba(196,181,253,.2); }
.bl-fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.bl-fig figcaption { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(196,181,253,.2);
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(225,216,250,.6); }
.dg-box { fill: rgba(139,92,246,.16); stroke: #8b5cf6; stroke-width: 1.6; }
.dg-box-alt { fill: rgba(217,70,239,.14); stroke: #d946ef; stroke-width: 1.6; }
.dg-line { stroke: rgba(196,181,253,.45); stroke-width: 1.6; fill: none; }
.dg-dash { stroke: rgba(196,181,253,.4); stroke-width: 1.5; stroke-dasharray: 5 5; fill: none; }
.dg-t { fill: #fff; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 13px; }
.dg-s { fill: rgba(225,216,250,.62); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .06em; }
.dg-n { fill: #c4a5ff; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 11px; }
.dg-fill { fill: #8b5cf6; } .dg-fill-alt { fill: #d946ef; }
/* stat row */
.bl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 26px; }
.bl-stat { padding: 18px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--border); text-align: center; }
[data-theme="dark"] .bl-stat { background: rgba(255,255,255,.04); border-color: rgba(196,181,253,.16); }
.bl-stat b { display: block; font-family: "Space Grotesk"; font-weight: 700; font-size: clamp(24px, 4vw, 32px);
  line-height: 1; background: linear-gradient(120deg, #633599, #8b5cf6); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
[data-theme="dark"] .bl-stat b { background: linear-gradient(120deg, #fff, #c4a5ff); -webkit-background-clip: text; background-clip: text; }
.bl-stat span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
@media (max-width: 620px) { .bl-stats { grid-template-columns: 1fr; } }
/* checklist */
.bl-check { list-style: none; margin: 0 0 24px; padding: 20px 22px; border-radius: 16px;
  background: var(--bg-2); border: 1px solid var(--border); display: grid; gap: 11px; }
[data-theme="dark"] .bl-check { background: rgba(255,255,255,.04); border-color: rgba(196,181,253,.16); }
.bl-check li { position: relative; padding-left: 30px !important; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
[data-theme="dark"] .bl-check li { color: rgba(231,224,250,.88); }
.bl-check li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 5px;
  border: 1.8px solid #8b5cf6; background: rgba(139,92,246,.1); }
.bl-check li::after { content: ""; position: absolute; left: 5px; top: 8px; width: 8px; height: 4px;
  border-left: 2px solid #7c46c9; border-bottom: 2px solid #7c46c9; transform: rotate(-45deg); }
[data-theme="dark"] .bl-check li::after { border-color: #c4a5ff; }
/* inline photo figure (added by enrich_blogs) */
.bl-shot { margin: 0 0 26px; border-radius: 18px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: 0 26px 54px -38px rgba(60,43,93,.5); background: linear-gradient(150deg, #3c2b5d, #8b5cf6); }
[data-theme="dark"] .bl-shot { border-color: rgba(196,181,253,.18); }
.bl-shot img { width: 100%; height: auto; max-height: 380px; object-fit: cover; display: block; }
.bl-shot figcaption { padding: 12px 18px; font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); }
[data-theme="dark"] .bl-shot figcaption { background: rgba(255,255,255,.04); }

/* pull quote */
.bl-pull { margin: 0 0 26px; padding: 4px 0 4px 24px; border-left: 3px solid #8b5cf6;
  font-family: "Space Grotesk"; font-weight: 600; font-size: clamp(18px, 2.3vw, 23px); line-height: 1.42;
  letter-spacing: -.01em; color: var(--ink); }
[data-theme="dark"] .bl-pull { color: #fff; }
/* numbered process */
.bl-steps { list-style: none; counter-reset: s; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.bl-steps li { counter-increment: s; position: relative; padding: 16px 18px 16px 58px !important; border-radius: 16px;
  background: var(--bg-2); border: 1px solid var(--border); font-size: 14.5px; line-height: 1.6; color: var(--muted); }
[data-theme="dark"] .bl-steps li { background: rgba(255,255,255,.04); border-color: rgba(196,181,253,.16); }
.bl-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 16px; top: 15px;
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: none;
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 11px; color: #fff;
  background: linear-gradient(140deg, #633599, #8b5cf6); }
.bl-steps li strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 3px; }
[data-theme="dark"] .bl-steps li strong { color: #fff; }

.bl-src { margin-top: 30px; padding-top: 18px; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--faint); }
.bl-src a { color: #7c46c9; } [data-theme="dark"] .bl-src a { color: #c4a5ff; }
/* related */
.bl-rel { max-width: 1180px; margin: clamp(44px, 6vw, 64px) auto 0; padding-top: clamp(30px, 4vw, 44px); border-top: 1px solid var(--border); }
.bl-rel h3 { font-family: "Space Grotesk"; font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); color: var(--ink); margin: 0 0 18px; }