/* =============================================================================
   FooLab — COMPONENT LIBRARY (attività 1.2)
   -----------------------------------------------------------------------------
   Stili dei componenti Blade in resources/views/components/foolab/*.
   Prefisso classi: .flc-  (FooLab Component) per non collidere con .fl-/.fc-/.fg-
   già usati dalle pagine esistenti.

   VINCOLO: qui NON ci sono valori hardcoded — solo var(--fl-*) da
   foolab-tokens.css, che DEVE essere caricato prima di questo file.
   ========================================================================== */

/* ---- Sezione / contenitore standard ------------------------------------- */
.flc-section{
  max-width:var(--fl-container);
  margin:0 auto;
  padding:var(--fl-space-5) var(--fl-space-4);
}
.flc-section--wide{max-width:var(--fl-container-wide)}
.flc-section--narrow{max-width:70ch}
.flc-section--flush{padding-top:0;padding-bottom:0}
.flc-section__title{
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-black);
  font-size:var(--fl-fs-xl);
  margin:0 0 var(--fl-space-2);
}
.flc-section__lead{
  font-size:var(--fl-fs-md);
  line-height:var(--fl-lh-base);
  opacity:.9;
  margin:0 0 var(--fl-space-3);
}

/* ---- Bottoni ------------------------------------------------------------- */
.flc-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--fl-space-2);
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-bold);
  font-size:var(--fl-fs-md);
  padding:var(--fl-space-3) var(--fl-space-5);
  border-radius:var(--fl-radius-md);
  border:var(--fl-border);
  background:var(--fl-yellow);
  color:var(--fl-on-yellow);
  box-shadow:var(--fl-shadow);
  text-decoration:none;cursor:pointer;
  transition:var(--fl-transition);
}
.flc-btn:active:not(:disabled):not([aria-disabled="true"]){
  transform:translateY(var(--fl-press-y));
  box-shadow:var(--fl-shadow-pressed);
}
.flc-btn:focus-visible{outline:var(--fl-border-sm);outline-offset:var(--fl-space-1)}
/* CTA PRIMARIA = nera. L'ambra su bianco non ha contrasto sufficiente per un
   bottone (testo nero su giallo chiaro), e usata su ogni CTA diventava il colore
   dominante della pagina. Resta il colore degli STICKER, dove è un accento su
   superficie piccola, non il fondo di un'azione. */
.flc-btn--ink{background:var(--fl-ink);color:var(--fl-on-dark)}
.flc-btn--ink:hover{background:var(--fl-ink);color:var(--fl-yellow)}
.flc-btn--blue{background:var(--fl-blue);color:var(--fl-on-blue)}
.flc-btn--yellow{background:var(--fl-yellow);color:var(--fl-on-yellow)}
.flc-btn--green{background:var(--fl-green);color:var(--fl-on-green)}
.flc-btn--ghost{background:var(--fl-panel);color:var(--fl-ink)}
.flc-btn--sm{font-size:var(--fl-fs-sm);padding:var(--fl-space-2) var(--fl-space-3);border-radius:var(--fl-radius-sm)}
.flc-btn--lg{font-size:var(--fl-fs-lg);padding:var(--fl-space-4) var(--fl-space-6)}
.flc-btn--block{display:flex;width:100%}
.flc-btn:disabled,.flc-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:var(--fl-shadow-pressed)}

/* ---- Badge / chip / pill -------------------------------------------------- */
.flc-badge{
  display:inline-block;
  font-weight:var(--fl-fw-bold);
  font-size:var(--fl-fs-sm);
  padding:var(--fl-space-1) var(--fl-space-3);
  border-radius:var(--fl-radius-pill);
  border:var(--fl-border-sm);
  background:var(--fl-pink);color:var(--fl-on-blue);
  box-shadow:var(--fl-shadow-sm);
}
.flc-badge--blue{background:var(--fl-blue);color:var(--fl-on-blue)}
.flc-badge--yellow{background:var(--fl-yellow);color:var(--fl-on-yellow)}
.flc-badge--green{background:var(--fl-green);color:var(--fl-on-green)}
.flc-badge--red{background:var(--fl-red);color:var(--fl-on-blue)}
.flc-badge--neutral{background:var(--fl-neutral);color:var(--fl-on-blue)}
.flc-badge--tilt{transform:rotate(-2deg)}

