/*
 * The Board (PRD F6, design surface #s7). Layout-only additions that compose the shared Basalt
 * components (.listing-card, .chip-tile, .nav--board from application.css/basalt_components.css)
 * rather than duplicating them. Bundled automatically by Propshaft alongside every other file in
 * this directory (see application.css's header comment).
 */

/* ------------------------------------------------------------------- Board hero --- */
/* The paper-warm band under the (also paper-warm) .nav--board masthead — never the dark basalt
   hero used elsewhere, so a resident checking classifieds never feels they wandered into the
   tourist guide. */
.board-hero { background: #efe9dc; border-bottom: 1px solid rgba(25, 27, 25, 0.1); padding: 28px 0 24px; }
.board-hero__row { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; }
.board-hero__eyebrow {
  font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #8a6a2f;
}
.board-hero h1 { font: 400 clamp(32px, 5vw, 42px)/1.05 var(--font-serif); letter-spacing: -0.015em; margin: 11px 0 0; color: #191b19; }
.board-hero p { font: 400 14.5px/1.6 var(--font-sans); color: #4b514c; margin: 9px 0 0; max-width: 56ch; }
.board-hero__actions { margin-left: auto; display: flex; gap: 8px; flex: none; }
.board-hero__actions .btn--board {
  font: 700 12.5px var(--font-sans); border-radius: 999px; padding: 11px 18px; border: 1px solid rgba(25, 27, 25, 0.22);
  color: #191b19; background: transparent;
}
.board-hero__actions .btn--board-solid { background: #191b19; color: #f5f4f1; border-color: #191b19; }

/* ----------------------------------------------------------------- Category chips --- */
.board-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.board-chip {
  font: 600 11.5px var(--font-sans); background: #fff; border: 1px solid rgba(25, 27, 25, 0.14);
  border-radius: 999px; padding: 8px 14px; color: #4b514c;
}
.board-chip:hover { border-color: rgba(25, 27, 25, 0.32); }
.board-chip.is-active { background: #191b19; color: #f5f4f1; border-color: #191b19; }

/* -------------------------------------------------------------------- Board grid --- */
/* The featured item spans both columns of the shared .grid--3, matching the design's "one large
   item + normal cards" layout (design/Picoisland Design.dc.html #s7). */
.board-featured { grid-column: span 2; }
.board-featured .listing-card__title { font-size: 28px; }

/* Category/source badges laid over .listing-card__badge's shape with the Board's own palette
   (green = transactional/available, amber = time-boxed/festive, grey = informational/scraped). */
.board-badge { display: inline-flex; align-items: center; gap: 6px; font: 600 9px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; }
.board-badge--green { color: #2f8f63; background: #f1faf5; border: 1px solid #b9e0cb; }
.board-badge--amber { color: #8a5f14; background: #fdf8ec; border: 1px solid #ecd9ab; }
.board-badge--grey  { color: #4b514c; background: #f2f4f2; border: 1px solid rgba(25, 27, 25, 0.12); }

.board-card__meta { display: flex; align-items: center; gap: 7px; }
.board-card__age { font: 500 10px var(--font-mono); color: #8d968f; }

.board-card__footer {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(25, 27, 25, 0.07); font: 500 10.5px var(--font-mono); color: #8d968f;
}
.board-card__footer a { color: inherit; }
.board-card__avatar {
  width: 22px; height: 22px; border-radius: 50%; background: #dfe6e0; flex: none;
  font: 600 9px/22px var(--font-mono); text-align: center; color: #4b514c;
}
.board-card__contact-stub { margin-left: auto; font: 600 11px var(--font-sans); color: #2f8f63; }
.board-card__expiry { margin-left: auto; font: 500 9.5px var(--font-mono); color: #c8871f; }
.board-card__price { font: 400 24px/1 var(--font-serif); }

/* -------------------------------------------------------------------- Empty state --- */
.board-empty {
  text-align: center; padding: 60px 20px; color: var(--muted); border: 1px dashed var(--border-input);
  border-radius: 12px;
}

/* -------------------------------------------------------------------- Post detail --- */
.board-detail__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.board-detail__source {
  display: flex; align-items: center; gap: 8px; margin-top: 24px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--well); font-size: 13.5px; color: var(--muted);
}
.board-detail__source a { color: var(--spark); }

/* A visibly inert "contact" affordance — never a real mailto:/tel: link, since contact_value is
   proxied and this pass ships no relay form yet (see BoardPost#contact_value, CLAUDE.md scope). */
.board-contact-stub {
  border: 1px dashed var(--border-input); border-radius: 10px; padding: 18px 20px; margin-top: 24px;
}
.board-contact-stub__btn {
  display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--font-sans); color: var(--muted-2);
  background: var(--well); border: 1px solid var(--border); border-radius: 999px; padding: 12px 22px;
  cursor: not-allowed;
}
.board-contact-stub p { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* -------------------------------------------------------------------- Composer form --- */
.board-form .field-row { display: flex; gap: 10px; }
.board-form .field-row .field { flex: 1; }
.board-form__privacy-note {
  border: 1px solid var(--border); border-radius: 9px; padding: 12px 13px; margin-top: 6px;
  font: 400 12.5px/1.55 var(--font-sans); color: var(--muted); display: flex; gap: 9px; align-items: flex-start;
}
.board-form__privacy-note .status-dot { margin-top: 5px; }