/* T35-02: the how-to series as a gantt (Views/Videos/_SeriesGantt.cshtml), on the landing
   page (inside Bootstrap) and on the /videos pages. Everything is set explicitly so the
   landing page's Bootstrap reboot cannot move it. Group colours: 1 blue, 2 green, 3 orange,
   the landing page's own bands. */
.sg{--sg-ink:#212529;--sg-ink-2:#5a6268;--sg-rule:#dfe3e6;--sg-rule-2:#c9cfd4;--sg-soft:#f7f9fa;
  --sg-g1:#0e7bb8;--sg-g2:#25a922;--sg-g3:#e4880d;--sg-g2-ink:#1b7f19;--sg-hivis:#e4880d;--sg-hover:#eef6fb;--sg-now:#fff4e5;
  --sg-nm:clamp(240px,40%,360px);--sg-t2:6.6667;
  max-width:1240px;margin:0 auto;background:#fff;border-radius:6px;box-shadow:0 4px 8px rgba(0,0,0,.2);
  display:grid;grid-template-columns:minmax(0,1fr);color:var(--sg-ink);text-align:left;
  font:400 16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif}
.sg *{box-sizing:border-box}
.sg.sg-has-pv{grid-template-columns:minmax(0,1fr) 300px}
.sg-gantt{padding:16px 18px 10px;min-width:0}

/* head: group labels over minute ticks */
.sg-head{display:grid;grid-template-columns:var(--sg-nm) 1fr;border-bottom:2px solid var(--sg-ink)}
.sg-lbl{align-self:end;display:flex;justify-content:space-between;padding:0 12px 6px 0;font-size:12px;font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:.06em;color:var(--sg-ink-2)}
.sg-axis{position:relative;height:60px}
.sg-gk{position:absolute;top:0;height:32px;left:calc(var(--a) * 1%);width:calc(var(--w) * 1%);display:flex;align-items:center;overflow:hidden;
  padding:0 6px;border-right:2px solid #fff;font-size:11px;font-weight:700;line-height:1.1;color:#fff}
.sg-gk.sg-g1{background:var(--sg-g1)}
.sg-gk.sg-g2{background:var(--sg-g2-ink)}
.sg-gk.sg-g3{background:var(--sg-g3);color:#1d2124}
.sg-ticks span{position:absolute;bottom:0;left:calc(var(--at) * 1%);height:22px;padding:0 0 4px 4px;border-left:1px solid var(--sg-rule-2);
  font-size:11px;line-height:18px;color:var(--sg-ink-2);font-variant-numeric:tabular-nums}
.sg-ticks span:last-child{border-left:0;border-right:1px solid var(--sg-rule-2);transform:translateX(-100%);padding:0 4px 4px 0}
.sg-ticks span.sg-pen{color:transparent}

/* body: group tints and two-minute lines behind the rows */
.sg-body{position:relative}
.sg-body::before{content:"";position:absolute;top:0;bottom:0;left:var(--sg-nm);right:0;pointer-events:none;
  background:repeating-linear-gradient(to right,var(--sg-rule) 0 1px,transparent 1px calc(var(--sg-t2) * 1%))}
.sg-bands{position:absolute;top:0;bottom:0;left:var(--sg-nm);right:0;pointer-events:none}
.sg-band{position:absolute;top:0;bottom:0;left:calc(var(--a) * 1%);width:calc(var(--w) * 1%);border-right:1.5px dashed var(--sg-rule-2)}
.sg-band.sg-g1{background:rgba(14,123,184,.05)}
.sg-band.sg-g2{background:rgba(37,169,34,.05)}
.sg-band.sg-g3{background:rgba(228,136,13,.06)}
.sg-rows{list-style:none;margin:0;padding:0;position:relative}
.sg-rows li{margin:0;padding:0}
.sg-row{display:grid;grid-template-columns:var(--sg-nm) 1fr;min-height:30px;color:var(--sg-ink);text-decoration:none}
.sg-row:hover,.sg-row:focus{color:var(--sg-ink);text-decoration:none}
.sg-row:focus-visible{outline:3px solid var(--sg-g1);outline-offset:-1px}
.sg-nm{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:4px 12px 4px 0;border-bottom:1px solid var(--sg-rule);font-size:13.5px;line-height:1.25}
.sg-no{font-size:11px;color:var(--sg-ink-2);text-align:right;font-variant-numeric:tabular-nums}
.sg-du{font-size:12.5px;color:var(--sg-ink-2);font-variant-numeric:tabular-nums}
.sg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sg-zone{position:relative;border-bottom:1px solid var(--sg-rule)}
.sg-bar{position:absolute;top:50%;height:14px;margin-top:-7px;left:calc(var(--a) * 1%);width:calc(var(--w) * 1%);border-radius:3px;transition:transform .2s,box-shadow .2s}
.sg-bar.sg-g1{background:var(--sg-g1)}
.sg-bar.sg-g2{background:var(--sg-g2)}
.sg-bar.sg-g3{background:var(--sg-g3)}
.sg-row:hover,.sg-row:focus-visible,.sg-row.sg-on{background:var(--sg-hover)}
.sg-row:hover .sg-t,.sg-row:focus-visible .sg-t,.sg-row.sg-on .sg-t{text-decoration:underline;text-underline-offset:.18em}
.sg-row:hover .sg-bar,.sg-row:focus-visible .sg-bar,.sg-row.sg-on .sg-bar{transform:scaleY(1.35);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--sg-ink)}
.sg-row[aria-current]{background:var(--sg-now)}
.sg-row[aria-current] .sg-t{font-weight:700}
.sg-row[aria-current] .sg-bar{transform:scaleY(1.35);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--sg-ink)}
.sg-now{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:2px;background:var(--sg-hivis);color:#1d2124;font-size:10.5px;font-weight:700;line-height:1.2;letter-spacing:.05em;text-transform:uppercase;vertical-align:1px}

.sg-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:10px 0 2px;font-size:13px;color:var(--sg-ink-2)}
.sg-legend{display:flex;flex-wrap:wrap;gap:4px 14px}
.sg-legend i{display:inline-block;width:12px;height:10px;margin-right:5px;border-radius:2px;vertical-align:-1px}
.sg-legend i.sg-g1{background:var(--sg-g1)}
.sg-legend i.sg-g2{background:var(--sg-g2)}
.sg-legend i.sg-g3{background:var(--sg-g3)}

