/* Audience pages (tools/audience-pages.mjs, first /for-men/), served at /audiences/audience.css,
   after /concerns/concern.css (numbered list, ranked list, bullets) whose styles they share. This
   file styles only what audience pages add: the photo beside the definition, the figures and the
   preview-only statistics placeholder. Palette and type are the site's own. */

/* Hero: the clinic photo is light, so a left-weighted scrim keeps the white H1 and subtitle
   legible (QA 2026-10-15: low contrast on the cream wall). Only audience pages load this file. */
.fl-node-a6nzbxjw9eo2 > .fl-row-content-wrap { position: relative; }
.fl-node-a6nzbxjw9eo2 > .fl-row-content-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, .15) 100%);
}
.fl-node-a6nzbxjw9eo2 > .fl-row-content-wrap > .fl-row-content { position: relative; z-index: 1; }
@media (max-width: 767px) {
  .fl-node-a6nzbxjw9eo2 > .fl-row-content-wrap::before { background: rgba(0, 0, 0, .5); }
}

/* 1. The photo under the definition's heading: a portrait, never stretched. */
.dr-au-photo { margin-top: 28px; }
.dr-au-photo img { aspect-ratio: auto; object-fit: contain; }

/* 3. By the numbers: figures in a row, value in DidotDisplay over its label. */
.dr-au-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; max-width: 960px; margin: 32px auto 0; padding: 0; border-top: 1px solid #000; }
.dr-au-figures > div { display: flex; flex-direction: column-reverse; padding: 22px 20px 24px 0; border-bottom: 1px solid rgba(0, 0, 0, .15); text-align: left; }
.dr-au-figures dd { margin: 0 0 8px; font-family: DidotDisplay, Verdana, Arial, sans-serif; font-size: 44px; line-height: 1.05; }
.dr-au-figures dt { margin: 0; font-size: 15px; line-height: 1.45; }
.dr-au-note { max-width: 960px; margin: 14px auto 0; font-size: 13px; line-height: 1.5; text-align: left !important; color: #4D4D4D; }

/* Preview-only placeholder (never in production builds). */
.dr-au-placeholder { max-width: 860px; margin: 28px auto 0; padding: 18px 22px; border: 2px dashed #000; background: #FFFF6E; text-align: left; }
.dr-au-placeholder p { margin: 0; font-size: 16px; line-height: 1.5; text-align: left !important; }

#approach, #by-the-numbers, #treatments, #concerns { scroll-margin-top: 90px; }
.dr-au-figures, .dr-au-figures * { text-align: left !important; }

@media (max-width: 767px) {
  .dr-au-figures { grid-template-columns: 1fr 1fr; }
  .dr-au-figures dd { font-size: 34px; }
}