@charset "UTF-8";

/*---物件情報: Property Card Layout & Sizing -----*/

/*------------------------------------


【共通CSS - すべてのページで使用】
property-card-layout.css
└ .property-card
└ .property-link
└ .property-image
└ .property-content
└ .property-name, .property-price など
（カード本体のデザインのみ）

【ページ個別CSS】
■ トップページ
property-slideshow.css
└ .properties-slider（横スクロール用）
└ .properties-slider-wrapper
└ スライドショー特有の設定

■ 検索結果・リストページ
property-list-grid.css（新規作成が必要）
└ .properties-grid（flexまたはgridで横並び）
└ 検索結果表示エリア
└ フィルター・ソート用レイアウト

■ エリア別・デベロッパー別ページ
各ページ専用のCSS
└ それぞれのセクションレイアウト
└ property-list-grid.cssを流用も可能


------------------------------------------------------*/


/* --------------------------------------------------------------------------
   Property Card Structure & Layout
   -------------------------------------------------------------------------- */

.property-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* レイアウト維持のため calc 内の変数を調整 */
@media (max-width: 767px) {
  .property-card { width: calc(90% - var(--space-2)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .property-card { width: calc(45% - var(--space-2)); }
}
@media (min-width: 1024px) {
  .property-card { width: calc(30% - var(--space-2)); }
}

.property-link {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--color-glass-white);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); /* 0.75rem -> --radius-lg(1rem) */
  overflow: hidden;
  transition: var(--transition-luxury);
  height: 100%;
}

.property-link:hover .property-image img {
  transform: scale(1.05);
}

.property-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-secondary);
}

.property-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-luxury);
}

.property-content {
  padding: var(--space-2); /* 0.75rem -> --space-2(16px) */
}

/* --------------------------------------------------------------------------
   Property Name 
   -------------------------------------------------------------------------- */

.property-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
}

.property-price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold);
  margin: 0 0 var(--space-1);
}

.property-area {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-2);
}

.property-features {
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.property-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.property-feature-icon {
  color: var(--color-gold);
}

/* --------------------------------------------------------------------------
   物件ステータス/Property： オフプラン Off-Plan・中古・リセール (Resale)・賃貸 (Rent)
   -------------------------------------------------------------------------- */

.property-offplan {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.property-offplan-icon {
  color: var(--color-gold);
}