/* sky-effects.css — styles for sky-effects.js (slider, entrance animations, lightbox).
   Origin: 2026-10-31 (Claude - 老爹 NAS WordPress → 靜態站 sky.naviworld.net) */

/* 沒有 JavaScript 時也要看得到內容：Elementor 預設把進場元素藏起來 */
html:not(.sky-js) .elementor-invisible { visibility: visible !important; }

/* ---------- Entrance animations ---------- */
.sky-animate { animation-duration: 0.9s; animation-fill-mode: both; }
@keyframes sky-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sky-fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
@keyframes sky-fadeInDown { from { opacity: 0; transform: translate3d(0, -40px, 0); } to { opacity: 1; transform: none; } }
@keyframes sky-fadeInLeft { from { opacity: 0; transform: translate3d(-40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes sky-fadeInRight { from { opacity: 0; transform: translate3d(40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes sky-zoomIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
.sky-fadeIn { animation-name: sky-fadeIn; }
.sky-fadeInUp, .sky-slideInUp { animation-name: sky-fadeInUp; }
.sky-fadeInDown, .sky-slideInDown { animation-name: sky-fadeInDown; }
.sky-fadeInLeft, .sky-slideInLeft { animation-name: sky-fadeInLeft; }
.sky-fadeInRight, .sky-slideInRight { animation-name: sky-fadeInRight; }
.sky-zoomIn, .sky-bounceIn { animation-name: sky-zoomIn; }

/* ---------- Slider ---------- */
.sky-slider { position: relative; overflow: hidden; }
.sky-slider .swiper-wrapper { display: flex; transition-property: transform; transition-timing-function: ease; }
.sky-slider .swiper-slide { flex: 0 0 100%; width: 100%; position: relative; }
.sky-slider--fade .swiper-wrapper { display: grid; transform: none !important; }
.sky-slider--fade .swiper-slide { grid-area: 1 / 1; opacity: 0; transition-property: opacity; }
.sky-slider--fade .swiper-slide.is-active { opacity: 1; z-index: 1; }
.sky-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.25); color: #fff; font-size: 30px; line-height: 40px; cursor: pointer;
}
.sky-slider__arrow:hover { background: rgba(0, 0, 0, 0.45); }
.sky-slider__arrow:focus-visible, .sky-slider__dot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sky-slider__arrow--prev { left: 12px; }
.sky-slider__arrow--next { right: 12px; }
.sky-slider__dots { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 4px; }
.sky-slider__dot {
  width: 24px; height: 24px; padding: 8px; border: 0; background: none; cursor: pointer;
}
.sky-slider__dot::before {
  content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.35);
}
.sky-slider__dot.is-active::before { background: #000; }
.sky-sticky-top { position: sticky; top: 0; z-index: 50; }

/* ---------- Lightbox ---------- */
.sky-lightbox {
  position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.88); padding: 48px 56px;
}
.sky-lightbox[hidden] { display: none; }
.sky-lightbox-open, .sky-lightbox-open body { overflow: hidden; }
.sky-lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.sky-lightbox__figure img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); }
.sky-lightbox__figure figcaption { color: #eee; margin-top: 10px; font-size: 14px; }
.sky-lightbox__close, .sky-lightbox__nav {
  position: absolute; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer;
  width: 48px; height: 48px; border-radius: 50%; font-size: 32px; line-height: 44px;
}
.sky-lightbox__close:hover, .sky-lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }
.sky-lightbox__close:focus-visible, .sky-lightbox__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sky-lightbox__close { top: 12px; right: 12px; }
.sky-lightbox__nav--prev { left: 8px; top: 50%; transform: translateY(-50%); }
.sky-lightbox__nav--next { right: 8px; top: 50%; transform: translateY(-50%); }
.sky-lightbox--single .sky-lightbox__nav { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sky-animate { animation: none !important; }
  .sky-slider .swiper-wrapper, .sky-slider .swiper-slide { transition: none !important; }
}

/* ---------- Elementor 原生的箭頭與圓點（字型圖示未載入，改用上方 sky-slider 的） ---------- */
.sky-slider .elementor-swiper-button,
.sky-slider ~ .elementor-swiper-button,
.elementor-swiper .elementor-swiper-button,
.elementor-swiper .swiper-pagination { display: none !important; }

/* ---------- Elementor Pro 文章卡片（posts cards） ---------- */
.elementor-posts--skin-cards.elementor-grid {
  display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px;
}
.elementor-grid-2 .elementor-posts--skin-cards.elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.elementor-grid-1 .elementor-posts--skin-cards.elementor-grid { grid-template-columns: 1fr; }
@media (max-width: 1024px) {
  .elementor-grid-tablet-2 .elementor-posts--skin-cards.elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .elementor-grid-mobile-1 .elementor-posts--skin-cards.elementor-grid { grid-template-columns: 1fr; }
}
.elementor-posts--skin-cards .elementor-post { margin: 0; }
.elementor-post__card {
  position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 14px; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.25s, transform 0.25s;
}
.elementor-post__card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16); transform: translateY(-2px); }
.elementor-post__thumbnail__link { display: block; }
.elementor-post__thumbnail { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f2f2f2; }
.elementor-post__thumbnail img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; transition: transform 0.4s; }
.elementor-post__card:hover .elementor-post__thumbnail img { transform: scale(1.04); }
.elementor-post__badge {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  background: #61ce70; color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
  padding: 7px 14px; border-radius: 999px;
}
.elementor-post__text { flex: 1; padding: 20px 26px 0; }
.elementor-post__title { margin: 0 0 12px; font-size: 21px; line-height: 1.35; font-weight: 600; }
.elementor-post__title a { color: #333; text-decoration: none; }
.elementor-post__title a:hover { color: #000; text-decoration: underline; }
.elementor-post__excerpt p { margin: 0 0 14px; color: #666; font-size: 14px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.elementor-post__read-more { display: inline-block; margin-bottom: 18px; color: #61ce70; font-size: 12px; font-weight: 700; text-decoration: none; }
.elementor-post__meta-data { border-top: 1px solid #eaeaea; padding: 12px 26px; color: #999; font-size: 12px; }
.elementor-pagination { text-align: center; margin: 28px 0; }
.elementor-pagination .page-numbers { display: inline-block; min-width: 32px; padding: 6px 8px; margin: 2px; }
.elementor-pagination .page-numbers.current { font-weight: 700; }

/* ---------- Elementor 版面基本規則（原本在 Elementor 動態載入的樣式表裡） ---------- */
.elementor img { max-width: 100%; height: auto; }
.elementor-widget-image img { display: block; margin: 0 auto; }
@media (max-width: 767px) {
  .elementor-section .elementor-container,
  .elementor-container { flex-wrap: wrap; }
  .elementor-column, .elementor-col-33, .elementor-col-50, .elementor-col-25, .elementor-col-66 { width: 100% !important; }
}
/* 原站有元素被設成超過 100% 寬（例如 103.951%），手機上會撐出橫向捲軸 */
@media (max-width: 767px) {
  .elementor-widget { max-width: 100% !important; }
  html, body { overflow-x: hidden; }
}