/* =============================================================================
   Location: /public/assets/demos.css
   Function: „Matematyka w ruchu” – interactive demonstrations (JSXGraph boards,
             sliders, readout) and the demo pages: "guess first" box, steps,
             typical mistake, research cards. Shared by the home page and the
             pages built on Bootstrap; colours are explicit (no theme variables).
   Version:  1.0.0 · Build 2026.11.02.0500
   1.0.0 moved from landing.css 1.4.0 and extended for the demo pages
   ============================================================================= */

.demo-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.demo { background: #fff; border: 1px solid #DADFE8; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.demo-tag { font-family: 'Lato', system-ui, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .05em; color: #2346D8; text-transform: uppercase; margin: 0; }
.demo h2, .demo h3 { font-family: 'Lato', system-ui, sans-serif; font-weight: 700; font-size: 22px; color: #11141A; margin: 0; }
.demo h2 a, .demo h3 a { color: inherit; text-decoration: none; }
.demo h2 a:hover, .demo h3 a:hover { color: #2346D8; text-decoration: underline; }
.demo-board { width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; background: #F7F9FD; border: 1px solid #E3E7EF; overflow: hidden; position: relative; touch-action: pan-y; }
.demo-board--short { aspect-ratio: 2 / 1; }
.demo-board .JXGtext { font-family: 'Lato', system-ui, sans-serif; color: #11141A; }
.demo-fallback { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-family: 'STIX Two Text', 'Times New Roman', serif; font-size: 28px; color: #8A93A6; }
.demo-controls { display: grid; gap: 8px; }
.demo-controls label { display: grid; grid-template-columns: 6.5rem 1fr 3.4rem; align-items: center; gap: 10px; font-size: 15px; color: #3A4150; margin: 0; }
.demo-controls label span { font-family: 'STIX Two Text', 'Times New Roman', serif; font-style: italic; font-size: 17px; }
.demo-controls output { font-variant-numeric: tabular-nums; font-size: 15px; text-align: right; color: #11141A; }
.demo-controls input[type=range] { width: 100%; accent-color: #2346D8; height: 32px; }
.demo-button { justify-self: start; min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1px solid #022E5F; background: #fff; color: #022E5F; font-weight: 700; cursor: pointer; }
.demo-button:hover, .demo-button:focus-visible { background: #022E5F; color: #fff; }
.demo-readout { font-family: 'STIX Two Text', 'Times New Roman', serif; font-size: 17px; color: #11141A; background: #FFF8D6; border-radius: 10px; padding: 10px 12px; min-height: 3.2em; margin: 0; }
.demo-more { font-weight: 700; color: #2346D8; text-decoration: none; }
.demo-more:hover { text-decoration: underline; }
.demo-note { margin-top: 16px; color: #5B6170; }
.demos-all { margin-top: 22px; }
.demos-all a { font-weight: 700; color: #2346D8; }

/* demo page */
.demo-page { max-width: 820px; }
.demo-page .demo { margin: 1.25rem 0; }
.predict { border-left: 4px solid #FFD84D; background: #FFFBEA; border-radius: 12px; padding: 14px 16px; margin: 1rem 0; }
.predict strong { display: block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #8A6A00; margin-bottom: 4px; }
.predict p { margin: 0; font-size: 1.1rem; }
.demo-steps { padding-left: 1.3rem; }
.demo-steps li { margin: .35rem 0; }
.mistake-box { border: 1px solid #F3C9B8; background: #FCEFE9; border-radius: 12px; padding: 14px 16px; margin: 1rem 0; }
.mistake-box strong { color: #8A3A0B; }
.research-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.research-card { border: 1px solid #DADFE8; border-radius: 14px; padding: 14px 16px; background: #fff; }
.research-card p { margin: 0 0 .5rem; }
.research-card cite { display: block; font-style: normal; font-size: .9rem; color: #4A505C; }
.research-card cite a { color: #2346D8; }
.demo-links { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); padding: 0; list-style: none; }
.demo-link { display: block; height: 100%; border: 1px solid #DADFE8; border-radius: 14px; padding: 14px 16px; background: #fff; color: #11141A; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.demo-link:hover, .demo-link:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2,46,95,.10); color: #11141A; }
.demo-link .demo-tag { display: block; margin-bottom: 4px; }
.demo-link strong { display: block; font-size: 1.05rem; }
.demo-link span.lead-small { display: block; color: #4A505C; font-size: .92rem; margin-top: 4px; }

@media (max-width: 480px) {
  .demo-grid { grid-template-columns: 1fr; }
  .demo-controls label { grid-template-columns: 6.6rem 1fr 2.8rem; gap: 8px; font-size: 14px; }
  .demo-controls label span { font-size: 15px; }
}