/* 
 * some styling for lists and list items using grid
 * added March 2023 
 */
:root {
    --list-image-width: calc( var(--image-width) * 5 / 8 );
    --list-image-height: calc( var(--image-height) * 5 / 8 );
    --felblauw:#0099ff;
    --roodbruin:#7c2529;
    --list-series-blauw:#003399;
}
@media screen {
  h1 {
    background-color: rgba( 255, 255, 255, 0.9 );
    position:sticky;
    top:99px;
  }
  }
.headline-paragraph {
  margin-bottom:1em;
}
/*  subject list */
.list.subjects .item {
  line-height:1.8em;  
}
.list a.subject:link,
.list a.subject:visited {
  color: var(--jb-blauw);
  font-weight:bold;
} 
/*  other lists */
.list-item {
    padding-bottom: 1.75em;
    display: grid;
    grid-template-areas: 
      "image text text new"
      "code misc misc .";
    grid-template-columns: var(--list-image-width) auto 1fr auto;
    grid-template-rows: 1fr 1.5em;
    grid-column-gap:1em;
    grid-row-gap:1.2em;
    font-size:1.1em;
}
.list-item + .list-item {
  margin-top:1.5em;
}
.list-container {
  padding-top:2em;
  --list-image-width:113px;
  --list-image-height:150px;
}
.list-container .list-item {
    grid-row-gap:.5em;
    grid-template-rows: auto 1fr;
    grid-template-areas: 
      "image text text new"
      "image misc misc misc";
}
.list-container .list-item + .list-item {
  margin-top:0;
}
.list-item .image-container {
  grid-area:image;
}
.list-item .new-container {
  grid-area:new;
}
.list-item .code-container {
  grid-area:code; 
  margin-left:.3em;
}
.list-item .issn {
  grid-area:misc; 
}
.list-item .code
, .not-web {
  background-color:#e0e0e0;
  font-weight:bold;
  color:#666;
  display:inline-block;
  margin:-.15em -.4em;
  padding:.15em .4em;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.9em;
}
.not-web {
  color:white;
  background-color:red;
}
.code + .not-web {
    margin-left: 1.5em;
}
.not-web + .subjects {
  margin-left:1em;
}
.list-item .text {
  grid-area:text;
}
.list-item .details {
  grid-area:misc;
}
.list-item h2 {
  color: var(--oranje);
  padding-top:0;
  font-size:1.4em;
}
.list-item h3.subtitle {
  color: var(--jb-blauw);
  padding-top:0;
  font-size:1.2em;
}
.list-item h3.special-issue-title {
  color: var(--olijfgroen);
}
.list-item h3.author {
  padding-top:.5em;
  color: #444;
}
.list-item h3.title {
  padding-top:0;
  line-height:1.5em;
}
.list-item .short-blurb {
  font-size:1.05em;
  line-height:1.65em;
  margin-top:1em;
}
.list-item .image {
  margin: -1em 0 -2em;
  width: var(--list-image-width);
  height: var(--list-image-height);
}
.list-container .list-item .image {
  margin:0;
}
.list-item.article .authors {
  color: var(--roodbruin);
  font-weight:bold;
}
.list-item .insource {
  display:inline-block;
}
.list-item .insource a {
  color: var(--jb-blauw); 
  font-weight:bold;
}
a.series-link:link,
a.series-link:visited 
{
  color:var(--list-series-blauw);
  font-weight:bold;
}
.list-item .subjects {
  font-style:italic;
  font-size:.925em;
}
.list-item .subjects .label {
  font-style: normal;
  font-weight:bold;
  color: #666;
}
/*  overrides for book series */
.series-list.series .list-item .image
, .list.titles .list-item .image {
  margin: 0 0 -1.5em;
}
@media screen and (max-width: 650px) {
  .list-container {
  --list-image-width:75px;
  --list-image-height:100px;

  }
}
@media screen and (min-width: 1150px), @media print {
.list-item {
    grid-template-areas: 
      "image text text new"
      "image code misc .";
  }
  .list-item image {
    margin: 0 0 -1.4em; 
  }
}