/* ═══════════════════════════════════════
   AI & LLM Courses — styles.css
   Utility-first + component layer
═══════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #050510; }

:root {
  --indigo: #6366f1; --amber: #f59e0b; --emerald: #10b981;
  --rose: #f43f5e;   --sky: #38bdf8;   --purple: #a855f7;
  --teal: #14b8a6;   --orange: #f97316;
  --card-bg: rgba(255,255,255,0.04);
  --card-border: rgba(255,255,255,0.10);
  --step-w: 1100px;
}

/* ═══ UTILITIES ═══ */

/* Colour */
.c-slate   { color: #94a3b8; }
.c-muted   { color: #64748b; }
.c-light   { color: #e2e8f0; }
.c-dim     { color: #475569; }
.c-indigo  { color: #818cf8; }
.c-emerald { color: #34d399; }
.c-sky     { color: #7dd3fc; }
.c-amber   { color: #fbbf24; }
.c-amber2  { color: #f59e0b; }
.c-rose    { color: #f87171; }
.c-rose2   { color: #fda4af; }
.c-purple  { color: #c084fc; }
.c-green   { color: #6ee7b7; }
.c-teal    { color: #2dd4bf; }
.c-orange  { color: #fb923c; }

/* Font-size */
.fs-xs  { font-size: 0.6em; }
.fs-sm  { font-size: 0.7em; }
.fs-md  { font-size: 0.78em; }
.fs-base{ font-size: 0.88em; }
.fs-lg  { font-size: 1.1em; }
.fs-xl  { font-size: 1.5em; }
.fs-2xl { font-size: 2em; }

/* Spacing */
.mb-0  { margin-bottom: 0; }
.mb-xs { margin-bottom: 0.25em; }
.mb-sm { margin-bottom: 0.35em; }
.mb-md { margin-bottom: 0.5em; }
.mt-xs { margin-top: 0.25em; }
.mt-sm { margin-top: 0.35em; }
.mt-md { margin-top: 0.5em; }
.mt-lg { margin-top: 0.7em; }
.mt-xl { margin-top: 1em; }

/* Flex */
.flex-row    { display: flex; align-items: center; gap: 0.5em; }
.flex-row-lg { display: flex; align-items: center; gap: 0.6em; }
.flex-start  { display: flex; align-items: flex-start; gap: 0.5em; }

/* Font-weight */
.fw-bold { font-weight: 700; }
.fw-800  { font-weight: 800; }

/* Compound */
.section-label { color: #818cf8; font-weight: 700; margin-bottom: 0.25em; }
.section-sub   { font-size: 0.78em; color: #64748b; }
.plain-list    { list-style: none; padding: 0; margin: 0; }
.mono          { font-family: 'JetBrains Mono', monospace; }
.code-block    { background: #0f172a; border-radius: 6px; padding: 0.6em 0.8em; font-family: 'JetBrains Mono', monospace; }
.gradient-text { background: linear-gradient(135deg, #6366f1, #a855f7, #38bdf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.icon-lg  { font-size: 1.5em; flex-shrink: 0; }
.icon-xl  { font-size: 1.8em; }
.icon-2xl { font-size: 2em; margin-bottom: 0.3em; }

/* ═══ IMPRESS.JS ═══ */
#impress { display: none; }
.impress-enabled #impress { display: block; }

.step {
  position: absolute;
  width: var(--step-w);
  padding: 36px 48px;
  overflow: hidden;
  background: #0a0a18;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  color: #e2e8f0;
  line-height: 1.55;
  text-align: left;
  box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
}
.step.bg-dark1  { background: #0a0a18; }
.step.bg-dark2  { background: #0d0d1f; }
.step.bg-dark3  { background: #0a1628; }
.step.bg-grad1  { background: linear-gradient(135deg, #0a0a18 0%, #111827 60%, #0f0c29 100%); }
.step.bg-grad2  { background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); }
.step.bg-grad3  { background: linear-gradient(135deg, #0a1628 0%, #0d2340 50%, #0a1628 100%); }
.step.bg-grad4  { background: linear-gradient(135deg, #0a0a18 0%, #1a1a2e 60%, #0f0c29 100%); }
.step.center-text { text-align: center; }

.impress-enabled .step        { opacity: 0.08; transition: opacity 0.7s ease, box-shadow 0.7s ease; pointer-events: none; }
.impress-enabled .step.active,
.impress-enabled .step.present{
  opacity: 1; pointer-events: auto;
  box-shadow: 0 8px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(99,102,241,0.15), 0 0 80px rgba(99,102,241,0.04);
}

/* ═══ TYPOGRAPHY ═══ */
h1, h2, h3 { font-family: 'Inter', sans-serif; letter-spacing: -0.02em; margin: 0 0 0.25em; }
h1 { font-size: 2.2em; font-weight: 800; }
h2 { font-size: 1.45em; font-weight: 700; }
h3 { font-size: 1em; font-weight: 600; color: #94a3b8; }
p  { line-height: 1.55; margin: 0 0 0.4em; }
code { font-family: 'JetBrains Mono', monospace; font-size: 0.82em; }
ul li { margin-bottom: 0.25em; }
a { color: #7dd3fc; }

/* ═══ SUBSTEPS ═══ */
.substep { opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; }
.substep.substep-visible { opacity: 1; transform: translateY(0); }

/* ═══ COMPONENTS ═══ */

/* Card */
.card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 10px; padding: 0.6em 0.9em;
  font-size: 0.75em; line-height: 1.5; margin: 0.25em 0;
}
.card h4 { margin: 0 0 0.2em; font-size: 1em; font-weight: 700; color: #e2e8f0; }
.card .label { color: #64748b; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.2em; display: block; }
.card .content { color: #cbd5e1; }

/* Badge */
.badge { display: inline-block; padding: 0.15em 0.6em; border-radius: 999px; font-size: 0.65em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-intro    { background: rgba(20,184,166,0.2);  color: #5eead4; border: 1px solid rgba(20,184,166,0.3); }
.badge-advanced { background: rgba(168,85,247,0.2);  color: #d8b4fe; border: 1px solid rgba(168,85,247,0.3); }
.badge-theory   { background: rgba(56,189,248,0.2);  color: #7dd3fc; border: 1px solid rgba(56,189,248,0.3); }
.badge-practical{ background: rgba(16,185,129,0.2);  color: #6ee7b7; border: 1px solid rgba(16,185,129,0.3); }
.badge-warning  { background: rgba(245,158,11,0.2);  color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.badge-claude   { background: rgba(249,115,22,0.2);  color: #fdba74; border: 1px solid rgba(249,115,22,0.3); }

/* Module pill */
.module-pill { display: inline-block; background: var(--indigo); color: white; font-size: 0.45em; font-weight: 700; padding: 0.25em 0.9em; border-radius: 999px; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; margin-right: 0.5em; }
.module-pill.teal   { background: var(--teal); }
.module-pill.purple { background: var(--purple); }
.module-pill.amber  { background: var(--amber); color: #0a0a18; }
.module-pill.rose   { background: var(--rose); }

/* Grid */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5em; }

/* Callout */
.callout { background: rgba(99,102,241,0.12); border-left: 3px solid var(--indigo); border-radius: 0 8px 8px 0; padding: 0.5em 0.8em; margin: 0.35em 0; font-size: 0.78em; line-height: 1.5; }
.callout.amber   { background: rgba(245,158,11,0.12); border-color: var(--amber); }
.callout.emerald { background: rgba(16,185,129,0.12); border-color: var(--emerald); }
.callout.rose    { background: rgba(244,63,94,0.12);  border-color: var(--rose); }
.callout.teal    { background: rgba(20,184,166,0.12); border-color: var(--teal); }
.callout.purple  { background: rgba(168,85,247,0.12); border-color: var(--purple); }

/* Timeline */
.timeline      { display: flex; align-items: center; gap: 0; margin: 0.5em 0; font-size: 0.7em; }
.timeline-step { flex: 1; text-align: center; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px; padding: 0.4em 0.3em; }
.timeline-arrow{ color: #475569; font-size: 1.2em; margin: 0 -4px; z-index: 1; }
.timeline-step.done   { border-color: var(--emerald); color: #6ee7b7; }
.timeline-step.active { border-color: var(--indigo);  color: #a5b4fc; }
.timeline-step.warn   { border-color: var(--rose);    color: #fda4af; }
.timeline-step.teal   { border-color: var(--teal);    color: #5eead4; }

/* Stat */
.stat-big   { font-size: 2.8em; font-weight: 800; line-height: 1; }
.stat-label { font-size: 0.7em; color: #94a3b8; margin-top: 0.1em; }

/* Exercise */
.exercise    { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3); border-radius: 10px; padding: 0.7em 1em; font-size: 0.75em; }
.exercise h4 { color: var(--amber); margin: 0 0 0.3em; font-size: 1.05em; }
.exercise ol, .exercise ul { margin: 0.3em 0 0; padding-left: 1.2em; }
.exercise li { margin-bottom: 0.25em; line-height: 1.5; }

/* Checklist */
.checklist li   { list-style: none; padding-left: 0; }
.checklist li::before   { content: "✓ "; color: var(--emerald); font-weight: 700; }
.checklist-x li::before { content: "✗ "; color: var(--rose);    font-weight: 700; }

/* Number circle */
.num-circle { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--indigo); font-weight: 700; font-size: 0.85em; flex-shrink: 0; margin-right: 0.35em; }

/* ═══ PROGRESS / HINT ═══ */
#progress-bar  { position: fixed; bottom: 0; left: 0; width: 0%; height: 3px; background: var(--indigo); z-index: 9999; transition: width 0.4s ease; }
#slide-counter { position: fixed; bottom: 10px; right: 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #475569; z-index: 9999; }
#hint          { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #374151; z-index: 9999; transition: opacity 0.5s ease; }

/* ═══════════════════════════════════════
   MOBILE FALLBACK  (≤ 900px)
═══════════════════════════════════════ */
@media (max-width: 900px) {
  html, body { overflow: auto !important; height: auto; }

  #impress {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    perspective: none !important;
  }

  .step {
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100vw;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin: 0 auto;
    padding: 28px 20px;
    font-size: 17px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-radius: 0;
    left: auto !important; top: auto !important;
  }

  .substep { opacity: 1 !important; transform: none !important; transition: none !important; }
  #progress-bar, #slide-counter, #hint { display: none !important; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  @media (min-width: 600px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

  h1 { font-size: 1.8em; }
  h2 { font-size: 1.3em; }
  .callout, .card, .exercise { font-size: 0.92em; }
  .timeline { flex-wrap: wrap; gap: 0.4em; }
  .timeline-arrow { display: none; }
  .timeline-step { flex: 1 1 45%; }
  .code-block, pre, code { overflow-x: auto; word-break: break-word; }
}