/* Lavorare da remoto con noi (/lavorare-da-remoto-con-noi): si appoggia ai
   componenti gs-* di gestione-social.css e aggiunge schema del network,
   scomposizione del preventivo, calendario, ciclo rotazione/feedback.
   Mobile-first come gestione-social.css. */

/* --- hero: schema del network --- */
.lr-network svg{display:block; width:100%; height:auto; overflow:visible;}
.lr-net-lines line{stroke:color-mix(in srgb, var(--accent) 45%, transparent); stroke-width:2; stroke-dasharray:5 6; animation:lr-dash 6s linear infinite;}
.lr-net-lines line.soft{stroke:var(--border-2); stroke-width:1.5; animation:none;}
.lr-net-hub{fill:var(--accent); filter:drop-shadow(0 10px 22px color-mix(in srgb, var(--accent) 45%, transparent));}
.lr-net-hub-t{fill:#fff; font-weight:800; font-size:15px;}
.lr-net-hub-s{fill:rgba(255,255,255,.85); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;}
.lr-net-node{fill:var(--surface); stroke:var(--border-2); stroke-width:1.5;}
.lr-net-node-t{fill:var(--text); font-size:11.5px; font-weight:700;}
@keyframes lr-dash{to{stroke-dashoffset:-44;}}

/* --- passi: 6 invece di 4 --- */
.lr-steps li{padding-right:18px;}

/* --- note sotto gli schemi --- */
.lr-note{max-width:760px; margin:16px auto 0; font-size:13.5px; line-height:1.55; color:var(--text-mute); text-align:center;}

/* --- scomposizione del preventivo --- */
.lr-split{max-width:760px; margin:28px auto 0; display:flex; flex-direction:column; align-items:stretch;}
.lr-split-in, .lr-split-total{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm);
}
.lr-split-in > .material-symbols-outlined{flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:10px; color:var(--accent-2); background:color-mix(in srgb, var(--accent) 13%, transparent);}
.lr-split-in strong, .lr-split-total strong{display:block; font-size:15.5px; color:var(--text);}
.lr-split-in div span, .lr-split-total div span{display:block; font-size:13.5px; color:var(--text-dim);}
.lr-split-arrow{align-self:center; width:2px; height:26px; background:linear-gradient(var(--border-2), var(--accent)); position:relative;}
.lr-split-arrow::after{content:''; position:absolute; left:-5px; bottom:-2px; border:6px solid transparent; border-top-color:var(--accent); border-bottom:0;}
.lr-split-list{
  list-style:none; margin:8px 0; padding:6px; display:flex; flex-direction:column; gap:6px;
  border:1px dashed var(--border-2); border-radius:var(--radius);
  background:color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.lr-split-list li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; align-items:center;
  padding:12px 14px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border);
}
.lr-split-list li > .material-symbols-outlined{grid-row:span 2; width:38px; height:38px; display:grid; place-items:center; border-radius:10px; font-size:21px; color:var(--teal); background:color-mix(in srgb, var(--teal) 14%, transparent);}
.lr-split-txt strong{display:block; font-size:14.5px; color:var(--text);}
.lr-split-txt span{display:block; font-size:13px; color:var(--text-dim);}
.lr-split-fee{
  justify-self:start; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; color:var(--text-dim); border:1px solid var(--border-2);
}
.lr-split-list li.is-org{border-color:color-mix(in srgb, var(--accent) 40%, var(--border)); background:color-mix(in srgb, var(--accent) 6%, var(--surface));}
.lr-split-list li.is-org > .material-symbols-outlined{color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-2));}
.lr-split-list li.is-org .lr-split-fee{color:var(--accent-2); border-color:color-mix(in srgb, var(--accent) 45%, transparent);}
.lr-split-total{flex-wrap:wrap; justify-content:space-between; border-color:color-mix(in srgb, var(--accent) 45%, var(--border));}
.lr-split-badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  font-size:13px; font-weight:700; color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-2));
}
.lr-split-badge .material-symbols-outlined{font-size:18px;}

/* --- calendario (gantt semplificato) --- */
.lr-gantt{max-width:900px; margin:28px auto 0; padding:14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm);}
.lr-gantt-head, .lr-gantt-row{display:grid; grid-template-columns:1fr; gap:6px;}
.lr-gantt-head{padding-bottom:10px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute);}
.lr-gantt-head > span:first-child{display:none;}
.lr-gantt-scale{display:flex; justify-content:space-between;}
.lr-gantt-scale em{font-style:normal;}
.lr-gantt-row{padding:10px 0; border-bottom:1px dashed var(--border);}
.lr-gantt-row:last-child{border-bottom:0; padding-bottom:2px;}
.lr-gantt-row [role="rowheader"]{font-size:13.5px; font-weight:700; color:var(--text);}
.lr-gantt-track{position:relative; display:block; height:30px; border-radius:8px; background:repeating-linear-gradient(90deg, transparent 0 calc(5% - 1px), var(--border) calc(5% - 1px) 5%);}
.lr-gantt-bar{
  position:absolute; top:3px; bottom:3px; left:calc(var(--s) * 100%); width:calc(var(--l) * 100%);
  border-radius:6px; background:linear-gradient(90deg, color-mix(in srgb, var(--teal) 75%, transparent), var(--accent));
}
.lr-gantt-due{display:block; margin-top:2px; font-size:12px; font-weight:500; color:var(--text-mute);}
.lr-gantt-bar::after{content:''; position:absolute; right:-5px; top:50%; width:10px; height:10px; transform:translateY(-50%) rotate(45deg); background:var(--accent-2); border:2px solid var(--surface);}

