/* =====================================================================
   Fiocchetti – Lavora con noi (T_75420)
   Caricato solo da Template/lavora_con_noi.cshtml.
   Struttura, griglia e form ereditano da .section--contatti (main.css):
   qui ci sono solo i componenti nuovi del montaggio.
   ===================================================================== */

/* ---------- Intro ---------- */
.section--lavora .intro-lavora .title-page { margin: 0; font-style: normal; font-weight: 500; font-size: 80px; line-height: 54px; color: #000; }
.section--lavora .intro-lavora .abs { margin: 0; padding: 60px 0 0; font-size: 18px; font-weight: 300; line-height: 31.86px; }
.section--lavora .intro-lavora .abs p { margin: 0; }
.section--lavora .posizioni,
.section--lavora .form-contatti { padding: 80px 0 0; scroll-margin-top: 110px; }
.section--lavora .posizioni .tit-form { font-weight: 500; font-size: 48px; line-height: 54px; color: #000; }
.section--lavora .posizioni .abs-form { padding: 20px 0 0; font-weight: 300; font-size: 16px; line-height: 24px; color: #000; }

/* ---------- Lista posizioni ---------- */
.jobs { margin: 30px 0 0; padding: 0; list-style: none; border-bottom: 1px solid #797979; }
.jobs > li { margin: 0; padding: 0; }
.jobs > li::before { display: none; }
.job { display: grid; grid-template-columns: 1fr 200px 200px 60px; align-items: center; column-gap: 32px; width: 100%; padding: 32px 0; border-top: 1px solid #797979; color: #000; text-align: left; text-decoration: none; }
.job:hover, .job:focus { color: #000; text-decoration: none; }
.job__main { display: block; }
.job__title { display: block; margin: 0 0 8px; font-weight: 500; font-size: 24px; line-height: 30px; transition: color .3s ease-in-out; }
.job__excerpt { display: block; font-weight: 300; font-size: 16px; line-height: 24px; }
.job__excerpt p { margin: 0; }
.job__meta-label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 12px; line-height: 16px; text-transform: uppercase; color: #797979; }
.job__meta-value { display: block; font-weight: 400; font-size: 16px; line-height: 24px; }
.job .circle { position: relative; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; overflow: hidden; border-radius: 60px; background-color: #71dbd4; color: #000; transition: background-color .3s ease-in-out; }
.job .circle svg { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin-top: -12px; }
.job .circle .icon { transform: translateX(-50%); transition: .3s ease-in-out; }
.job .circle .icon-hover { transform: translateX(-250%); transition: .3s ease-in-out; }
.job:hover .job__title, .job:focus-visible .job__title { color: #00a399; }
.job:hover .circle .icon, .job:focus-visible .circle .icon { transform: translateX(150%); }
.job:hover .circle .icon-hover, .job:focus-visible .circle .icon-hover { transform: translateX(-50%); }

/* ---------- Form: campi ---------- */
.section--lavora .form-contatti form .wrap .field > label { display: block; padding: 8px 0; }
.section--lavora .form-control.error,
.section--lavora .field.is-invalid .form-control,
.section--lavora .field.is-invalid .upload { border: 1px solid #f00; }
.section--lavora .field__error { display: block; padding-top: 4px; font-size: 13px; line-height: 16px; font-weight: 400; color: #f00; text-transform: none; }
.section--lavora .check-container { scroll-margin-top: 120px; }
.section--lavora .check-container.is-invalid .checkmark { border-color: #f00; }
.section--lavora .check-container .field__error { padding-top: 6px; }

/* ---------- Upload CV ---------- */
.upload { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 15px 0 12px; border: 1px dashed #797979; border-radius: 3px; background: #fff; transition: border-color .3s, background-color .3s; }
.upload__input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload__icon { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #00a399 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 40 40'%3E%3Cpath d='M20 28V12M20 12l-6.5 6.5M20 12l6.5 6.5' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat; transition: background-color .3s; }
.upload__text { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; font-size: 16px; line-height: 24px; color: #00a399; text-decoration: underline; white-space: nowrap; text-overflow: ellipsis; }
.upload__hint { flex: none; font-weight: 300; font-size: 14px; line-height: 20px; color: #797979; white-space: nowrap; }
.upload__remove { position: relative; z-index: 1; flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: none; font-size: 22px; line-height: 1; color: #797979; cursor: pointer; }
.upload__remove:hover { color: #000; }
.upload__remove[hidden] { display: none !important; }
.upload:hover, .upload.is-dragover { border-color: #00a399; background-color: #f2fbfa; }
.upload:hover .upload__icon { background-color: #71dbd4; }
.upload:focus-within { border-color: #00a399; }
.upload.has-file { border-style: solid; }
.upload.has-file .upload__text { font-weight: 400; color: #000; text-decoration: none; }
.upload.has-file .upload__input { pointer-events: none; }

/* ---------- Invio / esito ---------- */
.section--lavora .btn--primary[disabled] { opacity: .6; cursor: not-allowed; pointer-events: none; }
.section--lavora .btn-loader { display: inline-block; width: 1em; height: 1em; margin-left: .5rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lcn-spin .6s linear infinite; vertical-align: -0.15em; }
.section--lavora .btn-loader[hidden] { display: none; }
.form__error { margin-top: 20px; padding: 16px 24px; border-left: 4px solid #f00; background: #fdeeee; font-size: 16px; line-height: 24px; }
.form__success { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; border-left: 4px solid #00a399; background: #e8f7f6; font-size: 16px; line-height: 24px; scroll-margin-top: 120px; }
.form__success:focus { outline: 0; }
.form__success strong { font-weight: 600; }
.form__error[hidden], .form__success[hidden] { display: none; }
/* .wrap ha display:flex dal CSS del sito: senza !important l'attributo hidden non lo nasconde */
.section--lavora form .wrap[hidden], .section--lavora form .form__actions[hidden] { display: none !important; }

/* Form bloccato durante l'invio */
.section--lavora form.is-sending { opacity: .5; pointer-events: none; user-select: none; transition: opacity .2s; }

/* ---------- Popup invio (loader -> esito) ---------- */
.lcn-status { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lcn-status[hidden] { display: none; }
.lcn-status__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.6); animation: lcn-fade .2s ease-out; }
.lcn-status__panel { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 48px 48px 40px; border-radius: 3px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.2); text-align: center; animation: lcn-rise .25s ease-out; }
.lcn-status__panel:focus { outline: 0; }
.lcn-status__icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 50%; }
.lcn-status__spinner { width: 48px; height: 48px; border: 3px solid #e8f7f6; border-top-color: #00a399; border-radius: 50%; animation: lcn-spin .8s linear infinite; }
.lcn-status__ok, .lcn-status__ko { display: none; }
.lcn-status__title { margin: 0 0 12px; font-weight: 500; font-size: 28px; line-height: 34px; color: #000; }
.lcn-status__text { margin: 0; font-size: 16px; line-height: 24px; color: #4a4a4a; }
.lcn-status__text:empty { display: none; }
.lcn-status__btn { margin-top: 32px; min-width: 200px; }
.lcn-status__btn[hidden] { display: none; }
.lcn-status[data-state="ok"] .lcn-status__icon { background: #e8f7f6; color: #00a399; }
.lcn-status[data-state="ko"] .lcn-status__icon { background: #fdeeee; color: #d00; }
.lcn-status[data-state="ok"] .lcn-status__spinner, .lcn-status[data-state="ko"] .lcn-status__spinner { display: none; }
.lcn-status[data-state="ok"] .lcn-status__ok, .lcn-status[data-state="ko"] .lcn-status__ko { display: block; }

/* ---------- Modale dettaglio posizione ---------- */
.job-modal-host { padding: 0 !important; }
.job-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1100; overflow-y: auto; padding: 80px 20px; }
.job-modal[hidden] { display: none; }
.job-modal__overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.6); animation: lcn-fade .25s ease-out; }
.job-modal__panel { position: relative; max-width: 920px; margin: 0 auto; padding: 64px 64px 72px; border-radius: 3px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.2); animation: lcn-rise .3s ease-out; }
.job-modal__panel:focus { outline: 0; }
.job-modal__close { position: absolute; top: 28px; right: 28px; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: #000; cursor: pointer; transition: color .3s, transform .3s; }
.job-modal__close:hover { color: #00a399; transform: rotate(90deg); }
.job-modal .eyebrow { margin: 0 0 16px; font-weight: 600; font-size: 14px; line-height: 16px; text-transform: uppercase; color: #00a399; }
.job-modal__title { margin: 0 0 32px; font-weight: 500; font-size: 48px; line-height: 54px; }
.job-modal .meta { display: flex; flex-wrap: wrap; gap: 16px 48px; margin: 0; }
.job-modal .meta div { display: flex; flex-direction: column; gap: 4px; }
.job-modal .meta dt { font-weight: 600; font-size: 12px; line-height: 16px; text-transform: uppercase; color: #797979; }
.job-modal .meta dd { margin: 0; font-weight: 400; font-size: 16px; line-height: 24px; }
.job-modal .meta:empty, .job-modal .meta:empty + .divider { display: none; }
.job-modal .divider { margin: 40px 0; border: 0; border-top: 1px solid #bbbcbc; }
.job-detail h2, .job-detail h3, .job-detail h4 { margin: 0 0 16px; font-weight: 600; font-size: 22px; line-height: 28px; color: #000; }
.job-detail strong, .job-detail b { font-weight: 600; }
.job-detail ul li { margin: 0; padding: 0; }
.job-detail p, .job-detail ul, .job-detail ol { margin: 0 0 40px; font-weight: 300; font-size: 16px; line-height: 24px; }
.job-detail ul, .job-detail ol { padding-left: 20px; line-height: 26px; }
.job-detail > :last-child { margin-bottom: 0; }
.job-modal .form-contatti { padding: 16px 0 0; }
.job-modal .tit-apply { font-weight: 500; font-size: 32px; line-height: 40px; }
.job-modal .form-contatti form .wrap .item { width: calc(50% - 10px); }

body.no-scroll { overflow: hidden; }

@keyframes lcn-fade { from { opacity: 0; } }
@keyframes lcn-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes lcn-spin { to { transform: rotate(360deg); } }

/* ---------- Mobile ---------- */
@media (max-width: 1023.98px) {
  .section--lavora .intro-lavora .title-page { font-size: 56px; line-height: 60px; }
  .section--lavora .intro-lavora .abs { padding-top: 32px; font-size: 16px; line-height: 28.32px; }
  .section--lavora { padding-bottom: 80px; }
  .section--lavora .posizioni, .section--lavora .form-contatti { padding-top: 60px; }
  .section--lavora .posizioni .tit-form { font-size: 36px; line-height: 42px; }
  .job { grid-template-columns: 1fr 1fr 48px; row-gap: 16px; padding: 24px 0; }
  .job__main { grid-column: 1 / 3; }
  .job__cta { grid-column: 3; grid-row: 1; align-self: start; }
  .job__title { font-size: 20px; line-height: 26px; }
  .job .circle { width: 48px; height: 48px; }
  .job-modal { padding: 0; }
  .job-modal__panel { min-height: 100%; padding: 56px 20px 48px; border-radius: 0; }
  .job-modal__close { top: 16px; right: 16px; }
  .job-modal__title { font-size: 32px; line-height: 38px; margin-bottom: 24px; }
  .job-modal .tit-apply { font-size: 26px; line-height: 32px; }
  .job-modal .divider { margin: 32px 0; }
  .job-modal .form-contatti form .wrap .item { width: 100%; }
}
@media (max-width: 575.98px) {
  .lcn-status { padding: 16px; }
  .lcn-status__panel { max-height: calc(100vh - 32px); padding: 40px 20px 24px; }
  .lcn-status__icon { width: 56px; height: 56px; margin-bottom: 20px; }
  .lcn-status__spinner { width: 40px; height: 40px; }
  .lcn-status__title { font-size: 22px; line-height: 28px; }
  .lcn-status__btn { width: 100%; min-width: 0; }
}
@media (max-width: 400px) { .upload__hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .section--lavora *, .job-modal * { animation: none !important; transition: none !important; }
  .lcn-status__spinner { animation: lcn-spin 1.6s linear infinite !important; }
}