/* Vendi v2: impaginazione della pagina e dei tre strumenti. Gemella di Valuta (pages/valuation.css): stessi pannelli,
   numeri tondi e campi; qui solo token e componenti del design system. */

@layer pages {
  .sell { padding-bottom: var(--block); }

  /* ---------- Apertura: testo a sinistra, scena animata a destra ---------- */
  .sell-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 96px);
    padding-top: clamp(32px, 5vw, 72px);

    & h1 { margin-top: 20px; font-size: clamp(2.25rem, 1.3rem + 2.8vw, 4rem); max-width: 20ch; }
  }
  .sell-lead { margin-top: 24px; max-width: 60ch; color: var(--ink-soft); font-size: var(--step-body); }
  .sell-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
  .sell-hint {
    margin-top: 24px;
    max-width: 60ch;
    padding: 14px 18px;
    border-radius: var(--r-md);
    background: var(--tint);
    font-size: var(--step-small);
  }
  /* le scene usano le classi di «Cosa puoi fare» (components/services-map.css), qui solo il riquadro */
  .sell-hero-art {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--tint);
  }
  @media (max-width: 900px) {
    .sell-hero { grid-template-columns: minmax(0, 1fr); }
    .sell-hero-art { max-width: 520px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .sell-hero-copy > * { animation: rise var(--dur-slow) var(--ease) both; }
    .sell-hero-copy > :nth-child(2) { animation-delay: .06s; }
    .sell-hero-copy > :nth-child(3) { animation-delay: .12s; }
    .sell-hero-copy > :nth-child(n+4) { animation-delay: .18s; }
  }

  /* numero tondo, come i passi di Valuta */
  .sell .n {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--field-h);
    height: var(--field-h);
    border-radius: 50%;
    background: var(--ink);
    color: var(--on-ink);
    font: 600 var(--step-body) var(--font);
  }

  /* ---------- Visione: timeline 1 -> 2 -> 3 su fascia scura ----------
     Ogni passo disegna il tratto verso il successivo (::before binario, ::after riempimento): quando la fascia
     entra (.rv -> .in, v2.js) il riempimento avanza da un tondo all'altro e i tondi si accendono in fila.
     Senza movimento resta lo stato finale: linea piena, tondi accesi, il 3 in verde (traguardo). */
  .sell-vision-band { padding-top: clamp(40px, 5vw, 72px); }
  .sell-vision {
    --tl-gap: clamp(20px, 3vw, 48px);
    --tl-step: .8s;   /* tempo fra un passo e il successivo */
    display: grid;
    gap: clamp(28px, 3.5vw, 48px);
    padding: clamp(24px, 4vw, 56px);
    border-radius: var(--r-lg);
    background: var(--ink);
    color: var(--on-ink);
  }
  .sell-vision-head {
    display: grid;
    gap: 14px;

    & > .badge { justify-self: start; background: var(--on-ink-fill); color: var(--on-ink); }
    & h2 { font-size: var(--step-lead); }
  }
  .sell-vision-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tl-gap);
    margin: 0;
    padding: 0;
    list-style: none;

    & li { position: relative; display: grid; align-content: start; gap: 8px; }
    & li:nth-child(1) { --i: 0; }
    & li:nth-child(2) { --i: 1; }
    & li:nth-child(3) { --i: 2; }
    & .n {
      position: relative;
      z-index: 1;
      margin-bottom: 10px;
      background: var(--on-ink);
      color: var(--ink);
      transition: translate var(--dur) var(--ease);
    }
    & li:last-child .n { background: var(--accent); color: var(--on-ink); }
    & li:hover .n { translate: 0 -2px; }
    & .sell-step-art {
      aspect-ratio: 9 / 5;
      margin-bottom: 8px;
      overflow: hidden;
      border-radius: var(--r-md);
      background: var(--ground);
    }
    & h3 { font-size: var(--step-body); font-weight: 600; }
    & p { color: var(--on-ink-soft); font-size: var(--step-small); max-width: 32ch; }

    /* tratto verso il passo successivo: dal centro del tondo al centro del tondo dopo */
    & li:not(:last-child)::before,
    & li:not(:last-child)::after {
      content: "";
      position: absolute;
      top: calc(var(--field-h) / 2 - 1px);
      left: calc(var(--field-h) / 2);
      width: calc(100% + var(--tl-gap));
      height: 2px;
      border-radius: 2px;
      background: var(--on-ink-fill);
      transform-origin: left center;
    }
    & li:not(:last-child)::after { background: var(--on-ink-soft); }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sell-vision.in .sell-vision-list {
      & .n { animation: sell-dot-on .5s var(--ease-spring) calc(.35s + var(--i) * var(--tl-step)) both; }
      & li:not(:last-child)::after {
        animation: sell-line-fill calc(var(--tl-step) - .15s) var(--ease-inout) calc(.6s + var(--i) * var(--tl-step)) both;
      }
      /* ogni scena parte quando il suo tondo si accende */
      & .do-scene * { animation-delay: calc(var(--d, 0s) + .35s + var(--i) * var(--tl-step)); }
      & .sell-step-art, & h3, & p { animation: rise var(--dur-slow) var(--ease) calc(.4s + var(--i) * var(--tl-step)) both; }
      & p { animation-delay: calc(.5s + var(--i) * var(--tl-step)); }
    }
  }
  .js .sell-vision:not(.in) .do-scene * { animation-play-state: paused; } /* le scene aspettano che la fascia sia in vista */
  @keyframes sell-dot-on {
    from { background: var(--on-ink-faint); color: var(--on-ink-soft); scale: .82; }
  }
  @keyframes sell-line-fill {
    from { transform: scaleX(0); }
  }
  @keyframes sell-line-fill-y {
    from { transform: scaleY(0); }
  }

  /* telefono: i passi uno sotto l'altro, la linea scende a sinistra dei tondi */
  @media (max-width: 900px) {
    .sell-vision-list {
      grid-template-columns: minmax(0, 1fr);

      & li {
        grid-template-columns: var(--field-h) minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 4px;
      }
      & .n { grid-row: span 3; margin-bottom: 0; }
      & li:not(:last-child)::before,
      & li:not(:last-child)::after {
        top: calc(var(--field-h) / 2);
        left: calc(var(--field-h) / 2 - 1px);
        width: 2px;
        height: calc(100% + var(--tl-gap));
        transform-origin: center top;
      }
    }
    @media (prefers-reduced-motion: no-preference) {
      .sell-vision.in .sell-vision-list li:not(:last-child)::after { animation-name: sell-line-fill-y; }
    }
  }

  /* ---------- Pannello chiaro (percorso, sintesi) ---------- */
  .sell-path { padding-top: clamp(56px, 7vw, 120px); }
  .sell-box {
    padding: clamp(24px, 4vw, 56px);
    border-radius: var(--r-lg);
    background: var(--tint);
  }
  .sell-box-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 16px clamp(24px, 4vw, 64px);

    & .badge { background: var(--ground); }
    & h2 { margin-top: 14px; font-size: var(--step-head); max-width: 18ch; }
    & .soft { max-width: 56ch; }
  }
  .sell-kicker { margin: clamp(28px, 3.5vw, 48px) 0 14px; font-weight: 600; }
  .sell-focus {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;

    & li { display: grid; align-content: start; gap: 8px; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-md); background: var(--ground); }
    & h3 { font-size: var(--step-lead); }
    & p { color: var(--ink-soft); }
  }
  @media (max-width: 1080px) {
    .sell-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    .sell-box-head { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    .sell-focus { grid-template-columns: 1fr; }
  }

  /* ---------- Checklist e metodo ---------- */
  .sell-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    padding-top: var(--gap);
  }
  .sell-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(24px, 3.5vw, 48px);
    border-radius: var(--r-lg);
    background: var(--ground);
    box-shadow: inset 0 0 0 1px var(--line);

    & > .badge { align-self: flex-start; background: var(--accent-soft); }
    & h2 { font-size: var(--step-lead); max-width: 24ch; }
    & p { max-width: 56ch; }

    &.soft-bg { background: var(--accent-soft); box-shadow: none; }
    &.soft-bg > .badge { background: var(--ground); }
  }
  @media (max-width: 900px) {
    .sell-pair { grid-template-columns: 1fr; }
  }

  /* ---------- Strumenti operativi ---------- */
  .sell-tools-intro { padding-top: clamp(56px, 7vw, 120px); }
  .sell-chapter-badge { justify-self: start; background: var(--on-ink-fill); color: var(--on-ink); }
  .sell-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--gap);
    padding-top: var(--gap);
  }
  .sell-tool {
    display: grid;
    gap: 16px;
    padding: clamp(22px, 2.6vw, 36px);
    border-radius: var(--r-lg);
    background: var(--ground);
    box-shadow: inset 0 0 0 1px var(--line);
    scroll-margin-top: 140px;
    transition: box-shadow var(--dur) var(--ease);

    & h3 { font-size: var(--step-lead); }
    &.is-active { box-shadow: inset 0 0 0 2px var(--accent); }
  }
  .sell-tool-head { display: flex; align-items: center; gap: 12px; }
  .sell-prefill {
    padding: 12px 16px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
  }
  .sell-form { display: grid; gap: 20px; }
  .sell-fields { display: grid; gap: 16px; }
  .sell-tool-actions { display: flex; flex-wrap: wrap; gap: 10px; }

  /* esito sotto il modulo */
  .sell-result {
    display: grid;
    gap: 6px;
    padding: 20px;
    border-radius: var(--r-md);
    background: var(--tint);

    & .label { margin: 0; }
  }
  .sell-score { font: 400 var(--step-head)/var(--lh-head) var(--display); letter-spacing: var(--track-head); }
  .sell-result-title { font-weight: 600; font-size: var(--step-body); }
  .sell-result-body strong, .sell-count { font-weight: 600; }
  .sell-missing {
    display: grid;
    gap: 8px;
    margin-top: 10px;

    & ul { display: grid; gap: 8px; max-height: 320px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
    & li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--ground); }
  }
  @media (max-width: 1080px) {
    .sell-tools { grid-template-columns: 1fr; }
  }

  /* ---------- Sintesi ---------- */
  .sell-summary { padding-top: clamp(56px, 7vw, 120px); }
  .sell-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--gap);
    margin: clamp(28px, 3.5vw, 48px) 0 0;

    & > div { padding: 20px; border-radius: var(--r-md); background: var(--ground); }
    & dt { color: var(--ink-soft); font-size: var(--step-small); }
    & dd { margin: 4px 0 0; font-size: var(--step-lead); font-family: var(--display); }
  }
  .sell-next {
    display: grid;
    gap: 4px;
    margin-top: var(--gap);
    padding: 20px;
    border-radius: var(--r-md);
    background: var(--accent-soft);

    & .label { margin: 0; color: var(--ink); }
    & p:last-child { font-weight: 500; max-width: 72ch; }
  }

  .sell-end { padding-top: clamp(48px, 5vw, 80px); }
}