/*
 * Nivells dels reptes (2026-10-09). Només es carrega a /reptes/ i als reptes (inc/xt-reptes.php).
 * Fa servir les variables de taller.css (.xt). Còpia al repositori: theme/buddyboss-child/css/xt-reptes.css
 */

.xt{
  --n1:#2E9E5B;--n1-deep:#1D6E3E;--n1-tint:#E3F4E9;
  --n2:#2F6FDB;--n2-deep:#1D4C9E;--n2-tint:#E3ECFB;
  --n3:#E04A3A;--n3-deep:#A9301F;--n3-tint:#FCE5E1;
}
.xt .xt-n1{--n:var(--n1);--n-deep:var(--n1-deep);--n-tint:var(--n1-tint)}
.xt .xt-n2{--n:var(--n2);--n-deep:var(--n2-deep);--n-tint:var(--n2-tint)}
.xt .xt-n3{--n:var(--n3);--n-deep:var(--n3-deep);--n-tint:var(--n3-tint)}
.xt .xt-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Estrelles: les plenes es compten, les buides donen l'escala */
.xt .xt-estrelles{display:inline-flex;gap:2px;flex:none;line-height:0}
.xt .xt-estrelles svg{width:20px;height:20px;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.xt .xt-estrelles svg.on{fill:var(--sun)}
.xt .xt-estrelles svg.off{fill:transparent;stroke:var(--ink-soft);stroke-opacity:.4}

/* Filtre */
.xt .xt-nfiltres{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 22px}
.xt .xt-nfiltre{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.2;padding:9px 16px;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;box-shadow:none;text-transform:none;height:auto;transition:transform .15s}
.xt .xt-nfiltre:hover{transform:translateY(-2px)}
.xt .xt-nfiltre.xt-n1,.xt .xt-nfiltre.xt-n2,.xt .xt-nfiltre.xt-n3{background:var(--n-tint)}
.xt .xt-nfiltre .xt-estrelles svg{width:16px;height:16px}
.xt .xt-nfiltre[aria-pressed="true"]{background:var(--ink);color:#fff}
.xt .xt-nfiltre.xt-n1[aria-pressed="true"],.xt .xt-nfiltre.xt-n2[aria-pressed="true"],.xt .xt-nfiltre.xt-n3[aria-pressed="true"]{background:var(--n-deep);border-color:var(--ink)}
.xt .xt-nfiltre[aria-pressed="true"] .xt-estrelles svg.off{fill:transparent;stroke:rgba(255,255,255,.55)}
.xt .xt-nfiltre[aria-pressed="true"] .xt-estrelles svg.on{stroke:#fff}

/* Franges */
.xt .xt-nfranja{background:var(--n-tint);border-radius:24px;padding:22px;margin:0 0 18px;border-left:10px solid var(--n)}
.xt .xt-nfranja[hidden]{display:none}
.xt .xt-nfranja-cap{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.xt .xt-nfranja-cap > .xt-estrelles{background:#fff;border:2px solid var(--ink);border-radius:999px;padding:8px 12px}
.xt .xt-nfranja-cap > .xt-estrelles svg{width:28px;height:28px}
.xt .xt-nfranja-cap h3{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:var(--n-deep)}
.xt .xt-nfranja-cap p{margin:2px 0 0;color:var(--ink)}

/* Targetes */
.xt .xt-ncards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.xt .xt-ncard{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px;transition:transform .15s,box-shadow .15s}
.xt .xt-ncard:hover{transform:translateY(-3px);box-shadow:5px 6px 0 var(--n-deep)}
.xt .xt-ncard-dalt{display:flex;justify-content:space-between;align-items:center;gap:10px}
.xt .xt-ncard h4{font-family:var(--display);font-size:1.35rem;font-weight:800;line-height:1.15;margin:0}
.xt .xt-ncard h4 a{color:var(--ink);text-decoration:none}
.xt .xt-ncard h4 a::after{content:"";position:absolute;inset:0;border-radius:20px}
.xt .xt-ncard h4 a:focus-visible{outline:none}
.xt .xt-ncard:focus-within{outline:3px solid var(--sun);outline-offset:3px}
.xt .xt-ncard-que{margin:0;color:var(--ink-soft);font-size:.98rem}
.xt .xt-ncard-cal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.xt .xt-ncard-cal li{margin:0;font-size:.85rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--n-tint);color:var(--ink)}
.xt .xt-ncard .btn{align-self:flex-start;margin-top:auto}

/* Distintiu a la capçalera de cada repte */
.xt .rhero .xt-nivell{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 14px 6px 10px;border-radius:999px;background:var(--n-tint);border:2px solid var(--ink);font-family:var(--display);font-weight:800;font-size:1rem;color:var(--n-deep)}
.xt .rhero .xt-nivell .xt-estrelles svg{width:20px;height:20px}

@media (max-width:600px){
  .xt .xt-nfranja{padding:16px;border-left-width:8px}
  .xt .xt-nfranja-cap{align-items:flex-start;flex-direction:column;gap:10px}
  .xt .xt-ncards{grid-template-columns:1fr}
  .xt .xt-nfiltre{font-size:.95rem;padding:8px 14px}
}
@media (prefers-reduced-motion:reduce){.xt .xt-ncard,.xt .xt-nfiltre{transition:none}}

/* Portada: carrusel de reptes destacats (2026-10-09) */
.xt .xt-carr{margin-top:28px}
.xt .xt-carr-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 10px}
.xt .xt-carr-cap .eyebrow{margin:0}
.xt .xt-carr-botons{display:flex;gap:8px}
.xt .xt-carr-botons button{width:46px;height:46px;border-radius:50%;border:2px solid var(--ink);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:none;transition:transform .15s}
.xt .xt-carr-botons button:hover:not([disabled]){transform:translateY(-2px);background:var(--sun)}
.xt .xt-carr-botons button[disabled]{opacity:.3;cursor:default}
.xt .xt-carr-botons button:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.xt .xt-carr-pista{list-style:none;margin:0 -8px;padding:8px 8px 18px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px) / 3);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 8px;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--ink-soft) transparent}
.xt .xt-carr-pista:focus-visible{outline:3px solid var(--sun);outline-offset:2px;border-radius:12px}
.xt .xt-carr-pista > li{margin:0;padding:0;list-style:none;scroll-snap-align:start;display:flex}
.xt .xt-carr-pista .pick{width:100%}
.xt .xt-carr-pista .pick:hover{transform:translateY(-4px)}
.xt .xt-carr-pista .pick h2{font-size:1.45rem}
.xt .pick .xt-carr-dalt{display:flex;justify-content:space-between;align-items:center;gap:6px 8px;flex-wrap:wrap}
.xt .pick .xt-nivell{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 7px;border-radius:999px;background:var(--n-tint);border:1.5px solid var(--ink);font-family:var(--display);font-weight:800;font-size:.8rem;line-height:1.3;color:var(--n-deep)}
.xt .pick .xt-nivell .xt-estrelles svg{width:14px;height:14px}
.xt .xt-carr-peu{margin:4px 0 0}
@media (max-width:900px){.xt .xt-carr-pista{grid-auto-columns:calc((100% - 18px) / 2)}}
@media (max-width:600px){.xt .xt-carr-pista{grid-auto-columns:84%;gap:14px}.xt .xt-carr-botons button{width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){.xt .xt-carr-pista{scroll-behavior:auto}.xt .xt-carr-botons button{transition:none}}
.xt .xt-carr.xt-carr-sense-botons .xt-carr-botons{visibility:hidden}
.xt .xt-carr-pista,.xt .xt-carr-pista .pick{position:relative}

/* Quatre reptes per fila: cada nivell cap en una fila a l'ordinador (2026-10-09) */
.xt .xt-ncards{grid-template-columns:repeat(4,minmax(0,1fr))}
.xt .xt-ncard{padding:16px}
.xt .xt-ncard h4{font-size:1.2rem}
.xt .xt-ncard-dalt{flex-wrap:wrap}
.xt .xt-ncard-dalt .tool{font-size:.75rem}
@media (max-width:1000px){.xt .xt-ncards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.xt .xt-ncards{grid-template-columns:1fr}}