/* case studies: long-form pages that share the CV's look (load after style.css) */

body.case-study {
  --gutter: clamp(1rem, 5vw, 3.5rem);
  --text: 49rem;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  display: grid;
  grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [text-start] minmax(0, var(--text)) [text-end] minmax(var(--gutter), 1fr) [full-end];
  max-width: none;
  padding-inline: 0;
}
.case-study > *, .case-study main > * { grid-column: text; }
.case-study main { display: grid; grid-template-columns: subgrid; grid-column: full; align-content: start; }
.case-study main > * + * { margin-top: 1rem; }
.case-study main > .full { grid-column: full; padding-inline: var(--gutter); }

/* header: name of the company, role and dates, link back to the CV */

.case-study header { display: block; }
.case-study .back { margin-bottom: 1.5rem; font-size: .9rem; }
.case-study .back a { text-decoration: none; }
.case-study .back a:hover { text-decoration: underline; }
.case-study .role { margin-top: .5rem; }
.case-study .lead { margin-top: 2rem; font-size: 1.1rem; }

/* at a glance: role, location, stack and highlights, right after the lead */

.case-study .glance { margin-top: 2rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--chip); }
.case-study .glance h2 { margin: 0 0 .9rem; padding: 0; border: 0; }
.case-study .glance dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1.25rem; }
.case-study .glance dt { color: var(--muted); font-weight: normal; }
.case-study .glance ul { margin-top: 1rem; padding-left: 1.2rem; }
.case-study .glance li + li { margin-top: .35rem; }
@media (max-width: 30rem) {
  .case-study .glance { padding: 1rem 1.1rem; }
  .case-study .glance dl { grid-template-columns: 1fr; }
  .case-study .glance dd + dt { margin-top: .4rem; }
}

/* headings */

.case-study main > h2 { margin-top: 3rem; margin-bottom: 0; }
.case-study main > h3 { margin-top: 2.25rem; font: 600 1.25rem/1.3 var(--display); letter-spacing: -.01em; }
.case-study main > h4 { margin-top: 1.5rem; font-weight: 600; }
.case-study main > h2 + *, .case-study main > h3 + *, .case-study main > h4 + * { margin-top: 1rem; }

/* text */

.case-study ol { padding-left: 1.4rem; }
.case-study blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 3px solid var(--accent); color: var(--muted); }
.case-study blockquote > * + * { margin-top: .75rem; }
.case-study hr { width: 100%; border: 0; border-top: 1px solid var(--line); }
.case-study code { padding: .1em .3em; border-radius: .25rem; background: var(--chip); font: .875em var(--mono); }
.case-study pre { overflow: auto; margin: 0; padding: 1rem 1.25rem; border-radius: .5rem; background: var(--chip); font-size: .8rem; line-height: 1.55; tab-size: 2; }
.case-study pre code { padding: 0; background: none; font-size: inherit; }
.case-study details { padding: .75rem 1rem; border: 1px solid var(--line); border-radius: .5rem; }
.case-study summary { cursor: pointer; font-weight: 600; }
.case-study details[open] > summary { margin-bottom: .75rem; }
.case-study details > * + * { margin-top: .75rem; }
.case-study .footnotes { color: var(--muted); font-size: .875rem; }
.case-study sup a { text-decoration: none; }

/* tables scroll sideways on small screens */

.case-study table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.case-study :is(th, td) { padding: .4rem .9rem .4rem 0; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.case-study th { color: var(--muted); font-weight: 600; }

/* figures: media stays within the text column, bigger ones open in the lightbox */

.case-study figure { margin: 1.75rem 0 .75rem; }
.case-study figure :is(img, video) { display: block; max-width: 100%; height: auto; margin-inline: auto; border: 1px solid var(--line); border-radius: .5rem; }
.case-study figcaption { margin-top: .6rem; color: var(--muted); font-size: .875rem; text-align: center; text-wrap: balance; }
.case-study [data-zoom] { cursor: zoom-in; }
.case-study .zoom-video { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; }
.case-study .zoom-video button {
  position: absolute; top: .5rem; right: .5rem;
  padding: .3rem .6rem; border: 0; border-radius: 1rem;
  background: rgb(0 0 0 / .6); color: #fff; font: inherit; font-size: .8rem; cursor: pointer;
}

.lightbox {
  width: 100vw; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: 1rem; border: 0;
  background: rgb(0 0 0 / .88);
  cursor: zoom-out;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: none; }
.lightbox :is(img, video) { max-width: 100%; max-height: calc(100dvh - 2rem); width: auto; height: auto; object-fit: contain; }

/* before/after comparison: the range input drives --pos, which clips the second image */

.compare {
  --pos: 50%;
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .5rem;
}
.case-study .compare img { max-width: 100%; border: 0; border-radius: 0; }
.compare img + img { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 0 var(--pos)); }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare::after { content: ""; position: absolute; inset: 0 auto 0 var(--pos); width: 3px; translate: -50%; background: var(--accent); pointer-events: none; }
.compare::before {
  content: "⇔";
  position: absolute; top: 50%; left: var(--pos); z-index: 1;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; translate: -50% -50%;
  border-radius: 50%;
  background: var(--accent); color: var(--bg);
  pointer-events: none;
}
.compare:has(input:focus-visible)::before { outline: 3px solid var(--fg); outline-offset: 2px; }

/* two code listings side by side, same height, for comparison */

.code-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1rem; }
.code-compare figure { margin: 0; min-width: 0; }
.code-compare figcaption { margin: 0 0 .5rem; color: var(--fg); font-weight: 600; text-align: start; }
.code-compare pre { height: min(40rem, 80dvh); }

/* phone mockups */

.phones { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2rem; margin-block: 1.75rem .75rem; }
/* the screen sits at 31,116 (320×568) inside the 379×797 frame image */
.phone { position: relative; width: min(19rem, 100%); aspect-ratio: 379 / 797; background: url(doodle/frame.png) center / 100% 100% no-repeat; }
.phone :is(img, video) { position: absolute; left: 8.18%; top: 14.55%; width: 84.43%; height: 71.27%; object-fit: cover; background: #000; }
.phones > img { width: min(20rem, 100%); height: auto; border: 1px solid var(--line); border-radius: .5rem; }

/* previous / next case study, and back to the CV */

.case-study main > .case-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem;
  margin-block: 4rem 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.case-nav a { text-decoration: none; font: 600 1.1rem/1.3 var(--display); }
.case-nav a:hover { text-decoration: underline; }
.case-nav span { display: block; color: var(--muted); font: .8rem/1.4 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.case-nav a span { margin-bottom: .15rem; }
.case-nav .prev span::before { content: "← "; }
.case-nav .next { text-align: right; }
.case-nav .next span::after { content: " →"; }
.case-nav .cv { font: inherit; font-size: .9rem; }