/* components.css — pezzi riusati da più pagine: hero generico, card,
   bottoni, form, messaggi, FAQ accordion. Non contiene nulla di
   specifico a una singola pagina — quello vive in pages/*.css. */

/* ── Hero ────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(3.5rem, 9vw, 7rem) var(--pad-x-lg);
  border: var(--rule);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(200,121,65,.09) 0%, transparent 60%),
    var(--surface);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(200,121,65,.06), transparent);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
}

.hero-badge {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--copper);
  border: 1px solid var(--copper-border);
  border-radius: 999px;
  padding: .3rem .9rem;
  margin-bottom: 1.25rem;
}

.hero h1 {
  max-width: none;
  margin: 0 0 1rem;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--text);
  text-shadow: 0 2px 20px rgba(200,121,65,.2);
  text-wrap: wrap;
}

.hero p {
  max-width: none;
  margin: 0 0 1.75rem;
  color: var(--text-muted);
  font-size: 1.15rem;
  line-height: 1.7;
  text-wrap: wrap;
}

/* ── Section title ───────────────────────────── */
.section-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 1.5rem;
}

/* ── Cards grid ──────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
  gap: 1.25rem;
}

/* ── Card ────────────────────────────────────── */
.card {
  position: relative;
  background: var(--surface);
  border: var(--rule);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--copper-dim), transparent);
  opacity: 0;
  transition: opacity .25s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--glow-copper);
  border-color: var(--copper);
}
.card:hover::before { opacity: 1; }

.card h2,
.card h3 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: .04em;
  margin-top: 0;
  color: var(--text);
}

.card h2 { font-size: 1.2rem; }
.card h3 { font-size: 1.05rem; }

.card p  { color: var(--text-muted); margin-bottom: .85rem; }
.card p:last-child { margin-bottom: 0; }

/* Seat counter pill */
.seats-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
  background: var(--copper-glow);
  border: 1px solid var(--copper-border);
  border-radius: 999px;
  padding: .25rem .75rem;
  margin-top: .5rem;
}

/* ── Indicatore posti (torneo) ─────────────────
   Riusato da tournament_list, tournament_detail e dal countdown in home
   tramite templates/tournaments/_seats_indicator.html — un solo posto
   dove cambiare soglia/testo/colore. */
.seats-indicator {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
}
.seats-indicator--low  { color: var(--gold); }
.seats-indicator--full { color: var(--danger-text); }

/* ── Buttons ─────────────────────────────────── */
.button,
button[type="submit"],
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  border: 1px solid var(--copper);
  border-radius: var(--radius-sm);
  padding: .75rem 1.75rem;
  background: transparent;
  color: var(--copper-bright);
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s, transform .15s;
  text-decoration: none;
}

.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--copper);
  color: var(--bg);
  box-shadow: 0 0 20px rgba(200,121,65,.4);
  transform: translateY(-1px);
  text-decoration: none;
}

.button-filled {
  background: var(--copper);
  color: var(--bg);
}
.button-filled:hover {
  background: var(--copper-bright);
}

/* ── Prose sections (cards with rich content) ── */
.prose-card {
  background: var(--surface);
  border: var(--rule);
  border-radius: var(--radius-md);
  padding: 2rem 2.25rem;
  margin-bottom: var(--section-gap);
  box-shadow: var(--shadow-sm);
}

.prose-card h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--copper-bright);
  margin: 0 0 1.25rem;
  padding-bottom: .6rem;
  border-bottom: var(--rule);
  text-wrap: wrap;
}

.prose-card h3 {
  font-family: 'Cinzel', serif;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 1.4rem 0 .5rem;
  text-wrap: wrap;
}

.prose-card p {
  color: var(--text-muted);
  margin: 0 0 .9rem;
  text-wrap: wrap;
}

/* Tetto alla misura del testo corrente — dentro un .prose-card largo
   (il container è unico, --container-wide) le righe di prosa non devono
   superare ~65-75 leggibili (DESIGN.md). Solo paragrafi e liste: titoli,
   tabelle e blocchi di codice restano a piena larghezza del box. */
.prose-card p,
.prose-card ul,
.prose-card ol {
  max-width: none;
}

/* ── Forms ───────────────────────────────────── */
.form {
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--radius-md);
  border: var(--rule);
  box-shadow: var(--shadow-sm);
}

.form label {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .4rem;
  margin-top: 1.1rem;
}
.form label:first-child { margin-top: 0; }

.form input,
.form textarea,
.form select {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--copper-border);
  border-radius: var(--radius-sm);
  background: var(--surface-mid);
  color: var(--text);
  font: inherit;
  font-family: 'Crimson Pro', Georgia, serif;
  transition: border-color .2s, box-shadow .2s;
}

.form input::placeholder,
.form textarea::placeholder {
  color: var(--text-dim);
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(200,121,65,.15);
}

/* ── Messages ────────────────────────────────── */
.message {
  padding: .9rem 1.25rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--copper-border);
  background: var(--copper-glow);
  color: var(--copper-bright);
}
.message.error   { background: var(--error-bg);   border-color: var(--error-border);   color: var(--danger-text); }
.message.success { background: var(--success-bg); border-color: var(--success-border); color: var(--conferma); }

/* ── FAQ accordion ───────────────────────────── */
details {
  border-bottom: 1px solid rgba(200,121,65,0.1);
  padding: .25rem 0;
}
details:last-child { border-bottom: none; }

summary {
  font-family: 'Cinzel', serif;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text);
  cursor: pointer;
  padding: .9rem 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color .2s;
}
summary:hover { color: var(--copper-bright); }
summary::after {
  content: '▾';
  color: var(--copper);
  font-size: .875rem;
  transition: transform .2s;
}
details[open] summary::after { transform: rotate(-180deg); }
details[open] summary { color: var(--copper-bright); }

details p {
  color: var(--text-muted);
  padding: 0 0 1rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

/* ── Badge "pillola" ────────────────────────────
   Condiviso da .hero-badge-simili contexts: usato standalone (non solo
   dentro .feedback-cta, che è home-only) in branco.html e vendi_grazie.html. */
.feedback-badge {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--copper);
  border: 1px solid var(--copper-border);
  border-radius: 999px;
  padding: .3rem 1rem;
}

/* ── Honeypot ──────────────────────────────────
   Campo antispam invisibile per gli utenti reali, presente nel DOM per i
   bot che compilano tutti i campi (gli screen reader lo saltano via
   aria-hidden). Condiviso tra i form pubblici — vendi.css ha una propria
   .vendi-honeypot identica per lo stesso scopo, nata prima di questa:
   non consolidati in un'unica regola per non toccare un file che
   funziona, ma il pattern è lo stesso. */
.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Error pages (404/500) ────────────────────── */
.error-orang {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  opacity: .85;
}

/* ── Mobile (≤720px) ───────────────────────────── */
@media (max-width: 720px) {
  .hero { padding: 2.5rem 1.25rem; border-radius: var(--radius-md); }
  .prose-card { padding: 1.5rem 1.25rem; }
}

/* ── Campi dei form su telefono ────────────────────────────
   Sotto i 16px iPhone/Safari zooma la pagina appena si tocca un campo (su
   Android non succede, ma il valore è comunque più leggibile). Vale per tutti
   i campi testuali del sito, qualunque sia la loro classe. */
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]),
  select,
  textarea {
    font-size: max(1rem, 16px);
  }
}