.flc-chip{
  display:inline-block;
  font-weight:var(--fl-fw-bold);
  font-size:var(--fl-fs-xs);
  background:var(--fl-yellow);
  border:var(--fl-border-xs);
  border-radius:var(--fl-radius-pill);
  padding:0 var(--fl-space-2);
  color:var(--fl-ink);
}
.flc-chip--grey{background:var(--fl-tint-grey)}
.flc-chip--blue{background:var(--fl-tint-blue)}
.flc-chip--green{background:var(--fl-tint-green)}

/* pill tipizzata (fatto / opinione / filosofia / metodo) */
.flc-pill{
  display:inline-block;
  font-size:var(--fl-fs-xs);
  font-weight:var(--fl-fw-black);
  border:var(--fl-border-xs);
  border-radius:var(--fl-radius-pill);
  padding:0 var(--fl-space-2);
  background:var(--fl-panel);color:var(--fl-ink);
}
.flc-pill--fatto{background:var(--fl-kind-fatto-bg)}
.flc-pill--opinione{background:var(--fl-kind-opinione-bg)}
.flc-pill--filosofia{background:var(--fl-kind-filosofia-bg)}
.flc-pill--metodo{background:var(--fl-kind-metodo-bg)}

/* ---- Card ----------------------------------------------------------------- */
.flc-card{
  background:var(--fl-panel);
  border:var(--fl-border);
  border-radius:var(--fl-radius-lg);
  box-shadow:var(--fl-shadow);
  padding:var(--fl-space-4);
}
.flc-card--flat{box-shadow:none}
.flc-card--dark{background:var(--fl-surface-dark);color:var(--fl-on-dark)}
.flc-card--tint{background:var(--fl-tint-grey)}

/* ---- Card con icona flottante (variante "float") ---------------------------
   L'icona esce dal bordo SINISTRO e il segno d'azione dal bordo DESTRO, tutti
   e due centrati verticalmente; il contenuto è centrato verticalmente a sua
   volta. Serve a togliere peso all'interno della card: la testata non deve
   più contenere l'icona, quindi resta solo testo, incolonnato e leggibile.

   Vincolo di layout: la card NON deve avere overflow:hidden e la griglia che
   la ospita deve lasciare gap >= 2 * --fl-float-out (vedi token).
------------------------------------------------------------------------------ */
.flc-card--float{
  position:relative;
  display:flex;align-items:center;
  padding-left:calc(var(--fl-float-size) - var(--fl-float-out) + var(--fl-space-4));
  padding-right:calc(var(--fl-float-size) - var(--fl-float-out) + var(--fl-space-3));
  min-height:calc(var(--fl-float-size) + var(--fl-space-8));
}
.flc-card__main{
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
}
.flc-card__icon,
.flc-card__mark{
  position:absolute;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fl-panel);color:var(--fl-ink);
  border:var(--fl-border-sm);
  box-shadow:var(--fl-shadow-sm);
}
.flc-card__icon{
  left:calc(var(--fl-float-out) * -1);
  width:var(--fl-float-size);height:var(--fl-float-size);
  border-radius:var(--fl-radius-md);
  font-size:var(--fl-fs-lg);
}
.flc-card__icon img{max-width:62%;max-height:62%;object-fit:contain}
.flc-card__mark{
  right:calc(var(--fl-float-out) * -1);
  width:calc(var(--fl-float-size) * .72);height:calc(var(--fl-float-size) * .72);
  border-radius:var(--fl-radius-pill);
  font-size:var(--fl-fs-md);
  background:var(--fl-yellow);
}
/* Accenti dell'icona: uno solo per gruppo di card, non uno per card */
.flc-card__icon--blue{background:var(--fl-tint-blue)}
.flc-card__icon--yellow{background:var(--fl-tint-yellow)}
.flc-card__icon--green{background:var(--fl-tint-green)}
.flc-card__icon--ink{background:var(--fl-ink);color:var(--fl-on-dark)}
/* toni "di contenuto" usati dalle card progetto della home */
.flc-card__icon--icon{background:var(--fl-tint-blue)}
/* Le icone-immagine dei progetti sono PNG NERI su trasparente: vanno su bianco.
   (In un giro precedente sembravano invisibili su fondo chiaro: era il lazy
   loading che non le aveva ancora caricate nello screenshot, non il contrasto.) */
