/* ==========================================================================
   Prasat Digital Learn — styles on top of style.css (copied from the main website, prasat-it).
   Keep style.css in sync with the main site when its brand styles change; put learn-only styles here.
   ========================================================================== */

/* Khmer is the default language here, so give Khmer headings a little more line height */
body.lang-km h1, body.lang-km h2 { line-height: 1.35; }

/* ---------- Hero ---------- */
.learn-hero { min-height: auto; padding: 140px 0 80px; }
.how-panel { max-width: 460px; justify-self: end; width: 100%; }
.how-steps { list-style: none; margin: 0; padding: 22px; display: grid; gap: 18px; }
.how-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.how-steps b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--accent-rgb), .14); border: 1px solid rgba(var(--accent-rgb), .4); color: var(--accent); font-family: var(--font-display); }
.how-steps strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.how-steps div > span { color: var(--muted); font-size: .92rem; }
@media (max-width: 960px) { .how-panel { justify-self: stretch; max-width: none; } }

/* ---------- Topic grid (home): one icon tile per topic ---------- */
.topic-group + .topic-group { margin-top: 40px; }
.topic-group h3 { font-size: 1.1rem; color: var(--muted); margin-bottom: 14px; }
.topic-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tp-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; overflow: hidden;
  padding: 0 18px 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
