/* ===== Case pages: one page per app, plus the index. Relies on styles.css and page.css. ===== */

/* breadcrumbs on the dark hero */
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 clamp(26px,4vh,40px);padding:0;font-size:13.5px;color:var(--muted-d)}
.crumbs li+li::before{content:"/";margin-right:6px;color:rgba(255,255,255,.32)}
.crumbs a{color:rgba(255,255,255,.78);transition:color .25s var(--ease)}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:#fff}

/* the app icon, in the shape the platforms give it */
.case-hero-icon{display:block;width:clamp(76px,8vw,112px);height:auto;aspect-ratio:1;border-radius:22.5%;
  margin:0 0 clamp(22px,3.4vh,34px);box-shadow:0 0 0 1px rgba(255,255,255,.14)}

/* the hero links name the app's own site, so they may wrap on a phone instead of running past the screen edge */
.phero-cta .pill{white-space:normal;text-align:left;max-width:100%}

/* the facts list at the top of a case */
.case-facts .kv-row{padding:clamp(14px,2.2vh,20px) 0}
.case-facts .kv-val{font-size:clamp(17px,1.5vw,21px);line-height:1.4}
.case-src{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.case-lede{margin-top:clamp(48px,7vh,80px)}

/* the close of a case: where to see the app, and how to start a project */
.case-end{margin-top:clamp(40px,6vh,64px)}
.case-end-cta{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 26px}
.case-end-cta .pill{white-space:normal;text-align:left}
.page-p.case-more{margin-top:0}

/* the index: one card per app */
.case-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(18px,2vw,28px);margin:0;padding:0}
.case-card-link{display:flex;flex-direction:column;gap:10px;height:100%;padding:clamp(22px,2.4vw,30px);border-radius:22px;
  background:var(--paper-2);color:var(--ink);transition:transform .4s var(--ease),background .3s var(--ease)}
@media(hover:hover){.case-card-link:hover{transform:translateY(-3px);background:#ececea}}
.case-card-icon{width:72px;height:72px;border-radius:22.5%;margin-bottom:12px;box-shadow:0 0 0 1px var(--line)}
.case-card-name{font-weight:400;letter-spacing:-.02em;line-height:1.1;font-size:clamp(24px,2.2vw,30px);margin:0}
.case-card-plat{font-size:13.5px;color:var(--muted);margin:0}
.case-card-text{font-size:16px;line-height:1.5;color:#3a3a3a;margin:0;flex:1}
.case-card-more{align-self:flex-start;margin-top:8px;font-size:15px;font-weight:500;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.case-index-after{margin-top:clamp(48px,7vh,80px)}
.case-index-after .page-p+.page-p{margin-top:14px}

/* compact linked cards with an app or game icon: "Fler case" on each case, and the games on the index */
.case-mini-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(12px,1.4vw,18px)}
.case-mini{display:flex;align-items:center;gap:16px;height:100%;padding:16px 18px;border-radius:18px;background:var(--paper-2);color:var(--ink);transition:background .3s var(--ease)}
@media(hover:hover){.case-mini:hover{background:#ececea}}
.case-mini-icon{width:52px;height:52px;flex:none;border-radius:22.5%;box-shadow:0 0 0 1px var(--line)}
.case-mini-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.case-mini-name{font-size:18px;line-height:1.2;letter-spacing:-.01em}
.case-mini-line{font-size:14.5px;line-height:1.45;color:#4a4a4a}
.case-sibs{margin-top:clamp(48px,7vh,80px)}
.case-games{margin-top:clamp(56px,8vh,96px);padding-top:clamp(32px,5vh,48px);border-top:1px solid var(--ink)}
.page-p.case-games-more{margin-top:22px}