.flc-card__icon--image{background:var(--fl-panel)}

/* Etichetta "sticker" inclinata a cavallo del bordo superiore della card.
   Stessa forma dell'eyebrow di sezione e del badge di gruppo: è il segno
   ricorrente del sistema. */
.flc-card--tagged{position:relative}
.flc-card__tag{
  position:absolute;z-index:1;
  top:calc(var(--fl-space-3) * -1);
  right:var(--fl-space-5);
  display:inline-flex;align-items:center;gap:var(--fl-space-1);
  transform:rotate(-3deg);
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-black);
  font-size:var(--fl-fs-xs);
  padding:0 var(--fl-space-3);
  border-radius:var(--fl-radius-pill);
  border:var(--fl-border-sm);
  background:var(--fl-panel);color:var(--fl-ink);
  box-shadow:var(--fl-shadow-sm);
  white-space:nowrap;
}
.flc-card__tag svg{height:1em;width:auto;display:block}
.flc-card__tag svg *{fill:currentColor}

.flc-card--float .flc-card__head{margin-bottom:var(--fl-space-2)}
.flc-card--float .flc-card__foot{margin-top:var(--fl-space-3)}

.flc-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--fl-space-2);
  margin:0 0 var(--fl-space-2);
}
.flc-card__title{
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-black);
  font-size:var(--fl-fs-lg);
  margin:0;
}
.flc-card__body{font-size:var(--fl-fs-md);line-height:var(--fl-lh-base)}
.flc-card__foot{
  margin-top:var(--fl-space-3);
  padding-top:var(--fl-space-2);
  border-top:var(--fl-dash-soft);
  display:flex;gap:var(--fl-space-2);flex-wrap:wrap;
}
.flc-card--dark .flc-card__foot{border-top-color:rgba(242,239,233,.3)}

/* ---- Hero / banner di sezione --------------------------------------------- */
.flc-hero{
  position:relative;overflow:hidden;
  border:var(--fl-border);
  border-radius:var(--fl-radius-xl);
  box-shadow:var(--fl-shadow);
  padding:var(--fl-space-5) var(--fl-space-5) var(--fl-space-5);
  color:var(--fl-on-dark);
  /* Fondi PIATTI: i gradienti erano l'altra metà dell'effetto "digitale". */
  background:var(--fl-ink);
}
.flc-hero--blue{background:var(--fl-blue-d)}
.flc-hero--pink{background:var(--fl-pink)}
.flc-hero--green{background:var(--fl-green)}
.flc-hero--light{background:var(--fl-panel);color:var(--fl-ink)}
.flc-hero__eyebrow{
  font-weight:var(--fl-fw-bold);font-size:var(--fl-fs-xs);
  letter-spacing:.2em;text-transform:uppercase;opacity:.9;
}
.flc-hero__title{
  font-family:var(--fl-font-display);font-weight:var(--fl-fw-black);
  font-size:var(--fl-fs-display);line-height:var(--fl-lh-tight);
  margin:var(--fl-space-1) 0 var(--fl-space-1);
}
.flc-hero__sub{opacity:.92;font-size:var(--fl-fs-md);max-width:60ch;margin:var(--fl-space-2) 0 0}
.flc-hero__stats{display:flex;gap:var(--fl-space-2);flex-wrap:wrap;margin-top:var(--fl-space-3)}
.flc-hero__stat{
  background:var(--fl-tint-grey);color:var(--fl-ink);
  border:var(--fl-border-xs);border-radius:var(--fl-radius-pill);
  padding:0 var(--fl-space-3);font-weight:var(--fl-fw-bold);font-size:var(--fl-fs-xs);
}
.flc-hero:not(.flc-hero--light) .flc-hero__stat{
  background:rgba(255,255,255,.18);color:var(--fl-on-dark);border-color:rgba(255,255,255,.4);
}
.flc-hero__ghost{
  position:absolute;right:var(--fl-space-2);top:calc(var(--fl-space-5) * -1);
  font-family:var(--fl-font-display);font-weight:var(--fl-fw-black);
  font-size:9rem;line-height:1;opacity:.14;pointer-events:none;
}