/* Card photo (CI style: dark navy, cinematic, no text) or a CI placeholder with the topic icon */
.tp-media { position: relative; display: block; width: calc(100% + 36px); margin: 0 -18px; aspect-ratio: 16 / 10; overflow: hidden; background: #0a1834; }
.tp-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.tp-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,24,52,.55)); }
a.tp-tile:hover .tp-media img { transform: scale(1.04); }
.tp-ph { display: grid; place-items: center; color: rgba(83,166,212,.55);
  background: radial-gradient(circle at 70% 20%, rgba(26,137,197,.35), transparent 55%), radial-gradient(rgba(148,163,184,.14) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(160deg, #133565, #0a1834); }
.tp-ph svg { width: 34%; height: 34%; stroke-width: 1.2; }
.soon .tp-media img { filter: saturate(.55) brightness(.8); }
.tp-media + .tp-icon { margin-top: -26px; position: relative; z-index: 1; background: var(--surface); box-shadow: 0 0 0 4px var(--surface); }
a.tp-tile { border-color: rgba(var(--accent-rgb), .45); }
a.tp-tile:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 20px 44px -24px rgba(var(--accent-rgb), .55); }
.tp-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .35); color: var(--accent); }
.tp-icon svg { width: 26px; height: 26px; }
.soon .tp-icon { background: rgba(var(--tint-rgb), .04); border-color: var(--border-strong); color: var(--dim); }
.tp-tile strong { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.3; color: var(--text); }
.tp-desc { color: var(--muted); font-size: .86rem; }
.tp-state { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid var(--border-strong); color: var(--dim); }
.tp-state svg { width: 13px; height: 13px; }
.tp-state.go { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.tp-state.done { color: var(--ok); border-color: rgba(52,211,153,.5); }
@media (max-width: 1000px) { .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tp-tile { padding: 0 14px 14px; } .tp-media { width: calc(100% + 28px); margin: 0 -14px; } .tp-desc { display: none; } .tp-icon { width: 42px; height: 42px; } .tp-media + .tp-icon { margin-top: -22px; } }

/* ---------- Lesson hero + video ---------- */
.lesson-hero .hero-grid { grid-template-columns: 1.25fr .75fr; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.lesson-meta li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: .85rem; color: var(--muted); }
.video-frame {
  position: relative; width: 100%; max-width: 330px; aspect-ratio: 9 / 16; justify-self: center; overflow: hidden;
  border-radius: 26px; border: 1px solid var(--border-strong); background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), .25), transparent 60%), #0a1834;
  box-shadow: var(--shadow);
}
.video-frame video, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-soon { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; color: #c9d6e6; }
.video-soon .play { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(83,166,212,.18); border: 1px solid rgba(83,166,212,.55); color: #9fc4de; }
.video-soon .play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-soon strong { font-family: var(--font-display); font-size: 1.1rem; color: #f6f9fc; }
.video-soon small { font-size: .85rem; }
@media (max-width: 960px) { .lesson-hero .hero-grid { grid-template-columns: 1fr; } .video-frame { max-width: 300px; } }

/* ---------- Simulation (console pattern from the main site's network lab, .nl classes in style.css) ---------- */
.ln .nl-grid { grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr); }
.ln .nl-stage { display: flex; align-items: center; }
.ln .nl-stage svg { min-width: 0; }
.ln .nl-node .t { font-size: 16px; }
.ln .nl-node .s { font: 500 12px var(--font-mono); }
.ln-zone rect { fill: rgba(var(--z), .05); stroke: rgba(var(--z), .45); stroke-dasharray: 5 5; }
.ln-zone text { fill: rgb(var(--z)); font: 700 13px var(--font); letter-spacing: .08em; }
.ln-zone.lan { --z: 96, 165, 250; }
.ln-zone.wan { --z: 245, 158, 11; }
.ln .nl-node rect { transition: stroke .25s, fill .25s, filter .25s; }
.ln .nl-node.focus rect { stroke: var(--accent); stroke-width: 2; fill: #16407a; filter: drop-shadow(0 0 10px rgba(83,166,212,.55)); }
.ln .nl-node.ok rect { stroke: var(--ok); stroke-width: 2; fill: rgba(52,211,153,.14); }
.ln .nl-node.fail rect { stroke: var(--bad); stroke-width: 2; fill: rgba(244,63,94,.14); }
.ln .nl-cloud.focus path { stroke: var(--accent); stroke-width: 2.2; fill: rgba(83,166,212,.16); }
.ln .nl-cloud text { font-size: 10.5px; }
.ln-pk rect { fill: #22d3ee; filter: drop-shadow(0 0 6px rgba(34,211,238,.8)); }
.ln-pk text { fill: #052033; font: 700 10.5px var(--font-mono); text-anchor: middle; dominant-baseline: central; }
.ln-pk.reply rect { fill: #34d399; filter: drop-shadow(0 0 6px rgba(52,211,153,.8)); }
.ln-pk.print rect { fill: #a78bfa; filter: drop-shadow(0 0 6px rgba(167,139,250,.8)); }

.ln-say {
  margin: 0; padding: 14px 16px; border-radius: 14px; min-height: 96px;
  background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .3);
  font-size: 1rem; line-height: 1.6; color: var(--text);
}
.ln-say b { color: var(--accent); }
.ln-say.ok { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.45); }
.ln-say.bad { background: rgba(244,63,94,.1); border-color: rgba(244,63,94,.45); }
.ln-opts { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: .88rem; color: var(--muted); }
.ln-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.ln-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.ln-next[hidden] { display: none; }
.nl-actions .btn svg { width: 18px; height: 18px; }
.btn-warn { border-color: rgba(244,63,94,.5); color: #fda4af; background: rgba(244,63,94,.08); }
.btn-warn:hover { border-color: var(--bad); background: rgba(244,63,94,.14); }
.btn-warn[aria-pressed="true"] { border-color: rgba(52,211,153,.5); color: #6ee7b7; background: rgba(52,211,153,.08); }
.ln-honest { margin: 12px 0 0; font-size: .82rem; color: var(--dim); text-align: center; }
.ln .nl-log { min-height: 120px; }
.ln .nl-log li { grid-template-columns: 1fr; }
@media (max-width: 900px) { .ln .nl-grid { grid-template-columns: 1fr; } .ln .nl-stage { padding: 10px; } }
.ln .nl-grid > .ln-say { margin: 12px 12px 0; min-height: 0; }   /* phones: explanation above the diagram */

/* ---------- Explanation cards ---------- */
.concepts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.concepts .card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.concepts .card p { color: var(--muted); font-size: .95rem; }
.concepts .step { font-family: var(--font-mono); font-size: .78rem; color: var(--accent); margin-bottom: 10px; display: block; }
@media (max-width: 1000px) { .concepts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .concepts { grid-template-columns: 1fr; } }
.glossary { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; padding: 22px; border-radius: var(--radius); border: 1px solid var(--border); background: rgba(var(--tint-rgb), .02); }
.glossary h3 { grid-column: 1 / -1; font-size: 1.05rem; margin: 0 0 4px; }
.glossary dl { margin: 0; }
.glossary dt { font-family: var(--font-mono); font-weight: 600; color: var(--text); font-size: .92rem; }
.glossary dd { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }
@media (max-width: 640px) { .glossary { grid-template-columns: 1fr; } }

/* ---------- Quiz ---------- */
.quiz { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }
.quiz fieldset { margin: 0; padding: 20px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.quiz legend { float: left; width: 100%; padding: 0; margin-bottom: 14px; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--text); }
.quiz legend + * { clear: both; }
.quiz .q-n { color: var(--accent); margin-right: 6px; }
.quiz label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; margin-top: 8px; border-radius: 12px; border: 1px solid var(--border-strong); cursor: pointer; color: var(--muted); transition: border-color .2s, background .2s; }
.quiz label:hover { border-color: var(--accent); color: var(--text); }
.quiz input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.quiz label.right { border-color: var(--ok); background: rgba(52,211,153,.1); color: var(--text); }
.quiz label.wrong { border-color: var(--bad); background: rgba(244,63,94,.08); color: var(--text); }
.quiz .why { display: none; margin: 12px 0 0; font-size: .92rem; color: var(--muted); }
.quiz fieldset.answered .why { display: block; }
.quiz fieldset.answered label { cursor: default; }
.quiz-result { text-align: center; padding: 22px; border-radius: var(--radius); border: 1px solid rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .08); }
.quiz-result[hidden] { display: none; }
.quiz-result strong { display: block; font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 6px; }
.quiz-result .btn-row { justify-content: center; margin-top: 14px; }

/* ---------- Next lesson ---------- */
.next-lesson { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-radius: var(--radius); border: 1px dashed var(--border-strong); color: var(--muted); }
.next-lesson strong { color: var(--text); font-family: var(--font-display); }