/*
  Shared styles for the project pages under /projects/ and the How I Work page.
  Uses the tokens defined in custom-styles.css.
*/

/* Key facts under the introduction, as badges */
.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.project-meta li {
  padding: .3rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--mist);
  font-family: var(--font-ui);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

/* Sections of a walkthrough: a small label naming the step, then its heading */
.project-step { margin: 3.25rem 0; }
.project-step .step-label {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 600;
  color: var(--forest);
}
.project-step h2 { margin-top: 0; }

/* Screenshots and videos */
.project-shot { margin: 1.5rem 0 0; }
.project-shot a { display: block; }
.project-shot img,
.project-shot video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.project-shot video { background: var(--mist); }
.project-narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.project-shot figcaption {
  margin-top: .5rem;
  font-family: var(--font-ui);
  font-size: .85rem;
  color: var(--slate);
}
.project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.project-gallery .project-shot { margin: 0; }
@media (max-width: 575px) {
  .project-gallery { grid-template-columns: 1fr; }
}

/* Numbered workflow: the steps really are a sequence, so they keep their numbers */
.project-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}
.project-flow li {
  padding-top: .6rem;
  border-top: 2px solid var(--forest);
  font-size: .95rem;
  line-height: 1.5;
  counter-increment: flow;
}
.project-flow li::before {
  content: counter(flow);
  display: block;
  margin-bottom: .15rem;
  font-family: var(--font-ui);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--forest);
}
.project-flow li strong { display: block; margin-bottom: .2rem; font-family: var(--font-ui); }
.project-flow-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) {
  .project-flow, .project-flow-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Small hierarchy or lifecycle diagrams drawn with text */
.project-tree {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 1.5rem 0;
  font-family: var(--font-ui);
  font-size: .92rem;
}
.project-tree span { padding: .3rem .8rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
.project-tree .arrow { padding: 0; border: 0; color: var(--forest); font-weight: 700; }