/*
 * 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 Hero component */
@layer components {
    .hero {
        position: relative;
        padding-block: var(--space-2xl) var(--space-xl);
        background: var(--color-surface);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

        & .hero__inner {
            display: flex;
            flex-direction: column;
            gap: var(--space-l);
        }

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

        & .hero__title {
            font-size: var(--size-step-5);
            line-height: 1.1;
            color: var(--color-white, #EDEDED);
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        & .hero__client {
            font-size: var(--size-step-0);
            color: var(--color-gray-400);
            
            & span {
                color: var(--color-primary, #00f0ff);
                font-weight: 500;
                text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
            }
        }

        & .hero__description {
            font-size: var(--size-step-1);
            color: var(--color-gray-300, #888888);
            max-width: 65ch;
            line-height: 1.6;
        }

        & .hero__tags {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-xs);
        }

        & .hero__tag {
            font-size: var(--size-step--1);
            padding: var(--space-2xs) var(--space-s);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 6px;
            color: var(--color-gray-200);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
            font-family: monospace;
        }

        & .hero__media {
            margin-top: var(--space-m);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.02);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        & .hero__image {
            width: 100%;
            height: auto;
            max-height: 70vh;
            display: block;
            object-fit: cover;
            opacity: 0.9;
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: transparent;
            font-size: 0;

            &:hover {
                opacity: 1;
            }
        }

        &[data-variant="dark"] {
            background: var(--color-dark);
            color: var(--color-white);
        }
    }
}