/* Product ↔ blog ↔ KB interlinking widgets (inc/interlinking.php). Blog + KB views. */

/* Link list: sidebar card (.gsl--side) or full-width band (.gsl--band). */
.gsl{border-radius:var(--r-xl);border:1px solid var(--line-1);background:var(--surface-glass);padding:18px}
.gsl-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.gsl-hd .tt{font:700 12px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-secondary)}
.gsl-hd .more{font:600 12.5px var(--font-sans);color:var(--acc);text-decoration:none;white-space:nowrap}
.gsl-hd .more:hover{text-decoration:underline}
a.gsl-it{display:flex;align-items:center;gap:12px;padding:10px 0;text-decoration:none;border-top:1px solid var(--line-2);min-width:0}
.gsl-list > a.gsl-it:first-child{border-top:0}
.gsl-it .ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(211,255,95,.08);border:1px solid rgba(211,255,95,.25);color:var(--lime-500,#d3ff5f)}
.gsl-it .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gsl-it .th{flex:0 0 auto;width:64px;height:46px;border-radius:8px;object-fit:cover;background:var(--surface-elev)}
.gsl-it .cp{flex:1;min-width:0}
.gsl-it .cp b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font:600 13px var(--font-sans);line-height:1.35;letter-spacing:-.1px;color:var(--fg-0)}
.gsl-it .cp span{display:block;margin-top:2px;font:500 11px var(--font-sans);color:var(--fg-tertiary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsl-it:hover .cp b{color:var(--acc)}

/* Band: two columns of rows inside the page wrap. */
.gsl--band{padding:20px 26px;margin:0 0 40px}
.gsl--band .gsl-hd .tt{font:800 22px var(--font-sans);letter-spacing:-.4px;text-transform:none;color:var(--fg-0)}
.gsl--band .gsl-list{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
.gsl--band .gsl-list > a.gsl-it:nth-child(2){border-top:0}
.gsl--band .gsl-it .cp b{font-size:14px}

/* In-article section (after the prose). */
.gsl--article{margin:36px 0 8px;padding:20px 24px}
.gsl--article .gsl-hd .tt{font:800 19px var(--font-sans);letter-spacing:-.3px;text-transform:none;color:var(--fg-0)}
.gsl--article .gsl-list{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.gsl--article .gsl-list > a.gsl-it:nth-child(2){border-top:0}

/* Revix cards sit inside the dark rails; let them take the rail width. */
.gsl-revix > *{max-width:100% !important}
.gsl-revix--product{margin-top:-4px}

@media (max-width:720px){
  .gsl--band,.gsl--article{padding:16px 18px}
  .gsl--band .gsl-list,.gsl--article .gsl-list{grid-template-columns:1fr}
  .gsl--band .gsl-list > a.gsl-it:nth-child(2),
  .gsl--article .gsl-list > a.gsl-it:nth-child(2){border-top:1px solid var(--line-2)}
}

/* Weekly article cards in the GPDStore dark palette. */
.gsl-card .wkac{
  --wkac-bg:var(--surface-glass);--wkac-fg:var(--fg-0);--wkac-muted:var(--fg-tertiary);--wkac-line:var(--line-1);
  --wkac-accent:var(--lime-500,#d3ff5f);--wkac-accent-fg:#0d0f12;--wkac-radius:var(--r-xl);
  --wkac-in:var(--teal-500,#23ddbe);--wkac-pre:#f5b14c;--wkac-out:var(--fg-tertiary);
  font-family:var(--font-sans);padding:18px}
.gsl-card .wkac-kicker{font:700 12px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-secondary)}
.gsl-card .wkac-store{box-shadow:0 0 0 2px #15171c}
.gsb-prose .wkac,.gsl-card--body .wkac{
  --wkac-bg:var(--surface-elev);--wkac-fg:var(--fg-0);--wkac-muted:var(--fg-tertiary);--wkac-line:var(--line-1);
  --wkac-accent:var(--lime-500,#d3ff5f);--wkac-accent-fg:#0d0f12;--wkac-radius:var(--r-xl);
  --wkac-in:var(--teal-500,#23ddbe);--wkac-pre:#f5b14c;--wkac-out:var(--fg-tertiary);font-family:var(--font-sans)}
.gsb-prose .wkac a{text-decoration:none}

/* KB category: nav + hub card share the sticky left column. */
.gsl-catside{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px}
.gsl-catside .gsk-nav{position:static;max-height:calc(100vh - 470px);min-height:220px}
@media (max-width:1100px){
  .gsl-catside{position:static}
  .gsl-catside .gsk-nav{max-height:none;min-height:0}
}