/* =========================================================
   LM IMPIANTI — HOME ABOUT / TEAM
   Editorial team directory
   ========================================================= */

.home-about {
    --about-ink: #171719;
    --about-muted: #6b706c;
    --about-soft: #969c97;
    --about-line: #dedfdb;
    --about-accent: #6100fe;
    --about-bg: #f9faf9;

    --about-ease: cubic-bezier(.22, 1, .36, 1);

    position: relative;
    width: 100%;

    padding:
        clamp(100px, 9vw, 150px)
        clamp(24px, 3.2vw, 58px)
        clamp(95px, 8vw, 135px);

    overflow: hidden;

    background: var(--about-bg);
    color: var(--about-ink);
}

.home-about,
.home-about * {
    box-sizing: border-box;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.home-about__container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.home-about__header {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 900px;

    margin:
        0 auto
        clamp(75px, 7vw, 115px);

    text-align: center;
}


/* Eyebrow */

.home-about__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin: 0 0 26px;

    font-family:
        "IBM Plex Mono",
        "Geist Mono",
        monospace;

    font-size: 10px;
    font-weight: 500;

    line-height: 1.4;

    letter-spacing: .09em;

    text-transform: uppercase;

    color: var(--about-muted);
}

.home-about__eyebrow-dot {
    width: 5px;
    height: 5px;

    flex: 0 0 auto;

    background: var(--about-accent);
}


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

.home-about__title {
    max-width: 880px;

    margin: 0;

    font-family:
        "Instrument Sans",
        sans-serif;

    font-size: clamp(
        52px,
        6vw,
        92px
    );

    font-weight: 500;

    line-height: .98;

    letter-spacing: -.072em;

    text-wrap: balance;

    color: var(--about-ink);
}


/* =========================================================
   LEAD
   ========================================================= */

.home-about__lead {
    max-width: 610px;

    margin:
        30px auto
        0;

    font-size: clamp(
        15px,
        1.2vw,
        18px
    );

    font-weight: 400;

    line-height: 1.65;

    letter-spacing: -.015em;

    color: var(--about-muted);

    text-wrap: pretty;
}


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

.home-about__team {
    display: grid;

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

    width: 100%;

    border-top:
        1px solid var(--about-line);
}


/* =========================================================
   PERSON
   ========================================================= */

.home-about__person {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding:
        21px
        20px
        0;

    border-right:
        1px solid var(--about-line);

    transition:
        background-color .45s ease;
}

.home-about__person:first-child {
    padding-left: 0;
}

.home-about__person:last-child {
    padding-right: 0;
    border-right: 0;
}


/* =========================================================
   NUMBER
   ========================================================= */

.home-about__number {
    display: block;

    margin-bottom: 18px;

    font-family:
        "IBM Plex Mono",
        "Geist Mono",
        monospace;

    font-size: 11px;
    font-weight: 400;

    letter-spacing: -.025em;

    color: var(--about-soft);

    transition:
        color .35s ease;
}


/* =========================================================
   AVATAR
   ========================================================= */

.home-about__avatar {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #e6e8e5;
}


/*
 * Riga viola sottilissima che compare
 * sopra la fotografia.
 */

.home-about__avatar::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background: var(--about-accent);

    transform: scaleX(0);

    transform-origin: left center;

    transition:
        transform .65s var(--about-ease);

    z-index: 2;
}


.home-about__avatar img {
    display: block;

    width: 100%;
    height: 100%;

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

    filter:
        grayscale(1)
        saturate(.7)
        contrast(1.03);

    transform: scale(1.025);

    transition:
        transform .9s var(--about-ease),
        filter .65s ease;
}


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

.home-about__person-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding:
        23px
        0
        24px;
}


/* =========================================================
   PERSON HEADING
   ========================================================= */

.home-about__person-heading {
    margin-bottom: 17px;
}


/* Nome */

.home-about__name {
    margin: 0 0 7px;

    font-family:
        "Instrument Sans",
        sans-serif;

    font-size: clamp(
        24px,
        2vw,
        31px
    );

    font-weight: 600;

    line-height: 1;

    letter-spacing: -.055em;

    color: var(--about-ink);

    transition:
        color .35s ease,
        transform .5s var(--about-ease);
}


/* Ruolo */

.home-about__role {
    margin: 0;

    font-family:
        "IBM Plex Mono",
        "Geist Mono",
        monospace;

    font-size: 10px;
    font-weight: 500;

    line-height: 1.4;

    letter-spacing: .045em;

    text-transform: uppercase;

    color: var(--about-soft);
}


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

.home-about__person-text {
    max-width: 30ch;

    margin:
        0
        0
        28px;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.62;

    letter-spacing: -.012em;

    color: var(--about-muted);
}


/* =========================================================
   CONTACT LINK
   ========================================================= */

.home-about__contact {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    width: 100%;

    margin-top: auto;

    padding:
        13px
        0;

    border-top:
        1px solid var(--about-line);

    border-bottom:
        1px solid var(--about-line);

    font-family:
        "IBM Plex Mono",
        "Geist Mono",
        monospace;

    font-size: 10px;
    font-weight: 500;

    line-height: 1.4;

    letter-spacing: .035em;

    text-transform: uppercase;

    text-decoration: none;

    color: var(--about-ink);

    transition:
        color .3s ease,
        border-color .3s ease;
}

