/* Clickable box laid over the top of a book's cover image.  Which books get
   one is configured by orjhlabBookImageLinks in app/config/site.php.

   The cover is an .img-responsive, so its rendered size varies; the box is
   placed in percent of the cover and keeps its spot on the picture at any
   size. */

.orjhlab-book-cover
{ position:  relative;
  display:   block;
  width:     fit-content;   /* shrink to the cover, and stay centred without */
  margin:    0 auto;        /* depending on the .text-center around it */
  max-width: 100%;
}

.orjhlab-book-cover-link,
.content .orjhlab-book-cover-link
{ position:         absolute;
  top:              7%;
  left:             50%;
  transform:        translateX( -50%);
  padding:          .35em .9em;
  border:           2px solid #30408d;
  border-radius:    6px;
  background-color: #fff;
  box-shadow:       0 2px 5px rgba( 0, 0, 0, .3);
  color:            #30408d;
  font-size:        clamp( .7rem, 3.2vw, 1.05rem);
  font-weight:      700;
  line-height:      1.2;
  text-decoration:  none;
  white-space:      nowrap;
}

.orjhlab-book-cover-link:hover,
.orjhlab-book-cover-link:focus,
.content .orjhlab-book-cover-link:hover,
.content .orjhlab-book-cover-link:focus
{ background-color: #30408d;
  color:            #fff;
  text-decoration:  none;
}