/* BLOG EXTRAS: key-takeaways box and the website audit hook (inline website field plus a details popup).
   Linked only from the posts that use them, so other pages do not download these rules. */
.post-takeaways { margin: 0 0 36px; padding: 24px 26px 8px; border: 2px solid var(--line); border-left: 4px solid var(--pepper); border-radius: var(--radius-md); background: var(--void-soft); }
.post-takeaways__title { margin-bottom: 12px; color: var(--mist); font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.3; }
.post__body .post-takeaways li { margin-bottom: 10px; }

/* Text and links inside the red-gradient CTA box stay light enough for AA contrast. */
.post-cta p:not(.post-cta__title) { color: #e3e8f0; }
.post-cta a:not(.btn) { color: #fff; }
.post-cta__title { margin-bottom: 10px; line-height: 1.3; }

.audit-hook { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 4px 0 18px; }
.audit-hook .contact-form__field { flex: 1 1 240px; }
.audit-hook .contact-form__field span,
#auditPopup .contact-form__field span { color: #c9d2df; }
.audit-hook .btn { flex: 0 0 auto; }
/* Visible at once when opening (only opacity fades in), so focus can move into the popup straight away. */
#auditPopup.is-open { transition-property: opacity; }
.audit-popup__done .btn { margin-top: 8px; }
.audit-popup__done strong { color: var(--mist); overflow-wrap: anywhere; }
/* The site's reduced-motion rule gives every element a 0.01ms transition on all properties, which also
   delays the visibility the popup's fields inherit; switch it off inside the popup so focus can move in. */
@media (prefers-reduced-motion: reduce) {
  #auditPopup * { transition-property: none; }
}
@media (max-width: 620px) {
  .post-takeaways { padding: 20px 20px 6px; }
  .audit-hook .btn { width: 100%; }
}

/* Table of contents as a single column on posts that use these extras. */
.post-toc .post-toc__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }

/* Responsive 16:9 video embed inside an article. */
.post-video { margin: 0 0 24px; aspect-ratio: 16 / 9; border: 2px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--void-soft); }
.post-video iframe { display: block; width: 100%; height: 100%; border: 0; }