/* ==========================================================================
   /alpaca-farm/states/ — page styles
   --------------------------------------------------------------------------
   This page IS the picker, so it gets the full grid, not the compact
   component. The grid is grouped by Census region — people planning a
   farm visit think in driving distance, not the alphabet.

   The .filter / .state-grid / .no-results rules moved here from home.css
   (the homepage now uses the state-picker component instead). Once this
   ships, those rules can be deleted from home.css.
   ========================================================================== */

/* --- Filter --- */
.filter{ margin-bottom:2.5rem; max-width:26rem; }

.filter-input{
  width:100%;
  padding:.75rem 1rem;
  background:var(--fleece-card);
  border:1px solid var(--fleece-beige);
  border-radius:var(--radius);
  font:inherit;
  font-size:1rem;
  color:var(--fleece-bay);
  transition:border-color .2s var(--ease);
}
.filter-input::placeholder{ color:var(--fleece-silver); }
.filter-input:focus{
  outline:none;
  border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(31,92,107,.12);
}

.filter-count{
  min-height:1.25rem;
  margin:.5rem 0 0;
  font-size:.8125rem;
  color:var(--fleece-silver);
}

/* --- Regions --- */
.region + .region{ margin-top:2.75rem; }

/* Label row: region name left, farm total right, hairline underneath.
   The rule is structure, not decoration — it closes each group the way
   the section-rule closes each page section. */
.region-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin:0 0 1rem;
  padding-bottom:.625rem;
  border-bottom:1px solid var(--fleece-beige);
}
.region-title{
  margin:0;
  font-family:var(--font-body);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fleece-brown);
}
.region-count{
  font-size:.8125rem;
  font-variant-numeric:tabular-nums;
  color:var(--fleece-silver);
}

/* --- State grid (unchanged from the old homepage rules) --- */
.state-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  gap:.5rem;
  margin:0;
  padding:0;
  list-style:none;
}
.state-grid a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 1rem;
  background:var(--fleece-card);
  border:1px solid var(--fleece-beige);
  border-left:3px solid var(--fleece-beige);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--fleece-bay);
  font-size:.9375rem;
  font-weight:500;
  text-decoration:none;
  transition:border-left-color .2s var(--ease),
             transform .2s var(--ease),
             box-shadow .2s var(--ease);
}
.state-grid a:hover{
  border-left-color:var(--indigo);
  transform:translateX(2px);
  box-shadow:var(--shadow-sm);
  color:var(--fleece-bay);
}
.state-grid em{
  font-style:normal;
  font-size:.8125rem;
  font-variant-numeric:tabular-nums;
  color:var(--fleece-silver);
}

.no-results{
  padding:2rem 0;
  color:var(--fleece-brown);
}