/* ============================================================
  BTO PC おすすめカード共通スタイル
  /css/bto-recommend.css
  ビルド不要・直接読み込み
============================================================ */

/* ---- セクションラッパー ---- */
.rec-section {
  margin: 2rem 0 0;
}
.rec-section__lead {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em;
  margin: 0 0 1rem !important;
  padding: 0.65rem 1.1rem !important;
  border-left: 4px solid #0891b2;
  border-radius: 0 8px 8px 0;
  line-height: 1.4;
  color: #f0f9ff !important;
  background: #0f172a;
}
.rec-section__lead--pc {
  border-left-color: #00d4ff;
  background: linear-gradient(90deg, #0c2340 0%, #0f172a 100%);
}
.rec-section__desc {
  margin: -4px 0 20px;
  font-size: 0.93rem;
  line-height: 1.75;
  color: #374151;
}

/* ---- グリッド ---- */
.gpu-rec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* ---- カード共通 ---- */
.gpu-rec-card {
  position: relative;
  background: #0d1b2a;
  border: 1px solid rgba(8, 145, 178, 0.22);
  border-radius: 14px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  overflow: hidden;
}
.gpu-rec-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0891b2, #22d3ee);
  opacity: 0.5;
  transition: opacity 0.22s ease;
}
.gpu-rec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(8, 145, 178, 0.2);
  border-color: rgba(8, 145, 178, 0.5);
}
.gpu-rec-card:hover::before { opacity: 1; }

/* ---- おすすめ強調 ---- */
.gpu-rec-card--featured {
  background: #091929;
  border-color: rgba(8, 145, 178, 0.45);
  box-shadow: 0 0 0 1px rgba(8, 145, 178, 0.15), 0 4px 20px rgba(8, 145, 178, 0.1);
}
.gpu-rec-card--featured::before { opacity: 1; height: 4px; }

/* ---- featured + AMD 複合（G-Tune DG） ---- */
.gpu-rec-card--featured.gpu-rec-card--amd {
  background: #0d1a10;
  border-color: rgba(237, 28, 36, 0.4);
  box-shadow: 0 0 0 1px rgba(237, 28, 36, 0.15), 0 4px 20px rgba(237, 28, 36, 0.1);
}
.gpu-rec-card--featured.gpu-rec-card--amd::before {
  background: linear-gradient(90deg, #ed1c24, #f97316);
  opacity: 1;
  height: 4px;
}
.gpu-rec-card--featured.gpu-rec-card--amd:hover {
  box-shadow: 0 12px 32px rgba(237, 28, 36, 0.22);
  border-color: rgba(237, 28, 36, 0.6);
}

/* ---- バッジ ---- */
.gpu-rec-badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 9px;
  border-radius: 20px;
  line-height: 1.7;
}
.gpu-rec-badge--best {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.gpu-rec-badge--standard {
  background: rgba(8, 145, 178, 0.14);
  color: #22d3ee;
  border: 1px solid rgba(8, 145, 178, 0.38);
}

/* ---- 製品画像 ---- */
.gpu-rec-img {
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
}
.gpu-rec-img a { display: block; line-height: 0; }
.gpu-rec-img a:hover { opacity: 0.88; }
.gpu-rec-img img {
  width: 100%;
  max-width: 220px;
  height: 140px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  padding: 10px;
  background: rgba(255, 255, 255, 0.96);
}

/* ---- 製品名（テーマCSSの h4 スタイルを打ち消す） ---- */
.post-main .gpu-rec-name,
.entry-content .gpu-rec-name {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
  margin: 0 !important;
  line-height: 1.45;
  border: none !important;
  padding: 0 !important;
  background: none !important;
  counter-increment: none !important;
}
.post-main .gpu-rec-name::before,
.entry-content .gpu-rec-name::before { display: none !important; }

/* ---- ターゲット説明 ---- */
.post-main .gpu-rec-target,
.entry-content .gpu-rec-target {
  font-size: 0.76rem !important;
  color: #94a3b8 !important;
  margin: -4px 0 0 !important;
  line-height: 1.55;
}

/* ---- スペックリスト ---- */
.gpu-rec-specs {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.post-main .gpu-rec-specs li,
.entry-content .gpu-rec-specs li {
  font-size: 0.75rem;
  color: #dee5ef !important;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
  list-style: none !important;
}
.post-main .gpu-rec-specs li::before,
.entry-content .gpu-rec-specs li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #0891b2;
  font-size: 0.65rem;
  top: 3px;
}

/* ---- ボタンエリア ---- */
.gpu-rec-btns {
  display: flex;
  gap: 7px;
  margin-top: auto; /* カード下部に押し下げ */
}
/* single.css の .tier-amazon-btn (align-self:flex-start / margin-top:12px) を打ち消す */
.gpu-rec-card .tier-amazon-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 8px 6px;
  border-radius: 7px;
  white-space: nowrap;
  margin-top: 0 !important;
  align-self: stretch !important;
}

/* ============================================================
  レスポンシブ
============================================================ */
@media (max-width: 920px) {
  .gpu-rec-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 644px) {
  .gpu-rec-grid { grid-template-columns: 1fr; gap: 10px; }
  /* CSS grid で「画像左・テキスト右縦スタック」を実現 */
  .gpu-rec-card {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-areas:
      "badge  badge"
      "img    name"
      "img    target"
      "img    specs"
      "btn    btn";
    gap: 4px 10px;
    padding: 14px;
  }
  .gpu-rec-badge  { grid-area: badge; }
  .gpu-rec-img    { grid-area: img; align-self: start; }
  .gpu-rec-img img { height: 72px; max-width: none; width: 100%; padding: 4px; }
  .gpu-rec-name   { grid-area: name; align-self: center; margin: 0 !important; padding: 0 !important; }
  .gpu-rec-target { grid-area: target; }
  .gpu-rec-specs  { grid-area: specs; flex: unset; }
  .gpu-rec-btns   { grid-area: btn; margin-top: 4px; }
  .gpu-rec-card .tier-amazon-btn { align-self: center !important; }
}