/* Academiq v4 - inner pages (shared). Tokens/base come from tokens.css + base.css.
   Link order: tokens -> base -> bombe -> instruments -> pages.

   CLASS INDEX
   Shell / head
     .page-shell            <main>: vertical rhythm for every inner page
     .page-nav              wrapper <div> holding .back-link + .home-link (flex row of 44px ghost chips)
     .back-link, .home-link ghost chips (44px). .back-link > span:first-child is the arrow
     .crumb                 mono breadcrumb; .sep = "/", [aria-current] = current page
     .page-strip            full-bleed 48px band for <div data-instrument="rule110" data-seed=".." data-rows="12" aria-hidden="true">
     .course-accent         same band, one per course page; tint with data-color="c1".."c6" (instrument option)
     .listing-hero          title block of an index page (.sec-title + .sec-sub inside)
     .detail-eyebrow        mono mint eyebrow;  .detail-title H1 (page scale);  .detail-tagline lead paragraph, 62ch
     .detail-meta-row       row of mono chips (spans)
   Layout helpers
     .detail-grid           12-col grid: .detail-block (cols 1-7) + .detail-side (cols 8-12, sticky)
     .detail-block h4       section label;  .detail-modules  ruled numbered rows (counter) on a plate
     .detail-side           stack of plates (.course-about, .lesson-specs, .detail-audience)
   Plates inside pages
     .course-about, .lesson-specs, .detail-audience   padded .plate-look blocks (no markup change needed)
     .lesson-specs li       icon | label | value rows, hairline separated
     .course-hero           course hero: .course-hero-text (cols 1-7) + .course-hero-visual (cols 8-12 plate frame)
                            --stop is set by .course--scratch/fullstack/data-science/ai/robotics/cyber (base.css)
   Course lists
     .other-courses (+ .other-courses-title) and .courses/.course cards come from base.css;
     .course--plain = card without icon (meta chip row);  .other-course = card without icon, no meta
   Reading
     .article-cover (+ --photo)  16:9 plate frame;  .article-body  ONE light reading plate, max 68ch
   Reusable
     .pg-plate              any block that should look like a light plate (padding 24px, seat, crosshairs)
     .pg-cta                CTA band: flex row, text left, .btn right, hairline top/bottom on the surface
     .pg-section            vertical rhythm block (margin-top section-y/2)
   Language blocks (.only-az/en/ru) live in base.css. */

/* ---------- shell ---------- */
.page-shell{padding:clamp(24px,4vw,48px) 0 clamp(64px,8vw,112px);min-width:0}
.page-shell .wrap{min-width:0}
.page-shell>.wrap>div:not([class]):first-child,.page-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp3)}

.back-link,.home-link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:1px solid var(--rule);border-radius:var(--r2);background:var(--s1);
  font:500 .875rem/1 var(--f-body);color:var(--ink-2);
  transition:border-color var(--t1),color var(--t1);
}
.back-link span:first-child{font-family:var(--f-data);color:var(--mint)}
.back-link:hover,.home-link:hover{border-color:var(--mint);color:var(--ink)}
.home-link{background:transparent}

.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:var(--sp5) 0 var(--sp6);
  font:400 .75rem/1.4 var(--f-data);font-stretch:87.5%;letter-spacing:.06em;color:var(--ink-3);
}
.crumb a{display:inline-flex;align-items:center;min-height:28px;color:var(--ink-2);transition:color var(--t1)}
.crumb a:hover{color:var(--mint)}
.crumb .sep{color:var(--rule)}
.crumb [aria-current="page"]{color:var(--ink)}

/* instrument bands */
.page-strip,.course-accent{position:relative;display:block;width:100%;height:48px;min-height:48px;background:var(--s1);border-bottom:1px solid var(--rule);overflow:hidden}
.course-accent--scratch{--stop:var(--c1)}.course-accent--fullstack{--stop:var(--c2)}.course-accent--data-science{--stop:var(--c3)}
.course-accent--ai{--stop:var(--c4)}.course-accent--robotics{--stop:var(--c5)}.course-accent--cyber{--stop:var(--c6)}
.course-accent{border-bottom:3px solid var(--stop,var(--c1))}

