@charset "UTF-8";

/*
===============================================================================
玹翔旅遊｜V43 Enterprise Production
正式商業版 CSS｜Luxury Black Gold Design System

SYSTEM_VERSION：V43_Enterprise_Production
SYSTEM_OWNER：玹翔旅遊 Xuan Xiang Travel
ENVIRONMENT：Production
===============================================================================
*/
/* FILE：responsive.css */

/* =========================================================
   玹翔旅遊 V43_Enterprise_Production
   Home Responsive System
   Tablet／Mobile／Small Mobile／Ultra Small
========================================================= */

/* =========================================================
   Responsive Tokens
========================================================= */

:root {
  --xx-mobile-gutter: 20px;
  --xx-mobile-gutter-sm: 16px;
  --xx-mobile-radius: 22px;
  --xx-mobile-section-space: 64px;
  --xx-touch-size: 48px;
}

/* 防止圖片、影片及表單元素超出畫面 */
img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

/* 防止長網址、訂單編號及文字撐破版面 */
.hero,
.hero-content,
.hero-card,
.news-card,
.news-copy,
.news-review-inner,
.third-bind-card,
.third-bind-copy,
.third-bind-panel,
.review-card,
.tour-card,
.vehicle-scene-card,
.process-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* =========================================================
   Tablet｜980px
========================================================= */

