/**
 * AI Workflow Toolkit — Blog Post CTA Styles
 *
 * Scoped to the [aiwftk_blog_cta] composite shortcode that embeds a
 * prompt-upgrade CTA block inline inside a blog post. Per the plugin's
 * two-design-systems guardrail, this stylesheet provides ONLY minimal
 * structural styling — vertical rhythm and spacing. Typography
 * (heading size, body font, color) and text alignment are left to the
 * host theme so the block reads as a natural part of the article, not
 * a widget pasted in from elsewhere.
 *
 * Alignment note (v1.13.3):
 * Earlier revisions wrapped the block in a subtle bordered container
 * with horizontal padding. On the production site that pushed the
 * heading, hook, and form ~28px inward relative to the surrounding
 * blog paragraphs and made the block feel like an embedded widget.
 * Dave's directive: "All text should be left-aligned and consistent
 * with the blog." So the horizontal padding, border, and background
 * are removed — the block is now pure vertical rhythm. Content
 * inside inherits the article's text alignment and sits flush with
 * blog body copy.
 *
 * Divi-compatibility note:
 * The Divi theme's default styles on post-content `<p>` and `<h2>`
 * tags silently override plugin CSS at standard specificity. Per the
 * documented "Divi Theme CSS Compatibility" and "WYSIWYG Content
 * Styling on Divi Sites" patterns in Patterns & Solutions, every
 * spacing rule below is written with `body .aiwftk-blog-cta`
 * specificity AND `!important` on the properties that Divi touches
 * (padding, margin). Typography-adjacent properties (font-size,
 * opacity) are left clean because we want the theme to keep control
 * of those.
 *
 * @package AI_Workflow_Toolkit
 * @since 1.13.0
 */

/* ---------------------------------------------------------------------
 * Container
 *
 * Vertical padding only — horizontal padding would push text inward
 * and break alignment with surrounding blog paragraphs. The vertical
 * padding, combined with the container's own margin, creates the
 * breathing room Dave approved in v1.13.2 (margin-top of the
 * container separates the block from the preceding paragraph; the
 * padding-top creates the internal gap before the heading).
 * ------------------------------------------------------------------ */

body .aiwftk-blog-cta {
    margin: 2.5em 0 !important;
    padding: 1em 0 1.75em 0 !important;
}

/* ---------------------------------------------------------------------
 * Heading
 *
 * Reset margin-top so the container padding alone controls the gap
 * above the heading — without `!important` Divi's H2 default
 * margin-top sneaks in and the gap becomes inconsistent.
 * ------------------------------------------------------------------ */

body .aiwftk-blog-cta .aiwftk-blog-cta-heading {
    margin-top: 0 !important;
    margin-bottom: 0.5em !important;
}

/* ---------------------------------------------------------------------
 * Hook paragraph wrapper + inner <p>
 *
 * The hook is a <div> wrapping a <p>. Divi's post-content styles
 * add margin-bottom to <p> elements, so we target the inner <p>
 * directly to control the gap between the hook copy and the form's
 * first name / last name row. Without this the form crowds the hook
 * regardless of the wrapper div's margin.
 * ------------------------------------------------------------------ */

body .aiwftk-blog-cta .aiwftk-blog-cta-hook {
    margin: 0 0 1.75em 0 !important;
}

body .aiwftk-blog-cta .aiwftk-blog-cta-hook p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
 * Form wrapper
 *
 * Gives the Gravity Form its own vertical rhythm inside the block.
 * The form itself carries the toolkit-style .aiwftk-upgrade-form
 * classes that are styled in aiwftk-public.css — that's the
 * documented exception to the funnel-page design boundary (toolkit
 * style on copy buttons / form submits for visual consistency).
 * ------------------------------------------------------------------ */

body .aiwftk-blog-cta .aiwftk-blog-cta-form {
    margin: 0 0 1em 0 !important;
}

/* ---------------------------------------------------------------------
 * Next-step footer
 *
 * A small reassurance line under the form. Slightly muted so it
 * reads as a footnote, not a second pitch. Typography (font-size,
 * opacity) left without `!important` so the theme can still shape it.
 * Alignment inherits from the article — no text-align override here.
 * ------------------------------------------------------------------ */

body .aiwftk-blog-cta .aiwftk-blog-cta-next-step {
    margin: 0 !important;
    font-size: 0.95em;
    opacity: 0.75;
}

/* ---------------------------------------------------------------------
 * Responsive
 *
 * Tighten vertical padding on narrow viewports so the block doesn't
 * eat too much vertical space on phones.
 * ------------------------------------------------------------------ */

@media (max-width: 600px) {
    body .aiwftk-blog-cta {
        padding: 0.75em 0 1.25em 0 !important;
        margin: 2em 0 !important;
    }
}