@charset "UTF-8";

/* ===================================
   Tour Section
=================================== */

.tour-carousel{
  display:flex;
  overflow:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:24px;
  margin-top:30px;
}

.tour-card{
  min-width:320px;
  flex:0 0 320px;

  overflow:hidden;

  border-radius:28px;

  background:#111827;

  border:1px solid rgba(216,181,109,.2);

  box-shadow:
  0 18px 50px rgba(0,0,0,.35);

  transition:
  transform .35s ease,
  box-shadow .35s ease,
  border-color .35s ease;
}

.tour-card:hover{
  transform:
  translateY(-10px)
  scale(1.02);

  border-color:
  rgba(255,240,184,.6);

  box-shadow:
  0 30px 90px rgba(0,0,0,.4),
  0 0 40px rgba(216,181,109,.15);
}

.tour-card img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}

.tour-body{
  padding:24px;
}

.tour-tag{
  display:inline-flex;
  align-items:center;

  padding:8px 14px;

  border-radius:999px;

  background:
  rgba(216,181,109,.12);

  border:
  1px solid rgba(216,181,109,.22);

  color:#f7df9b;

  font-size:13px;
  font-weight:900;

  margin-bottom:14px;
}

.tour-body h3{
  margin:0 0 12px;

  color:#fff3c2;

  font-family:
  "Noto Serif TC",
  "Noto Sans TC",
  serif;

  font-size:26px;

  line-height:1.35;
}

.tour-body p{
  margin:0 0 12px;

  color:#cfc3a8;

  line-height:1.9;
}

.tour-body .btn{
  margin-top:12px;
}

/* ===================================
   Tour Navigation
=================================== */

.tour-prev,
.tour-next{
  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:52px;
  height:52px;

  border-radius:50%;

  border:
  1px solid rgba(216,181,109,.35);

  background:
  rgba(10,10,10,.82);

  color:#f7df9b;

  cursor:pointer;

  z-index:10;
}

.tour-prev{
  left:10px;
}

.tour-next{
  right:10px;
}

.tour-prev:hover,
.tour-next:hover{
  background:
  rgba(216,181,109,.15);

  box-shadow:
  0 0 25px rgba(216,181,109,.25);
}

/* ===================================
   Vehicle Carousel
=================================== */

.vehicle-carousel{
  perspective:1600px;
  transform-style:preserve-3d;
}

.vehicle-carousel .tour-card:hover{
  transform:
  rotateY(10deg)
  translateY(-12px)
  scale(1.03);
}

.vehicle-3d-section{
  padding:80px 0;
}

.vehicle-3d-section .section-title{
  margin-bottom:40px;
}

/* ===================================
   Vehicle Link Grid
=================================== */

.vehicle-link-grid{
  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(260px,1fr));

  gap:20px;

  margin-top:28px;
}

.vehicle-link-card{
  padding:24px;

  border-radius:24px;

  background:#111827;

  border:
  1px solid rgba(216,181,109,.18);

  box-shadow:
  0 18px 50px rgba(0,0,0,.35);
}

.vehicle-link-card h3{
  color:#fff3c2;
  margin-bottom:12px;
}

.vehicle-link-card p{
  color:#cfc3a8;
  margin-bottom:18px;
}

/* ===================================
   Mobile
=================================== */

@media(max-width:980px){

  .tour-prev,
  .tour-next{
    display:none;
  }

}

@media(max-width:640px){

  .tour-card{
    min-width:85vw;
    flex:0 0 85vw;
  }

  .tour-body{
    padding:20px;
  }

  .tour-body h3{
    font-size:22px;
  }

}