/* =========================================================================
   Veriu.com · modulo Kampionate
   -------------------------------------------------------------------------
   La classifica e le partite nella colonna di fianco delle categorie di
   lega di Sporti. Si carica solo dove compaiono davvero (App\Core\Assets,
   manifesto `assets`). I colori sono le variabili --vp-* di core.css: qui
   si usano, non si ridefiniscono. Le classi cominciano per «kamp-» perché
   nelle stesse pagine c'è anche sporti.css, che ha .klasifikimi, .ndeshjet
   e .live suoi.
   ========================================================================= */

/* La colonna di una lega è più alta di uno schermo (venti righe di classifica
   più le partite): incollata in alto non si raggiungerebbe in fondo. */
.anash:has(.kamp) { position: static; }

.kamp { display: grid; gap: .5rem; font-variant-numeric: tabular-nums;
  & .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* ── classifica ───────────────────────────────────────────────────────── */
.kamp-grupi { margin: .5rem 0 .1rem; font-size: .78rem; font-weight: 700; color: var(--vp-ink-2); }
.kamp-tabela { width: 100%; border-collapse: collapse; font-size: .84rem;
  & th, & td { padding: .32rem .2rem; text-align: center; border-bottom: 1px solid var(--vp-rule); }
  & thead th { font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--vp-ink-3); }
  & abbr { text-decoration: none; cursor: help; }
  & .poz { width: 1.7rem; color: var(--vp-ink-3); }
  & .sk { text-align: start; overflow-wrap: anywhere; }
  & tbody th.sk { font-size: inherit; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--vp-ink); }
  & .pike { font-weight: 700; color: var(--vp-ink); }
  & tbody tr:last-child > * { border-bottom: 0; }
  & tbody tr:hover { background: var(--vp-muted); }
}

/* ── partite ──────────────────────────────────────────────────────────── */
.kamp-nentitull { margin: .5rem 0 .1rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--vp-ink-3);
  &.live { color: var(--vp-accent); } }
.kamp-nentitull:first-child { margin-top: 0; }
.kamp-lista { list-style: none; margin: 0; padding: 0; }
.kamp-ndeshja { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .15rem .5rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--vp-rule); font-size: .86rem;
  &:last-child { border-bottom: 0; }
  & .kamp-kur { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .7rem; color: var(--vp-ink-3); }
  & .kamp-ekipi { line-height: 1.25; overflow-wrap: anywhere; color: var(--vp-ink); }
  & .vendas { text-align: end; }
  & .mysafir { text-align: start; }
  & .kamp-gola { min-width: 3.2rem; padding: .12rem .4rem; border-radius: 6px; text-align: center; font-weight: 700; color: var(--vp-ink); background: var(--vp-muted); }
  & .kamp-etiketa { padding: .04rem .45rem; border-radius: 999px; background: var(--vp-muted); color: var(--vp-ink-2); font-size: .64rem; font-weight: 700; letter-spacing: .04em; }
  &.st-live .kamp-gola, &.st-pushim .kamp-gola { color: var(--vp-accent); background: color-mix(in srgb, var(--vp-accent) 14%, transparent); }
  &.st-live .kamp-etiketa { background: var(--vp-accent); color: #fff; }
  &.st-shtyre, &.st-anuluar { opacity: .7; }
}
@media (prefers-reduced-motion: no-preference) {
  .kamp-ndeshja.st-live .kamp-etiketa { animation: kamp-puls 2s ease-in-out infinite; }
}
@keyframes kamp-puls { 50% { opacity: .7; } }

/* ── la fonte ─────────────────────────────────────────────────────────── */
.kamp-burimi { margin: .6rem 0 0; font-size: .7rem; color: var(--vp-ink-3);
  & a { color: inherit; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; &:hover { color: var(--vp-primary); } } }

