/* ==========================================================================
   7/11 · «Insegne vere» ridisegnata (richiesta di Nicolò, quarta scheda: la concessionaria)
   Si carica dopo tutti gli altri file e sostituisce le composizioni precedenti (fable.css, taste.css, quadro.css):
   togliendo la riga in index.html si torna a com'era.
   - Telefono: quattro schede uguali da sfogliare col pollice, con puntini, contatore «1 / 4» e «Scorri».
   - Computer (da 900 px): griglia 2 × 2, schede alte uguali.
   - Ogni scheda è un modulo del pannello (filo da 1 px, fondo puntinato), il video ha angoli da 16 px, il numero della scheda
     sta sul video, sotto: spia, nome, descrizione e misure in pastiglie. La didascalia è sempre visibile.
   ========================================================================== */

.pr .pr-strip{position:relative}

/* ---------- elenco: carosello sul telefono ---------- */
.pr .pr-list{display:flex;gap:12px;max-width:none;margin:0;padding:4px calc((100% - min(80vw,380px)) / 2);list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:0;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.pr .pr-list::-webkit-scrollbar{display:none}
.pr .pr-card{flex:0 0 min(80vw,380px);display:flex;grid-column:auto;align-self:stretch;margin:0;scroll-snap-align:center;scroll-snap-stop:normal}
.pr .pr-card figure{transform-origin:50% 50%;will-change:transform,opacity}

/* ---------- la scheda ---------- */
.pr .pr-card figure{display:flex;flex-direction:column;width:100%;margin:0;padding:8px;gap:0;border:1px solid transparent;border-radius:24px;
  background:
    var(--q-dots) 0 0/5px 5px padding-box,
    radial-gradient(120% 40% at 50% 0,rgba(255,255,255,.05),transparent 70%) padding-box,
    linear-gradient(180deg,#121214,#0F0F11) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04) 55%,rgba(255,255,255,.08)) border-box}
.pr .pr-media{position:relative;flex:none;aspect-ratio:4/3;margin:0;overflow:hidden;border:0;border-radius:16px;background:#16181C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pr .pr-v{border-radius:inherit}
.pr .pr-tag{display:none}

/* ---------- didascalia (sempre visibile) ---------- */
.pr .pr-card figcaption{display:flex;flex:1;flex-direction:column;gap:6px;max-width:none;margin:0;padding:14px 8px 6px;border:0;
  font-size:.95rem;line-height:1.45;color:var(--muted);opacity:1;transform:none}
.pr .pr-card figcaption b{display:flex;align-items:center;gap:9px;margin:0;font-size:1.12rem;font-weight:800;letter-spacing:-.01em;color:#FFFFFF}
.pr .pr-card figcaption b::before{margin:0}
.pr .pr-d{display:block;font-size:inherit;line-height:inherit}
.pr .pr-f{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px;opacity:1;white-space:normal;font-weight:600}
.pr .pr-f i{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  color:#D1D1D6;font-size:.76rem;font-style:normal;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- sotto le schede (telefono): puntini, contatore, invito a scorrere ---------- */
.pr .pr-nav{position:relative;display:flex;align-items:center;gap:14px;margin:16px var(--gutter-r) 0 var(--gutter)}
.pr .pr-nav{justify-content:center;margin-top:12px}
.pr .pr-dots{display:flex;gap:0;margin:0}
.pr .pr-dots button{display:grid;place-items:center;min-width:28px;height:32px;padding:0 4px;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pr .pr-dots button i{display:block;width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.3);
  transition:width .3s var(--ease-out),background-color .2s ease,box-shadow .2s ease}
.pr .pr-dots button.on i{width:22px;background:#FFD24A;box-shadow:0 0 8px rgba(var(--q-glow),.6)}
.pr .pr-dots button:focus-visible{outline:2px solid #FFFFFF;outline-offset:-2px;border-radius:8px}
.pr .pr-dots button:active i{transform:scale(.85)}
.pr .pr-hint{position:absolute;right:var(--gutter-r);display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:#A1A1A6}
.pr .pr-hint svg{width:16px;height:16px}
.pr .pr-hint{transition:opacity .2s ease}
.pr .pr-nav.end .pr-hint{opacity:0}

/* ---------- computer: griglia 2 × 2 ---------- */
@media (min-width:900px){
  .pr .pr-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1120px;margin:0 auto;
    padding:0 var(--gutter-r) 0 var(--gutter);overflow:visible;scroll-snap-type:none}
  .pr .pr-card,.pr .pr-card:nth-child(n){flex:none;grid-column:auto;margin:0;align-self:stretch}
  .pr .pr-card figure{padding:10px;border-radius:26px}
  .pr .pr-card figcaption{padding:16px 10px 8px}
  .pr .pr-nav{display:none}
}
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .pr .pr-card figure{transition:transform .25s var(--ease-out)}
  .pr .pr-card:hover figure{transform:translateY(-3px)}
}

/* computer: niente effetti di scorrimento sulle schede */
@media (min-width:900px){.pr .pr-card figure{transform:none!important;opacity:1!important;will-change:auto}}