/* ==========================================================
   QUAN International — Product Page RWD + Animations
   套用於：AS100 / LCM / LEM / V503 / W100 / QGW820 /
           QGW820-L / LAQ100 / Pdm 等所有產品獨立頁面
   ========================================================== */

/* ──────────────────────────────────────────
   Keyframes
   ────────────────────────────────────────── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(41,151,255,0.35), 0 4px 20px rgba(0,0,0,0.5); }
  50%       { box-shadow: 0 0 36px rgba(41,151,255,0.65), 0 4px 30px rgba(0,0,0,0.6); }
}
@keyframes bentoGlow {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 24px rgba(41,151,255,0.12); }
}

/* ──────────────────────────────────────────
   Hero — 底部漸層 + 按鈕光暈
   ────────────────────────────────────────── */
.hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, transparent 40%, rgba(0,0,0,0.5) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-datasheet-btn {
  animation: glowPulse 3.5s ease-in-out infinite;
  z-index: 10;
  position: absolute;
}

/* ──────────────────────────────────────────
   Highlight Carousel — hover 動效
   ────────────────────────────────────────── */
.highlight-card {
  transition: transform 0.35s cubic-bezier(0.25,1,0.5,1), border-color 0.3s, box-shadow 0.35s;
}
.highlight-card:hover {
  transform: scale(1.03) translateY(-4px);
  border-color: rgba(41,151,255,0.7) !important;
  box-shadow: 0 16px 40px rgba(41,151,255,0.18), 0 0 0 1px rgba(41,151,255,0.3);
}
.highlight-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(41,151,255,0.18) 0%, transparent 50%);
  opacity: 0; transition: opacity 0.3s; z-index: 2; pointer-events: none;
}
.highlight-card:hover::before { opacity: 1; }

/* ──────────────────────────────────────────
   Bento Grid — hover 動效
   ────────────────────────────────────────── */
.bento-box {
  transition: transform 0.3s cubic-bezier(0.25,1,0.5,1), border-color 0.3s, box-shadow 0.3s;
}
.bento-box:hover {
  transform: translateY(-5px);
  border-color: rgba(41,151,255,0.5) !important;
  box-shadow: 0 12px 36px rgba(41,151,255,0.15), 0 0 0 1px rgba(41,151,255,0.2);
}
.bento-box:hover .bento-bg-img { transform: scale(1.06); opacity: 0.85; }

/* ──────────────────────────────────────────
   Application Section — hover 動效
   ────────────────────────────────────────── */
.app-container { transition: box-shadow 0.3s; }
.app-container:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(41,151,255,0.1); }
.app-img-box { overflow: hidden; }
.app-img-box img { transition: transform 0.6s cubic-bezier(0.25,1,0.5,1); }
.app-container:hover .app-img-box img { transform: scale(1.04); }

/* ──────────────────────────────────────────
   全圖片區塊 hover
   ────────────────────────────────────────── */
.full-img-container { transition: box-shadow 0.4s; }
.full-img-container:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(41,151,255,0.15); }

/* ══════════════════════════════════════════════════════════
   Tablet RWD  ≤1024px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* ── 修正 Header（強制蓋過 inline .nav-links { display:flex } ）── */
  .nav-links  { display: none !important; }
  .hamburger  { display: flex !important; }

  /* ── Hero ── */
  .hero-section             { height: 72vh; min-height: 360px; }
  .hero-datasheet-btn       { bottom: 24px; right: 24px; padding: 11px 22px; font-size: 0.9rem; }
  .hero-title-img-container { max-width: 680px; }

  /* ── Carousel ── */
  .highlight-card   { width: 44vw; min-width: 240px; height: 420px; }
  .carousel-wrapper { padding: 1rem 3%; gap: 14px; }
  .section-title    { font-size: 2rem; }

  /* ── Spec Bento ── */
  .bento-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .span-2     { grid-column: span 2 !important; }
  .span-4     { grid-column: span 2 !important; }
  .row-2      { grid-row: span 1 !important; }

  /* ── App / Scenario：維持橫排，縮小字體與 padding ── */
  .app-text     { padding: 2rem 1.8rem; }
  .app-text h2  { font-size: 1.9rem; }
  .app-img-box  { min-height: 260px !important; }

  /* ── Feature grid ── */
  .feature-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Misc ── */
  .image-only-section { padding: 1.5rem; }
  .full-img-container { border-radius: 20px; }
  .specs-section      { padding: 3rem 1.5rem; }
}

