/* =========================================================
   Ascent Software Training Institute — Data Science with Agentic AI & Gen AI
   Extends course-page components (as-, aw- namespaces).
   ========================================================= */

/* ---------- Hero: layer stack ---------- */
.ds-hero::after { content: ""; position: absolute; right: -120px; top: -60px; width: 540px; height: 540px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(26,35,128,.09), transparent 65%); }
.ds-hero h1 { font-size: clamp(34px, 4.6vw, 58px); }
.ds-hero .as-dahero__lead strong { color: var(--as-ink); font-weight: 650; }
.ds-stack { position: relative; margin: 0; background: #fff; border: 1px solid var(--as-line); border-radius: var(--as-r-lg); box-shadow: var(--as-shadow-lg); overflow: hidden; }
.ds-stack__list { padding: 16px; display: grid; gap: 10px; }
.ds-layer { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--as-line); background: #fff; }
.ds-layer:not(:last-child)::after { content: ""; position: absolute; left: 35px; bottom: -11px; width: 2px; height: 10px; background: var(--as-line-strong); }
.ds-layer__n { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font: 700 12px var(--as-font-mono); background: var(--as-navy-050); color: var(--as-navy); }
.ds-layer b { display: block; font-family: var(--as-font-display); color: var(--as-ink); font-size: 16px; }
.ds-layer small { display: block; font-size: 13px; color: var(--as-muted); margin-top: 2px; }
.ds-layer--2 { margin-left: 12px; }
.ds-layer--3 { margin-left: 24px; }
.ds-layer--4 { margin-left: 36px; background: var(--as-ink); border-color: var(--as-ink); }
.ds-layer--4 b { color: #fff; }
.ds-layer--4 .ds-layer__n { background: var(--as-amber); color: var(--as-ink); }
.ds-layer--3 .ds-layer__n { background: var(--as-ink); color: #fff; }
.ds-flow { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ds-flow i { font: 600 10.5px var(--as-font-mono); font-style: normal; padding: 3px 7px; border-radius: 6px; background: var(--as-surface); color: var(--as-navy); border: 1px solid var(--as-line); }
.ds-flow i:not(:last-child)::after { content: " →"; color: var(--as-muted); }
.ds-flow--agent i { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #E3E6F7; }
.ds-flow--agent i:not(:last-child)::after { color: #8C93BD; }

/* ---------- Difference ladder ---------- */
.ds-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 4px; counter-reset: ld; }
.ds-ladder li { position: relative; border: 1px solid var(--as-line); background: #fff; border-radius: var(--as-r); padding: 20px; }
.ds-ladder li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translate(50%, -50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--as-amber-050); color: var(--as-amber-ink); font: 700 14px var(--as-font-display); z-index: 1; }
.ds-ladder li.is-hl { background: var(--as-ink); border-color: var(--as-ink); color: #C9CDE8; }
.ds-ladder li.is-hl h3 { color: #fff; }
.ds-ladder__k { font: 600 10.5px var(--as-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--as-amber-ink); }
.ds-ladder li.is-hl .ds-ladder__k { color: var(--as-amber); }
.ds-ladder h3 { font-size: 20px; margin-top: 8px; }
.ds-ladder__eq { font: 600 12px var(--as-font-mono); color: var(--as-navy); background: var(--as-navy-050); border-radius: 8px; padding: 6px 9px; margin-top: 10px; }
.ds-ladder li.is-hl .ds-ladder__eq { background: rgba(255,255,255,.08); color: #E3E6F7; }
.ds-ladder p:last-child { font-size: 14.5px; margin-top: 10px; color: var(--as-muted); }
.ds-ladder li.is-hl p:last-child { color: #C9CDE8; }
.ds-difftable { min-width: 640px; }

/* ---------- What is Data Science ---------- */
.ds-blocks { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.ds-blocks div { border: 1px solid var(--as-line); border-radius: var(--as-r); padding: 16px 14px; background: #fff; }
.ds-blocks span { font: 600 11px var(--as-font-mono); color: var(--as-amber-ink); }
.ds-blocks h3 { font-size: 16px; margin-top: 6px; }
.ds-blocks p { font-size: 13.5px; color: var(--as-muted); margin-top: 6px; line-height: 1.45; }

/* ---------- What is Gen AI ---------- */
.ds-qa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ds-qa article { border: 1px solid var(--as-line); background: #fff; border-radius: var(--as-r); padding: 20px 22px; }
.ds-qa h3 { font-size: 17px; }
.ds-qa p { font-size: 15px; color: var(--as-text); margin-top: 8px; }
.ds-why { margin-top: 16px; border-radius: var(--as-r-lg); padding: 20px 24px; background: var(--as-navy-050); border: 1px solid #D5DAF3; }
.ds-why h3 { font-size: 18px; }

/* ---------- Agentic AI ---------- */
.ds-agent { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; position: relative; }
.ds-agent li { position: relative; border: 1px solid var(--as-line); border-radius: var(--as-r); padding: 16px 14px; background: #fff; }
.ds-agent li:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 34px; width: 12px; height: 2px; background: var(--as-amber); }
.ds-agent__ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--as-ink); color: var(--as-amber); }
.ds-agent b { display: block; font-family: var(--as-font-display); color: var(--as-ink); font-size: 16px; margin-top: 10px; }
.ds-agent p { font-size: 13.5px; color: var(--as-muted); margin-top: 4px; line-height: 1.45; }
.ds-agent__loop { margin-top: 10px; font-weight: 600; color: var(--as-navy); }
.ds-agtable { min-width: 680px; }
.ds-agtable tbody th { width: 190px; }
.ds-limits { margin-top: 24px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px; align-items: start; border-radius: var(--as-r-lg); padding: 24px 26px; background: #FFF8EF; border: 1px solid #F6D9B0; }
.ds-limits h3 { font-size: 19px; }
.ds-limits p { font-size: 14.5px; color: var(--as-text); margin-top: 8px; }
.ds-limits ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ds-limits li { background: #fff; border: 1px solid #F1E1C8; border-radius: 10px; padding: 10px 12px; }
.ds-limits li b { display: block; color: var(--as-ink); font-size: 14.5px; }
.ds-limits li span { display: block; font-size: 13.5px; color: var(--as-muted); margin-top: 2px; }

/* ---------- Learning map (dark section) ---------- */
.ds-map { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ds-map > li { position: relative; border-radius: var(--as-r); padding: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
.ds-map > li:not(:last-child)::after { content: "→"; position: absolute; right: -12px; top: 22px; transform: translateX(50%); color: var(--as-amber); font: 700 16px var(--as-font-display); z-index: 1; }
.ds-map > li.is-tbc { border-style: dashed; border-color: rgba(240,138,12,.55); }
.ds-map > li.is-end { background: var(--as-amber); border-color: var(--as-amber); }
.ds-map__k { font: 600 10.5px var(--as-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--as-amber); }
.ds-map > li.is-end .ds-map__k { color: var(--as-ink); }
.ds-map h3 { color: #fff; font-size: 17px; margin-top: 6px; }
.ds-map > li.is-end h3 { color: var(--as-ink); }
.ds-map h3 .as-verify { display: flex; width: fit-content; margin-top: 6px; }
.ds-map ul { display: grid; gap: 6px; margin-top: 12px; }
.ds-map ul li { font-size: 14px; color: #DCE0F5; padding-left: 14px; position: relative; }
.ds-map ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 2px; background: var(--as-amber); }
.ds-map > li.is-end ul li { color: var(--as-ink); }
.ds-map > li.is-end ul li::before { background: var(--as-ink); }

/* ---------- Who / prerequisites ---------- */
.ds-who { grid-template-columns: repeat(4, 1fr) !important; }
.ds-prereq__p { font-size: 15px; color: var(--as-text); margin-top: 12px; }

/* ---------- Curriculum parts ---------- */
.ds-part { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 18px; margin: 4px 0 2px; }
.ds-part span { font: 600 10.5px var(--as-font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--as-ink); color: #fff; }
.ds-part--ai { margin-top: 18px; }
.ds-part--ai span { background: var(--as-amber); color: var(--as-ink); }
.ds-genai { border: 1.5px dashed var(--as-amber); border-radius: var(--as-r-lg); padding: 18px; background: #FFFBF5; }
.ds-genai__note { display: flex; gap: 10px; font-size: 14.5px; color: var(--as-text); }
.ds-genai__note .as-icon { color: var(--as-amber-ink); flex: none; margin-top: 2px; }
.ds-genai__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.ds-gmod { background: #fff; border: 1px solid #F1E1C8; border-radius: 12px; padding: 14px; }
.ds-gmod__n { font: 700 11px var(--as-font-mono); color: var(--as-amber-ink); }
.ds-gmod h4 { font-family: var(--as-font-display); color: var(--as-ink); font-size: 15px; margin-top: 4px; }
.ds-gmod ul { margin-top: 8px; display: grid; gap: 4px; }
.ds-gmod li { font-size: 13px; color: var(--as-muted); padding-left: 12px; position: relative; }
.ds-gmod li::before { content: "·"; position: absolute; left: 2px; color: var(--as-amber-ink); font-weight: 700; }

/* ---------- Tools ---------- */
.ds-toolcat--tbc { border-style: dashed; border-color: var(--as-amber); background: #FFFBF5; }
.ds-toolcat--tbc h3 .as-verify { display: flex; width: fit-content; margin-top: 4px; }

/* ---------- Practical ---------- */
.as-path2--5 { grid-template-columns: repeat(5, 1fr); }

/* ---------- Projects ---------- */
.ds-projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ds-proj { border: 1px solid var(--as-line); border-radius: var(--as-r-lg); background: #fff; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.ds-proj__head { display: flex; gap: 14px; align-items: center; }
.ds-proj h3 { font-size: 19px; margin-top: 4px; }
.ds-proj > p { font-size: 15px; color: var(--as-text); }
.ds-proj__steps { display: grid; gap: 6px; }
.ds-proj__steps li { font-size: 14px; color: var(--as-muted); padding-left: 18px; position: relative; }
.ds-proj__steps li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--as-amber); }
.as-ph--src { color: #1C7A4A !important; background: #E8F6EE !important; border: 1px solid #BFE5CF !important; }
.ds-genproj { margin-top: 18px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; align-items: center; border: 1.5px dashed var(--as-amber); border-radius: var(--as-r-lg); padding: 22px 24px; background: #FFFBF5; }
.ds-genproj h3 { margin-top: 10px; font-size: 16px; }
.ds-genproj p { font-size: 14.5px; color: var(--as-text); margin-top: 8px; }
.ds-frame { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ds-frame li { position: relative; background: #fff; border: 1px solid #F1E1C8; border-radius: 10px; padding: 10px; }
.ds-frame b { display: block; font: 700 11px var(--as-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--as-ink); }
.ds-frame span { display: block; font-size: 12.5px; color: var(--as-muted); margin-top: 4px; line-height: 1.35; }

/* ---------- What can you build ---------- */
.ds-build { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ds-build__col { border: 1px solid var(--as-line); background: #fff; border-radius: var(--as-r-lg); padding: 20px; }
.ds-build__col--hl { background: var(--as-ink); border-color: var(--as-ink); }
.ds-build__k { font: 600 11px var(--as-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--as-amber-ink); }
.ds-build__col--hl .ds-build__k { color: var(--as-amber); }
.ds-build ul { display: grid; gap: 10px; margin-top: 14px; }
.ds-build li { font-size: 14px; color: var(--as-muted); padding: 10px 12px; border-radius: 10px; background: var(--as-surface); }
.ds-build li b { display: block; color: var(--as-ink); font-size: 15px; }
.ds-build__col--hl li { background: rgba(255,255,255,.06); color: #C9CDE8; }
.ds-build__col--hl li b { color: #fff; }

/* ---------- Roles / journey ---------- */
.ds-roletable { min-width: 760px; }
.ds-roletable tbody th { width: 200px; font-family: var(--as-font-display); text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--as-ink); }
.ds-journey h3 { font-size: 14px; }

/* ---------- Trainer placeholder / reviewer ---------- */
.ds-ph { gap: 12px; }
.ds-reviewer { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; font-size: 14px; background: #fff; border-radius: 10px; padding: 12px 14px; border: 1px solid #F1E1C8; }
.ds-reviewer dt { font: 600 10.5px var(--as-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--as-muted); padding-top: 3px; }
.ds-reviewer dd { margin: 0; color: var(--as-ink); font-weight: 600; }

/* ---------- FAQ groups ---------- */
.ds-faqgroup { font: 600 12px var(--as-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--as-amber-ink); margin: 18px 0 4px; scroll-margin-top: 170px; }
.ds-faqgroup:first-child { margin-top: 0; }
.ds-faqnav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.ds-faqnav a { font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--as-line-strong); color: var(--as-ink); background: #fff; }
.ds-faqnav a:hover { border-color: var(--as-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .ds-blocks { grid-template-columns: repeat(4, 1fr); }
  .ds-agent { grid-template-columns: repeat(3, 1fr); }
  .ds-agent li:not(:last-child)::after { display: none; }
  .ds-map { grid-template-columns: repeat(3, 1fr); }
  .ds-map > li:not(:last-child)::after { display: none; }
  .ds-frame { grid-template-columns: repeat(3, 1fr); }
  .ds-who { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 960px) {
  .ds-ladder { grid-template-columns: 1fr 1fr; }
  .ds-ladder li:not(:last-child)::after { display: none; }
  .ds-qa, .ds-projects, .ds-build, .ds-limits, .ds-genproj { grid-template-columns: 1fr; }
  .ds-genai__grid { grid-template-columns: 1fr 1fr; }
  .as-path2--5 { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .as-path2--5::before { display: none; }
  .ds-who { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 680px) {
  .ds-layer--2, .ds-layer--3, .ds-layer--4 { margin-left: 0; }
  .ds-layer:not(:last-child)::after { left: 35px; }
  .ds-ladder, .ds-genai__grid, .ds-map, .ds-who { grid-template-columns: 1fr !important; }
  .ds-blocks { grid-template-columns: 1fr 1fr; }
  .ds-agent { grid-template-columns: 1fr 1fr; }
  .ds-limits ul { grid-template-columns: 1fr; }
  .ds-frame { grid-template-columns: 1fr 1fr; }
  .as-path2--5 { grid-template-columns: 1fr 1fr; }
  .ds-reviewer { grid-template-columns: 1fr; }
  .ds-reviewer dd { margin-bottom: 6px; }
  .ds-proj__head { align-items: flex-start; }
}
@media (max-width: 380px) {
  .ds-blocks, .ds-agent { grid-template-columns: 1fr; }
}
.ds-projects > *, .ds-build > *, .ds-qa > * { min-width: 0; }
.ds-proj .as-ph { white-space: normal; display: inline-block; line-height: 1.35; }
.as-h3 + .as-cmap { margin-top: 20px; }