/* MOTOWEB-S05 tappa B - elenco "Tutti i MotoTour" (proposta unica approvata il 03/10/2026).
   In alto le tre domande del consiglio, poi il cruscotto (ricerca, spie, contagiri), «Per te» con tre giri,
   la carta chiara che fa da indice accanto ai giri, in lista o in cartoline. Tutto dentro .eb: nessuna regola
   tocca il resto del sito. Colori e caratteri del sito (moto.css); qui solo i colori della carta. */
:root{--pg:#E3DCC9;--tr:#D8E0D2;--confine:#C9BFA9;--anello:#1D1E20;--anello-tenue:rgba(29,30,32,.16)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pg:#23262A;--tr:#1E2722;--confine:#33383E;--anello:#ECE6D8;--anello-tenue:rgba(236,230,216,.18)}}
:root[data-theme="dark"]{--pg:#23262A;--tr:#1E2722;--confine:#33383E;--anello:#ECE6D8;--anello-tenue:rgba(236,230,216,.18)}

.eb{padding-block:1.4rem 3rem}
.eb h1,.eb h2,.eb h3{font-family:var(--f-display);font-weight:700;letter-spacing:.01em;text-wrap:balance;margin:0;line-height:1.05}
.eb .eb-testa{display:grid;gap:.4rem;padding-block:.4rem .2rem}
.eb .eb-testa h1{font-size:clamp(2rem,6vw,3.2rem);text-transform:uppercase}
.eb .eb-testa .intro{font-family:var(--f-read);max-width:62ch;margin:0;color:var(--fg-2)}
.eb :focus-visible{outline:3px solid var(--mezzeria);outline-offset:2px}
.eb .ia{vertical-align:-.1em}

/* il consiglio: tre domande */
.eb .consiglio{display:grid;grid-template-columns:minmax(0,1fr);gap:.55rem;margin-top:1rem;background:var(--bg-2);border-radius:14px;padding:.9rem}
.eb .consiglio h2{font-size:1.5rem;text-transform:uppercase}
.eb .domanda2{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:.6rem;align-items:center}
.eb .domanda2>span{font:700 1.02rem/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.04em}
.eb .pill{display:flex;flex-wrap:wrap;gap:.4rem}
.eb .pill button{font:600 .86rem/1 var(--f-ui);border:2px solid var(--linea);background:var(--bg);color:var(--fg);border-radius:999px;padding:.55rem .8rem;min-height:40px;cursor:pointer}
.eb .pill button small{font-weight:400;color:var(--fg-2);margin-left:.3rem}
.eb .pill button[aria-pressed="true"]{background:var(--asfalto);border-color:var(--asfalto);color:var(--su-asfalto)}
.eb .pill button[aria-pressed="true"] small{color:var(--su-asfalto-2)}

/* il cruscotto dei filtri */
.eb .cruscotto{background:var(--asfalto);color:var(--su-asfalto);border-radius:14px;padding:.9rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem;box-shadow:var(--ombra);margin-top:.8rem}
.eb .cruscotto .riga{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.eb .etichetta{font:600 .7rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--su-asfalto-2);min-width:6.5rem}
.eb .cerca{display:flex;gap:.5rem;align-items:center;flex:1 1 16rem;min-width:0}
.eb .cerca input{flex:1;min-width:0;width:100%;font:400 1rem/1.2 var(--f-ui);padding:.7rem .85rem;border-radius:8px;border:1px solid var(--asfalto-3);background:var(--asfalto-2);color:var(--su-asfalto)}
.eb .cerca input::placeholder{color:var(--su-asfalto-2)}
.eb .contagiri{display:flex;align-items:center}
.eb .contagiri svg{width:4.6rem;height:2.9rem}
.eb .contagiri .lancetta{transition:transform .5s cubic-bezier(.3,1.4,.5,1);transform-origin:50px 52px}
.eb .contatore{font:700 2rem/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--mezzeria);min-width:3.2ch;text-align:right}
.eb .contatore small{display:block;font:600 .62rem/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--su-asfalto-2);margin-top:.25rem}
.eb .fspia{display:inline-flex;align-items:center;gap:.45rem;font:600 .82rem/1 var(--f-ui);padding:.55rem .75rem;min-height:40px;border-radius:999px;border:1px solid var(--asfalto-3);background:var(--asfalto-2);color:var(--su-asfalto-2);cursor:pointer}
.eb .fspia i{width:.55rem;height:.55rem;border-radius:50%;background:var(--asfalto-3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.eb .fspia[aria-pressed="true"]{color:var(--su-asfalto);border-color:var(--su-asfalto-2)}
.eb .fspia[aria-pressed="true"] i{background:var(--c,var(--spia-verde));box-shadow:0 0 8px var(--c,var(--spia-verde))}
.eb .azzera{font:600 .8rem/1 var(--f-ui);background:none;border:none;color:var(--su-asfalto-2);text-decoration:underline;cursor:pointer;padding:.5rem;min-height:40px}

/* «Per te» */
.eb .per-te{margin-top:1rem;display:grid;gap:.6rem}
.eb .per-te .testa{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap}
.eb .per-te h2{font-size:clamp(1.5rem,4vw,2.2rem);text-transform:uppercase}
.eb .per-te .testa p{margin:0;font-family:var(--f-read);color:var(--fg-2)}
.eb .scelti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.eb .scelto{background:var(--bg);border:1px solid var(--linea);border-radius:12px;overflow:hidden;display:grid;align-content:start;color:inherit;text-decoration:none}
.eb .scelto:hover{border-color:var(--rocca);box-shadow:var(--ombra)}
.eb .foto{position:relative;background:var(--bg-2)}
.eb .foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain}
.eb .foto svg{position:absolute;inset:0;width:100%;height:100%}
.eb .foto svg path,.eb .tile svg path{fill:none;stroke:var(--rocca);stroke-linejoin:round;filter:drop-shadow(0 0 2px rgba(255,255,255,.85))}
.eb .foto svg path{stroke-width:3.2}
.eb .scelto .corpo{padding:.7rem .8rem .8rem;display:grid;gap:.3rem}
.eb .scelto h3{font-size:1.35rem;text-transform:uppercase}
.eb .scelto h3 small{font:600 .8rem var(--f-ui);color:var(--fg-2);text-transform:none}
.eb .scelto .tit{font-family:var(--f-read);font-style:italic;margin:0;color:var(--fg-2)}
.eb .scelto .perche{font:400 .85rem/1.35 var(--f-ui);color:var(--fg-2);margin:0}

/* carta e risultati */
.eb .principale{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1rem;margin-top:1.2rem;align-items:start}
.eb .carta-box{position:sticky;top:calc(var(--top) + 70px);background:var(--bg-2);border-radius:14px;overflow:hidden;border:1px solid var(--linea)}
.eb .carta-box:empty{display:none}
.eb .carta-box svg{display:block;width:100%;height:auto}
.eb .carta-box .com{stroke:var(--confine);stroke-width:.6}
.eb .carta-box .com.pg{fill:var(--pg)} .eb .carta-box .com.tr{fill:var(--tr)}
.eb .carta-box .anello{fill:none;stroke:var(--anello);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;opacity:.9;cursor:pointer;transition:opacity .2s,stroke .2s}
.eb .carta-box .anello.spento{stroke:var(--anello-tenue);stroke-width:1.4;opacity:1}
.eb .carta-box .anello.acceso{stroke:var(--rocca);stroke-width:4.5;opacity:1}
.eb .carta-box .leg{position:absolute;left:.7rem;bottom:.6rem;display:flex;gap:.8rem;flex-wrap:wrap;font:600 .72rem/1 var(--f-ui);color:var(--fg-2);background:color-mix(in srgb,var(--bg) 85%,transparent);padding:.4rem .6rem;border-radius:6px}
.eb .carta-box .leg span{display:inline-flex;align-items:center;gap:.35rem}
.eb .carta-box .leg b{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;border:1px solid var(--confine)}
.eb .carta-box .nome-giro{position:absolute;right:.7rem;top:.6rem;font:700 1.05rem/1.1 var(--f-display);text-transform:uppercase;background:var(--asfalto);color:var(--su-asfalto);padding:.45rem .6rem;border-radius:6px;max-width:60%}
.eb .risultati-testa{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.4rem}
.eb .risultati-testa h2{font-size:1.5rem;text-transform:uppercase}
.eb .vista{display:inline-flex;border:2px solid var(--fg);border-radius:8px;overflow:hidden}
.eb .vista button{font:700 .9rem/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--fg);border:0;padding:.6rem .85rem;min-height:40px;cursor:pointer}
.eb .vista button[aria-pressed="true"]{background:var(--asfalto);color:var(--su-asfalto)}
.eb .zona-titolo{font:700 1.05rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);margin:.8rem 0 .5rem;display:flex;justify-content:space-between;border-bottom:1px solid var(--linea);padding-bottom:.35rem}
.eb .lista{display:grid;gap:.6rem}
.eb .card{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:.8rem;align-items:center;background:var(--bg);border:1px solid var(--linea);border-radius:10px;padding:.6rem .7rem;text-decoration:none;color:inherit}
.eb .card:hover,.eb .card.acceso{border-color:var(--rocca);box-shadow:var(--ombra)}
.eb .card svg{width:4.6rem;height:4.6rem;background:var(--bg-2);border-radius:8px}
.eb .card svg path{fill:none;stroke:var(--anello);stroke-width:3;stroke-linejoin:round}
.eb .card h3{font-size:1.25rem;text-transform:uppercase}
.eb .card h3 small{font:600 .8rem var(--f-ui);color:var(--fg-2);text-transform:none}
.eb .card .tit{font-family:var(--f-read);font-style:italic;margin:.1rem 0 .3rem;color:var(--fg-2);line-height:1.3}
.eb .cc{min-width:0}
.eb .numeri{display:flex;flex-wrap:wrap;gap:.35rem .8rem;font:600 .82rem/1.2 var(--f-ui);font-variant-numeric:tabular-nums}
.eb .numeri span{white-space:nowrap}
.eb .numeri .chip~span{white-space:normal}
.eb .chip{display:inline-block;font:600 .7rem/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;padding:.28rem .45rem;border-radius:4px;background:var(--bg-2);color:var(--fg)}
.eb .chip.facile{background:#DCEFD9;color:#1E5A2A} .eb .chip.media{background:#F6E7B8;color:#6B4D00} .eb .chip.facile-media{background:#E8EFC9;color:#46560F} .eb .chip.impegnativa{background:#F4D2CC;color:#7A1F15}
.eb .chip.sella{background:var(--mezzeria);color:#16181B;vertical-align:.15em;margin-left:.3rem}
.eb .parete{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.7rem}
.eb .tile{position:relative;border-radius:10px;overflow:hidden;background:var(--bg-2);color:inherit;text-decoration:none;transition:transform .2s;box-shadow:0 1px 0 var(--linea)}
.eb .tile:hover{transform:translateY(-3px);box-shadow:var(--ombra)}
.eb .tile.acceso{outline:3px solid var(--rocca);outline-offset:1px}
.eb .tile .riq{position:relative}
.eb .tile img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain}
.eb .tile svg{position:absolute;inset:0;width:100%;height:100%}
.eb .tile svg path{stroke-width:5}
.eb .tile .didascalia{padding:.45rem .55rem .55rem;background:var(--bg);display:grid;gap:.1rem}
.eb .tile .didascalia b{font:700 1rem/1.05 var(--f-display);text-transform:uppercase}
.eb .tile .dati{display:flex;flex-wrap:wrap;gap:0 .5rem;font:600 .74rem/1.3 var(--f-ui);color:var(--fg-2);font-variant-numeric:tabular-nums}
.eb .tile .dati span{white-space:nowrap}
.eb .tile .bollo{position:absolute;top:.4rem;left:.4rem;font:600 .62rem/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;background:var(--mezzeria);color:#16181B;padding:.25rem .35rem;border-radius:3px}
.eb .vuoto{font-family:var(--f-read);color:var(--fg-2);padding:1rem;border:1px dashed var(--linea);border-radius:10px}
.eb .solo-tel{display:none;margin:0}
.eb .nota{font:400 .86rem/1.45 var(--f-ui);color:var(--fg-2);max-width:75ch;margin-top:1.4rem}
@media (max-width:600px){
  .eb .pill{flex-wrap:nowrap;overflow-x:auto;margin-inline:-.9rem;padding:0 .9rem .35rem;scrollbar-width:thin}
  .eb .pill button{flex:none}
  .eb .carta-box{display:none}
  .eb .solo-tel{display:block}
  .eb .cruscotto .etichetta{min-width:0;flex-basis:100%}
  .eb .cerca{flex-wrap:wrap}
}
@media (max-width:860px){
  .eb .principale{grid-template-columns:minmax(0,1fr)}
  .eb .carta-box{position:relative;top:0}
  .eb .domanda2{grid-template-columns:minmax(0,1fr)}
  .eb .scelti{grid-template-columns:minmax(0,1fr)}
}
