/* Styling that only the generated pages under work/<slug>/ need.
 *
 * Everything else on those pages reuses styles.css: the fixed rail header, the footer and
 * the whole .case-* system that the project dialog already uses. Only three things are
 * genuinely new on a standalone page and have no rule in styles.css:
 *
 *   1. the project title is an <h1> there, while the dialog renders an <h2>;
 *   2. the page itself has to carry the project tint that .project-dialog carries;
 *   3. breadcrumb, summary sentence and the project index at the foot of the page.
 *
 * Loaded only by work/<slug>/index.html, so the homepage pays nothing for it.
 */

.case-main {
  /* Same mix as .project-dialog, so a project reads identically whether it is opened as a
     dialog from the homepage or visited directly. */
  --case-color: var(--surface);
  --case-color-strength: 82%;
  /* SC 1.4.3: on the mixed background the global --muted drops to 4,06:1 for the darker
     project colours. Identical local correction to the one .project-dialog makes. */
  --muted: #575852;
  min-height: 100dvh;
  background: color-mix(in srgb, var(--case-color) var(--case-color-strength), var(--surface));
}

html[data-theme="dark"] .case-main {
  --case-color-strength: 16%;
  --muted: #a7a8a2;
}

html[data-theme="dark"] .case-main .case-hero,
html[data-theme="dark"] .case-main .case-gallery img {
  filter: brightness(0.92);
}

.case-breadcrumb {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 26px var(--page-gutter) 0;
  color: var(--muted);
  font-size: 12px;
}

.case-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.55;
}

.case-breadcrumb a {
  color: inherit;
}

.case-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 110px) var(--page-gutter) clamp(72px, 10vw, 150px);
}

/* Mirrors .case-header h2 in styles.css. On a standalone page the project name is the
   page heading, so it has to be an h1; the type treatment stays identical. */
.case-page .case-header h1 {
  max-width: 10ch;
  font-size: clamp(58px, 10vw, 170px);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.82;
}

/* Inside the dialog the chapter, detail and credits titles are h3 under the project h2. On a
   standalone page the project name is the h1, so those titles move up to h2. These four rules
   repeat the type treatment of .case-chapter-copy h3, .case-detail h3 and .case-credits h3
   from styles.css for that one heading level. Change them together. */
.case-page .case-chapter-copy h2 {
  grid-column: 2 / span 5;
  max-width: 10ch;
  font-size: clamp(42px, 6.4vw, 108px);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.case-page .case-detail h2 {
  grid-column: 2 / span 5;
  max-width: 12ch;
  font-size: clamp(30px, 4vw, 62px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.case-page .case-credits h2 {
  grid-column: 1 / span 3;
  font-size: 14px;
  font-weight: 600;
}

/* One self-contained sentence carrying name, location, typology and status. The .case-meta
   grid states the same facts, but as label plus value fragments, which a text extractor
   flattens into "TypologyShop and maisonette transformation". See docs/geo-strategie.md,
   section 3, requirements 1, 3 and 5. */
.case-summary {
  max-width: 62ch;
  margin-top: clamp(28px, 4vw, 54px);
  color: var(--muted);
  font-size: clamp(15px, 1.1vw, 18px);
}

.case-summary strong {
  color: var(--ink);
  font-weight: 600;
}

/* The figures in .case-facts are a value and a label in separate elements. This repeats
   them as running text so each number keeps its subject and unit. */
.case-facts-sentence {
  max-width: 62ch;
  margin: 0 0 clamp(30px, 4vw, 56px);
  color: var(--muted);
  font-size: 14px;
}

/* Sits next to the article rather than inside it: this is navigation, not part of the
   project story. It therefore carries its own page container. */
.case-index {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter) clamp(70px, 9vw, 130px);
}

.case-index h2 {
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.case-index ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 var(--page-gutter);
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.case-index a {
  display: grid;
  gap: 3px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.case-index a:hover span,
.case-index a:focus-visible span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.case-index span {
  font-size: 17px;
  letter-spacing: -0.02em;
}

.case-index small {
  color: var(--muted);
  font-size: 12px;
}

.case-index [aria-current="page"] {
  color: var(--muted);
}

.case-index-back {
  margin-top: clamp(40px, 5vw, 70px);
}

@media (max-width: 900px) {
  /* Below 900px the rail turns into a fixed bar across the top, and the breadcrumb is the
     first thing on the page, so it has to clear that bar itself. */
  .case-breadcrumb {
    padding-top: calc(var(--header-height) + 18px);
  }

  /* Mirrors the single-column collapse that styles.css applies to the h3 variants. */
  .case-page .case-chapter-copy h2,
  .case-page .case-detail h2,
  .case-page .case-credits h2 {
    grid-column: 1;
  }

  .case-index ul {
    grid-template-columns: 1fr;
  }
}