/* ===============================================================
   Associates Page Styles (BEM only, no Bootstrap utilities)
   File: assets/css/associates.css
   Blocks:
     - .subhero.subhero--associates
     - .section
     - .associates
   Depends on:
     - base.css / header.css
   ============================================================ */

/* -----------------------------
   Subhero (variant: associates)
   ----------------------------- */
/* 必要なら背景などをここでデフォルト指定可
.subhero.subhero--associates {
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
              url("../img/associates-hero.webp") center/cover no-repeat;
}
*/

/* ================================
   Associates (BEM)
   ================================ */
.associates {
  /* 基本（デスクトップ基準） */
  --assoc-gap: 2rem;
  --assoc-logo-min-w: 180px;
  --assoc-logo-max-w: 360px; /* ← 大きめ基準 */
  --assoc-logo-max-h: 350px;
  --assoc-focus: #0d6efd;
  --assoc-note-color: #6c757d;
}

/* 見出しとの距離（section__headerを使う前提） */
.associates .section__header {
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* ---- List Grid（デスクトップ基準 → 画面が狭くなるほど調整） ---- */
.associates__list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  ); /* base: 広い画面 */
  gap: var(--assoc-gap, 2rem);
}

/* ≤ 1200px: タイル最小幅を少し縮める */
@media (max-width: 1200px) {
  .associates__list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* ≤ 768px: さらに縮める（モバイル寄り） */
@media (max-width: 768px) {
  .associates__list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* ---- Logo サイズ（デスクトップ基準 → 狭い画面で上書き） ---- */
/* ≤ 992px: ロゴの上限を抑える（高さも抑制） */
@media (max-width: 992px) {
  .associates {
    --assoc-logo-max-w: 320px;
    --assoc-logo-max-h: 160px;
  }
}

/* ---- Logo 要素 ---- */
.associates__item {
  display: grid;
  place-items: center;
  text-align: center;
}

.associates__link {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  outline: none;
}
.associates__link:focus-visible {
  outline: 2px solid var(--assoc-focus);
  outline-offset: 4px;
  border-radius: 6px;
}

.associates__logo {
  display: block;
  width: min(100%, var(--assoc-logo-max-w));
  min-width: var(--assoc-logo-min-w);
  max-height: var(--assoc-logo-max-h);
  height: auto;
  object-fit: contain;
  transition: transform 0.2s ease, filter 0.2s ease;
  will-change: transform;
}
.associates__link:hover .associates__logo {
  transform: translateY(-2px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .associates__logo,
  .associates__link:hover .associates__logo {
    transition: none;
    transform: none;
  }
}

/* ロゴが無い場合のテキスト表示 */
.associates__name-text {
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 6px;
  white-space: nowrap;
}

/* ---- Note ---- */
.associates__note {
  margin-top: 0.5rem;
  color: var(--assoc-note-color);
  text-align: right;
  font-size: 0.85rem;
}

/* ================================
   Print
   ================================ */
@media print {
  .subhero.subhero--associates {
    display: none;
  }
  .associates__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .associates__logo {
    filter: grayscale(100%);
  }
  .associates__note {
    color: #000;
  }
}