/* layan.ai — Use cases page: lumina explainer, example client use cases, Laya/Jev catalogue */

/* ---------- page intro ---------- */
.uc-hero { padding: clamp(48px, 8vw, 96px) 0 var(--s-7); border-bottom: 1px solid var(--line); }
.uc-hero h1 { font-size: var(--fs-3xl); max-width: 22ch; text-wrap: balance; }
.uc-hero .lede { margin-top: var(--s-4); }
.uc-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-5); }
.uc-jump a {
  font-size: var(--fs-xs); font-weight: 500; padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); color: var(--frost); transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.uc-jump a:hover { color: var(--paper); border-color: var(--signal); background: rgba(96, 157, 252, 0.08); }

/* ---------- shared section rhythm ---------- */
.uc-section { padding: var(--s-9) 0; border-top: 1px solid var(--line); }
.uc-section-head { max-width: 760px; margin-bottom: var(--s-6); }
.uc-section-head h2 { margin-bottom: var(--s-4); text-wrap: balance; }
.uc-kicker { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); margin-bottom: var(--s-3); }

/* ---------- lumina badge ---------- */
.lumina-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
  padding: 7px 14px 7px 10px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(96, 157, 252, 0.18), rgba(37, 78, 193, 0.18));
  border: 1px solid rgba(96, 157, 252, 0.4); color: var(--paper);
  margin-bottom: var(--s-4);
}
.lumina-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.6); animation: uc-pulse 1.8s infinite; }
@keyframes uc-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.5); } 100% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .lumina-badge .dot { animation: none; } }

/* ---------- lumina section ---------- */
.lumina-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-8); align-items: start; }
.lumina-copy p + p { margin-top: var(--s-3); }
.lumina-points { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.lumina-point { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: var(--fs-sm); color: var(--paper-2); }
.lumina-point::before { content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: 2px; background: var(--signal); }
.lumina-point strong { color: var(--paper); font-weight: 500; }

.uc-diagram-wrap { border-radius: var(--r-xl); border: 1px solid var(--line-strong); background: rgba(7, 20, 51, 0.6); padding: var(--s-5); box-shadow: var(--shadow-panel); }
.uc-diagram-wrap svg { width: 100%; height: auto; display: block; }
.uc-diagram-caption { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--muted); }

.uc-honest {
  margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-lg);
  border: 1px dashed rgba(242, 184, 75, 0.45); background: rgba(242, 184, 75, 0.06);
  display: grid; gap: 10px;
}
.uc-honest h3 { font-size: var(--fs-md); color: var(--warn); font-weight: 600; }
.uc-honest ul { display: grid; gap: 8px; }
.uc-honest li { font-size: var(--fs-sm); color: var(--paper-2); padding-left: 16px; position: relative; }
.uc-honest li::before { content: "—"; position: absolute; left: 0; color: var(--warn); }

.uc-jev {
  margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: rgba(2, 9, 31, 0.4); font-size: var(--fs-sm); color: var(--paper-2);
}
.uc-jev strong { color: var(--paper); font-weight: 500; }

@media (max-width: 900px) { .lumina-grid { grid-template-columns: 1fr; } }

/* ---------- filters ---------- */
.uc-filters { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.uc-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.uc-filter-label { font-size: var(--fs-xs); color: var(--muted); min-width: 84px; }
.uc-chip {
  font-size: var(--fs-xs); font-weight: 500; color: var(--frost);
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(170, 206, 253, 0.06); border: 1px solid var(--line-strong);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.uc-chip:hover { border-color: var(--signal); color: var(--paper); }
.uc-chip.is-on { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.uc-count { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- use-case cards ---------- */
.uc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.uc-card {
  padding: 22px; border-radius: var(--r-xl); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11, 28, 72, 0.55), rgba(7, 20, 51, 0.7));
  display: flex; flex-direction: column; gap: 12px; transition: border-color var(--t-ui), transform var(--t-ui) var(--ease-out);
}
.uc-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.uc-card[hidden] { display: none; }
.uc-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.uc-tag-company { font-size: var(--fs-xs); font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(96, 157, 252, 0.14); border: 1px solid rgba(96, 157, 252, 0.32); color: var(--frost); }
.uc-tag-module { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; background: rgba(170, 206, 253, 0.08); color: var(--muted); }
.uc-card h3 { font-size: var(--fs-lg); text-wrap: balance; }
.uc-situation { font-size: var(--fs-sm); color: var(--paper-2); }
.uc-row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; font-size: var(--fs-xs); }
.uc-row b { color: var(--frost); font-weight: 500; }
.uc-row span { color: var(--paper-2); }
.uc-row.is-wait span { color: var(--warn); }
.uc-evidence { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--paper-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.uc-evidence .ev { margin-right: 2px; }

@media (max-width: 900px) { .uc-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .uc-cards { grid-template-columns: 1fr; } .uc-row { grid-template-columns: 84px 1fr; } }

/* ---------- Laya / Jev catalogue ---------- */
.uc-lj-intro { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.uc-lj-intro p { font-size: var(--fs-md); color: var(--paper-2); max-width: 74ch; }
.uc-lj-intro a { color: var(--signal); border-bottom: 1px solid rgba(96, 157, 252, 0.4); }
.uc-lj-intro a:hover { border-color: var(--signal); }
.uc-source-note { font-size: var(--fs-xs); color: var(--muted); }

.uc-category { margin-top: var(--s-7); }
.uc-category:first-of-type { margin-top: 0; }
.uc-category-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.uc-category-head h3 { font-size: var(--fs-xl); }
.uc-category-head a { font-size: var(--fs-xs); color: var(--signal); white-space: nowrap; }
.uc-category-head a:hover { text-decoration: underline; }
.uc-lj-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.uc-lj-card {
  padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: rgba(7, 20, 51, 0.5); display: flex; flex-direction: column; gap: 8px;
}
.uc-lj-card h4 { font-size: var(--fs-md); font-weight: 600; }
.uc-lj-card p { font-size: var(--fs-sm); color: var(--paper-2); }
.uc-lj-figure { font-size: var(--fs-xs); color: var(--frost); background: rgba(96, 157, 252, 0.08); border: 1px solid rgba(96, 157, 252, 0.22); border-radius: var(--r-sm); padding: 8px 10px; }
.uc-lj-figure b { color: var(--paper); font-weight: 600; }
.uc-lj-attrib { margin-top: auto; font-size: 0.68rem; color: var(--muted); }
.uc-lj-attrib a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.uc-lj-attrib a:hover { color: var(--frost); }

@media (max-width: 900px) { .uc-lj-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .uc-lj-cards { grid-template-columns: 1fr; } }

/* ---------- diagram theming (inherits currentColor, safe in light or dark) ---------- */
.uc-diagram .box-fill { fill: rgba(96, 157, 252, 0.1); }
.uc-diagram .box-stroke { fill: none; stroke: var(--line-strong); }
.uc-diagram .box-title { fill: var(--paper); font-weight: 600; }
.uc-diagram .box-sub { fill: var(--muted); }
.uc-diagram .flow { stroke: var(--signal); fill: none; }
.uc-diagram .flow-head { fill: var(--signal); }
.uc-diagram .inner-fill { fill: rgba(7, 20, 51, 0.7); }
.uc-diagram .inner-stroke { fill: none; stroke: var(--line); }