/* Tananyagkészítés (course-creation.php) — a readiness-map.css rmp-* vázára épül, ez csak a saját rész:
   bemenet → kimenet, lépéssor + képernyőkép, nagyítás, funkció-chipek. 2026-10-14 */

/* bemenet → kimenet */
.ccp-io { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-lg); align-items: center; max-width: 980px; margin: 0 auto; }
.ccp-io-col { background: var(--bg-primary, #fff); border: 1px solid var(--border-light); border-radius: 16px; padding: var(--space-lg) var(--space-xl); height: 100%; box-sizing: border-box; }
.ccp-io-col--out { border-top: 3px solid var(--accent-current); }
.ccp-io-col h3 { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-current); margin: 0 0 12px; }
.ccp-io-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ccp-io-col li { position: relative; padding-left: 22px; color: var(--text-primary); line-height: 1.5; }
.ccp-io-col li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--border-light); }
.ccp-io-col--out li::before { background: var(--accent-current); }
.ccp-io-arrow { color: var(--accent-current); }

/* lépéssor */
.ccp-box { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); gap: clamp(20px, 3.4vw, 48px); align-items: center; max-width: 1200px; margin: 0 auto; }
.ccp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: ccp; }
.ccp-steps li { scroll-margin-top: 120px; }
.ccp-step { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 12px 14px 12px 48px; border-radius: 12px; position: relative; counter-increment: ccp; transition: background .2s; }
.ccp-step::before { content: counter(ccp); position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-tint-current); color: var(--accent-current); font-weight: 700; font-size: .8rem; }
.ccp-step:hover { background: var(--bg-primary, #fff); }
.ccp-step:focus-visible { outline: 2px solid var(--accent-current); outline-offset: 2px; }
.ccp-step.is-on { background: var(--bg-primary, #fff); box-shadow: inset 3px 0 0 var(--accent-current), 0 1px 2px rgba(20, 24, 60, .05); }
.ccp-step.is-on::before { background: var(--accent-current); color: #fff; }
.ccp-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-current); margin-bottom: 3px; }
.ccp-title { display: block; font-weight: 700; color: var(--text-primary); font-size: .98rem; line-height: 1.35; }
.ccp-text { display: none; color: var(--text-secondary); font-size: .92rem; line-height: 1.55; margin-top: 6px; }
.ccp-step.is-on .ccp-text { display: block; }
.ccp-stage { position: relative; aspect-ratio: 1904 / 1293; } /* a képek az app-ablakra vágva (tools/crop-app-shots.js) */
.ccp-shot { all: unset; position: absolute; inset: 0; cursor: zoom-in; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.ccp-shot.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.ccp-shot img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 12px; border: 1px solid var(--border-light); box-shadow: 0 24px 50px -28px rgba(20, 24, 60, .45); background: #fff; }
.ccp-shot:focus-visible { outline: 2px solid var(--accent-current); outline-offset: 4px; border-radius: 14px; }

/* nagyítás */
.ccp-dlg { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1600px); max-height: 94vh; overflow: visible; }
.ccp-dlg::backdrop { background: rgba(10, 16, 28, .82); }
.ccp-dlg img { display: block; max-width: 100%; max-height: 90vh; width: auto; height: auto; border-radius: 12px; }
.ccp-dlg button { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 1.3rem; cursor: pointer; }

/* „Minden funkciót használ” kirakó: pages/partials/course-puzzle.php (a stílusa is ott él — három helyen használjuk) */

@media (max-width: 860px) {
  .ccp-io { grid-template-columns: 1fr; }
  .ccp-io-arrow { justify-self: center; transform: rotate(90deg); }
  .ccp-box { grid-template-columns: 1fr; }
  .ccp-stage { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .ccp-shot, .ccp-shot.is-on { transition: none; } }