/* Alessio Pellegrini: componenti. Richiede tokens.css. Nessuna ombra, nessun gradiente di brand. */

/* Button: unica variante, pillola lime. Uno per vista. */
.ap-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 24px;
  border: none; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand);
  font: 500 16px/normal var(--font-sans); letter-spacing: -0.34px; cursor: pointer; text-decoration: none; }
.ap-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Badge: pillola a solo contorno */
.ap-badge { display: inline-block; border: 1px solid var(--line); border-radius: var(--radius-full);
  padding: var(--space-badge-y) var(--space-badge-x); background: transparent; color: var(--ink);
  font: 400 13px/normal var(--font-sans); letter-spacing: 1.3px; text-transform: uppercase; }

/* Card: immagine a bleed pieno, tre elementi in overlay al massimo */
.ap-card { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-raised); color: var(--ink); aspect-ratio: 16 / 11; }
.ap-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap-card::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); } /* overlay scuro uniforme */
.ap-card > * { z-index: 1; }
.ap-card .ap-card-top { position: absolute; z-index: 2; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; }
.ap-card .ap-card-title { position: absolute; z-index: 2; left: 16px; right: 150px; bottom: 16px; margin: 0; font: 400 clamp(32px, 5vw, 56px)/1.1 var(--font-display); }
.ap-card .ap-card-cta { position: absolute; z-index: 2; right: 16px; bottom: 16px; color: var(--ink); text-decoration: underline; }

/* Field: campo di form scuro */
.ap-field { display: flex; flex-direction: column; gap: 8px; }
.ap-field label { font: 400 13px/normal var(--font-sans); letter-spacing: 1.3px; text-transform: uppercase; }
.ap-field input, .ap-field textarea { font: inherit; font-family: var(--font-sans); background: var(--surface-raised); color: var(--ink);
  border: 1px solid #dadbdd; border-radius: var(--radius-sm); padding: var(--space-field-y) var(--space-field-x); }
.ap-field input::placeholder, .ap-field textarea::placeholder { color: var(--ink); opacity: .7; }
.ap-field input:focus-visible, .ap-field textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Blocco di chiusura: unico blocco chiaro per vista, testo ink-inverse. Mai lime o bianco sopra. */
.ap-closing { background: var(--surface-inverse); color: var(--ink-inverse); border-radius: var(--radius-md); padding: var(--space-5) var(--space-4); }

/* Fascia a contorno: una sola frase manifesto per pagina, decorativa (la frase compare anche come testo normale) */
.ap-band { font: 400 clamp(64px, 14vw, 180px)/1 var(--font-display); color: transparent; -webkit-text-stroke: 1px var(--ink); white-space: nowrap; overflow: hidden; }

/* Separatore e tabella: hairline, mai ombra */
.ap-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.ap-table { width: 100%; border-collapse: collapse; }
.ap-table th, .ap-table td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); font: 400 16px/25.6px var(--font-sans); letter-spacing: -0.34px; }
.ap-table th { font: 400 13px/normal var(--font-sans); letter-spacing: 1.3px; text-transform: uppercase; }

/* Rivelazione in scroll (aggiungere .is-in con IntersectionObserver) */
.ap-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.ap-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ap-reveal { opacity: 1; transform: none; transition: none; } }