/* ==========================================================================
   Servizi Page - Additional Styles
   ========================================================================== */

/* Responsive fixes for services grid */
@media (max-width: 768px) {
    .service-block__content ul.check-list {
        margin-bottom: var(--space-4);
    }

    /* Email management block responsive */
    .card > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Aziende section cards */
    #aziende > .container > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* PEC steps */
    #amministratori div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }
}

/* Service navigation sticky behavior */
@media (min-width: 969px) {
    .section:has(nav[aria-label="Navigazione servizi"]) {
        position: sticky;
        top: 80px;
        z-index: var(--z-sticky);
        background: var(--color-white);
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }
}

/* Enhanced card hover effects for services */
#ecommerce .card,
#attivita .card,
#amministratori .card,
#aziende .card {
    position: relative;
    overflow: hidden;
}

#ecommerce .card::before,
#attivita .card::before,
#aziende .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary-400), var(--color-primary-600));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

#ecommerce .card:hover::before,
#attivita .card:hover::before,
#aziende .card:hover::before {
    transform: scaleX(1);
}

/* Safeguarding and Whistleblowing cards special styling */
#aziende article[style*="padding: var(--space-10)"] {
    transition: all var(--transition-base);
}

#aziende article[style*="padding: var(--space-10)"]:hover {
    transform: translateY(-8px);
}

/* FAQ accordion enhancements */
.accordion__trigger:focus-visible {
    outline: 3px solid var(--color-primary-400);
    outline-offset: -3px;
}

/* Service section scroll-margin for anchor navigation */
#ecommerce,
#attivita,
#amministratori,
#aziende {
    scroll-margin-top: 160px;
}

@media (max-width: 968px) {
    #ecommerce,
    #attivita,
    #amministratori,
    #aziende {
        scroll-margin-top: 100px;
    }
}