/* 首頁分隔線樣式（layout_order 的 divider 區塊 variant）
   fade＝原本的漸層細線（預設，沿用 index.php 內的 .wm-section-divider，不需要寫在這裡）
   其餘 5 種全部用純 CSS 自己畫，不使用任何外部圖片、字型或圖庫。 */
.wm-section-divider[data-variant] {
    --dv: #cbd5e1;
    position: relative;
}

.wm-section-divider[data-variant="dots"] {
    height: 6px;
    background: radial-gradient(circle, var(--dv) 2px, transparent 2.5px) 0 50% / 16px 6px repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.wm-section-divider[data-variant="double"] {
    height: 6px;
    background: none;
    border-top: 1px solid var(--dv);
    border-bottom: 1px solid var(--dv);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.wm-section-divider[data-variant="diamond"] {
    height: 12px;
    background:
        linear-gradient(90deg, transparent, var(--dv)) left center / calc(50% - 16px) 1px no-repeat,
        linear-gradient(90deg, var(--dv), transparent) right center / calc(50% - 16px) 1px no-repeat;
}

.wm-section-divider[data-variant="diamond"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    background: var(--dv);
    transform: translate(-50%, -50%) rotate(45deg);
}

.wm-section-divider[data-variant="dashed"] {
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--dv) 0 10px, transparent 10px 18px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.wm-section-divider[data-variant="pixel"] {
    height: 8px;
    background: linear-gradient(90deg, var(--dv) 0 8px, transparent 8px 16px) 0 0 / 16px 8px repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