/* --- ciclo rotazione/feedback --- */
.lr-cycle{display:grid; grid-template-columns:1fr; gap:14px; margin-top:24px; counter-reset:none;}
.lr-cycle-step{position:relative; padding:20px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-sm);}
.lr-cycle-step > .material-symbols-outlined{width:42px; height:42px; display:grid; place-items:center; border-radius:10px; color:var(--accent-2); background:color-mix(in srgb, var(--accent) 13%, transparent);}
.lr-cycle-no{position:absolute; top:16px; right:18px; font-family:var(--font-mono); font-size:28px; font-weight:800; line-height:1; color:color-mix(in srgb, var(--accent) 22%, transparent);}
.lr-cycle-step h3{margin:12px 0 6px; font-size:16px; color:var(--text);}
.lr-cycle-step p{margin:0; font-size:14px; line-height:1.55; color:var(--text-dim);}

/* --- area personale --- */
.lr-area{display:grid; grid-template-columns:1fr; gap:12px; margin-top:24px;}
.lr-area-item{display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);}
.lr-area-item > .material-symbols-outlined{flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:10px; color:var(--teal); background:color-mix(in srgb, var(--teal) 14%, transparent);}
.lr-area-item h3{margin:2px 0 4px; font-size:15px; color:var(--text);}
.lr-area-item p{margin:0; font-size:13.5px; line-height:1.5; color:var(--text-dim);}

/* --- patti chiari --- */
.lr-deal{display:grid; grid-template-columns:1fr; gap:16px; margin-top:24px;}
.lr-deal-col{padding:22px; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(160deg, var(--surface-2), var(--surface)); box-shadow:var(--shadow-sm);}
.lr-deal-col h3{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:17px; color:var(--text);}
.lr-deal-col h3 .material-symbols-outlined{color:var(--accent);}

/* --- pagamenti: esempi + calcolatore --- */
.lr-pay{display:grid; grid-template-columns:1fr; gap:16px; max-width:900px; margin:24px auto 0;}
.lr-pay-examples{display:grid; gap:12px;}
.lr-pay-ex{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:12px; align-items:center;
  padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-sm);
}
.lr-pay-ex .lr-pay-k{grid-row:1; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute);}
.lr-pay-ex .lr-pay-k:nth-of-type(1){grid-column:1;} .lr-pay-ex .lr-pay-k:nth-of-type(2){grid-column:3;}
.lr-pay-ex strong{grid-row:2; font-size:17px; color:var(--text);}
.lr-pay-ex strong:nth-of-type(1){grid-column:1;} .lr-pay-ex strong:nth-of-type(2){grid-column:3; color:var(--accent-2);}
.lr-pay-ex .material-symbols-outlined{grid-column:2; grid-row:1 / span 2; color:var(--accent);}
.lr-pay-ex small{grid-column:1 / -1; grid-row:3; margin-top:8px; font-size:12.5px; color:var(--text-dim);}
.lr-pay-calc{
  padding:20px; border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius:var(--radius);
  background:linear-gradient(160deg, var(--surface-2), var(--surface)); box-shadow:var(--shadow-sm);
}
.lr-pay-calc h3{display:flex; align-items:center; gap:8px; margin:0 0 14px; font-size:16px; color:var(--text);}
.lr-pay-calc h3 .material-symbols-outlined{color:var(--accent);}
.lr-pay-calc label{display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--text-dim);}
.lr-pay-calc input{
  width:100%; min-height:46px; padding:10px 12px; border-radius:10px; font:inherit; font-size:16px;
  color:var(--text); background:var(--surface); border:1px solid var(--border-2); color-scheme:light dark;
}
.lr-pay-calc input:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color:var(--accent);}
.lr-pay-out{margin:14px 0 0; font-size:15px; color:var(--text);}
.lr-pay-out strong{color:var(--accent-2);}
.lr-pay-out span{display:block; margin-top:2px; font-size:12.5px; color:var(--text-mute);}
@media (min-width:760px){ .lr-pay{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:stretch;} }

/* ============ da tablet in su ============ */
@media (min-width:600px){
  .lr-split-list li{grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto;}
  .lr-split-list li > .material-symbols-outlined{grid-row:auto;}
  .lr-split-fee{justify-self:end;}
  .lr-gantt{padding:18px 22px;}
  .lr-gantt-head, .lr-gantt-row{grid-template-columns:150px minmax(0,1fr); gap:14px; align-items:center;}
  .lr-gantt-head > span:first-child{display:block;}
  .lr-cycle{grid-template-columns:repeat(2, minmax(0,1fr));}
  .lr-area{grid-template-columns:repeat(2, minmax(0,1fr));}
  .lr-deal{grid-template-columns:repeat(2, minmax(0,1fr));}
}

/* ============ desktop ============ */
@media (min-width:960px){
  .lr-steps{grid-template-columns:repeat(3, minmax(0,1fr));}
  .lr-cycle{grid-template-columns:repeat(4, minmax(0,1fr));}
  .lr-area{grid-template-columns:repeat(3, minmax(0,1fr));}
}

@media (prefers-reduced-motion: reduce){
  .lr-net-lines line{animation:none;}
}