////
///
/// Container 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.
///
/// 43 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.Container
/// @author Scape Press
/// @link https://scape.style
/// @since 0.6.0
/// @access public
///
////

@use "../../01-core/external" as *;

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

@layer ss.components {
    // -- container  (from site-scape_ventures/src/static/scss/layout/_container.scss) --
    .ss-c-container {
        width: 100%;
        max-width: q(1200);
        margin: 0 auto;
        padding: 0 var(--ss-spacing-6);
    }

    // -- main-content  (from site-scape_ventures/src/static/scss/layout/_container.scss) --
    .ss-c-main-content {
        // Handled by hero padding-top
    }

    // -- container--narrow  (from site-scape_ventures/src/static/scss/sections/_legal.scss) --
    .ss-c-container--narrow {
        max-width: q(800);
    }

    // -- block  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-block { display: block; }

    // -- grid  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --

    // -- items-center  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-items-center { align-items: center; }

    // -- max-w-lg  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-max-w-lg { max-width: q(640); }

    // -- max-w-xl  (from site-scape_ventures/src/static/scss/utilities/_utilities.scss) --
    .ss-c-max-w-xl { max-width: q(800); }

    // -- main_content  (from site-scape_foundation/src/static/scss/app/_frame.scss) --
    .ss-c-main_content {
        padding: 0;
    }

    // -- main_content_section  (from site-scape_foundation/src/static/scss/app/_frame.scss) --
    .ss-c-main_content_section {
        margin: q(40) 0;

        // Sections rendered inside main_content_section must not introduce
        // their own horizontal padding -- the parent column already provides
        // the gutter via the page-level frame.
        .ss-c-section,
        .ss-c-grid__frame--1,
        .ss-c-frame--center__area--center_center {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }

    // -- fullscreen  (from site-scape_foundation/src/static/scss/app/_fullscreen.scss) --
    .ss-c-fullscreen {
        // (stripped @include)
        // (stripped @include)
        // (stripped @include)
        position: relative;
        height: calc(100vh - q(44));
        width: 100%;
        overflow: hidden;
        // margin: q(8) q(-20);
        text-align: center;
        // padding: q(20);

        div {
            width: 100%;
            height: 100%;
        }
    }

    // -- grid__frame--1  (from site-scape_foundation/src/static/scss/components/_filter.scss) --
    .ss-c-grid__frame--1.reset--sides > .ss-c-grid__frame--6:last-child {
        hr.divider--thin {
            display: none;
        }
    }

    // -- grid__frame--6  (from site-scape_foundation/src/static/scss/layout/_grid.scss) --

    // -- fill  (from site-scape_foundation/src/static/scss/utilities/_color.scss) --
    .ss-c-fill {
        &--text {
            color: var(--color_fill_primary) !important;
        }

        &--bg {
            background: var(--color_fill_primary) !important;
            background-color: var(--color_fill_primary) !important;
        }
    }

    // -- spread  (from site-scape_agency/src/static/scss/_base.scss) --
    .ss-c-spread{
        overflow:hidden;
        scrollbar-width: none;
        display: grid;
        margin-bottom: calc(4 * q(16));
        margin-top:0;
        scroll-margin-top:calc(6 * q(16));
        scroll-snap-align: start;
        height: calc(100vh - 11 * q(16));
        width: 100%;
        gap:q(16);

        &:first-of-type{
            margin-top: q(128);
        }
        &:last-child{
            margin-bottom:calc(6 * q(16));
        }

        &.ss-c-single {
            grid-template-columns: 1fr;
        }

        &.ss-c-split {
            grid-template-columns: 1fr 1fr;
        }

        &.ss-c-major {
            grid-template-columns: 2fr 1fr;
        }

        .ss-c-text{
            padding-right:q(16);
            margin-top: auto;
            max-height: 100%;
            overflow-y: auto;
            scrollbar-width: none;
        }
    }

    // -- main_padding  (from site-scape_agency/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-main_padding {
        padding: 0 q(20);
    }

    // -- grid__row--100  (from site-scape_agency/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-grid__row--100 {
        grid-template-rows: 100%;
    }

    // -- container-sm  (from site-blockfoundation_io/src/static/scss/layout/_container.scss) --
    .ss-c-container-sm {
        // (stripped @include)
        max-width: q(768);
    }

    // -- container-lg  (from site-blockfoundation_io/src/static/scss/layout/_container.scss) --
    .ss-c-container-lg {
        // (stripped @include)
        max-width: q(1024);
    }

    // -- items-start  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-items-start { align-items: flex-start; }

    // -- items-end  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-items-end { align-items: flex-end; }

    // -- items-stretch  (from site-blockfoundation_io/src/static/scss/utilities/_display.scss) --
    .ss-c-items-stretch { align-items: stretch; }

    // -- grid__24  (from site-demosphere_nl/src/static/scss/robin/_robins.scss) --
    .ss-c-grid__24 {
        display: grid;
        grid-template-columns: repeat(24, 1fr);
        grid-row-gap: q(320);
    }

    // -- columns  (from site-geoid_org/src/static/scss/layout/_grid.scss) --
    .ss-c-columns {
      display: grid;
      gap: var(--ss-spacing-12);

      &--2 {
        grid-template-columns: repeat(2, 1fr);

        // (stripped @include block)

      }

      &--3 {
        grid-template-columns: repeat(3, 1fr);

        // (stripped @include block)


        // (stripped @include block)

      }

      &--1-2 {
        grid-template-columns: 1fr 2fr;

        // (stripped @include block)

      }

      &--2-1 {
        grid-template-columns: 2fr 1fr;

        // (stripped @include block)

      }
    }

    // -- column-item  (from site-geoid_org/src/static/scss/layout/_grid.scss) --
    .ss-c-column-item {
      &__title {
        font-size: q(18);
        margin-bottom: var(--ss-spacing-4);
        color: var(--ss-color-text);
        font-weight: 600;
      }

      p {
        font-size: q(15);
        line-height: 1.7;
      }
    }

    // -- row  (from site-geoid_org/src/static/scss/layout/_grid.scss) --
    .ss-c-row {
      display: flex;
      gap: var(--ss-spacing-12);

      &--gap-sm {
        gap: var(--ss-spacing-4);
      }

      &--gap-md {
        gap: var(--ss-spacing-6);
      }

      &--gap-xl {
        gap: var(--ss-spacing-24);
      }

      &--center {
        align-items: center;
      }

      &--start {
        align-items: flex-start;
      }

      &--end {
        align-items: flex-end;
      }

      &--wrap {
        flex-wrap: wrap;
      }

      // (stripped @include block)

    }

    // dropped `.ss-c-stack` (site-geoid_org/src/static/scss/layout/_grid.scss): geoid_org column stack: use the `ss-f-stack` flow primitive; `.ss-c-stack` is the overlapping-stack module

    // -- aspect-box  (from site-geoid_org/src/static/scss/layout/_grid.scss) --
    .ss-c-aspect-box {
        // (stripped @include)
      &--video {
        // (stripped @include)
      }

      &--square {
        // (stripped @include)
      }

      &--portrait {
        // (stripped @include)
      }

      &--16-10 {
        // (stripped @include)
      }

      img, iframe, video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    // -- callout-box  (from site-kockums_foundation/src/static/scss/components/_bibliography.scss) --
    .ss-c-callout-box {
      background-color: var(--ss-color-white);
      border: q(1) solid var(--ss-color-gray-200);
      border-radius: 0;
      padding: var(--ss-spacing-6);

      .ss-c-section--light & {
        background-color: var(--ss-color-gray-100);
      }

      &__title {
        font-family: Georgia, serif;
        font-size: var(--ss-font-size-xl);
        font-weight: var(--ss-font-weight-medium);
        color: var(--ss-color-primary);
        margin-bottom: var(--ss-spacing-2);
      }

      &__text {
        font-size: var(--ss-font-size-base);
        color: var(--ss-color-gray-500);
        line-height: var(--ss-leading-relaxed);
        margin-bottom: var(--ss-spacing-4);
      }

      .ss-c-btn {
        display: inline-flex;
        align-items: center;
      }
    }

    // -- max-w-prose  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-max-w-prose {
      max-width: 65ch;
    }

    // -- max-w-sm  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-max-w-sm {
      max-width: q(400);
    }

    // -- max-w-md  (from site-kockums_foundation/src/static/scss/utilities/_helpers.scss) --
    .ss-c-max-w-md {
      max-width: q(600);
    }

    // -- container-fluid  (from site-kockums_io/src/static/scss/layout/_container.scss) --
    .ss-c-container-fluid {
        width: 100%;
        padding-left: var(--ss-spacing-6);
        padding-right: var(--ss-spacing-6);
    }

    // -- grid--2  (from site-kockums_io/src/static/scss/layout/_grid.scss) --
    .ss-c-grid--2 {

        // (stripped @include block)

    }

    // -- grid--3  (from site-kockums_io/src/static/scss/layout/_grid.scss) --
    .ss-c-grid--3 {

        // (stripped @include block)


        // (stripped @include block)

    }

    // -- grid--4  (from site-kockums_io/src/static/scss/layout/_grid.scss) --
    .ss-c-grid--4 {

        // (stripped @include block)


        // (stripped @include block)

    }

    // -- col  (from site-kockums_io/src/static/scss/layout/_grid.scss) --
    .ss-c-col {
        flex: 1;
        padding-left: var(--ss-spacing-4);
        padding-right: var(--ss-spacing-4);
    }

    // -- grid__frame--clean--2  (from site-lovelacelabs_ai/src/static/scss/app/_neumorphism.scss) --

    // -- max-w-narrow  (from site-mesmera_io/src/static/scss/app/_grid.scss) --
    .ss-c-max-w-narrow {
        max-width: q(600);
    }

    // -- tips-title  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-tips-title {
        font-size: var(--ss-font-size-sm);
        font-weight: 600;
        color: var(--ss-color-gray-700);
        margin-bottom: unset;
    }

    // -- tips-list  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-tips-list {
        li {
            font-size: var(--ss-font-size-sm);
            color: var(--ss-color-gray-600);
            padding: var(--ss-spacing-1) 0;

            code {
                font-size: 0.85em;
            }
        }
    }

    // -- grid-container  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-grid-container {
        max-width: q(1200);
        margin: 0 auto;
        padding: 0 var(--ss-spacing-6);
    }

    // -- main-grid  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-main-grid {
        display: flex;
        flex-direction: column;
        max-width: q(1200);
        margin: 0 auto;
        border-left: q(1) solid var(--ss-color-border);
        border-right: q(1) solid var(--ss-color-border);
        min-height: 100vh;
        position: relative;
    }

    // -- main  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-main {
        width: 100%;
    }
}