/* =============================================================
   QMerse — p-case-studies.css (Use cases page only; loads after site.css)
   The hero plays the two recordings; the applications are large tiles, the workflow patterns ruled rows
   (after Goodfire's research index); a detail window opens each case. Every case is in the markup.
   ============================================================= */

/* ---- Hero: the headline, the recording, and the choice of recording ---- */
.uc-hero { padding-bottom: clamp(48px, 5vw, 72px); }
.uc-hero-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr); grid-template-areas: "copy media" "pick media";
  column-gap: clamp(32px, 4.5vw, 72px); row-gap: 30px; align-items: start; }
.uc-hcopy { grid-area: copy; align-self: end; }
.uc-hcopy .lede { margin-top: 22px; }
.uc-hero h1 { font-size: clamp(40px, 4.4vw, 64px); }
.uc-fmedia { grid-area: media; align-self: center; position: relative; }
.uc-fmedia .run-media { aspect-ratio: 1380 / 800; height: auto; }
.uc-fmedia video { cursor: pointer; }
.uc-hpick { grid-area: pick; }
.uc-fswitch { border-top: 1px solid var(--line); }
.uc-fswitch button { position: relative; display: block; width: 100%; text-align: start; padding: 14px 0 14px 18px; border-bottom: 1px solid var(--line); }
.uc-fswitch button::before { content: ''; position: absolute; inset-inline-start: 0; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: transparent; transition: background 0.25s; }
.uc-fswitch b { display: block; font-weight: 500; font-size: 17px; line-height: 1.3; color: var(--text-mute); transition: color 0.25s; }
.uc-fswitch span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--text-dim); }
.uc-fswitch button:hover b, .uc-fswitch button[aria-pressed="true"] b { color: var(--text); }
.uc-fswitch button[aria-pressed="true"]::before { background: var(--acc); }
.uc-hmore { margin-top: 18px; }
html:not(.js) .uc-hpick { display: none; }
@media (max-width: 980px) { .uc-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "media" "pick"; } }
@media (max-width: 480px) { .uc-fswitch span { display: none; } }

/* ---- Filters: plain text tabs over the list ---- */
.uc-wrap { background: var(--bg); }
.uc-wrap.section { padding-top: clamp(48px, 6vw, 80px); }
.uc-bar { border-bottom: 1px solid var(--line); margin-bottom: clamp(40px, 5vw, 60px); }
.uc-filters { display: flex; gap: 0 28px; }
.uc-filter { flex: none; padding: 12px 0; font-size: 15.5px; color: var(--text-mute); transition: color 0.25s, box-shadow 0.25s; }
.uc-filter b { font-weight: 400; font-size: 13px; color: var(--text-dim); margin-inline-start: 3px; }
.uc-filter:hover { color: var(--text); }
.uc-filter[aria-pressed="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--acc); }
html:not(.js) .uc-bar { display: none; }
@media (max-width: 640px) {
  .uc-filters { overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .uc-filters::-webkit-scrollbar { display: none; }
}

/* ---- Groups ---- */
.uc-group + .uc-group { margin-top: clamp(64px, 8vw, 112px); }
.uc-group[hidden] { display: none; }
.uc-gh { font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.02em; margin: 0 0 28px; }

/* ---- A case: screen, category, title, one line ---- */
.uc-card { min-width: 0; }
.uc-card[hidden] { display: none; }
.uc-card.is-in { animation: rmFade 0.45s ease both; }
.uc-link { display: block; color: var(--text); }
.uc-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--fill); border: 1px solid var(--line); border-radius: 10px; }
.uc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform 0.8s var(--ease-out), filter 0.3s; }
.uc-link:hover .uc-thumb img { transform: scale(1.03); }
html[data-theme="dark"] .uc-thumb img.lt { filter: brightness(0.88); }
html[data-theme="dark"] .uc-link:hover .uc-thumb img.lt { filter: none; }
.uc-body { display: flex; flex-direction: column; gap: 6px; }
.uc-tag { font-size: 13.5px; color: var(--text-dim); }
.uc-card h3 { font-family: var(--font-sans); font-weight: 500; font-size: 19px; line-height: 1.3; letter-spacing: -0.012em; }
.uc-card h3::after { content: '\2192'; content: '\2192' / ''; display: inline-block; margin-inline-start: 8px; color: var(--text-dim); transition: transform 0.3s var(--ease), color 0.3s; }
.uc-link:hover h3::after { transform: translateX(4px); color: var(--acc-hi); }
.uc-card p { font-size: 15px; line-height: 1.55; color: var(--text-mute); }
.js .uc-full { display: none; }
.uc-full { margin: 14px 0 40px; }
.uc-full p, .uc-full li { color: var(--text-mute); font-size: 15.5px; line-height: 1.65; margin-bottom: 10px; }

