/* 活動詳情封面：與專題橫幅一致——全寬定高 520px，圖拉伸填滿 */

.camp-cover--bleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    height: 520px;
    overflow: hidden;
    background: var(--site-surface-muted, #0f172a);
    line-height: 0;
}

.camp-cover--bleed .camp-cover-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    object-position: center;
    vertical-align: top;
}

.camp-cover--contained {
    width: 100%;
    height: 520px;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--site-surface-muted, #0f172a);
    line-height: 0;
}

.camp-cover--contained .camp-cover-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    object-position: center;
}

.camp-cover--portrait {
    display: flex;
    justify-content: center;
}

.camp-cover--portrait .camp-cover-img {
    display: block;
    width: auto;
    max-width: min(100%, 420px);
    height: auto;
    max-height: 560px;
    object-fit: contain;
    border-radius: 0.5rem;
}

/* bleed／contained 已定高拉伸：忽略比例 modifier，避免又改回 height:auto */
.camp-cover--bleed.camp-cover--ar-16x9,
.camp-cover--bleed.camp-cover--ar-4x3,
.camp-cover--bleed.camp-cover--ar-1x1,
.camp-cover--bleed.camp-cover--ar-3x4,
.camp-cover--contained.camp-cover--ar-16x9,
.camp-cover--contained.camp-cover--ar-4x3,
.camp-cover--contained.camp-cover--ar-1x1,
.camp-cover--contained.camp-cover--ar-3x4 {
    aspect-ratio: auto;
    height: 520px;
    max-height: none;
}

/* 手機對齊主頁 --front-mobile-gutter-x（每側 6px）；列 gutter 同步，避免負 margin 超出 container */
@media (max-width: 767.98px) {
    .container {
        --bs-gutter-x: calc(var(--front-mobile-gutter-x, 0.375rem) * 2);
    }

    .container .row {
        --bs-gutter-x: calc(var(--front-mobile-gutter-x, 0.375rem) * 2);
    }

    /* 全幅／內嵌與專題相同：手機按比例，cover 裁切。直圖 .camp-cover--portrait 維持 contain */
    .camp-cover--bleed,
    .camp-cover--contained,
    .camp-cover--bleed.camp-cover--ar-16x9,
    .camp-cover--contained.camp-cover--ar-16x9 {
        height: auto;
        aspect-ratio: 16 / 9;
        max-height: none;
    }

    .camp-cover--bleed.camp-cover--ar-4x3,
    .camp-cover--contained.camp-cover--ar-4x3 {
        height: auto;
        aspect-ratio: 4 / 3;
        max-height: none;
    }

    .camp-cover--bleed.camp-cover--ar-1x1,
    .camp-cover--contained.camp-cover--ar-1x1 {
        height: auto;
        aspect-ratio: 1 / 1;
        max-height: none;
    }

    .camp-cover--bleed.camp-cover--ar-3x4,
    .camp-cover--contained.camp-cover--ar-3x4 {
        height: auto;
        aspect-ratio: 3 / 4;
        max-height: none;
    }

    .camp-cover--bleed .camp-cover-img,
    .camp-cover--contained .camp-cover-img {
        object-fit: cover;
    }
}