/* ==========================================================================
   /alpaca-farm/ — page styles
   --------------------------------------------------------------------------
   One idea on this page: the taxonomy of farm types, each carrying the
   site's fiber rule in its OWN fleece tone. The thread motif from the
   accordion and the state grid, but color-coded — fiber farms are fawn,
   stud farms are brown, and so on. Set per-card via --type on the <article>.
   ========================================================================== */

/* --- Type cards --- */
.farm-types{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr));
  gap:1rem;
  margin:0;
  padding:0;
  list-style:none;
}

.type-card{
  --type:var(--fleece-silver);
  position:relative;
  padding:1.375rem 1.5rem 1.5rem;
  background:var(--fleece-card);
  border:1px solid var(--fleece-beige);
  border-left:none;
  border-radius:0 var(--radius) var(--radius) 0;
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.type-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--type);
}
.type-card:hover{
  box-shadow:var(--shadow-sm);
  transform:translateX(2px);
}

/* Heading with its fleece swatch — same 1:1 chip as the homepage card. */
.type-card h3{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 .625rem;
  font-size:1.0625rem;
}
.type-chip{
  flex:none;
  width:.875rem;
  height:.875rem;
  background:var(--type);
  border:1px solid rgba(46,40,35,.12);
  border-radius:2px;
}

.type-card p{
  margin:0 0 1rem;
  font-size:.9375rem;
  color:var(--fleece-brown);
}

/* "Visiting" line — dt/dd in miniature, matching .farm-meta's voice. */
.type-visit{ margin:0; }
.type-visit dt{
  margin-bottom:.2rem;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--fleece-silver);
}
.type-visit dd{
  margin:0;
  font-size:.9375rem;
  color:var(--fleece-bay);
}

/* --- Find-one-near-you band --- */
.finder-band{
  max-width:34rem;
}
.finder-band .lede{
  margin-bottom:1.5rem;
  font-size:1rem;
}