/* Striscia "Photopix Banner Exchange" - CSS pronto da riusare (Grafica Photopix, 10/10/2026)
   Markup (largo quanto il banner; il contenitore .pbx decide la larghezza):
   <div class="pbx" style="width:728px">
     [banner]
     <a class="pbx-strip" href="https://exchange.photopix.it/"><span class="l">Photopix Banner Exchange</span><span class="m">Banner Exchange</span><span class="s">Exchange</span></a>
   </div>
   Sui fondi scuri aggiungere la classe pbx-strip--light (striscia bianca con testo teal scuro e bordo).
   Testo: lungo >= 300 px, medio "Banner Exchange" tra 200 e 299 px, corto "Exchange" sotto 180 px (usa container query; senza supporto resta il testo lungo, tagliato con ellissi).
   Contrasti: teal #0f766e / bianco = 5,47:1; bianca: testo #0b5a54 su #fff = 8,0:1. Solo font di sistema, nessuna risorsa esterna. */
.pbx{container-type:inline-size;max-width:100%}
.pbx-strip{display:block;box-sizing:border-box;width:100%;height:16px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;
  background:#0f766e;color:#fff;border:0;text-decoration:none;
  font:600 10px/16px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.pbx-strip:hover,.pbx-strip:focus-visible{text-decoration:underline;filter:brightness(1.12)}
.pbx-strip:focus-visible{outline:2px solid #ffcc00;outline-offset:-2px}
.pbx-strip .m,.pbx-strip .s{display:none}
.pbx-strip--light{background:#fff;color:#0b5a54;border:1px solid #0f766e;border-top-width:1px}
.pbx-strip--light:hover,.pbx-strip--light:focus-visible{filter:none;background:#e6f4f2}
@container (max-width:299px){.pbx-strip .l{display:none}.pbx-strip .m{display:inline}}
@container (max-width:179px){.pbx-strip .m{display:none}.pbx-strip .s{display:inline}.pbx-strip{font-size:9px;letter-spacing:.04em}}