/* =========================================================
   top-reco-unit.css
   ---------------------------------------------------------
   責務：
   - トップページ レコメンドカルーセルの見た目・レイアウト
   - JSは構造のみ、レイアウトは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;

  background: #e8f1d6;
  border: 1px solid #cfdab0;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

/* ========== Band Color ========== */

/* buy: 建物 */
.top-reco-unit[data-system="buy"][data-buy-type="建物"] .tru-head{
  background:#ffe6cc;
  border-color:#f3b27a;
}
.top-reco-unit[data-system="buy"][data-buy-type="建物"] .tru-title{
  color:#7a3b00;
}

/* buy: 土地 */
.top-reco-unit[data-system="buy"][data-buy-type="土地"] .tru-head{
  background:#dff3e1;
  border-color:#9fd3a6;
}
.top-reco-unit[data-system="buy"][data-buy-type="土地"] .tru-title{
  color:#1f5a2a;
}

/* rent: 居住用 */
.top-reco-unit[data-system="rent"][data-rent-kind="居住用"] .tru-head{
  background:#e3f0ff;
  border-color:#9fc4f0;
}
.top-reco-unit[data-system="rent"][data-rent-kind="居住用"] .tru-title{
  color:#1d4f7a;
}

/* rent: 事業用 */
.top-reco-unit[data-system="rent"][data-rent-kind="事業用"] .tru-head{
  background:#f1e6ff;
  border-color:#c5a6f0;
}
.top-reco-unit[data-system="rent"][data-rent-kind="事業用"] .tru-title{
  color:#4b2a7a;
}


.tru-title {
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
  color: #2b3a17;
}

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

.tru-btn {
  appearance: none;
  border: 1px solid #cfdab0;
  background: #ffffff;
  color: #2b3a17;
  border-radius: 10px;
  width: 34px;
  height: 30px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

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

.tru-btn.is-disabled {
  opacity: 0.35;
  cursor: default;
}

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

  /* スクロールバー非表示（操作は生かす） */
  scrollbar-width: none;
}
.tru-viewport::-webkit-scrollbar {
  display: none;
}

/* =========================================================
   4) レーン（カード並び）
   ========================================================= */
.tru-rail {
  display: flex;
  gap: 10px;
  padding: 0px 2px 10px;

  scroll-snap-type: x mandatory;
}

/* =========================================================
   5) カード本体
   ========================================================= */
.tru-card {
  flex: 0 0 180px; /* PC：やや小さめ（5.5枚感） */
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  scroll-snap-align: start;
}

/* =========================================================
   6) 画像エリア
   ========================================================= */
.tru-media {
  position: relative;
  background: #f4f4f4;
  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;
}

/* =========================================================
   7) 状況チップ（field_3 単一選択）
   ========================================================= */
.tru-chips {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
}

.tru-chip {
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 18px;
  color: #ffffff;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* 指定色 */
.tru-chip.is-new {            /* NEW */
  background: #e53935;
}
.tru-chip.is-price-down {     /* 値下げ */
  background: #1e88e5;
}

/* 任意配色（意味が直感的に分かる系） */
.tru-chip.is-change {         /* 条件変更 */
  background: #8e24aa;
}
.tru-chip.is-negotiating {    /* 交渉中 */
  background: #fb8c00;
}
.tru-chip.is-sold {           /* 成約済み */
  background: #616161;
}
.tru-chip.is-paused {         /* 一時中断 */
  background: #546e7a;
}
.tru-chip.is-canceled {       /* 中止 */
  background: #263238;
}
.tru-chip.is-other {
  background: rgba(0,0,0,0.55);
}

/* =========================================================
   8) カード本文
   ========================================================= */
.tru-body {
  padding: 10px;
  display: grid;
  gap: 6px;
}

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

.tru-card-addr {
  font-size: 11px;
  color: #666666;
}

/* =========================================================
   9) 価格表示
   ========================================================= */
.tru-card-price {
  font-size: 14px;
  font-weight: 700;
  color: #c62828; /* 価格は赤系で強調 */
}

/* =========================================================
   10) スペック行（layout.rows）
   ========================================================= */
.tru-specs {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 11px;
  color: #444444;
}

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

/* =========================================================
   11) アクションボタン
   ========================================================= */
.tru-actions {
  margin-top: 6px;
  display: flex;
  gap: 8px;
}

.tru-link {
  flex: 1 1 auto;
  height: 32px;
  border-radius: 10px;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
}

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

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

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

/* =========================================================
   12) 注記・空表示
   ========================================================= */

.tru-note {
  margin-top: 6px;
  font-size: 11px;
  color: #777777;

  /* 通常は見せない */
  opacity: 0;
  max-height: 0;
  overflow: hidden;

  transition:
    opacity 0.25s ease,
    max-height 0.25s ease;
}

/* PC：カルーセルにマウスを乗せた時 */
.top-reco-unit:hover .tru-note,
.top-reco-unit:focus-within .tru-note {
  opacity: 1;
  max-height: 40px;
}

/* SP：常に非表示（hoverが無いので誤表示防止） */
@media (max-width: 640px) {
  .tru-note {
    display: none;
  }
}

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

/* =========================================================
   13) SP調整（@mediaは1ブロックに統合）
   ========================================================= */
@media (max-width: 640px) {
  .tru-title {
    font-size: 15px;
  }

  .tru-rail {
    gap: 10px;
  }

  .tru-card {
    flex-basis: 72vw; /* SP：1枚＋α */
  }

  .tru-note {
    display: none; !important;
  }
}

/* 通常表示・hover・focus すべて無効 */
.top-reco-unit .tru-note,
.top-reco-unit:hover .tru-note,
.top-reco-unit:focus-within .tru-note {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* =====================================
   SP: Move photo up inside card
   ===================================== */
@media (max-width: 640px) {

  /* 中央寄せをやめて上寄せにする（画像が下がって見える主因） */
  .top-reco-unit .tru-media{
    place-items: start !important;   /* grid + place-items:center を上書き */
    align-content: start !important; /* 念のため */
  }

  /* 画像のトリミング基準を「上」にする（写真そのものを上へ） */
  .top-reco-unit .tru-img{
    object-position: center top !important;
  }

}