/* Supplemental styles for team/agent pages and the marketing photos wired into the
   buying-guide, selling-guide, buy-sell (new construction) and team pages.
   Loaded only from the specific views that need it; site.css is left untouched.
   Reuses the brand color tokens already defined on :root / [data-theme] in site.css. */

/* ---------- Monogram avatar fallback (no photo on file) ---------- */
/* Base .agent__avatar circle already comes from site.css. These rules add a
   polished, deterministic-per-agent fill for the no-photo case instead of the
   single flat gradient site.css falls back to, so several team members with
   no photo don't all look identical. */
.agent__avatar--mono {
  position: relative;
  overflow: hidden;
  color: #fdf8ec;
  font: 600 2rem var(--font-display);
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 6px 16px rgb(21 35 43 / .18);
}
.agent__avatar--mono::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgb(255 255 255 / .22), transparent 55%);
}
.agent__avatar--mono span { position: relative; z-index: 1; }

.agent__avatar--mono.mono-1 { background: linear-gradient(135deg, var(--brick), #15232b); }
.agent__avatar--mono.mono-2 { background: linear-gradient(135deg, var(--sage), #15232b); }
.agent__avatar--mono.mono-3 { background: linear-gradient(135deg, var(--gold), #15232b); }
.agent__avatar--mono.mono-4 { background: linear-gradient(135deg, var(--brick-2), #15232b); }

/* ---------- Email link, mirrors the existing tel: link treatment ---------- */
.agent__email { margin: 0 0 10px; }

/* ---------- Marketing photos: buying/selling guide banners, new-construction
   inline photo, community photo on the team page ---------- */
.guide-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
  margin: 0 0 8px;
}
.guide-photo__img {
  display: block;
  width: 100%;
  height: clamp(200px, 32vw, 340px);
  object-fit: cover;
}
.guide-photo--inline { margin: 28px 0; }