/* ==================================================================
   Biblioteca BitCal
   Archivio (/biblioteca/) e scheda dell'opera.
   I token --bcb-* arrivano da style.css; l'impianto dell'elenco e dei
   gruppi e' quello del glossario in blog-bitcal.css, perche' le due
   pagine fanno la stessa cosa: far scorrere un elenco lungo e aprire
   una voce sul posto. Identita' visiva: DESIGN.md.
   ================================================================== */

/* ---------- Archivio ---------- */

/* L'h1 degli archivi di questo sito e' azzurro (vedi .bcb-hero-categoria
   in blog-bitcal.css): la regola che lo riportava a crema staccava la
   biblioteca da glossario, categorie e autori. Qui resta solo la
   dimensione, piu' contenuta perche' il titolo e' lungo. */
.bitcal-blog.bcb-biblioteca .bcb-hero-categoria h1{
  font-size:clamp(2rem,4.2vw,3rem);line-height:1.16;max-width:24ch;
}
.bitcal-blog.bcb-biblioteca a:focus-visible{
  outline:3px solid var(--bcb-azzurro);outline-offset:3px;
}
.bitcal-blog.bcb-biblioteca .bcb-hero a:focus-visible{outline-color:var(--bcb-grigio);}

/* Strumenti: ricerca e filtri. Nascosti con l'attributo hidden nel markup
   e rivelati dallo script, cosi' senza JavaScript non resta un modulo
   che non filtra niente. */
