/* =============================================================================
   CLASSIFICHE E ISCRITTI – nuova grafica
   File: wp-content/themes/astra-child/risultati-iscritti.css

   COLORI: si cambiano tutti qui sotto, nelle prime righe di ".ri"
     --blu   nomi degli atleti, tempi, intestazione
     --txt   testo normale
     --gri   testo secondario (società, ritmo, didascalie)
     --ara   arancione (filtri attivi, evidenziati)
     --oro / --arg / --bro   podio
   ============================================================================= */
.ri {
  --blu: #1a1a5e; --ara: #f28c00; --ara-c: #fff3e0; --txt: #1c1f29; --gri: #3d4350; --bor: #e6e9f0; --sfondo: #f5f6fa;
  --oro: #f6c443; --arg: #cfd5de; --bro: #e09a5f;
  width: 100%; max-width: 1000px; margin: 20px auto 48px; padding: 0 14px; box-sizing: border-box;
}
/* il tema allarga i contenuti della pagina: qui manteniamo la larghezza giusta */
#content .ri, .entry-content .ri { max-width: 1000px !important; margin-left: auto !important; margin-right: auto !important;
  color: var(--txt); font-size: 18px; line-height: 1.3;
}
.ri *, .ri *::before, .ri *::after { box-sizing: border-box; }
.ri h1, .ri p, .ri ol, .ri ul { margin: 0; padding: 0; }
.ri ol, .ri ul { list-style: none; }
.ri button { font-family: inherit; }

