/* Examples page: pipeline stages and dataset cards. */

/* Left-aligned on the same edge as every homepage section, rather than
   centred in the container with dead margins either side. */
.intro { padding: 4.5rem 0 1rem; }
.intro h1, .intro h2 { max-width: 22ch; margin: 0; }
.intro h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); letter-spacing: -.032em; line-height: 1.1; }
.intro p { color: var(--dim); max-width: 62ch; margin: 1rem 0 0; font-size: 1.0625rem; }

.pipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(235px, 100%), 1fr)); gap: 1rem; margin-top: 2.2rem; }
.stage { padding: 1.5rem 1.4rem; }
.stage .n {
  display: inline-block; margin-bottom: .8rem;
  font: 500 .7rem/1 var(--mono); letter-spacing: .16em; color: var(--accent);
}
.stage h3 { margin-bottom: .45rem; }
.stage p { color: var(--muted); font-size: .89rem; }
.stage code {
  background: rgba(94, 106, 210, .13); border: 1px solid rgba(94, 106, 210, .2);
  border-radius: 5px; padding: .05rem .3rem; font: 400 .85em/1 var(--mono); color: var(--accent-hi);
}

.note {
  border-radius: var(--r-lg); padding: 1.2rem 1.4rem; margin-top: 1.6rem;
  background: linear-gradient(180deg, rgba(52, 196, 140, .09), rgba(52, 196, 140, .03));
  border: 1px solid rgba(52, 196, 140, .28);
}
.note h3 { color: var(--accent2); font-size: .95rem; margin-bottom: .35rem; }
.note p { color: var(--muted); font-size: .92rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1.1rem; margin-top: 2.2rem; }
.card { display: flex; flex-direction: column; }
.card .thumb {
  padding: .45rem; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(700px 300px at 30% 15%, rgba(94, 106, 210, .12), transparent 62%),
    var(--surface-1);
}
.card .thumb img { width: 100%; height: auto; display: block; }
.card .body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin-bottom: .35rem; }
.card p { color: var(--muted); font-size: .88rem; }
.card .stats { display: flex; gap: 1.4rem; margin: 1rem 0 .7rem; }
.card .stats b { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; }
.card .stats span { color: var(--dim); font-size: .74rem; }
.topics { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1.2rem; }
.topics i {
  font-style: normal; font-size: .76rem; color: var(--muted);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  border-radius: 99px; padding: .12rem .6rem;
}
.card .btn { margin-top: auto; }

/* Featured examples: the two files that unlock a whole workspace */
.card.wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 420px) 1fr; align-items: stretch; }
.card.wide .thumb { border-right: 1px solid var(--line); border-bottom: 0; }
.card.wide .body { padding: 1.6rem 1.7rem; display: flex; flex-direction: column; }
.card.wide .body .btn { margin-top: auto; align-self: flex-start; }
.card .kind {
  display: inline-block; align-self: flex-start; margin-bottom: .6rem;
  font: 500 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); background: rgba(94, 106, 210,.12);
  border: 1px solid rgba(94, 106, 210,.25); border-radius: 99px; padding: .28rem .6rem;
}
@media (max-width: 800px) {
  .card.wide { grid-template-columns: 1fr; }
  .card.wide .thumb { border-right: 0; border-bottom: 1px solid var(--line); }
}