/* ================== */
/* 扩展边框的卡片样式 */
/* ================== */
/* 基础卡片样式 */
.card-expanding-border {
    position: relative;
    background: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--border-light);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* 默认标题样式 */
.card-expanding-border h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wp--preset--color--main);
    transition: color 0.3s ease;
}

/* Hover 时标题变色 */
.card-expanding-border:hover h3 {
    color: var(--wp--preset--color--primary);
}

/* 默认描述样式 */
.card-expanding-border p {
    color: var(--wp--preset--color--main);
    line-height: 1.6;
    padding-top: 0.67rem;
    font-size: 1.2rem;
    font-weight: 200;
    transition: color 0.3s ease;
}

.card-expanding-border:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}

/* 用伪元素画四边：初始长度为0 */
.card-expanding-border::before,
.card-expanding-border::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    pointer-events: none;
    transition: all 0.5s ease;
}

/* hover 展开边框：用渐变控制四条线条 */
.card-expanding-border::before {
    border-top-color: var(--wp--preset--color--primary);
    border-bottom-color: var(--wp--preset--color--primary);
    clip-path: inset(0 50% 0 50%);
    /* 从中间开始，左右收缩 */
}

.card-expanding-border::after {
    border-left-color: var(--wp--preset--color--primary);
    border-right-color: var(--wp--preset--color--primary);
    clip-path: inset(50% 0 50% 0);
    /* 从中间开始，上下收缩 */
}

.card-expanding-border:hover::before {
    clip-path: inset(0 0 0 0);
    /* 展开上下边 */
}

.card-expanding-border:hover::after {
    clip-path: inset(0 0 0 0);
    /* 展开左右边 */
}