/* ── gare: Formula 1 e MotoGP ─────────────────────────────────────────── */
.kamp-ekipi-vogel { display: block; font-size: .7rem; font-weight: 400; color: var(--vp-ink-3); }
.kamp-klasifikimi .kamp-tabela + .kamp-te-tjere, .kamp-klasifikimi .kamp-te-tjere { margin-top: .15rem; }
.kamp-te-tjere { font-size: .8rem;
  & > summary { cursor: pointer; padding: .3rem 0; color: var(--vp-ink-2); }
  & > summary:hover { color: var(--vp-primary); }
  & .kamp-tabela { margin-top: .2rem; }
}
.kamp-gara { display: grid; gap: .15rem; padding: .55rem 0; border-bottom: 1px solid var(--vp-rule); font-size: .86rem;
  &:last-child { border-bottom: 0; }
  & .kamp-kur { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .7rem; color: var(--vp-ink-3); }
  & .kamp-etiketa { padding: .04rem .45rem; border-radius: 999px; background: var(--vp-muted); color: var(--vp-ink-2); font-size: .64rem; font-weight: 700; letter-spacing: .04em; }
  &.st-live .kamp-etiketa { background: var(--vp-accent); color: #fff; }
  & .kamp-gara-emri { line-height: 1.25; color: var(--vp-ink); }
  & .kamp-gara-vendi { font-size: .75rem; color: var(--vp-ink-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .kamp-gara.st-live .kamp-etiketa { animation: kamp-puls 2s ease-in-out infinite; }
}
.kamp-podiumi { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .1rem;
  & li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); column-gap: .35rem; align-items: baseline; line-height: 1.25; }
  & .kamp-poz { font-size: .7rem; font-weight: 700; text-align: center; color: var(--vp-ink-3); }
  & .kamp-pilot { font-weight: 600; overflow-wrap: anywhere; }
  & small { grid-column: 2; font-size: .7rem; color: var(--vp-ink-3); }
}

/* ── la striscia delle partite in home ────────────────────────────────── */
/* Sta dove stavano le pillole delle sezioni: stessa fascia, stesso bordo. Si riempie
   (e si nasconde se è vuota) da kampionate.js. Le pillole scorrono di lato, come
   quelle di prima, sul telefono con lo scatto sul bordo. */
.kamp-shirit { background: var(--vp-surface); border-bottom: 1px solid var(--vp-rule);
  &[hidden] { display: none; } }
.kamp-shirit-lista { list-style: none; margin: 0; padding: .5rem 0; display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  &::-webkit-scrollbar { display: none; } }
/* Con il mouse la fascia non si trascina col dito: una barra sottile dice che c'è dell'altro. */
@media (hover: hover) and (pointer: fine) {
  .kamp-shirit-lista { scrollbar-width: thin; scrollbar-color: var(--vp-rule) transparent; padding-bottom: .65rem; }
}
.kamp-chip { flex: none; scroll-snap-align: start; }
.kamp-chip-brenda { display: grid; gap: .15rem; min-width: 9.5rem; max-width: 18rem; padding: .38rem .8rem; border: 1px solid transparent; border-radius: 12px;
  background: var(--vp-field); color: var(--vp-ink-2); text-decoration: none; font-variant-numeric: tabular-nums; transition: border-color .15s;
  &:is(a):hover, &:is(a):focus-visible { border-color: var(--vp-primary); color: var(--vp-ink); } }
.kamp-chip-kur { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .64rem; color: var(--vp-ink-3); white-space: nowrap;
  & .kamp-chip-liga { overflow: hidden; text-overflow: ellipsis; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
  & .kamp-etiketa { margin-inline-start: auto; flex: none; padding: .02rem .42rem; border-radius: 999px; background: var(--vp-muted); color: var(--vp-ink-2); font-size: .62rem; font-weight: 700; letter-spacing: .04em; } }
.kamp-chip-ndeshja { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .45rem; align-items: center; font-size: .84rem; color: var(--vp-ink); white-space: nowrap;
  & .kamp-chip-ekipi { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
  & .vendas { text-align: end; }
  & .mysafir { text-align: start; }
  & .kamp-chip-mes { min-width: 2.6rem; padding: .06rem .4rem; border-radius: 6px; background: var(--vp-muted); text-align: center; font-weight: 700; } }
.kamp-chip-live {
  & .kamp-chip-mes { color: var(--vp-ink); background: color-mix(in srgb, var(--vp-accent) 28%, transparent); }
  & .kamp-etiketa { background: var(--vp-accent); color: #fff; } }
.kamp-chip-ardh .kamp-chip-mes { font-weight: 600; color: var(--vp-ink-2); }
.kamp-chip-fund .kamp-chip-brenda { opacity: .88; }
@media (prefers-reduced-motion: no-preference) {
  .kamp-chip-live .kamp-etiketa { animation: kamp-puls 2s ease-in-out infinite; }
}