/* ============================================================
   Public inner-page styles — directory, member profiles, legal,
   and the membership-request form. Rides on marketing.css (its
   :root palette, .container, .btn, typography) so the whole public
   surface shares one brand. Members-area/admin keep their own chrome.
   ============================================================ */

/* Page shell: a comfortable reading column below the branded header,
   with enough min-height to keep the footer at the bottom. */
/* Top padding clears the fixed (~64px) header; bottom keeps the footer off the content. */
.page { padding: calc(64px + clamp(28px, 4vh, 52px)) 0 clamp(56px, 9vh, 96px); min-height: 60vh; }
.page-head { max-width: 46rem; margin-bottom: 2.5rem; }
.page-head h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
.page-head .lead { color: var(--ink-soft); font-size: 1.1rem; margin-top: .6rem; }
.breadcrumb-link { display: inline-block; margin-bottom: 1.5rem; font-weight: 500; }

/* ── Directory ── */
.dir-search { display: flex; gap: .5rem; max-width: 26rem; margin-top: 1.5rem; }
.dir-search input {
  flex: 1; font: inherit; font-size: 1rem;
  padding: 12px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--paper); color: var(--ink);
}
.dir-search input:focus { outline: none; border-color: var(--leather); box-shadow: 0 0 0 3px rgba(138,75,42,.14); }

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}
.member-card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.75rem 1.25rem; text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.member-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
  border-color: var(--bronze); color: var(--ink);
}
.member-name { font-family: var(--serif); font-weight: 600; margin-top: .75rem; color: var(--espresso); font-size: 1.15rem; }
.member-title { color: var(--bronze); font-size: .9rem; }
.member-company { font-size: .9rem; color: var(--ink-soft); }
.member-city { color: var(--ink-soft); font-size: .82rem; margin-top: .25rem; }

/* Avatar (directory + profile) */
.avatar {
  width: 84px; height: 84px; margin: 0 auto; border-radius: 50%;
  background: linear-gradient(135deg, var(--bronze), var(--espresso));
  color: #fff; font-family: var(--serif); font-weight: 600; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 120px; height: 120px; font-size: 2.2rem; }

/* ── Member profile ── */
.profile { max-width: 44rem; }
.profile-header { display: flex; gap: 1.5rem; align-items: center; margin: 0 0 1.5rem; }
.profile-header h1 { margin: 0; color: var(--espresso); font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
.profile-header .headline { color: var(--bronze); font-size: 1.1rem; margin: .3rem 0 0; }
.profile-bio { font-size: 1.08rem; line-height: 1.7; color: var(--ink-soft); }
.profile-fields {
  display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.5rem;
  margin-top: 1.75rem; border-top: 1px solid var(--line); padding-top: 1.5rem;
}
.profile-fields dt { font-weight: 600; color: var(--ink-soft); }
.profile-fields dd { margin: 0; }

/* ── Legal / prose pages ── */
.legal { max-width: 44rem; }
.legal h1 { color: var(--espresso); font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 1rem; }
.legal h2 { font-size: 1.2rem; color: var(--espresso); margin-top: 1.75rem; margin-bottom: .35rem; }
.legal p { margin-bottom: .9rem; color: var(--ink-soft); }
.legal .muted { color: var(--ink-soft); font-size: .85rem; }

/* Notice banner (e.g. DRAFT legal docs, form success) */
.notice { border-radius: var(--radius-sm); padding: 12px 16px; margin: 1rem 0 1.5rem; font-size: .95rem; }
.notice-warn { background: #fbf1dd; border: 1px solid #e6cf9a; color: #6b5220; }
.notice-success { background: #e9f3ea; border: 1px solid #b6d8ba; color: #2f5f37; }

/* ── Generic brand form (membership request) ── */
.form { max-width: 40rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.form .field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 0; }
.form .field.full { grid-column: 1 / -1; }
.form label { font-weight: 500; font-size: .9rem; color: var(--ink-soft); }
.form input, .form textarea {
  font: inherit; font-size: 1rem; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); width: 100%;
}
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--leather); box-shadow: 0 0 0 3px rgba(138,75,42,.14);
}
.form .field-error { color: #a23b2a; font-size: .82rem; }
.form .form-actions { margin-top: 1.25rem; }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}