// resources/scss/components/_cards.scss
.card {
    background-color: $bg-white;
    border-radius: 0.75rem;
    box-shadow: $shadow-md;
    overflow: hidden;
    @include transition-all;

    &-speaker {
        @extend .card;
        @include hover-lift;

        .card-image {
            aspect-ratio: 1;
            background-color: $bg-gray;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                @include transition-transform;
            }
        }

        &:hover .card-image img {
            transform: scale(1.05);
        }

        .card-content {
            padding: 1.5rem;

            .card-name {
                font-family: $font-helvetica;
                font-size: 1.25rem;
                font-weight: 700;
                color: $text-dark;
                margin-bottom: 0.5rem;
            }

            .card-role {
                color: $primary-blue;
                font-weight: 500;
                margin-bottom: 0.5rem;
            }

            .card-organization {
                color: $text-gray;
                font-size: 0.875rem;
                line-height: 1.5;
            }
        }
    }

    &-highlight {
        @extend .card;
        @include hover-lift;
        padding: 2rem;
        text-align: center;

        .card-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .card-title {
            font-family: $font-helvetica;
            font-size: 1.25rem;
            font-weight: 700;
            color: $text-dark;
            margin-bottom: 1rem;
        }

        .card-description {
            color: $text-gray;
            line-height: 1.6;
        }
    }
}