/* Home page opening: finished prints first (#109 feedback), then the create tool. */
.home-samples { max-width: var(--container); margin: 0 auto; padding: 2rem var(--gutter) 1.5rem; }
.home-samples-head { max-width: 40rem; }
.home-samples-head h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: var(--leading-tight); margin: 0 0 0.5rem; }
.home-samples-head p { color: var(--muted); margin: 0 0 1.25rem; }
.home-samples-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.home-samples-more { color: var(--ink); font-size: var(--text-sm); text-underline-offset: 3px; }
.home-samples-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.home-sample { display: block; color: var(--ink); text-decoration: none; }
.home-sample img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; background: var(--wall); }
.home-sample-name { display: block; font-size: var(--text-sm); margin-top: 0.4rem; }
.home-sample:hover .home-sample-name { text-decoration: underline; text-underline-offset: 3px; }
#create { scroll-margin-top: 1rem; }

/* Phone and small tablet: one swipeable row. */
@media (max-width: 767px) {
  .home-samples { padding-top: 1.25rem; padding-bottom: 1rem; }
  .home-samples-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.75rem;
    margin: 1.25rem calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 0.25rem; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .home-samples-row::-webkit-scrollbar { display: none; }
  .home-sample { flex: 0 0 42%; scroll-snap-align: start; }
}

/* Once someone is designing, the tool has the page to itself. */
body:has(.hero-progressive.customizing) .home-samples { display: none; }
#create + #flow-stepper { width: fit-content; }