/* ============================================================
   SKEION — use cases (/use-cases.html): what belongs to this page only.
   Loaded after /assets/site/site.css. Shared (page head, section head, stats and sources, badges, scene figure, cards,
   steps, links): see docs/build/13-design-system.md. Prefix: .uc-
   Rewrite of 5 October 2026 (docs/build/26-use-cases-rewrite.md): a short header with the sectors of the page, two full
   sector blocks (risk, what SKEION brings, one scene), the other sectors in one row of cards, what a pilot project is.
   Nothing else. No « Fig. n » and no section numbers (audit A16, docs/build/30-clarity-final.md).
   ============================================================ */

/* ---------- 01 Header: the sectors of the page, as plain links under the call to action ---------- */
.uc-jump { margin-top: 20px; }
.uc-jump ul { display: flex; flex-wrap: wrap; column-gap: 24px; }
.uc-jump a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 6px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
@media (hover: hover) { .uc-jump a:hover { color: var(--teal); text-decoration-color: currentColor; } }
@media (max-width: 767px) { .uc-jump { margin-top: 14px; } .uc-jump ul { column-gap: 18px; } }

/* ---------- 02–03 Sector blocks: the risk, then what SKEION brings (left, 7 columns); the scene (right, 5 columns) ----------
   Below 1024 px the three parts follow each other in this order: risk, what SKEION brings, scene. */
@media (min-width: 1024px) {
  .uc-grid { column-gap: 40px; row-gap: 40px; align-items: start; }
  .uc-risk { grid-column: 1 / span 7; grid-row: 1; }
  .uc-brings { grid-column: 1 / span 7; grid-row: 2; }
  .uc-fig { grid-column: 8 / -1; grid-row: 1 / span 2; }
}
@media (max-width: 767px) {
  /* long audience names wrap: the rule moves below them instead of being squeezed to nothing */
  .uc .sec-head { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; align-items: baseline; }
  .uc .sec-head .eyebrow { grid-column: 2; }
  .uc .sec-head .rule { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }
}

/* the risk: a title that states it, one or two sentences on how, one documented case and its sources */
.uc-case { margin-top: clamp(24px, 2.4vw, 32px); max-width: 560px; }
.uc-case + .sources { max-width: 560px; }

/* what SKEION brings: one row per level of the offer, its status on the right, one sentence under it */
.uc-k { font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
.uc-levels { margin-top: 14px; }
.uc-level {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 20px;
  padding: 14px 0 15px; border-top: 1px solid var(--line);
}
.uc-level:last-child { border-bottom: 1px solid var(--line); }
.uc-level-k { font: 500 1.06rem/1.3 var(--f-display); letter-spacing: -0.005em; color: var(--ink); }
.uc-level .badge { justify-self: end; white-space: nowrap; }
.uc-level-b { grid-column: 1 / -1; font-size: 1rem; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }   /* 62 ch: the Event Replay and Early Alert sentences are longer (docs/build/41) */
html[lang="fr"] .uc-level-b, html[lang="fr"] .uc-cards .card-b, html[lang="fr"] .uc-start-head .body { hyphens: manual; -webkit-hyphens: manual; }   /* short sentences: no word cut in two */
.uc-more { margin-top: 14px; }
/* a short note under the levels (the NERC standard, power grids only): smaller than the levels, same measure */
.uc-note { margin-top: 16px; max-width: 62ch; font-size: 0.94rem; line-height: 1.55; color: var(--ink-2); }
html[lang="fr"] .uc-note { hyphens: manual; -webkit-hyphens: manual; }

/* the scene: 4:3 at every size, never wider than 470 px, so that the engine always draws its compact layout (the one
   it uses under 480 px, validated at 400 × 300 and drawn by the « -mobile » posters). Tried at 556 px, the wide layouts
   overlap: leo-drag writes its « 550 km » orbit label over the « illustrative » tag, grid-gic its B–H loop label over
   the lower edge.
   Caption and pause control under it, no model values. The poster stands in until the scene is ready. */
.fig--scene.uc-fig { margin-top: 0; padding-left: 0; grid-template-columns: minmax(0, 1fr); }
.uc-fig .fig-cap > .fig-n, .uc-fig .fig-cap > .fig-d { display: inline; }   /* one line: what you see, then « Illustration. » (audit A16) */
.uc-fig > figcaption { grid-column: 1; grid-row: 2; }
.uc-fig > .motion-btn--fig { grid-column: 1; grid-row: 3; }
.fig--scene.uc-fig .sk-stage { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .uc-fig { max-width: 470px; } }
.uc-fig[data-skeion-scene="leo-drag"] { --poster: image-set(url("/assets/img/scenes/leo-drag-mobile.avif") type("image/avif"), url("/assets/img/scenes/leo-drag-mobile.jpg") type("image/jpeg")); }
.uc-fig[data-skeion-scene="grid-gic"] { --poster: image-set(url("/assets/img/scenes/grid-gic-mobile.avif") type("image/avif"), url("/assets/img/scenes/grid-gic-mobile.jpg") type("image/jpeg")); }
html[lang="fr"] .uc-fig[data-skeion-scene="leo-drag"] { --poster: image-set(url("/assets/img/scenes/leo-drag-fr-mobile.avif") type("image/avif"), url("/assets/img/scenes/leo-drag-fr-mobile.jpg") type("image/jpeg")); }
html[lang="fr"] .uc-fig[data-skeion-scene="grid-gic"] { --poster: image-set(url("/assets/img/scenes/grid-gic-fr-mobile.avif") type("image/avif"), url("/assets/img/scenes/grid-gic-fr-mobile.jpg") type("image/jpeg")); }
/* the canvas of a scene is transparent: once the engine has built the scene (and drawn its first frame in the same
   task), the poster is taken away, otherwise its labels would show through. It stays if the scene fails to load. */
.fig--scene.uc-fig[data-scene-status="ready"] .sk-stage { background-image: none; }

/* ---------- 04 Other sectors: one card each (risk, then what SKEION brings, in full ink) ---------- */
.uc-cards { margin-top: clamp(28px, 2.6vw, 40px); }
.uc-gives { color: var(--ink); }
.uc-cards .card-f { margin-top: auto; padding-top: 4px; }

/* ---------- 05 How to start: what a pilot project is, then the call to action ---------- */
@media (min-width: 1024px) {
  .uc-start-head { align-items: end; }
  .uc-start-head .h2 { grid-column: 1 / span 7; }
  .uc-start-head .body { grid-column: 8 / -1; }
}
.uc-start-cta { margin-top: clamp(32px, 3vw, 44px); padding-left: var(--idx); }
@media (max-width: 1023px) { .uc-start-cta { padding-left: 0; } }
@media (max-width: 767px) { .uc-start-cta .btn { flex: 1 1 220px; } }