/* Attrezzatura (server/views/gear.mjs, public/assets/js/gear.js): introduzione, filtro per disciplina, indice dei gruppi, schede (gearCard di
   site.css), «I miei kit». Nessun elemento fisso o sticky: filtro e indice stanno in cima al catalogo e scorrono con la pagina. */

/* ---- introduzione */
.gear-intro__grid { display: grid; gap: clamp(24px, 4vw, 72px); align-items: start; }
@media (min-width: 960px) { .gear-intro__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.gear-intro__lead { max-width: 22em; }
.gear-intro__side { display: grid; gap: 22px; color: var(--muted); }
.gear-intro__facts { display: flex; flex-wrap: wrap; gap: 14px 36px; padding-top: 18px; border-top: 1px solid var(--line); }
.gear-intro__facts li { display: grid; gap: 4px; }
.gear-intro__facts strong { font: 300 clamp(2.4rem, 2rem + 1.6vw, 3.4rem)/.95 var(--font-display); color: var(--text); }
.gear-intro__facts span { font: 500 var(--fs-kicker)/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gear-note { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: var(--fs-xs); color: var(--muted); }
.gear-note .i { width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }

/* ---- filtro, indice, conteggio */
.gear-catalog { padding-top: clamp(24px, 3vw, 40px); }
.gear-tools { display: grid; gap: 22px; margin-bottom: clamp(40px, 6vw, 88px); padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--r-block); background: var(--bg-2); }
.gear-tools > * { min-width: 0; } /* la riga di chip che scorre di lato non deve allargare la griglia */
.gear-tools__label { margin-bottom: 12px; font: 500 var(--fs-kicker)/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gear-filter__chips .chip .i { color: var(--accent); }
.gear-filter__chips .chip[aria-current] .i { color: inherit; }
@media (max-width: 639px) {
  .gear-filter__chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * clamp(18px, 2.4vw, 28px)); padding: 2px clamp(18px, 2.4vw, 28px) 6px; }
  .gear-filter__chips::-webkit-scrollbar { display: none; }
  .gear-filter__chips .chip { flex: none; }
}
.gear-index__list { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.gear-index__list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: var(--r-pill); color: var(--text); font-size: var(--fs-small); transition: background-color .25s, color .25s; }
.gear-index__list a .i { width: 17px; height: 17px; color: var(--accent); }
.gear-index__n { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .gear-index__list a:hover { background: var(--surface-2); color: var(--accent-2); } }
.gear-tools__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.gear-tools__count { font: 400 clamp(1.25rem, 1.1rem + .5vw, 1.6rem)/1.25 var(--font-display); font-variant-numeric: lining-nums; }

/* ---- gruppi e schede */
.gear-group { scroll-margin-top: calc(var(--header-space) + 16px); }
.gear-group + .gear-group { margin-top: clamp(64px, 9vw, 128px); }
.gear-group__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: center; margin-bottom: clamp(24px, 3vw, 40px); max-width: 880px; }
.gear-group__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(212, 180, 131, .45); color: var(--accent-2); }
.gear-group__icon .i { width: 22px; height: 22px; }
.gear-group__title { font-size: var(--fs-h2); font-weight: 450; }
.gear-group__text { grid-column: 1 / -1; margin-top: 8px; color: var(--muted); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); max-width: 62ch; }
.gear-grid { align-items: stretch; }
.gear-item { display: grid; min-width: 0; container: gear-item / inline-size; }

/* specifiche delle schede (gearCard): nessuna etichetta spezzata a metà parola, in nessuna lingua («Höchstgeschwindigkeit», «Ветроустойчивость»,
   «Stabilizzazione»…). Con la griglia di questa pagina le schede sono larghe 250–400 px: l'etichetta sta SOPRA il valore e ha tutta la larghezza.
   In una scheda più larga (da 460 px) etichetta e valore tornano affiancati e la colonna dell'etichetta è larga quanto la più lunga (subgrid).
   I valori sono dati del prodotto (codici, unità, nomi in italiano): niente sillabazione automatica della lingua della pagina. */
.gear-card .specs dt { font: 500 .6875rem/1.4 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; }
.gear-card .specs dd { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
.gear-card .specs > div { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 9px 0 10px; }
@container gear-item (min-width: 460px) {
  .gear-card .specs { grid-template-columns: fit-content(46%) minmax(0, 1fr); column-gap: 18px; }
  .gear-card .specs > div { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; }
  .gear-card .specs dt { font: 400 var(--fs-small)/1.5 var(--font-ui); letter-spacing: 0; text-transform: none; }
}
.gear-card { transition: border-color .4s var(--ease), box-shadow .6s var(--ease); }
.gear-card:target, .gear-card.is-target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 24px 60px -28px rgba(212, 180, 131, .35); }
.gear-note--filter { margin-top: clamp(40px, 5vw, 64px); max-width: 62ch; font-size: var(--fs-small); }

/* ---- i miei kit */
.gear-kits__list { display: grid; }
.gear-kit { display: grid; gap: 22px 48px; padding-block: clamp(28px, 3.6vw, 44px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-space) + 16px); }
.gear-kit:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 960px) { .gear-kit { grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); align-items: start; } }
.gear-kit__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; }
.gear-kit__icon { grid-row: span 2; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.gear-kit__icon .i { width: 21px; height: 21px; }
.gear-kit__n { font: 500 var(--fs-kicker)/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.gear-kit__title { font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); line-height: 1.05; }
.gear-kit__text { grid-column: 1 / -1; margin-top: 8px; color: var(--muted); }
.gear-kit__more { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
.gear-kit__items { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.gear-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; max-width: 100%; padding: 4px 16px 4px 4px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-small); line-height: 1.25; color: var(--text); transition: border-color .25s, background-color .25s, color .25s; }
.gear-pill__img { flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: radial-gradient(80% 70% at 50% 40%, #2a2622, #171513); }
.gear-pill__img img { width: 100%; height: 100%; object-fit: cover; }
.gear-pill__img .i { width: 18px; height: 18px; color: var(--faint); }
.gear-pill__name { min-width: 0; overflow-wrap: break-word; }
.gear-pill__brand { color: var(--muted); }
@media (hover: hover) { .gear-pill:hover { border-color: rgba(212, 180, 131, .5); background: var(--surface-2); color: var(--accent-2); } }

/* etichette brevi in maiuscoletto: niente sillabazione automatica (tedesco, russo, francese), come .kicker e .label di site.css */
:is(.gear-tools__label, .gear-intro__facts span, .gear-kit__n, .gear-index__list a) { hyphens: manual; -webkit-hyphens: manual; }