/* Applications: large tiles, two by two */
.uc-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
.uc-apps .uc-body { padding-top: 18px; }
.uc-apps h3 { font-size: 24px; }
html:not(.js) .uc-apps { display: block; }
@media (max-width: 760px) { .uc-apps { grid-template-columns: minmax(0, 1fr); gap: 40px; } .uc-apps h3 { font-size: 21px; } }

/* Workflow patterns: ruled rows with a small screen */
.uc-rows { border-top: 1px solid var(--line); }
.uc-rows .uc-card { border-bottom: 1px solid var(--line); }
.uc-rows .uc-link { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 28px; align-items: center; padding: 20px 0; }
.uc-rows .uc-thumb { border-radius: 6px; }
@media (max-width: 640px) {
  .uc-rows .uc-link { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
  .uc-rows .uc-card p { display: none; }
  .uc-rows .uc-card h3 { font-size: 17px; }
}

/* ---- Detail window ---- */
.uc-modal {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: clamp(10px, 3vw, 40px);
  background: rgba(var(--bg-rgb),0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.uc-modal.open { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.uc-dialog {
  width: min(1100px, 100%); max-height: calc(100dvh - 2 * clamp(10px, 3vw, 40px)); display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: 0 50px 120px -40px var(--shadow);
  transform: translateY(14px); transition: transform 0.45s var(--ease-out);
}
.uc-modal.open .uc-dialog { transform: none; }
.uc-dbar { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--line); }
.uc-dpos { flex: 1; min-width: 0; font-size: 14px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.uc-dpos b { color: var(--text); font-weight: 500; }
.uc-dctl { display: inline-flex; gap: 6px; flex: none; }
.uc-dscroll { overflow: auto; overscroll-behavior: contain; }
.uc-media { background: #eef1f6; border-bottom: 1px solid var(--line); }
.uc-media.dark { background: #0b1017; }
.uc-media img, .uc-media video { display: block; width: 100%; max-height: 62vh; object-fit: contain; }
.uc-media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.uc-dbody { padding: clamp(22px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.38fr); gap: clamp(20px, 4vw, 56px); }
.uc-dbody h2 { font-size: clamp(28px, 3vw, 42px); margin: 0 0 18px; }
.uc-rich p { color: var(--text-mute); font-size: 16px; line-height: 1.7; margin-bottom: 14px; }
.uc-rich p strong, .uc-rich li strong { color: var(--text); font-weight: 500; }
.uc-rich em { color: var(--text); }
.uc-rich .uc-list, .uc-full .uc-list { margin: 4px 0 18px; display: flex; flex-direction: column; gap: 8px; }
.uc-rich .uc-list li, .uc-full .uc-list li { position: relative; padding-inline-start: 18px; color: var(--text-mute); font-size: 15.5px; line-height: 1.55; }
.uc-rich .uc-list li::before, .uc-full .uc-list li::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.72em; width: 8px; height: 1px; background: var(--acc-hi); }
.uc-side { align-self: start; position: sticky; top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.uc-side p { font-size: 15px; line-height: 1.55; color: var(--text-mute); }
#ucClose { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 880px) { .uc-dbody { grid-template-columns: 1fr; } .uc-side { position: static; } }
@media (max-width: 560px) {
  .uc-dctl .ctl-t { display: none; }
  #ucClose { width: 36px; padding: 0; justify-content: center; }
  .uc-media img, .uc-media video { max-height: 44vh; }
}
@media (prefers-reduced-motion: reduce) { .uc-link:hover .uc-thumb img { transform: none; } .uc-dialog { transition: none; } }