/*
 * Graxynet OJS 3.5.0.5 Theme vs 51
 * Stable, row-aligned responsive article cards.
 *
 * Desktop/laptop: 3 cards per row
 * Tablet:        2 cards per row
 * Mobile:        1 card per row
 *
 * The important part in this revision is not only the number of columns.
 * Each grid item is stretched by CSS Grid and each article card is then
 * stretched by flexbox. This prevents short cards from starting the next
 * article underneath them while neighbouring cards in the same row are taller.
 */

/* All supported article lists use one predictable grid model. */
html body .pkp_structure_content .pkp_structure_main .cmp_article_list.articles,
html body .pkp_structure_content .pkp_structure_main ul.cmp_article_list.articles,
html body .pkp_structure_content .pkp_structure_main .rans-force-article-grid,
html body .pkp_structure_content .pkp_structure_main .rans-v2130-article-grid,
html body .pkp_structure_content .pkp_structure_main .rans-v2151-article-grid,
html body .pkp_structure_content .pkp_structure_main .page_search .search_results,
html body .pkp_structure_content .pkp_structure_main .page_article #articlesBySimilarityList > ul,
html body .pkp_structure_content .pkp_structure_main .page_article .jnsps-same-author-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  align-items: stretch !important;
  align-content: start !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
}

/*
 * Do not use height:100% on the grid item itself. That can create a cyclic
 * percentage-height calculation and visually mimic a masonry layout. Let the
 * grid stretch the <li>, then let flexbox stretch the card inside it.
 */
html body .pkp_structure_content .pkp_structure_main .cmp_article_list.articles > li,
html body .pkp_structure_content .pkp_structure_main .rans-force-article-grid > li,
html body .pkp_structure_content .pkp_structure_main .rans-v2130-article-grid > li,
html body .pkp_structure_content .pkp_structure_main .rans-v2151-article-grid > li,
html body .pkp_structure_content .pkp_structure_main .page_search .search_results > li,
html body .pkp_structure_content .pkp_structure_main .page_article #articlesBySimilarityList > ul > li,
html body .pkp_structure_content .pkp_structure_main .page_article .jnsps-same-author-list > li {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  box-sizing: border-box !important;
}

/* Stretch the visible article card to the full height of its grid cell. */
html body .pkp_structure_content .pkp_structure_main .cmp_article_list.articles > li > .obj_article_summary,
html body .pkp_structure_content .pkp_structure_main .rans-force-article-grid > li > .obj_article_summary,
html body .pkp_structure_content .pkp_structure_main .rans-v2130-article-grid > li > .obj_article_summary,
html body .pkp_structure_content .pkp_structure_main .rans-v2151-article-grid > li > .obj_article_summary,
html body .pkp_structure_content .pkp_structure_main .page_search .search_results > li > .obj_article_summary,
html body .pkp_structure_content .pkp_structure_main .page_article #articlesBySimilarityList > ul > li > .obj_article_summary,
html body .pkp_structure_content .pkp_structure_main .page_article .jnsps-same-author-list > li > .obj_article_summary {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Keep card text/content from forcing a column wider than its grid track. */
html body .pkp_structure_content .pkp_structure_main .obj_article_summary,
html body .pkp_structure_content .pkp_structure_main .obj_article_summary .summary-content,
html body .pkp_structure_content .pkp_structure_main .obj_article_summary .title,
html body .pkp_structure_content .pkp_structure_main .obj_article_summary .title a,
html body .pkp_structure_content .pkp_structure_main .obj_article_summary .authors,
html body .pkp_structure_content .pkp_structure_main .obj_article_summary .rans-card-abstract {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  box-sizing: border-box !important;
}

/* Tablet: two cards per row. */
@media (min-width: 768px) and (max-width: 991px) {
  html body .pkp_structure_content .pkp_structure_main .cmp_article_list.articles,
  html body .pkp_structure_content .pkp_structure_main ul.cmp_article_list.articles,
  html body .pkp_structure_content .pkp_structure_main .rans-force-article-grid,
  html body .pkp_structure_content .pkp_structure_main .rans-v2130-article-grid,
  html body .pkp_structure_content .pkp_structure_main .rans-v2151-article-grid,
  html body .pkp_structure_content .pkp_structure_main .page_search .search_results,
  html body .pkp_structure_content .pkp_structure_main .page_article #articlesBySimilarityList > ul,
  html body .pkp_structure_content .pkp_structure_main .page_article .jnsps-same-author-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* Mobile: one card per row. */
@media (max-width: 767px) {
  html body .pkp_structure_content .pkp_structure_main .cmp_article_list.articles,
  html body .pkp_structure_content .pkp_structure_main ul.cmp_article_list.articles,
  html body .pkp_structure_content .pkp_structure_main .rans-force-article-grid,
  html body .pkp_structure_content .pkp_structure_main .rans-v2130-article-grid,
  html body .pkp_structure_content .pkp_structure_main .rans-v2151-article-grid,
  html body .pkp_structure_content .pkp_structure_main .page_search .search_results,
  html body .pkp_structure_content .pkp_structure_main .page_article #articlesBySimilarityList > ul,
  html body .pkp_structure_content .pkp_structure_main .page_article .jnsps-same-author-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
}