/* pfc-photos.css — shared editorial-photo treatment classes.
 *
 * Lifted from index.html's inline style block so every page (dashboard,
 * sage, portfolio, scenarios, blog, etc) can use the same vocabulary
 * without duplication.
 *
 * NO filters / vignettes / fade-to-canvas overlays are applied — photos
 * are delivered already final-graded per the vintage-ledger brief at
 * docs/superpowers/audits/2026-05-21-vintage-ledger-brief.md.
 *
 * Classes:
 *   .pfc-photo-band        full-bleed editorial 16:7 band between sections
 *   .pfc-photo-hero        16:9 / 21:9 page-hero, can sit above an h1/h2
 *   .pfc-photo-eyebrow     thin 16:5 / 16:6 / 21:6 / 21:7 strip above content
 *   .pfc-photo-card        4:3 inside a card (Pro empty-states, blog posts)
 *   .pfc-photo-portrait    4:5 / 3:4 vertical, for CTAs and auth-side art
 *   .pfc-photo-square      1:1 talisman, sized via parent
 *   .pfc-photo-figure      generic <figure> + <figcaption> for editorial captions
 *
 * Every <picture> should ship with explicit width+height and lazy-loading.
 */

.pfc-photo-band,
.pfc-photo-hero,
.pfc-photo-eyebrow,
.pfc-photo-card,
.pfc-photo-portrait,
.pfc-photo-square {
  display: block;
  overflow: hidden;
  border-radius: var(--r-md, 14px);
  background: var(--surface-2, rgba(244,239,229,0.04));
  border: 1px solid var(--line-2, rgba(244,239,229,0.06));
  margin: 0;
}

/* When the photo class lives directly on the <img> (as the integrate-photos
 * script does), the <img>'s HTML width/height attributes fight the CSS
 * aspect-ratio. Force height:auto so aspect-ratio + max-width can drive
 * the layout box, and keep object-fit so the natural image fills it
 * without distortion. !important is required to beat the inline
 * width/height presentational attributes the integration emits. */
img.pfc-photo-band,
img.pfc-photo-hero,
img.pfc-photo-eyebrow,
img.pfc-photo-card,
img.pfc-photo-portrait,
img.pfc-photo-square {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  object-position: center;
}

/* Each class has its own max-width discipline — without these the
 * figures fill the entire main column (1200px+) on Pro-gated dashboard
 * pages and dominate the viewport. The .pfc-photo-band line below was
 * already correct; every other class was missing max-width entirely
 * (caught by visual QA — scenarios.html page-hero became a 1200×514
 * viewport-eating banner). All values tuned to feel like editorial
 * vignettes rather than billboards. */

/* 16:7 — section divider band, only used on landing */
.pfc-photo-band  { aspect-ratio: 16 / 7;  max-width: 920px; margin: 0 auto; }
/* 16:9 / 21:9 — page-hero ACCENT. Must NEVER dominate over the page
 * title. ~40% smaller than v1 after journal/net-worth visual QA showed
 * the 880px hero ate 50% of viewport-height and pushed the h1 below
 * the fold. New target: ~480px wide / ~270px tall = ~30% of viewport-h. */
.pfc-photo-hero  { aspect-ratio: 16 / 9; max-width: 480px; margin: 0 auto 20px; }
.pfc-photo-hero.is-wide  { aspect-ratio: 21 / 9; max-width: 560px; }
.pfc-photo-hero.is-cinema { aspect-ratio: 21 / 7; max-width: 620px; }
/* Thin band — drawer / archive / certificate-strip. Eyebrow-sized,
 * never a billboard. */
