/* Showcase page. The three workflow cards stay samples inside a wider list of builds.
   To add a build, copy an <article class="showcase-card"> in examples.html. */

.showcase-page .page-hero {
  position: relative;
  text-align: left;
  background-color: #f4f7fb;
  background-image:
    url("assets/hero/network.svg"),
    linear-gradient(180deg, #f4f7fb 0%, var(--paper) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right var(--gutter) center, center;
  background-size: min(520px, 46vw) auto, auto;
}
.showcase-page .page-hero h1 {
  max-width: 16em;
  font-size: clamp(2.45rem, 1.35rem + 2.5vw, 4.1rem);
  line-height: 1.04;
}
.showcase-page .page-hero .lede { max-width: 44rem; }
.showcase-page .page-hero-centered h1,
.showcase-page .page-hero-centered .lede { margin-inline: 0; }

.sample-label { margin-bottom: 0; }
.showcase-page .demo-grid { margin-top: 1.75rem; }

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}
.showcase-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.35rem 1.3rem 1.2rem;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--teal);
  border-radius: 18px;
  background: var(--card);
}
.showcase-card:nth-child(3n + 2) { border-top-color: var(--coral); }
.showcase-card:nth-child(3n) { border-top-color: #e2b143; }
.showcase-card:nth-child(7) { border-top-color: #c43d8a; }
.showcase-kind {
  margin: 0;
  color: var(--teal);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.showcase-card h3 { margin-top: .75rem; }
.showcase-summary { margin-top: .7rem; color: var(--ink-soft); }
.showcase-link { margin-top: auto; padding-top: 1.05rem; }

@media (max-width: 960px) {
  .showcase-grid { grid-template-columns: 1fr 1fr; }
  .showcase-page .page-hero { background-size: 280px auto, auto; background-position: right -30px top 1rem, center; }
}
@media (max-width: 720px) {
  .showcase-grid { grid-template-columns: 1fr; }
}