/**
 * Informational Layouts
 *
 * Utility classes for reference / medical / topical / educational pages.
 * Provides figure-based image patterns and reading aids that sit on top of
 * the base .prose typography. Load AFTER base/components.css via
 * config/site.php 'site_css' array so cloners can drop this file without
 * touching the engine base theme.
 *
 * Scope: figures (.hero-photo, .body-image and modifiers) + captions +
 * reading aids (.fact-box, .reference-source). Pre-existing classes
 * (.hero-image, .toc, .prose, .related-content, .lead) are NOT redefined.
 *
 * Naming note: .hero-image (pre-existing) is a full-bleed background-image
 * pattern with overlay text. For a figure-wrapped top photo with a visible
 * IMG tag plus caption, use .hero-photo below.
 *
 * Verified: rendered at 1200x2834 desktop + 375x3854 mobile via
 * workbench.py render. Float behavior engages at 768px, stacks below.
 */

/* ══════════════════════════════════════════════════════════════
   HERO PHOTO (figure pattern, top of article)
   ══════════════════════════════════════════════════════════════ */

.hero-photo {
  margin: 0 0 var(--space-lg);
}

.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.hero-photo__caption {
  font-size: var(--text-sm);
  color: var(--text-light);
  margin-top: var(--space-xs);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   BODY IMAGE (inline figures within article prose)
   Default: full-width block above / below paragraphs.
   Modifiers: --right floats right at 768px+, --left floats left at 768px+.
   Both stack full-width on mobile.
   ══════════════════════════════════════════════════════════════ */

.body-image {
  margin: var(--space-lg) 0;
}

.body-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.body-image__caption {
  font-size: var(--text-sm);
  color: var(--text-light);
  margin-top: var(--space-xs);
  line-height: 1.5;
}

/* Desktop floats: images sit alongside paragraphs */
@media (min-width: 768px) {
  .body-image--right {
    float: right;
    width: 45%;
    max-width: 440px;
    margin: var(--space-xs) 0 var(--space-md) var(--space-lg);
    clear: right;
  }

  .body-image--left {
    float: left;
    width: 45%;
    max-width: 440px;
    margin: var(--space-xs) var(--space-lg) var(--space-md) 0;
    clear: left;
  }
}

/* Clearfix: paragraphs after a floated figure should clear on next major break */
.body-image--right + h2,
.body-image--right + h3,
.body-image--left + h2,
.body-image--left + h3 {
  clear: both;
}

/* ══════════════════════════════════════════════════════════════
   FACT BOX (callout for key facts or takeaways)
   Usage: <aside class="fact-box"><h3>Key Fact</h3><p>...</p></aside>
   ══════════════════════════════════════════════════════════════ */

.fact-box {
  background: var(--bg-alt);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin: var(--space-lg) 0;
}

.fact-box > :first-child {
  margin-top: 0;
}

.fact-box > :last-child {
  margin-bottom: 0;
}

.fact-box h3,
.fact-box h4 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-xs);
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════════
   REFERENCE SOURCE (inline citation and source attribution)
   Usage: <p class="reference-source">Source: USDA, 2025.</p>
   ══════════════════════════════════════════════════════════════ */

.reference-source {
  font-size: var(--text-sm);
  color: var(--muted);
  font-style: italic;
  margin-top: var(--space-sm);
}

.reference-source a {
  color: var(--link);
}

/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY: respect reduced-motion
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .hero-photo img,
  .body-image img {
    transition: none;
  }
}