/* JUDE Studio — pagina Tool: card a rilievo, contenuto sfocato finché non si inserisce la mail.
   Usa token, nav, bottoni e footer da style.css. */

.tool-page { --lift: rgba(255, 253, 248, 0.9); --shade: rgba(57, 58, 55, 0.18); }
.tool-page .nav { opacity: 1; transform: none; pointer-events: auto; }
.nav__links a[aria-current="page"] { background-size: 100% 1px; }

/* ---------- INTESTAZIONE + SBLOCCO ---------- */
.tool-head {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(130px, 20vh, 220px) var(--gutter) clamp(40px, 7vh, 80px);
}
.tool-head__kicker { margin: 0 0 1.2em; text-transform: uppercase; letter-spacing: 0.32em; font-weight: 500; font-size: clamp(11px, 0.9vw, 15px); }
.tool-head__title {
  margin: 0;
  font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800;
  font-size: clamp(42px, 7vw, 128px); line-height: 0.96; text-transform: uppercase;
}
.tool-head__lead { max-width: 30em; margin: 1.2em 0 2em; font-size: 1.15em; }

.gate { max-width: 640px; }
.gate__row {
  display: flex; gap: 10px; padding: 8px;
  border-radius: 999px; background: var(--carta);
  box-shadow: inset 4px 4px 10px var(--shade), inset -4px -4px 10px var(--lift);
}
.gate input[type="email"] {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; color: var(--grafite); padding: 0 18px;
}
.gate input[type="email"]::placeholder { color: rgba(57, 58, 55, 0.55); }
.gate__row:focus-within { box-shadow: inset 4px 4px 10px var(--shade), inset -4px -4px 10px var(--lift), 0 0 0 2px var(--petrolio); }
.gate .btn { border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; }
.gate__consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.gate__consent input { margin-top: 3px; accent-color: var(--grafite); width: 16px; height: 16px; flex: none; }
.gate__msg { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; color: var(--mattone); }
.gate__done { display: none; margin: 0; font-weight: 600; }
.is-unlocked .gate { display: none; }
.is-unlocked .gate__done { display: block; }

/* ---------- CARD A RILIEVO ---------- */
.tools {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(24px, 4vh, 48px) var(--gutter) clamp(90px, 14vh, 160px);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: clamp(24px, 3vw, 44px);
}
.tool {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 36px);
  border-radius: 28px;
  background: linear-gradient(145deg, #F4F0E7, #E6E0D3);
  box-shadow:
    -10px -10px 24px var(--lift),
    12px 14px 30px var(--shade),
    inset 1px 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.tool::before { /* filo di colore in alto, come le linee JUDE */
  content: ""; position: absolute; left: clamp(24px, 2.4vw, 36px); top: 0;
  width: 56px; height: 8px; border-radius: 0 0 8px 8px; background: var(--c);
}
.tool:hover {
  transform: translateY(-6px);
  box-shadow: -14px -14px 30px var(--lift), 18px 22px 40px rgba(57, 58, 55, 0.22), inset 1px 1px 0 rgba(255, 255, 255, 0.7);
}
.tool__reel { margin: 10px 0 8px; text-transform: uppercase; letter-spacing: 0.3em; font-size: 11px; font-weight: 500; opacity: 0.75; }
.tool__title {
  margin: 0 0 22px;
  font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800;
  font-size: clamp(24px, 2.1vw, 36px); line-height: 1.02; text-transform: uppercase;
}

.tool__body { display: flex; flex-direction: column; gap: 16px; flex: 1; transition: filter 0.8s var(--ease-out), opacity 0.8s; }
.tool__preview {
  color: var(--c);
  border-radius: 18px; padding: 22px;
  background: var(--carta);
  box-shadow: inset 5px 5px 12px var(--shade), inset -5px -5px 12px var(--lift);
}
.tool__preview svg { display: block; width: 100%; height: auto; }
.tool__desc { margin: 0; }
.tool__open {
  margin-top: auto; align-self: flex-start;
  text-decoration: none; text-transform: uppercase; letter-spacing: 0.28em; font-size: 12px; font-weight: 600;
  padding: 0.95em 1.6em; border-radius: 999px; color: var(--grafite); background: var(--carta);
  box-shadow: -4px -4px 10px var(--lift), 5px 5px 12px var(--shade);
}
.tool__open:hover, .tool__open:focus-visible { background: var(--grafite); color: var(--carta); }

/* Bloccato: anteprima sfocata e lucchetto */
html:not(.is-unlocked) .tool__body { filter: blur(9px); opacity: 0.75; pointer-events: none; user-select: none; }
.tool__lock {
  position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-transform: uppercase; letter-spacing: 0.28em; font-size: 11px; font-weight: 600;
  pointer-events: none; transition: opacity 0.5s;
}
.tool__lock svg { width: 34px; height: 34px; }
.is-unlocked .tool__lock { opacity: 0; }

/* ---------- MOBILE ---------- */
@media (max-width: 600px) {
  .tool-head__title { font-size: clamp(30px, 9.4vw, 48px); }
  .gate__row { flex-direction: column; border-radius: 24px; }
  .gate input[type="email"] { padding: 14px 14px; }
}