/* ==========================================================================
   Case Studies container — Injury Care Associates
   Resource 154, /case-studies/. Template "Case Study Container".
   Built 2026-09-21 from design/case-studies/ (casestudies.zip, 2026-09-19).

   Scoped under .csy. Tokens map to the site's Bootstrap custom properties with
   the live hex as fallback, so the page also renders standalone.

   TWO THINGS THAT ARE NOT COSMETIC, both from docs/BUILD-RECIPE.md:

   1. Navy is --bs-tertiary-hex (#1e2d3b). It is NOT --bs-heading-color-hex,
      which is #212124 on this theme — mapping navy to that renders the hero and
      the pattern band ink-black.
   2. The theme sets h1/h2/h3 colour DIRECTLY, and a direct rule beats the
      inherited colour a design export relies on. Every dark section therefore
      restates heading colour explicitly. Skipping it is how the home page
      shipped headings at 1.14:1 contrast.
   ========================================================================== */

.csy {
  --csy-primary: var(--bs-primary-hex, #0072bc);
  --csy-primary-lift: #0086dd;
  --csy-navy: var(--bs-tertiary-hex, #1e2d3b);
  --csy-light: var(--bs-light-hex, #f2f8fc);
  --csy-ink: var(--bs-heading-color-hex, #212124);
  --csy-body: #495356;
  --csy-line: #e1e8ee;
  --csy-accent: #80b7e3;
  --csy-pale: #cfe4f5;
  --csy-warning: var(--bs-warning-hex, #ffd240);
  --csy-radius: 16px;
  --csy-heading: 'Catamaran', sans-serif;
  --csy-body-font: 'Nunito Sans', system-ui, sans-serif;

  font-family: var(--csy-body-font);
  color: var(--csy-ink);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.csy *, .csy *::before, .csy *::after { box-sizing: border-box; }
.csy img { max-width: 100%; }
.csy a { color: var(--csy-navy); }
.csy a:hover { color: var(--csy-primary); }

.csy-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.csy-sec { padding: 72px 0; }
.csy-sec--white { background: #fff; }
.csy-sec--light { background: var(--csy-light); }
.csy-sec--navy { background: var(--csy-navy); color: #fff; }

/* ---------- type ---------- */
.csy-kicker { font-family: var(--csy-heading); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--csy-primary); margin: 0 0 10px; }
.csy-kicker--accent { color: var(--csy-accent); }
.csy-kicker--muted { color: var(--csy-body); margin-bottom: 18px; }
.csy-h1 { font-family: var(--csy-heading); font-weight: 800; font-size: clamp(34px, 5.2vw, 58px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 18px; max-width: 20ch; text-wrap: balance; }
.csy-h2 { font-family: var(--csy-heading); font-weight: 800; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -.015em; margin: 0; }
.csy-h2--gap { margin-bottom: 14px; text-wrap: balance; }
.csy-h3 { font-family: var(--csy-heading); font-weight: 800; margin: 0; }
.csy-sub { font-size: 17px; line-height: 1.6; color: var(--csy-body); margin: 0 0 26px; max-width: 52ch; }
.csy-head { max-width: 58ch; }
.csy-head--gap { margin-bottom: 38px; }

/* Free-text regions: [[*content]] and the studies' own body copy. */
.csy-freetext p { margin: 0 0 14px; }
.csy-freetext p:last-child { margin-bottom: 0; }

/* ---------- buttons ---------- */
.csy-btnrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.csy-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--csy-heading); font-weight: 700; font-size: 17px; text-decoration: none; padding: 15px 26px; border-radius: 8px; border: 1px solid transparent; transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.csy-btn--sm { font-size: 16px; padding: 13px 22px; }
.csy-btn--primary { background: var(--csy-primary); color: #fff; }
.csy-btn--primary:hover { background: var(--csy-primary-lift); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 114, 188, .35); }
.csy-btn--dark { background: var(--csy-navy); color: #fff; }
.csy-btn--dark:hover { background: var(--csy-primary); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 114, 188, .28); }
.csy-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .34); }
.csy-btn--ghost:hover { background: rgba(255, 255, 255, .10); border-color: var(--csy-accent); color: #fff; }
.csy-btn--outline { color: var(--csy-navy); border-color: #cfdae4; }
.csy-btn--outline:hover { border-color: var(--csy-primary); color: var(--csy-primary); }
.csy-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--csy-heading); font-weight: 700; font-size: 16px; color: var(--csy-primary); text-decoration: none; padding: 13px 6px; }
.csy-link:hover { color: var(--csy-navy); }

/* ---------- 1. hero ---------- */
.csy-hero { position: relative; background: var(--csy-navy); color: #fff; overflow: hidden; }
.csy-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; animation: csyDrift 26s ease-in-out infinite alternate; }
.csy-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, #1e2d3b 24%, rgba(30, 45, 59, .84) 70%, rgba(30, 45, 59, .5) 100%); }
.csy-hero__inner { position: relative; padding-top: 64px; padding-bottom: 60px; }
.csy-hero__lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--csy-light); max-width: 62ch; margin: 0 0 28px; }

/* Contrast: restate, do not inherit. See the header of this file. */
.csy-hero .csy-h1, .csy-sec--navy .csy-h2, .csy-sec--navy .csy-h3 { color: #fff; }

/* Reveal. Pure CSS, so it runs with or without JavaScript — the design export
   hid its body until a script ran and that pattern is not carried over. */
.csy-hero .csy-kicker { animation: csyIn .6s cubic-bezier(.2, .7, .3, 1) both; }
.csy-hero .csy-h1 { animation: csyIn .7s cubic-bezier(.2, .7, .3, 1) .08s both; }
.csy-hero__lede { animation: csyIn .7s cubic-bezier(.2, .7, .3, 1) .16s both; }
.csy-hero .csy-btnrow { animation: csyIn .7s cubic-bezier(.2, .7, .3, 1) .24s both; }

@keyframes csyIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes csyDrift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }

/* ---------- 2. the cards ---------- */
.csy-grid__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: 40px; }
.csy-grid__aside { font-size: 16px; color: var(--csy-body); max-width: 36ch; margin: 0; }
.csy-cards { display: flex; flex-direction: column; gap: 28px; }

.csy-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); background: #fff; border: 1px solid var(--csy-line); border-radius: var(--csy-radius); overflow: hidden; box-shadow: 0 14px 40px rgba(30, 45, 59, .07); }
.csy-card__media { position: relative; min-height: 400px; }
/* Alternating image side. CSS, not [[+idx]] — +idx is 1-based and an off-by-one
   there hides the first card and drops the last, silently. */
.csy-card:nth-child(even) .csy-card__media { order: 2; }
.csy-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.csy-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 45, 59, .05) 40%, rgba(30, 45, 59, .92)); }
.csy-card__stats { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 28px; color: #fff; display: flex; flex-wrap: wrap; gap: 14px 30px; }
/* Empty until Ryan fills cs-stat-migx: collapse rather than leave a dark bar. */
.csy-card__stats:empty { display: none; }
.csy-stat { min-width: 0; }
.csy-stat b { display: block; font-family: var(--csy-heading); font-weight: 800; font-size: 22px; line-height: 1.05; color: var(--csy-warning); }
.csy-stat span { display: block; font-size: 13px; color: #d8ecf9; margin-top: 4px; line-height: 1.3; }

.csy-card__body { padding: 34px 38px 36px; display: flex; flex-direction: column; gap: 16px; }
.csy-card__brand { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.csy-card__logo { height: 34px; width: auto; max-width: 170px; object-fit: contain; }
.csy-card__tag { font-family: var(--csy-heading); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--csy-body); border-left: 1px solid var(--csy-line); padding-left: 16px; }
.csy-card .csy-h3 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; text-wrap: balance; }
.csy-card__link { color: inherit; text-decoration: none; }
.csy-card__link:hover { color: var(--csy-primary); }
.csy-card__quote { border-left: 3px solid var(--csy-warning); padding-left: 16px; margin: 0; }
.csy-card__quote p { font-family: var(--csy-heading); font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--csy-navy); margin: 0; text-wrap: pretty; }
.csy-card__quote cite { display: block; font-size: 14px; font-style: normal; color: var(--csy-body); margin-top: 6px; }
.csy-card__copy { font-size: 16px; line-height: 1.6; color: var(--csy-body); }
.csy-card__foot { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- 3. the pattern ---------- */
.csy-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; counter-reset: csy-step; }
.csy-step { background: rgba(255, 255, 255, .055); border: 1px solid rgba(128, 183, 227, .24); border-radius: 14px; padding: 28px 26px; counter-increment: csy-step; }
/* 01 / 02 / 03 — a counter, because :index and :lpad are not core MODX modifiers
   and adding a fourth row should not need a deploy. */
