/* ============================================================
   SafeBag case study
   Additive. Load AFTER style.css and case-media.css.
   All classes prefixed sb-. Background #EAF4F7 matches the
   backdrop baked into the safebag-*.jpg exports, so image
   edges disappear into their panels.
   ============================================================ */

:root { --sb-bg: #EAF4F7; }

/* ---------- hero: phone collage, full bleed, never cropped ---------- */
.sb-hero {
  margin: 0;
  background: var(--sb-bg);
  border-bottom: 1px solid var(--rule);
}
.sb-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 2400px;
  margin: 0 auto;
  border-radius: 0;
}
.sb-hero figcaption {
  font-family: var(--mono);
  font-size: 12px;
  color: #6a6a74;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 32px 14px;
  background: var(--paper);
}
@media (max-width: 760px) {
  /* keep phones readable on small screens: crop the outer columns */
  .sb-hero { overflow: hidden; }
  .sb-hero img { width: 180%; max-width: none; margin-left: -40%; }
  .sb-hero figcaption { padding: 10px 24px 14px; }
}

.sb-lede {
  font-size: 19px;
  line-height: 1.55;
  max-width: 720px;
  color: #33333d;
  margin: 18px 0 34px;
}

/* ---------- panel split: text beside an image on the SafeBag backdrop ---------- */
.sb-panel {
  background: var(--sb-bg);
  border-radius: 12px;
  overflow: hidden;
  gap: 0;
}
.sb-panel .csm-split-text { padding: 48px 0 48px 52px; }
.sb-panel .cs-fig img { border-radius: 0; }
.sb-panel .cs-fig figcaption { padding: 0 32px 20px; margin-top: 0; }
@media (max-width: 900px) {
  .sb-panel .csm-split-text { padding: 32px 24px 0; }
  .sb-panel .cs-fig figcaption { padding: 0 24px 18px; }
}

.sb-list { margin: 0; padding: 0; list-style: none; }
.sb-list li {
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  line-height: 1.5;
}
.sb-list li:last-child { border-bottom: 1px solid var(--rule); }
.sb-list b { display: block; font-weight: 600; }

/* ---------- full flow: scrolls sideways on small screens so it stays legible ---------- */
.sb-flow {
  background: var(--sb-bg);
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 36px;
  margin-bottom: 8px;
}
.sb-flow img {
  display: block;
  width: 100%;
  min-width: 1100px;
  height: auto;
  border-radius: 0;
}
.sb-flow-note {
  font-family: var(--mono);
  font-size: 12px;
  color: #6a6a74;
  margin: 10px 0 36px;
}

.sb-shot {
  background: var(--sb-bg);
  border-radius: 12px;
  overflow: hidden;
}
.sb-shot img { display: block; width: 100%; height: auto; border-radius: 0; }