/* ---------- head typography ---------- */
.detail-eyebrow{display:block;margin-bottom:var(--sp4);font:400 .75rem/1.4 var(--f-data);font-stretch:87.5%;letter-spacing:.06em;color:var(--mint)}
.detail-title{
  font-size:clamp(1.75rem,1.1rem + 3.2vw,3.5rem);line-height:1.05;margin-bottom:var(--sp4);
  overflow-wrap:anywhere;text-wrap:balance;
}
.detail-tagline{max-width:62ch;margin-bottom:var(--sp5);font-size:1.1875rem;line-height:1.55;color:var(--ink-2)}
.detail-meta-row{display:flex;flex-wrap:wrap;gap:var(--sp2);margin-bottom:var(--sp6)}
.detail-meta-row>span{
  display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--rule);background:var(--s1);
  font:400 .75rem/1.2 var(--f-data);font-stretch:87.5%;letter-spacing:.06em;color:var(--ink);
}

.listing-hero{padding:0 0 var(--sp5)}
.listing-hero .sec-title{max-width:22ch;font-size:clamp(2rem,1.2rem + 3.4vw,3.75rem)}
.listing-hero .sec-sub{max-width:62ch;margin-bottom:var(--sp7)}
@media (max-width:900px){.listing-hero .sec-title{max-width:100%}}

/* ---------- plates (class-only; no markup change needed) ---------- */
.pg-plate,.course-about,.lesson-specs,.detail-audience,.article-body{
  position:relative;background:var(--p0);color:var(--p-ink);border-radius:var(--r1);box-shadow:var(--seat);
}
.pg-plate::before,.course-about::before,.lesson-specs::before,.detail-audience::before,.article-body::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:var(--xh-plate) left 6px top 6px no-repeat,var(--xh-plate) right 6px bottom 6px no-repeat;
}
.pg-plate :focus-visible,.course-about :focus-visible,.lesson-specs :focus-visible,.article-body :focus-visible{outline-color:var(--blue-ink)}

/* ---------- course hero ---------- */
.course-hero{
  --stop:var(--c1);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--sp6);align-items:center;
  margin-bottom:var(--sp9);
}
.course-hero-text{grid-column:1/8;min-width:0}
.course-hero-text .btn{margin-top:var(--sp1)}
.course-hero-visual{
  grid-column:8/-1;position:relative;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,2.5vw,32px);background:var(--p0);border-radius:var(--r1);box-shadow:var(--seat);
  border-top:4px solid var(--stop);
}
.course-hero-visual::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--xh-plate) left 6px top 6px no-repeat,var(--xh-plate) right 6px bottom 6px no-repeat;
}
.course-hero-visual img{width:100%;height:auto;max-height:380px;object-fit:contain}
.course-hero-visual.is-photo img{aspect-ratio:4/3;object-fit:cover}
@media (max-width:1023px){
  .course-hero{margin-bottom:var(--sp8)}
  .course-hero-text,.course-hero-visual{grid-column:1/-1}
  .course-hero-visual{order:-1;max-width:420px;justify-self:start}
}

/* ---------- detail grid ---------- */
.detail-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--sp7);align-items:start;
}
.detail-block{grid-column:1/8;min-width:0}
.detail-side{grid-column:8/-1;display:grid;gap:var(--sp5);min-width:0;position:sticky;top:calc(var(--header-h) + 32px)}
.detail-block h4{
  margin-bottom:var(--sp5);font:600 clamp(1.375rem,1.1rem + .9vw,1.75rem)/1.15 var(--f-display);letter-spacing:-.01em;color:var(--ink);
}
@media (max-width:1023px){
  .detail-block,.detail-side{grid-column:1/-1}
  .detail-side{position:static}
}

/* modules: tape-cell rows with zero-padded index */
.detail-modules{counter-reset:mod;position:relative;background:var(--p0);color:var(--p-ink);border-radius:var(--r1);box-shadow:var(--seat)}
.detail-modules li{
  counter-increment:mod;position:relative;display:flex;align-items:center;gap:var(--sp4);min-height:56px;padding:10px 20px 10px 0;
  border-bottom:1px solid var(--p-rule);transition:background-color var(--t2);
}
.detail-modules li:last-child{border-bottom:0}
.detail-modules li::before{
  content:counter(mod,decimal-leading-zero);flex:none;display:flex;align-items:center;justify-content:center;align-self:stretch;width:56px;
  margin:-10px 0;border-right:1px solid var(--p-rule);background:var(--p1);
  font:400 .75rem/1 var(--f-data);letter-spacing:.06em;color:var(--blue-ink);
}
.detail-modules li:first-child::before{border-top-left-radius:var(--r1)}
.detail-modules li:last-child::before{border-bottom-left-radius:var(--r1)}
.detail-modules li:hover{background:var(--p1)}
.detail-modules li:hover::before{background:var(--p0)}
.detail-modules li div{min-width:0}
.detail-modules li b{display:block;font:600 1rem/1.35 var(--f-body);color:var(--p-ink);overflow-wrap:anywhere}
.detail-modules li div span{display:block;margin-top:2px;font:400 .875rem/1.5 var(--f-body);color:var(--p-ink-2)}

