/* ==========================================================================
       UNA COMPETENZA — le cinque pagine hanno la stessa struttura e quindi lo
       stesso foglio. Colori, intestazione, piede e pulsanti stanno in
       assets/comune.css, caricato prima di questo.
       Questo file è generato da strumenti/rifai-competenze.py.
       ========================================================================== */
    .dentro { max-width: none; }

    .testa { background: var(--bianco); border-bottom: 1px solid var(--ardesia);
             padding: clamp(24px, 3vw, 44px) var(--lato) clamp(28px, 3.4vw, 48px) var(--lato); }
    .testa-griglia { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
                     gap: clamp(24px, 3.4vw, 52px); align-items: stretch; }
    .testa p { margin: 0; font-size: clamp(17px, 1.22vw, 17px); line-height: 1.65; color: var(--testo); }

    /* il riquadro della categoria SOA */
    .soa { background: var(--notte); padding: clamp(22px, 2.4vw, 28px); }
    .soa-et { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
              text-transform: uppercase; color: var(--azzurro); margin-bottom: 14px; }
    .soa { display: flex; flex-direction: column; justify-content: center; }
    .soa b { display: block; font-family: var(--titoli); font-weight: 700; font-size: clamp(30px, 2.52vw, 32px);
             line-height: 1; letter-spacing: -0.04em; color: var(--bianco); margin-bottom: 10px; }
    .soa b small { margin-left: 10px; font-family: var(--mono); font-weight: 500; font-size: 13px;
                   letter-spacing: 0.08em; text-transform: uppercase; color: var(--azzurro); }
    .soa span { display: block; font-size: 16px; line-height: 1.55; color: var(--su-scuro); }
    .pag .soa-nota a { color: var(--azzurro); }
    .pag .soa-nota a:hover { color: var(--bianco); }
    .soa .soa-nota { margin: 14px 0 0 0; padding-top: 12px; border-top: 1px solid #22404F;
                font-size: 15px; line-height: 1.6; color: var(--su-scuro); }
    .pag .soa-nota a { text-decoration: underline; text-underline-offset: 3px; }

    /* le lavorazioni */
    /* in etichette una dopo l'altra: vanno a capo dove serve e nessuna resta
       sola su una riga come succedeva con la griglia */
    .lavorazioni { display: flex; flex-wrap: wrap; gap: 10px; }
    .lav { padding: 11px 18px; background: var(--bianco); border: 1px solid var(--ardesia); border-radius: 100px;
           font-size: 16px; line-height: 1.4; color: var(--testo); }

    /* dove l'abbiamo fatto */
    .opere { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
    /* ogni opera ha la copertina della sua scheda, a sinistra */
    .opera { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; align-items: stretch;
             background: var(--bianco); border: 1px solid var(--ardesia); text-decoration: none; overflow: hidden; }
    .opera-foto { position: relative; min-height: 120px; background: repeating-linear-gradient(140deg, #D7DADA 0 10px, #DFE1E1 10px 20px); }
    .opera-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
                      transition: transform 0.4s ease; }
    .opera:hover .opera-foto img { transform: scale(1.03); }
    .opera-foto em { position: absolute; left: 10px; bottom: 10px; font-style: normal; font-family: var(--mono);
                     font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #505A60; }
    .opera-testo { display: flex; flex-direction: column; justify-content: center; padding: clamp(18px, 2vw, 24px); }
    .opera:hover { border-color: var(--notte); }
    .opera b { display: block; font-family: var(--titoli); font-weight: 600; font-size: clamp(19px, 1.51vw, 19px);
               line-height: 1.2; letter-spacing: -0.03em; color: var(--notte); margin-bottom: 8px; }
    .opera:hover b { color: var(--mare); }
    .opera-testo span { font-family: var(--mono); font-size: 13px; color: #626C72; }

    .vuoto { padding: clamp(18px, 2vw, 22px); background: var(--bianco); border: 1px solid var(--ardesia);
             font-size: 16px; line-height: 1.6; color: var(--testo); }

    /* il titolo con accanto il ritorno all'indice */
    .sez-testa { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline;
                 justify-content: space-between; margin-bottom: clamp(18px, 2.2vw, 24px); }
    .pag .indietro { display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
                     color: var(--mare); font-size: 16px; font-weight: 600;
                     text-decoration: underline; text-underline-offset: 3px; }
    .pag .indietro:hover { color: var(--inchiostro); }

    /* le altre quattro competenze, in fondo */
    .altre { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
    .altra { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 14px 18px;
             background: var(--bianco); border: 1px solid var(--ardesia); text-decoration: none; }
    .altra:hover { border-color: var(--notte); }
    .altra b { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--mare); }
    .altra span { font-size: 16px; font-weight: 600; color: var(--notte); }
    .altra:hover span { color: var(--mare); }

    @media (max-width: 900px) {
      .testa-griglia { grid-template-columns: 1fr; }
    }

    @media (max-width: 620px) {
      .soa-et, .opera-testo span, .altra b { font-size: 13px; }
      .soa .soa-nota { font-size: 14px; }
      .altre { grid-template-columns: 1fr; }
    }