/*
 * Task #1582201: Visual audit fixes
 *
 * 1. Secondary page prose — 70ch max-width on desktop
 * 2. Blog image placeholder — ensure visible on error
 */

/* ══════════════════════════════════════════════════════════════
   1. PROSE WIDTH — Constrain body text to 70ch on desktop
   Applied to: about page, disclaimer page, content sections
   NOT applied to: hero text, CTAs, card excerpts, navigation
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* About page — body paragraphs in content sections */
  .ab4-section p:not(.ab4-hero-sub):not(.ab4-founder-caption-name):not(.ab4-tagline) {
    max-width: 70ch;
  }

  /* Disclaimer page — policy body text */
  .policy-wrap p {
    max-width: 70ch;
  }

  /* No-proof-required page — intro text */
  .np-intro {
    max-width: 70ch;
  }
}

/* ══════════════════════════════════════════════════════════════
   2. BLOG IMAGE PLACEHOLDER — Ensure visible on image error
   The onerror handler shows the placeholder, but it may render
   as a near-white rectangle if the background is too subtle.
   Reinforce with a visible emerald gradient + border.
   ══════════════════════════════════════════════════════════════ */
.ch-card-img-placeholder,
.ch-featured-card-img-placeholder {
  background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 50%, #f0fdf8 100%) !important;
  color: #00643e !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.05em !important;
  border: 1px solid #a7f3d0 !important;
}

.ch-card-img-placeholder::before,
.ch-featured-card-img-placeholder::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300863f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.6;
}

/* Skeleton pulse animation — clearly indicates loading, not missing */
@keyframes ch-img-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.ch-card-img-placeholder,
.ch-featured-card-img-placeholder {
  animation: ch-img-skeleton-pulse 1.8s ease-in-out infinite;
}