/* 首頁主視覺、旅行篩選與熱門探索 */
.hero {
  position:relative;
  min-height:540px;
  isolation:isolate;
  background:#d3e9e8;
  overflow:hidden;
}

.hero-photo {
  position:absolute;
  inset:0;
  z-index:-2;
  background:url('../images/hero.webp?v=20261022') center 20%/cover;
}
/* 手機用 800 寬的主視覺（約 1/4 大小）；head.php 依同樣的寬度條件預先載入 */
@media (max-width:800px){.hero-photo{background-image:url('../images/hero-800.webp?v=20261022')}}

.hero:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(255,252,236,.88),rgba(255,252,238,.58) 38%,transparent 67%);
}

.hero:after {
  content:"";
  position:absolute;
  bottom:-1px;
  height:12px;
  left:0;
  right:0;
  background:var(--paper);
  clip-path:polygon(0 40%,8% 70%,15% 30%,25% 80%,38% 35%,49% 70%,61% 40%,75% 75%,88% 25%,100% 70%,100% 100%,0 100%);
}

.hero-inner {
  padding-top:44px;
  padding-bottom:30px;
  position:relative;
}

.eyebrow {
  font-size:13px;
  letter-spacing:.26em;
  margin-bottom:10px;
}

.hero h1 {
  font-size:57px;
  line-height:1.25;
  letter-spacing:.06em;
  color:#102f3b;
  font-weight:800;
}

.hero h1 span {
  display:block;
  font-size:35px;
  margin-top:7px;
  letter-spacing:.08em;
}

.hero h2 {
  font-size:21px;
  margin-top:12px;
}

.hero-copy {
  font-size:15px;
  line-height:1.9;
  margin-top:18px;
  letter-spacing:.06em;
}

.finder {
  margin-top:31px;
  background:#fffefb;
  box-shadow:0 9px 28px #183b4826;
  padding:16px 18px;
  border-radius:12px;
  display:grid;
  grid-template-columns:1.15fr 1.1fr 1fr auto;
  align-items:center;
  gap:14px;
  scroll-margin-top:110px;
}

.finder label {
  padding:0 17px;
  border-right:1px solid var(--line);
  min-width:0;
}

.finder label>span {
  display:block;
  font-size:12.5px;
  color:var(--muted);
  letter-spacing:.1em;
}

.finder select {
  border:0;
  background:transparent;
  font-size:15px;
  width:100%;
  font-weight:600;
  padding:5px 18px 4px 0;
  color:var(--ink);
  cursor:pointer;
}

.finder .button {
  height:48px;
}

.popular {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:15px;
  font-size:13px;
}

.popular>span {
  font-weight:600;
}

.popular a {
  padding:4px 14px;
  border:1px solid #d8e5e2;
  background:#ffffffd9;
  border-radius:20px;
  transition:background .2s;
}

.popular a:hover {
  background:#fff;
}

.hero-note {
  position:absolute;
  bottom:28px;
  right:0;
  color:white;
  font:italic 19px var(--serif);
  letter-spacing:.08em;
  text-shadow:0 1px 5px #173d46;
}

.image-note {
  position:absolute;
  right:0;
  bottom:6px;
  color:#fff;
  font-size:11px;
  text-shadow:0 1px 5px #173d46;
}