/* partecipa.css — stili specifici della pagina /partecipa
   Estende i pattern sg2-* e seg-* con il chooser iniziale e i wrapper di tipo. */

.ptc-chooser {
  margin: 32px auto 24px;
  max-width: 900px;
}

.ptc-chooser-title {
  font-family: var(--font-heading), serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 600;
  margin: 0 0 20px;
  text-align: center;
  color: var(--color-text);
}

.ptc-chooser-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .ptc-chooser-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.ptc-chooser-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px 22px;
  background: var(--color-bg-card, #fff);
  border: 2px solid var(--color-border, #e2dfd9);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.ptc-chooser-card:hover,
.ptc-chooser-card:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-bg-card-hover, #fbf9f5);
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(192, 68, 40, 0.08);
}

.ptc-chooser-card.selected {
  border-color: var(--color-primary);
  background: var(--color-bg-card-hover, #fbf9f5);
  box-shadow: 0 4px 12px rgba(192, 68, 40, 0.12);
}

.ptc-chooser-ico {
  font-size: 32px;
  line-height: 1;
}

.ptc-chooser-nome {
  font-family: var(--font-heading), serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
}

.ptc-chooser-sub {
  font-size: 14px;
  color: var(--color-text-soft, #666);
  line-height: 1.45;
}

/* I wrapper dei due form: gestiti via attributo hidden dal JS.
   Manteniamo un margin-top per separare dal chooser quando visibili. */
.ptc-form-wrap {
  margin-top: 24px;
}

.ptc-form-wrap[hidden] {
  display: none !important;
}

/* Redirect placeholder usato da /segnala e /suggerisci (scorciatoie). */
.ptc-redirect {
  text-align: center;
  padding: 64px 16px;
}