/* Learning hub and resource pages: /belajar, /prompt/*, /workflow/*, /panduan/*.
   These pages are generated (scripts/build-content.mjs). They reuse the site's own parts from main.css
   (.hero, .eyebrow, .btn, .bar, .foot, the tokens in :root). Use var(--token) for every colour: no hex colours here.
   Styles stay scoped to the generated learning pages. */

/* ---------- hero band (same teal band as the sales pages) ---------- */

.learnhero__in {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  padding-block: clamp(36px, 5vw, 72px);
}
.learnhero--hub .learnhero__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; }
.learnhero__copy { min-width: 0; }
.learnhero .hero__title { max-width: 24ch; margin-bottom: 20px; }
.learnhero .hero__lead { margin-bottom: 0; }
.learnhero__stage {
  display: grid; place-items: end center;
  min-height: 260px; padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px) 0;
  background: var(--lime); border-radius: 6px; overflow: hidden;
}
.learnhero__stage img { display: block; width: min(100%, 240px); height: auto; }

.learn__crumb {
  display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 24px;
  color: rgba(251, 249, 237, 0.7); font: 500 15px/1.4 var(--sans);
}
.learn__crumb a { color: var(--paper); }
.learn__crumb a:hover { color: var(--lime); }
.learn__date { margin: 18px 0 0; color: rgba(251, 249, 237, 0.7); font: 500 15px var(--sans); }

.learn__topics { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.learn__topics a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 2px solid var(--lime); border-radius: 4px;
  color: var(--paper); font: 700 15px var(--sans); text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.learn__topics a:hover { background: var(--lime); color: var(--ink); }

/* ---------- hub: groups of cards ---------- */

.learn__group .h2 { max-width: none; margin-bottom: clamp(24px, 3.4vw, 36px); }
.learn__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 40px); }
.learn__card {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(22px, 3vw, 30px);
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 8px; box-shadow: 6px 7px 0 var(--teal);
}
.learn__card .eyebrow { margin: 0; }
.learn__card h3 { margin: 0; font: 800 clamp(20px, 2vw, 23px)/1.25 var(--sans); letter-spacing: -0.015em; }
.learn__card h3 a { color: var(--ink); text-decoration: none; }
.learn__card h3 a:hover { color: var(--teal); text-decoration: underline; }
.learn__card p { margin: 0; font-size: 17px; line-height: 1.6; }
.learn__card .learn__read { margin-top: auto; padding-top: 12px; color: var(--ink); font: 700 16px var(--sans); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .learn__card { transition: transform 0.15s, box-shadow 0.15s; }
  .learn__card:hover { transform: translate(-2px, -2px); box-shadow: 8px 9px 0 var(--teal); }
}

/* ---------- article ---------- */

