/* pages/chi-siamo-branco.css — /chi-siamo/, /branco/, e il teaser del
   Branco in home. Caricato su tutt'e tre via {% block page_css %}: sono
   coppie/triple di pagine che condividono lo stesso componente card+form
   (vedi templates/website/_branco_form.html e _orang_avatar.html), non
   file indipendenti — tenerli insieme qui evita di dover ricordarsi di
   aggiornare tre posti quando cambia una delle due.

   Erano interamente in verde giungla (#6cc44a e affini), scollegati
   dalla palette arancio/nero del resto del sito. Molte regole erano
   solo un override colore sopra .card/.prose-card/.button-filled già
   arancioni di default: dove il verde tokenizzato coincide col
   default, l'override è stato rimosso invece di essere ricolorato. */

/* ── Chi siamo (/chi-siamo/) ──────────────────── */
.cs-page { display: flex; flex-direction: column; gap: var(--section-gap); }

.cs-hero {
  position: relative;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--pad-x-md);
  border: var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.cs-jungle-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cs-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.cs-hero-text { flex: 1; min-width: 0; }

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

.cs-hero-text h1 {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 .75rem;
  line-height: 1.05;
  text-shadow: 0 0 40px rgba(200,121,65,.18);
}

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

.cs-hero-avatar { flex-shrink: 0; position: relative; }

/* Il nome resta "ring" per non rinominare classe+template per un
   dettaglio, ma la cornice non è più un cerchio: il logo è un lockup
   simbolo+scritta "OranguCards", non un ritratto quadrato — un crop
   circolare tagliava sia i lati del pentagono sia tutta la scritta in
   basso. Quadrato arrotondato con un po' di padding, il logo intero
   resta visibile. */
.cs-orang-ring {
  width: 145px;
  height: 145px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border: 2px solid var(--copper-border);
  overflow: hidden;
  background: var(--surface-mid);
}

.cs-est-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: var(--surface-high);
  border: 1px solid var(--copper-border);
  border-radius: 999px;
  padding: .22rem .65rem;
  font-family: 'Cinzel', serif;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
}

/* story quote */
.cs-story { background: var(--surface) !important; }

/* Prima un border-left da 2px come "stripe" della citazione — ban
   assoluto di DESIGN.md (side-tab border). Sostituito con lo stesso
   dispositivo top-rule usato da hero/card (::before, linea a gradiente)
   invece di una nuova decorazione inventata. */
.cs-quote {
  position: relative;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--copper-bright);
  line-height: 1.6;
  margin: 0 0 1rem;
  padding-top: 1.1rem;
}
.cs-quote::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--copper), transparent);
}

/* Icona valore — prima era un'emoji (🃏🧠🌿), fuori registro nell'estetica
   dark fantasy del sito (PRODUCT.md mette il fan-site amatoriale tra le
   anti-referenze). Stessa costruzione dell'icona Instagram in
   pages/contacts.css (.ig-card-icon): box copper + SVG a linea in
   currentColor, non un set di emoji. */
.cs-val-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--copper);
  background: var(--copper-glow);
  border: 1px solid var(--copper-border);
  border-radius: var(--radius-md);
  margin-bottom: .75rem;
}
.cs-val-icon svg { width: 22px; height: 22px; display: block; }
.cs-vals .card h3 { color: var(--copper-bright); font-size: .9rem; }

.cs-branco-intro strong { color: var(--copper-bright); }
.cs-cta h2 { color: var(--text) !important; }

/* ── Card di un membro + form "Entra nel branco" ──
   Usati da /chi-siamo/ (niente, rimosso — vive solo su /branco/ e nel
   teaser home), /branco/ (griglia completa) e home (assaggio). */
.cs-player-card {
  background: var(--surface);
  border: 1px solid var(--copper-border-strong);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}

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

.cs-player-card--pending {
  opacity: .7;
  border-style: dashed;
}

.cs-pc-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--copper-border);
  overflow: hidden;
  background: var(--surface-mid);
  margin-bottom: .65rem;
}

.cs-pc-name {
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--copper-bright);
  margin-bottom: .2rem;
}

.cs-pc-formats {
  font-size: .75rem;
  color: var(--text-dim);
  margin-bottom: .45rem;
  font-style: italic;
}

.cs-pc-msg {
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.55;
  margin: 0;
}

.cs-pending-badge {
  display: inline-block;
  margin-top: .5rem;
  font-family: 'Cinzel', serif;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--copper-border);
  border-radius: 999px;
  padding: .15rem .55rem;
}

