/**
 * CarSenser View - フロントエンドスタイル
 * バージョン: 2.0.0 - Carousel Design
 */

/* ========================================
   AI-CEO カラー変数
   ======================================== */
:root {
  /* Primary Colors */
  --ai-ceo-primary: #6BABCD;
  --ai-ceo-primary-hover: #5A9ABF;
  --ai-ceo-primary-light: rgba(107, 171, 205, 0.1);
  --ai-ceo-primary-shadow: rgba(107, 171, 205, 0.3);
  --ai-ceo-primary-shadow-hover: rgba(107, 171, 205, 0.4);

  /* Neutral Colors */
  --ai-ceo-text-dark: #1f2937;
  --ai-ceo-text-light: #4b5563;
  --ai-ceo-text-lighter: #6b7280;
  --ai-ceo-bg-light: #f9fafb;
  --ai-ceo-bg-lighter: #f3f4f6;
  --ai-ceo-border: #e5e7eb;
  --ai-ceo-border-hover: #d1d5db;
  --ai-ceo-white: #ffffff;

  /* Accent Colors */
  --ai-ceo-accent-orange: #FF6B35;
  --ai-ceo-accent-orange-light: #FF8C5A;

  /* Spacing */
  --ai-ceo-space-xs: 4px;
  --ai-ceo-space-sm: 8px;
  --ai-ceo-space-md: 12px;
  --ai-ceo-space-lg: 16px;
  --ai-ceo-space-xl: 20px;
  --ai-ceo-space-2xl: 24px;
  --ai-ceo-space-3xl: 32px;
}

/* ========================================
   カルーセルコンテナ
   ======================================== */
.carsenser-carousel-container {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: var(--ai-ceo-space-2xl) auto;
  padding: var(--ai-ceo-space-xl) var(--ai-ceo-space-2xl);
  overflow: hidden;
}

.carsenser-carousel {
  width: 100%;
  overflow: hidden;
  padding: var(--ai-ceo-space-md) 0;
  margin: 0 calc(-1 * var(--ai-ceo-space-2xl));
  padding-left: var(--ai-ceo-space-2xl);
  padding-right: var(--ai-ceo-space-2xl);
}

.carsenser-carousel .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

/* ========================================
   Swiper スライド
   ======================================== */
.swiper-slide {
  height: auto;
  display: flex;
}

/* デスクトップ */
@media screen and (min-width: 1024px) {
  .carsenser-carousel-container {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ai-ceo-space-2xl);
    padding-right: var(--ai-ceo-space-2xl);
  }

  .carsenser-carousel {
    margin: 0;
    padding: var(--ai-ceo-space-md) 0;
  }
}

/* タブレット */
@media screen and (min-width: 900px) and (max-width: 1023px) {
  .swiper-slide {
    width: calc((100% - 30px) / 2) !important;
    max-width: none;
  }

  .carsenser-carousel .swiper-wrapper {
    justify-content: flex-start !important;
  }
}

/* モバイル・小型タブレット */
@media screen and (max-width: 899px) {
  .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .carsenser-carousel .swiper-wrapper {
    justify-content: flex-start !important;
  }
}

/* ========================================
   車両カード
   ======================================== */
.car-card {
  display: flex;
  flex-direction: column;
  background: var(--ai-ceo-white);
  border: 1px solid var(--ai-ceo-border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  height: 100%;
}

.car-card:hover {
  border-color: var(--ai-ceo-primary);
  box-shadow: 0 8px 24px var(--ai-ceo-primary-shadow);
  transform: translateY(-4px);
}

/* ========================================
   カード画像エリア
   ======================================== */
.car-card-image {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: var(--ai-ceo-bg-lighter);
}

.car-card-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.car-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.car-card:hover .car-card-image img {
  transform: scale(1.08);
}

/* ========================================
   カード情報エリア
   ======================================== */
.car-card-content {
  padding: var(--ai-ceo-space-xl);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 車両名 */
.car-card-name {
  margin: 0 0 var(--ai-ceo-space-lg) 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ai-ceo-text-dark);
}

.car-card-name a {
  color: var(--ai-ceo-text-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.car-card-name a:hover {
  color: var(--ai-ceo-primary);
}

/* ========================================
   価格エリア
   ======================================== */
.car-card-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ai-ceo-space-lg);
  margin-bottom: var(--ai-ceo-space-xl);
  padding-bottom: var(--ai-ceo-space-lg);
  border-bottom: 2px solid var(--ai-ceo-bg-lighter);
}

.price-item {
  display: flex;
  flex-direction: column;
  gap: var(--ai-ceo-space-xs);
}

.price-label {
  font-size: 13px;
  color: var(--ai-ceo-text-lighter);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--ai-ceo-space-xs);
}

