/* ==========================================================================
   Case studies – listing cards, detail page borders, sticky back strip
   ========================================================================== */

:root {
  --cs-border: #cbd0d8;        /* one darker gray for every border: cards, separators, outer containers */
  --cs-border-hover: #9ca3af;  /* hover / open state */
  --cs-line: var(--cs-border);
  --cs-line-strong: var(--cs-border);
}

/* Sticky "Back to Case Studies" strip: sits under the fixed menu while scrolling.
   (overflow-x: clip keeps the no-horizontal-scroll behaviour without breaking sticky) */
.cs-sticky { position: sticky; top: -2rem; z-index: 40; }
body div.overflow-x-hidden { overflow-x: clip; }

/* ---- Consistent border system -------------------------------------------------
   .cs-card  = inner container (cards, tiles)
   .cs-sep   = separators / dividers
   .cs-box   = outer container holding other cards
   All use the same gray (--cs-border); change it once above to retune every border.
   Use these classes in new case study content to get the same borders. */
.cs-card { border-color: var(--cs-line); }
.cs-sep, .cs-detail hr { border-color: var(--cs-line); }
.cs-box  { border-color: var(--cs-line-strong); border-width: 1.5px; }
.cs-detail .cs-meta { border-color: var(--cs-line-strong); }

/* Listing page cards */
.cs-list .cs-card { border-width: 1px; }
.cs-list .group:hover > .cs-card { border-color: var(--cs-border-hover); }
.dark .cs-list .cs-card { border-color: rgba(255, 255, 255, .12); }
.dark .cs-list .group:hover > .cs-card { border-color: rgba(255, 255, 255, .24); }

/* High-fidelity screens gallery: gallery frame = outer, drawers & thumbnails = inner */
.cs-detail .hf { border: 1.5px solid var(--cs-line-strong); border-radius: 1.25rem; padding: .75rem; }
.cs-detail .hf-drawer,
.cs-detail .hf-thumb,
.cs-detail .hf-count { border-color: var(--cs-line); }
.cs-detail .hf-drawer:hover,
.cs-detail .hf-drawer.is-open,
.cs-detail .hf-thumb:hover { border-color: var(--cs-border-hover); }

/* ---- Split block: image on the left, bulleted list on the right (e.g. The Challenge / The Solution) ---- */
.cs-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 768px) { .cs-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; } }
.cs-split-media { margin: 0; border-radius: 1.25rem; overflow: hidden; background: #f8fafc; }
.cs-split-media img { display: block; width: 100%; height: auto; }
.cs-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.cs-bullets li { position: relative; padding-left: 1.6rem; color: #57534e; line-height: 1.75; }
.cs-bullets li::before { content: ''; position: absolute; left: 0; top: .72em; width: .55rem; height: .55rem; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }