/* Servizi (archive-pm_service.php e template-servizi.php) — allineamento all'XD.
   Caricato dopo theme.css, scoped a .pm-servizi. Font ai px pieni dell'XD
   (1920 = 120rem → 1rem = 16px). La gabbia (container 77.08% + gutter 0) è globale
   in theme.css. */

/* Hero: 60px, banda 2:1 (solo desktop). */
.pm-servizi .pm-page-hero h1 {
    font-size: clamp(2.5rem, 3.125vw, 3.75rem);
    line-height: 1.1;
}
@media (min-width: 992px) {
    .pm-servizi .pm-page-hero--image {
        aspect-ratio: 2 / 1;
        min-height: 0;
    }
}

/* Banda intro: titolo 40px, corpo 32px. */
.pm-servizi .pm-intro-title-blue {
    font-size: clamp(2rem, 2.083vw, 2.5rem);
    line-height: 1.25;
}
.pm-servizi .pm-services__text,
.pm-servizi .pm-services__text p {
    font-size: clamp(1.5rem, 1.667vw, 2rem);
    line-height: 1.25;
}

/* Righe servizio: titolo 40px, Obiettivo e corpo 20px. */
.pm-servizi .pm-srow__title {
    font-size: clamp(2rem, 2.083vw, 2.5rem);
    line-height: 1.15;
}
.pm-servizi .pm-srow .pm-objective__label,
.pm-servizi .pm-srow .pm-objective p,
.pm-servizi .pm-srow__text {
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    line-height: 1.4;
}

/* CTA: titolo 40px, corpo 20px. */
.pm-servizi .pm-cta-band h3 {
    font-size: clamp(1.75rem, 2.083vw, 2.5rem);
}
.pm-servizi .pm-cta-band p {
    font-size: clamp(1rem, 1.25vw, 1.25rem);
}

/* Accreditamento: 24px. */
.pm-servizi .pm-accredita__text {
    font-size: clamp(1.1rem, 1.25vw, 1.5rem);
}

/* Righe servizio: immagine ~41% / 59% testo. L'immagine è QUADRATA come minimo
   (aspect-ratio 1/1 sulla colonna media, = 605x605 dell'XD a 1920) ma con
   align-items:stretch CRESCE fino all'altezza della riga quando il testo è più
   alto del quadrato — così resta sempre attaccata ai divisori a ogni larghezza
   (a 1920 il testo sta dentro il quadrato → resta quadrata; su schermi più
   stretti il testo va a capo di più e l'immagine si allunga con lui, invece di
   "staccarsi" flottando centrata). Il rapporto interno Obiettivo:corpo (5fr:7fr)
   è già in theme.css.
   NB: qui il ritaglio è voluto (vedi commento in theme.css); le proporzioni
   piene valgono solo sotto i 992px, dove la riga è impilata. */
@media (min-width: 992px) {
    .pm-servizi .pm-srow {
        align-items: stretch;
    }
    .pm-servizi .pm-srow__media {
        flex: 0 0 41%;
        max-width: 41%;
        aspect-ratio: 1 / 1;
    }
    .pm-servizi .pm-srow__body {
        flex: 1 1 auto;
        max-width: none;
    }
    .pm-servizi .pm-srow__media img,
    .pm-servizi .pm-srow__ph {
        height: 100%;
        width: 100%;
        aspect-ratio: auto;
        min-height: 0;
        object-fit: cover;
    }
}