.ri a.ri-back {
  display: inline-block; margin: 0 0 12px; padding: 6px 16px; border-radius: 999px;
  background: rgba(255,255,255,.8); color: var(--blu) !important; text-decoration: none !important; font-size: 18px;
}
.ri a.ri-back:hover { background: #fff; color: var(--ara) !important; }

.ri-box { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 40px rgba(26,26,94,.14); }

/* ---------- intestazione ---------- */
.ri-testa { background: var(--blu); color: #fff; padding: 18px 20px 16px; display: flex; align-items: center; gap: 14px; }
.ri-logo { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; background: #fff; object-fit: contain; padding: 4px; }
.ri .ri-testa h1 { font-size: 38px; line-height: 1.02; font-weight: 500; color: #fff !important; margin: 0; }
.ri-info { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ri-info span { background: rgba(255,255,255,.14); border-radius: 999px; padding: 2px 12px; font-size: 16px; }
.ri-info b { font-weight: 500; }
.ri-info .ri-def { background: #1e9e4a; }
.ri-info .ri-prov { background: #8a5a00; }
.ri-info .ri-live { background: #d32f2f; animation: ri-pulsa 1.6s ease-in-out infinite; }
@keyframes ri-pulsa { 50% { opacity: .65; } }
.ri-data { flex: 0 0 60px; text-align: center; background: var(--ara); border-radius: 12px; padding: 6px 0 4px; line-height: 1; }
.ri-data b { display: block; font-size: 32px; font-weight: 500; }
.ri-data span { font-size: 15px; text-transform: lowercase; }

/* ---------- filtri (restano in alto scorrendo) ---------- */
.ri-filtri {
  position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.97); backdrop-filter: blur(6px);
  padding: 12px 16px 10px; border-bottom: 1px solid var(--bor);
}
.ri-seg { display: flex; background: #eef0f5; border-radius: 999px; padding: 3px; }
.ri .ri-seg button {
  flex: 1; border: 0; background: none; color: var(--blu); border-radius: 999px; padding: 6px 4px; margin: 0;
  font-size: 18px; cursor: pointer; line-height: 1.2;
}
.ri .ri-seg button.on { background: var(--blu); color: #fff; }
.ri input.ri-cerca {
  display: block; width: 100%; margin: 8px 0 0; padding: 9px 16px; height: auto;
  border: 1px solid #ccd3e0; border-radius: 999px; background: #fff; font-family: inherit; font-size: 18px; color: var(--txt);
}
.ri input.ri-cerca:focus { border-color: var(--ara); outline: 0; box-shadow: 0 0 0 3px rgba(242,140,0,.2); }
.ri-cats { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.ri-cats::-webkit-scrollbar { display: none; }
.ri .ri-cats button {
  flex: 0 0 auto; border: 1px solid var(--bor); background: #fff; color: var(--txt); border-radius: 999px;
  padding: 3px 12px; margin: 0; font-size: 16px; cursor: pointer; line-height: 1.3;
}
.ri .ri-cats button small { color: var(--gri); font-size: .85em; }
.ri .ri-cats button.on { background: var(--ara); border-color: var(--ara); color: #fff; }
.ri .ri-cats button.on small { color: #fff; }
.ri .ri-cats button[hidden] { display: none; }

/* ---------- classifica: una riga per atleta ---------- */
.ri-intest { display: none; }
.ri-r { border-bottom: 1px solid #eef0f5; }
.ri-r[hidden] { display: none; }
.ri .ri-riga {
  display: grid; grid-template-columns: 44px minmax(0,1fr) auto; grid-template-areas: "pos chi tempo" "pos tags tempo";
  gap: 1px 12px; align-items: center; width: 100%; margin: 0; padding: 9px 16px; border: 0; border-radius: 0;
  background: none; text-align: left; color: inherit; cursor: pointer; font-size: inherit; line-height: inherit;
}
.ri .ri-riga:hover { background: #fafbfd; }
.ri .ri-riga:focus-visible { outline: 3px solid var(--ara); outline-offset: -3px; }
.ri-riga .ri-pos { grid-area: pos; }
.ri-pos {
  width: 42px; height: 42px; border-radius: 12px; background: #f1f3f8; color: var(--blu);
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 500; padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.ri-r.p1 .ri-pos { background: var(--oro); color: #5a4100; }
.ri-r.p2 .ri-pos { background: var(--arg); color: #2f3446; }
.ri-r.p3 .ri-pos { background: var(--bro); color: #fff; }
.ri-chi { min-width: 0; }
.ri-riga .ri-chi { grid-area: chi; }
.ri-nome { display: block; font-size: 21px; line-height: 1.1; color: var(--blu); font-weight: 500; }
.ri-soc { display: block; font-size: 16px; color: var(--gri); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-riga .ri-tags { grid-area: tags; }
.ri-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.ri-cat, .ri-sx { font-size: 14px; border-radius: 999px; padding: 1px 9px; line-height: 1.4; white-space: nowrap; }
.ri-cat { background: var(--ara-c); color: #9a5600; }
.ri-cat b { font-weight: 500; }
.ri-sx { background: #eef0f5; color: #4b5263; }
.ri-riga .ri-tempo { grid-area: tempo; }
.ri-tempo { text-align: right; font-size: 25px; line-height: 1; color: var(--blu); font-variant-numeric: tabular-nums; }
.ri-tempo small { display: block; margin-top: 3px; font-size: 15px; color: var(--gri); }
.ri-ritmo-d, .ri-dist-d { display: none; }

.ri-det { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 16px 12px 72px; }
.ri-det[hidden] { display: none; }
.ri-det div { background: var(--sfondo); border-radius: 10px; padding: 6px 10px; font-size: 14px; color: var(--gri); line-height: 1.2; }
.ri-det b { display: block; font-size: 21px; color: var(--blu); font-weight: 500; }
.ri-r.aperto { background: #fffaf0; box-shadow: inset 4px 0 0 var(--ara); }

.ri .ri-vuoto { padding: 26px 16px; text-align: center; color: var(--gri); font-size: 19px; }
.ri-vuoto[hidden] { display: none; }

/* ---------- iscritti ---------- */
.ri-schede { display: flex; gap: 6px; background: var(--blu); padding: 0 14px; }
.ri .ri-schede button {
  border: 0; margin: 0; background: none; color: rgba(255,255,255,.8); border-radius: 12px 12px 0 0;
  padding: 9px 16px 7px; font-size: 20px; cursor: pointer; line-height: 1.2;
}
.ri .ri-schede button small { font-size: .8em; opacity: .8; }
.ri .ri-schede button.on { background: #fff; color: var(--blu); }
.ri-pann[hidden] { display: none; }
.ri-num { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; padding: 14px 16px 2px; }
.ri-num div { background: var(--sfondo); border-radius: 12px; text-align: center; padding: 6px 4px 5px; font-size: 14px; color: var(--gri); line-height: 1.2; }
.ri-num b { display: block; font-size: 26px; color: var(--blu); font-weight: 500; line-height: 1.1; }
.ri-isc .ri-filtri { padding-top: 8px; }
.ri-isc .ri-filtri .ri-cerca { margin-top: 0; }
.ri-i { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 0 12px; align-items: center; padding: 8px 16px; border-bottom: 1px solid #eef0f5; }
.ri-i[hidden] { display: none; }
.ri-av {
  width: 38px; height: 38px; border-radius: 50%; background: var(--ara-c); color: #9a5600;
  display: flex; align-items: center; justify-content: center; font-size: 16px; padding-top: 2px;
}
.ri-i .ri-nome { font-size: 20px; }
.ri-i .ri-cat { background: #eef0f5; color: var(--blu); font-size: 15px; }
.ri-gruppo { padding: 12px 16px 4px; font-size: 17px; color: var(--ara); border-bottom: 1px solid #eef0f5; background: #fcfcfe; }
.ri .ri-admin { padding: 12px 16px 14px; }
.ri-admin a { color: var(--blu) !important; font-size: 17px; }

/* ---------- computer: la classifica diventa una tabella ---------- */
@media (min-width: 780px) {
  .ri { font-size: 19px; }
  .ri .ri-testa h1 { font-size: 46px; }
  .ri-testa { padding: 22px 26px 20px; gap: 18px; }
  .ri-logo { width: 78px; height: 78px; flex-basis: 78px; }
  .ri-filtri { display: grid; grid-template-columns: 340px 1fr; gap: 8px 14px; align-items: center; padding: 14px 22px 12px; }
  .ri input.ri-cerca { margin: 0; }
  .ri-cats { grid-column: 1 / -1; flex-wrap: wrap; overflow: visible; margin: 0; }
  .ri-isc .ri-filtri { grid-template-columns: 1fr; }

  .ri-intest {
    display: grid; grid-template-columns: 56px minmax(0,1fr) 190px 90px 90px 110px; gap: 14px;
    padding: 8px 22px; font-size: 15px; color: var(--gri); background: #fafbfd; border-bottom: 1px solid var(--bor);
  }
  .ri-intest span:nth-child(n+4) { text-align: right; }
  .ri .ri-riga {
    grid-template-columns: 56px minmax(0,1fr) 190px 90px 90px 110px; grid-template-areas: "pos chi tags ritmo dist tempo";
    gap: 14px; padding: 9px 22px;
  }
  .ri-tags { margin: 0; }
  .ri-ritmo-d, .ri-dist-d { display: block; text-align: right; font-size: 18px; color: var(--gri); font-variant-numeric: tabular-nums; }
  .ri-ritmo-d { grid-area: ritmo; } .ri-dist-d { grid-area: dist; }
  .ri-tempo small { display: none; }
  .ri-det { padding: 0 22px 14px 92px; max-width: 760px; }
  .ri-num { grid-template-columns: repeat(3, 160px); padding: 16px 22px 4px; }
  .ri-i { padding: 9px 22px; }
  .ri-schede { padding: 0 22px; }
}
@media (max-width: 400px) {
  .ri { padding: 0 8px; }
  .ri .ri-testa h1 { font-size: 32px; }
  .ri-logo { width: 50px; height: 50px; flex-basis: 50px; }
  .ri .ri-riga { padding: 8px 12px; gap: 1px 10px; }
  .ri-det { grid-template-columns: repeat(2, 1fr); padding: 0 12px 12px; }
  .ri .ri-schede button { font-size: 18px; padding: 8px 12px 6px; }
}
@media (prefers-reduced-motion: reduce) { .ri-info .ri-live { animation: none; } }

/* =============================================================================
   CIRCUITO DEI BORGHI (classifica a punti)
   ============================================================================= */
.cb-cerchio {
  flex: 0 0 64px; height: 64px; border-radius: 50%; background: var(--ara); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 500; line-height: 1; padding-top: 3px;
}
.cb-cerchio small { font-size: 16px; opacity: .9; }
.cb-gruppo { padding: 12px 16px 5px; font-size: 18px; color: var(--ara); background: #fcfcfe; border-bottom: 1px solid #eef0f5; }
.cb-gruppo[hidden], .cb-intest { display: none; }
.cb-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.cb-gare { font-size: 14px; border-radius: 999px; padding: 1px 9px; background: #eef0f5; color: #4b5263; line-height: 1.4; white-space: nowrap; }
.cb-gare.ok { background: #e6f6ec; color: #1e7a3c; }
.cb-tot { font-size: 28px; font-weight: 500; }
.cb-tot small { font-size: 14px; }
/* punti gara per gara: su smartphone si vedono toccando l'atleta */
.cb-punti { display: none; grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.cb-r.aperto .cb-punti { display: grid; }
.cb-p { background: var(--sfondo); border-radius: 10px; padding: 5px 8px; font-size: 13px; color: var(--gri); line-height: 1.15; min-width: 0; }
.cb-p::before { content: attr(data-g); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-p b { display: block; font-size: 20px; font-weight: 500; color: var(--blu); }
.cb-p.part b { color: #9a5600; }
.cb-p.no b, .cb-p.futura b { color: #a0a6b1; }
.cb-p.futura { opacity: .55; }
.cb-p.cb-bonus.vuoto { display: none; }
.cb-r.aperto .cb-riga { grid-template-areas: "pos chi tempo" "punti punti punti"; }
.cb-r.aperto .cb-punti { grid-area: punti; }
.ri .cb-legenda { padding: 12px 16px 16px; font-size: 15px; color: var(--gri); line-height: 1.8; }
.cb-legenda .cb-p { display: inline-block; padding: 0 8px; vertical-align: middle; }
.cb-legenda .cb-p::before { display: none; }
.cb-legenda .cb-p b { font-size: 15px; display: inline; }

@media (min-width: 900px) {
  .ri-circ { max-width: 1100px; }
  #content .ri-circ, .entry-content .ri-circ { max-width: 1100px !important; }
  .cb-intest {
    display: grid; grid-template-columns: 50px minmax(170px, 1fr) repeat(var(--ng), 58px) 52px 70px; gap: 6px;
    padding: 8px 22px; font-size: 13px; color: var(--gri); background: #fafbfd; border-bottom: 1px solid var(--bor); align-items: end;
  }
  .cb-intest span { line-height: 1.1; overflow-wrap: anywhere; hyphens: auto; }
  .cb-intest span:nth-child(n+3) { text-align: center; }
  .cb-intest span:last-child { text-align: right; }
  .ri .cb-riga, .ri .cb-r.aperto .cb-riga {
    grid-template-columns: 50px minmax(170px, 1fr) repeat(var(--ng), 58px) 52px 70px; grid-template-areas: none; gap: 6px; padding: 8px 22px;
  }
  .cb-riga .ri-pos, .cb-riga .ri-chi, .cb-riga .ri-tempo { grid-area: auto; }
  .cb-punti, .cb-r.aperto .cb-punti { display: contents; }
  .cb-p { background: none; padding: 0; text-align: center; }
  .cb-p::before { display: none; }
  .cb-p b { font-size: 19px; }
  .cb-p.cb-bonus b { color: var(--ara); }
  .cb-p.cb-bonus.vuoto { display: block; }
  .cb-tot { text-align: right; }
  .cb-tot small { display: none; }
  .cb-r.aperto { background: none; box-shadow: none; }
  .cb-gruppo { padding: 12px 22px 5px; }
  .ri .cb-legenda { padding: 12px 22px 18px; }
}