/* side plates */
.course-about,.lesson-specs{padding:24px}
.detail-audience{padding:16px 20px;font:500 .9375rem/1.5 var(--f-body)}
.course-about h4,.lesson-specs h4{margin-bottom:var(--sp3);font:400 .75rem/1.4 var(--f-data);font-stretch:87.5%;letter-spacing:.06em;color:var(--p-ink-2)}
.course-about p{margin-bottom:var(--sp3);font:400 1rem/1.65 var(--f-body);color:var(--p-ink)}
.course-about p:last-child{margin-bottom:0}
.lesson-specs li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:var(--sp3);min-height:48px;border-bottom:1px solid var(--p-rule);font:500 .9375rem/1.3 var(--f-body)}
.lesson-specs li:last-child{border-bottom:0}
.lesson-specs-ic{width:20px;height:20px;color:var(--blue-ink)}
.lesson-specs-label{color:var(--p-ink-2)}
.lesson-specs-val{font-weight:600;color:var(--p-ink);text-align:right;overflow-wrap:anywhere}

/* syllabus toggle (kept for pages that still use it) */
.syllabus-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;background:transparent;border:1px solid var(--ink-2);border-radius:var(--r2);color:var(--ink);font:600 .9375rem/1 var(--f-body)}
.syllabus-toggle:hover{border-color:var(--mint)}
.syllabus-panel{display:none}
.syllabus-panel.open{display:block;margin-top:var(--sp4)}

/* ---------- other courses / course listing cards ---------- */
.other-courses{margin-top:var(--sp9);padding-top:var(--sp7);border-top:1px solid var(--rule)}
.other-courses-title{margin-bottom:var(--sp5);font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);color:var(--ink)}
.courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
@media (max-width:1023px){.courses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.courses{grid-template-columns:1fr}}

.course--plain,.other-course{min-height:240px;align-content:stretch}
.course--plain::after,.other-course::after{margin-bottom:var(--sp4)}
.course--plain .meta{
  grid-column:1/-1;grid-row:2;justify-self:start;margin-bottom:var(--sp3);padding:4px 8px;border:1px solid var(--p-rule);
  font:400 .6875rem/1.3 var(--f-data);font-stretch:87.5%;letter-spacing:.06em;color:var(--p-ink-2);
}
.course--plain .course-icon{grid-row:1/2}
.course--plain h3,.other-course h3{margin-top:0}
.other-course{min-height:200px}
.other-course .go{align-self:end}

/* ---------- reading plate ---------- */
.article-cover{position:relative;margin:0 0 var(--sp7);aspect-ratio:16/9;overflow:hidden;background:var(--p0);border-radius:var(--r1);box-shadow:var(--seat);padding:6px}
.article-cover img{width:100%;height:100%;object-fit:cover;outline:1px solid var(--p-rule);outline-offset:-1px}
.article-body{max-width:68ch;padding:48px;font:400 1.125rem/1.7 var(--f-body)}
.article-body h2,.article-body h3{margin:var(--sp7) 0 var(--sp3);color:var(--p-ink)}
.article-body h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.article-body h2:first-child,.article-body h3:first-child{margin-top:0}
.article-body p{margin-bottom:var(--sp4)}
.article-body ul{margin:0 0 var(--sp4) var(--sp5);list-style:square}
.article-body a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:639px){.article-body{padding:28px 20px;font-size:1.0625rem}}

/* ---------- misc reusable ---------- */
.pg-plate{padding:24px}
.pg-section{margin-top:calc(var(--section-y)/2)}
.pg-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp5);padding:var(--sp6) 0;border-block:1px solid var(--rule)}

@media (prefers-reduced-motion:reduce){
  .detail-modules li,.back-link,.home-link,.crumb a{transition:none}
}