/*
 * Available Homes section layout.
 *
 * Layout only. The controls themselves come styled: facet-select.css is
 * unscoped and complete, so a facet instance placed here renders with the same
 * baseline look it has on the two archives. Only the enhanced archive styling is
 * scoped to those pages, and none of it is wanted here.
 *
 * Plain CSS, no @apply - block stylesheets are enqueued as-is and never go
 * through the Tailwind build.
 */

.plan-available-homes {
  padding-bottom: 4rem;
}

/* The filter row is a stack on small screens and columns above it. The cells
   size themselves; the container only has to stop the last row's dropdown
   panel being clipped by the section below. */
.plan-available-homes .plan-available-homes-facets {
  position: relative;
  z-index: 40;
}

.plan-available-homes .facet-select-container {
  width: 100%;
  margin-bottom: 0;
}

/* The section wrapper the primitive counts and toggles. It carries no layout of
   its own - the grid inside it is the flex container - but it does own the
   space between the count heading and the cards. */
.plan-available-homes .plan-homes-group {
  position: relative;
  z-index: 0;
}

.plan-available-homes .plan-homes-group.section-hidden {
  display: none;
}

/* The See More button wrapper sits immediately after the grid. */
.plan-available-homes .product-grid-see-more {
  cursor: pointer;
}