/* ══════════════════════════════════════════════════════════
   Mobile RWD  ≤768px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Header（再次強制，防止任何 inline 樣式干擾）── */
  .nav-links { display: none !important; }
  .hamburger { display: flex !important; }

  /* ── Hero ── */
  .hero-section             { height: 56vh; min-height: 280px; }
  .hero-title-img-container { max-width: 78%; margin-bottom: 2vh; }
  .hero-datasheet-btn {
    bottom: 12px;
    right: 50%;
    transform: translateX(50%);
    padding: 8px 16px;
    font-size: 0.8rem;
    gap: 6px;
  }
  .hero-datasheet-btn:hover { transform: translateX(50%) translateY(-3px); }

  /* ── Section header ── */
  .highlights-header { padding: 0 1rem; margin-bottom: 0.7rem; }
  .section-title     { font-size: 1.45rem; }

  /* ── Carousel：flex → 2-column grid，不橫移 ── */
  .carousel-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    overflow-x: visible !important;
    padding: 0.7rem 1rem !important;
    gap: 8px !important;
  }
  .highlight-card {
    width: 100% !important;
    min-width: 0 !important;
    height: 220px !important;
    border-radius: 12px !important;
  }

  /* ── Full Image ── */
  .image-only-section { padding: 0.8rem; }
  .full-img-container { border-radius: 12px; }

  /* ── Application / Scenario
        文字在上（全寬橫向排列），圖片在下（固定高度）
   ── */
  .application-section { padding: 0.8rem; }
  .app-container {
    grid-template-columns: 1fr !important;   /* 單欄：文字 + 圖 */
    border-radius: 14px !important;
    overflow: hidden;
  }
  /* 文字區塊在上 */
  .app-text {
    order: 1 !important;
    padding: 1.1rem 1.2rem 0.9rem;
  }
  .app-text h3 { font-size: 0.8rem; margin-bottom: 0.25rem; }
  .app-text h2 { font-size: 1.15rem; margin-bottom: 0.5rem; }
  .app-text p  {
    font-size: 0.82rem; line-height: 1.6; margin-bottom: 0.8rem;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .btn-learn-more { font-size: 0.8rem; }
  /* 圖片在下，高度固定不拉長 */
  .app-img-box {
    order: 2 !important;
    min-height: 0 !important;
    height: 150px !important;
    max-height: 150px !important;
  }
  .app-img-box img { width: 100%; height: 100%; object-fit: cover; }

  /* ── Bento Spec：2欄 ── */
  .specs-section { padding: 1.8rem 0.8rem; }
  .bento-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .span-2, .span-4 { grid-column: span 2 !important; }
  .row-2           { grid-row: span 1 !important; }
  .bento-box       { border-radius: 12px; padding: 0.9rem; min-height: 140px; }
  .bento-data      { font-size: 1.5rem; }
  .bento-label     { font-size: 0.74rem; }
  .bento-desc      { font-size: 0.76rem; }

  /* ── Feature Grid：2欄 ── */
  .feature-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem; }

  /* ── W100 / status tables ── */
  .status-table { font-size: 0.78rem; }
  .specs-card   { padding: 1rem !important; }

  /* ── Modal ── */
  .modal-content { width: 92%; padding: 1.2rem; border-radius: 14px; }
  .modal-title   { font-size: 1.1rem; }
  .modal-desc    { font-size: 0.85rem; }
}

/* ══════════════════════════════════════════════════════════
   Small Mobile  ≤480px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-section             { height: 50vh; min-height: 240px; }
  .hero-title-img-container { max-width: 88%; }
  .hero-datasheet-btn       { padding: 7px 13px; font-size: 0.73rem; }

  /* Carousel：依然 2 欄，卡片更矮 */
  .carousel-wrapper { padding: 0.5rem 0.7rem !important; gap: 6px !important; }
  .highlight-card   { height: 175px !important; border-radius: 10px !important; }
  .section-title    { font-size: 1.25rem; }

  /* App / Scenario：圖更矮 */
  .app-img-box { height: 120px !important; max-height: 120px !important; }
  .app-text    { padding: 0.9rem 1rem 0.7rem; }
  .app-text h2 { font-size: 1rem; }
  .app-text p  { font-size: 0.78rem; -webkit-line-clamp: 3; }

  /* Bento */
  .bento-box  { padding: 0.75rem; min-height: 120px; }
  .bento-data { font-size: 1.3rem; }

  /* Feature */
  .feature-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .modal-content { padding: 0.9rem; }
}

/* ══════════════════════════════════════════════════════════
   極小螢幕 ≤360px — Carousel 改回單欄
   ══════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .carousel-wrapper { grid-template-columns: 1fr !important; }
  .highlight-card   { height: 210px !important; }
}

/* ══════════════════════════════════════════════════════════
   觸控裝置：停用 hover 動效
   ══════════════════════════════════════════════════════════ */
@media (hover: none) {
  .bento-box:hover         { transform: none; animation: none; }
  .highlight-card:hover    { transform: none; }
  .app-container:hover .app-img-box img { transform: none; }
  .full-img-container:hover { box-shadow: none; }
}

/* ══════════════════════════════════════════════════════════
   AOS — 行動端加速
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [data-aos] { transition-duration: 0.4s !important; transition-delay: 0s !important; }
}