/* Portale v2 — base (elementi HTML), layout (cornice e griglia), utilita'. */

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 88px; /* le ancore non finiscono sotto la testata */
  }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--step-body);
    line-height: var(--lh-text);
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  img, video { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
  p, figure, blockquote { margin: 0; }
  p { text-wrap: pretty; }
  button, input, select, textarea { font: inherit; color: inherit; }

  h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    line-height: var(--lh-head);
    letter-spacing: var(--track-head);
    text-wrap: balance;
  }

  :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  ::selection { background: var(--accent); color: var(--on-ink); }
  [hidden]:not([hidden="until-found"]) { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
}

@layer layout {
  /* Cornice: margini uguali a destra e a sinistra; oltre --max il contenuto resta al centro. */
  .wrap {
    padding-left: max(var(--m), calc((100% - var(--max)) / 2 + var(--m)), env(safe-area-inset-left, 0px));
    padding-right: max(var(--m), calc((100% - var(--max)) / 2 + var(--m)), env(safe-area-inset-right, 0px));
  }

  /* Griglia a 12 colonne */
  .grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
  }

  .section { padding-top: var(--section); }

  /* Titolo di sezione a sinistra, testo o azione a destra */
  .section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: clamp(32px, 4vw, 56px);

    & h2 { font-size: var(--step-head); max-width: 24ch; }
    & p { max-width: 44ch; }
  }
}

@layer utilities {
  .soft { color: var(--ink-soft); }
  .small { font-size: var(--step-small); }
  .tnum { font-variant-numeric: tabular-nums; }
  .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Entrata allo scorrimento: v2.js aggiunge .in quando l'elemento entra.
     Senza script (niente .js su <html>) il contenuto resta visibile. */
  @media (prefers-reduced-motion: no-preference) {
    .js .rv:not(.in) { opacity: 0; }
    .rv.in { animation: rise var(--dur-slow) var(--ease) both; }
    .rv.in.d1 { animation-delay: .07s; }
    .rv.in.d2 { animation-delay: .14s; }
    .rv.in.d3 { animation-delay: .21s; }
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
}