/* ============================================================================
   Components: Unified Card System
   Centralized styling for every card surface across the site
   ========================================================================= */

/* Shared surface styling */
:is(.benefit-card,
    .project-card-modern,
    .testimonial-card-modern,
    .team-member-modern) {
    background: var(--card-surface-bg);
    border: 1px solid var(--card-surface-border);
    border-radius: var(--card-surface-radius);
    padding: var(--card-surface-padding-block) var(--card-surface-padding-inline);
    backdrop-filter: blur(var(--card-surface-blur));
    -webkit-backdrop-filter: blur(var(--card-surface-blur));
    box-shadow: var(--card-surface-shadow);
    transition: var(--card-surface-transition);
    position: relative;
    overflow: hidden;
}

:is(.benefit-card,
    .project-card-modern,
    .testimonial-card-modern,
    .team-member-modern):hover {
    background: var(--card-surface-bg-hover);
    border-color: var(--card-surface-border-hover);
    box-shadow: var(--card-surface-shadow-hover);
    transform: none;
}

/* Shared heading typography */
:is(.project-card-modern__title,
    .testimonial-info-modern h4,
    .team-name-modern) {
    font-size: var(--card-heading-size);
    font-weight: var(--card-heading-weight);
    color: var(--color-text-primary);
    line-height: 1.35;
    letter-spacing: -0.02em;
}

/* Shared body copy */
:is(.project-card-modern__description,
    .testimonial-project-modern,
    .team-description-modern) {
    font-size: var(--card-body-size);
    line-height: var(--card-body-line-height);
    color: var(--color-text-secondary);
}

.benefit-card__text {
    font-size: 1.125rem;  /* Same as solution-offer text */
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

:is(.project-card-modern__features li,
    .project-card-modern__list li) {
    font-size: var(--card-body-size);
    line-height: var(--card-body-line-height);
    color: var(--color-text-secondary);
}

.project-card-modern__subtitle,
.team-role-modern {
    font-size: var(--card-subheading-size);
    line-height: 1.4;
}

/* Shared icon sizing */
:is(.project-card-modern__icon,
    .benefit-card__icon) {
    width: var(--card-icon-size);
    height: var(--card-icon-size);
    border-radius: var(--card-icon-radius);
    background: var(--card-icon-bg);
    color: var(--card-icon-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: var(--card-surface-transition);
}

:is(.project-card-modern:hover .project-card-modern__icon,
    .benefit-card:hover .benefit-card__icon) {
    border-color: var(--card-surface-border-hover);
    box-shadow: 0 0 22px rgba(79, 142, 247, 0.3);
}

:is(.project-card-modern__icon i,
    .project-card-modern__icon svg,
    .benefit-card__icon i,
    .benefit-card__icon svg) {
    width: calc(var(--card-icon-size) * 0.55);
    height: calc(var(--card-icon-size) * 0.55);
    stroke-width: 1.6;
}

/* Metric / highlight text */
.benefit-card__metric {
    font-size: var(--card-highlight-size);
    font-weight: var(--card-highlight-weight);
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

/* Benefit cards: compact icon + heading row */
.benefit-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
}

.benefit-card__icon {
    display: none; /* Hide icons completely */
}

.benefit-card:hover .benefit-card__icon {
    box-shadow: none;
}

.benefit-card__metric {
    font-size: clamp(1.65rem, 2.2vw, 2.15rem);
    font-weight: 700;
    color: var(--color-brand-cyan); /* Same color as icons were */
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.benefit-card__text {
    flex-basis: 100%;
    margin-top: 0.2rem;
}

@media (max-width: 768px) {
    :is(.project-card-modern,
        .testimonial-card-modern,
        .team-member-modern) {
        padding: 1.5rem 1.25rem;
        border-radius: calc(var(--card-surface-radius) - 2px);
    }

    /* Mobile: Remove card styling for benefits */
    .benefit-card {
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(148, 163, 184, 0.15);
        border-radius: 0;
        padding: 1rem 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }

    .benefit-card:last-child {
        border-bottom: none;
    }

    .benefit-card:hover {
        background: transparent;
        border-bottom: 1px solid rgba(148, 163, 184, 0.15);
        box-shadow: none;
    }

    .benefit-card:last-child:hover {
        border-bottom: none;
    }

    :is(.project-card-modern__title,
        .testimonial-info-modern h4,
        .team-name-modern) {
        font-size: 1.2rem;
    }

    :is(.project-card-modern__description,
        .testimonial-project-modern,
        .team-description-modern) {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .benefit-card__text {
        font-size: 1rem;  /* Same as solution-offer mobile */
        line-height: 1.6;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.95);
    }

    .benefit-card__metric {
        font-size: 1.8rem;
    }

    :is(.project-card-modern__icon) {
        width: calc(var(--card-icon-size) * 0.85);
        height: calc(var(--card-icon-size) * 0.85);
    }

    .benefit-card__icon {
        display: none; /* Hide icons on mobile too */
    }

    .benefit-card__metric {
        margin-bottom: 0.35rem;
        font-size: clamp(1.75rem, 4.5vw, 2rem);
        font-weight: 700;
        color: var(--color-brand-cyan);
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin: 0;
    }

    .benefit-card__text {
        margin-top: 0;
        font-size: 1rem;  /* Same as solution-offer mobile */
        line-height: 1.6;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.95);
    }

}