/**
 * servizi.css — Servizi page styles
 *
 * Sections:
 *  1. Competenze — Bento Grid (asymmetric card layout)
 *  2. Perché Frigotel — Split image + value proposition
 *  3. CTA — Gradient call-to-action
 *  4. Responsive
 *
 * @package Frigotel
 */

/* =========================================================
   1. COMPETENZE — BENTO GRID
   Asymmetric card layout showcasing core service areas.
   ========================================================= */

.svc-competenze {
    background-color: var(--color-bianco);
}

.svc-competenze__header {
    max-width: 680px;
    margin-bottom: var(--space-xl);
}

.svc-competenze__title {
    font-size: var(--text-heading-m);
    font-weight: var(--font-weight-bold);
    color: var(--color-blu-profondo);
    line-height: var(--line-height-heading);
    margin-bottom: var(--space-s);
}

.svc-competenze__subtitle {
    font-size: var(--text-body-large);
    color: var(--color-grigio-blu);
    line-height: var(--line-height-body);
}

/* Bento grid: asymmetric layout via grid-template-areas */
.svc-bento {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
        "card-sw   card-sw   card-sw   card-sup  card-sup"
        "card-cant card-cant card-ass  card-ass  card-ass";
    gap: var(--space-m);
}

/* Individual bento card */
.svc-bento__card {
    background-color: var(--color-bianco);
    border: 1px solid var(--color-azzurro-tenue);
    border-radius: var(--radius-l);
    padding: var(--space-l) var(--space-l) var(--space-xl);
    position: relative;
    overflow: hidden;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
    will-change: transform;
}

.svc-bento__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--color-ciano-chiaro);
}

/* Grid area assignments */
.svc-bento__card--sw   { grid-area: card-sw; }
.svc-bento__card--sup  { grid-area: card-sup; }
.svc-bento__card--cant { grid-area: card-cant; }
.svc-bento__card--ass  { grid-area: card-ass; }

/* Large cards get a subtle gradient background */
.svc-bento__card--sw {
    background: linear-gradient(160deg, #ffffff 60%, var(--color-sfondo-freddo) 100%);
}

.svc-bento__card--ass {
    background: linear-gradient(160deg, #ffffff 60%, var(--color-sfondo-freddo) 100%);
}

/* Icon container */
.svc-bento__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-m);
    background-color: var(--color-sfondo-freddo);
    margin-bottom: var(--space-m);
    color: var(--color-blu-primario);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.svc-bento__card:hover .svc-bento__icon {
    background-color: var(--color-azzurro-tenue);
    color: var(--color-blu-profondo);
}

.svc-bento__icon svg {
    width: 28px;
    height: 28px;
}

/* Card text */
.svc-bento__card-title {
    font-size: var(--text-heading-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-blu-profondo);
    line-height: var(--line-height-heading);
    margin-bottom: var(--space-xs);
}

.svc-bento__card-desc {
    font-size: var(--text-body-medium);
    color: var(--color-grigio-blu);
    line-height: var(--line-height-body);
}

/* =========================================================
   2. PERCHÉ FRIGOTEL — SPLIT IMAGE + VALUE PROPOSITION
   ========================================================= */

.svc-perche {
    background-color: var(--color-sfondo-freddo);
}

.svc-perche__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

/* Image column */
.svc-perche__visual {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(13, 46, 107, 0.12);
}

.svc-perche__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 5;
}

/* Content column */
.svc-perche__content {
    padding-block: var(--space-l);
}

.svc-perche__title {
    font-size: var(--text-heading-m);
    font-weight: var(--font-weight-bold);
    color: var(--color-blu-profondo);
    line-height: var(--line-height-heading);
    margin-bottom: var(--space-xl);
}

/* Value proposition list */
.svc-perche__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}

.svc-perche__item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--space-s);
    align-items: start;
}

/* Check icon circle */
.svc-perche__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--color-azzurro-tenue);
    color: var(--color-blu-primario);
    flex-shrink: 0;
    transition: background-color var(--transition-base), transform var(--transition-base);
}

.svc-perche__item:hover .svc-perche__check {
    background-color: var(--color-ciano-chiaro);
    transform: scale(1.08);
}

.svc-perche__check svg {
    width: 20px;
    height: 20px;
}

.svc-perche__item-title {
    font-size: var(--text-body-large);
    font-weight: var(--font-weight-bold);
    color: var(--color-blu-profondo);
    margin-bottom: 2px;
}

.svc-perche__item-desc {
    font-size: var(--text-body-medium);
    color: var(--color-grigio-blu);
    line-height: var(--line-height-body);
}

/* =========================================================
   3. CALL TO ACTION (CTA)
   High-contrast section to guide users towards conversion.
   ========================================================= */

.services-cta {
    background: linear-gradient(135deg, var(--color-blu-profondo) 0%, var(--color-blu-primario) 60%, var(--color-ciano-accento) 100%);
}

.services-cta__inner {
    text-align: center;
}

.services-cta__inner .hero-actions {
    justify-content: center;
}

.services-cta .section__label,
.services-cta__text {
    color: var(--color-ciano-chiaro);
}

.services-cta__title {
    color: var(--color-bianco);
    margin-bottom: var(--space-m);
}

.services-cta__text {
    font-size: var(--text-body-large);
    max-width: 720px;
    margin: 0 auto var(--space-xl);
}

/* =========================================================
   4. RESPONSIVE
   ========================================================= */

/* Tablet */
@media (max-width: 1199px) {
    .svc-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "card-sw   card-sup"
            "card-cant card-ass";
    }

    .svc-perche__split {
        gap: var(--space-xl);
    }

    .svc-competenze__title,
    .svc-perche__title {
        font-size: var(--text-heading-s);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .svc-bento {
        grid-template-columns: 1fr;
        grid-template-areas:
            "card-sw"
            "card-sup"
            "card-cant"
            "card-ass";
    }

    .svc-perche__split {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    /* Image stacks on top on mobile */
    .svc-perche__visual {
        order: -1;
        border-radius: var(--radius-l);
    }

    .svc-perche__img {
        aspect-ratio: 16 / 9;
    }

    .svc-perche__content {
        padding-block: 0;
    }

    .svc-competenze__header {
        max-width: 100%;
    }
}