////
///
/// Brand Site Styles
/// ===========================================================================
///
/// Classes the scapepress sites use next to the native `brand` 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.
///
/// 14 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.Brand
/// @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 {
    // -- logo-image  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-logo-image {
        display: block;
        width: q(80);
        height: q(80);
        object-fit: contain;
    }

    // -- logo-placeholder  (from site-scape_ventures/src/static/scss/components/_cards.scss) --
    .ss-c-logo-placeholder {
        width: q(80);
        height: q(80);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--ss-color-primary);
        color: var(--ss-color-white);
        font-family: var(--ss-font-family-display);
        font-size: var(--ss-font-size-3xl);
        font-weight: var(--ss-font-weight-bold);
        border-radius: var(--ss-radius-none);
    }

    // -- logo  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-logo {
        display: flex;
        align-items: center;
        gap: var(--ss-spacing-3);
        font-family: var(--ss-font-family-display);
        font-weight: var(--ss-font-weight-semibold);
        font-size: var(--ss-font-size-lg);
        color: var(--ss-color-primary);

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

    // -- logo-icon  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-logo-icon {
        width: q(40);
        height: q(40);
        color: var(--ss-color-primary);
    }

    // -- logo-text  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-logo-text {
        font-weight: 700;

        @media (max-width: map.get(breakpoints.$ss-breakpoints, "sm")) {
            display: none;
        }
    }

    // -- logo-large  (from site-scape_ventures/src/static/scss/sections/_portfolio.scss) --
    .ss-c-logo-large {
        width: q(120);
        height: q(120);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--ss-color-primary);
        color: var(--ss-color-white);
        font-family: var(--ss-font-family-display);
        font-size: var(--ss-font-size-5xl);
        font-weight: var(--ss-font-weight-bold);
        border-radius: var(--ss-radius-none);
    }

    // -- logo-card  (from site-blockfoundation_io/src/static/scss/components/_cards.scss) --
    .ss-c-logo-card {
        background-color: var(--ss-color-background);
        padding: var(--ss-spacing-8);
        text-align: left;
        transition: all var(--ss-duration-200) ease;
        transform: translateY(0);

        // 4:3 ratio card
        aspect-ratio: 4 / 3;
        display: flex;
        flex-direction: column;

        &:hover {
            background-color: var(--ss-color-surface-hover);
            transform: translateY(q(-4));
        }

        &__logo {
            width: q(48);
            height: q(48);
            margin-bottom: var(--ss-spacing-4);
        // (stripped @include)
            transition: transform var(--ss-duration-200) ease;
            order: 1;

            svg {
                width: q(40);
                height: q(40);
                color: var(--ss-color-text-primary);
            }
        }

        &:hover &__logo {
            transform: scale(1.1);
        }

        &__title {
            font-size: var(--ss-font-size-lg);
            font-weight: var(--ss-font-weight-medium);
            margin-bottom: var(--ss-spacing-3);
            color: var(--ss-color-text-primary);
            text-transform: uppercase;
            letter-spacing: 0.02em;
            min-height: 3.5em;
            order: 2;
        }

        &__text {
            color: var(--ss-color-secondary);
            font-size: var(--ss-font-size-sm);
            line-height: var(--ss-leading-relaxed);
            margin-bottom: var(--ss-spacing-4);
            order: 3;
            flex-grow: 1;
        }

        &__link {
            display: inline-flex;
            align-items: center;
            gap: var(--ss-spacing-2);
            font-size: var(--ss-font-size-sm);
            color: var(--ss-color-text-muted);
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            transition: color var(--ss-duration-200) ease;
            order: 4;
            margin-top: auto;

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

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

    // -- brand-link  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-brand-link {
        display: flex;
        align-items: center;
        gap: unset;
        color: var(--ss-color-gray-900);

        &:hover {
            color: var(--ss-color-gray-900);

            .ss-c-brand-icon {
                color: unset;
            }
        }
    }

    // -- brand-icon  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-brand-icon {
        width: q(32);
        height: q(32);
        color: unset;
        transition: color var(--ss-duration-150) ease;
    }

    // -- brand-text  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-brand-text {
        display: flex;
        flex-direction: column;
    }

    // -- brand-name  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-brand-name {
        font-size: var(--ss-font-size-lg);
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.2;
    }

    // -- brand-tagline  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-brand-tagline {
        font-size: var(--ss-font-size-xs);
        color: var(--ss-color-gray-500);
        letter-spacing: 0.02em;
    }

    // -- brand-wrapper  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-brand-wrapper {
        align-self: stretch;
        display: flex;
        align-items: center;
        gap: q(16);
        font-size: q(24);
        text-transform: uppercase;
        justify-content: start;
        margin: auto 0;
        color: var(--ss-color-black);
    }

    // -- brand-logo  (from site-starling_studio/src/static/scss/_old.scss) --
    .ss-c-brand-logo {
        width: q(24);
        height: q(24);
    }
}