/*
 * 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 Features component */
@layer components {
    .features {
        position: relative;
        padding-block: var(--space-xl);
        background: var(--color-dark, #0a0a0a);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

        & .features__inner {
            display: flex;
            flex-direction: column;
            gap: var(--space-2xl);
        }

        & .features__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-m);
        }

        & .features__card {
            padding: var(--space-l);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 60%), rgba(255, 255, 255, 0.01);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            
            &:hover {
                background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 60%), rgba(255, 255, 255, 0.02);
            }
        }

        & .features__card-title {
            font-size: var(--size-step-1);
            color: var(--color-white);
            font-weight: 600;
            margin-bottom: var(--space-s);
        }

        & .features__card-text {
            font-size: var(--size-step-0);
            color: var(--color-gray-400);
            line-height: 1.5;
        }

        & .features__section-title {
            font-size: var(--size-step-2);
            color: var(--color-white);
            margin-bottom: var(--space-m);
            font-weight: 600;
        }

        & .features__list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--space-s);
            list-style: none;
            padding: 0;
            margin: 0;
        }

        & .features__list-item {
            font-size: var(--size-step-0);
            color: var(--color-gray-300);
            position: relative;
            padding-left: var(--space-m);
            
            &::before {
                content: "›";
                position: absolute;
                left: 0;
                color: var(--color-primary, #00f0ff);
                font-weight: bold;
                text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
            }
        }
    }
}