/* form panel (templates/website/_branco_form.html) */
.cs-form-panel {
  background: var(--surface-mid);
  border: 1px solid var(--copper-border-strong);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  display: none;
  position: relative;
  overflow: hidden;
}

.cs-form-panel.open { display: block; }

.cs-form-top-rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
}

.cs-form-title {
  font-family: 'Cinzel', serif;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 1.25rem;
}

.cs-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin-bottom: .85rem;
}

.cs-form-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .85rem;
}
.cs-form-field:last-of-type { margin-bottom: 0; }

.cs-form-label {
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

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

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

.cs-form-input.cs-input-error { border-color: var(--danger-text); }

.cs-form-error {
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--danger-text);
  min-height: .85rem;
}

.cs-form-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}

.cs-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* "Annulla" resta un ghost volutamente più spento del submit accanto */
.cs-cancel-btn { color: var(--text-dim) !important; border-color: var(--copper-border) !important; }

.cs-char-count {
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  color: var(--text-dim);
  margin-left: auto;
}

.cs-form-note {
  color: var(--text-dim);
  font-size: .875rem;
  margin: 1rem 0 0;
  line-height: 1.5;
}

/* Verde tenuto di proposito: è lo stato di conferma/successo del
   sistema (DESIGN.md, "Verde Jungla... usato anche per badge di
   conferma/successo"), non decorazione di brand — stesso ruolo di
   .decklist-status-ok in pages/tournaments.css. rgba(108,196,74,X) è
   la stessa terna RGB di --accent-green, come --copper-border è
   quella di --copper. */
.cs-form-success {
  margin-top: 1rem;
  padding: .8rem 1rem;
  background: rgba(108,196,74,.08);
  border: 1px solid rgba(108,196,74,.3);
  border-radius: var(--radius-sm);
  color: var(--accent-green);
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
}

/* ── Pagina Il Branco (/branco/) ─────────────── */
/* Nessun max-width qui: la larghezza della pagina è quella unica di
   .container (--container-wide, tokens.css). */

.branco-page-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.branco-page-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: var(--text);
  margin: 0;
  flex: 1 1 auto;
}

.branco-page-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.branco-count-big {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--copper-bright);
  line-height: 1;
  letter-spacing: -.03em;
}

