/* ==========================================================================
   Clinical Operations Platform case study: pieces on top of case-study.css
   and b2b.css (the page reuses the B2B layout patterns).

   Accent: the user's blue #2B67EE (changed from mint on 2026-11-11 to match
   the mockups). It is used exactly for fills (badges, numbered circles, the
   55% card, dots), with white on top (4.9:1). Accent text uses a hair-darker
   shade, #2962e2, because #2B67EE is only 4.3:1 on the gray summary band;
   #2962e2 passes WCAG AA everywhere on the page (4.7:1 or better).
   ========================================================================== */
.cs2-page.cs2--clinical {
  --blue: #2962e2;   /* accent for text, links, labels */
  --fill: #2b67ee;   /* accent for fills: the user's exact colour */
  --tint: #edf2fe;   /* light blue section background */
}

/* section badges and numbered circles: the exact accent, white icons and numbers */
.cs2--clinical .cs2-badge { background: var(--fill); }
.cs2--clinical .b2b-num--accent {
  border-color: var(--fill);
  background: var(--fill);
}
.cs2--clinical .b2b-quote { border-left-color: var(--fill); }

/* ---------- Hero: soft-focus clinic lobby, with the patient profile ---------- */
.cl-hero {
  height: 864px;
  background: #eef2f6;
}
/* the photo is already blurred and light, so it has no frosted layer on top */
.cl-hero__bg {
  top: -100px;
  height: calc(100% + 200px);
  background: url('../assets/images/clinical/hero-lobby.jpg') center top / cover no-repeat;
}
.cl-hero .cs2-hero__title-row { top: 180px; z-index: 1; }
.cl-hero .cs2-hero__meta { top: 247px; z-index: 1; }
.cl-hero__mockup {
  position: absolute;
  top: 330px;
  left: calc(50% - 696px);
  width: 1392px;
  aspect-ratio: 2015 / 1277;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px 0 rgba(20, 24, 29, 0.26);
  will-change: transform;
}
.cl-hero__mockup img { display: block; width: 100%; height: 100%; }

/* ---------- Achievements ---------- */
/* 55% card: accent blue, with a ring that fills to 55% once scrolled into view.
   The gradient's lightest end sits under the ring only; all text is solid
   white on 4.9:1 or darker. */
.cl-win--time {
  background: linear-gradient(135deg, #1d4fc4 0%, var(--fill) 55%, #3d74ef 100%);
}
.cl-win--time .b2b-win__label,
.cl-win--time .b2b-win__note,
.cl-win--time .b2b-win__value { color: #fff; }
.cl-ring {
  position: absolute;
  right: 32px;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translateY(-50%) rotate(-90deg);
  pointer-events: none;
}
.cl-ring circle { fill: none; stroke-width: 14; }
.cl-ring__track { stroke: rgba(255, 255, 255, 0.25); }
.cl-ring__fill {
  stroke: #fff;
  stroke-linecap: butt; /* straight ends, as the user asked */
  stroke-dasharray: 55 100;
  transition: stroke-dasharray 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs2-grow:not(.is-in) .cl-ring__fill { stroke-dasharray: 0 100; }

/* ---------- The Task at Hand: soft blue glows fading to white ---------- */
.cl-task { padding-bottom: 160px; }
.cl-task::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: 0;
  background:
    radial-gradient(55% 38% at 12% 8%, rgba(43, 103, 238, 0.16), transparent 70%),
    radial-gradient(45% 32% at 92% 22%, rgba(120, 160, 250, 0.2), transparent 70%),
    radial-gradient(60% 40% at 55% 62%, rgba(43, 103, 238, 0.07), transparent 72%),
    radial-gradient(50% 30% at 8% 88%, rgba(255, 194, 137, 0.16), transparent 70%),
    #fff;
}
/* what was at stake: four small cards */
.cl-stakes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.cl-stakes li {
  position: relative;
  padding: 20px 22px 20px 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(17, 17, 16, 0.06), 0 14px 30px -20px rgba(20, 24, 29, 0.3);
  font-size: 16.8px;
  line-height: 25px;
  color: var(--ink);
}
.cl-stakes li::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 27px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fill);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fill) 22%, #fff);
}
.cl-quote p { font-size: 24px; line-height: 33px; }

/* ---------- Research ---------- */
.cl-question {
  padding-left: 20px;
  border-left: 3px solid var(--fill);
  color: var(--ink);
}
.cl-cycle img { display: block; width: 100%; height: auto; border-radius: 50%; }

/* ---------- The Solution ---------- */
/* Line Item Entry: the five pieces of work it brought together */
.cl-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px !important;
}
.cl-features li {
  position: relative;
  padding-left: 26px;
  font-size: 16.8px;
  line-height: 25px;
  color: var(--body);
}
.cl-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fill);
}
.cl-features strong {
  display: block;
  font-weight: 700;
  color: var(--ink);
}

/* screenshots: rounded, with the Figma "drop shadow mockups" effect */
.cl-shot { border-radius: 20px; }
.cl-shot img { object-fit: contain; }

/* full-width gray band behind the Line Item Entry screenshot */
.cl-band {
  padding: 99px 0;
  background: #ebebeb;
}

/* ---------- Outcome: the areas the platform covered at launch ---------- */
.cl-learnings { margin-top: 160px; }
.cl-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cl-areas li {
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fill) 45%, #fff);
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: var(--ink);
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1439px) {
  /* the mockup shrinks with the window; the hero keeps the same visible slice of it */
  .cl-hero { height: calc(330px + (100cqw - 48px) * 534 / 1392); }
  .cl-hero__mockup { left: var(--gut); width: calc(100% - 2 * var(--gut)); }
}
@media (max-width: 1199px) {
  /* the title no longer fits on one line, so the hero becomes a simple stack */
  .cl-hero {
    height: auto;
    padding: 130px var(--gut) 0;
  }
  .cl-hero .cs2-hero__title-row,
  .cl-hero .cs2-hero__meta { position: relative; top: auto; left: auto; right: auto; }
  .cl-hero .cs2-hero__title-row { flex-wrap: wrap; align-items: center; gap: 10px 16px; }
  .cl-hero .cs2-hero__title { font-size: clamp(32px, 4.6vw, 55px); line-height: 1.1; white-space: normal; text-align: center; }
  .cl-hero .cs2-chip { margin-top: 0; }
  .cl-hero .cs2-hero__meta { margin-top: 16px; flex-wrap: wrap; }
  .cl-hero__mockup {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 48px;
    /* only the top ~60% of the mockup shows, like the desktop hero */
    margin-bottom: -25%;
  }
}
@media (max-width: 900px) {
  .cl-ring { width: 110px; height: 110px; right: 24px; }
}
@media (max-width: 700px) {
  .cl-hero { border-radius: 0 0 48px 48px; padding-top: 110px; }
  .cl-hero .cs2-hero__title { font-size: 34px; }
  .cl-hero .cs2-hero__meta { font-size: 14px; flex-direction: column; gap: 6px; }
  .cl-hero .cs2-hero__dot { display: none; }
  .cl-hero__mockup { border-radius: 12px; margin-top: 32px; }
  .cl-stakes { grid-template-columns: 1fr; }
  .cl-quote p { font-size: 21px; line-height: 29px; }
  .cl-band { padding: 40px 0; }
  .cl-shot { border-radius: 12px; }
  .cl-ring { position: relative; right: auto; top: auto; transform: rotate(-90deg); margin: 0 0 16px; width: 96px; height: 96px; order: -1; }
}