/*
 * Services index page - widget CSS
 * Adattato da services-widget/services-index.css
 */

/* ============================================================
   HERO
   ============================================================ */

.services-hero {
    background-color: var(--color-light-cream);
    padding: 120px 0 80px;
}

.services-hero__container {
    max-width: var(--size-container-max);
    margin: 0 auto;
    padding: 0 80px;
}



.services-hero__title {
    font-family: var(--font-serif-display);
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: -0.03em;
    color: var(--color-dark-navy);
    margin: 0 0 24px;
}

.services-hero__lead {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 300;
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 540px;
    margin: 0;
}

/* ============================================================
   WIDGET WRAPPER
   ============================================================ */

.services-widget {
    background-color: var(--color-light-cream);
    padding: 80px 0 160px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.services-widget__container {
    max-width: var(--size-container-max);
    margin: 0 auto;
    padding: 0 80px;
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 80px;
}

/* ============================================================
   COLONNA SINISTRA - Indice
   ============================================================ */

.services-widget__index {
    position: relative;
    z-index: 2;
}

.services-widget__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(0, 10, 30, 0.1);
}

/* Attenua tutti quando uno è attivo */
.services-widget__list.has-active .services-widget__item,
.services-widget__list:hover .services-widget__item {
    opacity: 0.25;
    transform: translateX(0);
}

.services-widget__list .services-widget__item.is-active,
.services-widget__list .services-widget__item:hover {
    opacity: 1;
    transform: translateX(16px);
}

