// ==========================================================================
// Card Component
// BEM Methodology: .card (Block) → .card__element (Element) → .card--modifier (Modifier)
// ==========================================================================

@use '../base/variables' as *;

// --------------------------------------------------------------------------
// Block: .card
// --------------------------------------------------------------------------
.card {
    background-color: $color-light;
    border-radius: $radius-md;
    box-shadow: $shadow;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;

    &:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

// --------------------------------------------------------------------------
// Element: .card__image
// --------------------------------------------------------------------------
.card__image {
    width: 100%;
    height: 240px;
    overflow: hidden;
    background-color: $color-neutral;

    @media (max-width: $breakpoint-md) {
        height: 180px;
    }
}

// --------------------------------------------------------------------------
// Element: .card__img
// --------------------------------------------------------------------------
.card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

// --------------------------------------------------------------------------
// Element: .card__content
// --------------------------------------------------------------------------
.card__content {
    padding: $spacing-md;
    display: flex;
    flex-direction: column;
    flex: 1;

    @media (max-width: $breakpoint-md) {
        padding: $spacing-sm;
    }
}

// --------------------------------------------------------------------------
// Element: .card__title
// --------------------------------------------------------------------------
.card__title {
    font-family: $font-family-serif;
    font-size: $font-size-h4;
    color: $color-dark;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

// --------------------------------------------------------------------------
// Element: .card__description
// --------------------------------------------------------------------------
.card__description {
    font-family: $font-family-sans;
    font-size: $font-size-base;
    color: $color-primary-dark;
    line-height: 1.6;
    margin: 0 0 15px 0;
    flex: 1;
}

// --------------------------------------------------------------------------
// Element: .card__link
// --------------------------------------------------------------------------
.card__link {
    font-family: $font-family-sans;
    font-size: $font-size-base;
    font-weight: 500;
    color: $color-primary;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    margin-top: auto;

    &:hover {
        color: $color-primary-dark;
    }
}

// --------------------------------------------------------------------------
// Modifier: .card--project
// --------------------------------------------------------------------------
.card--project {
    // Project-specific overrides can be added here if needed
}

// --------------------------------------------------------------------------
// Modifier: .card--compact
// --------------------------------------------------------------------------
.card--compact {
    .card__title {
        font-size: $font-size-h4;
        // font-size: $font-size-h4 - 2px; // Slightly smaller title
    }

    .card__description {
        font-size: $font-size-base;
        // font-size: $font-size-base - 1px;
    }
}

// --------------------------------------------------------------------------
// Modifier: .card--horizontal
// --------------------------------------------------------------------------
.card--horizontal {
    @media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg) {
        flex-direction: row;

        .card__image {
            width: 40%;
            height: auto;
            min-height: 200px;
        }

        .card__content {
            width: 60%;
        }
    }
}

// --------------------------------------------------------------------------
// Modifier: .card--featured
// --------------------------------------------------------------------------
.card--featured {
    .card__image {
        height: 320px;

        @media (max-width: $breakpoint-md) {
            height: 240px;
        }
    }

    .card__title {
        font-size: $font-size-h3;
    }

    .card__description {
        font-size: $font-size-lg;
    }
}