/* ==========================================================
   ildivorzista — HERO
   Versione 1.1
========================================================== */

.idv-hero {
    position: relative;
    overflow: hidden;

    padding-top: clamp(28px, 3vw, 42px);
    padding-bottom: 32px;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgb(110 91 255 / 10%),
            transparent 32%
        ),
        radial-gradient(
            circle at 55% 70%,
            rgb(217 78 214 / 8%),
            transparent 30%
        ),
        var(--surface);
}

/* ==========================================================
   GRID
========================================================== */

.idv-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(420px, 1.05fr);

    align-items: center;

    gap: clamp(56px, 7vw, 104px);
}

/* ==========================================================
   CONTENT
========================================================== */

.idv-hero__content {
    position: relative;
    z-index: 2;
}

/* ==========================================================
   EYEBROW
========================================================== */

.idv-hero__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        8px 14px;

    margin:
        0 0 18px;

    color:
        var(--color-primary-dark);

    background:
        rgb(110 91 255 / 9%);

    border:
        1px solid rgb(110 91 255 / 14%);

    border-radius:
        999px;

    font-size:
        0.8125rem;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        0.03em;

    text-transform:
        uppercase;
}

/* ==========================================================
   TITLE
========================================================== */

.idv-hero__title {
    max-width: 780px;

    margin:
        0 0 18px;

    color:
        var(--text-title);

    font-size:
        clamp(3.1rem, 4.6vw, 4.8rem);

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.055em;
}

.idv-hero__title span {
    color:
        transparent;

    background:
        linear-gradient(
            110deg,
            var(--color-primary) 10%,
            var(--color-secondary) 90%
        );

    background-clip:
        text;

    -webkit-background-clip:
        text;
}

/* ==========================================================
   DESCRIPTION
========================================================== */

.idv-hero__description {
    max-width: 640px;

    margin:
        0;

    color:
        var(--text-body);

    font-size:
        clamp(1.0625rem, 1.5vw, 1.25rem);

    line-height:
        1.72;
}

/* ==========================================================
   ACTIONS
========================================================== */

.idv-hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    margin-top:
        36px;
}

/* ==========================================================
   BENEFITS
========================================================== */

.idv-hero__benefits {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        20px;

    padding:
        0;

    margin:
        36px 0 0;

    list-style:
        none;
}

.idv-hero__benefits li {
    display: flex;

    align-items:
        flex-start;

    gap:
        11px;

    color:
        var(--text-body);

    font-size:
        0.875rem;

    line-height:
        1.45;
}

.idv-hero__benefits strong {
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--text-title);

    font-size:
        0.9375rem;
}

.idv-hero__benefit-icon {
    display:
        inline-flex;

    width:
        26px;

    height:
        26px;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 26px;

    color:
        var(--color-primary-dark);

    background:
        rgb(110 91 255 / 9%);

    border:
        1px solid rgb(110 91 255 / 18%);

    border-radius:
        50%;

    font-weight:
        800;
}

/* ==========================================================
   EXPERIENCE
========================================================== */

.idv-hero__experience {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    max-width:
        620px;

    margin:
        34px 0 0;

    color:
        var(--text-body);

    font-size:
        0.9375rem;

    font-weight:
        600;

    line-height:
        1.5;
}

.idv-hero__experience::before {
    display:
        block;

    width:
        36px;

    height:
        2px;

    flex:
        0 0 36px;

    content:
        "";

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );
}

/* ==========================================================
   MEDIA
========================================================== */

.idv-hero__media {
    position: relative;

    min-height:
        clamp(540px, 40vw, 650px);

    padding-right: 24px;
    
    transform:
        translateY(-12px);
}

@media (min-width: 1051px) {
    .idv-hero__media::before,
    .idv-hero__media-badge {
        transform: translateY(-12px);
    }

    .idv-hero__media img {
        transform: translateY(-12px);
    }

    .idv-hero__media:hover img {
        transform:
            translateY(-12px);
    }
}

.idv-hero__media::before {
    position: absolute;

    inset:
        -30px 12px -50px 52px;

    z-index: 0;

    content: "";

    background:
        linear-gradient(
            135deg,
            rgb(110 91 255 / 14%),
            rgb(217 78 214 / 10%)
        );

    border-radius:
        48% 20% 45% 28%;

    filter:
        blur(4px);
}

.idv-hero__media img {
    position: absolute;

    top: 0;
    right: 24px;
    bottom: 0;
    left: 0;

    z-index: 1;

    display: block;

    width: calc(100% - 24px);
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius:
        42% 8% 36% 16%;

    box-shadow:
        0 24px 56px rgb(16 24 40 / 16%);

    transition:
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 500ms ease;
}

/* ==========================================================
   MEDIA BADGE
========================================================== */

.idv-hero__media-badge {
    position:
        absolute;

    right:
        -18px;

    bottom:
        42px;

    z-index:
        2;

    display:
        flex;

    max-width:
        300px;

    align-items:
        center;

    gap:
        13px;

    padding:
        17px 19px;

    background:
      rgb(255 255 255 / 88%);

    border:
        1px solid rgb(255 255 255 / 75%);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-md);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(12px);
}

.idv-hero__media-badge > span {
    display:
        inline-flex;

    width:
        38px;

    height:
        38px;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 38px;

    color:
        var(--white);

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    border-radius:
        50%;

    font-weight:
        800;
}

.idv-hero__media-badge strong,
.idv-hero__media-badge small {
    display:
        block;
}

.idv-hero__media-badge strong {
    color:
        var(--text-title);

    font-size:
        0.9375rem;

    line-height:
        1.35;
}

.idv-hero__media-badge small {
    margin-top:
        2px;

    color:
        var(--text-body);

    font-size:
        0.8125rem;

    line-height:
        1.35;
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1050px) {
    .idv-hero__grid {
        grid-template-columns:
            1fr;
    }

    .idv-hero__content {
        max-width:
            820px;
    }

    .idv-hero__media {
        min-height:
            580px;

        transform:
            none;
    }

    .idv-hero__media-badge {
        right:
            20px;
    }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 720px) {
    .idv-hero {
        padding-top:
            48px;

        padding-bottom:
            64px;
    }

    .idv-hero__title {
        font-size:
            clamp(2.7rem, 13vw, 4.2rem);

        line-height:
            1.02;
    }

    .idv-hero__description {
        font-size:
            1.0625rem;
    }

    .idv-hero__benefits {
        grid-template-columns:
            1fr;

        gap:
            16px;
    }

    .idv-hero__actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .idv-hero__actions .idv-button {
        width:
            100%;
    }

    .idv-hero__media {
        min-height:
            460px;
    }

    .idv-hero__media img {
        border-radius:
            var(--radius-xl);
    }

    .idv-hero__media::before {
        display:
            none;
    }

    .idv-hero__media-badge {
        right:
            14px;

        bottom:
            14px;

        left:
            14px;

        max-width:
            none;
    }
}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {
    .idv-hero__eyebrow {
        font-size:
            0.72rem;
    }

    .idv-hero__title {
        font-size:
            clamp(2.4rem, 12vw, 3.2rem);
    }

    .idv-hero__media {
        min-height:
            380px;
    }

    .idv-hero__media-badge {
        align-items:
            flex-start;

        padding:
            14px;
    }
}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {
    .idv-hero__media::before {
        filter:
            none;
    }
}