/* ============================================================
   STHERB — Breast Guide sub-articles (cream/gold)
   Shared styles for the 4 templates in breast-guide-articles/.
   Loads on top of homepage-redesign.css + blog-redesign.css +
   blog-article-redesign.css (hero/layout/sidebar/disclaimer/CTA
   come from there) + breast-guide-redesign.css (Key Takeaways
   callout, routine steps, disclaimer box, dark CTA bar) +
   faq-redesign.css/js (FAQ accordion). This file only adds the
   bits those don't already cover: media placeholders and the
   sidebar "More in this guide" link list.
   ============================================================ */

/* ---------- Placeholder media frame (no real photography yet) ---------- */
.art-media-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: var(--soft);
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}
.art-media-ph .art-media-ph-icon { font-size: 40px; line-height: 1; opacity: 0.7; }
.art-hero-media.art-media-ph { aspect-ratio: 16 / 7; border-radius: 20px; }
.art-inline-media.art-media-ph { aspect-ratio: 16 / 9; border-radius: 16px; margin: 8px 0 28px; }

/* ---------- Sidebar: More in this guide ---------- */
.art-related-links {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
}
.art-related-links ul { list-style: none; margin: 0; padding: 0; }
.art-related-links li { margin: 0; }
.art-related-links a {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
}
.art-related-links li:last-child a { border-bottom: none; }
.art-related-links a:hover { color: var(--accent); }

/* ---------- Body section spacing (these pages build sections manually,
   not via the_content, so give h2/p/list the same rhythm as .art-body) --- */
.art-body h2:first-child { margin-top: 0; }
.art-body .sr-bg-callout,
.art-body .sr-bg-routine-list { margin-top: 0; }

@media (max-width: 640px) {
  .art-hero-media.art-media-ph { aspect-ratio: 4 / 3; }
}