/* ==========================================================================
   Forza Barcelona — /reclutamiento (pruebas de acceso)
   Caricato solo da questa pagina via `extraCss`. Token e componenti di base
   (wrap, eyebrow, bars, form, btn-primary, alert) vengono da app.css.
   Il popup che porta qui sta invece in app.css: vive su tutte le pagine.
   ========================================================================== */

/* --- Tab dei gruppi -------------------------------------------------------
   Pastiglie affiancate, la attiva in granate pieno. Vanno a capo se non ci stanno:
   niente scorrimento laterale, che ritagliava le pastiglie (vedi sotto). */
.tryout-tabs {
  display: flex; gap: .6rem; flex-wrap: wrap;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
}
/* Raggio in pixel, NON `--r-pill` (999px). Con 999px il browser deve rimpicciolire
   il raggio finché ci sta nella scatola, e su alcuni motori quel calcolo sbaglia:
   il fondo pieno veniva disegnato con un lato squadrato e la pastiglia sembrava
   tagliata. 34px è già più di metà altezza, quindi la forma è la stessa senza
   nessun ridimensionamento da calcolare. */
.tryout-tab {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .7rem 1.5rem; border-radius: 34px;
  border: 1px solid rgba(6, 2, 1, .14); background: var(--blanc);
  text-decoration: none; color: var(--gris-fosc);
  /* Il fondo si ferma al bordo esterno arrotondato anche mentre la transizione
     di colore è in corso: senza, durante il tocco si vede lo spigolo. */
  background-clip: border-box;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.tryout-tab b {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.05rem; line-height: 1;
}
.tryout-tab span { font-size: .82rem; color: var(--gris); }
.tryout-tab:hover { border-color: var(--granate); transform: translateY(-2px); }
.tryout-tab.is-active {
  background: var(--granate); border-color: var(--granate); color: var(--blanc);
}
.tryout-tab.is-active span { color: rgba(255, 255, 255, .78); }

/* Niente `overflow` qui dentro. `overflow-x: auto` obbliga anche l'asse verticale
   a `auto`, quindi il contenitore RITAGLIA i figli: la pastiglia sollevata di 2px
   dall'hover e l'anello del focus (che sporge di 3px) finivano tagliati di netto,
   e il tasto si vedeva mozzato su un lato. Le due pastiglie ci stanno anche a
   320px; se un domani i gruppi diventano tre, vanno a capo invece di scorrere. */
@media (max-width: 560px) {
  .tryout-tabs { flex-wrap: wrap; gap: .5rem; }
  .tryout-tab { flex: none; padding: .65rem 1.3rem; border-radius: 32px; }
}

/* --- Griglia scheda + modulo --------------------------------------------- */
.tryout-grid {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start;
}
@media (max-width: 900px) { .tryout-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- Scheda del gruppo: i dati secchi, senza fronzoli --- */
.tryout-card {
  background: var(--os); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid rgba(6, 2, 1, .06);
}
.tryout-card-title {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: .6rem 0 1.4rem;
}
.tryout-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.2rem; }
.tryout-facts dt {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: .68rem; color: var(--gris);
  align-self: start; padding-top: .22rem;
}
.tryout-facts dd { margin: 0; font-size: 1rem; }
.tryout-facts dd b { font-family: var(--display); font-weight: 800; }
.tryout-note {
  margin: 1.3rem 0 0; padding-left: .9rem; border-left: 3px solid var(--or);
  font-size: .93rem; color: var(--gris-fosc);
}

/* --- Modulo --- */
.tryout-form-box { min-width: 0; }
.tryout-form-title { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 0; }
.tryout-form-sub { color: var(--gris); margin: .5rem 0 1.2rem; max-width: 46ch; }
.form--tryout { max-width: none; }
/* Due campi affiancati dove la coppia è naturale (nome+data, genitore+telefono).
   Sotto i 620px tornano incolonnati: un campo data stretto è impossibile da usare. */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.form-row > div { min-width: 0; display: flex; flex-direction: column; }
.lbl-opt {
  font-family: var(--body); font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: .78rem; color: var(--gris); margin-left: .4rem;
}
/* Il campo data nativo su iOS è più basso degli altri: pareggia le altezze. */
.form--tryout input[type="date"] { min-height: 3.05rem; }