/* top-reco-unit.css
----------------------------------------
責務：トップページ レコメンドカルーセルの見た目・レイアウト
ルール：1責務1ブロック / SP @mediaは1ブロックに統合
---------------------------------------- */

/* ==============================
   1) ルート（外枠）
============================== */
.top-reco-unit {
  margin: 18px 0;
}

/* ==============================
   2) ヘッダー（タイトル＋操作）
============================== */
.tru-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px 0;
}

.tru-title {
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
}

.tru-ctrl {
  display: flex;
  gap: 8px;
}

.tru-btn {
  appearance: none;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.tru-btn:active {
  transform: translateY(1px);
}

/* ==============================
   3) ビューポート＆レーン（横スクロール）
============================== */
.tru-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.tru-rail {
  display: flex;
  gap: 12px;
  padding: 4px 2px 10px;
}

/* ==============================
   4) カード（共通）
============================== */
.tru-card {
  flex: 0 0 280px; /* PC基準カード幅 */
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tru-media {
  background: #f4f4f4;
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
}

.tru-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tru-placeholder {
  font-size: 12px;
  color: #777;
  letter-spacing: 0.08em;
}

.tru-body {
  padding: 12px;
  display: grid;
  gap: 6px;
}

.tru-card-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

.tru-card-addr {
  font-size: 12px;
  color: #666;
}

/* ==============================
   5) スペック行（layout.rows）
============================== */
.tru-specs {
  margin: 6px 0 0;
  padding: 0 0 0 16px;
  color: #444;
  font-size: 12px;
}

.tru-specs li {
  margin: 2px 0;
}

/* ==============================
   6) アクション（詳細 / ギャラリー）
============================== */
.tru-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.tru-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  height: 34px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 13px;
  border: 1px solid #ddd;
  color: #333;
  background: #fff;
}

.tru-link-detail {
  border-color: #cfe3ff;
  background: #f4f9ff;
}

.tru-link-gallery {
  border-color: #ffe0b8;
  background: #fff7eb;
}

.tru-link.is-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ==============================
   7) 注記 / 空表示
============================== */
.tru-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: #777;
}

.tru-empty {
  padding: 18px;
  border: 1px dashed #ccc;
  border-radius: 12px;
  color: #666;
  min-width: 240px;
}

/* ==============================
   8) SP最終調整（@mediaは1ブロックに統合）
============================== */
@media (max-width: 640px) {
  .tru-title { font-size: 16px; }
  .tru-btn { padding: 6px 9px; border-radius: 10px; }
  .tru-rail { gap: 10px; }
  .tru-card { flex-basis: 78vw; } /* SPは画面幅基準で自然に */
  .tru-note { display: none; }    /* SPは注記を消してすっきり */
}