.branco-box {
  border: 1px solid var(--copper-border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 2rem;
  box-shadow: var(--shadow-box), inset 0 1px 0 rgba(200,121,65,.12);
}

/* text-align invece di flex+justify-content: il widget del partial
   (bottone + pannello, vedi _branco_form.html) ha il pannello come
   blocco a piena larghezza quando si apre — con flex l'unico figlio
   verrebbe centrato E ristretto al contenuto, comprimendo il form
   invece di lasciarlo occupare tutta la larghezza. text-align centra
   solo il bottone (inline-flex), il pannello (block) lo ignora. */
.branco-box-footer {
  margin-top: 1.5rem;
  text-align: center;
}

/* cs-* overrides comuni a homepage e pagina /branco/ */
.home-page .cs-player-card,
.branco-page .cs-player-card {
  background: var(--surface);
  border-color: var(--copper-border);
}
.home-page .cs-player-card::before,
.branco-page .cs-player-card::before {
  background: linear-gradient(90deg, transparent, rgba(200,121,65,.4), transparent);
}
.home-page .cs-player-card:hover,
.branco-page .cs-player-card:hover {
  border-color: var(--copper-bright);
  box-shadow: var(--shadow-md), 0 0 22px rgba(200,121,65,.14);
}
.home-page .cs-pc-avatar,
.branco-page .cs-pc-avatar  { border-color: var(--copper-border); background: var(--surface-mid); }
.home-page .cs-pc-name,
.branco-page .cs-pc-name    { color: var(--text); }
.home-page .cs-pc-formats,
.branco-page .cs-pc-formats { color: var(--copper); }
.home-page .cs-pc-msg,
.branco-page .cs-pc-msg     { color: var(--text-muted); }
.home-page .cs-pending-badge,
.branco-page .cs-pending-badge { color: var(--copper); border-color: rgba(200,121,65,.25); }
.home-page .cs-form-panel,
.branco-page .cs-form-panel { background: var(--bg-alt); border-color: var(--copper-border); }
.home-page .cs-form-top-rule,
.branco-page .cs-form-top-rule { background: linear-gradient(90deg, transparent, var(--copper), transparent); }
.home-page .cs-form-title,
.branco-page .cs-form-title { color: var(--copper-bright); }
.home-page .cs-form-label,
.branco-page .cs-form-label { color: var(--copper); }
.home-page .cs-form-input,
.branco-page .cs-form-input { background: var(--surface-mid); border-color: rgba(200,121,65,.28); color: var(--text); }
.home-page .cs-form-input:focus,
.branco-page .cs-form-input:focus { border-color: var(--copper-bright); box-shadow: 0 0 0 3px rgba(200,121,65,.12); }
.home-page .cs-submit-btn,
.branco-page .cs-submit-btn { background: var(--copper) !important; border-color: var(--copper) !important; color: var(--bg) !important; }
.home-page .cs-submit-btn:hover,
.branco-page .cs-submit-btn:hover { background: var(--copper-bright) !important; border-color: var(--copper-bright) !important; }
.home-page .cs-cancel-btn,
.branco-page .cs-cancel-btn { color: var(--copper) !important; border-color: rgba(200,121,65,.3) !important; }
.home-page .cs-char-count,
.branco-page .cs-char-count { color: var(--text-dim); }
.home-page .cs-form-note,
.branco-page .cs-form-note  { color: var(--text-dim); }
.home-page .cs-form-success,
.branco-page .cs-form-success { background: rgba(200,121,65,.08); border-color: rgba(200,121,65,.3); color: var(--copper-bright); }

/* ── Il Branco section (homepage) ───────────── */
.home-page .feedback-cta { text-align: left; }

.branco-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.branco-title-block { flex: 1 1 auto; min-width: 0; }
.branco-title-block .feedback-badge { margin-bottom: .55rem; }
.branco-title-block .feedback-title { margin: 0; font-size: clamp(1.6rem, 3.5vw, 2.6rem); }

.branco-cta-block {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

.branco-counter { text-align: center; }

.branco-count {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--copper-bright);
  line-height: 1;
  letter-spacing: -.03em;
}

.branco-count-label {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: .15rem;
}

.branco-join-btn { white-space: nowrap; }

/* Jungle card layout — masonry columns with stagger. column-width allo
   stesso --card-min-width di .cards (tokens.css): qui è solo un minimo
   (il vincolo che conta è il "3" colonne, quasi sempre più largo di
   250px), ma è lo stesso standard invece di un 200px scelto a parte. */
.branco-jungle {
  columns: 3 var(--card-min-width);
  column-gap: 1rem;
  margin-bottom: 1.5rem;
}

.branco-jungle .cs-player-card {
  break-inside: avoid;
  display: block;
  margin-bottom: 1rem;
  transition: transform .25s ease, box-shadow .25s ease;
}

.branco-jungle .cs-player-card:nth-child(4n+1) { transform: rotate(-1.4deg); }
.branco-jungle .cs-player-card:nth-child(4n+2) { transform: rotate( 0.9deg); }
.branco-jungle .cs-player-card:nth-child(4n+3) { transform: rotate(-0.6deg); }
.branco-jungle .cs-player-card:nth-child(4n+4) { transform: rotate( 1.1deg); }

.branco-jungle .cs-player-card:hover {
  transform: rotate(0deg) translateY(-4px) !important;
  z-index: 2;
  position: relative;
}

.branco-empty {
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  margin: 1.5rem 0;
}

/* Avatar picker nel form */
.branco-avatar-field { margin-bottom: 1rem; }

.branco-avatar-picker {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .3rem;
}

.branco-avatar-opt {
  width: 54px;
  height: 54px;
  border: 2px solid rgba(200,121,65,.25);
  border-radius: var(--radius-sm);
  background: var(--surface-mid);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.branco-avatar-opt svg { width: 46px; height: 46px; display: block; }

.branco-avatar-opt:hover {
  border-color: var(--copper);
  transform: scale(1.06);
}

.branco-avatar-opt.selected {
  border-color: var(--copper-bright);
  box-shadow: 0 0 0 3px rgba(200,121,65,.28);
}

@media (max-width: 720px) {
  .cs-hero-inner { flex-direction: column-reverse; align-items: flex-start; gap: 1.5rem; }
  .cs-orang-ring { width: 100px; height: 100px; }
  .cs-form-row   { grid-template-columns: 1fr; }
  .branco-header { align-items: flex-start; flex-direction: column; }
  .branco-cta-block { width: 100%; justify-content: space-between; }
  .branco-jungle { columns: 2 160px; }
}

@media (max-width: 480px) {
  .branco-jungle { columns: 1; }
  .branco-jungle .cs-player-card { transform: none !important; }
}