/* ---- Semaforo / verdetto ---------------------------------------------------*/
.flc-dot{
  width:19px;height:19px;border-radius:50%;
  border:var(--fl-border-xs);display:inline-block;flex:none;vertical-align:middle;
  background:var(--fl-verdict-neutral);
}
.flc-dot--ok{background:var(--fl-verdict-ok)}
.flc-dot--warn{background:var(--fl-verdict-warn)}
.flc-dot--ko{background:var(--fl-verdict-ko)}
.flc-dot--neutral{background:var(--fl-verdict-neutral)}
.flc-dot--sm{width:13px;height:13px}

.flc-legend{display:flex;flex-wrap:wrap;gap:var(--fl-space-2);align-items:center}
.flc-legend__item{
  display:inline-flex;align-items:center;gap:var(--fl-space-1);
  background:var(--fl-panel);border:var(--fl-border-sm);border-radius:var(--fl-radius-pill);
  padding:var(--fl-space-1) var(--fl-space-3);
  font-weight:var(--fl-fw-bold);font-size:var(--fl-fs-sm);box-shadow:var(--fl-shadow-sm);
}

.flc-verdict{
  border:var(--fl-border-w-sm) dashed var(--fl-line);
  border-radius:var(--fl-radius-lg);
  padding:var(--fl-space-4);
  background:var(--fl-panel);
}
.flc-verdict__label{
  font-family:var(--fl-font-display);font-weight:var(--fl-fw-black);
  font-size:var(--fl-fs-sm);text-transform:uppercase;
  display:flex;align-items:center;gap:var(--fl-space-1);flex-wrap:wrap;
  margin-bottom:var(--fl-space-1);
}
.flc-verdict__body{font-size:var(--fl-fs-md);line-height:var(--fl-lh-base)}
.flc-verdict__body > :first-child{margin-top:0}
.flc-verdict__body > :last-child{margin-bottom:0}

/* box tipizzati: fatto / opinione / filosofia (+ metodo, nota, chiusura) */
.flc-box{
  border:var(--fl-border-xs);
  border-radius:var(--fl-radius-sm);
  padding:var(--fl-space-3) var(--fl-space-4);
  font-size:var(--fl-fs-md);line-height:var(--fl-lh-base);
  background:var(--fl-tint-grey);border-color:var(--fl-line);
}
.flc-box__label{font-weight:var(--fl-fw-black);margin-right:var(--fl-space-1)}
.flc-box--fatto{background:var(--fl-kind-fatto-bg);border-color:var(--fl-kind-fatto)}
.flc-box--fatto .flc-box__label{color:var(--fl-on-green)}
.flc-box--opinione{background:var(--fl-kind-opinione-bg);border-color:var(--fl-kind-opinione)}
.flc-box--opinione .flc-box__label{color:var(--fl-kind-opinione)}
.flc-box--filosofia{background:var(--fl-kind-filosofia-bg);border-color:var(--fl-kind-filosofia)}
.flc-box--filosofia .flc-box__label{color:var(--fl-kind-filosofia)}
.flc-box--metodo{background:var(--fl-kind-metodo-bg);border-color:var(--fl-kind-metodo)}
.flc-box--metodo .flc-box__label{color:var(--fl-kind-metodo)}
.flc-box--hint{background:var(--fl-tint-hint);border:var(--fl-border-w-xs) dashed var(--fl-line)}
.flc-box--closure{
  background:var(--fl-surface-dark);color:var(--fl-on-dark);
  border:var(--fl-border-sm);border-radius:var(--fl-radius-md);box-shadow:var(--fl-shadow-sm);
}
.flc-box--closure .flc-box__label{color:var(--fl-yellow)}

