/* ========================================================================================
 * system-diagram.css - .system-diagram, "The Olmos System": three short blurbs right-
 * aligned on the left, the system diagram image in the middle, three blurbs on the
 * right (live course pages, "A Better Way"). Rendered from template-parts/course/
 * olmos-system.php via [tmj_part name="course/olmos-system"]. Below 900px it stacks:
 * diagram first, then the six blurbs in one column.
 * ======================================================================================== */

.system-diagram{display:grid;gap:var(--cd-6);align-items:center;grid-template-columns:minmax(0,1fr)}
.system-diagram__col{display:flex;flex-direction:column;gap:var(--cd-7);margin:0;padding:0;list-style:none}
.system-diagram__item{position:relative;display:flex;flex-direction:column;gap:var(--cd-2)}
.system-diagram__item h3{font-size:var(--cd-h4);color:var(--cd-ink-strong)}
.system-diagram__item p{font-size:var(--cd-small);line-height:1.6;color:var(--cd-ink-muted)}
.system-diagram__item::before{
	content:"";position:absolute;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--cd-teal-500);
}
.system-diagram__figure{margin:0;order:-1}
.system-diagram__figure img{width:100%;max-width:560px;height:auto;margin-inline:auto}
.system-diagram__item{padding-left:var(--cd-6)}
.system-diagram__item::before{left:0}
@media (min-width:900px){
	.system-diagram{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:var(--cd-5)}
	.system-diagram__figure{order:0}
	.system-diagram__col--start .system-diagram__item{padding:0 var(--cd-6) 0 0;text-align:right;align-items:flex-end}
	.system-diagram__col--start .system-diagram__item::before{left:auto;right:0}
}