.pfc-photo-eyebrow { aspect-ratio: 16 / 5; max-width: 640px; margin: 0 auto 18px; }
.pfc-photo-eyebrow.is-tall { aspect-ratio: 16 / 6; max-width: 640px; }
.pfc-photo-eyebrow.is-cinema { aspect-ratio: 21 / 6; max-width: 720px; }
.pfc-photo-eyebrow.is-tide { aspect-ratio: 21 / 7; max-width: 720px; }
/* 4:3 — fits inside cards (Pro empty-states, blog hero) */
.pfc-photo-card    { aspect-ratio: 4 / 3; max-width: 320px; margin: 0 auto 18px; }
/* Vertical — CTAs, auth side panel */
.pfc-photo-portrait        { aspect-ratio: 4 / 5; max-width: 220px; margin: 0 auto 18px; }
.pfc-photo-portrait.is-tall { aspect-ratio: 3 / 4; max-width: 220px; }
/* Square — talisman. Default 200px, .sm for 96px upgrade-banner key */
.pfc-photo-square { aspect-ratio: 1 / 1; max-width: 200px; margin: 0 auto; }
.pfc-photo-square.sm { max-width: 96px; }
.pfc-photo-square.md { max-width: 160px; }

/* Child-img rule for the wrapper-div pattern (index.html `.pfc-photo-band`
 * sits on a wrapper `<div>` with an `<img>` child). The element-selector
 * rule above (`img.pfc-photo-*`) already wins for the direct-img pattern
 * via !important. height: auto here (not 100%) so future wrapper-div
 * usage of .pfc-photo-hero, etc. doesn't collapse to height:0 when the
 * parent has no explicit height (it relies on aspect-ratio). */
.pfc-photo-band img,
.pfc-photo-hero img,
.pfc-photo-eyebrow img,
.pfc-photo-card img,
.pfc-photo-portrait img,
.pfc-photo-square img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Eyebrow — JetBrains Mono small-caps gold tag. Canonical brand pattern
 * (codified in docs/STYLE-GUIDE.md Rule 1). Use as the first element of
 * any page or section that introduces a new editorial concept. Format:
 *   <div class="pfc-eyebrow-mono">The archive · Net worth</div>
 * Sits ABOVE the h1/h2/topbar-title; never below. */
.pfc-eyebrow-mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold, #D4AF6A);
  line-height: 1.3;
  margin-bottom: 4px;
}

/* Universal :focus-visible ring — keyboard navigation a11y (WCAG 2.4.7).
 * Many inline-styled buttons across dashboard / scenarios / goals had no
 * focus indicator because their inline `border` rules overrode the global
 * pseudo-class. By scoping to the High-severity selectors we get coverage
 * without disturbing custom-styled focus states elsewhere. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.tab:focus-visible,
.topbar-btn:focus-visible,
.strat-btn:focus-visible,
.nav-item:focus-visible,
.filter-tab:focus-visible {
  outline: 2px solid var(--gold, #D4AF6A);
  outline-offset: 2px;
  border-radius: var(--r-sm, 6px);
}

/* Decorative SVGs paired with visible text should be hidden from
 * assistive technology. Apply via `aria-hidden="true"` on each <svg>.
 * (CSS rule below is a backstop for any decorative-icon-class.) */
.icon-decorative,
svg[aria-hidden="true"] {
  pointer-events: none;
}

/* Editorial caption — Fraunces italic, 56ch, centred. Optional <figcaption>
   under any of the above. Matches the inline pattern in index.html. */
.pfc-photo-figure { margin: 0; }
.pfc-photo-figure figcaption {
  margin: 14px auto 0;
  max-width: 56ch;
  text-align: center;
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-size: clamp(14px, 1.1vw, 17px);
  color: var(--ink-2, #C8C2B0);
  line-height: 1.45;
}

/* Mobile: shrink margins, keep the photo discipline */
@media (max-width: 720px) {
  .pfc-photo-band, .pfc-photo-hero { border-radius: var(--r-sm, 8px); }
  .pfc-photo-figure figcaption { font-size: 14px; max-width: 90%; }
}

/* Dashboard surfaces ship a dark canvas, so the placeholder
   background should also be dark (matches --canvas, never white). */
.pfc-photo-band[data-canvas="dark"],
.pfc-photo-hero[data-canvas="dark"],
.pfc-photo-eyebrow[data-canvas="dark"],
.pfc-photo-card[data-canvas="dark"] {
  background: var(--canvas, #0B1410);
}