// ==========================================================================
// PressZone Theme - Card Styles
// ==========================================================================
// Uses Sass variables with body.dark-mode & nesting pattern.
// ==========================================================================

.card,
.presszone-card {
    @include card-base;
    background-color: $light-bg-card;
    border: 1px solid $light-border-color;
    @include hover-lift;

    body.dark-mode & {
        background-color: $dark-bg-card;
        border-color: $dark-border-color;
    }
}

// Stat Cards
.stat-card {
    background: $light-bg-card;
    border: 1px solid $light-border-color;
    border-radius: 0.75rem;
    transition: all $transition-base;

    &:hover {
        border-color: $light-border-light;
        transform: translateY(-4px);
        box-shadow: $shadow-lg;
    }

    body.dark-mode & {
        background: $dark-bg-tertiary;
        border-color: $dark-border-color;

        &:hover {
            border-color: $dark-border-light;
        }
    }
}

.stat-icon {
    font-size: 1.5rem;
    color: $color-primary;
}

.stat-value {
    font-size: 3rem;
    font-weight: 700;
    color: $light-text-primary;
    line-height: 1;

    body.dark-mode & {
        color: $dark-text-primary;
    }
}

.stat-suffix {
    font-size: 1.5rem;
    font-weight: 400;
    color: $light-text-muted;

    body.dark-mode & {
        color: $dark-text-muted;
    }
}

.stat-label {
    font-size: 0.875rem;
}

// Testimonial Cards
.testimonial-card {
    background: $light-bg-card;
    border: 1px solid $light-border-color;
    border-radius: 1rem;
    transition: all $transition-base;

    &:hover {
        border-color: $light-border-light;
        box-shadow: $shadow-lg;
    }

    body.dark-mode & {
        background: $dark-bg-card;
        border-color: $dark-border-color;

        &:hover {
            border-color: $dark-border-light;
        }
    }
}

.testimonial-rating i {
    font-size: 0.875rem;
    margin-right: 0.125rem;

    @include rtl {
        margin-right: 0;
        margin-left: 0.125rem;
    }
}

.testimonial-text {
    color: $light-text-secondary;
    line-height: 1.7;
    font-style: italic;

    body.dark-mode & {
        color: $dark-text-secondary;
    }
}

.author-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $light-bg-tertiary;
    border-radius: 50%;
    color: $light-text-muted;
    font-size: 1.25rem;

    body.dark-mode & {
        background: $dark-bg-tertiary;
        color: $dark-text-muted;
    }
}

.author-name {
    color: $light-text-primary;

    body.dark-mode & {
        color: $dark-text-primary;
    }
}