/**
 * experience-levels.css — Stili per il livello L0 (modalità selezione card).
 *
 * TUTTO il contenuto è scopato sotto body.exp-l0 così non tocca MAI
 * la vista L1 di default. Quando la classe è assente, questo file
 * non ha alcun effetto sul layout o sull'aspetto delle card.
 *
 * L0: 8 card compatte in griglia 4×2 (4 colonne, 2 righe), solo
 * intestazione visibile (azienda + ruolo). Hook, pill e detail nascosti.
 */

/* ------------------------------------------------------------------ griglia L0 */

body.exp-l0 #experience .experience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3, 12px);
  align-content: start;
}

/* MOBILE: 4 compact columns are unreadable at phone widths — use 2. The L0 cards
   then sit in the 2/3 above the bottom filter panel (filter-overlay.css). */
@media (max-width: 767px) {
  body.exp-l0 #experience .experience-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2, 8px);
  }

  /* L0 cards run VERY compact on mobile: only the company name, centred, so all 8
     fit and the dim-non-matching preview is readable at a glance. Role/period and
     location are hidden (hook/pills/detail are already hidden by the rules above). */
  body.exp-l0 #experience .exp-card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2, 8px);
  }
  body.exp-l0 #experience .exp-card .company-card__location,
  body.exp-l0 #experience .exp-card .role__head {
    display: none !important;
  }
  body.exp-l0 #experience .exp-card .company-card__name {
    font-size: var(--fs-1);
    line-height: 1.15;
    /* clamp long names to 2 lines so one card can't balloon the row height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ------------------------------------------------------------------ card compatta */

body.exp-l0 #experience .exp-card {
  min-height: 0;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  cursor: default;
}

/* Nasconde i contenuti extra: hook del ruolo, pill skill, dettaglio */
body.exp-l0 #experience .exp-card .role__hook {
  display: none !important;
}

body.exp-l0 #experience .exp-card .tag-pills {
  display: none !important;
}

body.exp-l0 #experience .exp-card .exp-card__detail {
  display: none !important;
}

/* In L0 nessuna card è espansa: sovrascrive .is-expanded se per qualsiasi
   motivo la classe sopravvivesse al toggle (non dovrebbe, ma difesa in più) */
body.exp-l0 #experience .exp-card.is-expanded {
  flex-basis: auto;
  width: auto;
}

/* Testo leggermente ridotto per stare comodi nelle 4 colonne (classi reali:
   .company-card__name = azienda, .role__title = ruolo, .role__period = periodo) */
body.exp-l0 #experience .exp-card .company-card__name { font-size: 0.9em; }
body.exp-l0 #experience .exp-card .role__title       { font-size: 0.85em; }
body.exp-l0 #experience .exp-card .role__period      { font-size: 0.8em; }

/* ANTEPRIMA = RISULTATO: a L0 il filtro NON rimuove le card — le riporta tutte
   visibili (per poter raffinare) e ATTENUA le non-corrispondenti. All'uscita da
   L0 il `.is-hidden` torna `display:none` (main.css) = rimozione reale → L1. */
body.exp-l0 #experience .exp-card.is-hidden {
  display: flex !important;     /* annulla il display:none del filtro mentre sei a L0 */
  opacity: 0.3;
  filter: saturate(0.55);
  pointer-events: none;
}

/* Impedisce che le CSS transition delle card combattano il Flip
   (già gestito da .is-flipping in card-expand.js, ma rinforzato qui
   per il caso in cui sia SOLO experience-levels ad usare il Flip) */
body.exp-l0 #experience .experience-grid.is-flipping .exp-card {
  transition: none !important;
}