/* assets/css/profile-cards.css — 記事下プロフィールカード専用（衝突回避のため .container-profile に限定） */

.container-profile{
  --pc-gap: 16px;
  --card-radius: 14px;
  --card-border: 1px;
  --card-shadow: 0 6px 16px rgba(31,45,61,.05);
  --card-bg: #fff;
  --card-bdr: rgba(17,24,39,.10);  /* #111827 の10% */
  --title: #0f172a;                /* 見出し */
  --text:  #334155;                /* 本文 */
  --accent: #0b66c3;               /* リンク等のアクセント */

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--pc-gap);
  margin: 18px 0 0;
}

/* カード本体（過度に丸すぎない・薄い縁取り・柔らかい影） */
.container-profile .card-profile{
  background: var(--card-bg);
  border: var(--card-border) solid var(--card-bdr);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 14px 14px 12px;
  color: var(--text);
  isolation: isolate;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

/* ホバーでほんの少し持ち上げる（上品な動き） */
.container-profile .card-profile:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(31,45,61,.08);
  border-color: rgba(17,24,39,.18);
}

/* 見出し h4 を上品に（やや太・小さめトラッキング・下線の代わりに下罫） */
.container-profile .card-profile > h4{
  margin: 2px 0 10px;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--title);
  position: relative;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

/* 画像は“角丸＋16:9で美しく” */
.container-profile .banner-img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: transform .35s ease, box-shadow .35s ease;
}

/* 画像リンクの軽いズーム */
.container-profile a:hover .banner-img{
  transform: scale(1.02);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}

/* 本文テキスト */
.container-profile .card-profile > p{
  margin: 10px 2px 2px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
}

/* リンク色（本文内） */
.container-profile .card-profile a{
  color: var(--accent);
  text-decoration: none;
}
.container-profile .card-profile a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* モバイル最適化（サイト全体のBPに合わせて） */
@media (max-width: 767.98px){
  .container-profile{ 
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
  }
  .container-profile .card-profile{
    padding: 12px 12px 10px;
    border-radius: 12px;
  }
  .container-profile .card-profile > h4{
    margin-bottom: 8px;
    padding-bottom: 5px;
  }
}

/* 低視覚負荷（アニメ無効） */
@media (prefers-reduced-motion: reduce){
  .container-profile .card-profile,
  .container-profile .banner-img{
    transition: none !important;
  }
}

/* ダークモード配慮（必要に応じて微調整） */
@media (prefers-color-scheme: dark){
  .container-profile{
    --card-bg: #0b1220;
    --card-bdr: rgba(255,255,255,.10);
    --title: #e5e7eb;
    --text:  #cbd5e1;
    --accent:#81aefc;
    --card-shadow: 0 6px 16px rgba(0,0,0,.35);
  }
  .container-profile .card-profile:hover{
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 10px 24px rgba(0,0,0,.5);
  }
  .container-profile .banner-img{
    box-shadow: 0 2px 6px rgba(0,0,0,.45);
  }
}