/* =========================
   Contact sheet button
   ========================= */

body .contact-sheet-button {
  display: block !important;
  width: fit-content !important;
  margin: 1.5rem auto !important;
  padding: 0.6rem 1rem !important;

  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: inherit !important;

  font-size: 0.95rem !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
}

body .contact-sheet-button:hover {
  opacity: 0.75 !important;
}


/* =========================
   Generated contact sheet
   ========================= */

body .contact-sheet {
  width: min(96vw, 1800px) !important;
  max-width: none !important;
  margin: 1.5rem auto !important;
  padding: 0 !important;

  display: grid !important;

  /*
   * 固定列数ではなく，画面幅に応じて自動調整。
   * 少ない枚数のときも左に寄りにくいように，
   * auto-fit + 固定タイル幅 + justify-content:center にする。
   */
  grid-template-columns: repeat(auto-fit, minmax(150px, 150px)) !important;
  justify-content: center !important;

  /*
   * 0pxだと詰まりすぎるので，contact sheetらしく少しだけ間隔を空ける。
   * もっと詰めたいなら 2px，ゆったりなら 4〜6px。
   */
  gap: 3px !important;
}

/* hidden属性が付いているときは確実に非表示 */
body .contact-sheet[hidden] {
  display: none !important;
}


/* =========================
   Contact sheet item
   ========================= */

body .contact-sheet figure,
body .contact-sheet .contact-sheet-item {
  margin: 0 !important;
  padding: 0 !important;

  border: none !important;
  background: transparent !important;
  box-sizing: border-box !important;

  aspect-ratio: 1 / 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;

  width: auto !important;
  max-width: none !important;
}


/* =========================
   Clickable image link
   ========================= */

body .contact-sheet a,
body .contact-sheet .contact-sheet-link {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-decoration: none !important;
  color: inherit !important;
}


/* =========================
   Thumbnail image
   ========================= */

/*
 * 縦横比を保って表示。
 * object-fit: contain なので，画像は切り抜かれない。
 * 正方形セル内に余白が出るが，順番とアスペクト比を優先する。
 */
body .contact-sheet img {
  max-width: 100% !important;
  max-height: 100% !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;
  display: block !important;
}


/* =========================
   Responsive adjustment
   ========================= */

/* タブレット以下では少し小さめ */
@media (max-width: 900px) {
  body .contact-sheet {
    width: min(96vw, 1000px) !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 130px)) !important;
    gap: 3px !important;
  }
}

/* スマホではさらに小さめ */
@media (max-width: 600px) {
  body .contact-sheet {
    width: 96vw !important;
    grid-template-columns: repeat(auto-fit, minmax(100px, 100px)) !important;
    gap: 3px !important;
  }
}