.bitcal-blog .bcb-bib-strumenti{margin:0 0 8px;}
.bitcal-blog .bcb-bib-strumenti[hidden]{display:none;}
.bitcal-blog .bcb-bib-azzera{
  min-height:42px;padding:8px 18px;
  background:transparent;border:1.5px solid #a9a196;border-radius:999px;
  font-family:var(--bcb-titoli);font-size:.82rem;color:var(--bcb-antracite);cursor:pointer;
}
.bitcal-blog .bcb-bib-azzera:hover{border-color:var(--bcb-antracite);background:var(--bcb-carta);}
.bitcal-blog .bcb-bib-azzera[hidden]{display:none;}
.bitcal-blog .bcb-bib-conteggio{
  margin:14px 0 0;
  font-family:var(--bcb-titoli);font-size:.78rem;letter-spacing:.06em;color:#6d675d;
}
.bitcal-blog .bcb-bib-nessuno{font-family:var(--bcb-titoli);color:#777;padding:8px 0;}
.bitcal-blog .bcb-bib-nessuno[hidden],
.bitcal-blog .bcb-bib-item[hidden],
.bitcal-blog .bcb-bib-scaffale[hidden]{display:none;}

/* Intestazione d'area: gemella della lettera del glossario, azzurra con
   il filetto che corre fino al bordo destro. E' lo stacco che mancava
   quando le aree erano state togliere dalla pagina. */
.bitcal-blog .bcb-bib-scaffale-titolo{
  display:flex;align-items:center;gap:14px;
  font-family:var(--bcb-titoli);font-weight:700;color:var(--bcb-azzurro);
  font-size:1.25rem;line-height:1.2;letter-spacing:.02em;
  margin:46px 0 10px;padding:0 12px;scroll-margin-top:90px;
}
.bitcal-blog .bcb-bib-scaffale:first-of-type .bcb-bib-scaffale-titolo{margin-top:8px;}
.bitcal-blog .bcb-bib-scaffale-titolo > span:first-child{flex:none;}
.bitcal-blog .bcb-bib-scaffale-titolo::after{
  content:"";order:1;flex:1 1 auto;height:2px;background:var(--bcb-azzurro);opacity:.6;
}
.bitcal-blog .bcb-bib-scaffale-n{
  order:2;flex:none;font-size:.8rem;font-weight:600;color:#6d675d;letter-spacing:.04em;
}

/* Elenco: filetti sottili, nessuna card. Ogni riga e' un titolo che
   porta alla scheda, le lingue e i pulsanti. Niente anteprima a
   tendina: la scheda e' a un clic. */
.bitcal-blog .bcb-bib-elenco{list-style:none;margin:0;padding:0;}
.bitcal-blog .bcb-bib-item{margin:0;padding:0;}
.bitcal-blog .bcb-bib-opera{
  display:grid;grid-template-columns:minmax(0,1fr) 37px 190px;
  align-items:center;gap:20px;padding:14px 12px;
  border-top:1px solid #e4ded4;scroll-margin-top:112px;
}
.bitcal-blog .bcb-bib-item:first-child .bcb-bib-opera{border-top:0;}
.bitcal-blog .bcb-bib-opera:hover{background:var(--bcb-carta);}
.bitcal-blog .bcb-bib-titolo-autore{min-width:0;}
.bitcal-blog .bcb-bib-riga-titolo{
  display:block;font-family:var(--bcb-titoli);font-weight:500;font-size:1rem;line-height:1.35;
  color:var(--bcb-antracite);text-decoration:none;overflow-wrap:break-word;
}
/* Il titolo si comporta come il lemma del glossario: arancio e
   sottolineato al passaggio del mouse. */
.bitcal-blog .bcb-bib-riga-titolo:hover{
  color:var(--bcb-arancio);text-decoration:underline;text-underline-offset:3px;
}
.bitcal-blog .bcb-bib-riga-autore{
  display:block;margin-top:3px;font-size:.85rem;line-height:1.45;color:#6a6a6a;
}

/* ---------- Lingue: bandiere tonde ---------- */

/* SVG, non emoji: su Windows le emoji bandiera diventano due lettere.
   Il nome della lingua resta nell'aria-label e nel title, cosi'
   l'informazione non sta solo nel colore. */
/* Larghezza fissa (due bandiere e lo spazio fra loro): ogni riga e' una
   griglia a se', e con colonne automatiche bandiere e pulsanti
   slittavano da una riga all'altra. */
.bitcal-blog .bcb-bib-lingue{display:flex;align-items:center;justify-content:flex-end;gap:5px;}
.bitcal-blog .bcb-bib-bandiera{
  width:16px;height:16px;border-radius:50%;flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
  background-color:#fff;background-repeat:no-repeat;
  background-position:center;background-size:cover;
}

.bitcal-blog .bcb-bib-bandiera-it{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23009246' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23CE2B37' d='M2 0h1v2H2z'/%3E%3C/svg%3E");
}
/* Union Jack completa: fondo blu, croci di Sant'Andrea e San Patrizio
   sulle diagonali, croce di San Giorgio al centro. */
.bitcal-blog .bcb-bib-bandiera-gb{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='s'%3E%3Cpath d='M0 0v30h60V0z'/%3E%3C/clipPath%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23s)'%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E");
}
.bitcal-blog .bcb-bib-bandiera-es{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23AA151B' d='M0 0h3v2H0z'/%3E%3Cpath fill='%23F1BF00' d='M0 .5h3v1H0z'/%3E%3C/svg%3E");
}
.bitcal-blog .bcb-bib-bandiera-fr{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23002395' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ED2939' d='M2 0h1v2H2z'/%3E%3C/svg%3E");
}
.bitcal-blog .bcb-bib-bandiera-de{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cpath d='M0 0h5v3H0z'/%3E%3Cpath fill='%23D00' d='M0 1h5v2H0z'/%3E%3Cpath fill='%23FFCE00' d='M0 2h5v1H0z'/%3E%3C/svg%3E");
}
.bitcal-blog .bcb-bib-lingua-ignota{
  font-family:var(--bcb-titoli);font-size:.76rem;color:#6a6a6a;
}

/* ---------- Pulsanti: le pillole del sito ---------- */

/* Stessa forma delle pillole di DESIGN.md e dei pulsanti di
   condivisione: contorno 1,5px, fondo trasparente, raggio pieno, si
   riempiono al passaggio del mouse. "Leggi gratis" e' azzurro come le
   pillole; "Acquista" ha il contorno arancio, come la pillola "Inizia"
   dell'hero (.bcb-nota-metodo-start), cosi' le due destinazioni si
   distinguono senza introdurre una forma nuova. */
