/* CIHANG portfolio edition: the design process (10/21). Only in leo-portfolio/cihang, added by _tools/cihang_process.py.
   Built on the page's own pieces (section, container, sub-headline, card, figcaption, reveal); class prefix pr-. */
.pr-role { margin-top: 14px; max-width: 62ch; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* three needs: the pictograms from the board, one line each */
.pr-needs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pr-need { display: flex; flex-direction: column; padding: 28px 28px 26px; border-radius: var(--radius); background: var(--bg-alt);
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.section--alt .pr-need { background: var(--bg); }
.pr-need img { display: block; width: auto; height: clamp(108px, 11vw, 150px); margin: 0 0 22px; align-self: flex-start; }
.pr-need h4 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.pr-need p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* structure: the CAD rows sit on their own grey, the caption below */
.pr-cad + .pr-cad { margin-top: 18px; }
.pr-cad img { aspect-ratio: auto; height: auto; object-fit: contain; background: #e8eaed; padding: 1.5% 2%; box-sizing: border-box; }

/* prototype: the two photos share one height (their widths follow their proportions) */
.pr-proto__pics { display: grid; grid-template-columns: 0.8fr 1.3333fr; gap: 2px; background: var(--line); }
.pr-proto__pics img { aspect-ratio: auto; height: 100%; object-fit: cover; }

/* color and finish */
.pr-cmf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pr-cmf__pics { display: grid; grid-template-columns: minmax(0, 1fr) 24%; align-items: center; gap: 2%; padding: 3% 4% 3% 2%; background: #fff; }
.pr-cmf__pics img { aspect-ratio: auto; height: auto; object-fit: contain; }
.pr-cmf figcaption strong, .pr-colors figcaption strong { display: block; }
.pr-colors { margin-top: 18px; }
.pr-colors__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2%; padding: 3% 3% 0; background: #fff; }
.pr-color img { aspect-ratio: 4 / 3; height: auto; object-fit: contain; }
.pr-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 10px 0 0; padding-bottom: 22px; font-size: 12px; line-height: 1.3; color: #6e6e73; }
.pr-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pr-chip i { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--c); }

@media (max-width: 900px) {
  .pr-needs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pr-need { flex-direction: row; align-items: center; gap: 18px; padding: 18px 20px; }
  .pr-need img { height: 84px; margin: 0; }
  .pr-need div { min-width: 0; }
  .pr-cmf { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 640px) {
  .pr-cad img { padding: 2% 1%; }
  .pr-proto__pics { grid-template-columns: minmax(0, 1fr); }
  .pr-proto__pics img { height: auto; }
  .pr-colors__row { padding: 4% 2% 0; }
  .pr-chip { font-size: 0; gap: 0; }           /* phones: the colours only; the codes stay in the tooltip */
  .pr-chip i { width: 12px; height: 12px; }
}
.pr-cad picture { display: block; }