/* ============================================================
   Homepage (Z-03)  -  page-specific layout only.
   Component styling lives in zinnober.css; this file positions
   those components for the homepage sections.
   ============================================================ */

/* Break the hero out of <main class="zn-container"> so it runs
   full-bleed, same trick as .sg-bleed in the styleguide. */
.home-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.home-hero-search {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 26rem;
}

.home-hero-search .zn-field {
  margin-bottom: 0;
}

.home-hero-field-plz {
  flex: 1;
}

.home-section {
  margin: 2.75rem 0;
}

.home-section-head {
  margin-bottom: 1rem;
}

.home-empty {
  color: var(--zn-muted);
}

/* zn-grid-products' auto-fill minmax(170px) only fits one column below
   ~360px of content width; force two on phones as the mockup requires. */
@media (max-width: 639px) {
  .home-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Werkstatt-Spotlight: a single wide card, stacked on phones,
   side-by-side from tablet up. */


@media (min-width: 640px) {
  .home-hero-search {
    flex-direction: row;
    align-items: flex-end;
    max-width: none;
  }

  .home-hero-field-country {
    flex: 0 0 9rem;
  }

  .home-hero-field-distance {
    flex: 0 0 9rem;
  }


}