/* Silk Road Tours — small custom styles layered on top of Tailwind */

html {
    scroll-behavior: smooth;
}

/* Subtle lift on hover for cards */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px -12px rgba(52, 38, 27, 0.18);
}

/* Gentle image zoom inside an overflow-hidden frame */
.img-zoom img {
    transition: transform 0.5s ease;
}
.img-zoom:hover img {
    transform: scale(1.05);
}

/* Simple cross-fade for hero */
.hover-fade {
    transition: opacity 0.3s ease;
}
.hover-fade:hover {
    opacity: 0.85;
}

/* Desktop dropdown — touch/laptop click-toggle fallback (complements group-hover) */
[data-desktop-dropdown].open > div:nth-child(2) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
[data-desktop-dropdown].open > a svg {
    transform: rotate(180deg);
}

/* Safe single-line text truncation (works everywhere, incl. Tailwind CDN) */
.truncate-line {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Day-by-Day unified card: open state highlight */
[data-day-item] [data-day-card] {
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
[data-day-item][data-open="true"] [data-day-card] {
    border-color: rgba(127, 168, 184, 0.7);
    box-shadow: 0 18px 34px -20px rgba(29, 110, 140, 0.35);
}

/* Day-by-Day panel entrance animation */
[data-day-panel] {
    animation: day-panel-in 0.28s ease;
}
@keyframes day-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Booking form sticky card (lg+): slim themed scrollbar for inner scrolling */
#book {
    scrollbar-width: thin;
    scrollbar-color: rgba(127, 168, 184, 0.45) transparent;
}
#book::-webkit-scrollbar {
    width: 6px;
}
#book::-webkit-scrollbar-thumb {
    background: rgba(127, 168, 184, 0.45);
    border-radius: 3px;
}
#book::-webkit-scrollbar-track {
    background: transparent;
}

/* Hero image slider (homepage header) */
.hero-slider .hero-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transform: scale(1.07);
    transition: opacity 1.1s ease, transform 7s ease;
    will-change: opacity, transform;
    pointer-events: none;
}
.hero-slider .hero-slide.is-active {
    z-index: 1;
    opacity: 1;
    transform: scale(1);
}
.hero-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填满 Hero 且不拉伸变形，任意屏幕比例一致 */
    object-position: center;
}
.hero-slide-img--left  { object-position: 18% 50%; }
.hero-slide-img--right { object-position: 82% 50%; }
.hero-shade {
    z-index: 2;
    background:
        radial-gradient(circle at 15% 20%, rgba(189,154,99,0.20), transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(127,168,184,0.22), transparent 42%),
        linear-gradient(115deg, rgba(52,38,27,0.78) 8%, rgba(74,55,40,0.42) 48%, rgba(51,71,79,0.60) 100%);
}
.hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 20;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background-color 0.25s ease;
}
.hero-arrow:hover { background: rgba(255, 255, 255, 0.24); }
.hero-arrow--prev { left: 1rem; }
.hero-arrow--next { right: 1rem; }
.hero-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    z-index: 20;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
}
.hero-dot {
    width: 1.75rem;
    height: 0.3rem;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background-color 0.3s ease, width 0.3s ease;
}
.hero-dot.is-active { width: 2.5rem; background: #fff; }

@media (max-width: 640px) {
    .hero-arrow { display: none; } /* 小屏隐藏箭头，改用滑动手势 */
    .hero-dots { bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slider .hero-slide {
        transition: opacity 0.4s ease;
        transform: none;
    }
}