/* Aperintelligence AI Academy, /discipline only: the page header with the
   sphere of project pictures (project-sphere.css) and the six practices on
   their background photograph. Loaded after site.css, whose tokens it uses. */

/* ---------- header: the headline beside the sphere, at its full size ---------- */
.discipline-head .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px, 5vw, 80px);align-items:center;}

/* ---------- the discipline: a photograph beside a numbered list, on its own background photograph ---------- */
/* A .photo-section (site.css). Its wash is a little heavier in the middle than the default, because this section is mostly small text and the photograph has white paper there. */
.discipline-section .photo-section-bg::after{background:linear-gradient(90deg, rgba(16,13,11,.9) 0%, rgba(16,13,11,.82) 50%, rgba(16,13,11,.88) 100%);}
.discipline{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px, 6vw, 96px);align-items:start;}
/* Sticky on wide screens, so the photograph stays in view beside the list as it scrolls. */
.discipline-photo{position:sticky;top:calc(var(--nav-h) + 24px);margin:0;}
/* Phones crop the picture to a wide shape; the two faces and the raised hands sit just below the middle. */
.discipline-photo img{width:100%;aspect-ratio:4 / 5;object-fit:cover;object-position:50% 55%;border-radius:var(--r-xl);}
.discipline-photo figcaption{margin-top:12px;font-size:var(--fs-meta);color:var(--text-muted);}
.discipline-lead{max-width:60ch;font-size:clamp(13px, 0.28vw + 10.5px, 14.5px);line-height:1.6;color:var(--text-soft);}
/* Numbered with a CSS counter, so the numerals stay in step if an item is added or removed. */
.numbered{list-style:none;margin:clamp(36px, 4vw, 56px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:40px 44px;counter-reset:discipline;}
.numbered li{counter-increment:discipline;padding-top:18px;border-top:1px solid var(--line-strong);}
.numbered li::before{content:counter(discipline, decimal-leading-zero);display:block;font-family:var(--sans);font-weight:200;font-size:35px;line-height:1;color:var(--highlight);}
.numbered h3{margin-top:14px;font-size:var(--fs-h3);}
.numbered p{margin-top:8px;color:var(--text-muted);}

@media (max-width:900px){
  .discipline-head .wrap{grid-template-columns:1fr;}
  .discipline{grid-template-columns:1fr;}
  .discipline-photo{position:static;}
  .discipline-photo img{aspect-ratio:16 / 10;}
}
@media (max-width:640px){
  .numbered{grid-template-columns:1fr;gap:32px;}
}