/*
 * 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__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__cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: var(--space-lg);
            margin-bottom: var(--space-2xl);
        }
        
        & .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);
        }
    }
}