.services-widget__item {
    border-bottom: 1px solid rgba(0, 10, 30, 0.1);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-widget__link {
    display: flex;
    align-items: baseline;
    padding: 32px 0;
    text-decoration: none;
    color: var(--color-dark-navy);
    cursor: pointer;
}

.services-widget__num {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    opacity: 0.4;
    width: 48px;
    flex-shrink: 0;
}

.services-widget__title {
    font-family: var(--font-serif-display);
    font-size: clamp(22px, 2.2vw, 38px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    transition: color 0.3s ease;
}

.services-widget__cat-label {
    margin-left: auto;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-widget__item.is-active .services-widget__cat-label,
.services-widget__item:hover .services-widget__cat-label {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================================
   COLONNA DESTRA - Canvas anteprima
   ============================================================ */

.services-widget__preview {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
}

.services-widget__preview-canvas {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 850px;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.services-widget__preview-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: min(100%, 380px);
    height: fit-content;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 8px 48px rgba(0, 10, 30, 0.1);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    will-change: transform, opacity;
}

.services-widget__preview-card-img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.services-widget__preview-card-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.services-widget__preview-card-body {
    padding: 18px 22px 22px;
    border-top: 1px solid rgba(0, 10, 30, 0.08);
}

.services-widget__preview-card-title {
    font-family: var(--font-serif-display);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-dark-navy);
    margin: 0 0 8px;
}

.services-widget__preview-card-desc {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.services-widget__preview-default {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.services-widget.has-active .services-widget__preview-default,
.services-widget:has(.services-widget__item:hover) .services-widget__preview-default {
    opacity: 0;
}

.services-widget__preview-default-text {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(0, 10, 30, 0.2);
}

/* ============================================================
   :has() image activation - generato dinamicamente fino a 24
   ============================================================ */

.services-widget:has(.sw-item-1:hover) .sw-img-1,  .services-widget:has(.sw-item-1.is-active) .sw-img-1,
.services-widget:has(.sw-item-2:hover) .sw-img-2,  .services-widget:has(.sw-item-2.is-active) .sw-img-2,
.services-widget:has(.sw-item-3:hover) .sw-img-3,  .services-widget:has(.sw-item-3.is-active) .sw-img-3,
.services-widget:has(.sw-item-4:hover) .sw-img-4,  .services-widget:has(.sw-item-4.is-active) .sw-img-4,
.services-widget:has(.sw-item-5:hover) .sw-img-5,  .services-widget:has(.sw-item-5.is-active) .sw-img-5,
.services-widget:has(.sw-item-6:hover) .sw-img-6,  .services-widget:has(.sw-item-6.is-active) .sw-img-6,
.services-widget:has(.sw-item-7:hover) .sw-img-7,  .services-widget:has(.sw-item-7.is-active) .sw-img-7,
.services-widget:has(.sw-item-8:hover) .sw-img-8,  .services-widget:has(.sw-item-8.is-active) .sw-img-8,
.services-widget:has(.sw-item-9:hover) .sw-img-9,  .services-widget:has(.sw-item-9.is-active) .sw-img-9,
.services-widget:has(.sw-item-10:hover) .sw-img-10, .services-widget:has(.sw-item-10.is-active) .sw-img-10,
.services-widget:has(.sw-item-11:hover) .sw-img-11, .services-widget:has(.sw-item-11.is-active) .sw-img-11,
.services-widget:has(.sw-item-12:hover) .sw-img-12, .services-widget:has(.sw-item-12.is-active) .sw-img-12,
.services-widget:has(.sw-item-13:hover) .sw-img-13, .services-widget:has(.sw-item-13.is-active) .sw-img-13,
.services-widget:has(.sw-item-14:hover) .sw-img-14, .services-widget:has(.sw-item-14.is-active) .sw-img-14,
.services-widget:has(.sw-item-15:hover) .sw-img-15, .services-widget:has(.sw-item-15.is-active) .sw-img-15,
.services-widget:has(.sw-item-16:hover) .sw-img-16, .services-widget:has(.sw-item-16.is-active) .sw-img-16,
.services-widget:has(.sw-item-17:hover) .sw-img-17, .services-widget:has(.sw-item-17.is-active) .sw-img-17,
.services-widget:has(.sw-item-18:hover) .sw-img-18, .services-widget:has(.sw-item-18.is-active) .sw-img-18,
.services-widget:has(.sw-item-19:hover) .sw-img-19, .services-widget:has(.sw-item-19.is-active) .sw-img-19,
.services-widget:has(.sw-item-20:hover) .sw-img-20, .services-widget:has(.sw-item-20.is-active) .sw-img-20,
.services-widget:has(.sw-item-21:hover) .sw-img-21, .services-widget:has(.sw-item-21.is-active) .sw-img-21,
.services-widget:has(.sw-item-22:hover) .sw-img-22, .services-widget:has(.sw-item-22.is-active) .sw-img-22,
.services-widget:has(.sw-item-23:hover) .sw-img-23, .services-widget:has(.sw-item-23.is-active) .sw-img-23,
.services-widget:has(.sw-item-24:hover) .sw-img-24, .services-widget:has(.sw-item-24.is-active) .sw-img-24 {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ============================================================
   MOBILE IMAGE (inline, tablet/mobile)
   ============================================================ */

.services-widget__mobile-img {
    display: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1400px) {
    .services-hero__container,
    .services-widget__container {
        padding: 0 60px;
    }
}

@media (max-width: 1024px) {
    .services-hero {
        padding: 100px 0 60px;
    }

    .services-hero__container,
    .services-widget__container {
        padding: 0 40px;
    }

    .services-widget__container {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .services-widget__preview {
        display: none;
    }

    .services-widget__mobile-img {
        display: block;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
    }

    .services-widget__mobile-img img {
        width: 120px;
        height: auto;
        mix-blend-mode: multiply;
        padding: 16px 0 24px 48px;
    }

    .services-widget__item:hover .services-widget__mobile-img,
    .services-widget__item.is-active .services-widget__mobile-img {
        max-height: 200px;
        opacity: 1;
    }
}

@media (max-width: 767px) {
    .services-hero {
        padding: 80px 0 48px;
    }

    .services-hero__container,
    .services-widget__container {
        padding: 0 24px;
    }

    .services-widget {
        padding: 40px 0 80px;
    }

    .services-widget__link {
        padding: 24px 0;
        flex-wrap: wrap;
    }

    .services-widget__num {
        width: 32px;
        font-size: 0.625rem;
    }

    .services-widget__title {
        font-size: 1.5rem;
    }

    .services-widget__cat-label {
        display: none;
    }

    .services-widget__list .services-widget__item:hover {
        transform: translateX(8px);
    }

    .services-widget__mobile-img img {
        padding: 8px 0 16px 32px;
        width: 100px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-widget__item,
    .services-widget__preview-card,
    .services-widget__preview-canvas,
    .services-widget__cat-label,
    .services-widget__mobile-img {
        transition: none !important;
    }
}