/* ---- Tabella --------------------------------------------------------------*/
.flc-table-wrap{overflow-x:auto;border-radius:var(--fl-radius-lg)}
.flc-table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--fl-panel);
  border:var(--fl-border);
  border-radius:var(--fl-radius-lg);
  box-shadow:var(--fl-shadow);
  overflow:hidden;
  font-size:var(--fl-fs-md);
}
.flc-table thead th{
  background:var(--fl-blue);color:var(--fl-on-blue);
  font-family:var(--fl-font-display);font-weight:var(--fl-fw-black);
  text-align:left;padding:var(--fl-space-2) var(--fl-space-3);
  border-bottom:var(--fl-border-sm);
}
.flc-table tbody td{
  padding:var(--fl-space-2) var(--fl-space-3);
  border-bottom:var(--fl-border-w-xs) solid var(--fl-tint-grey);
}
.flc-table tbody tr:last-child td{border-bottom:0}
.flc-table--zebra tbody tr:nth-child(even){background:var(--fl-tint-grey)}
.flc-table--compact tbody td,.flc-table--compact thead th{padding:var(--fl-space-1) var(--fl-space-2);font-size:var(--fl-fs-sm)}

/* ---- Form ------------------------------------------------------------------*/
.flc-field{display:block;margin-bottom:var(--fl-space-3)}
.flc-field__label{
  display:block;font-weight:var(--fl-fw-bold);font-size:var(--fl-fs-sm);
  margin-bottom:var(--fl-space-1);
}
.flc-field__req{color:var(--fl-red)}
.flc-field__hint{font-size:var(--fl-fs-xs);opacity:.75;margin-top:var(--fl-space-1)}
.flc-field__error{font-size:var(--fl-fs-xs);color:var(--fl-on-red);font-weight:var(--fl-fw-bold);margin-top:var(--fl-space-1)}

.flc-input,.flc-select,.flc-textarea{
  width:100%;
  font-family:var(--fl-font-body);font-size:var(--fl-fs-md);
  color:var(--fl-ink);background:var(--fl-panel);
  border:var(--fl-border-sm);border-radius:var(--fl-radius-sm);
  padding:var(--fl-space-2) var(--fl-space-3);
}
.flc-input:focus,.flc-select:focus,.flc-textarea:focus{
  outline:var(--fl-border-sm);outline-color:var(--fl-blue);
}
.flc-input:disabled,.flc-select:disabled,.flc-textarea:disabled{background:var(--fl-tint-grey);opacity:.7;cursor:not-allowed}
.flc-textarea{min-height:7rem;resize:vertical;line-height:var(--fl-lh-base)}
.flc-textarea--code{
  font-family:var(--fl-font-mono);font-size:var(--fl-fs-sm);
  background:var(--fl-surface-code);color:var(--fl-code-ink);tab-size:2;
}
.flc-select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--fl-ink) 50%),
                   linear-gradient(135deg,var(--fl-ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 2px),calc(100% - 12px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:var(--fl-space-6);
}
.flc-field--invalid .flc-input,
.flc-field--invalid .flc-select,
.flc-field--invalid .flc-textarea{border-color:var(--fl-red)}

/* ---- Responsive ------------------------------------------------------------*/
@media (max-width:860px){
  .flc-hero{padding:var(--fl-space-4)}
  .flc-hero__ghost{display:none}
}