/* ==========================================================================
   Mobile QA typography + article image artifact fixes
   Fixes: Blood Pressure sidebar cards, Why Preventive Care Matters cards,
   Managing Stress sidebar title, and resource hero image blue gap/artifact.
   Loaded last on the affected pages so it wins over inline-heavy mobile CSS.
   ========================================================================== */

/* Clean resource article hero image frames. The earlier mobile rule forced
   article images to height:auto, leaving the wrapper background visible as a
   blue/sage rectangle under 16:10 images. */
.resource-hero-image-frame {
  background: #ffffff !important;
  border: 1px solid rgba(79, 163, 217, 0.16) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.resource-hero-image-frame > img,
.resource-hero-image-frame picture,
.resource-hero-image-frame picture > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #ffffff !important;
}

.resource-hero-image-frame::before,
.resource-hero-image-frame::after {
  content: none !important;
  display: none !important;
}

/* Mobile article/card title normalization. */
@media (max-width: 820px) {
  body.blood-pressure-page .article-info-card h3,
  body.blood-pressure-page .article-cta-card h3,
  body.managing-stress-page .article-sidebar-card > h3,
  body.why-preventive-care-page .preventive-benefit-card h3,
  body.why-preventive-care-page .preventive-topic-card h3,
  body.why-preventive-care-page .preventive-side-title,
  body.preventive-care-service-page .service-feature-card h3,
  body.preventive-care-service-page .service-process-step h3,
  body.preventive-care-service-page .service-related-card h3 {
    font-family: var(--font-body, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
    font-size: clamp(17px, 4.55vw, 19px) !important;
    line-height: 1.28 !important;
    font-weight: 800 !important;
    letter-spacing: -0.012em !important;
    color: var(--aim-blue, #042249) !important;
    text-rendering: optimizeLegibility !important;
  }

  body.blood-pressure-page .article-info-card h3,
  body.blood-pressure-page .article-cta-card h3,
  body.managing-stress-page .article-sidebar-card > h3 {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }

  body.blood-pressure-page .article-info-card,
  body.blood-pressure-page .article-cta-card,
  body.managing-stress-page .article-sidebar-card,
  body.why-preventive-care-page .preventive-side-card {
    border-radius: 28px !important;
  }

  body.blood-pressure-page .article-info-card li,
  body.blood-pressure-page .article-cta-card p,
  body.managing-stress-page .article-sidebar-card .body-copy,
  body.why-preventive-care-page .preventive-benefit-card p,
  body.why-preventive-care-page .preventive-topic-card p,
  body.why-preventive-care-page .preventive-side-copy,
  body.preventive-care-service-page .service-feature-card p,
  body.preventive-care-service-page .service-process-step p,
  body.preventive-care-service-page .service-related-card p {
    font-family: var(--font-body, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
    color: var(--aim-text, #233346) !important;
  }

  body.blood-pressure-page .article-info-card li {
    gap: 10px !important;
    align-items: flex-start !important;
  }

  body.blood-pressure-page .article-info-card li svg {
    width: 15px !important;
    height: 15px !important;
    margin-top: 4px !important;
  }

  body.blood-pressure-page .article-cta-card .btn,
  body.managing-stress-page .article-sidebar-card .btn,
  body.why-preventive-care-page .preventive-side-btn {
    min-height: 48px !important;
    font-size: 12px !important;
    letter-spacing: 0.035em !important;
  }

  /* Why Preventive Care Matters: benefits grid card titles were tiny inline h3s. */
  body.why-preventive-care-page .preventive-benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.why-preventive-care-page .preventive-benefit-card {
    padding: 22px !important;
    border: 1px solid rgba(79, 163, 217, 0.14) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 12px 30px rgba(4, 34, 73, 0.055) !important;
  }

  body.why-preventive-care-page .preventive-benefit-card h3 {
    margin: 0 0 8px !important;
  }

  body.why-preventive-care-page .preventive-benefit-card p {
    margin: 0 auto !important;
    max-width: 32ch !important;
    color: var(--aim-text-soft, #4e5a67) !important;
  }

  body.why-preventive-care-page .preventive-topic-card h3 {
    margin: 0 0 8px !important;
  }

  body.why-preventive-care-page .preventive-topic-card p,
  body.preventive-care-service-page .service-feature-card p,
  body.preventive-care-service-page .service-process-step p,
  body.preventive-care-service-page .service-related-card p {
    color: var(--aim-text-soft, #4e5a67) !important;
  }

  /* Keep article hero images fully covering their frames on mobile. */
  body.blood-pressure-page .resource-hero-image-frame,
  body.managing-stress-page .resource-hero-image-frame,
  body.why-preventive-care-page .resource-hero-image-frame {
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  body.blood-pressure-page .resource-hero-image-frame > img,
  body.managing-stress-page .resource-hero-image-frame > img,
  body.why-preventive-care-page .resource-hero-image-frame > img,
  body.blood-pressure-page img[src*="blood-pressure-main"],
  body.managing-stress-page img[src*="managing-stress-main"],
  body.why-preventive-care-page img[src*="preventive-care-main"] {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

@media (max-width: 520px) {
  body.blood-pressure-page .article-info-card,
  body.blood-pressure-page .article-cta-card,
  body.managing-stress-page .article-sidebar-card,
  body.why-preventive-care-page .preventive-side-card,
  body.why-preventive-care-page .preventive-topic-card,
  body.why-preventive-care-page .preventive-benefit-card {
    padding: 22px !important;
  }

  body.why-preventive-care-page .preventive-section-title,
  body.why-preventive-care-page .preventive-subsection-title {
    font-size: clamp(30px, 8.8vw, 38px) !important;
    line-height: 1.06 !important;
  }
}