/*
 * links.html 用の補助CSS
 * 背景・文字色・フォント・画像サイズは ../menu.css で管理します。
 * body、見出し、img 全般、#heroImg の指定はここには置きません。
 * links.css → menu.css の現在の読み込み順のまま使用できます。
 */

/* 通常の div 内でもリンクを横に並べ、自然に折り返します。 */
a.link-card {
  display: inline-block;
  vertical-align: middle;
  margin: 6px 7px;
}

/* 元の .links コンテナを使用する場合の配置。 */
.links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 15px;
}

.links > .link-card {
  margin: 0;
}

/*
 * 外部サイトへ移動する文字だけに下線を付けます。
 * a 自体ではなく文字の span に指定するため、menu.css の
 * a { text-decoration: none; } と共存します。
 * バナー画像や、ページ上部のアイコンには適用しません。
 */
a.link-card[href^="https://"] > .link-title,
a.link-card[href^="http://"] > .link-title,
a.link-card[href^="https://"] > .link-url,
a.link-card[href^="http://"] > .link-url {
  text-decoration-line: underline;
  text-underline-offset: 0.15em;
}

/* 公開用は、バナーまたはサイト名のみを表示。データは残します。 */
.link-card > .link-description,
.link-card > .link-category,
.link-card > .link-url,
.link-card.has-banner > .link-title {
  display: none;
}

/* 研究用アーカイブでも同じCSSを使用できます。 */
.link-section {
  margin-block: 24px;
}

.archive .link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-block: 12px;
}

.archive .link-card > .link-title,
.archive .link-card > .link-description,
.archive .link-card > .link-category,
.archive .link-card > .link-url {
  display: block;
}

.archive .link-card > .link-url {
  overflow-wrap: anywhere;
}

img.link-banner {
  width: auto;
  height: auto;
  max-width: 88px;
  max-height: 31px;
  object-fit: contain;
  vertical-align: middle;
}