/* IG 相關貼文卡片牆 —— 預設四欄，直式影片完整不裁切 */

.showlove-ig-wrap {
    margin: 1.5em 0;
}

.showlove-ig-heading {
    margin: 0 0 .75em;
    font-size: 1.1em;
    font-weight: 700;
}

.showlove-ig-grid {
    /* 卡片配色。佈景主題想改就覆寫這幾個變數即可 */
    --showlove-ig-card-bg: #fff;
    --showlove-ig-card-border: rgba(0, 0, 0, .08);
    --showlove-ig-card-shadow: 0 1px 3px rgba(0, 0, 0, .07);
    --showlove-ig-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, .13);

    --showlove-ig-gap-x: 14px;

    display: grid;

    /* 實際排幾欄。貼文數少於設定欄數時就只排那麼多欄 */
    grid-template-columns: repeat(var(--showlove-ig-shown, 4), minmax(0, 1fr));
    gap: 16px var(--showlove-ig-gap-x);
    align-items: stretch;

    /*
     * 貼文數少於欄數時置中，而且卡片維持原本的寬度、不會被撐大。
     * 算法：先算出「排滿時單欄有多寬」，再乘以實際欄數並補回中間的間距，
     * 當成整個格線的最大寬度，然後靠 margin auto 置中。
     * 排滿時算出來剛好是 100%，等於沒有作用。
     */
    max-width: calc(
        (100% - (var(--showlove-ig-columns, 4) - 1) * var(--showlove-ig-gap-x))
        / var(--showlove-ig-columns, 4)
        * var(--showlove-ig-shown, 4)
        + (var(--showlove-ig-shown, 4) - 1) * var(--showlove-ig-gap-x)
    );
    margin-left: auto;
    margin-right: auto;
}

@media (prefers-color-scheme: dark) {
    .showlove-ig-grid {
        --showlove-ig-card-bg: rgba(255, 255, 255, .06);
        --showlove-ig-card-border: rgba(255, 255, 255, .13);
        --showlove-ig-card-shadow: none;
        --showlove-ig-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, .45);
    }
}


/* ── 卡片本體：圖片與文字包在同一個容器裡 ───────────────── */

.showlove-ig-item {
    display: flex;
    flex-direction: column;
    height: 100%;

    background: var(--showlove-ig-card-bg);
    border: 1px solid var(--showlove-ig-card-border);
    border-radius: 12px;
    box-shadow: var(--showlove-ig-card-shadow);
    overflow: hidden;

    text-decoration: none;
    color: inherit;

    transition: transform .25s ease, box-shadow .25s ease;
}

.showlove-ig-item:hover,
.showlove-ig-item:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--showlove-ig-card-shadow-hover);
}

.showlove-ig-item:focus-visible {
    outline: 2px solid #c13584;
    outline-offset: 2px;
}


/* ── 圖片區 ─────────────────────────────────────────────── */

.showlove-ig-media {
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 0;

    /* 由短代碼的 ratio 參數決定，預設 3:4 */
    aspect-ratio: var(--showlove-ig-ratio, 3 / 4);

    background: #15161a;
}

/*
 * 同一張圖放大模糊後鋪在底層，填掉 contain 在左右（或上下）留下的空白。
 * 直式影片 9:16 放進 3:4 的框，左右各留約 12% 寬度，由這層補滿，
 * 看起來像畫面延伸出去，而不是兩條突兀的黑條。
 * 圖檔網址與前景相同，瀏覽器只會下載一次。
 */
.showlove-ig-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    background-size: cover;
    background-position: center;
    filter: blur(24px) saturate(1.25);
    transform: scale(1.3);
    opacity: .65;
    pointer-events: none;
}

/*
 * ⚠️ 這裡的 !important 是必要的，不是偷懶。
 *
 * 佈景主題與 Elementor 幾乎都有「img { height: auto !important }」這類全域規則。
 * 被蓋掉之後我們的 height: 100% 失效，9:16 的圖會以原始比例撐開、
 * 超出容器再被 overflow: hidden 裁掉上下 —— 看起來就是「滿版且被裁切」。
 * 而且這種狀態下 object-fit 根本不會作用，因為圖片元素本身沒有被限制尺寸。
 *
 * 選擇器也刻意寫長以提高權重，兩者並用才擋得住各種佈景主題。
 */
.showlove-ig-grid .showlove-ig-media .showlove-ig-thumb {
    position: relative;
    z-index: 1;
    display: block;

    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    /* contain = 整張圖完整顯示，絕不裁切（預設）
       cover   = 填滿容器、裁掉超出的部分 */
    object-fit: var(--showlove-ig-fit, contain) !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ── 文字區 ─────────────────────────────────────────────── */

/*
 * 文字區分兩層是必要的，不能合成一層：
 * 外層要 flex: 1 撐開高度讓卡片底部對齊，但 flex 項目的 display 會被
 * 瀏覽器強制轉成 block，而 -webkit-line-clamp 只在 display: -webkit-box
 * 上才有效。合成一層的話截行會失效，文字會溢出卡片被切掉半行。
 */
.showlove-ig-text {
    display: block;
    flex: 1 1 auto;

    padding: 11px 13px 13px;
    margin: 0;

    font-size: .85em;
    line-height: 1.55;
    color: inherit;
    opacity: .82;
    word-break: break-word;
}

.showlove-ig-text-inner {
    display: -webkit-box;
    -webkit-line-clamp: var(--showlove-ig-lines, 2);
    line-clamp: var(--showlove-ig-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.showlove-ig-item:hover .showlove-ig-text {
    opacity: 1;
}


/* ── 影片／多圖角標 ─────────────────────────────────────── */

.showlove-ig-badge {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7));
    pointer-events: none;
    z-index: 2;
}

.showlove-ig-badge-video {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

.showlove-ig-badge-album {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='8' y='3' width='13' height='13' rx='2'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h11'/%3E%3C/svg%3E");
}


/* ── 手機兩欄 ───────────────────────────────────────────── */

@media (max-width: 767px) {
    .showlove-ig-grid {
        --showlove-ig-gap-x: 10px;

        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px var(--showlove-ig-gap-x);

        /* 手機固定兩欄，桌機那套置中算式在這裡不適用 */
        max-width: none;
    }

    /* 只有一篇時獨占一整列，不要留半邊空白 */
    .showlove-ig-grid[data-count="1"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .showlove-ig-text {
        padding: 9px 10px 11px;
        font-size: .8em;
    }
}


/* ── 舊瀏覽器沒有 aspect-ratio 時的退路（以 3:4 計） ────── */

@supports not (aspect-ratio: 3 / 4) {
    .showlove-ig-media {
        height: 0;
        padding-bottom: 133.33%;
    }

    .showlove-ig-grid .showlove-ig-media .showlove-ig-thumb {
        position: absolute;
        top: 0;
        left: 0;
    }
}