/* preview: follows the row under the pointer; click opens the video page */
.sg-pv{min-width:0;padding:16px 18px 18px;background:var(--sg-soft);border-left:1px solid var(--sg-rule);border-radius:0 6px 6px 0}
.sg-pv-in{position:sticky;top:16px;display:flex;flex-direction:column;gap:10px}
.sg-thumb{position:relative;display:block;aspect-ratio:16/9;max-width:100%;overflow:hidden;border-radius:4px;background:#1d2124;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.sg-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.sg-play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--sg-hivis);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.sg-play svg{margin-left:3px}
.sg-thumb:hover .sg-play{transform:scale(1.1)}
.sg-dur{position:absolute;right:6px;bottom:6px;padding:2px 6px;border-radius:3px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;line-height:1.3;font-variant-numeric:tabular-nums}
.sg-k{align-self:flex-start;padding:2px 7px;border-radius:3px;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--sg-g1)}
.sg-k.sg-k2{background:var(--sg-g2-ink)}
.sg-k.sg-k3{background:var(--sg-g3);color:#1d2124}
.sg-pv-title{margin:0;font-size:18px;font-weight:500;line-height:1.25;text-transform:uppercase;text-wrap:balance;color:var(--sg-ink)}
.sg-pv-blurb{margin:0;font-size:14px;line-height:1.5;color:var(--sg-ink-2)}
.sg-watch{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:4px;background:var(--sg-hivis);color:#1d2124;
  font-size:15px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;text-decoration:none}
.sg-watch:hover,.sg-watch:focus{background:#f19a26;color:#1d2124;text-decoration:none}
.sg-all{font-size:14px;font-weight:600;color:var(--sg-g1)}
.sg-note{margin:0;padding-top:10px;border-top:1px solid var(--sg-rule);font-size:12.5px;line-height:1.45;color:var(--sg-ink-2)}

@media (max-width:900px){
  .sg.sg-has-pv{grid-template-columns:minmax(0,1fr)}
  .sg-pv{order:-1;border-left:0;border-bottom:1px solid var(--sg-rule);border-radius:6px 6px 0 0}
  .sg-pv-in{position:static;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);align-items:start;gap:8px 16px}
  .sg-pv-in .sg-thumb{grid-row:span 4}
  .sg-pv-in .sg-note{grid-column:1 / -1}
}
@media (max-width:620px){
  .sg{--sg-nm:62%}
  .sg-gantt{padding:12px 10px 8px}
  .sg-no{display:none}
  .sg-nm{grid-template-columns:minmax(0,1fr) auto}
  .sg-gk{color:transparent!important}
  .sg-ticks span:not(.sg-major):not(:last-child){color:transparent}
  .sg-pv-in{grid-template-columns:minmax(0,1fr)}
  .sg-pv-in .sg-thumb{grid-row:auto}
}
@media (prefers-reduced-motion:reduce){.sg *{transition:none!important}}