/* =====================================================================
   "Due pubblici" in home - le due porte (14/10/2026).
   Caricato solo sulla home e sulle sue varianti, dopo main.css.

   Le card restano quelle del modello Elementor "Blocco - Due pubblici"
   (titolo, testo, elenco Loop dei servizi, rimando a tutti i servizi):
   qui cambia l'aspetto, e due-pubblici.js aggiunge
     - al posto della foto, il disegno di quello che lo studio fa per quel
       pubblico (ciclo del rapporto di lavoro / busta paga letta da noi);
     - l'occhiello con il pubblico ("Datori di lavoro e HR"...);
     - il pulsante verso il modulo della pagina servizi;
     - il cerchio con la freccia sulle righe dei servizi.
   Le due porte restano sempre meta' e meta'. Senza lo script si vede la
   foto, come prima: le regole dei disegni valgono solo con .lir-dp--porte.
   Attenzione ai nomi: .lir-nota e .lir-tappa esistono gia' in main.css per
   altro, per questo qui ci sono .lir-busta__segno e .lir-ciclo__tappa.
   ===================================================================== */

/* -- La porta ----------------------------------------------------------- */
body .lir-dp__card.e-con{
  border:1px solid var(--linea);border-radius:14px;box-shadow:none;
  transition:box-shadow 320ms cubic-bezier(.2,.6,.3,1);
}
body .lir-dp__card.e-con:hover{box-shadow:var(--ombra)}
body .lir-dp__corpo.e-con{padding:clamp(24px,3vw,34px) clamp(20px,3vw,34px) clamp(22px,3vw,30px)}
.lir-dp__titolo{font-size:clamp(1.55rem,1.2rem + 1vw,2rem);line-height:1.15;letter-spacing:-.015em;padding-bottom:0}
body .lir-dp__testo.elementor-widget{margin-top:10px}
body .lir-dp__testo .elementor-heading-title{font-size:1.02rem;line-height:1.6;max-width:50ch}

