/* =====================================================
   services/journal-list.php 固有スタイル
   ===================================================== */

.backnumber-table-wrap{
  width:100%;
  overflow-x:auto;
  margin-top:18px;
  border:1px solid var(--line-deep);
  background:#fff;
}

.backnumber-table{
  width:100%;
  min-width:900px;
  table-layout:fixed;
  border-collapse:collapse;
  background:#fff;
}

.backnumber-table th,
.backnumber-table td{
  padding:12px 16px;
  font-size:15px;
  color:var(--text-mid);
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line-deep);
  border-left:1px solid var(--line-deep);
  border-right:1px solid var(--line-deep);
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* .backnumber-table-wrap 側に外枠の罫線が既にあるため、
   両端(1列目の左端・最終列の右端)は二重線にならないよう省く */
.backnumber-table th:first-child,
.backnumber-table td:first-child{
  border-left:none;
}

.backnumber-table th:last-child,
.backnumber-table td:last-child{
  border-right:none;
}

.backnumber-table thead th{
  background:#edf5d8;
  font-weight:700;
  color:var(--heading);
  text-align:center;
  white-space:nowrap;
  vertical-align:middle;
}

.backnumber-table tbody tr:last-child td{
  border-bottom:none;
}

.backnumber-table tbody tr:hover td{
  background:var(--bg-soft);
}

.backnumber-th-year,
.backnumber-td-year{
  width:90px;
  white-space:nowrap;
}

.backnumber-th-title,
.backnumber-td-title{
  width:220px;
}

.backnumber-th-section{
  width:140px;
}

.backnumber-th-view,
.backnumber-td-view{
  width:110px;
  text-align:center;
  white-space:nowrap;
  vertical-align:middle;
}

/* 項目名・内容 のペアをCSS Gridで組んでいるので、
   同じ号内では「項目名」列と「内容」列がずれずに揃う。
   1列目の幅は、見出しの「項目」列(border-box幅140px)から
   このセル自身の左border(1px)と左padding(16px)を差し引いた値にし、
   見出しの実際の列境界(罫線)の位置とぴったり揃うようにしている */
.backnumber-items-grid{
  display:grid;
  grid-template-columns:calc(140px - 1px - 16px) 1fr;
  column-gap:0;
  row-gap:8px;
}

.backnumber-item-section{
  font-size:14px;
  font-weight:700;
  color:var(--heading);
  word-break:break-word;
  overflow-wrap:anywhere;
}

.backnumber-item-content{
  font-size:14px;
  color:var(--text-mid);
  line-height:1.7;
  border-left:1px solid var(--line-deep);
  padding-left:12px;
}

.backnumber-view-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--accent-deep);
  font-size:14px;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

.backnumber-view-link:hover{
  color:var(--accent-dark);
}

.backnumber-view-link .external-link-icon{
  width:14px;
  height:14px;
  color:currentColor;
}

.backnumber-view-disabled{
  color:var(--button-disabled-text);
  font-size:14px;
}

@media (max-width:768px){
  .backnumber-table th,
  .backnumber-table td{
    padding:10px 12px;
    font-size:14px;
  }

  .backnumber-item-section,
  .backnumber-item-content{
    font-size:13px;
  }

  .backnumber-items-grid{
    /* この幅でのtd/thの左右paddingは12pxになるため、その分を差し引く */
    grid-template-columns:calc(140px - 1px - 12px) 1fr;
    column-gap:0;
  }
}

@media (max-width:480px){
  .backnumber-table th,
  .backnumber-table td{
    padding:8px 10px;
    font-size:13px;
  }

  .backnumber-items-grid{
    /* この幅でのtd/thの左右paddingは10pxになるため、その分を差し引く */
    grid-template-columns:calc(140px - 1px - 10px) 1fr;
  }
}

/* スマートフォンでは表をやめ、1号ずつのカードにする（幅 900px の表を横スクロールさせると内容が読めないため）。
   1行目に発行年とタイトル、その下に項目・内容を並べる */
@media (max-width:768px){
  .backnumber-table-wrap{
    overflow-x:visible;
  }

  .backnumber-table{
    min-width:0;
  }

  .backnumber-table thead{
    display:none;
  }

  .backnumber-table,
  .backnumber-table tbody,
  .backnumber-table td{
    display:block;
    width:auto;
  }

  .backnumber-table tbody tr{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    border-bottom:1px solid var(--line-deep);
  }

  .backnumber-table tbody tr:last-child{
    border-bottom:none;
  }

  .backnumber-table td{
    border:none;
  }

  .backnumber-td-year{
    padding-right:0;
    font-weight:700;
    color:var(--heading);
  }

  .backnumber-td-title{
    font-weight:700;
    color:var(--heading);
  }

  .backnumber-td-items{
    grid-column:1 / -1;
    padding-top:0;
  }

  /* 項目名が空の号が多いため、項目名の列は作らず内容の上に出す */
  .backnumber-items-grid{
    display:block;
  }

  .backnumber-item-section:not(:empty){
    margin-top:8px;
  }

  .backnumber-item-content{
    border-left:none;
    padding-left:0;
  }
}