/* Come lavoro (server/views/process.mjs, public/assets/js/process.js): indice delle fasi, linea del tempo, confronto prima/dopo,
   foglio di contatto («provino», su una sezione carta), software, backup e consegna. Niente elementi fissi o sticky. */

/* ---- introduzione e indice delle fasi */
.proc-intro__grid { display: grid; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (min-width: 960px) { .proc-intro__grid { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); } }
.proc-intro__text { display: grid; gap: 22px; }
.proc-intro__text .muted { max-width: 62ch; }
.proc-index { padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--line); border-radius: var(--r-block); background: var(--bg-2); }
.proc-index__title { margin-bottom: 10px; font: 500 var(--fs-kicker)/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.proc-index__list { display: grid; }
@media (min-width: 560px) and (max-width: 959px) { .proc-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
.proc-index__list a { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--text); transition: color .25s; }
.proc-index__list li:last-child a { border-bottom: 0; }
.proc-index__n { min-width: 2ch; font: 400 1.25rem/1 var(--font-display); color: var(--accent); font-variant-numeric: lining-nums; }
@media (hover: hover) { .proc-index__list a:hover { color: var(--accent-2); } }

/* ---- le fasi: immagine e testo, a zig-zag sul computer */
.proc-steps { display: grid; gap: clamp(64px, 9vw, 136px); }
.proc-step { display: grid; gap: clamp(22px, 3vw, 40px); scroll-margin-top: calc(var(--header-space) + 20px); }
.proc-step > * { min-width: 0; }
@media (min-width: 1000px) {
  .proc-step { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 88px); align-items: center; }
  .proc-step--flip .proc-step__media { order: 2; }
}
.proc-step__media { overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--r-card); background: var(--c, var(--surface)); box-shadow: var(--shadow); }
.proc-step__media img { width: 100%; height: 100%; object-fit: cover; }
.proc-step__body { display: grid; gap: 16px; align-content: start; }
.proc-step__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.proc-step__num { font: 300 clamp(3.4rem, 2.6rem + 3vw, 5.4rem)/.9 var(--font-display); color: var(--accent); font-variant-numeric: lining-nums; letter-spacing: -.01em; }
.proc-step__when { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fs-kicker)/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.proc-step__when .i { width: 15px; height: 15px; color: var(--accent); }
.proc-step__title { font-size: var(--fs-h2); font-weight: 450; }
.proc-step__lead { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); line-height: 1.55; color: var(--text); max-width: 56ch; }
.proc-step__text { display: grid; gap: .9em; color: var(--muted); max-width: 62ch; }
.proc-step__tools { display: grid; gap: 10px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.proc-step__tools-label { font: 500 .6875rem/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.proc-step__tools .tag, .proc-safe .tag { min-height: 36px; }

/* ---- il filo del colore: confronto prima/dopo (il cursore è --pos, da 0% a 100%) */
.ba-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; }
.ba-picker__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; max-width: 100%; padding: 6px 18px 6px 6px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: transparent; color: var(--muted); font: 450 var(--fs-small)/1.25 var(--font-ui); text-align: left; transition: color .25s, border-color .25s, background-color .25s; }
.ba-picker__img { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: var(--c, var(--surface)); }
.ba-picker__img img { width: 100%; height: 100%; object-fit: cover; }
.ba-picker__btn[aria-pressed='true'] { border-color: var(--accent); background: rgba(212, 180, 131, .08); color: var(--text); }
@media (hover: hover) { .ba-picker__btn:hover { border-color: var(--accent); color: var(--text); } }
.ba-list { display: grid; gap: clamp(40px, 6vw, 72px); }
/* tutta la foto deve stare nello schermo mentre si trascina: la larghezza segue l'altezza disponibile (--ar = larghezza/altezza) */
.ba { display: grid; gap: 14px; width: min(100%, calc(74vh * var(--ar, 1.5))); width: min(100%, calc(74svh * var(--ar, 1.5))); margin: 0 auto; }
.ba__stage { --pos: 50%; position: relative; overflow: hidden; border-radius: var(--r-block); background: var(--c, var(--surface)); box-shadow: var(--shadow); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ba.is-ready .ba__stage { cursor: ew-resize; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: rgba(241, 236, 228, .92); box-shadow: 0 0 0 1px rgba(13, 12, 11, .25), 0 0 18px rgba(0, 0, 0, .45); pointer-events: none; }
.ba__handle { position: absolute; top: 50%; left: var(--pos); display: grid; place-items: center; width: 54px; height: 54px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--text); color: var(--bg); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .75); cursor: ew-resize; transition: transform .25s var(--ease), background-color .25s; }
.ba__handle .i { width: 24px; height: 24px; stroke-width: 1.8; }
.ba__handle:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 4px; }
.ba__stage.is-dragging .ba__handle, .ba__handle:active { transform: translate(-50%, -50%) scale(1.08); background: var(--accent-2); }
.ba__tag { position: absolute; top: 14px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(13, 12, 11, .72); color: var(--text); font: 500 .6875rem/1.2 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ba__tag--before { left: 14px; }
.ba__tag--after { right: 14px; }
.ba__caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.ba__title { font: 450 1.45rem/1.2 var(--font-display); }
.ba__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out); }
@media (hover: hover) { .ba__title a:hover { background-size: 100% 1px; } }
.ba__meta { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.proc-note { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-top: 22px; font-size: var(--fs-xs); color: var(--muted); max-width: 70ch; }
.proc-note .i { width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }

/* ---- il mio provino: un foglio di contatto (strisce di pellicola sulla carta, fotogrammi scelti cerchiati a matita grassa) */
.proc-sheet { --grease: #d6503a; --film: #0f0d0b; padding: clamp(12px, 2vw, 26px); border-radius: 4px; background: #191612; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 30px 60px -30px rgba(27, 23, 19, .55), 0 2px 6px rgba(27, 23, 19, .2); color: #efe8dc; }
.proc-sheet__edge { margin-bottom: 10px; font: 600 .6875rem/1.2 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .22em; text-transform: uppercase; color: #e3a64a; }
.proc-sheet__frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6px; }
@media (min-width: 640px) { .proc-sheet__frames { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .proc-sheet__frames { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.proc-frame { position: relative; min-width: 0; }
.proc-frame__link {
  position: relative; display: block; padding: 20px 5px 34px;
  /* fori della pellicola sopra e sotto il fotogramma */
  background:
    repeating-linear-gradient(90deg, rgba(239, 232, 220, .82) 0 7px, transparent 7px 17px) 3px 6px / calc(100% - 6px) 8px no-repeat,
    repeating-linear-gradient(90deg, rgba(239, 232, 220, .82) 0 7px, transparent 7px 17px) 3px calc(100% - 6px) / calc(100% - 6px) 8px no-repeat,
    var(--film);
  color: inherit;
}
.proc-frame__img { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: #000; }
.proc-frame__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.94); transition: filter .4s var(--ease), transform .8s var(--ease-out); }
.proc-frame__img.is-vertical img { object-fit: contain; }
.proc-frame__num { position: absolute; left: 9px; bottom: 15px; display: flex; gap: 10px; font: 600 .625rem/18px ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .1em; color: #e3a64a; } /* tra il fotogramma e i fori, come sulla pellicola */
.proc-frame__num small { font: inherit; opacity: .7; }
.proc-frame__mark { position: absolute; z-index: 1; inset: 8px 0; border: 3px solid var(--grease); border-radius: 46% 54% 50% 48% / 56% 46% 54% 44%; transform: rotate(-2.4deg); opacity: .92; pointer-events: none; }
.proc-frame:nth-child(even) .proc-frame__mark { transform: rotate(1.8deg); border-radius: 52% 46% 48% 54% / 46% 56% 44% 54%; }
.proc-frame.is-chosen .proc-frame__img img { filter: none; }
.proc-frame__link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
@media (hover: hover) { .proc-frame__link:hover .proc-frame__img img { filter: brightness(1.05); transform: scale(1.03); } }
.proc-sheet__caption { margin-top: 14px; font-size: var(--fs-small); color: rgba(239, 232, 220, .78); max-width: 72ch; }

/* ---- software */
.sw-grid { align-items: stretch; }
.sw-card { position: relative; display: grid; gap: 10px; align-content: start; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); scroll-margin-top: calc(var(--header-space) + 20px); transition: border-color .4s var(--ease), box-shadow .6s var(--ease); }
.sw-card:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sw-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.sw-card__icon { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1px solid rgba(212, 180, 131, .45); color: var(--accent-2); }
.sw-card__icon .i { width: 19px; height: 19px; }
.sw-card__kind { font: 500 .6875rem/1.35 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.sw-card__name { font-size: clamp(1.45rem, 1.3rem + .5vw, 1.8rem); line-height: 1.12; }
.sw-card__vendor { font-size: var(--fs-xs); color: var(--muted); }
.sw-card__text { font-size: var(--fs-small); color: var(--muted); }
.sw-card__link { justify-self: start; margin-top: 4px; }

/* ---- backup e consegna */
.proc-safe__grid { display: grid; gap: var(--gap); }
@media (min-width: 860px) { .proc-safe__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proc-safe__card { display: grid; gap: 12px; align-content: start; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--r-block); background: var(--bg); }
.proc-safe__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.proc-safe__icon .i { width: 22px; height: 22px; }
.proc-safe__when { font: 500 var(--fs-kicker)/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.proc-safe__title { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); }
.proc-safe__text { color: var(--muted); max-width: 56ch; }
.proc-safe__card .btn { justify-self: start; }

/* etichette brevi in maiuscoletto: niente sillabazione automatica (tedesco, russo, francese), come .kicker e .label di site.css */
:is(.proc-index__title, .proc-step__when, .proc-step__tools-label, .ba__tag, .sw-card__kind, .proc-safe__when, .proc-sheet__edge) { hyphens: manual; -webkit-hyphens: manual; }