/* ============================================================================
 * common/widget/11-image.css — 純圖片 widget
 * ============================================================================
 *   載入序：11 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *   來源：issue #694 自 common/widget.css L1879~2068 切出；phase 2 已完成斷點統一
 *
 *   [共用格線] 本 widget 的多欄排列使用 .widget-media-grid，該格線與影片 widget 共用，
 *   phase 2 起收攏於 10-video.css 尾段（兩者中較早載入者）。
 *
 *   [容器寬度] blade 外殼為 .container.container-{width}，寬度本就跟隨站台標準階梯
 *   （1170／1320），phase 2 無需另行收斂。
 *
 *   [斷點] 768 → 767.98、992 → 991.98。前者原與格線的 min-width: 768 重疊一像素：
 *   恰好 768px 時格線已切成多欄、widget 卻仍套用手機內距與圖距，修正後一致。
 *
 *   [已移出] 本檔下半部原有一整組 Swiper 套件全域覆寫（.swiper-wrapper／
 *   .swiper-nav-custom／.swiper-other-button-*／.swiper-button-lock／.swiper-pagination*），
 *   並非圖片 widget 專有（圖文 A、商品 B 等其他 swiper 也吃），僅因舊單檔順序落在此處。
 *   已與 16-baseline-override.css 的 .swiper-slide 系一併彙整至 20-swiper.css。
 *   本檔自此只剩純圖片 widget 自身的規則。
 *
 *   [好覆蓋，issue #874] 可調值（區塊上下內距、圖框長寬比與下外距）改由
 *   .widget-image（0,1,0）上的自訂屬性承載，RWD 差異改為在 @media 內覆寫變數。
 *   .img-Box 是與 CKEditor 內容共用的通用 class，選擇器維持原樣不降權。
 * ==========================================================================*/

/* 純圖片 */

.widget-image {
    --widget-image-pad: 30px 0; /* 區塊上下內距 */
    --widget-image-ratio: 16/9; /* 圖框長寬比 */
    --widget-image-gap: 0px; /* 圖框下外距 */
    width: 100%;
    height: 100%;
    margin: 0px auto;
    padding: var(--widget-image-pad, 30px 0);
    position: relative;
}

.widget-image-bgImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.widget-image-bg {
    width: 100%;
    height: 100%;
}

.img-Box {
    width: 100%;
    height: auto;
    aspect-ratio: var(--widget-image-ratio, 16/9);
    overflow: hidden;
    margin-bottom: var(--widget-image-gap, 0px);
}

/* RWD 改為覆寫 .widget-image 上的變數（見檔頭 [好覆蓋]） */
@media (max-width: 767.98px) {
    .widget-image {
        --widget-image-pad: 15px 0;
        --widget-image-gap: 30px;
    }
}

.img-Box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* 圖片 widget 內容圖（issue #706）：取代 Bootstrap w-100 工具 class 的語意 class，
   等價 width:100%；高度與裁切仍由上方 .img-Box img 規則承接，各主題均載入本檔，
   視覺不變。 */
/* #1027 補 max-width：同 .widgetImgResponsive,父層為 inline <a> 時 width:100% 會與
   內容互相取值而退回原生尺寸撐破版面,需以 max-width 封住。 */
.widget-image__img {
    width: 100%;
    max-width: 100%;
}