/* Me2You - Community browse (community.php)
   Moved from the page inline <style> block plus the static layout
   tweaks on the filter row and section spacing. Brand tokens, mobile
   first. The per-card --cat-colour custom property stays inline in PHP
   because it is data-driven (one colour per category). */

.community-hero {
  background: #FFF6E9;
  padding: 28px 0 24px;
}
.community-hero__title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 26px;
  /* Was #1F1A17 (light ink-900); routed through the token so the title
     flips to the light ink ramp in dark mode. Same colour in light. */
  color: var(--ink-900);
  margin: 0 0 6px;
}
.community-hero__intro {
  font-size: 15px;
  /* Was #3D342E (light ink-700); token keeps light identical and flips dark. */
  color: var(--ink-700);
  margin: 0;
  max-width: 540px;
  line-height: 1.5;
}
/* Inline guidelines link inside the hero intro. Pin it to the AA-safe
   orange-800 shade (about 4.7:1 on the cream hero) and underline it so it
   is distinguishable from the surrounding prose without relying on colour
   alone. The brand orange itself is unchanged. */
.community-hero__guidelines {
  color: var(--brand-orange-800);
  text-decoration: underline;
}

.community-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.community-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.community-field--submit {
  justify-content: flex-end;
}
.community-field__label {
  font-size: 12px;
  font-weight: 700;
  /* Was #3D342E (light ink-700); token flips to the light ink in dark mode. */
  color: var(--ink-700);
}
.community-select {
  height: 44px;
  min-width: 160px;
  padding: 0 14px;
  border: 1px solid var(--ink-300);
  border-radius: 999px;
  background: var(--paper);
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  color: var(--ink-900);
  outline: none;
}
.community-select:focus {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(248,154,31,0.15);
}
.community-show-btn {
  height: 44px;
}

.community-section-title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--ink-900);
  margin: 0 0 14px;
}

/* Section spacing between hubs / people / listings strips. */
.community-section {
  margin-bottom: 32px;
}

/* People strip: horizontal scroll on phones, no heavy effects. */
.people-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.people-strip::-webkit-scrollbar { display: none; }

.person-card {
  flex: 0 0 200px;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* Was 14px: the hub/person cards looked cramped. Roomier inner padding. */
  padding: 18px;
  text-decoration: none;
  display: block;
}
.person-card__name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-900);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.person-card__persona {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #9A5309;
  background: #FFE7C8;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.person-card__headline {
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.4;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.community-kind {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  /* Was #3D342E on #F4EEE5 (light ink-700 on ink-100); both routed through
     tokens so the kind chip flips to a dark panel with light text in dark
     mode. Light mode is byte-identical. */
  color: var(--ink-700);
  background: var(--ink-100);
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.community-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-700);
  font-size: 15px;
}

/* Category tint: a 3px left accent on the card and a small dot chip in the
   matching category colour. The colour comes from the --cat-colour custom
   property set inline per card, so it stays in sync with the design tokens. */
.community-listing-card {
  border-left: 3px solid var(--cat-colour, var(--ink-200));
  display: block;
}
.community-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  /* The category colour can be a light or low-contrast tint, so the chip
     text uses a theme-safe ink token to clear 4.5:1 on both the cream and
     dark card backgrounds. The category colour stays as the visible cue on
     the dot beside the label. */
  color: var(--ink-700);
}
.community-cat-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cat-colour, var(--ink-300));
  flex-shrink: 0;
}

/* Dark mode. The cream hero (#FFF6E9 = brand-orange-50) and the peach
   persona pill (#FFE7C8 text #9A5309 = brand-orange-100/-800) are kept
   hardcoded above so light mode stays byte-identical. Those brand-orange
   tints are not part of the dark ink ramp, so they would stay bright on a
   dark page. Re-point them to dark-aware surfaces here only. */
[data-theme="dark"] .community-hero {
  background: var(--ink-50);
}
[data-theme="dark"] .person-card__persona {
  /* Dark elevated chip: brand orange on a dark ink panel clears AA 4.5:1
     (about 6.6:1) without pure-white or orange-on-orange. */
  color: var(--brand-orange);
  background: var(--ink-100);
}
/* The hero darkens to ink-50, so the cream-tuned orange-800 guidelines link
   drops to about 3:1. Lift it to brand orange (about 8:1 on ink-50) in dark. */
[data-theme="dark"] .community-hero__guidelines {
  color: var(--brand-orange);
}

@media (max-width: 575.98px) {
  .community-hero__title { font-size: 22px; }
  .community-select { min-width: 140px; }
  .person-card { flex-basis: 170px; }
}