/* Griglia container responsive */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); /* larghezza minima 12rem, cresce fino a 1fr */
  gap: 1.5rem; /* spazio tra i libri */
  justify-items: center;
  padding: 1rem;
  max-width: 90vw; /* massimo 90% della viewport */
  margin: 0 auto;
}
.grid a {
  display: block; /* così occupa tutta la cella della griglia */
  width: 100%;
  text-decoration: none; /* opzionale */
  color: inherit; /* opzionale */
}

.grid-item {
  width: 100%; /* obbliga il container a 100% della cella */
  display: flex;
  flex-direction: column;
  align-items: center;
  border:none;
}

.nooutline{  outline: none !important;    box-shadow: none;
/* rimuove outline su <a> e tutti i suoi figli */
  border: none !important;    /* rimuove eventuali bordi aggiunti */}
.nooutline:focus{  outline: none !important;   box-shadow: none;
 /* rimuove outline su <a> e tutti i suoi figli */
  border: none !important;    /* rimuove eventuali bordi aggiunti */
}
.nooutline:active{  outline: none !important;   box-shadow: none;
 /* rimuove outline su <a> e tutti i suoi figli */
  border: none !important;    /* rimuove eventuali bordi aggiunti */
}

.grid a,
.grid a * {
  outline: none !important;  /* rimuove outline su <a> e tutti i suoi figli */
  border: none !important;    /* rimuove eventuali bordi aggiunti */
}
/* Rimuove il focus ring dai link nella griglia */
.grid a {
  outline: none;
  -webkit-tap-highlight-color: transparent; /* Android/iOS */
}

/* Evita che gli elementi interni ricevano focus */
.grid a * {
  outline: none;
}
.grid a,
.grid a * {
  outline: none !important;
  border: none !important;
}


/* Limita a massimo 5 libri per riga su desktop */
@media (min-width: 80rem) { /* ~1280px */
  .grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Container libro proporzionato usando aspect-ratio */
.container_biblyic {
  width: 100%; 
  aspect-ratio: 16/24; /* rapporto 2:3 (larghezza:altezza) */
  max-width: 15rem; /* optional per non crescere troppo */
}

/* Dettagli libro */
.book-details {
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.book-details h3 {
  font-size: 1rem;
  margin: 0;
}

.book-details p {
  font-size: 0.875rem;
  margin: 0.25rem 0 0 0;
}


.book {
  height: 100%;
  width: 100%;
  position: relative;
  border-radius: 5px 15px 15px 5px;
  border:none;
  transform-origin: left center 0px;
  perspective: 800px;
  transition: 0.2s ease-in-out;
}

.book:hover {
  transform: none; /* niente rotazione/zoom dell'intero libro */
}

.book__cover {
  height: 100%;
  width: 100%;
  position: absolute;
  border-radius: 5px 15px 15px 5px;

  box-shadow: 
  rgba(0, 0, 0, 0.06) 0px 1px 1px,
  rgba(0, 0, 0, 0.06) 0px 2px 2px,
  rgba(0, 0, 0, 0.05) 0px 3px 3px,
  rgba(0, 0, 0, 0.04) 0px 5px 5px;

  z-index: 10;
  transition: 0.25s ease-in-out;
  transform-style: preserve-3d;
  transform-origin: left center 0px;
  overflow: hidden;
}

.book:hover .book__cover {
  transform: rotateY(-15deg); /* apertura più delicata */
  z-index: 999;
  box-shadow: 12px 6px 25px rgba(0, 0, 0, 0.2);
}

.book__cover img {
  border-radius: 3px;
  border:none;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Effetto extra copertina */
.book__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  border:none;
  pointer-events: none;
  filter: contrast(310%) brightness(100%);
  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.118) 0.65%,
    rgba(255, 255, 255, 0.2) 1.53%,
    rgba(255, 255, 255, 0.1) 2.38%,
    rgba(0, 0, 0, 0.05) 3.26%,
    rgba(255, 255, 255, 0.14) 5.68%,
    rgba(244, 244, 244, 0) 6.96%
  );
}

/* Pagine ruled */
.book__page {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: #fbfae8;
  z-index: 0;
  border-radius: 5px 16px 16px 5px;
  box-shadow: 0 0 5px 1.5px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border:none;
}

.book__page.ruled {
  background: linear-gradient(to bottom, #fbfae8 9px, #e4e4e4 1px);
  background-size: 100% 10px;
}