////
///
/// Team 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.
///
/// 40 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.Team
/// @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 {
    // -- team-card  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card {
        background: var(--ss-color-white);
        border: q(1) solid var(--ss-color-gray-200);
        overflow: hidden;
        transition: border-color var(--ss-duration-200) ease;

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

    // -- team-card__image  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__image {
        aspect-ratio: 1;
        background: var(--ss-color-gray-100);
        overflow: hidden;
    }

    // -- team-card__photo  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    // -- team-card__avatar  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__avatar {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--ss-color-primary);
    }

    // -- team-card__initials  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__initials {
        font-family: var(--ss-font-family-display);
        font-size: q(48);
        font-weight: var(--ss-font-weight-semibold);
        color: var(--ss-color-white);
    }

    // -- team-card__content  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__content {
        padding: q(24);
    }

    // -- team-card__name  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__name {
        font-size: q(20);
        font-weight: var(--ss-font-weight-semibold);
        margin-bottom: q(4);
    }

    // -- team-card__title  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__title {
        font-size: var(--ss-font-size-sm);
        color: var(--ss-color-primary);
        font-weight: var(--ss-font-weight-medium);
        margin-bottom: q(12);
    }

    // -- team-card__bio  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__bio {
        font-size: var(--ss-font-size-sm);
        color: var(--ss-color-gray-600);
        margin-bottom: q(16);
    }

    // -- team-card__social  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__social {
        display: flex;
        gap: q(12);
    }

    // -- team-card__social-link  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: q(32);
        height: q(32);
        color: var(--ss-color-gray-600);
        transition: color var(--ss-duration-200) ease;

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

        .ss-c-icon {
            width: q(18);
            height: q(18);
            fill: currentColor;
        }
    }

    // -- team-grid  (from site-scape_ventures/src/static/scss/sections/_team.scss) --
    .ss-c-team-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: q(32);

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

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

    // -- team-member  (from site-scape_ventures/src/static/scss/sections/_team.scss) --
    .ss-c-team-member {
        text-align: center;
    }

    // -- team-member-image  (from site-scape_ventures/src/static/scss/sections/_team.scss) --
    .ss-c-team-member-image {
        margin-bottom: var(--ss-spacing-6);

        .ss-c-image-placeholder {
            width: q(200);
            height: q(200);
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--ss-color-gray-100);
            border-radius: 50%;

            svg {
                width: q(80);
                height: q(80);
            }
        }
    }

    // -- team-member-name  (from site-scape_ventures/src/static/scss/sections/_team.scss) --
    .ss-c-team-member-name {
        font-size: var(--ss-font-size-xl);
        margin-bottom: var(--ss-spacing-1);
    }

    // -- team-member-role  (from site-scape_ventures/src/static/scss/sections/_team.scss) --
    .ss-c-team-member-role {
        font-size: var(--ss-font-size-sm);
        color: var(--ss-color-gray-500);
    }

    // -- team-member-card  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-team-member-card {
      text-align: center;

      &__image {
        width: 100%;
        aspect-ratio: 1;
        border-radius: var(--ss-radius-lg);
        object-fit: cover;
        margin-bottom: var(--ss-spacing-6);
      }

      &__name {
        font-size: q(18);
        font-weight: 600;
        margin-bottom: var(--ss-spacing-2);
        color: var(--ss-color-text);
      }

      &__role {
        font-size: q(14);
        color: var(--ss-color-accent);
        margin-bottom: var(--ss-spacing-4);
      }

      &__bio {
        font-size: q(14);
        color: var(--ss-color-text-secondary);
      }
    }

    // -- team-card__role  (from site-matter_tech/src/static/scss/components/_cards.scss) --
    .ss-c-team-card__role {
        font-size: var(--ss-font-size-sm);
        color: var(--ss-color-gray-500);
        margin: 0;
    }

    // -- team-cta  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-team-cta {
        margin-top: unset;
        text-align: center;

        p {
            margin-bottom: unset;
            color: var(--ss-color-gray-600);
        }
    }

    // -- positions-list  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-positions-list {
        display: flex;
        flex-direction: column;
    }

    // -- position-item  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-position-item {
        padding: var(--ss-spacing-10) 0;
        border-bottom: q(1) solid var(--ss-color-border);

        &:first-child {
            border-top: q(1) solid var(--ss-color-border);
        }
    }

    // -- position-info  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-position-info {
        margin-bottom: unset;
    }

    // -- position-title  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-position-title {
        font-family: Georgia, serif;
        font-size: var(--ss-font-size-xl);
        font-weight: var(--ss-font-weight-light);
        margin-bottom: unset;

        // (stripped @include block)

    }

    // -- position-location  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-position-location {
        // (stripped @include)
        margin: 0;
    }

    // -- position-description  (from site-matter_tech/src/static/scss/sections/_section.scss) --
    .ss-c-position-description {
        font-size: var(--ss-font-size-sm);
        color: var(--ss-color-gray-600);
        line-height: var(--ss-leading-relaxed);
        margin: 0;
        max-width: q(640);
    }

    // -- portrait-ring  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-ring {
        position: absolute;
        border-radius: 50%;
        border: q(1) solid color-mix(in srgb, var(--ss-color-gray-900) 10%, transparent);

        &-1 {
            inset: 0;
            animation: rotate calc(var(--ss-duration-1000) * 40) linear infinite;
        }

        &-2 {
            inset: 12%;
            border-color: unset;
            animation: rotate calc(var(--ss-duration-1000) * 30) linear infinite reverse;
        }

        &-3 {
            inset: 24%;
            border-color: unset;
            animation: rotate calc(var(--ss-duration-1000) * 20) linear infinite;
        }
    }

    // -- portrait-face  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-face {
        position: absolute;
        inset: 30%;

        svg {
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 0 q(40) color-mix(in srgb, var(--ss-color-accent) 20%, transparent));
        }
    }

    // -- portrait-pulse  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-pulse {
        position: absolute;
        inset: 35%;
        border-radius: 50%;
        background: unset;
        animation: pulse calc(var(--ss-duration-1000) * 4) ease-in-out infinite;
    }

    // -- team-section  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-team-section {
        padding: var(--ss-spacing-32) 0;
        background: var(--ss-color-white);
    }

    // -- team-disciplines  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-team-disciplines {
        display: grid;
        gap: unset;

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

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

    // -- portrait-grid  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: unset;

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

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

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

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

    // -- portrait-card  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-card {
        background: var(--ss-color-white);
        border-radius: var(--ss-radius-none);
        overflow: hidden;
        box-shadow: 0 q(1) q(3) color-mix(in srgb, var(--ss-color-gray-900) 8%, transparent);

        &:hover {
            box-shadow: 0 q(20) q(60) color-mix(in srgb, var(--ss-color-gray-900) 15%, transparent);

            .ss-c-portrait-media {
                .ss-c-portrait-placeholder,
                .ss-c-portrait-video,
                .ss-c-portrait-image-src {
                    transform: scale(1.05);
                }

                .ss-c-portrait-overlay {
                    opacity: 1;
                }
            }
        }
    }

    // -- portrait-media  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-media {
        position: relative;
        aspect-ratio: 3 / 4;
        background: linear-gradient(135deg, var(--ss-color-gray-100) 0%, var(--ss-color-gray-200) 100%);
        overflow: hidden;

        .ss-c-portrait-placeholder {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform var(--ss-duration-500) var(--ss-ease-out);

            svg {
                width: 50%;
                height: auto;
                color: var(--ss-color-gray-300);
            }
        }

        .ss-c-portrait-video,
        .ss-c-portrait-image-src {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--ss-duration-500) var(--ss-ease-out);
        }

        .ss-c-portrait-video {
            background: var(--ss-color-gray-900);
        }

        .ss-c-portrait-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--ss-color-gray-900) 80%, transparent) 100%);
            display: flex;
            align-items: flex-end;
            padding: unset;
            opacity: 0;
            transition: opacity var(--ss-duration-300) ease;
        }
    }

    // -- portrait-traits  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-traits {
        display: flex;
        flex-wrap: wrap;
        gap: unset;
    }

    // -- portrait-info  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-info {
        padding: unset;
    }

    // -- portrait-name  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-name {
        font-size: var(--ss-font-size-base);
        font-weight: var(--ss-font-weight-semibold);
        color: var(--ss-color-gray-900);
        margin-bottom: unset;
    }

    // -- portrait-role  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-role {
        display: block;
        font-size: var(--ss-font-size-sm);
        font-weight: var(--ss-font-weight-medium);
        color: unset;
        margin-bottom: unset;
    }

    // -- portrait-specialty  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-specialty {
        display: block;
        font-size: var(--ss-font-size-xs);
        color: var(--ss-color-gray-500);
        margin-bottom: unset;
    }

    // -- portrait-description  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-portrait-description {
        font-size: var(--ss-font-size-sm);
        color: var(--ss-color-gray-600);
        line-height: var(--ss-leading-relaxed);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    // -- biography  (from site-vianen_com/src/static/scss/sections/_biography.scss) --
    .ss-c-biography {
      .ss-c-bio-content {
        max-width: q(800);

        p {
          font-size: q(17.6);
          line-height: 1.9;
          color: var(--ss-color-gray-500);
          margin-bottom: unset;
        }
      }
    }
}