/**
* CSS related to the entries after a search or from the database in general
*
*/

#list_entries {
  margin:  5px;
  padding: 5px;
}

.entry {
  display: grid;
  grid-template-areas: 
    "title      abstract"
    "authors    abstract"
    "type       abstract"
    "collection abstract"
    "citation   abstract";
  grid-template-columns: 2fr 3fr;

  padding: 20px;
}

.entry a {
  color: inherit; /* Takes parent's color instead of blue */
  text-decoration: none; /* Removes underline */
}

.entry .entry_title {
  grid-area: title;

  margin:  0;
  border-bottom: 2px dashed var(--color_border);
  padding: 0px 0px 0px 0px;

  font-size: 1.2rem;

  /* This looks horrible, DO NOT USE
  text-decoration:        underline;
  text-decoration-style:  dashed;
  */

  white-space: pre-wrap;
  height: fit-content;
}

.entry .entry_type {
  grid-area: type;

  width: fit-content;
  justify-self: right;

  border-radius: 0.4rem 0.4rem 0 0;
  background-color: var(--color_bg_spacer);

  padding: 0.2rem 1rem 0;
}

.entry .entry_type h3 {
  font-size: 0.8rem;
}

.entry .entry_collection {
  grid-area: collection;

  height: fit-content;

  font-size: 0.8rem;

  border-radius: 0.4rem 0 0.4rem 0.4rem;
  background-color: var(--color_bg_spacer);

  display: grid;
  grid-template-areas:
    "title location"
    "title year";

  padding: 0.6rem;
  grid-template-rows: min-content min-content;
}

.entry .entry_collection .entry_collection_title {
  grid-area: title;

  margin:  0;
  padding: 0px 0px 0px 0px;

  font-size: 0.8rem;
  justify-self: center;
  align-self:   center;

  white-space: pre-wrap;
  height: fit-content;
}

.entry .entry_collection .entry_collection_address {
  grid-area: location;

  margin: 0 0.4rem;
  align-self: start;
}

.entry .entry_collection .entry_collection_year {
  grid-area: year;

  margin: 0 0.4rem;
  align-self: start;
}

.entry .entry_page {
  grid-area: page_label;

  margin: 10px auto 5px 0px;
  padding: 0px 0px 0px 0px;
}

.entry .entry_authors {
  grid-area: authors;

  margin:   5px 5px 10px 25px;
  padding:  0;
}

.entry .entry_authors h3 {
  font-size: 1rem;
  font-weight: normal;
}

.entry .entry_authors li {
  margin:  0px;
  padding: 5px;
}

.entry .entry_abstract {
  grid-area: abstract;

  display: grid;
  grid-template-areas:
    "heading  interactions"
    "abstract abstract";
  grid-template-rows: min-content auto;

  gap: 0.4rem;

  padding: 5px;
  border:  2px;
  border-color: black;
  margin:  10px;
}

.entry h3{
  grid-area: heading;

  align-self: end;
  font-size: 1.2rem;
  font-style: italic;

  margin: 0;
}

.entry .entry_abstract p{
  grid-area: abstract;

  margin: 0;
}

.entry .entry_abstract .entry_interactions {
  grid-area: interactions;

  align-self: end;

  display: flex;
  flex-direction: row-reverse;
  gap: 0.2rem;

  list-style-type: none;
  line-height: 0; /* removes the little gap when wrapping an image */
}

.entry .entry_abstract .entry_interactions li {
  border: 2px solid var(--color_border);
}

.entry .entry_abstract .entry_interactions img {
  height: 2rem;
  width: auto;

  aspect-ratio: 1/1;
}

#search_query_info {
  display: flex;
  flex-wrap: wrap; /* Items will wrap is overflowing the width, but the items need to handle how much width they take up */
}


#search_query_info .search_item {
  flex: 0 0 33%;
  padding: 0.3rem;
  align-self: baseline;
  box-sizing: border-box;
}