////
///
/// Portfolio Site Styles
/// ===========================================================================
///
/// Classes the scapepress sites use next to the native `portfolio` module,
/// moved here from the removed `32-utilities/_scapepress-parity.scss` shim.
/// Forwarded from `31-modules/_index.scss` ahead of every module rather than
/// from this module's index, so at equal specificity the native rules win.
///
/// 25 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.Portfolio
/// @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 {
    // -- portfolio-card  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card {
        background: var(--ss-color-white);
        border: q(1) solid var(--ss-color-gray-200);
        border-radius: 0;
        overflow: hidden;
        transition: all var(--ss-duration-300) ease;

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

    // -- portfolio-card--featured  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card--featured {
        @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
            grid-column: span 2;
        }
    }

    // -- portfolio-card-inner  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-inner {
        padding: var(--ss-spacing-6);

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "sm")) {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: var(--ss-spacing-6);
            align-items: start;
        }
    }

    // -- portfolio-card-logo  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-logo {
        margin-bottom: var(--ss-spacing-6);

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "sm")) {
            margin-bottom: 0;
        }
    }

    // -- portfolio-card-title  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-title {
        font-size: var(--ss-font-size-xl);
        margin-bottom: var(--ss-spacing-3);
    }

    // -- portfolio-card-description  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-description {
        font-size: var(--ss-font-size-sm);
        margin-bottom: var(--ss-spacing-4);
    }

    // -- portfolio-card-tags  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ss-spacing-2);
        margin-bottom: var(--ss-spacing-6);
    }

    // -- portfolio-card-title-link  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-title-link {
        color: inherit;

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

    // -- portfolio-card-links  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--ss-spacing-4) var(--ss-spacing-6);
    }

    // -- portfolio-card-link  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-portfolio-card-link {
        display: inline-flex;
        align-items: center;
        gap: var(--ss-spacing-2);
        font-size: var(--ss-font-size-sm);
        font-weight: var(--ss-font-weight-medium);
        color: var(--ss-color-primary);

        svg {
            width: q(16);
            height: q(16);
            transition: transform var(--ss-duration-200) ease;
        }

        &:hover svg {
            transform: translate(q(4), q(-4));
        }

        &--profile {
            color: var(--ss-color-primary);

            &:hover svg {
                transform: translateX(q(4));
            }
        }
    }

    // -- portfolio-grid  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--ss-spacing-6);

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    // -- portfolio-list  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-list {
        display: flex;
        flex-direction: column;
        gap: var(--ss-spacing-8);
    }

    // -- portfolio-item  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item {
        background: var(--ss-color-white);
        border: q(1) solid var(--ss-color-gray-200);
        border-radius: var(--ss-radius-none);
        overflow: hidden;
    }

    // -- portfolio-item-inner  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-inner {
        display: grid;
        grid-template-columns: 1fr;

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "lg")) {
            grid-template-columns: q(300) 1fr;
        }
    }

    // -- portfolio-item-media  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-media {
        padding: var(--ss-spacing-8);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--ss-color-gray-50);

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

    // -- portfolio-item-content  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-content {
        padding: var(--ss-spacing-8);

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

    // -- portfolio-item-meta  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-meta {
        display: flex;
        align-items: center;
        gap: var(--ss-spacing-4);
        margin-bottom: var(--ss-spacing-4);
    }

    // -- portfolio-item-category  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-category {
        font-size: var(--ss-font-size-xs);
        font-weight: var(--ss-font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ss-color-primary);
    }

    // -- portfolio-item-status  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-status {
        font-size: var(--ss-font-size-xs);
        padding: var(--ss-spacing-1) var(--ss-spacing-2);
        background: var(--ss-color-success);
        color: var(--ss-color-white);
        border-radius: var(--ss-radius-none);
    }

    // -- portfolio-item-title  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-title {
        font-size: var(--ss-font-size-4xl);
        margin-bottom: var(--ss-spacing-4);
    }

    // -- portfolio-item-description  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-description {
        margin-bottom: var(--ss-spacing-6);
    }

    // -- portfolio-item-tags  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ss-spacing-2);
        margin-bottom: var(--ss-spacing-8);
    }

    // -- portfolio-item-actions  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-portfolio-item-actions {
        // Button styling
    }

    // -- folio  (from site-scape_agency/src/static/scss/_base.scss) --
    .ss-c-folio{
        // font-size: q(16);
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap:q(16);
        padding-top:q(16);
        padding-bottom: q(16);
        border-bottom:none;
    }

    // -- folio-counter-mobile  (from site-scape_agency/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-folio-counter-mobile {
        display: none;
    }
}