/* Case studies, and the numbers boxes fed by the enforcement numbers file. Built by the engineer in the
   look of the guides; design/ is untouched. Leans on the tokens in maru.css and the .guide rules in guides.css. */

/* ---- a numbers box: what the complimentary reports, or the full catalogue searches, have found ---- */
.nums{border:1px solid var(--line);background:var(--wash);padding:20px}
.nums .kicker{margin-bottom:16px}
.nums .figs{display:flex;flex-wrap:wrap;gap:18px 32px}
.nums .f{flex:1 1 150px;max-width:220px;min-width:0}
.nums .v{font-size:clamp(24px,2.4vw,30px);line-height:1;font-variant-numeric:tabular-nums;text-wrap:balance;margin:0}
.nums .l{font-size:14px;line-height:1.4;color:var(--soft);margin:6px 0 0;text-wrap:pretty}
.nums .fine{margin-top:18px;max-width:none}
/* on the service page, directly under the opening: centred, the five figures in one row where they fit */
.nums-sec{padding-top:clamp(16px,3vw,32px)}
.nums-sec .nums{text-align:center}
.nums-sec .figs{justify-content:center}
.nums-sec .fine{margin-inline:auto}
/* beside a guide or a case study: the box takes the foot of the left column, under the contents list and the
   service box; the figures stack. On a phone the column goes and the box follows the text, above the closing ask */
.guide.has-nums{grid-template-areas:"rail head" "rail body" "nums body"}
.guide .nums{grid-area:nums;align-self:end;margin-top:28px}
.guide .nums .f{max-width:none}
@media (max-width:900px){
  .guide .nums{margin:0 0 clamp(36px,6vw,72px)}
}

/* ---- a case study page ---- */
/* the case's own figures, under the title: four tiles, two by two */
.cfigs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 12px}
.cfigs div{border:1px solid var(--line);background:var(--wash);padding:20px 18px}
.cfigs .v{font-size:clamp(30px,3.6vw,40px);line-height:1;font-variant-numeric:tabular-nums;text-wrap:balance;margin:0}
.cfigs .l{font-size:14px;line-height:1.4;color:var(--soft);margin:8px 0 0;text-wrap:pretty}
.post .fine{font-size:13px;line-height:1.45;color:var(--soft);margin:0 0 28px}
@media (max-width:560px){
  /* each figure on its own line, value then label, so a long value never breaks */
  .cfigs{display:block;border:1px solid var(--line);background:var(--wash)}
  .cfigs div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;border:0;border-bottom:1px solid var(--line);background:none;padding:14px 16px}
  .cfigs div:last-child{border-bottom:0}
  .cfigs .v{font-size:24px;min-width:5ch}
  .cfigs .l{margin-top:0}
}

/* the case studies block on the service page, and more case studies under a case */
.cases-sec .kicker{margin-bottom:18px}
.more-cases{padding-top:0}
.more-cases .kicker{max-width:920px;margin-inline:auto}

/* the home page: the case studies line under the rights management door, on its own line below "See the services" */
.doors .more.cases-link{display:block;margin-top:10px}