.home-about__contact-arrow {
    display: inline-block;

    font-family:
        "Instrument Sans",
        sans-serif;

    font-size: 17px;
    line-height: 1;

    color: var(--about-soft);

    transition:
        color .3s ease,
        transform .45s var(--about-ease);
}


/* =========================================================
   HOVER
   ========================================================= */


/* Desktop: interazione con il mouse */
@media (hover: hover) and (pointer: fine) {
    .home-about__person:hover .home-about__avatar img {
        filter: grayscale(0) saturate(.92) contrast(1.02);
        transform: scale(1.065);
    }

    .home-about__person:hover .home-about__avatar::after {
        transform: scaleX(1);
    }
}

/* Mobile: interazione durante lo scroll */
@media (max-width: 700px) {
    .home-about__person.is-in-view .home-about__avatar img {
        filter: grayscale(0) saturate(.92) contrast(1.02);
        transform: scale(1.065);
    }

    .home-about__person.is-in-view .home-about__avatar::after {
        transform: scaleX(1);
    }

    .home-about__person.is-in-view .home-about__number,
    .home-about__person.is-in-view .home-about__name {
        color: var(--about-accent);
    }
}



.home-about__person:hover
.home-about__number {
    color: var(--about-accent);
}


.home-about__person:hover
.home-about__name {
    color: var(--about-accent);

    transform: translateX(3px);
}


.home-about__contact:hover {
    color: var(--about-accent);

    border-color: var(--about-accent);
}


.home-about__contact:hover
.home-about__contact-arrow {
    color: var(--about-accent);

    transform: translate(3px, -3px);
}


/* =========================================================
   SECTION FOOTER
   ========================================================= */

.home-about__footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top:
        clamp(50px, 5vw, 76px);

    padding-top: 20px;

    border-top:
        1px solid var(--about-line);
}


/* Label */

.home-about__footer-label {
    margin: 0;

    font-family:
        "IBM Plex Mono",
        "Geist Mono",
        monospace;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: .065em;

    color: var(--about-soft);
}


/* Azienda link */

.home-about__company-link {
    display: inline-flex;
    align-items: center;

    gap: 20px;

    padding-bottom: 5px;

    border-bottom:
        1px solid var(--about-ink);

    font-family:
        "IBM Plex Mono",
        "Geist Mono",
        monospace;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: .04em;

    text-decoration: none;

    color: var(--about-ink);

    transition:
        color .3s ease,
        gap .5s var(--about-ease),
        border-color .3s ease;
}


.home-about__company-link:hover {
    gap: 28px;

    color: var(--about-accent);

    border-color: var(--about-accent);
}


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

@media (max-width: 1050px) {

    .home-about__header {
        margin-bottom: 70px;
    }

    .home-about__team {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .home-about__person {
        padding:
            22px
            20px
            40px;

        border-bottom:
            1px solid var(--about-line);
    }

    .home-about__person:nth-child(2n) {
        border-right: 0;
    }

    .home-about__person:nth-child(3),
    .home-about__person:nth-child(4) {
        padding-top: 40px;
    }

    .home-about__person:first-child,
    .home-about__person:nth-child(3) {
        padding-left: 0;
    }

    .home-about__person:nth-child(2),
    .home-about__person:last-child {
        padding-right: 0;
    }

}


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

@media (max-width: 700px) {

    .home-about {
        padding:
            82px
            22px
            85px;
    }

    .home-about__header {
        align-items: flex-start;

        margin-bottom: 55px;

        text-align: left;
    }

    .home-about__title {
        font-size: clamp(
            44px,
            12vw,
            62px
        );

        line-height: .98;
    }

    .home-about__lead {
        margin:
            24px
            0
            0;
    }

    .home-about__team {
        display: block;

        border-top:
            1px solid var(--about-line);
    }

    .home-about__person,
    .home-about__person:first-child,
    .home-about__person:nth-child(2),
    .home-about__person:nth-child(3),
    .home-about__person:nth-child(4),
    .home-about__person:last-child {
        padding:
            22px
            0
            42px;

        border-right: 0;

        border-bottom:
            1px solid var(--about-line);
    }

    .home-about__avatar {
        aspect-ratio: 5 / 4;
    }

    .home-about__name {
        font-size: 27px;
    }

    .home-about__person-text {
        max-width: 42ch;
    }

    .home-about__footer {
        align-items: flex-start;
        flex-direction: column;

        margin-top: 45px;
    }

}


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

@media (max-width: 390px) {

    .home-about {
        padding-inline: 18px;
    }

    .home-about__title {
        font-size: 42px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.home-about__contact:focus-visible,
.home-about__company-link:focus-visible {
    outline:
        2px solid var(--about-accent);

    outline-offset: 5px;
}


@media (prefers-reduced-motion: reduce) {

    .home-about__avatar img,
    .home-about__avatar::after,
    .home-about__name,
    .home-about__contact,
    .home-about__contact-arrow,
    .home-about__company-link {
        transition: none !important;
    }

}