/* Case-study detail page — editorial extras layered on top of the shared article
   template: a gradient eyebrow dash and the shimmering stat-grid figures. The
   grid layout + spacing use Tailwind utilities in the injected markup; only the
   gradient-text treatment lives here (background-clip:text can't be expressed as
   a utility reliably against the prebuilt CSS). */

.dc-cs-eyebrow-dash {
  display: inline-block; width: 42px; height: 3px; border-radius: 2px;
  vertical-align: middle; margin-right: 14px;
  background: linear-gradient(90deg, #22d2a2, #1892e5, #0b44cf);
}

/* Living gradient figures (matches the homepage Wall-of-Fame stat treatment).
   Sized with a clamp rather than a heading utility so the KPI strip's 4 columns
   keep short values (150,000 / 99% / Since 2014) on one line and wrap the long
   one (96 hrs → 90 min) to a tidy two lines instead of three. */
.dc-cs-num {
  display: inline-block;
  font-size: clamp(1.3rem, 0.95rem + 0.85vw, 1.65rem);
  line-height: 1.08;
  text-wrap: balance;
  background-image: linear-gradient(100deg, #22d2a2 0%, #1892e5 30%, #0b44cf 50%, #1892e5 70%, #22d2a2 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: dc-cs-num-pan 8s ease-in-out infinite;
}
@keyframes dc-cs-num-pan { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

@media (prefers-reduced-motion: reduce) {
  .dc-cs-num { animation: none; }
}

/* Client brandmark chip at the top of the hero — mirrors the white logo badge
   baked into the hero composite image. Auto-width so square icons (HDFC, Zomato)
   and wide wordmarks (Presto) both sit naturally on the light hero. */
.dc-cs-brandmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(11, 42, 91, 0.08);
  box-shadow: 0 12px 28px -16px rgba(2, 10, 40, 0.4);
}
.dc-cs-brandmark img {
  display: block;
  height: 40px;
  width: auto;
}

/* Multi-line quotes (e.g. a client email quoted as text instead of a screenshot):
   honour the authored line breaks. pre-line keeps newlines but still collapses the
   source indentation, so the block stays tidy however the data file is formatted. */
.dc-cs-quote { white-space: pre-line; }

/* A quoted email runs quote → bullet list → quote as three sibling elements. Carry the
   blockquote's left rule and colour through the list and close the gaps the utility
   margins leave, so the run reads as ONE quotation. Adjacent-sibling selectors only
   (no :has()), so this holds in older Safari too. The -2rem pulls against the mb-10
   (2.5rem) on the preceding element, leaving a deliberate 0.5rem seam. */
.dc-cs-quote + ul {
  border-left: 2px solid var(--color-border-primary, #e4e3de);
  color: var(--color-text-secondary, #3f3f46);
  margin-top: -2rem;
  padding-left: 2.75rem;
}
ul + .dc-cs-quote { margin-top: -2rem; }

/* --- Phone hero -------------------------------------------------------------
   Two things only go wrong at phone widths:

   1. The eyebrow's gradient rule is a fixed 42x3px bar tuned for the desktop hero.
      Next to ~10px uppercase caps it reads as a stray line rather than a lead-in,
      so scale it with the type.

   2. The copy column's py-10 and the hero image wrapper's py-8 stack ~100px of dead
      space between the excerpt and the image, which leaves the image sitting low with
      a big gap above it. Trim both sides of that seam so the image rides up with the
      copy. Desktop keeps its md: paddings untouched. */
@media (max-width: 767px) {
  .dc-cs-eyebrow-dash { width: 24px; height: 2px; margin-right: 10px; }
  #blogpost > section .flex.flex-col.gap-4 { padding-bottom: 1.25rem; }
}

/* The hero image band's own `py-8 md:py-12` are NO-OPS. This project's Tailwind bundle
   is frozen — only the utilities the captured pages happened to use were ever compiled
   — and py-8 / py-12 are not among them (py-4, py-6, py-10 and py-20 are). So the band
   had zero vertical padding at every width and the image sat flush against the rules
   above and below it. Supply the intended padding for real, symmetric, so the image is
   centred in its band instead of welded to the bottom line. */
#blogpost > div > .max-w-220.py-8 { padding-block: 1.25rem; }
@media (min-width: 768px) {
  #blogpost > div > .max-w-220.py-8 { padding-block: 3rem; }
}

/* The KPI label carries `mt-3`, which — like py-8 above — is NOT in the frozen Tailwind
   bundle (mt-2 and mt-4 are; mt-3 never got compiled). So the label sat flush against
   the number with no breathing room. Restore the intended gap. The cell is
   justify-between, so this only opens up the tallest cell in a row — the shorter cells
   already push their label to the bottom — which is exactly where the gap was missing. */
#blogpost .dc-cs-num + div { margin-top: 0.75rem; }

/* Very narrow phones (~360px): the KPI cell's p-6 leaves only ~116px of text width,
   which still wraps "30 → 15 min". Trim the cell padding rather than shrinking the
   figure — the numbers are the point of this strip. */
@media (max-width: 400px) {
  #blogpost .p-6.flex.flex-col.justify-between { padding: 1.1rem; }
}