////
///
/// Section 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.
///
/// 38 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.Section
/// @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 {
    // -- section  (from site-scape_ventures/src/static/scss/layout/_container.scss) --
    .ss-c-section {
        padding: var(--ss-spacing-16) 0;

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

    // -- section--values  (from site-scape_ventures/src/static/scss/sections/_about.scss) --
    .ss-c-section--values {
        padding: q(64) 0;
        background: var(--ss-color-gray-50);
        border-top: q(1) solid var(--ss-color-gray-200);
    }

    // -- section-map  (from site-scape_ventures/src/static/scss/sections/_contact.scss) --
    .ss-c-section-map {
        padding: 0;
    }

    // -- section-cta  (from site-scape_ventures/src/static/scss/sections/_cta.scss) --
    .ss-c-section-cta {
        background: var(--ss-color-gray-50);
        text-align: center;
    }

    // -- section-label  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section-label {
        display: inline-block;
        font-size: var(--ss-font-size-xs);
        font-weight: var(--ss-font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ss-color-primary);
        margin-bottom: var(--ss-spacing-3);
    }

    // -- section-description  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section-description {
        font-size: var(--ss-font-size-lg);
        color: var(--ss-color-gray-500);
    }

    // -- section-action  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section-action {
        text-align: center;
        margin-top: var(--ss-spacing-12);
    }

    // -- section__header  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section__header {
        margin-bottom: q(48);
    }

    // -- section__title  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section__title {
        font-size: q(36);
        margin-bottom: q(8);
    }

    // -- section__subtitle  (from site-scape_ventures/src/static/scss/sections/_headers.scss) --
    .ss-c-section__subtitle {
        font-size: var(--ss-font-size-base);
        color: var(--ss-color-gray-600);
        max-width: q(640);
    }

    // -- section--legal  (from site-scape_ventures/src/static/scss/sections/_legal.scss) --
    .ss-c-section--legal {
        padding-top: var(--ss-spacing-32);
        padding-bottom: var(--ss-spacing-16);

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

    // -- section-stats  (from site-scape_ventures/src/static/scss/sections/_stats.scss) --
    .ss-c-section-stats {
        background: var(--ss-color-primary);
        padding: var(--ss-spacing-16) 0;
    }

    // -- section--team-grid  (from site-scape_ventures/src/static/scss/sections/_team.scss) --
    .ss-c-section--team-grid {
        padding: q(64) 0;
    }

    // -- section-what-we-look-for  (from site-scape_ventures/src/static/scss/sections/_thesis.scss) --
    .ss-c-section-what-we-look-for {
        padding: var(--ss-spacing-20) 0;
    }

    // -- section-criteria  (from site-scape_ventures/src/static/scss/sections/_thesis.scss) --
    .ss-c-section-criteria {
        background: var(--ss-color-gray-50);
        border-top: q(1) solid var(--ss-color-gray-200);
        border-bottom: q(1) solid var(--ss-color-gray-200);

        .ss-c-section-title {
            text-align: center;

        }
    }

    // -- section-subtitle  (from site-coreal_ai/src/static/scss/index.scss) --
    .ss-c-section-subtitle {
        color: var(--ss-color-gray-600);
        font-size: q(18);
    }

    // -- section__container  (from site-geoid_org/src/static/scss/layout/_section.scss) --
    .ss-c-section__container {
      max-width: #{q(1280)};
      margin: 0 auto;
      padding: 0 var(--ss-spacing-12);

      &--narrow {
        max-width: #{q(720)};
      }

      &--wide {
        max-width: 100%;
      }
    }

    // -- section__header-tag  (from site-geoid_org/src/static/scss/layout/_section.scss) --
    .ss-c-section__header-tag {
      display: inline-block;
      font-size: q(13);
      font-weight: 600;
      color: var(--ss-color-accent);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: var(--ss-spacing-6);
      padding: var(--ss-spacing-2) var(--ss-spacing-4);
      background: color-mix(in srgb, var(--ss-color-accent) 10%, transparent);
      border-radius: var(--ss-radius-md);
    }

    // -- section__divider  (from site-geoid_org/src/static/scss/layout/_section.scss) --
    .ss-c-section__divider {
      height: q(1);
      background: var(--ss-color-border);
      margin: var(--ss-spacing-24) 0;
    }

    // -- section--icon  (from site-inthecity_ai/src/static/scss/blocks/_icon-block.scss) --
    .ss-c-section--icon {
        display: flex;
        flex-direction: column;
        gap: q(40);
    }

    // -- section--paragraph  (from site-inthecity_ai/src/static/scss/blocks/_paragraph-block.scss) --
    .ss-c-section--paragraph {
        display: grid;
        grid-template-columns: 1fr;
        gap: q(32);
        align-items: center;

        // Three-column layout when image is present: text spans 2 columns,
        // image takes the remaining column.
        &[data-image-position] {
            grid-template-columns: repeat(3, 1fr);

            @media (max-width: q(768)) {
                grid-template-columns: 1fr;
                gap: q(24);
            }
        }
    }

    // -- section--dark  (from site-inthecity_ai/src/static/scss/components/_buttons.scss) --
    .ss-c-section--dark {
        .ss-c-btn {
            color: var(--ss-color-white);
            border-color: var(--ss-color-white);

            &:hover {
                background: var(--ss-color-white);
                color: var(--ss-color-primary);
            }
        }

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

            &:hover {
                background: var(--ss-color-accent);
                border-color: var(--ss-color-accent);
                color: var(--ss-color-white);
            }
        }

        .ss-c-btn--secondary {
            background: transparent;
            color: var(--ss-color-white);
            border-color: var(--ss-color-white);

            &:hover {
                background: var(--ss-color-white);
                color: var(--ss-color-primary);
            }
        }
    }

    // -- section--page-header  (from site-inthecity_ai/src/static/scss/layout/_tickets-page.scss) --
    .ss-c-section--page-header .ss-c-page-header {
        max-width: q(1024);
    }

    // -- section-hero  (from site-kockums_foundation/src/static/scss/sections/_hero.scss) --
    .ss-c-section-hero {
      padding: var(--ss-spacing-32) 0;
      background-color: var(--ss-color-white);

      // (stripped @include block)


      &__container {
        // (stripped @include)
      }

      &__title {
        font-family: Georgia, serif;
        font-size: var(--ss-font-size-5xl);
        font-weight: var(--ss-font-weight-normal);
        line-height: 1.1;
        color: var(--ss-color-primary);
        margin-bottom: var(--ss-spacing-6);
        letter-spacing: -0.02em;

        // (stripped @include block)

      }

      &__subtitle {
        font-family: Georgia, serif;
        font-size: var(--ss-font-size-lg);
        color: var(--ss-color-gray-500);
        max-width: q(700);
        line-height: var(--ss-leading-relaxed);

        // (stripped @include block)

      }
    }

    // -- section--light  (from site-lovelacelabs_ai/src/static/scss/app/_charts.scss) --
    .ss-c-section--light {
        background: unset;
    }

    // -- section_title  (from site-lovelacelabs_ai/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-section_title {
        // (stripped @include)
        text-transform: uppercase;
    }

    // -- section-container  (from site-matter_tech/src/static/scss/layout/_container.scss) --
    .ss-c-section-container {
        // (stripped @include)
    }

    // -- section-container--narrow  (from site-matter_tech/src/static/scss/layout/_container.scss) --
    .ss-c-section-container--narrow {
        // (stripped @include)
    }

    // -- section--inquiries  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-section--inquiries {
        padding-bottom: 0;
    }

    // -- section--map  (from site-matter_tech/src/static/scss/sections/_contact.scss) --
    .ss-c-section--map {
        padding: 0;
    }

    // -- section--gray  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-section--gray {
        background-color: var(--ss-color-gray-100);
    }

    // -- section--cream  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-section--cream {
        background-color: var(--ss-color-gray-50);
    }

    // -- section-intro  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-section-intro {
        font-size: unset;
        font-weight: unset;
        color: var(--ss-color-gray-600);
        line-height: var(--ss-leading-relaxed);
        margin: 0;
        max-width: q(560);

        // (stripped @include block)

    }

    // -- section--cta  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-section--cta {
        padding: var(--ss-spacing-32) 0;
        background-color: var(--ss-color-black);
        color: var(--ss-color-white);

        // (stripped @include block)

    }

    // -- section-full  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-section-full {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    // -- section-a  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-section-a {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
        background: var(--ss-color-white);
        overflow: hidden;
        margin-bottom: q(48);
    }

    // -- section-text  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-section-text {
        font-size: q(14);
        font-weight: 400;
        line-height: 1.5;
        display: flex;
        flex-direction: column;
        gap: q(5.6);
    }

    // -- section--systems  (from site-starling_studio/src/static/scss/app/_card_horizontal.scss) --
    .ss-c-section--systems{
        grid-template-rows: minmax(25vh, auto);
    }
}