/* ================================
   OJS Sidebar Indexing Logos Style
   Paste in: Appearance > Advanced > Custom CSS
   Works with your existing: .index-item structure
================================== */

/* 1) Target ONLY sidebar blocks so it won't affect site-wide images */
#sidebar .index-item,
.pkp_structure_sidebar .index-item{
  margin: 0 !important;
}

/* 2) Make the parent container behave like a grid
   - OJS custom blocks are inside .pkp_block
   - If your logos are inside one block, this will align them cleanly
*/
#sidebar .pkp_block .pkp_block_content,
.pkp_structure_sidebar .pkp_block .pkp_block_content{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 logos per row */
  gap: 10px;
  align-items: center;
}

/* 3) Each logo tile look */
#sidebar .index-item,
.pkp_structure_sidebar .index-item{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* 4) Hover effect (professional) */
#sidebar .index-item:hover,
.pkp_structure_sidebar .index-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* 5) Link becomes centered container */
#sidebar .index-item a,
.pkp_structure_sidebar .index-item a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
}

/* 6) Force ALL logos to same size (no stretch) */
#sidebar .index-item img,
.pkp_structure_sidebar .index-item img{
  width: 100%;
  height: 38px;          /* ✅ change this: 32/36/40 */
  object-fit: contain;   /* ✅ keeps aspect ratio */
  display: block;
}

/* 7) Remove weird spacing from <p>&nbsp;</p> after your code */
#sidebar .pkp_block_content p,
.pkp_structure_sidebar .pkp_block_content p{
  margin: 0 !important;
  padding: 0 !important;
}

/* 8) Mobile: make it 1 logo per row */
@media (max-width: 480px){
  #sidebar .pkp_block .pkp_block_content,
  .pkp_structure_sidebar .pkp_block .pkp_block_content{
    grid-template-columns: 1fr;
  }

  #sidebar .index-item img,
  .pkp_structure_sidebar .index-item img{
    height: 40px;
  }
}