/* KOS – Grafico "I nostri dipendenti" */
/* ============ Componente: .kos-chart ============ */
.kos-chart {
  /* Design token: allineati ai PNG attuali */
  --c-men:    #0096b4;   /* uomini (scuro) */
  --c-women:  #72c7d6;   /* donne (medio) */
  --c-total:  #e5f5f6;   /* totale (chiaro) */
  --c-grid:   #e6ecef;
  --c-text:   #0f1b2d;
  --c-border: #e1e7ea;
  --c-tab-bg:     #f3f5f7;  /* tab non attivo */
  --c-tab-border: #e4e8eb;
  --c-tab-active: #161d33;  /* tab attivo (blu notte) */
  --radius:   12px;
  --dur:      700ms;
  font-family: inherit; color: var(--c-text);
  /* Si adatta alla larghezza della colonna in cui è inserito, non al viewport */
  container-type: inline-size;
}

/* Tab (in produzione useranno il markup/stile già presente sul sito) */
.kos-chart__tabs { display: flex; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.kos-chart__tab {
  font: inherit; font-size: .9rem; line-height: 1; cursor: pointer;
  min-width: 50px; padding: 11px 13px; border-radius: 999px;
  border: 1px solid var(--c-tab-border); background: var(--c-tab-bg); color: var(--c-text);
  transition: background-color .25s, color .25s, border-color .25s;
}
.kos-chart__tab:hover { border-color: #cfd6dc; }
.kos-chart__tab[aria-selected="true"] { background: var(--c-tab-active); border-color: var(--c-tab-active); color: #fff; }
.kos-chart__tab:focus-visible, .kos-chart__col:focus-visible { outline: 2px solid var(--c-men); outline-offset: 3px; }

/* Area grafico */
.kos-chart__plot {
  position: relative;
  height: clamp(220px, 62vw, 340px);           /* fallback browser senza container queries */
  height: var(--plot-h, clamp(220px, 78cqw, 420px));
  margin-left: 40px;
    margin-bottom: var(--legend-gap, 76px);  /* spazio tra anni e legenda */
}
.kos-chart__grid { position: absolute; inset: 0; pointer-events: none; }
.kos-chart__gridline {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px solid var(--c-grid);
}
.kos-chart__gridline span {
  position: absolute; right: calc(100% + 10px); top: -.6em;
  font-size: .8rem; line-height: 1; white-space: nowrap;
}

.kos-chart__cols {
  position: absolute; inset: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
.kos-chart__col { position: relative; outline: none; }
.kos-chart__stack {
  position: absolute; bottom: 0; left: 50%;
  width: clamp(20px, 9vw, 48px);  /* fallback */
  width: var(--bar-w, clamp(20px, 11cqw, 56px)); height: 100%; transform: translateX(-50%);
}
.kos-chart__bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 0; border-radius: var(--radius) var(--radius) 0 0;
  transition: height var(--dur) cubic-bezier(.22,.8,.26,1);
  transition-delay: var(--delay, 0ms);
}
.kos-chart__bar--total { background: var(--c-total); }
.kos-chart__bar--women { background: var(--c-women); }
.kos-chart__bar--men   { background: var(--c-men); }

.kos-chart__year {
  position: absolute; top: calc(100% + 12px); left: 0; right: 0;
  text-align: center; font-size: .85rem;
}

/* Tooltip */
.kos-chart__tip {
  position: absolute; bottom: calc(var(--h, 0%) + 10px); left: 50%;
  transform: translate(-50%, 4px); opacity: 0; pointer-events: none;
  background: #fff; border: 1px solid var(--c-border); border-radius: 10px;
  padding: 8px 10px; font-size: .75rem; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(15,27,45,.08);
  transition: opacity .15s, transform .15s; z-index: 2;
}
.kos-chart__tip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.kos-chart__col:hover .kos-chart__tip,
.kos-chart__col:focus .kos-chart__tip { opacity: 1; transform: translate(-50%, 0); }
.kos-chart__col.is-tip-dismissed .kos-chart__tip { opacity: 0 !important; }
/* prima e ultima colonna: tooltip allineato al bordo interno, così non esce dal box */
.kos-chart__col:first-child .kos-chart__tip { left: 0; transform: translate(0, 4px); }
.kos-chart__col:last-child  .kos-chart__tip { left: auto; right: 0; transform: translate(0, 4px); }
.kos-chart__col:first-child:is(:hover, :focus) .kos-chart__tip,
.kos-chart__col:last-child:is(:hover, :focus) .kos-chart__tip { transform: none; }
@container (max-width: 340px) {
  .kos-chart__tabs { gap: 6px; margin-bottom: 20px; }
  .kos-chart__plot { margin-left: 32px; }
  .kos-chart__gridline span, .kos-chart__year { font-size: .75rem; }
  .kos-chart__legend li { font-size: .82rem; padding: 7px 12px; }
}

/* Legenda */
.kos-chart__legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kos-chart__legend li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border: 1px solid var(--c-border); border-radius: 12px; font-size: .9rem;
}
.kos-chart__legend li::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--dot);
}


.kos-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kos-chart { --dur: 0ms; }
  .kos-chart__bar { transition-delay: 0ms !important; }
}