/* Related Link component styles
   - 右側の青い縦ラインに矢印画像を配置する設計
*/
:root{
  --related-radius: 12px;
}

.related-links{ display:flex; flex-wrap:wrap; gap:28px; justify-content:center; align-items:stretch; }

.related-link{ display:flex; flex-direction:column; color:inherit; text-decoration:none; box-sizing:border-box; }

.related-link__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  background:#fff;
  border:1px solid var(--accent-50);
  border-radius:var(--related-radius);
  padding:34px 28px;
  position:relative;
  overflow:visible;
  flex:1;
  min-height:235px;
}
a .related-link__inner{
  border:1px solid var(--brand-cyan);
  &:hover{
      background: #f0f9ff;
      box-shadow: 0 8px 24px rgba(0,144,204,0.12);
      transform: translateY(-2px);
      outline: none;
      color: var(--brand-cyan);
      transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
    }
}

.related-link__avatar{ 
  width:100px; height:100px;
  display: flex;
  align-items: center;
  justify-content: center;
  display: grid;
  grid-auto-flow: column;
  margin: 0 0 0 auto;
}
a .related-link__avatar{ 
  width:50px; height:50px;
  margin: auto;
  &.wide-icon {
    width: 60px; 
    height: 50px;
  }
  &.superwide-icon {
    width: 90px; 
    height: 50px;
  }
}
.related-link__content{ flex:1 1 auto; display:flex; flex-direction:column; width: 100%; 

.related-tag-pill {
      background: var(--accent-10);
      font-size: 12px;
      font-weight: 400;
      padding: 2px 6px;
      border-radius: 8px;
      white-space: nowrap;
      margin-left: 6px;
      margin-right: 6px;
    }
}
.related-link__title{ margin:0 0 12px; font-weight:700; font-size:18px; }
.related-link__desc{ 
  margin:0; 
  line-height:1.6; 
  gap:8px;
  display: grid;
  grid-auto-flow: column;
 }
a .related-link__desc{ flex-direction:column; display:flex; 
  flex-direction:row; }

.related-link__strip{ 
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 20px;
    background: var(--brand-cyan);
    border-radius: 0 10px 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.related-link__strip img{ width:10px; height:10px; filter:brightness(0) invert(1); }

.related-link--col-3{ flex: 0 1 calc(33.333% - 20px); }
.related-link--col-2{ flex: 0 1 calc(50% - 150px); }
.related-link--col-4{ flex: 0 1 calc(100% / 4 - 21px); }
.related-link--col-5{ flex: 0 1 calc(100% / 5 - 23px); }

@media (max-width:768px){
  .related-link--col-3, .related-link--col-2, .related-link--col-4, .related-link--col-5 {
    flex: auto; 
  }
  .related-link{
    width: 100%;
  }
  .related-link__inner{
    padding:20px;
    min-height: auto;
  }
  /* .related-link__strip{ right:8px; } */
}