////
///
/// Chart Site Styles
/// ===========================================================================
///
/// Classes the scapepress sites use next to the native `chart` 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.
///
/// 2 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.Chart
/// @author Scape Press
/// @link https://scape.style
/// @since 0.6.0
/// @access public
///
////

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

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

@layer ss.components {
    // -- charts-grid  (from site-lovelacelabs_ai/src/static/scss/app/_charts.scss) --
    .ss-c-charts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(q(380), 1fr));
        gap: q(32);
        padding: q(32);
        max-width: q(1400);
        margin: 0 auto;
    }

    // -- chart-card  (from site-lovelacelabs_ai/src/static/scss/app/_charts.scss) --
    .ss-c-chart-card {
        background: var(--ss-color-white);
        border-radius: q(12);
        overflow: hidden;
        box-shadow:
            0 q(4) q(6) color-mix(in srgb, var(--ss-color-black) 5%, transparent),
            0 q(10) q(15) color-mix(in srgb, var(--ss-color-black) 3%, transparent);
        transition: all var(--ss-duration-300) ease;

        &:hover {
            transform: translateY(q(-4));
            box-shadow:
                0 q(10) q(20) color-mix(in srgb, var(--ss-color-black) 8%, transparent),
                0 q(20) q(40) color-mix(in srgb, var(--ss-color-black) 5%, transparent);
        }

        &__canvas {
            width: 100%;
            aspect-ratio: 4 / 3;
            background: var(--ss-color-white);

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

        &__info {
            padding: q(16) q(24);
            border-top: q(1) solid var(--ss-color-border);
            background: unset;
        }

        &__title {
            font-size: q(16);
            font-weight: 600;
            color: unset;
            margin-bottom: q(4);
        }

        &__description {
            font-size: q(12.8);
            color: unset;
        }
    }
}