/* assets/css/case-study.css — the case study page (case-study.php), and the card
   that links to it from Resources, the Communications row on Applications and the
   home page. Owner 2026-09-11. No words live here (COPY-10). */

/* ── The page ── */
/* COMPACT, AS RESOURCES IS. Owner 2026-09-14: "optimiz this page to minimize scroll and
   white space" — the hero at Resources' height, the facts on one row, the account in a
   wider column beside a sidebar that stays in view. */
.page-hero.cs-hero{padding:52px 0 46px}
.cs-hero .two-column{gap:48px}
.cs-hero h1{font-size:clamp(2.1rem,3.4vw,3.2rem);line-height:1.04;letter-spacing:-.04em}
/* A hero with its photograph (hero.photo): words left, the photograph right. */
.cs-hero-photo .two-column{align-items:center;gap:56px}
.cs-hero-photo h1{font-size:clamp(2.1rem,3.4vw,3.2rem)}
.cs-hero-photo h1+p{margin:22px 0 0;max-width:56ch;color:#d4e0ea;line-height:1.6}
.cs-hero-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.35)}

.cs-facts{background:var(--soft);padding:20px 0;border-bottom:1px solid var(--line)}
/* As many to a row as fit: five facts are one row on a desktop, and a short last row
   leaves white, not an empty grey cell. */
.cs-facts dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;margin:0;
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cs-facts dl>div{background:#fff;padding:12px 18px;box-shadow:inset -1px -1px 0 var(--line)}
.cs-facts dt{margin-bottom:4px;color:var(--muted);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cs-facts dd{margin:0;color:var(--ink);font-size:.95rem;font-weight:700;line-height:1.35}

.section-light.cs-story{padding:48px 0 60px}
.cs-story-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:start}
.cs-story-copy h2{margin:0 0 14px;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.1;letter-spacing:-.03em}
.cs-story-copy p{max-width:none;margin:0 0 12px;color:var(--muted);font-size:1rem;line-height:1.6}
.cs-story-copy .cs-source{margin-top:20px;font-size:.92rem}
.cs-story-copy h3{margin:26px 0 8px;color:var(--ink);font-size:clamp(1.2rem,1.6vw,1.4rem);line-height:1.2;letter-spacing:-.02em}
.cs-story-copy ul,.cs-story-copy ol{max-width:none;margin:0 0 14px;padding-left:1.2em;color:var(--muted);font-size:1rem;line-height:1.55}
.cs-story-copy li{margin:0 0 4px}
.cs-story-copy li::marker{color:var(--blue)}
.cs-quote{margin:0;padding:30px;background:var(--navy);color:#fff;border-radius:14px}
.cs-quote blockquote{margin:0}
.cs-quote p{margin:0;font-size:1.12rem;line-height:1.55}
.cs-quote figcaption{margin-top:18px;color:#aebfd0;font-size:.82rem;font-weight:700;letter-spacing:.04em}

.cs-photos{background:var(--soft);padding:48px 0}
.cs-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cs-shot{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cs-shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--soft)}
.cs-shot figcaption{padding:10px 14px 12px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;line-height:1.45}

/* ── Resources: Case studies, by application ── */
#case-studies{padding-top:0}
.cs-cat{margin:0 0 14px;color:var(--blue);font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.cs-cards{display:grid;gap:22px}
.cs-cards+.cs-cat{margin-top:40px}
.cs-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);max-width:1000px;background:var(--soft);
  border-top:3px solid var(--blue);color:inherit;overflow:hidden;transition:transform .18s ease}
.cs-card:hover{transform:translateY(-2px)}
.cs-card img{display:block;width:100%;height:100%;min-height:230px;object-fit:cover}
.cs-card-body{display:flex;flex-direction:column;gap:10px;padding:30px 32px}
.cs-card-body b{color:var(--ink);font-size:1.45rem;line-height:1.2;letter-spacing:-.02em}
.cs-card-body>span{color:var(--muted);line-height:1.6}
.cs-card-body i{margin-top:auto;padding-top:6px;color:var(--blue);font-style:normal;font-weight:700}

/* ── The compact card: home page, and under Communications on Applications ── */
.cs-home{background:#fff;padding:0 0 56px}
.cs-mini{display:grid;grid-template-columns:210px minmax(0,1fr);max-width:900px;background:var(--soft);
  border:1px solid var(--line);border-radius:14px;color:inherit;overflow:hidden;transition:transform .18s ease}
.cs-home .cs-mini{margin-inline:auto}
.cs-mini.no-photo{grid-template-columns:1fr}
.cs-mini:hover{transform:translateY(-2px)}
.cs-mini img{display:block;width:100%;height:100%;min-height:150px;object-fit:cover}
.cs-mini-copy{display:flex;flex-direction:column;gap:6px;padding:20px 24px}
.cs-mini-copy .eyebrow{margin:0;font-size:.7rem}
.cs-mini-copy b{color:var(--ink);font-size:1.2rem;line-height:1.25}
.cs-mini-copy>span:not(.eyebrow){color:var(--muted);font-size:.92rem;line-height:1.55}
.cs-mini-copy i{margin-top:4px;color:var(--blue);font-style:normal;font-weight:700}
.application-list .cs-mini{grid-column:3/-1;border-left:3px solid var(--orange)}

/* ── The build deployed: on the case study (beside the quotation), and the case
      study on that product page under "Related deployments" ── */
.cs-side{display:grid;gap:18px;align-content:start}
/* The sidebar stays beside the account as it scrolls, rather than ending a screen in. */
@media (min-width:761px){.cs-story .cs-side{position:sticky;top:20px}}
.cs-side .cs-mini{grid-template-columns:1fr;border-left:3px solid var(--orange)}
.cs-side .cs-mini img{height:auto;min-height:0;aspect-ratio:16/9;object-fit:cover}
.cs-system b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.01em}
#deployments .cs-mini{margin-top:6px}
#deployments .cs-mini+.cs-mini{margin-top:12px}

/* ── The page to print (owner 2026-09-14): the product page's PDF button, beside the account ── */
.sz-pdf{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0}
.sz-pdf-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--lg-ground,#0C2A45);
    border-radius:8px;background:#fff;color:var(--lg-ground,#0C2A45);font-size:.78rem;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;text-decoration:none}
.sz-pdf-btn:hover,.sz-pdf-btn:focus-visible{background:var(--lg-ground,#0C2A45);color:#fff}
.sz-pdf-btn svg{width:18px;height:18px;flex:none}
.sz-pdf-note{color:var(--muted,#5d7186);font-size:.84rem}

@media (max-width:760px){
  .cs-story-grid,.cs-photo-grid,.cs-card,.cs-mini{grid-template-columns:1fr}
  .cs-story-grid{gap:32px}
  .page-hero.cs-hero{padding:40px 0 34px}
  .section-light.cs-story{padding:36px 0 44px}
  .cs-card img,.cs-mini img{height:auto;min-height:0;aspect-ratio:16/9}
  .cs-card-body{padding:22px 20px}
  .application-list .cs-mini{grid-column:1/-1}
}
@media (min-width:761px) and (max-width:1099px){
  .cs-story-grid{grid-template-columns:minmax(0,1fr) 300px;gap:32px}
  .cs-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}