@layer components {

    /* ─── Base + Custom Properties ──────────────────────────────── */
    .rtds-hero {
        /* Variabili private (uso interno) ← pubbliche ← default semantico ← primitivo */
        --_hero-bg:                var(--hero-bg,                transparent);
        --_hero-gradient:          var(--hero-gradient,          none);
        --_hero-bg-image:          var(--hero-bg-image,          none);
        --_hero-overlay-bg:        var(--hero-overlay-bg,        rgba(255, 255, 255, 0.5));
        --_hero-image-basis:       var(--hero-image-basis,       382px);
        --_hero-title-color:       var(--hero-title-color,       var(--color-content-01,     var(--color-neutral-900)));
        --_hero-description-color: var(--hero-description-color, var(--color-content-03,     var(--color-neutral-800)));
        --_hero-additional-bg:     var(--hero-additional-bg,     var(--color-background-03,  var(--color-neutral-300)));
        --_hero-additional-border: var(--hero-additional-border, var(--color-border-gray-02, var(--color-neutral-400)));
        --_hero-additional-text:   var(--hero-additional-text,   var(--color-content-01,     var(--color-neutral-900)));

        @apply rtds-relative rtds-w-full;
        overflow-x: hidden;
        background-color: var(--_hero-bg);
        background-image: var(--_hero-gradient);
    }

    /* ─── Backgrounds (override variabili pubbliche) ─────────────── */
    .rtds-hero--gradient-bg {
        --hero-gradient: var(--gradient-04);
    }

    .rtds-hero--light-bg {
        --hero-bg: var(--color-background-01, var(--color-neutral-50));
    }

    .rtds-hero--dark-bg {
        --hero-bg:                var(--color-background-09,  var(--color-secondary-800));
        --hero-title-color:       var(--color-content-inverse, var(--color-neutral-50));
        --hero-description-color: var(--color-content-inverse, var(--color-neutral-50));
    }

    .rtds-hero--image-bg {
        @apply rtds-bg-cover rtds-bg-center rtds-bg-no-repeat;
        background-image: var(--_hero-bg-image);
    }

    /* Semi-transparent overlay for image background */
    .rtds-hero__overlay {
        @apply rtds-absolute rtds-inset-0 rtds-pointer-events-none rtds-z-0;
        background-color: var(--_hero-overlay-bg);
    }

    /* ─── Inner ─────────────────────────────────────────────────── */
    .rtds-hero__inner {
        @apply rtds-relative rtds-z-10 rtds-flex rtds-flex-col rtds-items-start rtds-gap-10;
    }

    /* ─── Content block ─────────────────────────────────────────── */
    .rtds-hero__content {
        @apply rtds-flex rtds-flex-col rtds-gap-8 rtds-w-full;
    }

    /* Centered: content items center */
    :where(.rtds-hero--centered) .rtds-hero__content {
        @apply rtds-items-center rtds-text-center;
    }

    /* ─── Title ─────────────────────────────────────────────────── */
    .rtds-hero__title {
        @apply rtds-font-sans rtds-font-bold rtds-leading-tight;
        font-size: var(--fontsize-text-42px);
        color: var(--_hero-title-color);
    }

    /* ─── Description ───────────────────────────────────────────── */
    .rtds-hero__description {
        @apply rtds-font-sans rtds-font-bold rtds-text-lg rtds-leading-7;
        color: var(--_hero-description-color);
    }

    /* ─── Search ────────────────────────────────────────────────── */
    .rtds-hero__search {
        @apply rtds-relative rtds-w-full;
        z-index: 10;
    }

    /* Dropdown risultati allineato a sinistra (non centrato) */
    .rtds-hero__search .autocomplete__menu {
        @apply rtds-text-left;
    }

    .rtds-hero__search .autocomplete__option {
        @apply rtds-text-left rtds-justify-start;
    }

    /* ─── Buttons ───────────────────────────────────────────────── */
    .rtds-hero__buttons {
        @apply rtds-flex rtds-flex-wrap rtds-gap-3;
    }

    /* ─── Right image ───────────────────────────────────────────── */
    .rtds-hero__image {
        @apply rtds-flex-none rtds-overflow-hidden rtds-rounded-lg rtds-w-full rtds-aspect-video;
    }

    .rtds-hero__image img {
        @apply rtds-w-full rtds-h-full rtds-object-cover rtds-object-center;
    }

    /* ─── Desktop layout ─────────────────────────────────────────── */
    @screen lg {
        :where(.rtds-hero--has-image) .rtds-hero__inner {
            @apply rtds-flex-row rtds-gap-16;
        }

        :where(.rtds-hero--has-image) .rtds-hero__content {
            @apply rtds-flex-1;
        }

        .rtds-hero__image {
            flex: 0 1 var(--_hero-image-basis);
            aspect-ratio: 1 / 1;
        }
    }

    /* ─── Additional content container ──────────────────────────── */
    .rtds-hero__additional {
        @apply rtds-flex rtds-items-center rtds-justify-center;
        @apply rtds-border rtds-rounded-lg rtds-p-8;
        @apply rtds-font-sans rtds-text-base;
        background-color: var(--_hero-additional-bg);
        border-color: var(--_hero-additional-border);
        color: var(--_hero-additional-text);
    }

}