/* ==========================================================================
       COMPETENZE — solo quello che serve a questa pagina.
       Colori, intestazione, piede e pulsanti stanno in assets/comune.css,
       che questa pagina carica prima del proprio foglio.
       ========================================================================== */
    .dentro { max-width: none; }

    /* --- fascia bianca di apertura -------------------------------------------- */
    .testa { background: var(--bianco); border-bottom: 1px solid var(--ardesia);
             padding: clamp(24px, 3vw, 46px) var(--lato) clamp(28px, 3.4vw, 48px) var(--lato); }
    .testa-griglia { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
                     gap: clamp(26px, 3.4vw, 56px); align-items: start; }
    .testa p { margin: 0; font-size: clamp(16px, 1.18vw, 17px); line-height: 1.6; color: var(--testo); max-width: 58ch; }

    /* l'elenco dei salti: su schermo stretto diventa una fila di pasticche */
    .salti { display: flex; flex-direction: column; gap: 8px; }
    .salto { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 16px;
             background: var(--pietra); border-left: 3px solid var(--mare); text-decoration: none;
             box-sizing: border-box; }
    .salto:hover { background: #E4E9EB; border-left-color: var(--azzurro); }
    .salto b { font-family: var(--mono); font-size: 13px; font-weight: 400; color: #626C72; }
    .salto span { font-size: 16px; font-weight: 600; color: var(--notte); }

    /* --- un mestiere ----------------------------------------------------------- */
    .mest { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
            gap: clamp(24px, 3vw, 44px); align-items: start;
            padding-bottom: clamp(26px, 2.2vw, 36px); border-bottom: 1px solid var(--ardesia); }
    .sez:last-of-type .mest { border-bottom: 0; }
    .mest-numero { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em;
                   color: var(--mare); margin-bottom: 12px; }
    .mest h2 { margin: 0 0 14px 0; font-family: var(--titoli); font-weight: 600;
               font-size: clamp(28px, 2.52vw, 30px); line-height: 1.06; letter-spacing: -0.035em; color: var(--notte); }
    .mest h2 a { color: inherit; text-decoration: none; }
    .mest h2 a:hover { color: var(--mare); }
    .mest-altro { margin: 18px 0 0 0; font-size: 16px; }
    .pag .mest-altro a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mare);
                    font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--mare); }
    .pag .mest-altro a:hover { color: var(--inchiostro); border-bottom-color: var(--inchiostro); }
    .mest-cat { display: block; font-family: var(--mono); font-size: 14px; color: var(--grigio); margin-bottom: 20px; }
    .mest p { margin: 0 0 22px 0; font-size: clamp(16px, 1.13vw, 16px); line-height: 1.7;
              color: var(--testo); max-width: 70ch; }
    .lavorazioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
    .lav { padding: 12px 15px; background: var(--bianco); border: 1px solid var(--ardesia);
           font-size: 15px; line-height: 1.4; color: var(--testo); }

    @media (max-width: 900px) {
      .testa-griglia { grid-template-columns: 1fr; align-items: start; }
      .mest { grid-template-columns: 1fr; }
      .mest-lato .btn { width: 100%; }
    }

    @media (max-width: 620px) {
      .mest-numero, .mest-cat, .salto b { font-size: 14px; }
      .lav { font-size: 16px; }
      .lavorazioni { grid-template-columns: 1fr; }
    }