@media (max-width: 980px) {
  .hero-grid,
  .intro-grid,
  .news-card,
  .news-review-inner,
  .third-bind-card,
  .process-grid,
  .vehicle-scene-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-grid {
    width: min(92%, 760px);
    margin: -52px auto 0;
    gap: 30px;
  }

  .hero-content {
    padding: 30px;
  }

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

  .hero-card img {
    width: 100%;
    min-height: 340px;
    object-fit: cover;
  }

  .hero-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-card,
  .third-bind-card,
  .news-review-inner {
    width: 100%;
  }

  .news-video {
    min-height: 520px;
  }

  .news-video video {
    width: 100%;
    min-height: 520px;
    height: 100%;
    object-fit: cover;
  }

  .carousel-arrow {
    display: none;
  }

  /* 導覽選單 */
  .xx-menu {
    max-height: calc(100dvh - 76px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .drop-list,
  .xx-sub-list {
    max-height: none;
    overflow: visible;
  }

  /* 支援 :has() 的瀏覽器 */
  body:has(#xx-nav-toggle:checked) {
    overflow: hidden;
    touch-action: none;
  }

  /* 表單區域 */
  .estimate-form,
  .quote-estimator {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .estimate-form button,
  .estimate-submit,
  .quote-estimator button,
  .quote-estimator .btn {
    grid-column: 1 / -1;
  }

  /* 避免桌機 hover 位移在平板產生跳動 */
  @media (hover: none) {
    .btn:hover,
    .hero-card:hover,
    .review-card:hover,
    .tour-card:hover,
    .process-card:hover,
    .vehicle-scene-card:hover {
      transform: none;
    }
  }
}

/* =========================================================
   Mobile｜768px
========================================================= */

@media (max-width: 768px) {
  html {
    scroll-padding-top: 84px;
  }

  body {
    overflow-x: hidden;
  }

  .container,
  .wrap,
  .content,
  .main {
    width: auto !important;
    max-width: none !important;
    margin-inline: var(--xx-mobile-gutter) !important;
  }

  section {
    scroll-margin-top: 84px;
  }

  h1 {
    font-size: clamp(2.35rem, 10vw, 3.1rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.045em;
  }

  h2 {
    font-size: clamp(1.85rem, 7vw, 2.35rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.035em;
  }

  h3 {
    font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
    line-height: 1.35 !important;
  }

  /*
   * 不再全域覆寫所有 a、span。
   * 避免導覽、標籤、圖示及按鈕字級全部被放大。
   */
  p,
  li {
    font-size: 1rem;
    line-height: 1.8;
  }

  .hero-grid {
    width: auto;
    margin: -36px var(--xx-mobile-gutter) 0;
    gap: 24px;
  }

  .hero-content {
    padding: 26px;
    border-radius: var(--xx-mobile-radius);
  }

  .hero-content p {
    font-size: 1.08rem !important;
    line-height: 1.75 !important;
  }

  .hero-actions {
    gap: 12px;
    flex-wrap: wrap;
  }

  .btn {
    min-height: var(--xx-touch-size);
    padding: 13px 20px;
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
  }

  .hero-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .process-grid,
  .vehicle-scene-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .estimate-form,
  .quote-estimator {
    grid-template-columns: minmax(0, 1fr);
  }

  .estimate-form button,
  .estimate-submit,
  .quote-estimator button,
  .quote-estimator .btn {
    grid-column: auto;
    width: 100%;
  }

  input,
  select,
  textarea {
    /*
     * iOS 小於 16px 時，聚焦可能自動放大畫面。
     */
    font-size: 16px !important;
  }

  .review-track,
  .tour-track,
  .carousel-track {
    scroll-padding-inline: var(--xx-mobile-gutter);
    overscroll-behavior-inline: contain;
  }

  .review-card,
  .tour-card {
    scroll-snap-align: start;
  }

  /* 浮動按鈕避免蓋住底部內容 */
  .ai-quote-float {
    max-width: calc(100vw - 32px);
  }
}

/* =========================================================
   Small Mobile｜640px
========================================================= */

@media (max-width: 640px) {
  :root {
    --xx-mobile-section-space: 56px;
  }

  .hero {
    min-height: auto;
  }

  .hero-grid {
    margin-top: -24px;
  }

  .hero-card {
    border-radius: 24px;
  }

  .hero-card img {
    min-height: 280px;
    max-height: 420px;
  }

  .hero-card .caption {
    padding: 22px;
  }

  .hero-content {
    padding: 22px;
  }

  .hero-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-kpi {
    padding: 17px;
  }

  .news-section {
    padding: 24px 0 56px;
  }

  .news-card {
    border-radius: 24px;
  }

  .news-copy {
    padding: 26px 20px;
  }

  .news-video {
    min-height: 360px;
  }

  .news-video video {
    min-height: 360px;
    max-height: 520px;
  }

  .news-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .news-actions .btn {
    width: 100%;
  }

  .news-review-inner {
    padding: 22px 20px;
  }

  .third-bind-copy,
  .third-bind-panel {
    padding: 26px 20px;
  }

  .third-bind-panel {
    min-height: 320px;
  }

  .review-badge-card {
    min-height: 280px;
  }

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

  .process-card,
  .vehicle-scene-card {
    border-radius: 22px;
  }

  .ai-quote-float {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    min-height: 48px;
    padding: 13px 18px;
    font-size: 14px;
    line-height: 1.2;
  }
}

/* =========================================================
   Ultra Small｜480px
========================================================= */

@media (max-width: 480px) {
  :root {
    --xx-mobile-gutter: 16px;
    --xx-mobile-radius: 20px;
  }

  .container,
  .wrap,
  .content,
  .main {
    margin-inline: var(--xx-mobile-gutter) !important;
  }

  h1 {
    font-size: clamp(2rem, 11vw, 2.55rem) !important;
  }

  h2 {
    font-size: clamp(1.65rem, 8vw, 2rem) !important;
  }

  .hero-grid {
    margin-inline: var(--xx-mobile-gutter);
  }

  .hero-content {
    padding: 20px 18px;
  }

  .hero-card .caption {
    padding: 20px 18px;
  }

  .hero-card img {
    min-height: 250px;
  }

  .hero-quote-entry {
    padding: 20px 18px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-ai-entry {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero-ai-entry .btn {
    width: 100%;
  }

  .review-card,
  .tour-card {
    width: 88vw;
    min-width: 88vw;
    flex-basis: 88vw;
  }

  .news-copy,
  .news-review-inner,
  .third-bind-copy,
  .third-bind-panel {
    padding-inline: 18px;
  }

  #quoteResult {
    padding: 18px;
  }
}

/* =========================================================
   Extra Small｜390px
========================================================= */

@media (max-width: 390px) {
  h1 {
    font-size: 1.95rem !important;
  }

  h2 {
    font-size: 1.6rem !important;
  }

  .hero-content,
  .hero-card .caption,
  .hero-quote-entry {
    padding-inline: 16px;
  }

  .hero-actions .btn,
  .hero-ai-entry .btn,
  .news-actions .btn {
    padding-inline: 14px;
  }

  .review-card,
  .tour-card {
    width: 90vw;
    min-width: 90vw;
    flex-basis: 90vw;
  }

  .ai-quote-float {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 12px 15px;
  }
}

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

@media (max-width: 900px) and (orientation: landscape) {
  .hero {
    min-height: auto;
  }

  .hero-grid {
    padding-top: 96px;
  }

  .hero-card img {
    min-height: 300px;
    max-height: 70vh;
  }

  .xx-menu {
    max-height: calc(100dvh - 64px);
  }
}

/* =========================================================
   Touch Devices
========================================================= */

@media (hover: none) and (pointer: coarse) {
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  button,
  .btn,
  .ai-quote-float {
    touch-action: manipulation;
  }

  .carousel-track,
  .review-track,
  .tour-track {
    scrollbar-width: none;
  }

  .carousel-track::-webkit-scrollbar,
  .review-track::-webkit-scrollbar,
  .tour-track::-webkit-scrollbar {
    display: none;
  }
}

/* =========================================================
   Safe Area｜iPhone
========================================================= */

@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    body {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }

    .xx-menu {
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
  }
}

/* =========================================================
   Accessibility｜Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Accessibility｜High Contrast
========================================================= */

@media (prefers-contrast: more) {
  .hero-content,
  .hero-card,
  .news-card,
  .third-bind-card,
  .review-card,
  .tour-card {
    border-color: rgba(216, 181, 109, 0.55);
  }

  .btn,
  input,
  select,
  textarea {
    border-width: 2px;
  }
}