/* ==========================================================================
   SERVIZI PAGE — Pink Vision Ottica
   Dipende da homepage.css per i token (:root custom properties).
   ========================================================================== */


/* ── Sezione singolo servizio ───────────────────────────────────────────── */

.wp-block-group.servizi-section {
    padding-block: var(--space-16) !important;
    padding-inline: var(--space-4) !important;
}

.servizi-section--warm {
    background: var(--color-bg-warm) !important;
}

.servizi-section--white {
    background: var(--color-white) !important;
}


/* ── Colonne (immagine + testo) ─────────────────────────────────────────── */

.servizi-section .wp-block-columns.servizi-cols {
    max-width: 1200px !important;
    margin-inline: auto !important;
    gap: var(--space-8) !important;
    align-items: center !important;
}


/* ── Immagine servizio ──────────────────────────────────────────────────── */

.servizi-col-img .wp-block-image img {
    width: 100% !important;
    height: 340px !important;
    object-fit: cover !important;
    border-radius: 1rem !important;
    display: block !important;
}

/* Placeholder quando l'immagine non è ancora stata inserita */
.servizi-col-img .wp-block-image img[src=""],
.servizi-col-img .wp-block-image img:not([src]) {
    background: var(--color-surface) !important;
    min-height: 340px !important;
}


/* ── Testo ──────────────────────────────────────────────────────────────── */

/* Ancora: compensa la navbar fissa */
.servizi-title[id] {
    scroll-margin-top: 6rem !important;
}

.servizi-col-text .servizi-title {
    font-family: var(--font-primary) !important;
    font-size: var(--text-h2) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--leading-tight) !important;
    color: var(--color-text-dark) !important;
    margin-block-end: var(--space-4) !important;
}

.servizi-col-text .servizi-desc {
    font-family: var(--font-primary) !important;
    font-size: var(--text-body) !important;
    font-weight: var(--font-weight-light) !important;
    line-height: var(--leading-normal) !important;
    color: var(--color-text-body) !important;
    max-width: 55ch !important;
}


/* ── Icona PNG del servizio ─────────────────────────────────────────────── */

.servizi-col-text .servizi-icon {
    margin-block-end: var(--space-3) !important;
}

.servizi-col-text .servizi-icon img {
    width: 3rem !important;
    height: 3rem !important;
    object-fit: contain !important;
    display: block !important;
}

/* Placeholder quando l'icona non è ancora stata inserita */
.servizi-col-text .servizi-icon img[src=""],
.servizi-col-text .servizi-icon img:not([src]) {
    width: 3rem !important;
    height: 3rem !important;
    background: var(--color-surface) !important;
    border-radius: 50% !important;
}


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

@media (max-width: 980px) {
    .servizi-section .wp-block-columns.servizi-cols {
        flex-direction: column !important;
    }

    /* Ordine fisso mobile: testo (con icona+titolo+desc) PRIMA, immagine DOPO */
    .servizi-section .wp-block-column.servizi-col-text {
        order: 1 !important;
    }

    .servizi-section .wp-block-column.servizi-col-img {
        order: 2 !important;
    }

    .servizi-col-img .wp-block-image img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
    }
}

@media (max-width: 600px) {
    .wp-block-group.servizi-section {
        padding-block: var(--space-12) !important;
    }
}