.learn__body { padding-block: clamp(40px, 6vw, 72px); }
.learn .wrap.learn__wrap { width: min(100% - 2 * var(--gutter), 800px); }
.learn__body section { margin-top: clamp(36px, 5vw, 52px); }
.learn__body section:first-child { margin-top: 0; }
.learn__body h2, .learn__related h2 { margin: 0 0 14px; font: 800 clamp(24px, 2.8vw, 30px)/1.18 var(--sans); letter-spacing: -0.02em; }
.learn__body ol, .learn__body ul { margin: 0; padding-left: 1.3em; }
.learn__body li { margin: 0 0 14px; }
.learn__body li::marker { color: var(--teal); font: 700 1em var(--sans); }
.learn__body p { margin: 0; }
.learn__body .learn__note { margin-bottom: 14px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.learn__body pre {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 16px/1.7 ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.learn__prompt {
  --focus: var(--lime);
  padding: clamp(22px, 3vw, 30px);
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); border-radius: 8px; box-shadow: 6px 7px 0 var(--teal);
}
.learn__body .learn__prompt h2 { margin: 0; color: var(--paper); }
.learn__prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.learn__copy {
  flex: none; min-height: 44px; padding: 0 18px;
  background: var(--lime); color: var(--ink); border: 2px solid var(--lime); border-radius: 4px;
  font: 700 15px/1.2 var(--sans); cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.learn__copy:hover { background: var(--paper); border-color: var(--paper); }
.learn__prompt .learn__copy-status { margin: 12px 0 0; min-height: 1.5em; color: var(--lime); font: 600 15px/1.5 var(--sans); }

.learn__output {
  padding: clamp(18px, 2.6vw, 24px);
  background: var(--cream); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 8px;
}

.learn__next {
  margin-top: clamp(40px, 5vw, 56px); padding: clamp(22px, 3vw, 30px);
  background: var(--lime); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 8px; box-shadow: 6px 7px 0 var(--ink);
}
.learn__body .learn__next h2 { margin: 0 0 10px; }
.learn__next p { margin: 0 0 20px; }
.learn__next .btn { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.learn__next .btn:hover { background: var(--teal); border-color: var(--teal); color: var(--lime); }

.learn__related { padding-block: clamp(40px, 6vw, 72px); }
.learn__related ul { margin: 0 0 22px; padding: 0; list-style: none; }
.learn__related li { padding: 14px 0; border-top: 1px solid var(--rule); font: 600 18px/1.4 var(--sans); }
.learn__related li:last-child { border-bottom: 1px solid var(--rule); }
.learn__related li a { color: var(--ink); }
.learn__related li a:hover { color: var(--teal); }
.learn__related .learn__all { font: 700 16px var(--sans); }

/* ---------- smaller screens ---------- */

@media (max-width: 900px) {
  .learnhero--hub .learnhero__in { grid-template-columns: minmax(0, 1fr); }
  .learnhero__stage { display: none; }
}
@media (max-width: 720px) {
  .learn__grid { grid-template-columns: minmax(0, 1fr); }
  .learn__prompt-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .learn__topics a { flex: 1 1 auto; justify-content: center; }
}

/* Ebook reading path and practice method. */
.learn__nav { display: flex; gap: 24px; }
.learn__nav a[aria-current] { color: var(--lime); font-weight: 700; }
.learnhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 28px; }
.learnhero__path { color: var(--paper); font: 600 16px var(--sans); }
.learnhero__path:hover { color: var(--lime); }
.learnhero__note { color: var(--paper); font: 500 14px/1.5 var(--sans); margin: 22px 0 0; }
.learnhero__hello { margin: 0 0 18px; color: var(--ink); font: 800 22px/1.2 var(--sans); }
.learn__method-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: step; }
.learn__method-grid li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: 18px; }
.learn__method-grid li::before { content: "0" counter(step); display: block; margin-bottom: 14px; color: var(--teal); font: 800 20px var(--sans); }
.learn__method-grid strong { display: block; font: 700 18px/1.3 var(--sans); margin-bottom: 10px; }
.learn__method-grid span { font-size: 17px; }
.learn__book-intro { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 48px; align-items: center; margin-bottom: 36px; }
.learn__book-intro .h2 { max-width: 23ch; margin-bottom: 18px; }
.learn__book-intro p { max-width: 44em; }
.learn__book-intro img { display: block; max-height: 215px; width: 150px; height: auto; aspect-ratio: 240 / 339; justify-self: center; border: 2px solid var(--ink); border-radius: 4px; }
.learn__result { font-size: 17px; }
.learn__book-link { font: 700 16px var(--sans); }
.learn__source { border-left: 4px solid var(--teal); padding: 0 0 0 20px; margin-bottom: 40px; }
.learn__source .eyebrow { margin: 0 0 10px; }
.learn__source p { margin: 0 0 10px; }
.learn__source .learn__note { margin-bottom: 0; }
.learn__figure { margin: 0 0 40px; }
.learn__figure img { display: block; width: 100%; height: auto; border: 1px solid var(--teal); border-radius: 8px; }
.learn__figure figcaption { margin-top: 12px; font: 400 16px/1.55 var(--sans); color: var(--ink); }
.learn + .foot .foot__links, .learn + .foot .foot__fine { flex-basis: 100%; }
.learn__anchor { display: block; }
@media (max-width: 960px) { .learn__method-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 720px) {
  .bar .learn__nav { display: flex; gap: 16px; }
  .bar .learn__nav a { font-size: 14px; }
  .learn__book-intro { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .learn__book-intro img { display: none; }
  .learn__method-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
}

.learn__method .learn__topics a { color: var(--ink); border-color: var(--teal); }
.learn__method .learn__topics a:hover { background: var(--teal); color: var(--paper); }