/* ================================================================
   RS Loop Carousel — 前台樣式
   Version: 1.0.0
   ================================================================ */

/* ── CSS Variables ─────────────────────── */
:root {
    --rsloop-color-primary: #0A2F86;
    --rsloop-color-gray-300: #D2D6DB;
    --rsloop-color-gray-600: #4D5761;
    --rsloop-color-text: #333333;
    --rsloop-color-sub: #555555;
    --rsloop-color-disabled: #808080;

    --rsloop-card-width: 370px;
    --rsloop-card-gap: 60px;
    --rsloop-card-radius: 8px;
    --rsloop-card-img-height: 255px;

    --rsloop-arrow-size: 68px;
    --rsloop-arrow-gap: 20px;
    --rsloop-controls-gap: 60px;
    --rsloop-controls-mt: 40px;
}

/* ── Wrapper ───────────────────────────── */
.rsloop-wrapper {
    width: 100%;
    position: relative;
}

/* ── Splide overrides ─────────────────── */
.rsloop-wrapper .rsloop-splide {
    overflow: visible;          /* 讓右邊溢出可見 */
    width: 100%;
}

.rsloop-wrapper .rsloop-splide .splide__track {
    overflow: hidden;           /* track 必須 hidden，Splide 才能正常運作 */
}

.rsloop-wrapper .rsloop-splide .splide__list {
    /* Splide 自己處理 */
}

.rsloop-wrapper .rsloop-splide .splide__slide {
    width: var(--rsloop-card-width);
    height: auto;
}

/* ── Card ──────────────────────────────── */
.rsloop-card__link {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.rsloop-card__link:hover {
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

/* Image */
.rsloop-card__image {
    width: 100%;
    height: var(--rsloop-card-img-height);
    border-radius: var(--rsloop-card-radius);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.rsloop-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rsloop-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #163BD1 0%, #4188F7 100%);
    border-radius: var(--rsloop-card-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content */
.rsloop-card__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rsloop-card__meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rsloop-card__date {
    color: var(--rsloop-color-sub);
    font-size: 16px;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 1.6px;
}

.rsloop-card__cat {
    color: var(--rsloop-color-gray-600);
    font-size: 16px;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 1.6px;
    text-decoration: underline;
}

.rsloop-card__title {
    color: var(--rsloop-color-text);
    font-size: 18px;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 1.8px;
    margin: 0;
}

.rsloop-card__excerpt {
    color: var(--rsloop-color-gray-600);
    font-size: 14px;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 1.4px;
    /* 2 行截斷 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Controls ──────────────────────────── */
.rsloop-controls {
    display: flex;
    align-items: center;
    gap: var(--rsloop-controls-gap);
    margin-top: var(--rsloop-controls-mt);
    max-width: 1280px;
    width: 100%;
    padding-left: 0;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Progress bar */
.rsloop-progress {
    flex: 1 1 0;
    height: 4px;
    background: var(--rsloop-color-gray-300);
    position: relative;
    border-radius: 0;
}

.rsloop-progress__bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 4px;
    background: var(--rsloop-color-primary);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 0;
}

/* Arrows container */
.rsloop-arrows {
    display: flex;
    align-items: center;
    gap: var(--rsloop-arrow-gap);
    flex-shrink: 0;
}

/* Arrow buttons — normal #808080 寫死在 SVG */
.rsloop-arrow {
    width: var(--rsloop-arrow-size);
    height: var(--rsloop-arrow-size);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rsloop-arrow svg {
    width: 100%;
    height: 100%;
}

.rsloop-arrow svg circle,
.rsloop-arrow svg path {
    transition: stroke 0.2s ease, fill 0.2s ease;
}

/* hover / active 變藍 */
.rsloop-arrow:hover svg circle,
.rsloop-arrow:active svg circle {
    stroke: #0A2F86;
}

.rsloop-arrow:hover svg path,
.rsloop-arrow:active svg path {
    fill: #0A2F86;
}

/* ── 響應式 ────────────────────────────── */

/* 平板 768–1439 */
@media ( max-width: 1439px ) {
    :root {
        --rsloop-card-gap: 60px;
    }
}

/* 手機 <768 */
@media ( max-width: 767px ) {
    :root {
        --rsloop-card-width: 300px;
        --rsloop-card-gap: 30px;
        --rsloop-card-img-height: 207px;

        --rsloop-arrow-size: 48px;
        --rsloop-arrow-gap: 14px;
        --rsloop-controls-gap: 30px;
        --rsloop-controls-mt: 30px;
    }

    .rsloop-card__date,
    .rsloop-card__cat {
        font-size: 14px;
    }

    .rsloop-card__title {
        font-size: 16px;
    }

    .rsloop-card__excerpt {
        font-size: 13px;
    }
}