/*
 * 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 Homepage component */
@layer components {
    .homepage {
        padding-block: var(--space-xl);
        min-height: 80vh;
        background-image: radial-gradient(at 0% 0%, hsla(210, 100%, 95%, 1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(250, 100%, 95%, 1) 0, transparent 50%);

        & .homepage__hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-l);
            margin-bottom: var(--space-xl);
            padding-inline: var(--space-s);
            width: 100%;
            text-align: center;
        }

        & .homepage__title {
            font-size: var(--size-step-3);
            font-weight: 700;
            line-height: 1.1;
            max-width: 40ch;
        }

        & .homepage__description {
            font-size: var(--size-step-1);
            color: var(--color-text);
            opacity: 0.8;
            max-width: 65ch;
            text-wrap: balance;

            & strong {
                color: var(--color-text);
                font-weight: 600;
                opacity: 1;

                &:nth-of-type(1) { color: var(--color-blue-primary); }
                &:nth-of-type(2) { color: var(--color-orange-primary); }
                &:nth-of-type(3) { color: var(--color-purple-primary); }
                &:nth-of-type(4) { color: var(--color-green-primary); }
                &:nth-of-type(5) { color: var(--color-sky-primary); }
            }
        }

    }
}

@media (prefers-color-scheme: dark) {
    .homepage {
        background-image: radial-gradient(at 0% 0%, hsla(210, 100%, 10%, 1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(250, 100%, 10%, 1) 0, transparent 50%);

        & .homepage__description {
            opacity: 0.7;

            & strong {
                opacity: 1;
            }
        }
    }
}