/* ─── 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)));
        position: relative;
        width: 100%;
        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 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
        background-image: var(--_hero-bg-image);
}
/* Semi-transparent overlay for image background */
.rtds-hero__overlay {
    pointer-events: none;
    position: absolute;
    inset: var(--spacing-0);
    z-index: 0;
        background-color: var(--_hero-overlay-bg);
}
/* ─── Inner ─────────────────────────────────────────────────── */
.rtds-hero__inner {
    position: relative;
    z-index: 10;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-10);
    display: flex;
}
/* ─── Content block ─────────────────────────────────────────── */
.rtds-hero__content {
    width: 100%;
    flex-direction: column;
    display: flex;
    gap: var(--spacing-8);
}
/* Centered: content items center */
:where(.rtds-hero--centered) .rtds-hero__content {
    text-align: center;
    align-items: center;
}
/* ─── Title ─────────────────────────────────────────────────── */
.rtds-hero__title {
    font-family: var(--fontfamily-sans), sans-serif;
    line-height: 1.25;
    font-weight: 700;
        font-size: var(--fontsize-text-42px);
        color: var(--_hero-title-color);
}
/* ─── Description ───────────────────────────────────────────── */
.rtds-hero__description {
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-lg);
    line-height: 1.75rem;
    font-weight: 700;
        color: var(--_hero-description-color);
}
/* ─── Search ────────────────────────────────────────────────── */
.rtds-hero__search {
    position: relative;
    width: 100%;
        z-index: 10;
}
/* Dropdown risultati allineato a sinistra (non centrato) */
.rtds-hero__search .autocomplete__menu {
    text-align: left;
}
.rtds-hero__search .autocomplete__option {
    justify-content: flex-start;
    text-align: left;
}
/* ─── Buttons ───────────────────────────────────────────────── */
.rtds-hero__buttons {
    flex-wrap: wrap;
    gap: var(--spacing-3);
    display: flex;
}
/* ─── Right image ───────────────────────────────────────────── */
body.rtds-hero__image .rtds-primary-navigation__backdrop,
    :root.rtds-hero__image .rtds-primary-navigation__backdrop {
    position: fixed;
    right: var(--spacing-0);
    bottom: var(--spacing-0);
    left: var(--spacing-0);
    z-index: 10;
}
@media (min-width: 1024px) {
    body.rtds-hero__image .rtds-primary-navigation__backdrop,
    :root.rtds-hero__image .rtds-primary-navigation__backdrop {
        display: none;
    }
}
body.rtds-hero__image .rtds-primary-navigation__backdrop,
    :root.rtds-hero__image .rtds-primary-navigation__backdrop {
    position: fixed;
    right: var(--spacing-0);
    bottom: var(--spacing-0);
    left: var(--spacing-0);
    z-index: 10;
}
@media (min-width: 1024px) {
    body.rtds-hero__image .rtds-primary-navigation__backdrop,
    :root.rtds-hero__image .rtds-primary-navigation__backdrop {
        display: none;
    }
}
.rtds-hero__image {
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    flex: none;
}
.rtds-hero__image img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
/* ─── Desktop layout ─────────────────────────────────────────── */
@media (min-width: 1024px) {
        :where(.rtds-hero--has-image) .rtds-hero__inner {
        flex-direction: row;
        gap: var(--spacing-16);
    }

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

        .rtds-hero__image {
            flex: 0 1 var(--_hero-image-basis);
            aspect-ratio: 1 / 1;
        }
    }
/* ─── Additional content container ──────────────────────────── */
.rtds-hero__additional {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-8);
    border-radius: 0.5rem;
    border-width: 1px;
    font-family: var(--fontfamily-sans), sans-serif;
    font-size: var(--fontsize-text-base);
        background-color: var(--_hero-additional-bg);
        border-color: var(--_hero-additional-border);
        color: var(--_hero-additional-text);
}