/* Examples gallery and detail surface authored in .luis for demo browsing. */
--exampleGap: [8px,12px,18px,24px,32px];
--exampleRadius: { card: 24px; thumb: 18px; pill: 999px; };
--exampleShadow: { card: 0 10px 30px rgba(20, 42, 88, 0.08); };
--exampleCard: { padding: 22px; border-radius: var(--exampleRadius.card); border: 1px solid var(--site-border); background: var(--site-surface); box-shadow: var(--exampleShadow.card); };
--exampleBreakpoints: [{ max: 1040px; columns: 2; }, { max: 760px; columns: 1; }];
.example-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--exampleGap[3]); };
.example-card { var(--exampleCard); display: grid; gap: var(--exampleGap[2]); }
.example-thumb { aspect-ratio: 16 / 10; border-radius: var(--exampleRadius.thumb); border: 1px solid var(--site-border); background: linear-gradient(135deg, var(--site-accent-soft), color-mix(in srgb, var(--site-surface) 80%, white 20%)); display: grid; place-items: center; font-size: 1.15rem; font-weight: 700; color: var(--site-text); text-align: center; padding: 18px; }
.example-card h2, .example-card h1 { margin: 0; }
.example-card p, .example-meta p, .example-shell p { margin: 0; color: var(--site-muted); line-height: 1.7; }
.example-link-row { display: flex; flex-wrap: wrap; gap: 12px; }
.example-shell { display: grid; gap: var(--exampleGap[3]); }
.example-meta { display: grid; gap: var(--exampleGap[1]); }
.example-runtime-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--exampleRadius.pill); border: 1px solid var(--site-border); background: var(--site-surface); width: fit-content; }
.example-stage { var(--exampleCard); min-height: 420px; }
.example-stage .example-runtime-root { min-height: 360px; }
.example-actions { display: flex; gap: 12px; flex-wrap: wrap; }

@for(bp, var(--exampleBreakpoints)) {
  @media (max-width: ${bp.max}) {
    .example-grid { grid-template-columns: repeat(${bp.columns}, minmax(0, 1fr)); }
  }
}