/**
 * StoryBrand prompt delivery page — structural styles only.
 *
 * These styles control layout, spacing, and the visual separation between
 * the eight StoryBrand blocks that make up the prompt delivery page. They
 * intentionally do NOT set typography, colors, or decorative styling —
 * the host theme (Divi on the production site) owns all of that so the
 * delivery page reads as part of the site, not as a plugin widget.
 *
 * Every selector is scoped to an `.aiwftk-sb-*` class so none of these
 * rules bleed into theme content. No bare element selectors anywhere.
 *
 * The CSS follows the same architecture as aiwftk-prompt-upgrade.css:
 * low-specificity, theme-overridable defaults, no `!important`.
 *
 * Loaded lazily by AIWFTK_Storybrand::enqueue_storybrand_styles() — only
 * on pages that actually render at least one StoryBrand shortcode.
 *
 * @package AI_Workflow_Toolkit
 * @since 1.15.0
 */

/* -------------------------------------------------------------------------
 * Back link — top of page, matches [aiwftk_prompt_upgrade_back] behavior.
 * ------------------------------------------------------------------------- */
.aiwftk-sb-back-link {
    display: inline-block;
    margin-bottom: 1em;
    text-decoration: none;
}

.aiwftk-sb-back-link:hover,
.aiwftk-sb-back-link:focus {
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Hook — Stage 1 (character). A lead paragraph; Divi themes commonly
 * style `.lead` or equivalent for emphasis, so we keep this lightweight.
 * ------------------------------------------------------------------------- */
.aiwftk-sb-hook {
    margin: 0 0 1.25em;
}

/* -------------------------------------------------------------------------
 * Hero confirmation — state-aware sentence rendered directly below the
 * Hook in the hero. Tightens the gap to the Hook so the two read as a
 * single opening beat ("You're in. Your prompt is on the way…" → "The
 * workshop is next."). Keeps a normal paragraph's bottom margin so the
 * next block (usually the Problem) breathes.
 * ------------------------------------------------------------------------- */
.aiwftk-sb-hero-confirmation {
    margin: -0.5em 0 1.5em;
}

.aiwftk-sb-hero-confirmation > :last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Problem — Stage 2. Single paragraph voicing the printer's pain back to
 * them. Consolidated in v1.17.0 from a three-row labeled list so the
 * delivery page reads like copy, not like a worksheet.
 * ------------------------------------------------------------------------- */
.aiwftk-sb-problem {
    margin: 0 0 1.5em;
}

/* -------------------------------------------------------------------------
 * Guide — Stage 3. Empathy sentence + authority sentence stacked. Dave
 * places his headshot in the surrounding Divi section, not in this block.
 * ------------------------------------------------------------------------- */
.aiwftk-sb-guide {
    margin: 0 0 1.5em;
}

.aiwftk-sb-guide-empathy {
    margin: 0 0 0.75em;
}

.aiwftk-sb-guide-authority {
    margin: 0;
}

/* -------------------------------------------------------------------------
 * Plan — Stage 4. Three steps with labeled numbering. Rendered as an
 * ordered list so screen readers announce the count naturally; the
 * label span ("Step 1") is redundant for SRs but matches the visual
 * treatment StoryBrand expects.
 * ------------------------------------------------------------------------- */
.aiwftk-sb-plan {
    list-style: none;
    margin: 0 0 1.5em;
    padding: 0;
    counter-reset: aiwftk-sb-plan-counter;
}

.aiwftk-sb-plan-step {
    display: block;
    margin: 0 0 1em;
    padding: 0;
}

.aiwftk-sb-plan-step:last-child {
    margin-bottom: 0;
}

.aiwftk-sb-plan-label {
    display: inline-block;
    min-width: 5em;
    margin-right: 0.5em;
    font-weight: 600;
}

.aiwftk-sb-plan-text {
    display: inline;
}

@media (max-width: 600px) {
    .aiwftk-sb-plan-label {
        display: block;
        min-width: 0;
        margin-right: 0;
        margin-bottom: 0.15em;
    }

    .aiwftk-sb-plan-text {
        display: block;
    }
}

/* -------------------------------------------------------------------------
 * Plan step detail — Stage 4 (per-workflow add-on, v1.22.0).
 *
 * Rendered by the three [aiwftk_storybrand_step{1,2,3}_detail] shortcodes
 * below the evergreen copy inside each Divi Plan step module. Spacing
 * only — Divi owns typography and color. A modifier class
 * .aiwftk-sb-plan-step-detail-{1,2,3} is also present on the wrapper so
 * the theme can target each step independently if future design calls
 * for it; today the base rule is the one that matters.
 *
 * Using margin-top rather than margin-bottom so the detail block tucks
 * under the evergreen paragraph without adding extra space below — Divi
 * module padding handles the space below the full step.
 * ------------------------------------------------------------------------- */
.aiwftk-sb-plan-step-detail {
    margin: 0.75em 0 0;
}

.aiwftk-sb-plan-step-detail > :last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Action — Stage 5. Three variants share the same outer structure so
 * Divi spacing around the block stays consistent regardless of which
 * branch renders.
 * ------------------------------------------------------------------------- */
.aiwftk-sb-action {
    margin: 1.5em 0;
    padding: 1.5em;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    /* Center the button while keeping title/when/description left-aligned. */
    text-align: center;
}

.aiwftk-sb-action-title {
    margin: 0 0 0.5em;
    text-align: left;
}

.aiwftk-sb-action-when {
    margin: 0 0 0.5em;
    font-weight: 600;
    text-align: left;
}

.aiwftk-sb-action-description {
    margin: 0 0 2em;
    text-align: left;
}

/* wp_editor() content rendered inside the description often ends with its
 * own <p> margin-bottom. Zero the last child so the div's 2em bottom
 * margin is the only gap above the CTA — keeps the distance between the
 * description's "Come prepared" line and the Add to Calendar button
 * deterministic rather than the sum of a collapsing inner/outer margin
 * pair. */
.aiwftk-sb-action-description > :last-child {
    margin-bottom: 0;
}

/* Primary CTA button — the most prominent clickable element in the
 * workshop section. Solid background in the site's teal/green accent
 * color (#00b5b5 — matches section headings like "HERE IS YOUR PLAN"),
 * white text, generous padding, centered. Override-friendly: themes
 * can adjust color via .aiwftk-sb-action-button { background: ...; }.
 *
 * margin-top elevates the button off the "Come prepared" line above
 * so the click target reads as its own beat rather than an inline
 * follow-on to the description. Inline-block margins don't collapse,
 * so 0.5em here stacks on top of the 2em bottom-margin on
 * .aiwftk-sb-action-description for a total ~2.5em gap above the
 * button. */
.aiwftk-sb-action-button {
    display: inline-block;
    margin-top: 0.5em;
    padding: 0.85em 2em;
    border: none;
    border-radius: 6px;
    background: #00b5b5;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1em;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    /* Minimum touch target per project accessibility standard. */
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
}

.aiwftk-sb-action-button:hover,
.aiwftk-sb-action-button:focus {
    background: #009999;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.aiwftk-sb-action-button:active {
    transform: translateY(0);
}

/* Full-width on mobile for easy tap targets. */
@media screen and (max-width: 600px) {
    .aiwftk-sb-action-button {
        display: block;
        width: 100%;
    }
}

/* Transitional CTA — the lighter alternative beneath the primary button.
 * Smaller visual weight signals "secondary option" without hiding it.
 *
 * @deprecated 1.20.0 — replaced by .aiwftk-sb-upcoming-reassurance
 * (rendered by render_upcoming_reassurance() instead of
 * render_transitional_cta()). Kept for one release for rollback safety.
 */
.aiwftk-sb-transitional-cta {
    margin: 1em 0 0;
    font-size: 0.9em;
}

.aiwftk-sb-transitional-cta a {
    text-decoration: underline;
}

/* Upcoming-workshop reassurance — non-link paragraph shown beneath the
 * "Add to Calendar" button when the workshop is still upcoming. Replaces
 * the transitional CTA link in v1.20.0. Centered within the action card,
 * matches the left-aligned description above the button, uses the same
 * muted visual weight the transitional CTA used so visual hierarchy
 * stays: headline → date/time → description → primary button → quiet
 * reassurance. Centered text keeps it balanced beneath the centered
 * button even though title/when/description above are left-aligned.
 *
 * v1.34.3: margin zeroed because the button now owns its bottom spacing
 * (margin: 1.5em auto on the button rule above). text-align: center
 * gets !important because Divi's typography rules were overriding the
 * un-!important rule on the live site, leaving the line left-aligned. */
.aiwftk-sb-upcoming-reassurance {
    margin: 0 !important;
    font-size: 0.9em;
    text-align: center !important;
}

.aiwftk-sb-upcoming-reassurance > :last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Live-workshop calendar link spacing — symmetric framing.
 *
 * Intended visual stack inside the live-workshop card is:
 *
 *   description ─┐
 *                │  same gap above
 *   📅 Add to Calendar
 *                │  same gap below
 *   reassurance ─┘
 *
 * The default rules above produce 2em + 0.5em = 2.5em above the link
 * (.aiwftk-sb-action-description margin-bottom + .aiwftk-sb-action-button
 * margin-top, non-collapsing because the button is inline-block) and
 * 1.25em below (.aiwftk-sb-upcoming-reassurance margin-top). On the
 * live Divi site the description's margin-bottom collapses unpredictably
 * under the theme's et_pb_text typography reset, so the visible gap
 * above shrinks to ~0.5em while the gap below stays ~1.25em — the
 * opposite of intent (a tighter top, looser bottom).
 *
 * Fix: zero the description's margin-bottom inside the live-workshop
 * card and put a deterministic 1.25em margin-top on the calendar link.
 * The gap below stays at the reassurance's existing 1.25em margin-top,
 * so above and below are now equal regardless of what Divi does to the
 * description's <p> margins. !important is required because Divi
 * targets margin aggressively across descendant selectors inside
 * et_pb_text modules — see Guardrails "Don't Strip !important From
 * Position, Layout, sr-only, or Text-Transform Properties".
 *
 * Scoped to .aiwftk-sb-action-live so the recording variant (filled
 * pill button with no reassurance copy) and the fallback variant (no
 * description above the button) are unaffected.
 *
 * @since 1.33.1
 * ------------------------------------------------------------------------- */
body .aiwftk-sb-action-live .aiwftk-sb-action-description {
    margin-bottom: 0 !important;
}

/* -------------------------------------------------------------------------
 * Live-workshop primary CTAs — orange filled buttons, horizontally centered.
 *
 * Both the "Add to Calendar" link (rendered outside the live window)
 * and the "Join the workshop" link (rendered inside the live window)
 * use the same orange button treatment so the live-workshop card
 * presents one consistent visual system regardless of which CTA is
 * showing. Visual treatment matches the prompt-upgrade Gravity Forms
 * submit button (aiwftk-public.css ~line 2046) so the registrant
 * sees the same button look on the article they came from, on the
 * prompt delivery page when filling out the form, and at workshop
 * time — one CTA system across the whole funnel.
 *
 *   - background       --aiwftk-cta (#f36f21, MI4P CTA orange)
 *   - hover background --aiwftk-cta-hover (#ee600d)
 *   - white uppercase text
 *   - 5px border-radius (matches GF button — pill-ish but rectangular)
 *   - 44px min-height (touch target)
 *
 * The CSS variables fall back to literal hex values because the
 * variables are scoped to .aiwftk-prompt-delivery in aiwftk-public.css
 * — the StoryBrand action card may render outside that scope (Divi
 * page layout dependent), so the literal fallback keeps the colors
 * correct everywhere.
 *
 * Centering: `display: block` + `width: fit-content` + `margin-inline:
 * auto` horizontally centers the button independent of the parent's
 * `text-align: center`. The parent's text-align should be enough on
 * its own (inline-block elements center under text-align), but Divi
 * occasionally interferes with text-align on descendant elements so
 * the explicit margin-auto pattern is more deterministic. The button
 * width fits its content rather than stretching full-width — keeps
 * the visual proportion right inside the action card without
 * overpowering the surrounding content.
 *
 * Margin-top of 1.25em matches the v1.33.1 calendar-link spacing so
 * the gap from description to primary CTA is the same regardless of
 * which CTA is rendering. !important because Divi targets margin,
 * background, padding, and typography aggressively (keep-list
 * authorized — see Guardrails).
 *
 * @since 1.34.0  (Join link introduced)
 * @since 1.34.1  Restyled Join as filled orange button.
 * @since 1.34.2  Calendar link inherits the orange button treatment;
 *                both centered horizontally via display:block + auto
 *                margins instead of relying on parent text-align.
 *                Replaced the old v1.33.1 .aiwftk-sb-action-calendar
 *                margin-top rule (margin-top now lives in the shared
 *                button rule below).
 * ------------------------------------------------------------------------- */
body .aiwftk-sb-action-live .aiwftk-sb-action-join,
body .aiwftk-sb-action-live .aiwftk-sb-action-calendar {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    /* Both top and bottom margins set explicitly so the button owns its
     * spacing on both sides — gap above (description → button) and below
     * (button → cue / reassurance) match deterministically without
     * relying on the next sibling's margin-top. v1.34.3 bump from
     * 1.25em → 1.5em for clearer visual breathing room. */
    margin: 1.5em auto !important;
    padding: 0.5em 1.5em !important;
    background: var(--aiwftk-cta, #f36f21) !important;
    color: #fff !important;
    border: 1px solid var(--aiwftk-cta-hover, #ee600d) !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.7 !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
}

body .aiwftk-sb-action-live .aiwftk-sb-action-join:hover,
body .aiwftk-sb-action-live .aiwftk-sb-action-join:focus,
body .aiwftk-sb-action-live .aiwftk-sb-action-calendar:hover,
body .aiwftk-sb-action-live .aiwftk-sb-action-calendar:focus {
    background: var(--aiwftk-cta-hover, #ee600d) !important;
    border-color: #d55400 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* -------------------------------------------------------------------------
 * Live-now cue — small reassurance line beneath the Join button.
 *
 * "Click to join instantly: Live workshop in progress now!" —
 * confirms to the registrant that the workshop is happening RIGHT
 * NOW so the button click leads to a live session, not an empty room.
 * Hardcoded copy (not operator-editable) — the message is functional
 * rather than marketing copy, and shipping it in code keeps the
 * settings surface area smaller.
 *
 * Visual treatment mirrors .aiwftk-sb-upcoming-reassurance — same
 * smaller font, muted weight, centered text — so the two states
 * (pre-window reassurance, in-window cue) feel like the same kind
 * of supporting copy, just with state-appropriate content.
 *
 * v1.34.3: same margin/text-align treatment as the reassurance —
 * button owns its bottom spacing, !important on text-align to beat
 * Divi's left-align inheritance.
 *
 * @since 1.34.2
 * ------------------------------------------------------------------------- */
.aiwftk-sb-live-now-cue {
    margin: 0 !important;
    font-size: 0.9em;
    text-align: center !important;
}

/* Anchor color — all links inside the workshop box render in the site's
 * primary link color (#5aa2c8), matching the "The AI Workflow Workshop"
 * H2 above the box and the primary link treatment used elsewhere on the
 * delivery page. High-specificity selector with !important is necessary
 * because Divi's link styles on section-level selectors override
 * low-specificity plugin CSS on the live delivery page (see Patterns &
 * Solutions: "Divi Theme CSS Compatibility"). Applies to whatever
 * anchors render in each state variant: "Add to Calendar" for an
 * upcoming workshop, "Watch the recording" for a past workshop with a
 * linked recording, and the fallback replay link. The primary CTA
 * button (.aiwftk-sb-action-button) keeps its own color treatment
 * because the button is a filled/solid pill, not text link styling. */
body .aiwftk-sb-action a:not(.aiwftk-sb-action-button),
body .aiwftk-sb-action a:not(.aiwftk-sb-action-button):hover,
body .aiwftk-sb-action a:not(.aiwftk-sb-action-button):focus {
    color: #5aa2c8 !important;
}

/* Inline YouTube embed for the past-workshop action variant.
 *
 * The delivery page hosts this shortcode inside a Divi Text module,
 * which wraps content in <p><span>…</span></p>. When the shortcode
 * emits a block-level <div>, the browser HTML parser auto-closes the
 * surrounding <p> and can leave the wrapper in a DOM position where
 * the padding-bottom percentage trick (padding-bottom: 56.25% of
 * width) fails to compute — the card ends up visually empty even
 * though the iframe is in the source. v1.26.1 switches to the modern
 * `aspect-ratio` property (CSS Working Draft, shipped in all major
 * browsers since 2021) and adds explicit display: block + width: 100%
 * so the wrapper's box model is unambiguous regardless of how Divi
 * reshapes the surrounding DOM. The padding-bottom approach is kept
 * inside an @supports fallback for browsers that don't understand
 * aspect-ratio.
 *
 * margin-top elevates the embed off the description above by the same
 * ~2em the primary button would use, keeping vertical rhythm
 * consistent between the live-workshop (button) and past-workshop
 * (embed) variants.
 *
 * Override-friendly: no !important, low specificity — themes can
 * adjust the aspect ratio (e.g., for a vertical video) by overriding
 * .aiwftk-sb-video-wrapper { aspect-ratio: …; } without fighting
 * specificity. */
.aiwftk-sb-video-wrapper {
    position: relative;
    display: block;
    width: 100%;
    margin: 0.5em 0 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
}

/* Fallback for browsers without aspect-ratio support (Safari < 15.0,
 * Firefox < 89, Chrome < 88 — all pre-2021). Uses the classic
 * padding-bottom trick combined with height: 0 so the wrapper still
 * reserves a 16:9 box against its computed width. */
@supports not (aspect-ratio: 16 / 9) {
    .aiwftk-sb-video-wrapper {
        height: 0;
        padding-bottom: 56.25%;
    }
}

.aiwftk-sb-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* -------------------------------------------------------------------------
 * Outcome — Stages 6+7 combined. Single paragraph that opens with the
 * cost of inaction and flows into the picture of success. Positioned
 * below the workshop CTA, above the transitional CTA.
 * ------------------------------------------------------------------------- */
.aiwftk-sb-outcome {
    margin: 0 0 1.5em;
}