/* -- I servizi: righe intere cliccabili, senza numeri ------------------- */
body .lir-dp__elenco.elementor-widget{padding:0;margin-top:22px;border-top:1px solid var(--linea)}
body .lir-dp__elenco .e-loop-item + .e-loop-item{border-top:0}
body .lir-dp__elenco .e-loop-item{border-bottom:1px solid var(--linea-tenue)}
body .lir-dp-voce.e-con{padding:16px 48px 16px 0;gap:4px;background:none}
body .lir-dp-voce.e-con:hover{background:none}
.lir-dp-voce__titolo::before{display:none}
body .lir-dp-voce__titolo{font-size:1.05rem;line-height:1.3}
body .lir-dp-voce:hover .lir-dp-voce__titolo{color:var(--inchiostro)}
body .lir-dp-voce__testo{font-size:.93rem;line-height:1.5}
/* Il cerchio con la freccia: e' l'unica cosa che reagisce al passaggio */
.lir-dp-voce__freccia{
  position:absolute;right:4px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--linea);color:var(--petrolio);pointer-events:none;
  transition:transform 260ms cubic-bezier(.2,.6,.3,1),background 220ms,color 220ms,border-color 220ms;
}
.lir-dp-voce__freccia svg{width:11px;height:11px}
.lir-dp-voce:hover .lir-dp-voce__freccia,
.lir-dp-voce:focus-within .lir-dp-voce__freccia{transform:translateX(3px);background:var(--petrolio);border-color:var(--petrolio);color:#fff}

/* -- In fondo: pulsante e rimando affiancati ---------------------------- */
.lir-dp__azioni{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:auto;padding-top:24px}
body .lir-dp--porte .lir-dp__azioni .lir-dp__piede.elementor-widget{margin:0;padding:0;align-self:center;width:auto}
body .lir-dp--porte .lir-dp__azioni .lir-dp__piede a{font-size:.96rem;border-bottom-width:1.5px}
body .lir-dp--porte .lir-dp__azioni .lir-dp__piede a::after{display:none}
body a.lir-dp__bottone{
  display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:var(--raggio-comando);
  background:var(--petrolio);color:#fff;text-decoration:none;font-weight:600;font-size:.96rem;line-height:1.3;
  transition:background 200ms;
}
body a.lir-dp__bottone:hover{background:var(--petrolio-scuro);color:#fff}
.lir-dp__bottone svg{width:12px;height:12px;transition:transform 200ms cubic-bezier(.2,.6,.3,1)}
.lir-dp__bottone:hover svg{transform:translateX(3px)}

/* -- L'occhiello con il pubblico ---------------------------------------- */
.lir-dp__chi{display:inline-flex;align-items:center;gap:10px}
.lir-dp__chi svg{width:18px;height:18px;flex:none}

/* -- La vista: stessa altezza sulle due porte, cosi' i titoli sotto
      stanno sulla stessa riga ------------------------------------------- */
body .lir-dp--porte .lir-dp__card > .lir-dp__foto.elementor-widget{
  position:relative;aspect-ratio:auto;min-height:420px;border-bottom:0;
  display:grid;place-items:center;text-align:left;padding:54px clamp(18px,3vw,34px) 30px;overflow:hidden;
}
body .lir-dp--porte .lir-dp__foto img{display:none}
body .lir-dp--porte .lir-dp__card--aziende > .lir-dp__foto.elementor-widget{background:radial-gradient(130% 120% at 0% 0%,#175A72 0%,var(--petrolio-scuro) 55%,#0A2C38 100%);color:#fff}
body .lir-dp--porte .lir-dp__card--privati > .lir-dp__foto.elementor-widget{background:linear-gradient(180deg,#F2F5F7,#E8EEF1)}
.lir-dp__etichetta{position:absolute;top:16px;left:clamp(18px,3vw,34px);right:clamp(18px,3vw,34px);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.4}
.lir-dp__card--aziende .lir-dp__etichetta{color:#A9CCD9}
.lir-dp__card--privati .lir-dp__etichetta{color:var(--inchiostro-tenue)}
@media (max-width:859px){
  body .lir-dp--porte .lir-dp__card > .lir-dp__foto.elementor-widget{min-height:0}
}

/* Aziende: il ciclo del rapporto di lavoro */
.lir-ciclo{width:min(100%,470px);display:grid;gap:18px;font-family:var(--testo)}
.lir-ciclo p,.lir-ciclo ul{margin:0}
.lir-ciclo ul{padding:0;list-style:none}
.lir-ciclo__binario{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
/* Il binario e il suo tratto percorso stanno sotto (z-index 0), i pallini
   delle tappe sopra (z-index 1): il ::after del binario si disegna dopo i
   figli e senza questo copriva i pallini. */
.lir-ciclo__binario::before{content:"";position:absolute;z-index:0;left:8px;right:8px;top:8px;height:2px;background:rgba(255,255,255,.18);border-radius:2px}
.lir-ciclo__binario::after{content:"";position:absolute;z-index:0;left:8px;top:8px;height:2px;width:calc(50% - 8px);background:#7FB0C2;border-radius:2px;transition:width 900ms cubic-bezier(.2,.6,.3,1)}
.lir-dp__card--aziende:hover .lir-ciclo__binario::after{width:calc(100% - 16px)}
.lir-ciclo__tappa{position:relative;display:grid;gap:10px;align-content:start;padding:28px 0 0;margin:0}
.lir-ciclo__tappa::before{content:"";position:absolute;z-index:1;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--petrolio-scuro);border:2px solid #7FB0C2;box-shadow:0 0 0 4px rgba(127,176,194,.15)}
.lir-ciclo__tappa--ora::before{background:#fff;border-color:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.18)}
.lir-ciclo__tappa b{font-family:var(--titolo);font-weight:600;font-size:1rem;color:#fff}
.lir-ciclo__tappa ul{display:grid;gap:5px}
.lir-ciclo__tappa li{margin:0;font-size:.76rem;line-height:1.35;color:#C3D2D8;padding:5px 8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:4px}
.lir-ciclo__unico{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;background:rgba(255,255,255,.1);font-size:.8rem;line-height:1.35;color:#E6EFF2}
.lir-ciclo__unico span{width:22px;height:22px;flex:none;border-radius:50%;background:#fff;color:var(--petrolio-scuro);display:grid;place-items:center;font-family:var(--titolo);font-weight:600;font-size:.72rem}

/* Privati: una busta paga letta dallo studio (esempio) */
.lir-busta{position:relative;width:min(100%,420px);background:var(--bianco);border-radius:10px;padding:16px 18px 12px;color:var(--inchiostro);font-family:var(--testo);
  box-shadow:0 2px 4px rgba(12,20,24,.08),0 28px 60px -24px rgba(12,20,24,.45);transform:rotate(-1.2deg);transition:transform 560ms cubic-bezier(.2,.6,.3,1)}
.lir-dp__card--privati:hover .lir-busta{transform:rotate(0)}
.lir-busta p{margin:0}
.lir-busta__testa{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:9px;border-bottom:2px solid var(--inchiostro)}
.lir-busta__testa b{font-family:var(--titolo);font-weight:600;font-size:1rem}
.lir-busta__testa span{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro-tenue)}
.lir-busta__voce{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dotted #C5D1D6;font-size:.86rem;line-height:1.35}
.lir-busta__voce em{font-style:normal;font-variant-numeric:tabular-nums;font-weight:600}
.lir-busta__voce--netto{border-bottom:0;border-top:1px solid var(--inchiostro);margin-top:2px;font-weight:600}
.lir-busta__voce--netto em{font-family:var(--titolo);font-size:1.05rem}
.lir-busta__segno{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.68rem;font-weight:600;line-height:1}
.lir-busta__segno--ok{background:var(--petrolio-velo);color:var(--petrolio)}
.lir-busta__segno--no{background:var(--ambra-velo);color:var(--ambra)}
.lir-busta__note{display:grid;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--linea-tenue)}
.lir-busta__note p{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:.76rem;line-height:1.4;color:var(--inchiostro-tenue)}
.lir-busta__note b{color:var(--inchiostro);font-weight:600}
.lir-timbro{position:absolute;right:-10px;top:-14px;padding:5px 10px;border:1.5px solid var(--petrolio);border-radius:4px;background:var(--bianco);color:var(--petrolio);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transform:rotate(4deg);box-shadow:0 4px 10px -6px rgba(12,20,24,.4)}

@media (max-width:520px){
  .lir-ciclo__binario{grid-template-columns:1fr;gap:16px}
  .lir-ciclo__binario::before{right:auto;bottom:8px;width:2px;height:auto}
  .lir-ciclo__binario::after{display:none}
  .lir-ciclo__tappa{padding:0 0 0 30px}
  .lir-busta{transform:none}
  .lir-timbro{right:-4px}
}
@media (prefers-reduced-motion:reduce){
  .lir-dp-voce__freccia,.lir-ciclo__binario::after,.lir-busta,body .lir-dp__card.e-con,.lir-dp__bottone svg{transition:none}
}