////
///
/// Call to Action Site Styles
/// ===========================================================================
///
/// Component classes the scapepress sites use under the `ss-c-` prefix,
/// moved here from the removed `32-utilities/_scapepress-parity.scss` shim.
/// Forwarded from `31-modules/_index.scss` ahead of every module, so at
/// equal specificity a native module rule wins.
///
/// 12 blocks, each still marked with the site and file it came from.
/// Values read `--ss-*` tokens in place of the sites' own Sass and
/// custom-property variables.
///
/// @group Modules.Cta
/// @author Scape Press
/// @link https://scape.style
/// @since 0.6.0
/// @access public
///
////

@use "sass:map";
@use "../../01-core/external" as *;
@use "../../23-layout/breakpoints";

// ============================================================================
// Output
// ============================================================================

@layer ss.components {
    // -- cta-content  (from site-scape_ventures/src/static/scss/sections/_cta.scss) --
    .ss-c-cta-content {
        max-width: q(640);
        margin: 0 auto;
    }

    // -- cta-title  (from site-scape_ventures/src/static/scss/sections/_cta.scss) --
    .ss-c-cta-title {
        margin-bottom: var(--ss-spacing-4);
    }

    // -- cta-description  (from site-scape_ventures/src/static/scss/sections/_cta.scss) --
    .ss-c-cta-description {
        font-size: var(--ss-font-size-lg);
        margin-bottom: var(--ss-spacing-8);
    }

    // -- cta  (from site-scape_press/src/static/scss/sections/_cta.scss) --
    .ss-c-cta {
        padding: var(--ss-spacing-32) 0;
        background-color: var(--ss-color-background);
        color: var(--ss-color-text);

        &__container {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 var(--ss-spacing-6);

            @media (min-width: map.get(breakpoints.$ss-breakpoints, "lg")) {
                padding: 0 var(--ss-spacing-12);
            }
        }

        &__title {
            font-family: var(--ss-font-family-display);
            font-size: clamp(q(40), 9vw, q(128));
            font-weight: var(--ss-font-weight-bold);
            line-height: 0.95;
            letter-spacing: var(--ss-tracking-tighter);
            margin: 0 0 var(--ss-spacing-10);
            color: var(--ss-color-text);
            max-width: 22ch;
        }

        &__description {
            font-size: var(--ss-font-size-lg);
            color: var(--ss-color-text-muted);
            max-width: 60ch;
            margin: 0 0 var(--ss-spacing-10);
            line-height: 1.5;
        }

        &__actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--ss-spacing-4);
        }
    }

    // -- cta__title  (from site-inthecity_ai/src/static/scss/blocks/_cta.scss) --
    .ss-c-cta__title {
        font-weight: 700;
    }

    // -- cta__text  (from site-inthecity_ai/src/static/scss/blocks/_cta.scss) --
    .ss-c-cta__text {
        max-width: 50ch;
        margin-left: auto;
        margin-right: auto;
    }

    // -- cta__actions  (from site-inthecity_ai/src/static/scss/blocks/_cta.scss) --
    .ss-c-cta__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: q(8);
        margin-top: q(24);
    }

    // -- cta-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-cta-section {
        padding: var(--ss-spacing-20) 0;
        background: linear-gradient(135deg, var(--ss-color-success) 0%, var(--ss-color-success-foreground) 100%);
        color: var(--ss-color-white);
        text-align: center;
    }

    // -- cta-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-cta-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 var(--ss-spacing-6);
    }

    // -- cta-actions  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-cta-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: unset;

        .ss-c-btn-primary {
            background: var(--ss-color-white);
            color: unset;

            &:hover {
                background: var(--ss-color-gray-100);
            }
        }

        .ss-c-btn-ghost {
            color: var(--ss-color-white);
            border: q(1) solid color-mix(in srgb, var(--ss-color-white) 30%, transparent);

            &:hover {
                background: color-mix(in srgb, var(--ss-color-white) 10%, transparent);
                border-color: color-mix(in srgb, var(--ss-color-white) 50%, transparent);
            }
        }
    }

    // -- cta-block  (from site-speckle_org/src/static/scss/sections/_cta.scss) --
    .ss-c-cta-block {
      display: grid;
      gap: var(--ss-spacing-12);
      align-items: center;

      @media (min-width: q(900)) {
        grid-template-columns: 1fr 1fr;
      }

      &__label {
        display: inline-block;
        font-family: var(--ss-font-family-mono);
        font-size: var(--ss-font-size-xs);
        font-weight: var(--ss-font-weight-medium);
        letter-spacing: var(--ss-tracking-widest);
        text-transform: uppercase;
        color: var(--ss-color-accent);
        margin-bottom: var(--ss-spacing-4);
      }

      &__title {
        font-size: var(--ss-font-size-3xl);
        font-weight: var(--ss-font-weight-bold);
        margin-bottom: var(--ss-spacing-6);

        @media (min-width: q(768)) {
          font-size: var(--ss-font-size-4xl);
        }
      }

      &__text {
        font-size: var(--ss-font-size-lg);
        line-height: var(--ss-leading-relaxed);
        color: var(--ss-color-secondary);
        margin-bottom: var(--ss-spacing-8);
      }

      &__visual {
        display: flex;
        justify-content: center;
      }

      &__frame {
        width: 100%;
        max-width: q(400);
        aspect-ratio: 16 / 9;
        background: linear-gradient(135deg, var(--ss-color-surface-3), var(--ss-color-surface-alt));
        border: q(1) solid var(--ss-color-border);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &::before {
          content: '▶';
          font-size: q(48);
          color: var(--ss-color-accent);
          opacity: 0.5;
        }
      }

      &__frame-label {
        position: absolute;
        top: var(--ss-spacing-4);
        left: var(--ss-spacing-4);
        font-family: var(--ss-font-family-mono);
        font-size: var(--ss-font-size-xs);
        letter-spacing: var(--ss-tracking-widest);
        color: var(--ss-color-muted);
        padding: var(--ss-spacing-1) var(--ss-spacing-2);
        border: q(1) solid var(--ss-color-border);
      }
    }

    // -- cta-block__box  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-cta-block__box {
        display: inline-block;
        padding: var(--ss-spacing-6) var(--ss-spacing-12);
        border: q(1) solid var(--ss-color-border);
        font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
        font-size: q(16);
        margin-bottom: unset;
    }
}