/* Valuta v2: impaginazione della pagina e dei due moduli. I pezzi sono componenti del design system
   (components/dialog.css, form.css, messages.css); qui stanno griglia del modulo e riepilogo della stima. */

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

  /* ---------- Apertura: testo a sinistra, scena "Stima online" a destra ---------- */
  .val-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) 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.2rem + 3.4vw, 4.5rem); max-width: 16ch; }
  }
  .val-lead { margin-top: 24px; max-width: 58ch; color: var(--ink-soft); font-size: var(--step-body); }
  .val-lead strong { color: var(--ink); font-weight: 600; }
  .val-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; }
  .val-hero-stage {
    justify-self: end;
    width: min(100%, 460px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--tint);
  }
  @media (prefers-reduced-motion: no-preference) {
    .val-hero-copy > * { animation: rise var(--dur-slow) var(--ease) both; }
    .val-hero-copy > :nth-child(2) { animation-delay: .06s; }
    .val-hero-copy > :nth-child(3) { animation-delay: .12s; }
    .val-hero-copy > :nth-child(4) { animation-delay: .18s; }
    .val-hero-stage { animation: rise var(--dur-slow) var(--ease) .12s both; }
  }
  @media (max-width: 900px) {
    .val-hero { grid-template-columns: 1fr; }
    .val-hero-stage { justify-self: start; width: min(100%, 340px); }
  }
  /* telefono: la scena e' solo un'illustrazione, prima vengono i due servizi */
  @media (max-width: 640px) {
    .val-hero-stage { display: none; }
  }

  /* ---------- Come lavora il servizio: tre passi numerati ---------- */
  .val-how { padding-top: clamp(56px, 7vw, 120px); }
  .val-how-box {
    padding: clamp(24px, 4vw, 56px);
    border-radius: var(--r-lg);
    background: var(--tint);
  }
  .val-how-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 16px clamp(24px, 4vw, 64px);
    margin-bottom: clamp(28px, 3.5vw, 48px);

    & h2 { font-size: var(--step-head); max-width: 14ch; }
    & .val-how-kicker { font-weight: 600; }
    & .soft { margin-top: 6px; max-width: 48ch; }
  }
  .val-steps {
    display: grid;
    grid-template-columns: repeat(3, 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, 32px); border-radius: var(--r-md); background: var(--ground); }
    & .n {
      display: grid;
      place-items: center;
      width: var(--field-h);
      height: var(--field-h);
      margin-bottom: 12px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--on-ink);
      font: 600 var(--step-body) var(--font);
    }
    & li:last-child .n { background: var(--accent); }
    & h3 { font-size: var(--step-lead); }
    & p { color: var(--ink-soft); }
  }
  @media (max-width: 900px) {
    .val-how-head { grid-template-columns: 1fr; }
    .val-steps { grid-template-columns: 1fr; }
    .val-steps li { grid-template-columns: auto 1fr; column-gap: 16px; }
    .val-steps .n { grid-row: span 2; margin-bottom: 0; }
  }

  /* ---------- I due servizi ---------- */
  .val-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    padding-top: var(--gap);
  }
  .val-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(24px, 3.5vw, 48px);
    border-radius: var(--r-lg);
    background: var(--ground);
    box-shadow: inset 0 0 0 1px var(--line);
    scroll-margin-top: 140px;

    & > .badge { align-self: flex-start; background: var(--accent-soft); }
    & h2 { font-size: var(--step-head); }
    & .val-copy { color: var(--ink-soft); max-width: 56ch; }

    &.dark { background: var(--ink); color: var(--on-ink); box-shadow: none; }
    &.dark > .badge { background: var(--on-ink-fill); color: var(--on-ink); }
    &.dark .val-copy { color: var(--on-ink-soft); }
    &.dark .val-note { background: var(--on-ink-faint); }
    &.dark .val-note p { color: var(--on-ink-soft); }
  }
  .val-note {
    padding: 18px 20px;
    border-radius: var(--r-md);
    background: var(--tint);

    & h3 { font-family: var(--font); font-size: var(--step-body); font-weight: 600; letter-spacing: 0; }
    & p { margin-top: 4px; color: var(--ink-soft); font-size: var(--step-small); }
  }
  .val-card.dark .ticks li::before { border-color: var(--accent-soft); }
  .val-card-foot { display: grid; gap: 12px; margin-top: auto; padding-top: 8px; }
  .val-auth { font-size: var(--step-small); color: var(--ink-soft); }
  .val-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  @media (max-width: 900px) {
    .val-services { grid-template-columns: 1fr; }
  }

  /* ---------- Modulo ---------- */
  /* Richiesta con professionista: asterisco sulle etichette dei campi obbligatori (il pulsante di invio resta spento senza di loro) */
  #valuationAgentModal .vf:has(:required) > .label::after { content: " *"; }

  .val-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;

    & .full { grid-column: 1 / -1; }
  }
  @media (max-width: 640px) {
    .val-grid { grid-template-columns: 1fr; }
  }
  .val-form-errors p { margin-top: 6px; color: var(--heart); font-size: var(--step-small); font-weight: 500; }
  .val-form-consent { margin-top: 24px; }

  .val-form-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 24px;

    & p { max-width: 46ch; }
  }

  /* ---------- Esito: stima e riepilogo ---------- */
  .val-result {
    display: grid;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 28px;
    box-shadow: 0 1px 0 var(--line);

    & > h3 { font-size: var(--step-lead); }
  }
  .val-estimate {
    display: grid;
    gap: 6px;
    padding: clamp(20px, 3vw, 32px);
    border-radius: var(--r-md);
    background: var(--accent-soft);

    &.off { background: var(--tint); }
    & .val-kv { margin-top: 14px; }
  }
  .val-price { font: 400 var(--step-head)/var(--lh-head) var(--display); letter-spacing: var(--track-head); }
  .val-pdf {
    display: grid;
    justify-items: start;
    gap: 6px;
    padding: 18px 20px;
    border-radius: var(--r-md);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .val-kv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px 20px;
    margin: 0;

    & dt { color: var(--ink-soft); font-size: var(--step-small); }
    & dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
    & .wide { grid-column: span 2; }
  }
  @media (max-width: 640px) {
    .val-kv .wide { grid-column: auto; }
  }
}

/* Finestra «Salva il PDF»: i gruppi di campi nascosti restano nascosti anche se la griglia ha display proprio */
[data-save-only][hidden]{display:none !important}