.csy-step::before { content: counter(csy-step, decimal-leading-zero); display: block; font-family: var(--csy-heading); font-weight: 800; font-size: 30px; line-height: 1; color: var(--csy-warning); margin-bottom: 14px; }
.csy-step .csy-h3 { font-size: 21px; line-height: 1.2; margin: 0 0 9px; }
.csy-step p { font-size: 16px; line-height: 1.55; color: var(--csy-pale); margin: 0; }

/* ---------- 4. closing CTA ---------- */
.csy-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; }
.csy-panel { background: var(--csy-light); border: 1px solid var(--csy-line); border-radius: var(--csy-radius); padding: 30px 32px; }
.csy-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.csy-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--csy-ink); }
.csy-checks li::before { content: "\2713"; color: var(--csy-primary); font-weight: 800; flex: none; }

/* ---------- responsive ---------- */
@media (max-width: 767px) {
  .csy-sec { padding: 56px 0; }
  .csy-hero__inner { padding-top: 48px; padding-bottom: 44px; }
  .csy-card__media { min-height: 260px; }
  .csy-card__body { padding: 26px 24px 28px; }
  .csy-btn { font-size: 16px; padding: 13px 20px; }
}

/* Motion is opt-out and fails open: with animation disabled the elements sit at
   their natural opacity, so no reduced-motion or no-JS visitor loses copy. */
@media (prefers-reduced-motion: reduce) {
  .csy *, .csy *::before, .csy *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Button colour — appended at Gate 5, 2026-09-21.

   `.csy a { color: var(--csy-navy) }` above is a one-class + one-type
   selector, specificity (0,1,1). Every button variant is a single class,
   (0,1,0), so the broad rule outranked all of them and EVERY button on the
   page rendered navy:

     .csy-btn--primary   navy on #0072bc   2.77:1   (needs 4.5 at 17px)
     .csy-btn--ghost     navy on navy      invisible
     .csy-btn--dark      navy on navy      1.0:1    both PDF buttons
     .csy-link           navy, not blue

   Restated here at (0,2,1) so the variants win. The hover rules already beat
   it — a class plus a pseudo-class is (0,2,0), which outranks (0,1,1) on class
   count — which is why hovering appeared to "fix" the button.

   The broad `.csy a` rule is left alone deliberately: it is doing real work on
   body copy links, and narrowing it would change more than it repairs.
   ========================================================================== */
.csy a.csy-btn--primary,
.csy a.csy-btn--dark,
.csy a.csy-btn--ghost { color: #fff; }
.csy a.csy-btn--outline { color: var(--csy-navy); }
.csy a.csy-link { color: var(--csy-primary); }