.bitcal-blog .bcb-bib-azioni{display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.bitcal-blog .bcb-bib-tasto{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 16px;border-radius:999px;white-space:nowrap;
  font-family:var(--bcb-titoli);font-weight:500;font-size:.76rem;line-height:1.4;
  color:var(--bcb-antracite);background:transparent;text-decoration:none;
  border:1.5px solid var(--bcb-azzurro);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.bitcal-blog a.bcb-bib-tasto-leggi:hover,
.bitcal-blog a.bcb-bib-tasto-leggi:focus-visible{
  background:var(--bcb-azzurro);color:var(--bcb-carta);text-decoration:none;
}
.bitcal-blog .bcb-bib-tasto-acquista{border-color:var(--bcb-arancio);}
.bitcal-blog a.bcb-bib-tasto-acquista:hover,
.bitcal-blog a.bcb-bib-tasto-acquista:focus-visible{
  background:var(--bcb-arancio);color:var(--bcb-antracite);text-decoration:none;
}
/* Senza link di acquisto la pillola resta un'indicazione: tratteggiata,
   senza riempimento al passaggio del mouse. */
.bitcal-blog .bcb-bib-tasto-statico{cursor:default;border-style:dashed;color:#6d675d;}

@media(max-width:1024px){
  .bitcal-blog .bcb-bib-opera{gap:14px;}
}
/* Su mobile: titolo e autore sopra, bandiere e pulsanti sotto. */
@media(max-width:767px){
  .bitcal-blog .bcb-bib-opera{grid-template-columns:37px minmax(0,1fr);gap:10px 12px;padding:14px 8px;}
  .bitcal-blog .bcb-bib-titolo-autore{grid-column:1 / -1;}
  .bitcal-blog .bcb-bib-lingue{grid-column:1;justify-content:flex-start;}
  .bitcal-blog .bcb-bib-azioni{grid-column:2;justify-content:flex-start;flex-wrap:wrap;}
  .bitcal-blog .bcb-bib-tasto{padding:9px 16px;}
  .bitcal-blog .bcb-bib-scaffale-titolo{font-size:1.1rem;padding:0 8px;}
}

/* ---------- Scheda dell'opera ---------- */

.bitcal-blog .bcb-bib-single-tipo{
  margin:16px 0 0;
  font-family:var(--bcb-titoli);font-weight:600;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bcb-arancio);
}
.bitcal-blog .bcb-bib-single-autore{
  margin:8px 0 0;
  font-family:var(--bcb-titoli);font-size:1rem;color:var(--bcb-grigio);opacity:.9;
}
.bitcal-blog .bcb-bib-sep{opacity:.5;}

/* Pulsanti dell'hero: le pillole dell'archivio. */
.bitcal-blog .bcb-bib-single-azione{
  margin:24px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;
}

/* ---------- Il corpo: scheda a sinistra, testo a destra ---------- */

/* Due colonne per tutta la pagina: a sinistra la copertina e la scheda,
   a destra di cosa parla e l'autore, allineati in alto con la copertina.
   Prima copertina e dati stavano sopra, larghi quanto la pagina, e il
   testo scendeva sotto in una colonna stretta centrata: le due parti non
   si allineavano. */
.bitcal-blog .bcb-bib-layout{
  display:grid;grid-template-columns:300px minmax(0,1fr);gap:64px;align-items:start;
}
.bitcal-blog .bcb-bib-scheda{display:flex;flex-direction:column;gap:24px;}
/* Il testo nella colonna di destra, a sinistra e non centrato: la sua
   misura di lettura resta quella degli articoli. */
.bitcal-blog.bitcal-single .bcb-bib-principale .bcb-single-content{margin:0;}
.bitcal-blog.bitcal-single .bcb-bib-content > :first-child{margin-top:0;}
.bitcal-blog .bcb-bib-principale .bcb-bib-trasparenza{max-width:var(--bcb-colonna);margin-top:40px;}
/* I dati stanno in un riquadro carta, come i blocchi della biblioteca. */
.bitcal-blog .bcb-bib-scheda-dati{
  padding:20px 22px 22px;background:var(--bcb-carta);border:1px solid #e4ded4;
}
.bitcal-blog .bcb-bib-scheda-titolo{
  margin:0 0 6px;
  font-family:var(--bcb-titoli);font-weight:600;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bcb-arancio);
}

/* Dati: una colonna di voci con un filetto fra l'una e l'altra, come una
   scheda di catalogo. L'etichetta sta sopra il valore. */
.bitcal-blog .bcb-bib-dati{margin:0;padding:0;}
.bitcal-blog .bcb-bib-dato{margin:0;padding:10px 0;border-bottom:1px solid #e4ded4;}
.bitcal-blog .bcb-bib-dato:last-child{border-bottom:0;}
.bitcal-blog .bcb-bib-dati dt{
  margin:0 0 3px;
  font-family:var(--bcb-titoli);font-weight:600;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:#6d6459;
}
.bitcal-blog .bcb-bib-dati dd{
  margin:0;font-size:.92rem;line-height:1.55;color:var(--bcb-antracite);
  overflow-wrap:break-word;
}
.bitcal-blog .bcb-bib-dati dd .bcb-bib-lingue{display:inline-flex;vertical-align:-2px;margin-right:4px;}
.bitcal-blog .bcb-bib-dati dd a{color:var(--bcb-antracite);text-decoration:underline;text-underline-offset:2px;}
.bitcal-blog .bcb-bib-dati dd a:hover{color:var(--bcb-azzurro);}

/* Copertina su fondo chiaro: un filetto la stacca dal crema. La copertina
   vera tiene le sue proporzioni (i paper sono A4, Why Bitcoin e' quasi
   quadrata): ritagliarle tutte a 2:3 taglierebbe i titoli. */
.bitcal-blog .bcb-bib-copertina{margin:0;width:100%;border:1px solid #e4ded4;background:var(--bcb-carta);}
.bitcal-blog .bcb-bib-copertina img{display:block;width:100%;height:auto;border-radius:0;}
/* Segnaposto: titolo e autore con la fascia arancio in alto. Non imita
   una copertina, la sostituisce finche' quella vera non viene caricata. */
.bitcal-blog .bcb-bib-copertina-vuota{
  aspect-ratio:2 / 3;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  padding:28px 24px;border-top:4px solid var(--bcb-arancio);
}
.bitcal-blog .bcb-bib-copertina-titolo{
  font-family:var(--bcb-titoli);font-weight:600;font-size:1.15rem;line-height:1.3;
  color:var(--bcb-antracite);overflow-wrap:break-word;
}
.bitcal-blog .bcb-bib-copertina-autore{font-family:var(--bcb-titoli);font-size:.8rem;color:#6d6459;}

/* ---------- L'autore ---------- */

/* Dopo "Di cosa parla", nella stessa colonna: un filetto e il titolo
   come gli altri h2 del contenuto. */
.bitcal-blog .bcb-bib-autori{margin-top:48px;padding-top:8px;border-top:1px solid #e4ded4;}
.bitcal-blog .bcb-bib-autore + .bcb-bib-autore{margin-top:24px;}

/* Trasparenza sulle affiliazioni: deve essere leggibile, non nascosta in
   un grigio tenue. Contrasto verificato (#5a5349 su #FBF8F3, 6,4:1). */
.bitcal-blog .bcb-bib-trasparenza{
  margin:16px 0 0;padding:12px 16px;
  border-left:3px solid var(--bcb-arancio);
  background:rgba(237,139,43,.06);
  font-size:.84rem;line-height:1.6;color:#5a5349;
}
.bitcal-blog .bcb-bib-archivio .bcb-bib-trasparenza{margin-top:40px;}

.bitcal-blog .bcb-bib-torna{margin:40px 0 0;}


/* Nell'hero i nomi dei negozi possono essere lunghi: su mobile la pillola
   va a capo invece di uscire dallo schermo. */
@media(max-width:767px){
  .bitcal-blog .bcb-bib-single-azione{align-items:flex-start;}
  .bitcal-blog .bcb-single-hero .bcb-bib-tasto{white-space:normal;text-align:left;border-radius:18px;}
}


/* Pillole sul fondo scuro dell'hero: testo crema, stesso contorno; al
   passaggio del mouse si riempiono come nell'archivio. */
.bitcal-blog .bcb-single-hero .bcb-bib-tasto{color:var(--bcb-grigio);}
.bitcal-blog .bcb-single-hero a.bcb-bib-tasto-leggi:hover,
.bitcal-blog .bcb-single-hero a.bcb-bib-tasto-leggi:focus-visible{color:var(--bcb-carta);}
.bitcal-blog .bcb-single-hero .bcb-bib-tasto-statico{color:var(--bcb-grigio);opacity:.75;white-space:normal;text-align:left;}

/* L'hero della scheda non ha piu' la colonna della copertina. */
.bitcal-blog.bcb-biblioteca .bcb-single-hero-inner{grid-template-columns:minmax(0,1fr);}

/* Sotto i 900 px una colonna sola: copertina e scheda affiancate, poi il
   testo a tutta larghezza. */
@media(max-width:900px){
  .bitcal-blog .bcb-bib-layout{grid-template-columns:1fr;gap:48px;}
  .bitcal-blog .bcb-bib-scheda{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:28px;align-items:start;}
}
@media(max-width:640px){
  .bitcal-blog .bcb-bib-scheda{grid-template-columns:1fr;}
  .bitcal-blog .bcb-bib-scheda-copertina{max-width:240px;}
  .bitcal-blog .bcb-bib-scheda-dati{padding:18px 18px 20px;}
}