/* The Exchange as a bulletin board of business cards.
 *
 * The brief for this board was a community bulletin board of business cards.
 * The tokens, radii and the warm amber board ground are lifted
 * from home.css, shipped the same morning with the new front page, so a
 * reader arriving from the Exchange teaser lands on the same design language.
 *
 * Loaded in page_styles, i.e. after desk-theme.css, which is why these rules
 * use their own class names rather than restyling .place-card: the desk theme
 * keeps every other board on the site exactly as it is.
 *
 * Nothing here invents content. An empty section renders exchange-empty, and
 * the roster block is only emitted when a roster exists. */

:root{
  --board-ground:#f3ead8;
  --board-edge:#e0cfa8;
  --board-card:#fffdf6;
  --board-note:#7b6c4c;
  /* Darker than the brand amber so 12px text on it clears WCAG AA, the same
     adjustment home.css had to make for --door-amber. */
  --board-mark:#855a05;
}

/* 1. The board itself: cards pinned to a warm ground, not rows in a table. */
.board-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;
  padding:22px;margin:4px 0 10px;background:var(--board-ground);border:1px solid var(--board-edge);
  border-top:5px solid var(--amber);border-radius:14px}
.board-card{display:flex;flex-direction:column;min-width:0;gap:2px;padding:18px 20px 16px;
  background:var(--board-card);border:1px solid var(--board-edge);border-radius:12px;
  box-shadow:0 2px 6px #8c7a4e18;transition:transform .12s,border-color .12s}
.board-card:hover{transform:translateY(-2px);border-color:var(--navy)}
.board-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  min-height:22px;margin-bottom:6px}
.board-card-top>.eyebrow{font-size:10px;letter-spacing:.09em;color:var(--board-note)}
.board-card h2{font:700 25px/1.08 var(--display);margin:0 0 4px;overflow-wrap:anywhere}
.board-price{display:block;font:700 19px/1.2 var(--display);color:#2f4f3e;margin:2px 0 8px}
.board-card>p{font-size:14px;line-height:1.5;margin:4px 0 14px;color:var(--ink2);overflow-wrap:anywhere}
.board-card .button{align-self:flex-start;min-height:44px;font-size:14px;margin-top:auto}
.board-meta{font:11px var(--mono);letter-spacing:.04em;color:var(--board-note);margin:12px 0 0}

/* The farm cards keep their own green heading and availability line -- they
   only borrow the board's rounded edge so one board does not hold two shapes. */
.board-grid .farm-card{border-radius:12px;overflow:hidden;box-shadow:0 2px 6px #8c7a4e18}

/* 2. The approved-producer mark. It reports one thing -- that the editor has
      met this producer -- and it never implies the listing skipped review, so
      the copy beside it on the detail page says review still applied. */
.producer-mark{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font:600 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  padding:4px 10px;border-radius:999px;background:#f1e3c4;color:var(--board-mark);
  border:1px solid #dcc693}
.producer-mark::before{content:'✓';font-size:11px;line-height:1}
.farm-card .producer-mark{margin:0 0 7px}
.producer-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0}
.producer-line>span:last-child{font-size:14px;line-height:1.5;color:var(--ink2)}

/* 3. The roster: the vetted growers, as their own cards above the board. */
.producer-roster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:28px;
  align-items:start;padding:24px 26px;margin:10px 0 20px;background:#eef1e7;
  border:1px solid #cdd7c2;border-top:5px solid #4d6c45;border-radius:14px}
.roster-intro h2{font-size:34px;margin:10px 0 0;line-height:1.05}
.roster-intro p{font-size:14px;line-height:1.5;margin:10px 0 0}
.roster-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.roster-card{display:flex;flex-direction:column;gap:3px;padding:14px 16px;background:var(--board-card);
  border:1px solid #cdd7c2;border-radius:11px;min-width:0}
.roster-card h3{font:600 20px/1.15 var(--display);margin:7px 0 0;overflow-wrap:anywhere}
.roster-card h3 a:hover{color:var(--red);text-decoration:underline}
.roster-locality{font:10px var(--mono);letter-spacing:.07em;text-transform:uppercase;
  color:var(--board-note);margin:5px 0 0}
.roster-produces{font-size:14px;line-height:1.45;margin:7px 0 0;overflow-wrap:anywhere}
.roster-contact{font-size:13px;line-height:1.45;margin:7px 0 0;color:var(--ink2);overflow-wrap:anywhere}

@media(max-width:1050px){
.board-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px;gap:14px}
.producer-roster{grid-template-columns:1fr;gap:18px;padding:20px}
}
@media(max-width:700px){
.board-grid{grid-template-columns:1fr;padding:14px;border-radius:12px}
.board-card h2{font-size:23px}
.roster-cards{grid-template-columns:1fr}
.producer-line{gap:8px}
}
@media print{
.board-grid{background:none;border:0;padding:0;display:block}
.board-card{box-shadow:none;break-inside:avoid;margin-bottom:12px}
.producer-roster{background:none;break-inside:avoid}
}