/*
 * 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 {
        display: flex;
        flex-direction: column;
        flex-grow: 1;

        & .homepage__notice {
            background: rgba(230, 57, 70, 0.12);
            border-bottom: 1px solid rgba(230, 57, 70, 0.3);
            padding-block: var(--space-md);
            color: var(--color-text-main);
            font-size: 0.95rem;
            text-align: center;
        }

        & .homepage__cards-section {
            padding-block: var(--space-3xl);
        }

        & .homepage__container {
            max-width: 1200px;
            margin: 0 auto;
            padding-inline: var(--space-md);
            width: 100%;
        }

        & .homepage__section-title {
            text-align: center;
            font-size: clamp(2rem, 3vw, 2.5rem);
            margin-bottom: var(--space-2xl);
            color: var(--color-text-heading);
            letter-spacing: -0.5px;
        }

        & .homepage__filter {
            position: relative;
            margin-bottom: var(--space-3xl);
            padding: var(--space-xl);
            background: var(--color-bg-surface-glass);
            backdrop-filter: blur(var(--glass-blur));
            border: 1px solid var(--color-border-glass);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-premium);
            z-index: 100;

            & form {
                display: grid;
                grid-template-columns: 1fr;
                gap: var(--space-lg);

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

            & div:has(label) {
                display: flex;
                flex-direction: column;
                gap: var(--space-xs);
            }

            & label {
                display: block;
                font-family: var(--font-family-heading);
                font-weight: 600;
                text-transform: uppercase;
                font-size: 0.75rem;
                letter-spacing: 0.1em;
                color: var(--color-accent-blue);
                margin-left: 2px;
            }
        }


        & .homepage__empty {
            grid-column: 1 / -1;
            text-align: center;
            color: var(--color-text-main);
            padding-block: var(--space-xl);
            background: var(--color-bg-surface-glass);
            border: 1px dashed var(--color-border-glass);
            border-radius: var(--radius-md);
        }

        & .homepage__actions {
            display: flex;
            justify-content: center;
            margin-top: var(--space-xl);
        }
    }
}