/* project.css: the case page (vertical scroll, text and pictures alternating). */
.case { background: var(--cream); padding: calc(80px + var(--space-6)) var(--space-6) var(--space-8); }
.case > *, .case-body > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.case-head h1 { font-size: clamp(40px, 6vw, 84px); line-height: 1; margin: var(--space-2) 0 var(--space-4); }
.case-intro { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; max-width: 760px; }
.case-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.case-media { margin: var(--space-7) auto; background: var(--white); }
.case-cover-card { aspect-ratio: 16 / 9; }
.case-media img, .case-media video { display: block; width: 100%; height: auto; }
.case-block { max-width: 760px; margin: var(--space-7) auto; }
.case-block h2 { font-size: 28px; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: var(--line-bold) solid var(--black); }
.case-block p, .case-block li { font-size: 18px; line-height: 1.6; }
.case-block ul { padding-left: 1.2em; margin: 0; }
.case-block li + li { margin-top: var(--space-2); }
.case-next { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--line-thin) solid var(--black); font-weight: 700; font-size: 18px; }
.case-next a { color: var(--black); min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 760px) {
  .case { padding: var(--space-6) var(--space-3) var(--space-7) calc(var(--rail) + var(--space-3)); }
  .case-media { margin: var(--space-5) 0; }
}
.case-fulltitle { font-weight: 700; font-style: italic; }

/* Nora's own sections: space between paragraphs, pictures under the heading, the closing line as a quote */
.case-block p + p { margin-top: var(--space-3); }
.case-block-media { margin: 0 0 var(--space-4); }
.case-block-media img { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; margin: 0 auto; }   /* tall phone screens don't fill the whole screen */
.case-quote { margin-top: var(--space-5) !important; font: italic 600 22px/1.45 var(--font-heading); }

/* A row of app screens without background, each with its title under it in Chathura (Nora, 11 Nov) */
.case-screens { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--space-5);
  width: min(1100px, calc(100vw - 96px)); margin: var(--space-5) 0 var(--space-6) 50%; transform: translateX(-50%); }   /* wider than the text (Nora, 11 Nov) */
.case-screens figure { margin: 0; text-align: center; }
.case-screens img, .case-screens video, .case-block-media video { display: block; width: 100%; height: auto; }
.case-screens.no-caps { align-items: center; }
.case-screens figcaption { margin-top: var(--space-3); font: 800 32px/1 var(--font-accent); letter-spacing: .02em; }
@media (max-width: 760px) { .case-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; margin-left: 0; transform: none; } .case-screens figcaption { font-size: 22px; } }

/* Collage (Nora, 11 Nov): the pictures fit together like puzzle pieces on a 6-column grid with the same
   20 px gap everywhere. Pieces fill their cell (cropped slightly where needed).
   1 logo (square) | 2 mockup (square) | 3 video (square)
   4 mockup (wide)         | 5 mockup (wide)
   6 banner (full width) */
.case-collage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px;
  width: min(1100px, calc(100vw - 96px)); margin: var(--space-5) 0 var(--space-5) 50%; transform: translateX(-50%); }
.case-collage figure { margin: 0; overflow: hidden; }
.case-collage img, .case-collage video { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-collage .cc-1, .case-collage .cc-2, .case-collage .cc-3 { grid-column: span 2; aspect-ratio: 1; }
.case-collage .cc-3 video { object-position: center top; }
.case-collage .cc-4, .case-collage .cc-5 { grid-column: span 3; aspect-ratio: 3 / 2; }
.case-collage .cc-6 { grid-column: span 6; aspect-ratio: 6.6; }
@media (max-width: 760px) {
  .case-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-left: 0; transform: none; }
  .case-collage .cc-1, .case-collage .cc-3 { grid-column: span 1; }
  .case-collage .cc-2 { grid-column: span 2; aspect-ratio: 4 / 3; grid-row: 2; }
  .case-collage .cc-4, .case-collage .cc-5, .case-collage .cc-6 { grid-column: span 2; }
}