@layer components {
    /* ============================================================
     * Carousel 共用元件（可重用於任何 Swiper 輪播）
     *   - 左右箭頭：.carousel-nav (+ --prev / --next)
     *   - 指示點  ：.carousel-dots
     * 各輪播實例再加上自己的 hook class（如 .home-carousel-prev），
     * 供 Swiper 的 navigation / pagination 綁定，視覺則共用本元件。
     * ============================================================ */
    /* ----------------------------
     * 左右箭頭：可按範圍 = 圖片高度
     * ---------------------------- */
    .carousel-nav {
        @apply absolute top-0 bottom-0 z-10 flex items-center;
        width      : clamp(48px, 12%, 96px);
        border     : 0;
        cursor     : pointer;
        appearance : none;
        background : transparent;
        transition : background-color 200ms ease;
    }

    .carousel-nav--prev {
        @apply left-0 justify-start;
        padding-left : clamp(0.5rem, 2vw, 1.5rem);
        background   : linear-gradient(to right, rgba(0, 0, 0, 0.35), transparent);
    }

    .carousel-nav--next {
        @apply right-0 justify-end;
        padding-right : clamp(0.5rem, 2vw, 1.5rem);
        background    : linear-gradient(to left, rgba(0, 0, 0, 0.35), transparent);
    }

    .carousel-nav:hover {
        background-color : rgba(0, 0, 0, 0.15);
    }

    /* 箭頭圖示：圓形底 + 陰影，任何圖片上都清楚可見。
       內含 FontAwesome <i>，靠 flex 置中，避免字元字形偏移。 */
    .carousel-nav__icon {
        @apply flex items-center justify-center rounded-full text-white;
        width       : clamp(2rem, 5vw, 3rem);
        height      : clamp(2rem, 5vw, 3rem);
        font-size   : clamp(1rem, 2.2vw, 1.5rem);
        line-height : 1;
        background  : rgba(0, 0, 0, 0.35);
        box-shadow  : 0 1px 3px rgba(0, 0, 0, 0.4);
        transition  : background-color 200ms ease, transform 200ms ease;
    }

    .carousel-nav__icon > i {
        @apply block leading-none;
    }

    .carousel-nav:hover .carousel-nav__icon {
        background : var(--color-brand-secondary);
        transform  : scale(1.08);
    }

    /* 鍵盤聚焦可見性 */
    .carousel-nav:focus-visible {
        outline : none;
    }

    .carousel-nav:focus-visible .carousel-nav__icon {
        outline        : 2px solid #FFFFFF;
        outline-offset : 2px;
    }

    /* Swiper 在非 loop 模式到頭/尾時會掛上此 class */
    .carousel-nav.swiper-button-disabled {
        @apply pointer-events-none opacity-0;
    }

    .carousel-nav:disabled,
    .carousel-nav[aria-disabled="true"] {
        @apply pointer-events-none opacity-50;
    }

    .home-carousel-loader {
        transition : opacity 250ms ease, visibility 250ms ease;
    }

    .home-carousel.is-ready .home-carousel-loader {
        visibility : hidden;
        opacity    : 0;
    }

    .home-carousel-loader__bar {
        width     : 45%;
        animation : home-carousel-loader 1.1s ease-in-out infinite;
    }

    @keyframes home-carousel-loader {
        0% {
            transform : translateX(-120%);
        }

        100% {
            transform : translateX(260%);
        }
    }

    /* ----------------------------
     * 指示點：放大 + 高對比，疊在圖片底部
     * ---------------------------- */
    .carousel-dots {
        @apply absolute inset-x-0 z-10 text-center;
        bottom : clamp(0.5rem, 2vw, 1.25rem);
    }

    .carousel-dots .swiper-pagination-bullet {
        width         : 10px;
        height        : 5px !important;
        margin        : 0 5px !important;
        background    : rgba(255, 255, 255, 0.6);
        opacity       : 1;
        box-shadow    : 0 1px 3px rgba(0, 0, 0, 0.45);
        transition    : width 200ms ease, background-color 200ms ease;
        border-radius : 0 !important;
    }

    .carousel-dots .swiper-pagination-bullet-active {
        width         : 28px !important;
        height        : 5px !important;
        border-radius : 0 !important;
        background    : var(--color-lime-500) !important;
        box-shadow    : 0 1px 3px rgba(0, 0, 0, 0.45) !important;
    }

    .article-footstep-swiper {
        @apply relative overflow-hidden rounded-box border border-base-300 bg-base-100 p-3 shadow-sm;
    }

    .article-footstep-swiper .swiper-wrapper {
        @apply items-stretch;
    }

    .article-footstep-swiper .swiper-slide {
        @apply flex h-auto items-center justify-center rounded-box bg-base-200;
    }

    .article-footstep-swiper__image {
        @apply mx-auto block h-72 w-full rounded-box object-contain p-2 md:h-56;
    }

    /* 垂直置中用 inset-y-0 + my-auto（auto margin），而非 -translate-y-1/2。
     * daisyUI 的 .btn:active 會設定 `translate: 0 .5px`，與 Tailwind v4 的
     * translate utility 共用同一個 `translate` CSS 屬性 → 按下瞬間會把置中的
     * translate 覆蓋掉，按鈕整顆往下掉半個高度（按頂部會掉出游標 → 點不到）。
     * 改用 auto margin 後不佔用 translate，按下時只剩 daisyUI 那 0.5px 的回饋。 */
    .article-footstep-swiper__nav {
        @apply pointer-events-auto absolute inset-y-0 z-30 my-auto shadow-md;
    }

    .article-footstep-swiper__nav--prev {
        @apply left-2;
    }

    .article-footstep-swiper__nav--next {
        @apply right-2;
    }
}