.price-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.price-item.total .price-value {
  color: var(--ai-ceo-accent-orange);
}

.price-item.base .price-value {
  color: var(--ai-ceo-text-dark);
}

.price-unit {
  font-size: 16px;
  font-weight: 600;
  margin-left: 2px;
}

/* ========================================
   スペック情報
   ======================================== */
.car-card-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ai-ceo-space-md);
  margin-bottom: var(--ai-ceo-space-xl);
}

.spec-row {
  display: flex;
  flex-direction: column;
  gap: var(--ai-ceo-space-xs);
}

.spec-label {
  font-size: 12px;
  color: var(--ai-ceo-text-lighter);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.spec-value {
  font-size: 15px;
  color: var(--ai-ceo-text-dark);
  font-weight: 600;
}

/* ========================================
   保証情報
   ======================================== */
.car-card-warranty {
  margin-top: auto;
  padding: var(--ai-ceo-space-md);
  background: var(--ai-ceo-primary-light);
  border-radius: 8px;
  border-left: 4px solid var(--ai-ceo-primary);
}

.warranty-label {
  font-size: 12px;
  color: var(--ai-ceo-text-lighter);
  font-weight: 500;
  margin-bottom: var(--ai-ceo-space-xs);
}

.warranty-value {
  font-size: 14px;
  color: var(--ai-ceo-text-dark);
  font-weight: 600;
}

/* ========================================
   Swiper Pagination (ドットナビゲーション)
   ======================================== */
.swiper-pagination {
  display: none;
}

/* ========================================
   エラーメッセージ
   ======================================== */
.carsenser-error {
  padding: var(--ai-ceo-space-xl);
  background: #fee;
  color: #c33;
  border: 1px solid #fcc;
  border-radius: 8px;
  margin: var(--ai-ceo-space-2xl) 0;
}

.carsenser-error p {
  margin: 0;
}

/* ========================================
   レスポンシブデザイン
   ======================================== */

/* タブレット (900px以上 1023px以下) */
@media screen and (min-width: 900px) and (max-width: 1023px) {
  .carsenser-carousel-container {
    padding: var(--ai-ceo-space-xl) var(--ai-ceo-space-md);
  }

  .carsenser-carousel {
    margin: 0 calc(-1 * var(--ai-ceo-space-md));
    padding-left: var(--ai-ceo-space-md);
    padding-right: var(--ai-ceo-space-md);
  }

  .car-card-image {
    height: 220px;
  }

  .car-card-name {
    font-size: 18px;
  }

  .car-card-prices {
    grid-template-columns: 1fr 1fr;
    gap: var(--ai-ceo-space-md);
  }

  .price-value {
    font-size: 24px;
  }

  .car-card-specs {
    display: grid;
  }

  .car-card-content {
    padding: var(--ai-ceo-space-lg);
  }
}

/* モバイル・小型タブレット (899px以下) */
@media screen and (max-width: 899px) {
  .carsenser-carousel-container {
    margin: var(--ai-ceo-space-lg) 0;
    padding: 0;
    overflow: hidden;
    max-width: 100%;
  }

  .carsenser-carousel {
    margin: 0;
    padding: 0 var(--ai-ceo-space-lg);
    overflow: visible;
  }

  .car-card {
    max-width: 100%;
    width: 100%;
  }

  .car-card-image {
    height: 240px;
  }

  .car-card-name {
    font-size: 18px;
  }

  .car-card-prices {
    margin-bottom: var(--ai-ceo-space-md);
  }

  .price-value {
    font-size: 26px;
  }

  .car-card-content {
    padding: var(--ai-ceo-space-lg);
  }

  /* スペック情報を非表示 */
  .car-card-specs {
    display: none;
  }

  /* 保証情報を非表示 */
  .car-card-warranty {
    display: none;
  }
}

/* ========================================
   アクセシビリティ
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .car-card,
  .car-card-image img {
    transition: none;
  }

  .car-card:hover {
    transform: none;
  }

  .car-card:hover .car-card-image img {
    transform: none;
  }
}