/* A grower's own page, and the form that submits one.
 *
 * Tokens, radii and the warm card ground come from exchange-board.css, which
 * took them from home.css, so a reader arriving from the farms board does not
 * cross a design boundary on the way to a profile. Nothing here restyles a
 * shared class: the roster card's link, the photo grid and the consent block
 * carry their own names.
 *
 * Loaded in page_styles, after desk-theme.css, like the rest of the Exchange.
 */

:root{
  --grower-green:#4d6c45;
  --grower-ground:#eef1e7;
  --grower-edge:#cdd7c2;
}

/* 1. The heading: the roster mark sits with the name, so the one claim the
      page makes about vetting is the first thing read, next to the sentence
      that says review still applied to everything on it. */
.grower-heading{align-items:flex-start}
.grower-heading h1{overflow-wrap:anywhere}
.grower-vetted{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0}
.grower-vetted>span:last-child{font-size:14px;line-height:1.5;color:var(--ink2)}

.grower-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  align-items:start;gap:24px;margin-bottom:30px}
.grower-main{display:grid;gap:22px;min-width:0}
.grower-story{overflow-wrap:anywhere}
.grower-story div{font-size:16px;line-height:1.6}
.grower-listings h2,.grower-photos h2{font:700 29px/1.1 var(--display);margin:0 0 12px}

/* The board here sits in the narrower of two columns, so the farms board's
   fixed three tracks would squeeze a card to about 200px and push the
   approved-producer mark -- which does not wrap -- out through its own edge.
   Fill by available width instead, and let the mark wrap when a card really
   is narrow: a mark on two lines reads, a mark sliced in half does not. */
.grower-listings .board-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grower-listings .producer-mark{white-space:normal}

/* 2. Photos. Fixed-ratio tiles so a portrait and a landscape photo do not
      make a ragged board, and object-fit:cover rather than a stretch -- a
      distorted photo of someone's produce is a worse answer than a crop. */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;
  padding:16px;background:var(--board-ground,#f3ead8);border:1px solid var(--board-edge,#e0cfa8);
  border-top:5px solid var(--grower-green);border-radius:14px}
.grower-photo{margin:0;background:var(--board-card,#fffdf6);border:1px solid var(--board-edge,#e0cfa8);
  border-radius:11px;overflow:hidden;display:flex;flex-direction:column}
.grower-photo img{display:block;width:100%;height:190px;object-fit:cover;background:#e8e3d6}
.grower-photo figcaption{font-size:13px;line-height:1.4;padding:10px 12px;color:var(--ink2);
  overflow-wrap:anywhere}
.photo-note{margin:10px 0 0}

/* 3. The contact panel. It only ever renders fields the producer ticked, so
      an empty-looking panel is the truthful one. */
.grower-contact h3{font-size:15px;margin:15px 0 0}
.grower-contact p{font-size:15px}
.grower-contact .public-contact{overflow-wrap:anywhere;margin:4px 0 0}

/* 4. The roster card's link through to a profile. Only emitted when a profile
      is published, so this never styles a dead end. */
.roster-profile-link{display:inline-block;font:600 12px var(--mono);letter-spacing:.04em;
  color:var(--grower-green);margin:9px 0 0}
.roster-profile-link:hover{color:var(--red);text-decoration:underline}
.producer-mark-link:hover .producer-mark{border-color:var(--board-mark,#855a05)}

/* 5. The submission form. The consent block is visually separated and carries
      its own warning, because the decision being made inside it -- publishing
      a phone number to anyone who looks, permanently -- is not the same kind
      of decision as the rest of the form. */
.consent-block{background:#fdf6e6;border-color:#e3cf9f}
.consent-warning{font-size:14px;line-height:1.55;margin:0 0 16px;padding:12px 14px;
  background:#fffdf6;border-left:4px solid var(--amber,#d9ad57);border-radius:0 8px 8px 0}
.consent-row{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:0 0 6px;
  border-bottom:1px dashed #e3cf9f;margin-bottom:14px}
.consent-row:last-of-type{border-bottom:0}
.consent-choice{display:flex;align-items:center;margin:-8px 0 12px}
.consent-choice label{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  cursor:pointer;margin:0}
.consent-choice input[type=checkbox]{width:20px;height:20px;min-height:0;flex:0 0 auto;margin:0}
.grower-form fieldset{background:var(--grower-ground);border-color:var(--grower-edge)}
.grower-form .consent-block{background:#fdf6e6;border-color:#e3cf9f}
.grower-form input[type=file]{width:100%;font-size:15px;padding:10px;background:#fffdf6;
  border:1px dashed var(--grower-edge);border-radius:9px}

@media(max-width:900px){
.grower-layout{grid-template-columns:1fr;gap:18px}
.photo-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;padding:12px}
.grower-photo img{height:150px}
.grower-listings h2,.grower-photos h2{font-size:25px}
}
@media print{
.grower-layout{display:block}
.photo-grid{background:none;border:0;padding:0}
.grower-photo{break-inside:avoid}
}