/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Testimonials component */
@layer components {
    .testimonials {
        padding-block: 6rem;
        background-color: var(--clr-slate-900);

        & .testimonials__container {
            max-width: var(--container-max-width);
            margin-inline: auto;
            padding-inline: var(--container-padding);
        }

        & .testimonials__title {
            font-size: var(--text-3xl);
            font-weight: 700;
            color: var(--color-white);
            text-align: center;
            margin-bottom: 4rem;

            @media (min-width: 768px) {
                font-size: var(--text-4xl);
            }
        }

        & .testimonials__grid {
            display: grid;
            gap: 2rem;

            @media (min-width: 768px) {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        & .testimonials__card {
            background-color: var(--clr-slate-950);
            padding: 2rem;
            border-radius: var(--radius-2xl);
            border: var(--border-thin) solid var(--clr-slate-800);
            position: relative;
            transition: border-color 0.3s ease;

            &:hover {
                border-color: var(--clr-slate-700);
            }
        }

        & .testimonials__quote-icon {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            color: var(--clr-slate-800);
        }

        & .testimonials__author {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        & .testimonials__avatar {
            width: 3rem;
            height: 3rem;
            border-radius: var(--radius-full);
            background-color: color-mix(in srgb, var(--color-primary), transparent 80%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-primary);
            font-weight: 700;
            border: var(--border-thin) solid color-mix(in srgb, var(--color-primary), transparent 80%);
        }

        & .testimonials__name {
            font-weight: 700;
            color: var(--color-white);
        }

        & .testimonials__role {
            font-size: var(--text-xs);
            color: var(--clr-slate-500);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        & .testimonials__text {
            color: var(--clr-slate-400);
            font-style: italic;
            line-height: 1.625;
            font-size: var(--text-sm);
        }
    }
}